/* ============================================================================
   chrome-3a.css — the SHARED 3a page chrome
   ============================================================================
   ONE copy of the page furniture every public page wears: the full-bleed header
   BAR with its capped inner row, the inset tokens, the mobile burger + overlay
   menu, the single --tint footer band, the floating WhatsApp FAB, and the named
   z-index layers.

   WHY THIS FILE EXISTS
   This chrome was written into landing.html (Home) and then copied into
   index.html (the booking flow). /account and /pay/return would have made it
   FOUR copies. This project has already been burned by exactly that shape —
   landing.js and app.js drifting apart produced invisible dividers and a split
   palette on account/payment-return. The chrome does not get to be the next one.

   THE HOOK: `body.h3a-page`
   Page-neutral, and a CLASS the four public pages opt into — NOT a bare
   `.h3a-*` selector. /admin deliberately does not load tokens-3a.css (Phase-1
   decision) and must not pick the chrome up either; an unscoped `.h3a-*` would
   leak the moment admin ever grew a matching class name. `body.h3a-page` cannot
   reach admin unless someone puts the class on admin's body on purpose.
   Specificity is deliberately IDENTICAL to the `body.home-3a` / `body.booking-3a`
   selectors it replaces (body + one class), so nothing re-ranks against
   styles.css.

   LOAD ORDER — MANDATORY
       tokens-3a.css  →  styles.css  →  chrome-3a.css  →  the page's own <style>
   This file MUST be linked AFTER styles.css. These rules previously lived in a
   <style> block that sat after both links, so every rule that TIES with
   styles.css on specificity currently wins on SOURCE ORDER. Linking this file
   before styles.css would silently flip every one of those ties. The page's own
   <style> block stays last, so page-specific rules still override the chrome.

   WHAT IS NOT HERE (deliberately)
   Only rules that are byte-identical between Home and the flow were extracted.
   The header brand/logo sizing and the utility-button skins have genuinely
   DRIFTED between the two pages (the flow added !important throughout and uses a
   190px logo cap vs Home's 230px). Unifying them would change an owner-approved
   page, so they stay page-local and are logged as tech debt. Page-SPECIFIC CSS
   (Home's hero/card/steps/popular, the flow's step panels/summary) stays put.

   No hardcoded palette hex — var(--…) only, so the customizer and all five dark
   presets keep working.
   ============================================================================ */

/* --- Horizontal rhythm + named layers -------------------------------------
   The nav sits near the edge; content is inset FURTHER. Both scale with the
   viewport so that relationship HOLDS at any desktop size instead of collapsing
   into a fixed centre column. --h3a-maxw only stops content from stretching to
   unreadable line lengths on ultra-wide displays.

   The z-index layers are ordered against the SHARED modals rather than picked
   arbitrarily:  fab (30) < mobile menu (40) < .confirm-modal (46, styles.css).
   The WhatsApp bubble used to sit at 50 and was stacked ABOVE the terms modal by
   construction, on every screen size. That is what an arbitrary z-index buys you. */
body.h3a-page {
  --h3a-edge: 18px;
  --h3a-inset: 20px;
  --h3a-maxw: none;
  --h3a-headw: none;
  --z-fab: 30;
  --z-menu: 40;
}
@media (min-width: 921px) {
  body.h3a-page {
    --h3a-edge: clamp(26px, 2.6vw, 46px);
    --h3a-inset: clamp(44px, 6.5vw, 128px);
    /* Content cap. 1440 keeps content near 3a's reference measure (~1180) on a
       wide display instead of stretching text to unreadable line lengths. */
    --h3a-maxw: 1440px;
    /* Header cap — WIDER than the content cap, so the bar still reads as
       edge-to-edge and the nav sits outside the content inset, but the brand and
       the utility cluster stop drifting to the extreme corners of a 32" screen. */
    --h3a-headw: 1860px;
  }
}

/* Static-copy language toggle */
body.h3a-page .h3a-i18n-ar { display: none; }
html[lang="ar"] body.h3a-page .h3a-i18n-en { display: none; }
html[lang="ar"] body.h3a-page .h3a-i18n-ar { display: inline; }

