/* ══════════════════════════════════════════════════════════════════
   EZ2FLY — Responsive Hardening & Cross-Browser Fixes  v1.0
   responsive-fixes.css · Loaded LAST on every page after gold-gradient.css

   PURPOSE:
   Surgical production-safe fixes for cross-browser visual consistency
   across Chrome, Safari, Firefox, Edge, Brave on Windows, macOS,
   Linux, Android, and iOS.  Does NOT redesign — only hardens.
   ══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   A. GLOBAL LAYOUT SAFETY — flex/grid child overflow prevention
   ══════════════════════════════════════════════════════════════════
   Root cause: flexbox/grid children default min-width/min-height to
   'auto', so long text or nested content can force items wider than
   their track, causing overflow and horizontal scroll.
   Fix: opt every flex row / grid cell into safe sizing. */

/* Generic flex children */
.nav-inner     > *,
.nav-links     > li,
.hero-ctas     > *,
.hero-stats    > *,
.cta-strip-inner > *,
.cta-strip-btns  > * { min-width: 0; }

/* Grid cells that can hold variable-length text */
.feat-grid      > *,
.testi-grid     > *,
.why-cards      > *,
.about-why-grid > *,
.stats-grid     > *,
.region-grid    > *,
.country-grid   > *,
.dest-pkg-preview > *,
.pkgs-grid      > *,
.offer-grid     > *,
.footer-body    > *,
.contact-grid   > *,
.faq-grid       > *,
.svc-intro-inner > *,
.svc-detail-inner > *,
.halal-block-inner > *,
.about-grid     > *,
.why-grid       > * { min-width: 0; }

/* Ensure every img is safe in any layout */
img { max-width: 100%; height: auto; }


/* ══════════════════════════════════════════════════════════════════
   B. SAFARI / iOS FIXES
   ══════════════════════════════════════════════════════════════════ */

/* B1. Modal height: replace 90vh with 90dvh so the modal never
   extends behind the iOS Safari address bar / home-indicator.
   `dvh` tracks the *dynamic* viewport (shrinks when chrome shows).
   Use @supports so older browsers fall back to 90vh gracefully.    */
@supports (height: 100dvh) {
  .pkg-modal        { max-height: 90dvh; }
  .nav-mobile       { height: 100dvh;   }   /* full-height side drawer */
}

/* B2. Sticky positioning vendor prefix guard.
   Modern Safari 15+ understands `position: sticky` without the prefix,
   but adding the webkit variant costs nothing and covers 13/14.       */
.pkgs-filter-bar {
  position: -webkit-sticky;
  position: sticky;
}

/* B3. Safari renders -webkit-background-clip:text strictly inside the
   CSS line box.  If padding is 0 and line-height < 1.15 the ascenders
   and descenders are cut off.  Force a minimum safe line-height on
   ALL gradient-text elements even when later rules change font-size.  */
