/* Phone comfort, loaded last on every public page: no sideways drift, no surprise zoom, a still page behind the
   menu and the assistant, and links large enough for a thumb. Rules outside a media query leave desktop unchanged. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 100px; }
/* "clip" hides stray overflow like "hidden" but keeps the page as the only scroll area, so sticky blocks keep working. */
@supports (overflow: clip) {
    html, body { overflow-x: clip; }
}
:where(a, button, input, select, textarea, label, summary) { touch-action: manipulation; }
:where(.featured-grid, .gallery-track, .reviews-track, .hajj-shorts-track, .hotel-track, .comfort-gallery-track, .shorts-track, [data-carousel-track]) { overscroll-behavior-x: contain; }
/* Rows that scroll sideways must not also scroll a few pixels up and down inside the page. */
:where(.home-reviews-grid, .featured-tabs, .hajj-tab-labels, .privacy-table-wrap, .comfort-gallery-track, .comfort-page-nav, .omra-hotel-scroll,
    .omra-formulas-nav, .hajj-forfaits-nav, .omra-cal-months) { overflow-y: hidden; }

/* Mobile menu: the page behind is dimmed and stays still; a tap outside closes the menu. */
.nav-backdrop { position: fixed; inset: 0; z-index: 998; background: rgba(4, 14, 28, .45); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
html.nav-locked .nav-backdrop { opacity: 1; pointer-events: auto; }
html.nav-locked, html.nav-locked body { overflow: hidden; }
html.nav-locked .main-nav { max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px); overscroll-behavior: contain; }

@media (max-width: 760px) {
    /* Background photos of the Hajj formula banners: phones get the 1200 px copy. */
    [style*="--hero-photo-small"] { background-image: var(--hero-gradient), var(--hero-photo-small) !important; }

    /* The assistant covers the screen on phones: keep the page behind it from scrolling. */
    html:has(body.assistant-open), body.assistant-open { overflow: hidden; }

    /* Footer links: one comfortable line each instead of 21 px targets. */
    .footer-navigation, .footer-contact, .footer-links { gap: 0; }
    .footer-navigation a, .footer-contact a, .footer-links a { display: block; padding: 9px 0; }
    .site-footer { padding-bottom: 96px; }

    /* Small text links keep their look and place; an invisible layer around them makes them easier to tap. */
    :is(.tour-back, .omra-booking-return, .hajj-back-link, .hajj-forfaits-back, .hajj-registration-heading > a, .tour-booking-link,
        .comfort-program-link, .home-formula-card > a, .home-review-more, .omra-lead-copy > a, .hajj-next-whatsapp, .privacy-contact-card > a,
        main a[href^="https://wa.me"]:not([class])) {
        position: relative;
    }
    :is(.tour-back, .omra-booking-return, .hajj-back-link, .hajj-forfaits-back, .hajj-registration-heading > a, .tour-booking-link,
        .comfort-program-link, .home-formula-card > a, .home-review-more, .omra-lead-copy > a, .hajj-next-whatsapp, .privacy-contact-card > a,
        main a[href^="https://wa.me"]:not([class]))::after {
        content: '';
        position: absolute;
        inset: -10px -4px;
    }

    /* Carousel dots: same small dot, larger invisible touch area. */
    .carousel-dots button, .carousel-dots button.active { box-sizing: content-box; padding: 9px; background-clip: content-box !important; }
    .carousel-dots { gap: 0 !important; }

    .inquiry-form .checkbox input, label.checkbox input[type=checkbox] { width: 20px; height: 20px; flex: 0 0 20px; }

    /* Fine print stays readable. */
    .form-privacy-note, .form-privacy-note a { font-size: 13px !important; }
    .omra-lead-form small, .omra-formulas-hero-card small, .hajj-map-point > span { font-size: 12.5px !important; }
    .comfort-day-number small { font-size: 11px; }
}

/* "À propos": the Google map stays a button until the visitor opens it. */
.about-map-open { display: grid; width: 100%; height: 100%; min-height: inherit; place-content: center; justify-items: center; gap: 8px; border: 0; padding: 24px; color: #0b3a66; background: radial-gradient(circle at 50% 40%, #eef5fb, #dfeaf2); font: inherit; text-align: center; cursor: pointer; }
.about-map-open svg { width: 44px; height: 44px; fill: #c2410c; }
.about-map-open strong { border-radius: 999px; padding: 12px 22px; color: #fff; background: #0b3a66; font-size: 16px; }
.about-map-open small { max-width: 320px; color: #52677d; font-size: 14px; }
.about-map-card:has(.about-map-open) { display: grid; }