/* --- Page shell (FULL-BLEED) ---
   3a is not a card. The bordered, max-width, radius "frame" that used to live
   here was the design mockup's DEVICE BEZEL reproduced as a real page frame —
   that is what put a border around all content and marooned the page as an
   island on wide monitors. Deliberately no border, no radius, no max-width, and
   no background: the BODY paints --bg-image (including the dark preset's
   gradient/glow), and repainting it here would double the treatment.
   Sticky footer: fill the viewport so short pages still anchor the footer at the
   bottom instead of stranding it mid-screen. */
body.h3a-page .h3a-frame {
  color: var(--text);
  font-family: var(--fB);
  line-height: var(--lh);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* CONTENT NEVER MOVES on resize: main keeps its NATURAL height and only the
   footer shifts. A flowing `flex: 1` main would re-centre the whole page every
   time content changed height. */
body.h3a-page .h3a-frame > .h3a-main { flex: 0 0 auto; }
body.h3a-page .h3a-frame > .h3a-footer { flex: 0 0 auto; margin-top: auto; }

/* --- Header row ---
   The BAR is full-bleed so its hairline spans the whole screen; the ROW inside is
   capped by --h3a-headw. Without the cap, brand and utility anchored to the far
   corners and drifted apart without limit on very wide monitors.
   (The BAR itself — .site-header.h3a-header — stays page-local: Home and the flow
   have drifted on !important there.) */
body.h3a-page .h3a-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  /* The HEIGHT lives here, not on the bar. The bar must stay auto-height so the
     mobile menu (a sibling of this row, inside <header>) can expand it instead of
     overflowing a fixed box and overlaying the content. */
  height: 68px;
  width: 100%;
  max-width: var(--h3a-headw);
  margin: 0 auto;
  padding: 0 var(--h3a-edge);
  min-width: 0;
}
@media (min-width: 921px) {
  body.h3a-page .h3a-header-inner { height: 84px; }
}
/* Neutralise the config box width so the three-zone header always fits. */
body.h3a-page .h3a-header .logo { width: auto !important; min-width: 0 !important; height: auto; }
body.h3a-page .h3a-header .brand-name { font-family: var(--fD); font-weight: 700; font-size: 19px; letter-spacing: 0; color: var(--text); white-space: nowrap; overflow: visible; text-overflow: clip; max-width: none; }
body.h3a-page .h3a-brandsub { font-size: 9.5px; letter-spacing: .06em; color: var(--muted); margin-top: 3px; font-weight: 600; text-transform: uppercase; }

/* --- Utility cluster (right) ---
   Only the CONTAINER is shared. The individual control skins (.lang-switch,
   .lang-buttons, .auth-btn, .lang-btn, .theme-btn) have drifted between Home and
   the flow and stay page-local — see the header note. */
body.h3a-page .h3a-utility { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; min-width: 0; }
/* Mobile: the lang/theme controls scale up to sit near the (now larger) logo
   rather than looking like tiny afterthoughts beside it. */
@media (max-width: 920px) {
  body.h3a-page .h3a-utility { gap: 6px; }
  body.h3a-page .h3a-utility .theme-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
  body.h3a-page .h3a-utility .theme-icon { font-size: 22px; }
}

/* --- Mobile burger + menu --- */
body.h3a-page .h3a-burger {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: 0 0 auto; margin-inline-start: 2px;
  background: transparent; border: 1px solid var(--hair); border-radius: 11px;
  color: var(--text); cursor: pointer; padding: 0;
}
body.h3a-page .h3a-burger:hover { border-color: var(--teal); color: var(--accentText); }
body.h3a-page .h3a-burger-bars { display: flex; flex-direction: column; gap: 4px; width: 18px; }
body.h3a-page .h3a-burger-bars span { display: block; height: 2px; width: 100%; border-radius: 2px; background: currentColor; }
@media (min-width: 921px) { body.h3a-page .h3a-burger { display: none; } }
/* Overlay dropdown — it must FLOAT over the page, not push the header down.
   Absolutely positioned against the header bar, so opening it never reflows the
   content. Animated with opacity/transform (which the `hidden` attribute cannot
   do, since display:none is not transitionable) — hence the .is-open class + the
   pointer-events/visibility pair to keep it inert while closed. */
