/* ==========================================================================
   TAXLENZ — Mobile-first responsive overhaul (loaded LAST)
   ========================================================================== */

/* ---------- Tablet (<= 900px) ---------- */
@media (max-width: 900px) {
    .container { padding-inline: 1.25rem !important; }
    section { padding-block: clamp(2.5rem, 7vw, 4rem) !important; }
    h1 { font-size: clamp(2rem, 6vw, 2.8rem) !important; }
    h2 { font-size: clamp(1.6rem, 4.5vw, 2.2rem) !important; }
    .hero-grid, .split { grid-template-columns: 1fr !important; gap: 2rem !important; }
    .hero-visual { order: -1; max-width: 480px; margin-inline: auto; width: 100%; }
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
    .grid-2 { grid-template-columns: 1fr !important; }
    .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; }
    .stats-band .container { grid-template-columns: repeat(2, 1fr) !important; }
    .profile-card { grid-template-columns: 1fr !important; text-align: center !important; padding: 1.5rem !important; }
    .profile-card .founder-photo { max-width: 180px !important; margin-inline: auto !important; }
    .profile-social { justify-content: center !important; }
}

/* ---------- Phone (<= 760px) ---------- */
@media (max-width: 760px) {
    body { font-size: 15px; }
    .container { padding-inline: 1rem !important; }
    section { padding-block: clamp(2.5rem, 8vw, 3.5rem) !important; }
    h1 { font-size: clamp(1.9rem, 8vw, 2.4rem) !important; line-height: 1.15 !important; }
    h2 { font-size: clamp(1.5rem, 6vw, 1.9rem) !important; }
    h3 { font-size: 1.2rem !important; }
    p { font-size: .96rem !important; }

    /* Header */
    .site-header .header-inner { padding: .5rem 0 !important; min-height: 58px !important; gap: .5rem !important; }
    .site-header .brand { padding: .28rem .55rem !important; }
    .site-header .brand-logo-wide { height: 40px !important; max-width: 155px !important; }
    .site-header .header-actions { gap: .35rem !important; }
    .site-header .theme-toggle { width: 38px; height: 38px; }
    /* Hide desktop CTA outside menu; keep it inside the drawer */
    .site-header > .container > .main-nav > .nav-cta,
    .site-header .header-inner > .main-nav > .nav-cta { display: none !important; }

    /* Hero */
    .hero { padding-block: clamp(2.5rem, 8vw, 4rem) !important; }
    .hero-lead { font-size: 1rem !important; max-width: 100% !important; }
    .hero-cta { flex-direction: column !important; align-items: stretch !important; gap: .75rem !important; }
    .hero-cta .btn { width: 100% !important; justify-content: center !important; }
    .hero-trust { justify-content: center !important; text-align: center !important; }
    .hero-trust-item { font-size: .82rem !important; }
    .hero-card { padding: 1.25rem !important; border-radius: 18px !important; }
    .hero-card-head h3 { font-size: .9rem !important; }
    .hero-stat-row { gap: .6rem !important; }
    .hero-stat { padding: .75rem !important; }
    .hero-stat .num { font-size: 1.5rem !important; }
    .hero-float { font-size: .78rem !important; padding: .5rem .75rem !important; }
    .hero-float.f1 { top: -14px !important; right: 4% !important; }
    .hero-float.f2 { bottom: -14px !important; left: 4% !important; }
    .blob { display: none !important; }

    /* Grids collapse to single column */
    .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr !important; gap: 1rem !important; }
    .card { padding: 1.5rem !important; }
    .card-icon { width: 46px !important; height: 46px !important; margin-bottom: 1rem !important; }

    /* Stats band */
    .stats-band { padding-block: 2rem !important; border-radius: 16px !important; }
    .stats-band .container { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; }
    .stat-item .num { font-size: 2rem !important; }
    .stat-item .lbl { font-size: .8rem !important; }

    /* CTA band */
    .cta-band { padding: 2rem 1.25rem !important; border-radius: 18px !important; }
    .cta-band h2 { font-size: 1.5rem !important; }
    .cta-band .btn { width: 100% !important; }

    /* Section head */
    .section-head { margin-bottom: 2rem !important; }
    .section-eyebrow { font-size: .68rem !important; letter-spacing: .16em !important; }

    /* Post cards */
    .post-card { border-radius: 16px !important; }
    .post-thumb { aspect-ratio: 16/10 !important; }
    .post-body { padding: 1.25rem !important; }
    .post-card h3 { font-size: 1.1rem !important; }
    .post-excerpt { font-size: .88rem !important; }

    /* Info + testimonial cards */
    .info-card { padding: 1.1rem !important; gap: .75rem !important; }
    .info-card .card-icon { width: 42px !important; height: 42px !important; }
    .testimonial-card { padding: 1.5rem !important; }
    .testimonial-quote { font-size: .95rem !important; }

    /* FAQ */
    .faq-q { padding: 1rem 1.1rem !important; font-size: .95rem !important; }
    .faq-a-inner { padding: 0 1.1rem 1rem !important; font-size: .92rem !important; }

    /* Forms — prevent iOS zoom by keeping >= 16px */
    .form-row { grid-template-columns: 1fr !important; gap: .9rem !important; }
    .field input, .field textarea, .field select { padding: .8rem .95rem !important; font-size: 16px !important; }
    .field label { font-size: .88rem !important; }
    .btn-lg { padding: .95rem 1.5rem !important; font-size: 1rem !important; width: 100% !important; }

    /* Page hero (inner pages) */
    .page-hero { padding-block: clamp(2.5rem, 7vw, 3.5rem) !important; }
    .page-hero p { font-size: .98rem !important; }
    .breadcrumb { font-size: .78rem !important; }

    /* Article */
    .article { padding-inline: 0 !important; }
    .article-cover { border-radius: 14px !important; margin-bottom: 1.5rem !important; }
    .article-cover img { aspect-ratio: 16/10 !important; }
    .article-hero h1 { font-size: clamp(1.7rem, 6vw, 2.2rem) !important; }
    .article-content { font-size: 1rem !important; line-height: 1.75 !important; }
    .article-content h2 { font-size: 1.35rem !important; margin: 1.6rem 0 .75rem !important; }
    .article-content h3 { font-size: 1.15rem !important; }
    .post-foot { flex-direction: column !important; gap: .75rem !important; align-items: stretch !important; }
    .post-foot .btn { width: 100% !important; text-align: center; justify-content: center; }

    /* Footer */
    .site-footer { padding-top: 2.5rem !important; margin-top: 2rem !important; }
    .footer-grid { grid-template-columns: 1fr !important; gap: 2rem !important; text-align: center; padding-bottom: 2rem !important; }
    .footer-brand .brand, .footer-brand .social-row { justify-content: center !important; }
    .footer-brand .brand-logo-wide { margin-inline: auto !important; height: 50px !important; }
    .footer-tagline, .footer-about { max-width: 40ch; margin-inline: auto; }
    .footer-links { justify-items: center; }
    .footer-heading { text-align: center; }
    .footer-bottom-inner { flex-direction: column !important; text-align: center; gap: .75rem !important; }
    .footer-bci-note { font-size: .78rem !important; padding: .85rem 1rem !important; }

    /* Floating buttons */
    .whatsapp-float { width: 50px !important; height: 50px !important; right: 1rem !important; bottom: 4.5rem !important; left: auto !important; }
    .whatsapp-float svg { width: 26px; height: 26px; }
    .back-to-top { width: 42px !important; height: 42px !important; right: 1rem !important; bottom: 1rem !important; }

    /* Cookie banner */
    .cookie-banner { left: .75rem !important; right: .75rem !important; bottom: .75rem !important; padding: .9rem 1rem !important; }
    .cookie-banner p { font-size: .82rem !important; }
    .cookie-banner .btn { padding: .5rem .9rem !important; font-size: .8rem !important; }

    /* Bar Council modal */
    #bciModal .bci-card { padding: 1.4rem !important; max-height: 88vh !important; border-radius: 18px !important; }
    #bciModal h2 { font-size: 1.35rem !important; }
    #bciModal p, #bciModal li { font-size: .85rem !important; }
    #bciModal .bci-actions { flex-direction: column-reverse !important; gap: .5rem !important; }
    #bciModal .bci-actions .btn { width: 100% !important; }

    /* Marquee smaller */
    .marquee-track { gap: 1.8rem !important; }
    .marquee-item { font-size: .82rem !important; }

    /* Admin dashboard */
    .admin-topbar .container { flex-direction: column; gap: .5rem; align-items: center; text-align: center; padding-block: .35rem; }
    .admin-table th, .admin-table td { font-size: .82rem !important; padding: .6rem .5rem !important; }
    .table-actions { flex-direction: column; gap: .3rem !important; }
    .table-actions .btn { width: 100%; padding: .4rem .6rem !important; font-size: .78rem !important; }

    /* Admin login lamp — shrink on mobile */
    .lamp-css { height: 200px !important; }
    .lamp-css .beam { border-left-width: 70px !important; border-right-width: 70px !important; border-top-width: 180px !important; }
    .admin-login-card { padding: 1.5rem 1.25rem !important; max-width: 100% !important; }

    /* Chip row scrolls horizontally instead of wrapping to 6 rows */
    .chip-row { flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: .5rem; margin-bottom: 1.75rem !important; scrollbar-width: none; -ms-overflow-style: none; }
    .chip-row::-webkit-scrollbar { display: none; }
    .chip { flex: 0 0 auto; font-size: .82rem !important; padding: .4rem .9rem !important; }
}

