/* ============================================================================
   Tawleef — Mobile / Responsive Layer (rewritten 2026-05-24)

   Three public breakpoints, layered cleanly:
     ≤ 980px  TABLET / phone landscape — nav collapses, grids start to fold
     ≤ 640px  PHONE PORTRAIT           — single column, larger touch targets
     ≤ 380px  TINY PHONE               — minor tightening only

   Plus orthogonal layers:
     - Safety (overflow, iOS quirks)        always on
     - Touch / hover                        any pointer:none
     - Admin                                 ≤ 900px / ≤ 480px

   Spacing budget aims for confident vertical rhythm:
     section padding ≥ 64px on phone, ≥ 80px on tablet
     card padding    ≥ 28px on phone, ≥ 32px on tablet
============================================================================ */

/* ───────────────────────── Safety (all viewports) ───────────────────────── */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
}
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* iOS auto-zoom prevention on focused inputs */
@media (max-width: 980px) {
    input[type="text"], input[type="email"], input[type="search"],
    input[type="tel"], input[type="number"], input[type="password"],
    input[type="date"], input[type="datetime-local"],
    select, textarea {
        font-size: 16px !important;
    }
}


/* ═════════════════════════════════════════════════════════════════════════
   TABLET & PHONE LANDSCAPE  (≤ 980px)
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {

    /* — Navigation ─────────────────────────────────────────────────────── */
    .site-header { padding-block: var(--sp-3); }
    .brand-logo  { height: 78px !important; }

    .primary-nav.is-open .nav-actions {
        flex-direction: column;
        width: 100%;
        gap: var(--sp-3);
        margin-top: var(--sp-3);
    }
    .primary-nav.is-open .nav-cta {
        width: 100%;
        justify-content: center;
        padding: var(--sp-3);
        font-size: var(--fs-base);
    }
    .primary-nav.is-open .nav-search-toggle { display: none; }
    .primary-nav.is-open .nav-search-panel {
        position: static;
        opacity: 1; visibility: visible; transform: none;
        box-shadow: none;
        border: 1px solid var(--line);
        background: var(--cream);
        order: 99;
    }

    /* — Container ──────────────────────────────────────────────────────── */
    .container, .container-narrow {
        padding-inline: var(--sp-6);
    }

    /* — Sections — generous vertical rhythm ─────────────────────────────── */
    .section            { padding-block: var(--sp-20); }   /* 80px */
    .section-sm         { padding-block: var(--sp-14); }   /* 56px */
    .section-header     { margin-bottom: var(--sp-10); }
    .section-header.is-start {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-4);
    }
    .section-header.is-start > div { width: 100%; }

    .section-title { font-size: var(--fs-3xl) !important; line-height: 1.4 !important; }
    .section-lead  { font-size: var(--fs-lg)  !important; line-height: 1.85; }
    .eyebrow       { font-size: var(--fs-sm); }

    /* — Hero ───────────────────────────────────────────────────────────── */
    .hero, .hero-large {
        padding: var(--sp-32) 0 var(--sp-16) !important;
        margin-top: var(--sp-4) !important;
    }
    .hero h1 {
        font-size: clamp(2.5rem, 6.5vw, 3.5rem) !important;
        line-height: 1.4 !important;
    }
    .hero-subtitle {
        font-size: var(--fs-lg) !important;
        line-height: 1.85 !important;
        margin-bottom: var(--sp-8);
    }
    .hero-mini-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--sp-6);
        margin-top: var(--sp-12);
        padding-top: var(--sp-8);
    }
    .mini-num   { font-size: var(--fs-3xl) !important; }
    .mini-label { font-size: var(--fs-sm)  !important; line-height: 1.6; }

    /* Hero decorative shapes — disable animations on touch for perf */
    .hero-bg-shapes .shape {
        animation: none !important;
        transform: none !important;
        opacity: 0.3;
    }

    /* — Intro strip (the quote) ─────────────────────────────────────────── */
    /* Drop the harsh top/bottom borders that combine with the mini-stats
       border-top to create stacked seams. Give the section real breathing. */
    .intro-strip {
        padding-block: var(--sp-20);
        border-block: 0 !important;
        margin-top: var(--sp-8);
    }
    .intro-strip-inner { gap: var(--sp-6) !important; }
    .intro-quote {
        font-size: var(--fs-xl) !important;
        line-height: 1.95 !important;
    }
    .intro-quote-mark { width: 56px !important; height: 56px !important; }
    .intro-quote-mark .icon { width: 26px !important; height: 26px !important; }

    /* — Feature cards (the 3 tools section) ─────────────────────────────── */
    .feature-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-6);
    }
    .feature-card {
        padding: var(--sp-10) var(--sp-7);
        transform: none !important; /* disable 3D tilt on touch */
    }
    .feature-card h3 { font-size: var(--fs-2xl); line-height: 1.4; }
    .feature-card p  { font-size: var(--fs-base); line-height: 1.85; }

    /* — Steps / How it works ────────────────────────────────────────────── */
    .steps-list::before { display: none; }
    .step {
        grid-template-columns: auto 1fr;
        padding: var(--sp-6);
        gap: var(--sp-5);
    }
    .step-icon  { display: none; }
    .step-body h3 { font-size: var(--fs-xl); line-height: 1.45; }
    .step-body p  { font-size: var(--fs-base); line-height: 1.85; }

    /* — Awareness pillars ───────────────────────────────────────────────── */
    .awareness-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-6);
    }
    .awareness-card { padding: var(--sp-8); gap: var(--sp-5); }
    .awareness-card h3 { font-size: var(--fs-xl); }
    .awareness-card p  { font-size: var(--fs-base); line-height: 1.8; }

    /* — Stats / facts ───────────────────────────────────────────────────── */
    .stats-bar, .facts-bar { padding-block: var(--sp-16); }
    .stats-grid { gap: var(--sp-8) var(--sp-6); }
    .stat-item .stat-number { font-size: var(--fs-5xl) !important; line-height: 1; }
    .stat-item .stat-label  { font-size: var(--fs-sm)  !important; line-height: 1.7; }

    /* — CTA banner ──────────────────────────────────────────────────────── */
    .cta-banner {
        padding: var(--sp-14) var(--sp-8);
        margin-block: var(--sp-12);
    }
    .cta-banner h2 { font-size: var(--fs-3xl) !important; line-height: 1.4 !important; }
    .cta-banner p  { font-size: var(--fs-lg);  line-height: 1.85; }

    /* — Final CTA card ──────────────────────────────────────────────────── */
    .final-cta-card { gap: var(--sp-6); }

    /* — Page header (sub-pages) ─────────────────────────────────────────── */
    .page-header   { padding: var(--sp-14) 0 var(--sp-10); }
    .page-header h1 { font-size: var(--fs-4xl) !important; }
    .page-header p  { font-size: var(--fs-lg); }

    /* — Tables / admin internals (kept) ─────────────────────────────────── */
    .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .admin-content    { overflow-x: auto; }
    .admin-card       { overflow-x: auto; }
    .admin-table      { min-width: 600px; }
}


