/* ============================================================
   MOBILE RESPONSIVE OPTIMIZATION
   Klinik Pergigian Luna (Miharja)

   Loaded AFTER css/style.css. Every rule lives inside a
   max-width media query, so the DESKTOP layout is never
   touched — this file only activates on tablets/phones.

   Breakpoints:
     <= 768px : tablet / large phone
     <= 480px : phones
     <= 360px : small phones (down to 320px)
   ============================================================ */

/* ============================================================
   1. GLOBAL — stop horizontal overflow, scale media
   ============================================================ */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }

    *, *::before, *::after { box-sizing: border-box; }

    /* nothing should be able to push the page wider than the screen */
    img, svg, video, iframe, table, pre { max-width: 100%; height: auto; }

    .container { width: 100%; }

    /* long words / urls wrap instead of overflowing */
    h1, h2, h3, p, a, span, li { overflow-wrap: break-word; word-wrap: break-word; }
}

/* ============================================================
   2. FLOATING WIDGETS
   Keep them accessible but small, and out of the content.
   These elements use INLINE styles in the HTML, so the
   overrides below need !important to win the cascade.
   ============================================================ */
@media (max-width: 768px) {

    /* ----- WhatsApp button (bottom-right; the one floating widget this
       redesign keeps — required, see design brief) ----- */
    #whatsapp-container {
        bottom: 16px !important;
        right: 16px !important;
    }
    #whatsapp-container > button {
        width: 52px !important;
        height: 52px !important;
    }
    /* DSA chooser popup must never be wider than the screen */
    #whatsapp-container #dsa-popup {
        max-width: calc(100vw - 32px) !important;
        min-width: 0 !important;
    }

    /* ----- Dark-mode toggle (above the WhatsApp button) ----- */
    #darkModeToggle,
    .dark-mode-toggle {
        top: auto !important;
        bottom: 78px !important;
        right: 18px !important;
        width: 44px !important;
        height: 44px !important;
    }

    /* ----- Scroll-to-top (top of the stack, shows on scroll) -----
       Sits clear of the dark-mode toggle even in its hidden translateY(20px)
       state, so the two never overlap during the fade transition. */
    #scrollToTop,
    .scroll-to-top {
        bottom: 150px !important;
        right: 18px !important;
        width: 44px !important;
        height: 44px !important;
    }
}

/* ----- Declutter: hide the floating widgets while the mobile nav menu is
   open, so they never sit on top of it. (:has is supported by all current
   iOS Safari / Android Chrome versions.) ----- */
@media (max-width: 768px) {
    body:has(.nav-menu.active) #whatsapp-container,
    body:has(.nav-menu.active) #scrollToTop,
    body:has(.nav-menu.active) .dark-mode-toggle {
        display: none !important;
    }
}

/* ============================================================
   3. PUSH-DOWN MOBILE NAV (no overlay)
   The menu must NOT cover the hero. So on mobile the header joins
   the normal document flow (sticky, not fixed) and the menu drops
   onto its own full-width row that expands in flow — pushing all
   page content DOWN instead of overlaying it. This also removes the
   old backdrop-filter containing-block bug entirely.
   ============================================================ */
