/* ================================================================
   RESPONSIVE & PERFORMANCE IMPROVEMENTS
   Mobile-First Approach with Progressive Enhancement
   ================================================================ */


/* ============================================================
   MOBILE-FIRST RESPONSIVE UTILITIES
   ============================================================ */

@media (max-width: 640px) {
    /* Mobile: 320px - 640px */
     :root {
        font-size: 14px;
    }
    html,
    body {
        overflow-x: hidden;
    }
    .container {
        padding: 0 16px !important;
    }
    section {
        padding: 40px 0 !important;
    }
    .section-title {
        font-size: clamp(20px, 4.5vw, 28px);
        margin-bottom: 16px;
    }
    .section-subtitle {
        font-size: 15px;
        margin-bottom: 24px;
    }
    /* Hide desktop-only elements */
    .hide-mobile {
        display: none !important;
    }
    /* Improve touch targets */
    button,
    a,
    [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    /* Stack grids */
    .grid,
    [class*="grid-"],
    [class*="-grid"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    /* Stack flexes */
    .flex-row {
        flex-direction: column;
    }
    /* Responsive spacing */
    .gap-sm {
        gap: 8px !important;
    }
    .gap-md {
        gap: 12px !important;
    }
    .gap-lg {
        gap: 16px !important;
    }
    /* Typography */
    h1 {
        font-size: clamp(24px, 5vw, 32px);
    }
    h2 {
        font-size: clamp(20px, 4.5vw, 28px);
    }
    h3 {
        font-size: clamp(18px, 4vw, 24px);
    }
    h4 {
        font-size: clamp(16px, 3.5vw, 20px);
    }
    h5 {
        font-size: clamp(14px, 3vw, 18px);
    }
    h6 {
        font-size: clamp(12px, 2.5vw, 16px);
    }
    /* Reduce animations on mobile */
    * {
        animation-duration: 0.15s !important;
        transition-duration: 0.15s !important;
    }
    /* Cards full width */
    .card {
        width: 100%;
    }
    /* Images responsive */
    img {
        max-width: 100%;
        height: auto;
        display: block;
    }
    /* Video responsive */
    video,
    iframe,
    embed {
        max-width: 100%;
        height: auto;
    }
    /* Remove fixed positioning on mobile */
    .navbar {
        position: relative !important;
        top: auto !important;
    }
    /* Buttons full width */
    .btn {
        width: 100%;
        justify-content: center;
    }
    /* Modals & drawers */
    .modal,
    .drawer {
        width: 100vw !important;
        max-width: 100vw !important;
    }
    /* Padding adjustments */
    .px-lg {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .py-lg {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
}


/* Small Tablet: 641px - 768px */

@media (640px < width <=768px) {
    .container {
        padding: 0 20px !important;
    }
    .grid-2,
    [class*="grid-2"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .hide-tablet {
        display: none !important;
    }
    section {
        padding: 48px 0 !important;
    }
}


/* Large Tablet: 769px - 1024px */

@media (768px < width <=1024px) {
    .container {
        padding: 0 28px !important;
    }
    .grid-3,
    [class*="grid-3"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    section {
        padding: 52px 0 !important;
    }
}


/* Desktop: 1025px+ */

@media (width > 1024px) {
    .hide-desktop {
        display: none !important;
    }
    .grid-4,
    [class*="grid-4"] {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    section {
        padding: 64px 0 !important;
    }
}


/* Ultra-wide: 1440px+ */

@media (width > 1440px) {
    .container {
        max-width: 1280px;
    }
    section {
        padding: 80px 0 !important;
    }
}


/* ============================================================
   PERFORMANCE: CRITICAL RENDERING PATH
   ============================================================ */


/* Prevent layout shift for images */

img,
video,
iframe,
embed {
    display: block;
    max-width: 100%;
    height: auto;
    background: var(--gray-100);
}


/* Optimize fonts loading */

@font-face {
    font-display: swap;
    /* Swap = use system font while loading */
    font-family: 'IBM Plex Sans';
    font-weight: 400;
    src: url('fonts/ibm-plex-sans-400.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'IBM Plex Sans';
    font-weight: 600;
    src: url('fonts/ibm-plex-sans-600.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Archivo';
    font-weight: 400;
    src: url('fonts/archivo-400.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Archivo';
    font-weight: 700;
    src: url('fonts/archivo-700.woff2') format('woff2');
}


/* Reduce CLS with contain */

.hero,
.section,
.card,
.grid {
    contain: layout style paint;
}


/* GPU acceleration for smooth scrolling */

.navbar,
.sticky-header,
[class*="sticky"] {
    will-change: transform;
    transform: translateZ(0);
}


/* Optimize animations */

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}


/* ============================================================
   DARK MODE SUPPORT
   ============================================================ */

@media (prefers-color-scheme: dark) {
     :root {
        --bg-primary: #0f1419;
        --text-primary: #f5f7fa;
        --border: #2a3544;
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.5);
    }
    body {
        background: var(--bg-primary);
        color: var(--text-primary);
    }
    .card,
    .modal,
    section {
        background: var(--bg-primary);
        color: var(--text-primary);
    }
}


/* Manual dark mode toggle */

html[data-theme="dark"] {
    --bg-primary: #0f1419;
    --text-primary: #f5f7fa;
    --border: #2a3544;
}


/* ============================================================
   ACCESSIBILITY & TOUCH TARGETS
   ============================================================ */


/* Ensure minimum touch target size */

@media (hover: none) and (pointer: coarse) {
    button,
    a,
    [role="button"],
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 44px;
        min-height: 44px;
        padding: 12px;
    }
}


/* Improve focus for keyboard navigation */

:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 2px;
}


/* Skip to content link */

.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--orange);
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

.skip-to-content:focus {
    top: 0;
}


/* ============================================================
   PERFORMANCE: INLINE CRITICAL CSS
   ============================================================ */


/* Critical Above-the-Fold Styles */

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-content {
    text-align: center;
    max-width: 640px;
}


/* Navbar critical */

.navbar {
    z-index: 1000;
}

.nav-link {
    text-decoration: none;
    color: inherit;
}


/* ============================================================
   PRINT STYLES
   ============================================================ */

@media print {
    body {
        background: white;
        color: black;
    }
    .no-print,
    .navbar,
    .footer {
        display: none !important;
    }
    a {
        text-decoration: underline;
    }
    img {
        max-width: 100%;
    }
    h1,
    h2,
    h3 {
        page-break-after: avoid;
    }
    p,
    li {
        page-break-inside: avoid;
    }
}


/* ============================================================
   UTILITY CLASSES FOR RESPONSIVE
   ============================================================ */

.visible-mobile {
    display: none;
}

.visible-tablet {
    display: none;
}

.visible-desktop {
    display: block;
}

@media (max-width: 768px) {
    .visible-mobile {
        display: block;
    }
    .visible-desktop {
        display: none;
    }
}

@media (768px < width <=1024px) {
    .visible-tablet {
        display: block;
    }
    .visible-desktop {
        display: none;
    }
}


/* Responsive margin/padding utilities */

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.my-auto {
    margin-top: auto;
    margin-bottom: auto;
}

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.max-w-full {
    max-width: 100%;
}

.aspect-video {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.aspect-square {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}


/* Responsive text alignment */

@media (max-width: 768px) {
    .text-center-mobile {
        text-align: center;
    }
    .text-left-mobile {
        text-align: left;
    }
}