/* =========================================================
   RESPONSIVE — Suallar.net (Mobile-first refinements)
   ========================================================= */

/* Common helpers */
.container-narrow { max-width: 1200px; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }

/* ======= EXTRA SMALL (≤360px) ======= */
@media (max-width: 360px) {
    .hero { min-height: 70vh; padding-top: 4rem; padding-bottom: 4rem; }
    .hero h1 { font-size: 1.6rem !important; line-height: 1.15 !important; }
    .hero .lead { font-size: .9rem !important; }
    .btn-primary, .btn-secondary, .btn-outline { padding: .55rem 1.1rem; font-size: .85rem; }
    .category-card { padding: 1rem !important; }
    .category-card .icon-circle { width: 48px; height: 48px; font-size: 1.2rem; }
    .stat-card .stat-num { font-size: 1.6rem; }
    .site-header .brand-text { font-size: 1rem; }
}

/* ======= SMALL (≤640px) ======= */
@media (max-width: 640px) {
    .container-narrow { padding-left: .9rem; padding-right: .9rem; }
    .hero { min-height: 78vh; }
    .hero h1 { font-size: 2rem; }
    .nav-desktop { display: none !important; }
    .nav-mobile-toggle { display: inline-flex !important; }
    .stat-card { padding: 1rem; }
    .section-divider { height: 50px; }
    .divider-line { margin: 2rem auto; }
    .footer-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
    .quiz-option { font-size: .92rem; padding: .85rem 1rem; }
    .question-card { padding: 1.1rem; }
}

/* ======= MEDIUM (641 – 768px) tablet portrait ======= */
@media (min-width: 641px) and (max-width: 768px) {
    .hero h1 { font-size: 2.4rem; }
    .categories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .footer-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .nav-desktop { display: none !important; }
    .nav-mobile-toggle { display: inline-flex !important; }
}

/* ======= TABLET LANDSCAPE (769 – 1024px) ======= */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero h1 { font-size: 3rem; }
    .categories-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .footer-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ======= LARGE DESKTOP (≥1280px) ======= */
@media (min-width: 1280px) {
    .container-narrow { max-width: 1280px; }
    .categories-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* ======= XL (≥1536px) ======= */
@media (min-width: 1536px) {
    .container-narrow { max-width: 1440px; }
    .hero h1 { font-size: 4.75rem; }
}

/* ======= ULTRA-WIDE (≥1920px) ======= */
@media (min-width: 1920px) {
    .container-narrow { max-width: 1600px; }
    .hero { min-height: 85vh; }
    .categories-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}

/* ======= 4K (≥2560px) ======= */
@media (min-width: 2560px) {
    body { font-size: 18px; }
    .container-narrow { max-width: 1920px; }
    .hero h1 { font-size: 5.5rem; }
    .hero .lead { font-size: 1.4rem; max-width: 900px; }
    .categories-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}

/* ======= Mobile nav drawer ======= */
.nav-drawer {
    position: fixed; inset: 0;
    background: var(--bg-overlay);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.25,.8,.25,1);
    z-index: 60;
    padding: 5rem 1.5rem 2rem;
    overflow-y: auto;
}
.nav-drawer.open { transform: translateX(0); }
.nav-drawer a {
    display: block;
    padding: .9rem 1rem;
    border-radius: 12px;
    font-size: 1.1rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}
.nav-drawer a:hover { background: rgba(255,102,0,0.06); color: var(--color-accent); }
.nav-mobile-toggle { display: none; }

/* Hide mobile nav on desktop */
@media (min-width: 769px) {
    .nav-drawer { display: none !important; }
    .nav-mobile-toggle { display: none !important; }
}

/* ======= Reduced motion ======= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .hero-video { display: none; }
}

/* ======= Print ======= */
@media print {
    .site-header, .site-footer, .scroll-top, .hero-video, .nav-drawer { display: none !important; }
    body { background: #fff; color: #000; }
    a { color: #000; text-decoration: underline; }
}

/* ======= Touch device optimizations ======= */
@media (hover: none) {
    .category-card:hover { transform: none; }
    .btn-primary:hover { transform: none; }
    .theme-toggle:hover { transform: none; }
}

/* ======= High contrast ======= */
@media (prefers-contrast: high) {
    :root[data-theme="light"], :root:not([data-theme]) {
        --border-color: rgba(0,0,0,0.5);
        --text-secondary: #1a1a1a;
    }
    :root[data-theme="dark"] {
        --border-color: rgba(255,255,255,0.5);
        --text-secondary: #e8e8f0;
    }
}