[style*="-webkit-text-fill-color: transparent"],
.gold-text, .gold-grad-text,
.sec-title em, .sec-title .accent,
.page-hero-title em,
.nav-logo-name em, .nav-mobile-brand em,
.footer-logo-name em,
.stat-num, .hero-badge-num,
.pkg-price, .pkg-price-amount,
.pkg-modal-price-amount,
.pkg-modal-section-title,
.pkgs-count em,
.breadcrumb a,
.hero-gold,
.hl-region,
.dest-region-label, .dest-feat-price, .dest-price, .dest-mini-price-amount,
.svc-step-num, .svc-step-label,
.contact-card-label,
.ez-gate-logo-name em {
  /* Ensure every gradient-text element has both display:inline-block
     AND safe line-height so the paint box always covers full glyphs. */
  display: inline-block;
  line-height: 1.2;
  padding-top: 0.06em;
  padding-bottom: 0.2em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* B4. -webkit-fill-available as height fallback for Safari < 15 */
.hero {
  min-height: 100vh;                    /* baseline */
  min-height: -webkit-fill-available;  /* Safari 12–14 */
  min-height: 100dvh;                   /* Safari 15+, Chrome 108+ */
}

/* B5. backdrop-filter: blur — always add -webkit- prefix */
#site-nav.scrolled {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.hero-arrow,
.pkg-modal-overlay {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* B6. Safe transform-origin for the logo spin — prevents layout shift
   in Safari when the element is transformed */
.nav-logo-img { transform-origin: center center; }


/* ══════════════════════════════════════════════════════════════════
   C. OVERFLOW — prevent horizontal scroll on ALL viewports
   ══════════════════════════════════════════════════════════════════
   `overflow-x: hidden` on html/body clips most leaks but the
   address bar safe-area + negative-positioned decorative elements
   can still exceed the scroll-width.  Clamp every known offender. */

/* C1. Sections that host absolutely-positioned decorative images
   must clip their own overflow so those images never widen the page. */
.about-visual,
.why-img-col,
.svc-intro-img-col,
.halal-img-wrap,
.page-hero { overflow: visible; }  /* these are fine — body clips */

/* C2. The decorative pin/badge elements with negative left values.
   On mobile (single-column), the parent container starts at the
   viewport left edge, so left: -1.5rem pushes beyond the viewport.
   Body overflow:hidden clips it visually but it still expands
   scroll-width in some browsers.  Clamp negative-offset elements
   so they cannot expand past their visual clip. */
.about-visual    { overflow: clip; overflow-clip-margin: 4px; }
.why-img-col     { overflow: clip; overflow-clip-margin: 4px; }
.svc-intro-img-col { overflow: clip; overflow-clip-margin: 4px; }
.halal-img-wrap  { overflow: clip; overflow-clip-margin: 4px; }

/* C3. Ensure sections themselves never contribute horizontal scroll */
section,
.feat-section,
.why-section,
.testi-section,
.heritage-section,
.cta-strip,
.about-story,
.stats-strip,
.about-why,
.svc-intro,
.offer-section,
.halal-block,
.contact-section,
.dest-explorer,
.dest-countries-section,
.dest-highlights-section,
.pkgs-section,
.pkgs-cta-strip {
  overflow-x: hidden;
}

/* C4. Stop the announce-band text from expanding scroll-width on
   Android Chrome (different from iOS — can happen even with body clip). */
.announce-band {
  max-width: 100vw;
  overflow: hidden;
}


/* ══════════════════════════════════════════════════════════════════
   D. RESPONSIVE TYPOGRAPHY — fluid scaling safety net
   ══════════════════════════════════════════════════════════════════ */

/* D1. Guarantee the hero stat numbers never overflow their cell on
   narrow (≤320px) phones */
.hero-stat-num { word-break: break-word; }

/* D2. Package card titles can be long; prevent them extending cards */
.pkg-title, .dest-mini-title, .country-card-name {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* D3. Form labels and values — guarantee they wrap rather than overflow */
.contact-card-value,
.contact-card-sub  { overflow-wrap: break-word; }

/* D4. Breadcrumb: flex items can push past container on small screens */
.breadcrumb { flex-wrap: wrap; }

/* D5. Announce band: very narrow screens (< 360px) get clip rather
   than the text disappearing mid-scroll due to nowrap */
@media (max-width: 360px) {
  .announce-band {
    font-size: 0.52rem;
    letter-spacing: 0.1em;
  }
}


/* ══════════════════════════════════════════════════════════════════
   E. STICKY FILTER BAR — packages page
   ══════════════════════════════════════════════════════════════════
   The filter bar uses `top: 80px` (hardcoded).  The actual nav
   offset is `--nav-h` (68px) + announce-band (≈34px when visible,
   0 when dismissed / scrolled past).  On desktop the band is always
   visible on first load so 80px is too tight; the bar overlaps the
   nav.  Use calc with the CSS variable as the base. */
.pkgs-filter-bar {
  top: calc(var(--nav-h) + 0.75rem);
}

/* When the band is gone (user scrolled or dismissed), the nav
   snaps to top:0 — so sticky top should equal nav-h only.
   We can't detect band-dismissed from CSS alone, so the JS-driven
   class `.band-gone` (added below in the JS fix) handles this.
   Fallback stays as calc above. */


/* ══════════════════════════════════════════════════════════════════
   F. NEGATIVE-POSITIONED DECORATIVE ELEMENTS — mobile fix
   ══════════════════════════════════════════════════════════════════
   The stat-pin, why-badge, and svc-stat-pill all use left: -1.x rem
   to hang off the left edge of a column.  On desktop, there is a
   gap column to the left so they're fine.  On mobile (single column
   layout), the parent fills the viewport minus container padding,
   so left: -1.5rem pushes 0.5rem outside the body.  Reposition. */

@media (max-width: 900px) {
  /* About page: about-stat-pin */
  .about-stat-pin {
    left: 0.5rem;
    top: 0.85rem;
  }
}

@media (max-width: 900px) {
  /* Why section badge */
  .why-badge {
    left: 0.5rem;
    top: 0.85rem;
  }
}

@media (max-width: 900px) {
  /* Services intro stat pill */
  .svc-intro-stat-pill {
    left: 0.5rem;
    top: 1rem;
  }

  /* Halal sub-image: negative left: -1.5rem on single-column would overflow.
     Hide it at this breakpoint (the main image is sufficient). */
  .halal-sub-img {
    display: none;
  }
}


/* ══════════════════════════════════════════════════════════════════
   G. FIXED-HEIGHT MOSAIC / GRID FIXES
   ══════════════════════════════════════════════════════════════════ */

/* G1. Heritage mosaic: at 1100–900px (medium tablets) the 3-column
   layout is still used but the 540px fixed height becomes awkward
   as columns shrink.  Switch to auto/aspect-ratio-driven heights. */
@media (max-width: 1100px) and (min-width: 901px) {
  .heritage-mosaic { height: auto; }
  .hm-big          { aspect-ratio: 16/9; }
  .hm-sm           { aspect-ratio: 4/3; }
}

/* G2. Highlights grid: same fix for medium tablets */
@media (max-width: 1100px) and (min-width: 901px) {
  .highlights-grid { height: auto; }
  .hl-card         { aspect-ratio: 4/3; }
  .hl-card.wide    { aspect-ratio: 16/9; }
}


/* ══════════════════════════════════════════════════════════════════
   H. MOBILE-SPECIFIC PATCHES (≤ 768px)
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* H1. Hero: ensure the content block is readable even when the
     headline spans 3–4 lines on very small phones */
  .hero-content {
    padding-top: 5.5rem;
    padding-bottom: 4rem;
  }

  /* H2. About page accent img: at ≤ 768px `.about-accent-img` is still
     shown (hidden only at 900px — which is the single-col breakpoint).
     Actually .about-accent-img is already hidden at 900px via about.css,
     so nothing needed here. */

  /* H3. Why-main-img: aspect-ratio 3/4 on mobile produces a very tall
     image.  Switch to 4/3 for a landscape crop on mobile. */
  .why-main-img {
    aspect-ratio: 4/3;
  }

  /* H4. Package modal: padding is aggressive at mobile; extra guard */
  .pkg-modal {
    border-radius: var(--r-lg);
    margin: 0;
  }

  /* H5. Button min-width / text wrapping — prevent button text from
     overflowing on very narrow phones */
  .btn {
    white-space: normal;
    text-align: center;
    min-height: 44px;  /* WCAG touch target */
  }

  /* H6. Hero CTA buttons — stack or shrink gracefully */
  .hero-ctas {
    gap: 0.65rem;
  }
  .hero-ctas .btn {
    flex: 1 1 auto;
    min-width: 140px;
    justify-content: center;
  }

  /* H7. CTA strip: text alignment guard */
  .cta-strip-title { text-align: left; }
  .cta-strip-inner { flex-direction: column; text-align: center; }
  .cta-strip-title { text-align: center; }

  /* H8. Stats strip: guarantee the BaraBara numbers don't clip on
     gradient text at smaller sizes */
  .stat-num {
    font-size: clamp(2rem, 7vw, 2.8rem);
  }

  /* H9. Footer: reduce horizontal padding on very small screens */
  .footer-contact-text { font-size: 0.73rem; }

  /* H10. Nav CTA button: ensure it has adequate touch size */
  .nav-cta-btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
  }

  /* H11. Mobile nav links: guarantee 44px touch height */
  .nav-mobile a {
    min-height: 44px;
  }
}


/* ══════════════════════════════════════════════════════════════════
   I. SMALL PHONE PATCHES (≤ 480px)
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

  /* I1. Page hero: section top-padding can be reduced since the
     nav + band stack is shorter on mobile */
  .page-hero {
    padding-top: calc(var(--nav-h) + 3.5rem);
    padding-bottom: 3.5rem;
  }

  /* I2. Package card footer: always single-column at this width */
  .pkg-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .pkg-footer-btns {
    width: 100%;
    display: flex;
  }
  .pkg-detail-btn,
  .pkg-book-btn {
    flex: 1;
    justify-content: center;
    text-align: center;
  }

  /* I3. Services cards: ensure 2-col grid doesn't shrink below
     usable size at 320px */
  .offer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1px;
  }

  /* I4. Destination pkg banner: stack vertically */
  .dest-pkg-banner {
    flex-direction: column;
    align-items: flex-start;
  }
  .dest-pkg-banner-right {
    width: 100%;
    flex-direction: column;
  }

  /* I5. Destination pkg banner buttons: full width */
  .dest-pkg-banner-right .btn {
    width: 100%;
    justify-content: center;
  }

  /* I6. Modal padding: tighten for very small viewports */
  .pkg-modal-overlay {
    padding: 0.75rem;
  }

  /* I7. FAQ: question text should wrap properly at narrow widths */
  .faq-question {
    font-size: 0.8rem;
  }

  /* I8. Contact form grid: force single column */
  .form-row {
    grid-template-columns: 1fr;
  }

  /* I9. Halal badges: wrap on mobile */
  .halal-badges {
    gap: 0.4rem;
  }
  .halal-badge-pill {
    font-size: 0.58rem;
  }

  /* I10. Footer bottom: fully centred */
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 0.4rem;
  }
}