@media (max-width: 768px) {
    /* Header in flow: occupies real space, still sticks to the top. */
    .navbar {
        position: sticky !important;
        top: 0;
    }
    .navbar .container {
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        height: auto;
        min-height: 64px;
        gap: 0.5rem 1rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    .logo       { order: 1; }
    .nav-toggle { order: 2; display: flex; }

    /* The menu: full-width row below the logo/toggle, IN FLOW.
       Collapsed by default (max-height:0); expands on .active and
       pushes everything beneath the header downward. */
    .nav-menu {
        order: 3;
        flex-basis: 100%;
        width: 100%;
        position: static !important;
        transform: none !important;
        inset: auto !important;          /* clear any top/right/bottom/left */
        height: auto !important;
        max-height: 0;
        overflow: hidden;
        display: flex !important;
        flex-direction: column;
        gap: 0;
        padding: 0 !important;
        /* ink panel so the white nav links stay readable */
        background: #241F1D !important;
        border-radius: 0 0 14px 14px;
        transition: max-height 0.35s ease;
    }
    .nav-menu.active {
        max-height: 80vh;                /* expands in flow → content moves down */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0.5rem 1rem 1.25rem !important;
    }
    .nav-menu li { width: 100%; }

    /* Pre-existing contrast bug found during i18n QA (2026-07-20): the
       legacy in-page style.css rule `.nav-menu li a { color: var(--ink) }`
       (written for the OLD white slide-in panel this file's redesign
       replaced) was never updated when this file switched the panel to a
       dark ink background above — text color (#241F1D) landed on a
       background of the same color (#241F1D), so every mobile nav link
       except whichever page you're currently on (the only one repainted
       white by the .active/:hover rule in style.css) rendered invisible,
       ratio ~1:1, in both languages. Restores the white nav text this
       dark panel always intended (matches the desktop .nav-menu li a
       color one file up), scoped with !important to definitively win
       over the legacy rule rather than depend on cascade order.
       Direct-child combinator only (`>`) — the nested "More" dropdown
       (.dropdown-menu li a, e.g. Gallery / Dental Care Tips) sits on its
       own light background and already carries the correct dark inline
       color from Header.tsx; a bare `.nav-menu li a` descendant selector
       would (and, in an earlier version of this fix, briefly did)
       force-white those too, making THEM invisible instead. */
    .nav-menu > li > a { color: rgba(255,255,255,0.85) !important; }

    .nav-menu .cart-link { padding: 1rem; justify-content: center; }

    /* dropdown stays in-flow and within the menu width */
    .nav-dropdown .dropdown-menu {
        width: 100%;
        min-width: 0;
        box-shadow: none;
    }
    .nav-dropdown .dropdown-menu::before { display: none; }
}

/* ============================================================
   4. HERO + TYPOGRAPHY SCALING
   ============================================================ */
@media (max-width: 768px) {
    /* Header is now in normal flow, so the first sections no longer need
       to reserve space for a fixed bar. */
    .hero {
        min-height: auto;
        padding-top: 2rem;
        padding-bottom: 3rem;
    }
    .page-header {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
    .hero-content { max-width: 100%; }
}

@media (max-width: 480px) {
    .hero-content h1 { font-size: 1.95rem; line-height: 1.25; }
    .hero-subtitle   { font-size: 1.05rem; }
    .hero-text       { font-size: 1rem; }

    .section-header h2 { font-size: 1.6rem; }
    .section-header p  { font-size: 0.95rem; }

    /* logo must share the top bar with the hamburger without wrapping oddly */
    .navbar .container { gap: 0.5rem; }
    .logo .logo-main   { font-size: 0.85rem; }
    .logo .logo-branch { font-size: 0.6rem; }
    .logo i            { font-size: 1.4rem; padding: 0.4rem; }
    .logo img          { width: 32px; height: 32px; }

    /* large buttons scale down */
    .btn-lg { padding: 0.85rem 1.25rem; font-size: 0.95rem; }
    .btn    { white-space: normal; }
}

/* very small phones (320–360px) */
@media (max-width: 360px) {
    html { font-size: 13px; }
    .hero-content h1 { font-size: 1.65rem; }
    .hero-subtitle   { font-size: 0.95rem; }
    .container { padding-left: 0.85rem; padding-right: 0.85rem; }
}

/* ============================================================
   5. WELCOME POPUP — fit small screens
   ============================================================ */
@media (max-width: 480px) {
    .welcome-popup {
        max-width: 90vw !important;
        padding: 1.75rem 1.25rem !important;
    }
    .welcome-emoji   { font-size: 3rem !important; }
    .welcome-popup h2 { font-size: 1.4rem !important; }
    .welcome-popup p  { font-size: 0.95rem !important; }
    .welcome-close-btn { padding: 11px 26px !important; }
}