/* ==========================================================================
   Faran Consulting Website - Mobile Styles
   Mobile-first responsive rules with media queries
   Base styles in main.css are designed for mobile (320px+)
   ========================================================================== */

/* Small Mobile: 320px - 479px (default in main.css)
   No media query needed - base styles cover this
   ========================================================================== */

/* Mobile: 480px+
   ========================================================================== */

@media (min-width: 480px) {
    .container {
        padding: 0 var(--space-lg);
    }

    .hero__title {
        font-size: var(--font-size-5xl);
    }

    .cta__actions,
    .hero__actions {
        flex-direction: row;
        justify-content: center;
    }
}

/* Tablet: 768px+
   ========================================================================== */

@media (min-width: 768px) {
    :root {
        --font-size-5xl: 3.75rem; /* 60px */
        --space-4xl: 8rem; /* 128px */
    }

    .container {
        padding: 0 var(--space-xl);
    }

    h1 {
        font-size: var(--font-size-5xl);
    }

    .hero {
        padding: var(--space-4xl) 0;
    }

    .hero__title {
        font-size: var(--font-size-5xl);
    }

    section {
        padding: var(--space-4xl) 0;
    }

    section:first-of-type {
        padding-top: var(--space-3xl);
    }

    /* Grid adjustments for tablet */
    .grid--2col {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid--3col {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Form layouts */
    .form-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }

    .form-row--3col {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Card adjustments */
    .card {
        padding: var(--space-2xl);
    }

    /* CTA sections */
    .cta {
        padding: var(--space-4xl) var(--space-xl);
    }
}

/* Desktop: 1024px+
   ========================================================================== */

@media (min-width: 1024px) {
    :root {
        --font-size-5xl: 4.5rem; /* 72px */
    }

    .container {
        padding: 0 var(--space-2xl);
    }

    /* Grid adjustments for desktop */
    .grid--3col {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Typography scale adjustments */
    .hero__title {
        font-size: var(--font-size-5xl);
    }

    /* Improved hover states on desktop */
    .card {
        transition: transform var(--transition-base), box-shadow var(--transition-base);
    }

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

    /* Navigation improvements for desktop */
    .nav-list {
        display: flex;
        gap: var(--space-lg);
    }

    /* Form improvements */
    .form-row--4col {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Large Desktop: 1200px+
   ========================================================================== */

@media (min-width: 1200px) {
    .container {
        padding: 0 var(--space-3xl);
    }

    /* Maximum content width enforced */
    .hero__subtitle {
        max-width: 900px;
    }

    .page-body {
        /* Allow sections to extend full-width */
    }
}

/* Extra Large Desktop: 1440px+
   ========================================================================== */

@media (min-width: 1440px) {
    :root {
        --font-size-5xl: 5rem; /* 80px */
    }

    .hero__title {
        font-size: var(--font-size-5xl);
    }
}

/* Tablet Portrait Mode
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
    /* Adjust hero for tablet portrait */
    .hero {
        padding: var(--space-3xl) 0;
    }

    /* Keep 2-column grids in portrait */
    .grid--3col {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Landscape Mode (any device)
   ========================================================================== */

@media (orientation: landscape) and (max-height: 600px) {
    /* Reduce vertical spacing in landscape mode */
    section {
        padding: var(--space-2xl) 0;
    }

    .hero {
        padding: var(--space-2xl) 0;
    }
}

/* Touch Device Optimizations
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {
    /* Ensure all interactive elements meet 44x44px minimum */
    button,
    .btn,
    a,
    input[type="submit"],
    input[type="button"],
    input[type="checkbox"],
    input[type="radio"],
    select {
        min-height: 44px;
        min-width: 44px;
    }

    /* Remove hover effects on touch devices */
    .card:hover {
        transform: none;
    }

    /* Slightly larger tap targets for navigation */
    .nav-link {
        padding: var(--space-md);
    }
}

/* Print Styles
   ========================================================================== */

@media print {
    *,
    *::before,
    *::after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]::after {
        content: " (" attr(href) ")";
    }

    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    h2, h3 {
        page-break-after: avoid;
    }

    /* Hide navigation and CTAs in print */
    nav,
    .cta,
    .btn,
    .skip-to-content {
        display: none !important;
    }
}

/* High DPI Screens (Retina)
   ========================================================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ensure images are crisp on retina displays */
    /* Eleventy image plugin handles this automatically with srcset */
}

/* Dark Mode Support (respects user preference)
   ========================================================================== */

@media (prefers-color-scheme: light) {
    /* Don't invert logo - keep it white */
    .header-logo img {
        filter: none !important;
    }

    /* Make body and header light blue in light mode */
    body {
        background-color: #243552 !important;
    }

    header,
    .site-header {
        background-color: #243552 !important;
    }

    /* Make navigation links white for readability on blue */
    .nav-link {
        color: white !important;
    }

    .nav-link:hover,
    .nav-link:focus {
        color: #DFA400 !important;
    }

    .nav-link[aria-current="page"] {
        color: #DFA400 !important;
    }

    /* Mobile menu styling for light mode */
    .nav-list {
        background-color: #243552 !important;
        border-color: #1a1a1a !important;
    }

    .nav-item {
        border-color: rgba(255,255,255,0.2) !important;
    }

    .nav-toggle {
        color: white !important;
    }

    .nav-toggle:hover,
    .nav-toggle:focus {
        color: #DFA400 !important;
    }

    /* Force sections to have dark backgrounds in light mode, but respect variations */
    section {
        color: white !important;
    }

    /* Sections with #1a1a1a or #0d0d0d stay dark */
    section[style*="background-color: #1a1a1a"],
    section[style*="background-color: #0d0d0d"] {
        background-color: #1a1a1a !important;
    }

    /* Sections with #2d2d2d stay medium dark */
    section[style*="background-color: #2d2d2d"] {
        background-color: #2d2d2d !important;
    }

    /* Sections with var(--color-primary) or #243552 stay light blue */
    section[style*="background-color: var(--color-primary)"],
    section[style*="background-color: #243552"] {
        background-color: #243552 !important;
    }

    /* Keep cards visible with slightly lighter background */
    .card {
        background-color: #2a2a2a !important;
        color: white !important;
    }

    /* Ensure all text in sections stays light */
    section * {
        color: inherit;
    }

    /* But keep gold text gold */
    /* section *[style*="color: #DFA400"],
    section h1[style*="color: #DFA400"],
    section h2[style*="color: #DFA400"],
    section h3[style*="color: #DFA400"] {
        color: #DFA400 !important;
    } */
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-text: #E0E0E0;
        --color-text-light: #B0B0B0;
        --color-text-muted: #888888;
        --color-background: #1A1A1A;
        --color-background-alt: #2A2A2A;
        --color-border: #404040;
    }

    .section--dark {
        background-color: #0A0A0A;
        color: var(--color-text);
    }

    .card {
        background-color: var(--color-background-alt);
        border-color: var(--color-border);
    }

    .form-input,
    .form-textarea,
    .form-select {
        background-color: var(--color-background-alt);
        border-color: var(--color-border);
        color: var(--color-text);
    }

    img {
        opacity: 0.9;
    }
}

/* Mobile Navigation (Hamburger Menu)
   ========================================================================== */

@media (max-width: 767px) {
    .nav-toggle {
        display: block;
        min-height: 44px;
        min-width: 44px;
    }

    .nav-list {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--color-background);
        border-top: 1px solid var(--color-border);
        padding: var(--space-md);
        box-shadow: var(--shadow-lg);
    }

    .nav-list.is-open {
        display: flex;
    }

    .nav-item {
        padding: var(--space-md) 0;
        border-bottom: 1px solid var(--color-border);
    }

    .nav-item:last-child {
        border-bottom: none;
    }
}

/* Desktop Navigation
   ========================================================================== */

@media (min-width: 768px) {
    .nav-toggle {
        display: none;
    }

    .nav-list {
        display: flex;
    }
}

/* Reduced Data Mode
   ========================================================================== */

@media (prefers-reduced-data: reduce) {
    /* Disable background images to save bandwidth */
    * {
        background-image: none !important;
    }

    /* Load lower quality images (handled by Eleventy image plugin) */
}

/* Container Queries (Progressive Enhancement)
   Future-proofing for container query support
   ========================================================================== */

@supports (container-type: inline-size) {
    .card-container {
        container-type: inline-size;
    }

    @container (min-width: 400px) {
        .card {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: var(--space-lg);
        }
    }
}

/* Process Steps Responsive Layout
   ========================================================================== */

@media (max-width: 767px) {
    /* Stack process steps on mobile */
    section .grid[style*="repeat(5"] {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    /* 2 columns on tablet, allowing the 5th to span */
    section .grid[style*="repeat(5"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Contact Form Responsive Styles
   ========================================================================== */

@media (max-width: 767px) {
    /* Stack form rows on mobile */
    .contact-form .form-row {
        grid-template-columns: 1fr !important;
        gap: 0;
    }

    /* Full width radio buttons on mobile */
    .contact-form .radio-group {
        flex-direction: column;
        gap: var(--space-md);
    }

    /* Reduce padding on mobile */
    .contact-form {
        padding: var(--space-lg);
    }
}

@media (min-width: 768px) {
    /* Maintain 2-column layout for form rows on tablet+ */
    .contact-form .form-row {
        grid-template-columns: 1fr 1fr;
    }
}