/* ---------- Small phone (<= 380px) ---------- */
@media (max-width: 380px) {
    .site-header .brand-logo-wide { height: 32px !important; max-width: 125px !important; }
    h1 { font-size: 1.75rem !important; }
    .hero-stat-row { grid-template-columns: 1fr 1fr !important; }
    .hero-stat .num { font-size: 1.3rem !important; }
}

/* ---------- iOS safe-area ---------- */
@supports (padding: max(0px)) {
    .site-header .container { padding-left: max(1rem, env(safe-area-inset-left)) !important; padding-right: max(1rem, env(safe-area-inset-right)) !important; }
    .whatsapp-float { right: max(1rem, env(safe-area-inset-right)) !important; }
    .back-to-top { right: max(1rem, env(safe-area-inset-right)) !important; bottom: max(1rem, env(safe-area-inset-bottom)) !important; }
    .cookie-banner { bottom: max(.75rem, env(safe-area-inset-bottom)) !important; }
}

/* ---------- Mobile drawer nav (proper slide-down glass menu) ---------- */
@media (max-width: 760px) {
    .main-nav {
        position: fixed !important;
        top: 58px !important; left: 0 !important; right: 0 !important;
        flex-direction: column !important;
        background: linear-gradient(180deg, rgba(252,246,233,.96), rgba(243,233,210,.96)) !important;
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        padding: 1rem 1.25rem 1.5rem !important;
        gap: .25rem !important;
        border-bottom: 1px solid rgba(11,61,58,.1);
        box-shadow: 0 12px 30px rgba(11,61,58,.15);
        transform: translateY(-120%);
        transition: transform .35s cubic-bezier(.22,.61,.36,1);
        max-height: calc(100dvh - 58px);
        overflow-y: auto;
        z-index: 999;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }
    [data-theme="dark"] .main-nav {
        background: linear-gradient(180deg, rgba(16,48,43,.95), rgba(10,28,25,.95)) !important;
        border-bottom-color: rgba(120,180,168,.15);
    }
    .main-nav.open { transform: translateY(0); }
    .main-nav .nav-link {
        padding: .85rem 1rem !important;
        font-size: 1rem !important;
        border-radius: 12px !important;
        width: 100%;
        text-align: left;
    }
    .nav-link::after { display: none !important; }
    .main-nav .nav-cta {
        display: inline-flex !important;
        margin: .75rem 0 0 !important;
        width: 100% !important;
        justify-content: center !important;
        padding: .85rem 1.2rem !important;
    }
    .nav-toggle { display: flex !important; }
    /* Backdrop dim when drawer open */
    body:has(.main-nav.open)::after {
        content: ""; position: fixed; inset: 58px 0 0 0; background: rgba(0,0,0,.35);
        backdrop-filter: blur(4px); z-index: 998; animation: menuFade .3s ease both;
    }
    @keyframes menuFade { from { opacity: 0; } to { opacity: 1; } }
}