/* =================================================================
   MUSKAN BAKERY — RESPONSIVE & CROSS-BROWSER FIX
   Loads LAST (after all other CSS). Desktop layout untouched.
   Fixes: horizontal overflow, mobile menu, footer overlap,
   iPhone/Safari quirks, media overflow, form zoom-on-focus.
   ================================================================= */

/* ---------- 1. GLOBAL SAFETY / CROSS-BROWSER ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;   /* stop iOS auto-resizing text */
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

/* Media should never push the page wider than its container */
img, svg, video, iframe, canvas, object {
    max-width: 100%;
}

/* Kill horizontal scroll on phones/tablets.
   (At <=1024 the cart summary is already static, so sticky isn't affected.) */
@media screen and (max-width: 1024px) {
    html, body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }
}

/* Re-add -webkit- prefix for older iOS sticky support */
.cart-summary {
    position: -webkit-sticky;
}


/* ---------- 2. MOBILE NAVIGATION MENU (the big one) ---------- */
@media screen and (max-width: 1024px) {

    nav { position: relative; z-index: 1200; }

    /* Menu panel drops straight under the navbar, full width, no weird offset */
    .menuLinks {
        display: none;
        position: absolute;
        top: 100%;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: calc(100vh - 5rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 0.75rem 1.1rem 1.1rem;
        border-radius: 0 0 1.2rem 1.2rem;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
    }

    /* JS toggles this class — no more double-tap bug */
    .menuLinks.show { display: flex; }

    .menuLinks > a,
    .menuLinks .dropDown > a {
        width: 100%;
        margin: 0 !important;
        padding: 0.75rem 0.5rem !important;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    }

    .dropDown { width: 100%; display: block; }

    /* Sub-menus become tap accordions instead of hover pop-ups.
       display uses !important so a stuck :hover on Android can never
       override the JS-controlled .open state. */
    .dropDownContent {
        position: static !important;
        display: none !important;
        width: 100%;
        background: rgba(0, 0, 0, 0.14);
        border-radius: 0.5rem;
        margin: 2px 0 6px;
        padding: 4px 0;
    }
    .dropDownContent a {
        padding: 0.6rem 0.5rem 0.6rem 1.4rem !important;
        font-size: 15px;
        border-bottom: none;
    }
    /* Opens ONLY when JS adds .open — hover is fully neutralised on touch */
    .dropDown.open > .dropDownContent { display: flex !important; }

    /* Faster, reliable taps on Android (removes 300ms delay + double-tap zoom) */
    .menuLinks a,
    .menuLinks .dropDown > a,
    .ham {
        touch-action: manipulation;
        cursor: pointer;
    }

    /* Little caret rotates when open */
    .dropDown > a i { transition: transform 0.25s ease; pointer-events: none; }
    .dropDown.open > a i { transform: rotate(180deg); }

    /* Keep the cart icon that sits inside the desktop menu hidden on mobile
       (there is a separate mobile cart already) */
    .cart-icon-wrapper.desktop-cart { display: none !important; }

    /* Hamburger sizing */
    .ham { font-size: 24px; }
}


/* ---------- 3. FOOTER — stop the overlap, stack cleanly ---------- */
@media screen and (max-width: 1024px) {
    .insideFooter {
        flex-wrap: wrap;
        justify-content: space-between !important;
        align-items: flex-start;
        gap: 1rem 0;
    }
    .footerWidgets {
        width: 47% !important;
        margin: 0.75rem 0 !important;
    }
}
@media screen and (max-width: 600px) {
    footer { padding: 2.5rem 0 1.5rem; }
    .insideFooter { flex-direction: column; }
    .footerWidgets {
        width: 100% !important;
        align-items: flex-start !important;
        margin: 0.5rem 0 !important;
    }
    .footer-para { margin-top: 1rem; }
    .footerIcons { flex-wrap: wrap; }
    .footerIcons i { margin: 0.8rem 0.5rem !important; }
    .copy { font-size: 13px !important; text-align: center; padding: 0 1rem; }
}


/* ---------- 4. HERO / BREADCRUMB overflow (About & Contact) ---------- */
.aboutFirst,
.contactFirst { overflow: hidden; }

@media screen and (max-width: 900px) {
    /* Decorative breadcrumb bread images overflow & overlap the next
       section on phones — hide them, they're purely decorative */
    .aboutFirstIMG { display: none !important; }
    .aboutFirst, .contactFirst { padding: 3.5rem 0 !important; }
    .ifst { margin-top: 2rem !important; }   /* was 8-10rem, caused huge gaps */
}


/* ---------- 5. FIXED-WIDTH ELEMENTS that break small screens ---------- */
/* Swiper slider had a hard-coded 1180px width */
.swiper { width: 100% !important; max-width: 1180px; }

.card-list .card-item .card-link { width: 100% !important; max-width: 400px; }

.Frenchise-list { width: 100% !important; max-width: 20rem; height: auto !important; }

@media screen and (max-width: 900px) {
    .slider { margin: 1.5rem 0 !important; width: 100% !important; }
    .DistributorSection { flex-direction: column; margin: 1.5rem 0 !important; }
    .DistributorSectionleft,
    .DistributorSectionright { width: 100% !important; }
    .distributor-heading h1 { margin: 2rem 1rem !important; }
    .counter-container { margin: 1.5rem !important; }
}


/* ---------- 6. iPhone / Safari — viewport height & form zoom ---------- */
@media screen and (max-width: 900px) {
    /* 100vh map is enormous on iOS; cap it and use dvh where supported */
    .contactFourth { height: 65vh; }
    .insideContactFourth iframe { min-height: 300px; }

    /* iOS zooms the whole page when a field <16px gets focus — force 16px */
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="number"], input[type="search"], input[type="password"],
    textarea, select {
        font-size: 16px !important;
    }
}
@supports (height: 100dvh) {
    @media screen and (max-width: 900px) {
        .contactFourth { height: 65dvh; }
    }
}


/* ---------- 7. FLOATING WHATSAPP BUTTON ---------- */
.icon-bar {
    top: auto !important;
    bottom: 1.25rem;
    right: 1rem !important;
    z-index: 999;
}
@media screen and (max-width: 600px) {
    .icon-bar a {
        height: 3.4rem;
        width: 3.4rem;
        font-size: 32px;
        padding: 0;
    }
}


/* ---------- 8. GENERIC WRAP GUARDS for long words / rows ---------- */
.mainH2, .mMainH2, .montserrat, .manrope,
h1, h2, h3, p, a { overflow-wrap: break-word; word-wrap: break-word; }

@media screen and (max-width: 900px) {
    .insideIssc,
    .mainMain,
    .insideThirdSection,
    .indexProducts,
    .franchiseSection { flex-wrap: wrap; }
}


/* ---------- 9. CONTACT PAGE — "Call Us" card overflow/overlap ---------- */
/* The Call Us card holds 4 phone numbers; the old fixed heights
   (10rem / 6rem) were too short, so the text overlapped the next card. */
@media screen and (max-width: 1200px) {
    .contactCard {
        height: auto !important;
        min-height: 6rem;
        align-items: flex-start !important;
        margin: 0.75rem 0 !important;
    }
    .insideContactCard { margin: 0.5rem 1rem !important; }
    .insideContactCard p { margin: 2px 0 !important; line-height: 1.4 !important; }
}
@media screen and (max-width: 900px) {
    .insideContactThirdCard:not(.ictc1) {
        width: 100% !important;
        align-items: stretch !important;
    }
    .contactCard { width: 100% !important; }
}