/* ═════════════════════════════════════════════════════════════════════════
   PHONE PORTRAIT  (≤ 640px)

   Single-column layout, bigger touch targets, generous spacing.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

    /* — Container ──────────────────────────────────────────────────────── */
    .container, .container-narrow {
        padding-inline: var(--sp-5);
    }

    /* — Brand ──────────────────────────────────────────────────────────── */
    .brand-logo { height: 66px !important; }

    /* — Typography base scale ──────────────────────────────────────────── */
    h1 { font-size: var(--fs-4xl) !important; line-height: 1.4; }
    h2 { font-size: var(--fs-3xl) !important; line-height: 1.4; }
    h3 { font-size: var(--fs-2xl) !important; line-height: 1.45; }
    h4 { font-size: var(--fs-xl)  !important; }

    /* — Sections — keep them airy, never let them touch ─────────────────── */
    .section        { padding-block: var(--sp-16); }      /* 64px each side */
    .section-sm     { padding-block: var(--sp-12); }
    .section-header { margin-bottom: var(--sp-10); }
    .section-title  { font-size: var(--fs-3xl) !important; line-height: 1.4 !important; }
    .section-lead   { font-size: var(--fs-lg)  !important; line-height: 1.85; }

    /* Section-alt decorative waves can glitch on phone */
    .section-alt::before,
    .section-alt::after { display: none; }
    .section-header > .section-title::before,
    .section-header > .section-title::after { display: none !important; }

    /* — Hero ───────────────────────────────────────────────────────────── */
    .hero, .hero-large {
        padding: var(--sp-24) 0 var(--sp-14) !important;
        margin-top: var(--sp-4) !important;
    }
    .hero h1 {
        font-size: clamp(2.25rem, 9vw, 3rem) !important;
        line-height: 1.4 !important;
        padding-block-start: 0.3em !important;
    }
    .hero-subtitle {
        font-size: var(--fs-lg) !important;
        line-height: 1.85 !important;
        margin-bottom: var(--sp-8);
    }
    .hero-actions {
        flex-direction: column;
        gap: var(--sp-4);
        width: 100%;
    }
    .hero-actions .btn { width: 100%; justify-content: center; }

    .hero-eyebrow {
        font-size: var(--fs-xs);
        padding: 6px 14px;
    }

    /* Mini-stats: 2×2 grid with generous breathing room */
    .hero-mini-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-6) var(--sp-8);
        margin-top: var(--sp-12);
        padding-top: var(--sp-8);
    }
    .mini-divider { display: none; }
    .mini-num     { font-size: var(--fs-3xl) !important; }
    .mini-label   { font-size: var(--fs-sm)  !important; line-height: 1.6; }

    /* — Intro strip (the quote) ─────────────────────────────────────────── */
    /* Same fix: drop the stacked borders + give the ornament real space. */
    .intro-strip {
        padding-block: var(--sp-16);
        border-block: 0 !important;
        margin-top: var(--sp-6);
    }
    .intro-strip-inner { gap: var(--sp-6) !important; }
    .intro-quote {
        font-size: var(--fs-lg) !important;
        line-height: 1.95 !important;
    }
    .intro-quote-mark { width: 52px !important; height: 52px !important; }
    .intro-quote-mark .icon { width: 24px !important; height: 24px !important; }

    /* — Feature cards — single column ──────────────────────────────────── */
    .feature-grid {
        grid-template-columns: 1fr !important;
        gap: var(--sp-6);
    }
    .feature-card { padding: var(--sp-10) var(--sp-7); }
    .feature-icon { width: 64px !important; height: 64px !important; }
    .feature-icon .icon { width: 30px; height: 30px; }
    .feature-num {
        font-size: var(--fs-2xl);
        top: var(--sp-3) !important;
        inset-inline-start: var(--sp-5) !important;
    }
    .feature-card h3 { font-size: var(--fs-2xl); line-height: 1.4; }
    .feature-card p  { font-size: var(--fs-base); line-height: 1.85; }

    /* — Steps ──────────────────────────────────────────────────────────── */
    .step {
        grid-template-columns: auto 1fr;
        padding: var(--sp-6);
        gap: var(--sp-4);
    }
    .step-num { width: 52px !important; height: 52px !important; font-size: var(--fs-xl) !important; }
    .step-body h3 { font-size: var(--fs-xl); line-height: 1.45; }
    .step-body p  { font-size: var(--fs-base); line-height: 1.85; }

    /* — Awareness pillars — single column with comfortable breathing ───── */
    .awareness-grid {
        grid-template-columns: 1fr !important;
        gap: var(--sp-6);
    }
    .awareness-card { padding: var(--sp-8) var(--sp-7); gap: var(--sp-5); }
    .awareness-card .icon-circle { width: 56px !important; height: 56px !important; margin-bottom: var(--sp-2); }
    .awareness-card .icon-circle .icon { width: 28px; height: 28px; }
    .awareness-card h3 { font-size: var(--fs-xl); line-height: 1.45; }
    .awareness-card p  { font-size: var(--fs-base); line-height: 1.85; }

    /* — Stats / facts ───────────────────────────────────────────────────── */
    .stats-bar, .facts-bar { padding-block: var(--sp-16); }
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: var(--sp-10) var(--sp-5);
    }
    .stat-item              { padding: var(--sp-3) var(--sp-2); }
    .stat-item .stat-number { font-size: var(--fs-5xl) !important; margin-bottom: var(--sp-2); line-height: 1; }
    .stat-item .stat-label  { font-size: var(--fs-sm)  !important; line-height: 1.7; }

    /* — CTA banner ──────────────────────────────────────────────────────── */
    .cta-banner {
        padding: var(--sp-12) var(--sp-6) !important;
        margin-block: var(--sp-12);
    }
    .cta-banner h2 { font-size: var(--fs-3xl) !important; line-height: 1.4 !important; }
    .cta-banner p  { font-size: var(--fs-lg);  line-height: 1.8; }
    .cta-banner .btn-group { flex-direction: column; gap: var(--sp-4); }
    .cta-banner .btn       { width: 100%; justify-content: center; }

    /* — Final CTA card ──────────────────────────────────────────────────── */
    .final-cta-card {
        flex-direction: column;
        padding: var(--sp-10) var(--sp-6) !important;
        text-align: center;
        align-items: stretch;
        gap: var(--sp-6);
    }
    .final-cta-text { text-align: center; }
    .final-cta-text .eyebrow { margin-inline: auto; }
    .final-cta-actions {
        flex-direction: column;
        gap: var(--sp-4);
        width: 100%;
    }
    .final-cta-actions .btn { width: 100%; justify-content: center; }

    /* — Page header (sub-pages) ─────────────────────────────────────────── */
    .page-header   { padding: var(--sp-12) 0 var(--sp-8) !important; }
    .page-header h1 { font-size: var(--fs-4xl) !important; }
    .page-header p  { font-size: var(--fs-base); }
    .breadcrumb    { font-size: var(--fs-xs); }
    .breadcrumb li::after { width: 12px; }

    /* — Forms ──────────────────────────────────────────────────────────── */
    .form-row {
        grid-template-columns: 1fr !important;
        gap: var(--sp-4);
    }
    .form-control, .form-select {
        min-height: 48px;
        padding: var(--sp-3);
    }
    textarea.form-control { min-height: 120px; }

    /* — Buttons ────────────────────────────────────────────────────────── */
    .btn    { min-height: 48px; padding: var(--sp-3) var(--sp-5); }
    .btn-lg { min-height: 54px; font-size: var(--fs-base); padding: var(--sp-4) var(--sp-6); }
    .btn-sm { min-height: 38px; }

    /* — Cards ──────────────────────────────────────────────────────────── */
    .card-body  { padding: var(--sp-6); }
    .card-title { font-size: var(--fs-lg); }

    /* — Generic grids ──────────────────────────────────────────────────── */
    .grid-2, .grid-3 {
        grid-template-columns: 1fr !important;
        gap: var(--sp-6);
    }
    .grid-4 { grid-template-columns: 1fr 1fr !important; gap: var(--sp-5); }

    /* — Footer ─────────────────────────────────────────────────────────── */
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: var(--sp-8);
        padding-block: var(--sp-12) var(--sp-8);
        text-align: start;
    }
    .footer-heading { font-size: var(--fs-sm); }
    .footer-brand   { text-align: center; }
    .footer-about   { max-width: none; }

    /* — Slider ─────────────────────────────────────────────────────────── */
    .slider { border-radius: var(--radius); }
    .slider-slide {
        padding: var(--sp-12) var(--sp-6) var(--sp-16) !important;
    }
    .slider-slide h2 { font-size: var(--fs-3xl) !important; line-height: 1.4 !important; }
    .slider-slide .slide-content { font-size: var(--fs-base); line-height: 1.85; }
    .slider-controls { gap: var(--sp-3); bottom: var(--sp-4); }

    /* — Assessment ─────────────────────────────────────────────────────── */
    .assessment-intro { padding: var(--sp-8) var(--sp-5) !important; }
    .assessment-dim-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-3);
        margin-block: var(--sp-6);
    }
    .assessment-dim-item { padding: var(--sp-4); }
    .question-card {
        padding: var(--sp-8) var(--sp-5) !important;
        border-radius: var(--radius-lg);
    }
    .question-text { font-size: var(--fs-lg) !important; line-height: 1.7 !important; }
    .likert-scale  { gap: 6px; }
    .likert-option { padding: var(--sp-2); }
    .likert-num    { font-size: var(--fs-lg); }
    .likert-label  { font-size: var(--fs-xs); }

    /* — Assessment result ──────────────────────────────────────────────── */
    .result-summary    { padding: var(--sp-10) var(--sp-6) !important; }
    .result-summary h2 { font-size: var(--fs-lg) !important; }
    .result-score      { font-size: var(--fs-6xl) !important; }
    .dim-result-grid   { grid-template-columns: 1fr !important; }
    .dim-result        { padding: var(--sp-6); }

    /* — Detox ──────────────────────────────────────────────────────────── */
    .detox-day        { padding: var(--sp-5); }
    .detox-day-title  { font-size: var(--fs-lg); }
    .detox-task       { padding: var(--sp-3); gap: var(--sp-3); }
    .detox-task-text  { font-size: var(--fs-base); line-height: 1.8; }
    .detox-checkbox   { width: 24px; height: 24px; }
    .detox-checkbox .icon { width: 16px; height: 16px; }
    .detox-join-bar {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: var(--sp-4);
    }
    .detox-join-bar-text       { align-items: center; }
    .detox-join-bar .btn       { width: 100%; justify-content: center; }
    .detox-link-box            { padding: var(--sp-6); }
    .detox-link-box .link-input { flex-direction: column; gap: var(--sp-3); }
    .detox-link-box input      { font-size: var(--fs-sm); }

    /* — Challenge cards ────────────────────────────────────────────────── */
    .challenge-grid { grid-template-columns: 1fr !important; gap: var(--sp-6); }

    /* — Consult / expert card ──────────────────────────────────────────── */
    .expert-card {
        flex-direction: column;
        text-align: center;
        padding: var(--sp-6);
    }
    .expert-photo { margin-inline: auto; }
    .slot-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: var(--sp-3);
    }
    .slot-option { padding: var(--sp-3); }
    .slot-time   { font-size: var(--fs-base); }

    /* — Family — keep 2 columns for the team grid ─────────────────────── */
    .family-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: var(--sp-4);
    }
    .family-card { padding: var(--sp-5) var(--sp-3); }
    .family-photo {
        width: 88px !important;
        height: 88px !important;
        font-size: var(--fs-2xl) !important;
    }
    .family-card h3        { font-size: var(--fs-base); }
    .family-card .role     { font-size: var(--fs-xs); }
    .family-card .bio      { font-size: var(--fs-xs); }

    /* — Comments / survey ──────────────────────────────────────────────── */
    .comment-form-card { padding: var(--sp-6) !important; }
    .comment           { padding: var(--sp-5); }
    .survey-card       { padding: var(--sp-6) !important; }
    .survey-check, .rating-option { padding: var(--sp-3); }

    /* — Article body ───────────────────────────────────────────────────── */
    .article-body { font-size: var(--fs-base); line-height: 1.95; }
    .article-body h2 { font-size: var(--fs-2xl); margin-top: var(--sp-8); }
    .article-body h3 { font-size: var(--fs-xl);  margin-top: var(--sp-6); }
    .article-body p  { margin-bottom: var(--sp-4); }
    .article-body blockquote {
        padding: var(--sp-5);
        font-size: var(--fs-base);
        line-height: 1.85;
    }

    /* — Share buttons ──────────────────────────────────────────────────── */
    .share-buttons { padding: var(--sp-5) 0; }
    .share-buttons a, .share-buttons button { width: 40px; height: 40px; }

    /* — Pagination ─────────────────────────────────────────────────────── */
    .pagination a { min-width: 40px; height: 40px; font-size: var(--fs-sm); }
}