body.h3a-page .h3a-menu {
  position: absolute; top: 100%; inset-inline: 0; z-index: var(--z-menu);
  display: flex; flex-direction: column;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  background: var(--surface);
  box-shadow: 0 20px 44px -20px rgba(0, 0, 0, .45);
  padding: 6px var(--h3a-edge) 10px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-10px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
body.h3a-page .h3a-menu.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  body.h3a-page .h3a-menu { transition: none; transform: none; }
}
@media (min-width: 921px) { body.h3a-page .h3a-menu { display: none !important; } }
body.h3a-page .h3a-menu-link {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 2px; text-decoration: none;
  font-family: var(--fB); font-size: 15.5px; font-weight: 700; color: var(--text);
  border-bottom: 1px solid var(--hair);
}
body.h3a-page .h3a-menu-link:last-child { border-bottom: 0; }
body.h3a-page .h3a-menu-signin { color: var(--accentText); }
body.h3a-page .h3a-menu-signin svg { flex: 0 0 auto; }

/* --- Footer ---
   The footer is the page's ONE tonal band. The tone change IS the divider —
   hence no border-top. It is also what stops the space above it reading as a
   fault: a distinct surface anchored to the bottom, with page background above
   it, instead of a hairline floating in a void.
   Only ONE band on purpose: a second tinted section would MERGE with this one
   whenever the viewport is short and the gap between them collapses to zero.
   --tint (not a hex) so it tracks the customizer and all five dark presets. */
body.h3a-page .h3a-footer { background: var(--tint); margin-top: 24px; }
body.h3a-page .h3a-footer-inner {
  max-width: var(--h3a-maxw); margin: 0 auto;
  padding: 22px var(--h3a-inset) 0;
  display: grid; grid-template-columns: 1fr; gap: 0;
}
@media (min-width: 921px) {
  body.h3a-page .h3a-footer { margin-top: 44px; }
  body.h3a-page .h3a-footer-inner {
    padding: 40px var(--h3a-inset) 0;
    grid-template-columns: 1fr 1fr 1fr; gap: 0; align-items: stretch;
  }
}
body.h3a-page .h3a-foot-col { padding: 12px 0; border-top: 1px solid var(--hair); }
body.h3a-page .h3a-foot-col:first-child { border-top: 0; padding-top: 0; }
/* Mobile: the stacked 3-column footer measured 500px — a THIRD of the whole
   page, and the single biggest contributor to the over-long scroll. The
   descriptive paragraphs are desktop affordances; the actions are what a phone
   user actually needs. Copy stays in the DOM (config-driven, still rendered) —
   only hidden at this width. */
@media (max-width: 920px) {
  body.h3a-page .h3a-foot-p { display: none; }
  body.h3a-page .h3a-foot-actions { margin-top: 8px; }
  body.h3a-page .h3a-foot-col:first-child { padding-bottom: 6px; }
}
@media (min-width: 921px) {
  body.h3a-page .h3a-foot-col { padding: 0 40px; border-top: 0; border-inline-start: 1px solid var(--hair); min-height: 92px; }
  body.h3a-page .h3a-foot-col:first-child { padding-inline-start: 0; border-inline-start: 0; }
  body.h3a-page .h3a-foot-col:last-child { padding-inline-end: 0; }
}
body.h3a-page .h3a-foot-h { font-family: var(--fD); font-weight: 600; font-size: 15px; color: var(--text); }
body.h3a-page .h3a-foot-p { margin: 5px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
body.h3a-page .h3a-foot-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* Clock mask icon, matching the --call/--whatsapp/--terms pattern in styles.css
   (the ::before machinery comes from the shared .service-contact-link base rule). */
body.h3a-page .service-contact-link--hours::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0m0 14.5A6.5 6.5 0 1 1 8 1.5a6.5 6.5 0 0 1 0 13M8.75 4a.75.75 0 0 0-1.5 0v4.25c0 .28.16.54.41.67l2.75 1.5a.75.75 0 1 0 .72-1.32L8.75 7.8z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0m0 14.5A6.5 6.5 0 1 1 8 1.5a6.5 6.5 0 0 1 0 13M8.75 4a.75.75 0 0 0-1.5 0v4.25c0 .28.16.54.41.67l2.75 1.5a.75.75 0 1 0 .72-1.32L8.75 7.8z'/%3E%3C/svg%3E");
}
/* NOTE: the .h3a-footer .service-contact-link BASE rule stays page-local (Home
   and the flow diverge on flex/justify-content). Everything below is either
   higher-specificity than that base rule or touches disjoint properties, so it
   resolves identically no matter which file it lives in. */