/* ══════════════════════════════════════════════════════════════════
   J. VERY SMALL PHONES (≤ 374px — iPhone SE 1st gen, narrow Android)
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 374px) {

  /* J1. Service card grid: single column to prevent 2-col cards from
     squeezing below 140px (icon + text become unreadable) */
  .offer-grid {
    grid-template-columns: 1fr;
  }

  /* J2. Region cards: guarantee readability at 320px */
  .region-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }
  .region-card {
    padding: 1.4rem 0.9rem;
  }

  /* J3. Country grid: 2 columns are still acceptable at 320px */
  .country-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }

  /* J4. Hero stats: hide dividers, reduce gap */
  .hero-stats {
    gap: 0.85rem;
  }
  .hero-stat-div { display: none; }

  /* J5. Page hero title: floor ensures it doesn't go below 2.2rem */
  .page-hero-title {
    font-size: clamp(2rem, 9vw, 4rem);
  }

  /* J6. Sec-title: scale slightly tighter */
  .sec-title {
    font-size: clamp(1.8rem, 6.5vw, 3.5rem);
  }
}


/* ══════════════════════════════════════════════════════════════════
   K. FONT RENDERING — cross-OS consistency
   ══════════════════════════════════════════════════════════════════ */

/* K1. Apply consistent font smoothing globally.  Already on body but
   some components override via JS-injected styles; re-assert here. */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* K2. BaraBara font: improve rendering on Windows (ClearType).
   On Windows, BaraBara can appear heavier due to GDI sub-pixel
   hinting.  `font-smooth` is non-standard but helps Firefox on Win. */