/* ═════════════════════════════════════════════════════════════════════════
   TINY PHONE  (≤ 380px)

   Only minor tweaks — never collapse below readable sizes.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
    .container, .container-narrow {
        padding-inline: var(--sp-4);
    }
    .brand-logo { height: 58px !important; }

    h1            { font-size: var(--fs-3xl) !important; }
    .hero h1      { font-size: clamp(2rem, 9vw, 2.5rem) !important; }
    .section-title { font-size: var(--fs-2xl) !important; }
    .cta-banner h2 { font-size: var(--fs-2xl) !important; }

    .hero-mini-stats {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-5);
    }
    .stats-grid     { grid-template-columns: 1fr !important; gap: var(--sp-6); }
    .stat-item .stat-number { font-size: var(--fs-4xl) !important; }

    .family-grid    { grid-template-columns: 1fr !important; }
    .grid-4         { grid-template-columns: 1fr !important; }

    .hero-actions .btn,
    .cta-banner .btn,
    .final-cta-actions .btn { font-size: var(--fs-sm); }
}


/* ═════════════════════════════════════════════════════════════════════════
   PHONE LANDSCAPE  (short viewport)
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
    .hero, .hero-large { padding: var(--sp-10) 0 !important; }
    .hero-mini-stats   { display: none; }
}


/* ═════════════════════════════════════════════════════════════════════════
   ADMIN MOBILE  (≤ 900px and ≤ 480px)
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .admin-layout { display: block; }
    .admin-sidebar {
        position: fixed;
        inset-block: 0;
        inset-inline-end: 0;
        width: 280px;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform 300ms var(--ease);
    }
    [dir="rtl"] .admin-sidebar {
        inset-inline-end: 0;
        inset-inline-start: auto;
    }
    .admin-sidebar.is-open      { transform: translateX(0); }
    .admin-sidebar-toggle       { display: inline-flex !important; }

    .admin-main       { padding-top: 0; }
    .admin-topbar     { padding: var(--sp-3) var(--sp-4); }
    .admin-page-title { font-size: var(--fs-lg) !important; }
    .admin-user       { display: none; }
    .admin-content    { padding: var(--sp-4); }

    .stats-grid-admin {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-3);
    }
    .stat-tile         { padding: var(--sp-4); }
    .stat-tile .num    { font-size: var(--fs-3xl) !important; }

    .admin-card-body table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    .admin-filters     { flex-direction: column; }
    .admin-filters .form-group { width: 100%; min-width: 0; }
    .admin-card-header { flex-wrap: wrap; }
    .admin-card-header h2, .admin-card-header h3 { font-size: var(--fs-base) !important; }
    .admin-login-card  { padding: var(--sp-6) !important; max-width: 100%; }
}
@media (max-width: 480px) {
    .stats-grid-admin { grid-template-columns: 1fr; }
    .admin-tabs       { padding-inline: var(--sp-2); }
    .admin-tabs a     { padding: var(--sp-2) var(--sp-3); font-size: 12px; }
}


/* ═════════════════════════════════════════════════════════════════════════
   TOUCH DEVICES — disable hover transforms that cause jitter
   ═════════════════════════════════════════════════════════════════════════ */
@media (hover: none) {
    .feature-card:hover,
    .awareness-card:hover,
    .challenge-card:hover,
    .card:hover {
        transform: none !important;
    }
    .feature-icon:hover { transform: none !important; }
}