body.h3a-page .h3a-footer .service-contact-link:hover { border-color: var(--teal); background: var(--surface); }
/* Mobile keeps only the two pills that matter on a phone — Call and WhatsApp.
   Terms drops to a plain text link (same control, same id, same behaviour) so
   the footer reads as two actions plus supporting text rather than four
   competing buttons. */
@media (max-width: 920px) {
  body.h3a-page .h3a-footer .service-contact-link.service-contact-link--terms {
    border: 0; border-radius: 0; padding: 0; background: transparent;
    color: var(--accentText); text-decoration: underline; text-underline-offset: 3px;
  }
  body.h3a-page .h3a-footer .service-contact-link.service-contact-link--terms:hover { border: 0; background: transparent; }
}
body.h3a-page .h3a-footer .service-contact-link::after { content: none; }
body.h3a-page .h3a-footer .service-contact-phone { font-family: var(--fM); font-size: 12.5px; font-weight: 500; color: var(--sub); }
/* Working hours is INFORMATION, not an action. It borrows only the icon from the
   action pills; all pill chrome is stripped so a client can tell at a glance it
   is not a link like the two buttons beside it.
   Qualified with BOTH classes (0,4,1) so it beats the .service-contact-link rule
   outright — an equal-specificity rule would depend on source order, which is
   exactly how this silently kept its border the first time. */
body.h3a-page .h3a-footer .service-contact-link.h3a-foot-static {
  border: 0; border-radius: 0; padding: 0; background: transparent;
  cursor: default; color: var(--sub); font-weight: 600;
}
body.h3a-page .h3a-footer .service-contact-link.h3a-foot-static:hover { border: 0; background: transparent; }
body.h3a-page .h3a-footer .service-contact-link.h3a-foot-static .service-contact-phone { color: var(--muted); }
body.h3a-page .h3a-footer-bottom {
  max-width: var(--h3a-maxw); margin: 0 auto;
  padding: 14px var(--h3a-inset) 22px; margin-top: 16px; border-top: 1px solid var(--hair);
  display: flex; flex-direction: column; gap: 8px;
}
@media (min-width: 921px) {
  body.h3a-page .h3a-footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; padding-bottom: 28px; margin-top: 28px; }
}
body.h3a-page .h3a-copyright { margin: 0; font-size: 12.5px; color: var(--muted); }

/* Categorized "Need help?" — Services + Products, each with Call + WhatsApp.
   The middle (help) footer column gets more room; Working-hours + Terms stay on one line. */
/* Icon + number only (drop the "Call now" / "WhatsApp" text), hugging the content so the pill is
   [14px | icon | number | 14px] — number sits right by the icon and the trailing padding equals the
   leading padding. Applied at ALL widths (desktop + mobile), identical on home + booking pages.
   !important beats the older per-page inline rules (width:100% / margin:auto). */
