/* ============================================================
   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) {

    /* ----- Tooth mascot -----
       Inline style pins it to top:120px/left:35px, right over the
       hero heading, and its speech bubble (the "chatbot welcome
       message") spills across the hero. Move it to the bottom-left,
       shrink it, and drop the bubble on mobile. */
    #toothMascot,
    .tooth-mascot {
        top: auto !important;
        bottom: 16px !important;
        left: 12px !important;
        z-index: 9990 !important;
        animation: none !important;   /* no bouncing into content */
    }
    #toothMascot svg,
    .tooth-mascot svg {
        width: 46px !important;
        height: 52px !important;
    }
    #toothMascot .speech-bubble,
    .tooth-mascot .speech-bubble {
        display: none !important;
    }

    /* ----- WhatsApp button (bottom of the right-hand stack) ----- */
    #whatsapp-container {
        bottom: 16px !important;
        right: 16px !important;
    }
    #whatsapp-container > button {
        width: 52px !important;
        height: 52px !important;
        font-size: 26px !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 (middle of the right-hand stack) ----- */
    #darkModeToggle,
    .dark-mode-toggle {
        top: auto !important;
        bottom: 78px !important;
        right: 18px !important;
        width: 44px !important;
        height: 44px !important;
    }
    #darkModeToggle i,
    .dark-mode-toggle i { font-size: 1.15rem !important; }

    /* ----- Scroll-to-top (top of the right-hand 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;
        font-size: 1.1rem !important;
    }

    /* ----- Shop-only "view cart" button -----
       Defined in shop.html's own <style> (bottom:100/right:30, 60px),
       which would land on top of the right-hand stack. Move it to the
       bottom-left, above the mascot. */
    .cart-float {
        bottom: 80px !important;
        left: 12px !important;
        right: auto !important;
        width: 52px !important;
        height: 52px !important;
        font-size: 1.3rem !important;
    }

    /* decorative background layers must never eat taps */
    .floating-bubbles,
    .floating-elements { pointer-events: none !important; }
}

/* ----- Declutter: hide the floating widgets while the mobile
   nav menu is open OR the welcome popup is showing, so they
   never sit on top of those panels. (: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) #toothMascot,
    body:has(.nav-menu.active) #scrollToTop,
    body:has(.nav-menu.active) .dark-mode-toggle,
    body:has(.nav-menu.active) .cart-float,
    body:has(.welcome-popup-overlay.active) #whatsapp-container,
    body:has(.welcome-popup-overlay.active) #toothMascot,
    body:has(.welcome-popup-overlay.active) #scrollToTop,
    body:has(.welcome-popup-overlay.active) .dark-mode-toggle,
    body:has(.welcome-popup-overlay.active) .cart-float {
        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;
        /* brand-brown panel so the white nav links stay readable */
        background: linear-gradient(135deg, #4a3728 0%, #5c4033 50%, #6b4423 100%) !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%; }

    /* language switcher centred within the menu */
    .nav-menu .lang-switcher {
        justify-content: center;
        width: -moz-fit-content;
        width: fit-content;
        margin: 0.75rem auto 0;
    }
    .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; }
}