/* Import Google Fonts — IBM Plex Sans (display), Source Sans 3 (body), Source Serif 4 (serif), IBM Plex Mono (data) */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap');

/* CSS Custom Properties (Variables) - Centralized color scheme for easy theming */
:root {
    /* Declare the site as dark so mobile browsers (Samsung Internet / Chrome
       auto-dark) don't force-recolour our navy palette into flat grey. */
    color-scheme: dark;
    --ink-black: #071018;      /* Card field — crushed blue-black */
    --alabaster: #e8e6e3;      /* Off-white text color */
    --goldenrod: #af7a00;      /* Gold accent color for highlights */
    --tech-grey: #797d7c;
    --text-muted: #b8bdc2;
    --silver: #e8ecf0;
    --silver-light: #f3f5f7;
    --surface-elevated: rgba(7, 16, 24, 0.72);
    --silver-line: rgba(210, 205, 195, 0.42);
    --field-image: url('../ASSETS/sarsfield-field.jpg?v=2609168');
    --gold-metallic: linear-gradient(135deg, #8a5f00 0%, #af7a00 45%, #d4a017 100%);
    --gold-metallic-deep: linear-gradient(135deg, #7a5500 0%, #af7a00 45%, #d4a017 50%, #af7a00 100%);
    --font-display: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
    --font-data: 'IBM Plex Mono', ui-monospace, monospace;
    --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}

/* Base body styling - Dark theme with padding to prevent content from hiding under fixed header */
body {
    background-color: var(--ink-black);
    color: var(--alabaster);
    font-family: var(--font-body);
    overflow-x: hidden;           /* Prevent horizontal scrolling */
    /* Removed padding-top - handled per section instead */
}

/* Technical font — data, mocks, compliance codes (labels use .label-accent in hybrid theme) */
.technical-font { font-family: var(--font-data); }

/* Display label accent — tracked small caps, logo-aligned */
.label-accent {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--silver);
}

/* Utility Classes for Borders */
.grid-border { border: 1px solid rgba(121, 125, 124, 0.3); }
.border-gold { border-color: var(--goldenrod); }

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
    /* Match body so mobile overscroll/rubber-band shows navy, not grey */
    background-color: var(--ink-black);
}

/* Enhanced section transitions */
section {
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    opacity: 1 !important;  /* Override GSAP initial state - ensure sections start visible */
    visibility: visible !important;
}

/* Text selection styling */
::selection {
    background: rgba(175, 122, 0, 0.3);
    color: var(--alabaster);
}

/* Alpine.js transitions */
[x-cloak] { display: none !important; }

/* Override AOS initial hidden state - force elements with data-aos to start visible */
[data-aos] {
    opacity: 1 !important;
    visibility: visible !important;
}

/* AOS will animate from visible state */
[data-aos].aos-animate {
    opacity: 1 !important;
}

/* ============================================
   MOBILE-SPECIFIC FIXES
   ============================================ */

@media (max-width: 640px) {
    /* Ensure header stays fixed on mobile */
    .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .site-header {
        background-color: rgba(0, 10, 26, 0.38) !important;
    }

    .site-header.is-scrolled,
    .site-header.is-menu-open {
        background-color: rgba(0, 10, 26, 0.96) !important;
    }

    /* Touch targets — controls only (not inline paragraph links) */
    .btn-tactical,
    .nav-link,
    .mobile-nav-link,
    #mobile-nav-toggle,
    .loading-skip,
    .sticky-demo-cta,
    .demo-form button,
    .cookie-banner button,
    .hero-sme-dots button,
    .btn-secondary {
        min-height: 44px;
    }

    .btn-tactical,
    .btn-secondary,
    .sticky-demo-cta,
    .demo-form button,
    .cookie-banner button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Prevent horizontal scroll */
    html,
    body {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* Improve text readability on mobile */
    body {
        font-size: 16px;
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        text-size-adjust: 100%;
        padding-top: 0 !important;
    }

    /* Ensure images don't overflow */
    img,
    video {
        max-width: 100%;
        height: auto;
    }

    /* Better spacing on mobile - reduce excessive padding */
    section:not(.section-tight):not(.section-major):not(.section-hero) {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    section.section-tight,
    section.section-major {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Reduce gap spacing in grids on mobile */
    .grid {
        gap: 0.75rem !important;
    }

    /* Ensure hero section fits properly */
    .hero-video-container h1 {
        line-height: 1.1 !important;
        margin-bottom: 1rem !important;
    }
}

/* Tablet optimizations */
@media (min-width: 641px) and (max-width: 1024px) {
    /* Ensure touch targets remain adequate on tablets */
    a, button, .btn-tactical {
        min-height: 44px;
    }
}