body.h3a-page #landing-help-strip .h3a-help-cat .service-contact-link > span:not(.service-contact-phone) { display: none; }
body.h3a-page #landing-help-strip .h3a-help-cat .service-contact-link { width: fit-content !important; align-self: flex-start; }
body.h3a-page #landing-help-strip .h3a-help-cat .service-contact-link .service-contact-phone { margin-inline-start: 0 !important; }
@media (min-width: 921px) {
  body.h3a-page .h3a-footer-inner { grid-template-columns: 1fr 1.35fr 1fr; }
  /* Tighter inter-column padding (was 40px each side = 160px total) so the no-wrap columns fit. */
  body.h3a-page .h3a-foot-col { padding: 0 20px; }
  body.h3a-page .h3a-foot-col:first-child { padding-inline-start: 0; }
  body.h3a-page .h3a-foot-col:last-child { padding-inline-end: 0; }
}
body.h3a-page .h3a-footer .h3a-foot-static,
body.h3a-page .h3a-footer .service-contact-link.service-contact-link--terms { white-space: nowrap; }
body.h3a-page #landing-help-strip .h3a-help-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 22px; }
body.h3a-page #landing-help-strip .h3a-help-cat-h { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--teal); margin-bottom: 4px; }
body.h3a-page #landing-help-strip .h3a-help-cat .h3a-foot-actions { margin-top: 6px; }
body.h3a-page #landing-help-strip .service-contact-phone { white-space: nowrap; }
/* ACCENT EDGE on both contact blocks at ALL widths (desktop + mobile): a rounded 3px INSET bar on
   the inline-start — SAME green (--teal) for BOTH Services and Products; no border, no fill. The block
   headers stay --teal too (base rule above). Flips to the right edge automatically in RTL. */
body.h3a-page #landing-help-strip .h3a-help-cat { border-radius: 14px; padding-block: 6px; padding-inline: 12px 2px; box-shadow: inset 3px 0 0 var(--teal); }
html[dir="rtl"] body.h3a-page #landing-help-strip .h3a-help-cat { box-shadow: inset -3px 0 0 var(--teal); }
/* Desktop: breathing room between the subheader and the two blocks (the edge was nearly touching it). */
@media (min-width: 921px) {
  body.h3a-page #landing-help-strip .h3a-help-cats { margin-top: 16px; }
}
/* MOBILE ONLY (<=920px): keep the blocks side by side without the footer growing, re-show the
   subheader, and compact the pills so nothing overflows a narrow phone. */
@media (max-width: 920px) {
  /* Re-show the "Need help?" subheader only (the blanket `.h3a-foot-p { display:none }` above hides
     every footer description on mobile; the owner wants this one line kept). */
  body.h3a-page #landing-help-strip > .h3a-foot-p { display: block; margin: 4px 0 10px; }
  /* Side by side. minmax(0,1fr) caps each track at half the row so a wide pill can't grow the track
     and push the grid past the viewport — that auto-grow was the horizontal scroll on /products +
     landing (their pills were 8px wider than /services). */
  body.h3a-page #landing-help-strip .h3a-help-cats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; }
  body.h3a-page #landing-help-strip .h3a-help-cat { padding-inline-start: 10px; min-width: 0; }
  /* Normalize the pills to the compact size /services already had (7px 10px). /products + landing
     rendered them at 9px 14px (→152px) and overflowed on a narrow phone; force compact everywhere so
     every page matches /services and fits. */
  body.h3a-page #landing-help-strip .h3a-help-cat .service-contact-link { padding: 7px 10px !important; max-width: 100%; }
}

/* --- Floating WhatsApp bubble --- */
body.h3a-page .h3a-fab {
  position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: var(--z-fab);
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal); color: var(--onTeal); box-shadow: var(--pillShadow);
  text-decoration: none; transition: transform .15s ease, filter .15s ease;
}
body.h3a-page .h3a-fab:hover { filter: brightness(1.05); transform: translateY(-2px); }
/* Ranking below the modal is not enough: a FAB hovering beside a dimmed overlay
   is still wrong. Hide it outright whenever a modal is open. :has() needs no JS
   and cannot drift out of sync with the modal's open/close path (which toggles
   the `hidden` attribute). Pages with additional modals add their own :has()
   selectors alongside this one. */
body.h3a-page:has(.confirm-modal:not([hidden])) .h3a-fab { display: none; }
body.h3a-page .h3a-fab svg { width: 26px; height: 26px; }