/* ============================================================
   Hans Travel — Mobile & Tablet refinements
   ------------------------------------------------------------
   Loaded LAST (end of <body> in _SiteLayout) so these rules win
   over the per-section inline <style> blocks by source order.

   HARD RULE: every layout selector lives inside a `max-width`
   media query, so desktop (>= 1025px) never sees them and its
   layout is guaranteed unchanged. The only base-level rules are
   the two that HIDE the mobile-only bottom-bar toggle on desktop.
   ============================================================ */

/* The bottom-bar toggle exists in the DOM on every page but is inert on desktop:
   the checkbox is state-only and the handle is not displayed, so the floating
   stack renders exactly as before at >=1025px. */
.ht-bar-toggle { position: fixed; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ht-bar-handle { display: none; }

/* ───────────────────────── Tablet (≤1024px) ───────────────────────── */
@media (max-width: 1024px) {
    .ht-promo { display: none !important; }     /* left-rail popup: no room beside centered content */
    .section { padding: 76px 0; }
    .hans-teams { padding: 40px 0 !important; }
}

/* ───────────────────────── Mobile (≤768px) ───────────────────────── */
@media (max-width: 768px) {

    /* ── Header — always a SOLID, visible, sticky bar on mobile ──────────────
       The transparent-over-hero treatment made the white logo + hamburger
       vanish over bright hero images and depended on a JS "scrolled" class for
       its background (fragile on mobile → header read as "not sticky"). A solid
       fixed bar is robust and matches the sub-page header the client preferred.
       `overflow-x:clip` blocks horizontal scroll without creating a scroll
       container, which keeps position:fixed reliable on mobile browsers. */
    html, body { overflow-x: clip; }
    .header,
    .header.header--transparent,
    .header.header--transparent:not(.scrolled),
    .header.scrolled {
        /* top:0 을 강제하면 JS 가 넣는 배너 오프셋(header.style.top)이 덮여
           헤더가 배너와 겹친다. --header-top 변수를 쓰면 배너 아래로 내려간다. */
        position: fixed !important; top: var(--header-top, 0px) !important;
        background: #fff !important;
        border-bottom: 1px solid var(--border, #e5e7eb) !important;
        box-shadow: 0 1px 0 rgba(20, 23, 40, .04);
        backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    }
    /* Full-colour logo on the white bar (undo the white-invert filter). */
    .header .logo-img,
    .header--transparent:not(.scrolled) .logo-img { filter: none !important; }

    .header-inner,
    .header--solid .header-inner { height: 58px; }
    .logo-img,
    .header--solid .logo-img { height: 40px !important; }
    .nav { top: 58px !important; }

    /* Hamburger: always shown, dark on the white bar so it's clearly visible. */
    .mobile-toggle,
    .header--transparent:not(.scrolled) .mobile-toggle {
        display: block !important;
        color: var(--text, #14233a) !important;
        background: transparent !important;
        font-size: 24px; padding: 6px 8px;
    }

    /* ── Mobile hamburger menu (the dropdown panel) ──────────────────────────
       The transparent-header rule paints nav links white, which made them
       invisible on the white panel. Force dark text, lay items out as
       full-width divided rows, and turn the hover-only "[v]" submenu into a
       tap-to-expand accordion (driven by .nav-item.open from the JS above). */
    .nav {
        top: 58px !important; left: 0; right: 0;
        background: #fff;
        padding: 4px 0 14px !important;
        gap: 0 !important;
        max-height: calc(100vh - 58px); overflow-y: auto;
        box-shadow: 0 16px 34px rgba(20, 23, 40, .14);
        border-top: 1px solid var(--border, #e5e7eb);
    }
    /* Dark, visible text for every link in the menu. */
    .header .nav a,
    .header .nav .nav-mega-trigger,
    .header .nav .nav-simple-trigger,
    .header--transparent:not(.scrolled) .nav > a,
    .header--transparent:not(.scrolled) .nav > .nav-item > .nav-mega-trigger,
    .header--transparent:not(.scrolled) .nav > .nav-item > .nav-simple-trigger {
        color: var(--text, #14233a) !important;
    }
    /* Top-level rows: full width, divided, even padding; no hover underline. */
    .nav > a,
    .nav > .nav-item { display: block; width: 100%; border-bottom: 1px solid var(--border, #e5e7eb); }
    .nav > a,
    .nav .nav-mega-trigger,
    .nav .nav-simple-trigger {
        padding: 15px 20px !important;
        font-size: 16px !important; font-weight: 600;
        border-bottom: none !important;
    }
    .nav .nav-mega-trigger { display: block; }   /* full-width row (navigates to /tours) */
    .nav a::after { display: none !important; }
    .nav-simple-wrap, .nav-mega-wrap { position: static; }

    /* "[v]" disclosure caret on 한스 이야기 — rotates when expanded. */
    .nav .nav-simple-trigger { display: flex !important; align-items: center; justify-content: space-between; }
    .nav .nav-simple-trigger .nav-caret { display: inline-block; font-size: 22px; opacity: .5; transition: transform .2s ease; }
    .nav-item.open .nav-simple-trigger .nav-caret { transform: rotate(180deg); opacity: .8; }

    /* Submenu becomes an inline accordion panel (collapsed unless .open). */
    .nav-simple-dropdown {
        position: static !important; transform: none !important;
        min-width: 0 !important; width: 100% !important; max-width: none !important;
        background: #F7F8FB; border: none !important; border-radius: 0 !important;
        box-shadow: none !important; padding: 2px 0 6px !important;
        opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
    }
    .nav-item.open > .nav-simple-dropdown { display: block !important; }
    .header .nav-simple-dropdown a { padding: 12px 20px 12px 38px !important; font-size: 15px; font-weight: 500; }
    .header .nav-simple-dropdown a span { margin-left: auto; opacity: .6; }

    /* 상담 예약 → brand button inside the menu. */
    .nav .nav-cta {
        margin: 14px 20px 2px !important;
        background: var(--accent, #31349C) !important; color: #fff !important;
        justify-content: center; border-radius: 8px;
    }
    .nav .nav-cta::after { display: none !important; }

    /* ── Typography — the global 3-tier system forces h2 → 30px at all widths,
       which clips long Korean headings on a phone. ──────────────────────────── */
    body h2,
    body .section-title,
    body [class*="section-title"],
    body h2 * { font-size: 24px !important; line-height: 1.32 !important; }
    .section-subtitle { font-size: 16px; }
    .section-header { margin-bottom: 32px; }

    /* ── Hero — full-width, stacked CTAs make better thumb targets. ─────────── */
    .hero-content { padding-left: 20px; padding-right: 20px; }
    .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .hero-actions .btn { width: 100%; }

    /* ── Floating menu → compact 2-row app bar (with hide/show toggle) ───────── */
    .float-cta {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto;
        display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
        width: 100%;
        background: #fff;
        border-top: 1px solid var(--border, #e5e7eb);
        box-shadow: 0 -3px 14px rgba(20, 23, 40, .10);
        padding: 4px 2px;
        padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
        z-index: 1000;
        transition: transform .25s ease;
    }
    .float-btn {
        width: auto; height: auto; min-height: 0;
        flex-direction: column; gap: 3px;
        padding: 5px 2px; border-radius: 8px;
        background: transparent !important;
        color: var(--text, #14233a) !important;
        border: none !important; box-shadow: none !important;
    }
    .float-btn:active { background: var(--accent-light, rgba(49,52,156,.08)) !important; }
    /* Keep the desktop colored icon badge on mobile too (just smaller). Only the
       logo carries the brand color; the button + label stay uniform on the white
       bar. Shape/background/glyph-color inherit from the desktop .float-btn i and
       either the per-button badge rule (.float-phone i) or the admin-managed
       --fab-badge-bg/fg custom props (카톡 상담, 유튜브, etc.) — we override only
       the SIZE here, and must NOT re-set background/color or the badge flattens
       / loses its per-button color. */
    .float-btn i { width: 30px; height: 30px; font-size: 16px; line-height: 1; }
    .float-btn .float-label { display: inline-block; font-size: 9.5px; font-weight: 600; white-space: nowrap; }
    .float-top { opacity: 1 !important; pointer-events: auto !important; transform: none !important; background: transparent !important; }

    /* Toggle handle — round button pinned to the bottom-right corner. OPEN state
       shows the ✕ (close) in a neutral gray so it stands apart from the colorful
       grid buttons and sits at the very bottom (no collision); CLOSED state is the
       brand-colored apps button that brings the bar back. */
    .ht-bar-handle {
        display: flex; align-items: center; justify-content: center;
        position: fixed; right: 12px; bottom: 12px; z-index: 1002;
        width: 42px; height: 42px; border-radius: 50%;
        background: #4B5563; color: #fff; font-size: 22px;
        box-shadow: 0 6px 16px rgba(20, 23, 40, .28); cursor: pointer;
        transition: bottom .25s ease, transform .15s ease, background .15s ease;
    }
    .ht-bar-handle:active { transform: scale(.93); }
    .ht-bar-handle .ht-bar-ic-show { display: none; }

    /* Hidden state — slide the bar off-screen; handle becomes the brand apps button. */
    .ht-bar-toggle:checked ~ .float-cta { transform: translateY(110%); }
    .ht-bar-toggle:checked ~ .ht-bar-handle { bottom: 16px; background: var(--brand, #31349C); }
    .ht-bar-toggle:checked ~ .ht-bar-handle .ht-bar-ic-hide { display: none; }
    .ht-bar-toggle:checked ~ .ht-bar-handle .ht-bar-ic-show { display: inline; }

    /* Keep content/footer clear of the app bar. --ht-appbar-h / --ht-bookingbar-h
       are measured at runtime (script in _SiteLayout) so the reserved space always
       matches the ACTUAL bar height, however many floating icons the admin adds.
       When the bar is hidden we reclaim the space so content uses the full height. */
    body { padding-bottom: var(--ht-appbar-h, 160px); }
    body:has(.ht-bar-toggle:checked) { padding-bottom: 0; }

    /* Tour-detail booking bar stacks ABOVE the app bar (both fully visible — no
       overlap); when the app bar is hidden it drops to the bottom and only its own
       height is reserved, so the content expands to ~full height. */
    body:has(.mobile-cta) { padding-bottom: calc(var(--ht-appbar-h, 160px) + var(--ht-bookingbar-h, 66px)); }
    body:has(.mobile-cta) .mobile-cta { bottom: var(--ht-appbar-h, 160px); }
    body:has(.mobile-cta):has(.ht-bar-toggle:checked) { padding-bottom: var(--ht-bookingbar-h, 66px); }
    body:has(.mobile-cta):has(.ht-bar-toggle:checked) .mobile-cta { bottom: 0; }
}

/* ───────────────────────── Small phones (≤480px) ───────────────────────── */
@media (max-width: 480px) {
    body h2,
    body .section-title,
    body [class*="section-title"],
    body h2 * { font-size: 22px !important; }
    .container { padding-left: 16px; padding-right: 16px; }
    .float-btn i { width: 28px; height: 28px; font-size: 15px; }
    .float-btn .float-label { font-size: 9px; }
}
