/* =====================================================================
   MOBILE / TABLET RESPONSIVE FIXES
   Loaded AFTER style.css (see main_links() in common-function.php).
   Selectors are prefixed with "body" so they also win over the inline
   <style> blocks that sit inside each page.
===================================================================== */

html, body { max-width: 100%; overflow-x: hidden; }
img, video, svg, iframe { max-width: 100%; }
iframe { border: 0; }

/* ---------- Tablet & below : header / drawer ---------- */
@media (max-width: 1024px) {
    /* 100vh on mobile browsers includes the URL bar -> bottom of menu was cut */
    .header-blue-bg {
        height: calc(100vh - 80px);
        height: calc(100dvh - 80px);
        padding-bottom: 90px;
        -webkit-overflow-scrolling: touch;
    }
    .menu-item { padding: 10px 0; font-size: 16px; }
    .menu-item::after { bottom: 2px; }
    .hamburger { padding: 6px; right: 18px; top: 22px; line-height: 1; cursor: pointer; }

    /* fixed background-attachment is broken / janky on phones & tablets */
    .process-section { background-attachment: scroll; }
}

/* ---------- Phones & small tablets ---------- */
@media (max-width: 768px) {

    /* scroll-reveal animations must never push the page sideways */
    body .animate-on-scroll.fade-left,
    body .animate-on-scroll.fade-right { transform: translateY(40px); }
    body .animate-on-scroll.in-view    { transform: none; }

    /* ----- Home hero slider ----- */
    body .creative-slider-wrapper { height: 300px; min-height: 0; }
    body .slide-item { padding: 0 50px; }
    body .slide-item h1 { font-size: 1.3rem; line-height: 1.3; margin-bottom: 16px; }
    body .slider-content { margin-left: 0; max-width: 100%; }
    body .slider-navigation { padding: 0 8px; }
    body .slider-nav-btn { width: 32px; height: 32px; font-size: 12px; }
    body .indicators { bottom: 10px; gap: 8px; }

    /* ----- Header CTA / phone inside the drawer ----- */
    .header-right-actions { margin-top: 0; }

    /* ----- Home: About section ----- */
    body .about-laundry__inner { padding: 28px 18px 20px; gap: 18px; }
    body .about-laundry__copy  { padding: 0; }
    body .about-laundry__title { font-size: 23px; }
    body .about-laundry__desc  { text-align: left; max-width: 100%; font-size: .95rem; line-height: 1.75; }
    body .about-laundry__eyebrow { font-size: .7rem; padding: 7px 14px; text-align: center; }
    body .about-laundry__stats { gap: 20px; }
    body .about-laundry__band  { padding: 20px 16px 40px; }
    body .band__inner { gap: 14px; }

    /* ----- Home: process / why-choose ----- */
    body .process-header { margin-bottom: 36px; }
    body .process-header h2 { font-size: 1.7rem; }

    /* ----- Home: dual process lists ----- */
    body .bp-title { font-size: 21px; margin-bottom: 28px; }

    /* ----- Home: premium laundry + van ----- */
    body .laundry-title { font-size: 24px; }
    body .laundry-subtitle { font-size: 15px; }
    body .feature-card { padding: 18px; gap: 14px; }
    body .feature-content h3 { font-size: 17px; }
    body .feature-content p  { font-size: 15px; }
    body .animation-column { overflow: hidden; padding: 10px 0; }
    body .car-floating-wrapper { max-width: 100%; animation-name: carDriveMobile; }

    /* ----- Service pages: "typing" headings were clipped (nowrap + width:100%) ----- */
    body .typing-text {
        display: inline;
        white-space: normal;
        width: auto;
        overflow: visible;
        border-right: 0;
        animation: none;
    }

    /* ----- Footer ----- */
    .contact-info a, .branch-box p, .branch-box a { overflow-wrap: anywhere; }

    /* ----- Floating buttons ----- */
    body .whatsapp-floating-container { right: 14px; bottom: 84px; }
    body .wa-floating-btn { width: 46px; height: 46px; }
    body .wa-floating-btn svg { width: 26px; height: 26px; }
    body .wa-chat-popup-box { width: calc(100vw - 28px); max-width: 340px; bottom: 62px; }
    body .iron-scroll-btn { right: 8px; bottom: 16px; width: 56px; height: 56px; }
    body .iron-scroll-btn svg { width: 46px; height: 60px; }
    body .iron-scroll-btn .tooltip-box { display: none; }

    /* hide floating buttons while the enquiry popup is open (they sat on top of "Submit") */
    body:has(.laundry-popup-overlay.active) .whatsapp-floating-container,
    body:has(.laundry-popup-overlay.active) .iron-scroll-btn { display: none; }
}

