/**
 * StillSafe - Main Stylesheet
 * 
 * @package StillSafe
 * @version 1.0
 */

/* ============================================================
   CSS Variables / Custom Properties
   ============================================================ */
:root {
    /* Brand Colors */
    --ss-primary: #198754;
    --ss-primary-dark: #146c43;
    --ss-primary-light: #d1e7dd;
    --ss-secondary: #6c757d;
    --ss-success: #198754;
    --ss-danger: #dc3545;
    --ss-warning: #ffc107;
    --ss-info: #0dcaf0;
    
    /* Neutral Colors */
    --ss-white: #ffffff;
    --ss-light: #f8f9fa;
    --ss-gray-100: #f8f9fa;
    --ss-gray-200: #e9ecef;
    --ss-gray-300: #dee2e6;
    --ss-gray-400: #ced4da;
    --ss-gray-500: #adb5bd;
    --ss-gray-600: #6c757d;
    --ss-gray-700: #495057;
    --ss-gray-800: #343a40;
    --ss-gray-900: #212529;
    --ss-dark: #212529;
    
    /* Typography */
    --ss-font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ss-font-size-base: 1rem;
    --ss-line-height-base: 1.6;
    
    /* Spacing */
    --ss-spacing-xs: 0.25rem;
    --ss-spacing-sm: 0.5rem;
    --ss-spacing-md: 1rem;
    --ss-spacing-lg: 1.5rem;
    --ss-spacing-xl: 2rem;
    --ss-spacing-xxl: 3rem;
    
    /* Border Radius */
    --ss-radius-sm: 0.375rem;
    --ss-radius-md: 0.5rem;
    --ss-radius-lg: 0.75rem;
    --ss-radius-xl: 1rem;
    --ss-radius-pill: 50rem;
    --ss-radius-circle: 50%;
    
    /* Shadows */
    --ss-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --ss-shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    --ss-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.125);
    
    /* Transitions */
    --ss-transition-fast: 150ms ease-in-out;
    --ss-transition-base: 300ms ease-in-out;
    --ss-transition-slow: 500ms ease-in-out;
}

/* ============================================================
   Base Styles
   ============================================================ */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--ss-font-family);
    font-size: var(--ss-font-size-base);
    line-height: var(--ss-line-height-base);
    color: var(--ss-gray-800);
    background-color: var(--ss-gray-100);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

/* ============================================================
   Typography
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: var(--ss-spacing-md);
}

h1, .h1 { font-size: 2.25rem; }
h2, .h2 { font-size: 1.875rem; }
h3, .h3 { font-size: 1.5rem; }
h4, .h4 { font-size: 1.25rem; }
h5, .h5 { font-size: 1.125rem; }
h6, .h6 { font-size: 1rem; }

p {
    margin-bottom: var(--ss-spacing-md);
}

a {
    color: var(--ss-primary);
    text-decoration: none;
    transition: color var(--ss-transition-fast);
}

a:hover {
    color: var(--ss-primary-dark);
    text-decoration: underline;
}

/* ============================================================
   Skip Link (Accessibility)
   ============================================================ */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--ss-primary);
    color: var(--ss-white);
    padding: var(--ss-spacing-sm) var(--ss-spacing-md);
    z-index: 9999;
    transition: top var(--ss-transition-fast);
}

.skip-link:focus {
    top: 0;
    outline: 3px solid var(--ss-warning);
    outline-offset: 2px;
}

/* ============================================================
   Navigation
   ============================================================ */
.navbar {
    box-shadow: var(--ss-shadow-sm);
}

.navbar-brand {
    font-weight: 600;
    font-size: 1.25rem;
}

.nav-link {
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: var(--ss-radius-sm);
    transition: background-color var(--ss-transition-fast);
}

.navbar-dark .nav-link:hover,
.navbar-dark .nav-link:focus {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ============================================================
   Cards
   ============================================================ */
.card {
    border: none;
    border-radius: var(--ss-radius-lg);
    box-shadow: var(--ss-shadow-sm);
    transition: box-shadow var(--ss-transition-base);
}

.card:hover {
    box-shadow: var(--ss-shadow-md);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--ss-gray-200);
    font-weight: 600;
}

.card-footer {
    background-color: transparent;
    border-top: 1px solid var(--ss-gray-200);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
    font-weight: 500;
    padding: 0.625rem 1.25rem;
    border-radius: var(--ss-radius-md);
    transition: all var(--ss-transition-fast);
}