.hero-title,
.hero-italic,
.sec-title,
.page-hero-title,
.cta-strip-title,
.pkgs-cta-title,
.pkg-title,
.pkg-modal-title,
.svc-detail-title {
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* K3. DM Sans: ensure consistent weight rendering across Chrome/FF.
   On Windows, CSS font-weight: 400 and 500 can appear near-identical.
   Use explicit numeric weights. */
body,
.btn,
.form-input,
.form-select,
.form-textarea,
.nav-links > li > a,
.nav-mobile a {
  font-weight: 400;
}

/* K4. Letter spacing: Safari applies kern/liga tracking differently
   at small sizes.  Anchor small-text components to explicit values. */
.eyebrow,
.pkg-meta span,
.hero-stat-lbl,
.footer-col-title {
  letter-spacing: 0.16em;
}


/* ══════════════════════════════════════════════════════════════════
   L. CROSS-BROWSER ANIMATION SAFETY
   ══════════════════════════════════════════════════════════════════ */

/* L1. Reveal animations: `will-change: opacity, transform` hints the
   GPU to composite these elements.  Prevents the "flash of invisible
   content" on Safari where elements sometimes stay opacity:0 after
   the page paints, before the IntersectionObserver fires. */
.reveal, .reveal-l, .reveal-r, .reveal-up {
  will-change: opacity, transform;
}

/* L2. Once animation completes, free GPU memory */
.reveal.in, .reveal-l.in, .reveal-r.in, .reveal-up.in {
  will-change: auto;
}

/* L3. Hero slide transitions: prevent flickering on Firefox when
   hardware-composited layers are promoted/demoted during slide change */
.hero-slide {
  will-change: opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* L4. Card hover transforms: add translate3d hint for Safari to
   promote to its own composite layer, preventing hover-induced
   repaint on complex sections like the features grid. */
.pkg-card:hover,
.testi-card:hover,
.why-card:hover,
.about-why-card:hover,
.region-card:hover,
.country-card:hover {
  transform: translateY(-8px) translateZ(0);
}
.pkg-card { transform: translateY(0) translateZ(0); }
.testi-card, .why-card, .about-why-card, .region-card { transform: translateY(0) translateZ(0); }

/* L5. Prevent animation overflow from generating horizontal scroll */
.hero-progress,
.hero-scroll-line { overflow: hidden; }


/* ══════════════════════════════════════════════════════════════════
   M. FIREFOX-SPECIFIC FIXES
   ══════════════════════════════════════════════════════════════════ */

/* M1. Firefox does not support -webkit-background-clip:text.
   It supports the unprefixed `background-clip: text`.
   All gradient text rules in gold-gradient.css already include both
   properties, so no additional fix needed.  This comment is a note
   that those rules are correct and intentional. */

/* M2. Firefox custom scrollbar: FF uses `scrollbar-color` and
   `scrollbar-width` from tokens.css (already set on html element).
   Explicitly add to the modal scroll container where FF uses
   its own styling. */
.pkg-modal,
.nav-mobile {
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}

/* M3. Firefox gap: some FF versions render CSS `gap` on flex
   containers with a slight rounding difference vs Chrome.
   Use `margin` on children as fallback for critical layouts. */
.hero-ctas > * + * { margin-left: 0; }   /* gap handles it; no regression */

/* M4. Firefox text-stroke / text-fill: FF 91+ supports these
   without vendor prefix but older ESR builds don't.
   Provide unprefixed fallback for gradient text. */
.gold-text, .gold-grad-text {
  -webkit-text-fill-color: transparent;
          color: transparent;          /* unprefixed FF fallback */
}


/* ══════════════════════════════════════════════════════════════════
   N. SPACING CONSISTENCY — section padding normalisation
   ══════════════════════════════════════════════════════════════════ */

/* N1. Some pages define their own `.cta-strip` with slightly different
   padding than tokens.css `section-pad`.  Normalise to a consistent
   4rem vertical padding on all sizes. */
.cta-strip        { padding: 4rem 0; }
.pkgs-cta-strip   { padding: 4.5rem 0; }

/* N2. Consistent section bottom padding so nav-linked anchor jumps
   don't end up obscured by the sticky navbar. */
[id] {
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}

/* N3. Very small phones: reduce section padding to prevent sections
   feeling cramped or excessively tall. */
@media (max-width: 374px) {
  .section-pad    { padding: 3rem 0; }
  .section-pad-sm { padding: 2.5rem 0; }
}


/* ══════════════════════════════════════════════════════════════════
   O. SAFE AREA INSETS — notch / home-indicator devices
   ══════════════════════════════════════════════════════════════════ */

/* O1. Body: horizontal safe-areas ensure content clears the notch
   on iPhone X+ when in landscape mode. */
body {
  padding-left:  env(safe-area-inset-left,  0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* O2. Float CTA already handled in gold-gradient.css v4.
   Reinforce here with !important safety. */
.float-cta {
  bottom: max(2rem, calc(1.5rem + env(safe-area-inset-bottom, 0px))) !important;
  right:  max(2rem, calc(1.5rem + env(safe-area-inset-right,  0px))) !important;
}


/* ══════════════════════════════════════════════════════════════════
   P. PRINT / REDUCED DATA MEDIA
   ══════════════════════════════════════════════════════════════════ */

@media print {
  /* Hide all decorative / interactive elements in print */
  #site-nav, .announce-band, .nav-mobile, .nav-mobile-overlay,
  .float-cta, #ez-cursor, #ez-cursor-trail,
  .hero-arrows, .hero-dots, .hero-progress,
  .hero-scroll, .hero-label { display: none !important; }

  body {
    padding: 0;
    color: #000;
    background: #fff;
  }
  .hero {
    min-height: 0;
    padding: 2rem 0;
  }
}


/* ══════════════════════════════════════════════════════════════════
   Q. EDGE / CHROMIUM-SPECIFIC PATCHES
   ══════════════════════════════════════════════════════════════════ */

/* Q1. Edge 18 (pre-Chromium) does not support `gap` on flex.
   Pre-Chromium Edge is <1% of traffic; no fix needed.
   Modern Chromium-based Edge is identical to Chrome — no patches. */

/* Q2. Scrollbar gutter: already set on html in tokens.css.
   Reinforce here so overrides don't accidentally remove it. */
html {
  scrollbar-gutter: stable;
}


/* ══════════════════════════════════════════════════════════════════
   R. TURNSTILE GATE — responsive safe-guards
   ══════════════════════════════════════════════════════════════════ */

/* The turnstile gate (full-page overlay) uses vh units.  On mobile
   Safari it must fill the actual visible viewport, not the layout
   viewport.  The gate JS renders inline styles; reinforce here. */
.ez-gate-outer {
  min-height: 100dvh;
  /* Fallback for older browsers */
  min-height: 100vh;
}

@supports (min-height: 100dvh) {
  .ez-gate-outer { min-height: 100dvh; }
}