@keyframes carDriveMobile {
    0%   { transform: translateX(-10px) translateY(0) rotate(0deg); }
    25%  { transform: translateX(6px)   translateY(-4px) rotate(-1deg); }
    50%  { transform: translateX(12px)  translateY(0) rotate(0deg); }
    75%  { transform: translateX(-5px)  translateY(-4px) rotate(1deg); }
    100% { transform: translateX(-10px) translateY(0) rotate(0deg); }
}


/* ---------- Service pages : "Specialties" cards ----------
   min-height:100% on .card-image made the photo fill the whole stacked card,
   so the title + description underneath were clipped (invisible) on phones. */
@media (max-width: 850px) {
    body .specialties-section .card-image { min-height: 0; }
}
@media (max-width: 480px) {
    body .specialties-section .specialty-card { min-height: 0; }
    body .specialties-section .card-image { height: 264px; flex: none; width: 100%; }
}

/* ---------- Small phones ---------- */
@media (max-width: 480px) {
    body .creative-slider-wrapper { height: 270px; }
    body .slide-item { padding: 0 44px; }
    body .slide-item h1 { font-size: 1.2rem; }

    body .section-header h2 { font-size: 22px; }
    body .services-section  { padding: 44px 16px; }

    body .service-content-box { left: 12px; right: 12px; bottom: 12px; padding: 12px 14px; }

    body .process-section { padding: 48px 14px; }
    body .bp-side { padding: 44px 18px; }
    body .laundry-hero-section { padding: 40px 14px; }

    body .footer-container { padding: 30px 18px 16px; }
    body .footer-bottom { padding: 16px 12px; line-height: 1.6; }
}

@media (max-width: 360px) {
    body .brand-logo { height: 52px; width: 150px; }
    body .header-white-wave { width: 78%; }
    body .slide-item h1 { font-size: 1.1rem; }
    body .process-header h2 { font-size: 1.5rem; }
    body .laundry-title { font-size: 21px; }
}

/* =====================================================================
   MOBILE HEADER : top bar + opened menu = ONE connected panel
===================================================================== */
@media (max-width: 1024px) {
    body .curved-wave-header {
        position: sticky;
        top: 0;
        height: 72px;
        z-index: 1000;
    }
    body .header-white-wave {
        width: 62%;
        padding-left: 16px;
        z-index: 1002;
    }
    body .brand-logo { height: 54px; width: 170px; }

    body .hamburger {
        top: 50%;
        right: 16px;
        transform: translateY(-50%);
        width: 42px; height: 42px;
        display: flex; align-items: center; justify-content: center;
        border-radius: 10px;
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.18);
        font-size: 20px; padding: 0;
        z-index: 1003;
    }

    /* drawer starts exactly under the bar, same colour, no gap/shadow line */
    body .header-blue-bg {
        position: fixed;
        top: 72px;
        left: 0;
        width: 100%;
        height: calc(100vh - 72px);
        height: calc(100dvh - 72px);
        padding: 10px 20px 40px;
        gap: 18px;
        background: #0b1c48;
        transform: translateY(-110%);
        opacity: 0;
        visibility: hidden;
        transition: transform .35s ease, opacity .25s ease, visibility .35s;
        z-index: 999;
        overflow-y: auto;
        align-items: stretch;
        justify-content: flex-start;
    }
    body .header-blue-bg.active {
        left: 0;
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    body.menu-open .curved-wave-header { box-shadow: none; }
    body.menu-open { overflow: hidden; }

    body .navbar, body .nav-container { width: 100%; }
    body .nav-list { gap: 0; text-align: left; }
    body .nav-list > li {
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,.1);
        align-items: stretch;
    }
    body .nav-list .menu-item {
        display: flex; justify-content: space-between; align-items: center;
        padding: 15px 4px; font-size: 16px; width: 100%;
    }
    body .nav-list .menu-item::after { display: none; }
    body .dropdown-link { justify-content: flex-start; padding: 12px 16px; }

    body .header-right-actions {
        margin-top: 8px;
        gap: 14px;
        align-items: stretch;
    }

    body .header-right-actions .cta-btn { justify-content: center; padding: 8px 10px 8px 18px; font-size: 14px; }
}
@media (max-width: 360px) {
    body .header-white-wave { width: 72%; }
    body .brand-logo { height: 48px; width: 140px; }
}

/* =====================================================================
   MOBILE HEADER : always stay on top while scrolling (fix)
   sticky breaks because html/body have overflow-x:hidden -> use fixed
===================================================================== */
@media (max-width: 1024px) {
    html, body { overflow-x: clip; }
    body { padding-top: 72px; }
    body .curved-wave-header {
        position: fixed;
        top: 0; left: 0; right: 0;
        width: 100%;
        z-index: 1000;
    }
    body .header-blue-bg { top: 72px; }
}