.btn:focus {
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

.btn-lg {
    padding: 0.875rem 1.75rem;
    font-size: 1.125rem;
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

/* ============================================================
   Check-In Button (Main Feature)
   ============================================================ */
.checkin-container {
    text-align: center;
    padding: var(--ss-spacing-xxl) var(--ss-spacing-md);
}

.checkin-btn {
    width: 200px;
    height: 200px;
    border-radius: var(--ss-radius-circle);
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 4px solid transparent;
    box-shadow: 0 10px 40px rgba(25, 135, 84, 0.3);
    transition: all var(--ss-transition-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.5rem;
}

.checkin-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 50px rgba(25, 135, 84, 0.4);
}

.checkin-btn:active {
    transform: scale(0.98);
}

.checkin-btn i {
    font-size: 3rem;
}

.checkin-btn.btn-success {
    background: linear-gradient(135deg, #198754 0%, #146c43 100%);
}

.checkin-btn.btn-warning {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    color: var(--ss-dark);
}

.checkin-btn.btn-danger {
    background: linear-gradient(135deg, #dc3545 0%, #bb2d3b 100%);
}

/* ============================================================
   Countdown Timer
   ============================================================ */
.countdown-display {
    font-size: 3rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 2px;
    margin: var(--ss-spacing-lg) 0;
}

.countdown-label {
    font-size: 0.875rem;
    color: var(--ss-gray-600);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.countdown-segment {
    display: inline-block;
    text-align: center;
    padding: 0 var(--ss-spacing-md);
}

.countdown-segment .number {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

.countdown-segment .label {
    font-size: 0.75rem;
    color: var(--ss-gray-600);
    text-transform: uppercase;
}

/* Status colors for countdown */
.countdown-safe { color: var(--ss-success); }
.countdown-warning { color: var(--ss-warning); }
.countdown-danger { color: var(--ss-danger); }

/* ============================================================
   Status Indicator
   ============================================================ */
.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--ss-spacing-sm);
    padding: var(--ss-spacing-sm) var(--ss-spacing-md);
    border-radius: var(--ss-radius-pill);
    font-weight: 500;
    font-size: 0.875rem;
}

.status-indicator.status-safe {
    background-color: var(--ss-primary-light);
    color: var(--ss-primary-dark);
}

.status-indicator.status-warning {
    background-color: #fff3cd;
    color: #856404;
}

.status-indicator.status-danger {
    background-color: #f8d7da;
    color: #721c24;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--ss-radius-circle);
    animation: pulse 2s infinite;
}

.status-safe .status-dot { background-color: var(--ss-success); }
.status-warning .status-dot { background-color: var(--ss-warning); }
.status-danger .status-dot { background-color: var(--ss-danger); }

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ============================================================
   Forms
   ============================================================ */
.form-label {
    font-weight: 500;
    margin-bottom: var(--ss-spacing-xs);
}

.form-control,
.form-select {
    border-radius: var(--ss-radius-md);
    border-color: var(--ss-gray-300);
    padding: 0.625rem 0.875rem;
    transition: border-color var(--ss-transition-fast), box-shadow var(--ss-transition-fast);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ss-primary);
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.15);
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--ss-danger);
}

.form-text {
    font-size: 0.875rem;
    color: var(--ss-gray-600);
}

.invalid-feedback {
    font-size: 0.875rem;
}

/* Checkbox and Radio custom styling */
.form-check-input:checked {
    background-color: var(--ss-primary);
    border-color: var(--ss-primary);
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

/* ============================================================
   Tables
   ============================================================ */
.table {
    --bs-table-bg: transparent;
}

.table > :not(caption) > * > * {
    padding: var(--ss-spacing-md);
}

.table thead th {
    font-weight: 600;
    background-color: var(--ss-gray-100);
    border-bottom-width: 2px;
}

/* ============================================================
   Alerts / Flash Messages
   ============================================================ */
.alert {
    border: none;
    border-radius: var(--ss-radius-md);
    border-left: 4px solid;
}

.alert-success { border-left-color: var(--ss-success); }
.alert-danger { border-left-color: var(--ss-danger); }
.alert-warning { border-left-color: var(--ss-warning); }
.alert-info { border-left-color: var(--ss-info); }

/* ============================================================
   Wellness Tips Card
   ============================================================ */
.wellness-tip-card {
    background: linear-gradient(135deg, #d1e7dd 0%, #c3e6cb 100%);
    border-radius: var(--ss-radius-lg);
    padding: var(--ss-spacing-lg);
    position: relative;
    overflow: hidden;
}

.wellness-tip-card::before {
    content: '"';
    position: absolute;
    top: -20px;
    left: 10px;
    font-size: 8rem;
    color: rgba(25, 135, 84, 0.1);
    font-family: Georgia, serif;
    line-height: 1;
}

.wellness-tip-card .tip-category {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ss-primary-dark);
    margin-bottom: var(--ss-spacing-sm);
}

.wellness-tip-card .tip-text {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--ss-gray-800);
    position: relative;
    z-index: 1;
}

/* ============================================================
   Companion Message Card
   ============================================================ */
.companion-card {
    background: linear-gradient(135deg, #e2e3e5 0%, #d3d3d3 100%);
    border-radius: var(--ss-radius-lg);
    padding: var(--ss-spacing-lg);
    text-align: center;
}

.companion-card .companion-emoji {
    font-size: 2.5rem;
    margin-bottom: var(--ss-spacing-sm);
}

.companion-card .companion-message {
    font-size: 1.125rem;
    font-style: italic;
    color: var(--ss-gray-700);
}

/* ============================================================
   Contact Cards
   ============================================================ */
.contact-card {
    border-left: 4px solid var(--ss-primary);
    transition: transform var(--ss-transition-fast);
}

.contact-card:hover {
    transform: translateX(5px);
}

.contact-card .tier-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: var(--ss-radius-sm);
    background-color: var(--ss-primary);
    color: var(--ss-white);
}

.contact-card.tier-1 { border-left-color: var(--ss-success); }
.contact-card.tier-1 .tier-badge { background-color: var(--ss-success); }

.contact-card.tier-2 { border-left-color: var(--ss-warning); }
.contact-card.tier-2 .tier-badge { background-color: var(--ss-warning); color: var(--ss-dark); }

.contact-card.tier-3 { border-left-color: var(--ss-info); }
.contact-card.tier-3 .tier-badge { background-color: var(--ss-info); color: var(--ss-dark); }

/* ============================================================
   Pet Cards
   ============================================================ */
.pet-card {
    text-align: center;
    transition: transform var(--ss-transition-base);
}

.pet-card:hover {
    transform: translateY(-5px);
}

.pet-photo {
    width: 120px;
    height: 120px;
    border-radius: var(--ss-radius-circle);
    object-fit: cover;
    border: 4px solid var(--ss-gray-200);
    margin: 0 auto var(--ss-spacing-md);
}

.pet-photo-placeholder {
    width: 120px;
    height: 120px;
    border-radius: var(--ss-radius-circle);
    background-color: var(--ss-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--ss-spacing-md);
    font-size: 3rem;
    color: var(--ss-gray-500);
}

/* ============================================================
   Adventure Mode
   ============================================================ */
.adventure-active-banner {
    background: linear-gradient(135deg, #0dcaf0 0%, #0aa2c0 100%);
    color: var(--ss-white);
    padding: var(--ss-spacing-md);
    border-radius: var(--ss-radius-lg);
    margin-bottom: var(--ss-spacing-lg);
}

.adventure-btn {
    background: linear-gradient(135deg, #0dcaf0 0%, #0aa2c0 100%);
    border: none;
    color: var(--ss-white);
    font-weight: 600;
}

.adventure-btn:hover {
    background: linear-gradient(135deg, #0aa2c0 0%, #087990 100%);
    color: var(--ss-white);
}

/* ============================================================
   Mood Tracker
   ============================================================ */
.mood-selector {
    display: flex;
    gap: var(--ss-spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

.mood-option {
    width: 60px;
    height: 60px;
    border-radius: var(--ss-radius-circle);
    border: 2px solid var(--ss-gray-300);
    background: var(--ss-white);
    font-size: 1.75rem;
    cursor: pointer;
    transition: all var(--ss-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mood-option:hover {
    transform: scale(1.1);
    border-color: var(--ss-primary);
}

.mood-option.selected {
    border-color: var(--ss-primary);
    background-color: var(--ss-primary-light);
    transform: scale(1.1);
}

.mood-option input {
    display: none;
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
    background-color: var(--ss-gray-800);
    color: var(--ss-gray-400);
    padding: var(--ss-spacing-xl) 0;
    margin-top: auto;
}

.footer a {
    color: var(--ss-gray-300);
}

.footer a:hover {
    color: var(--ss-white);
}

.footer-brand {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ss-white);
    margin-bottom: var(--ss-spacing-sm);
}

/* ============================================================
   Utility Classes
   ============================================================ */
.text-muted-dark {
    color: var(--ss-gray-600) !important;
}

.bg-gradient-primary {
    background: linear-gradient(135deg, var(--ss-primary) 0%, var(--ss-primary-dark) 100%);
}

.border-thick {
    border-width: 3px !important;
}

.rounded-xl {
    border-radius: var(--ss-radius-xl) !important;
}

.shadow-hover:hover {
    box-shadow: var(--ss-shadow-lg) !important;
}

/* ============================================================
   Responsive Adjustments
   ============================================================ */
@media (max-width: 767.98px) {
    .checkin-btn {
        width: 160px;
        height: 160px;
        font-size: 1.25rem;
    }
    
    .checkin-btn i {
        font-size: 2.5rem;
    }
    
    .countdown-segment .number {
        font-size: 1.75rem;
    }
    
    h1, .h1 { font-size: 1.75rem; }
    h2, .h2 { font-size: 1.5rem; }
    h3, .h3 { font-size: 1.25rem; }
}

/* ============================================================
   Print Styles
   ============================================================ */
@media print {
    .navbar,
    .footer,
    .btn,
    .no-print {
        display: none !important;
    }

    body {
        background: white;
    }

    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* ============================================================
   Sticky Mobile CTA (Landing Page)
   ============================================================ */
@media (max-width: 767.98px) {
    /* Add padding to body on landing page to prevent content being hidden by sticky CTA */
    .page-landing {
        padding-bottom: 80px;
    }

    #mobileCta {
        z-index: 1030;
    }
}