/* ==========================================================================
   staggered-menu.css
   Shared MOBILE navigation for the light content pages (vehicles, bosnia-tours,
   vip-transport, faqs, about-listing). A vanilla port of the React Bits
   "StaggeredMenu", recoloured to the brand: a dark panel that slides in from the
   right with a canary pre-layer streak, big staggered items, canary numbering.

   HOW IT WIRES IN
   - staggered-menu.js injects a fixed toggle button (top-right) + a fixed
     overlay (scrim + prelayers + panel) into <body>. Nothing per-page to mark
     up — every page just loads this CSS, GSAP, and the module.
   - Shown ONLY at <=48rem. On desktop the existing .topbar nav stays.
   - GSAP drives the animation when present (html.sm-gsap). Without GSAP the
     panel still opens via the CSS-transition fallbacks below, so the menu is
     never dead if the library fails to load or the rAF ticker stalls.
   ========================================================================== */

/* Local palette — a dark overlay independent of the page's light theme tokens. */
.sm-toggle,
.sm-overlay {
  --sm-accent: #e5ff00;                 /* canary */
  --sm-panel-bg: #0d0d0d;
  --sm-item: #f4f5f7;
  --sm-line: rgba(244, 245, 247, 0.14);
}

/* Pin the whole menu subtree to border-box so it renders 1:1 on EVERY host
   page. Some light pages set a global `* { box-sizing: border-box }` reset and
   others don't — without this, `.sm-panel` (width min(86vw,360px) PLUS padding)
   is 48px wider on the content-box pages (vehicles / bosnia-tours) and overhangs
   the canary prelayer streak, while it's flush on the border-box pages (faqs /
   vip / about). Scoping the reset to the injected subtree makes the menu
   page-independent without touching each page's own box model. */
.sm-toggle, .sm-toggle *,
.sm-overlay, .sm-overlay * {
  box-sizing: border-box;
}

/* Assembled only on mobile; inert (display:none) on desktop. */
.sm-toggle { display: none; }
.sm-overlay { display: none; }

@media (max-width: 48rem) {
  /* Drop the redundant section links (vip/faq/about) and the decorative eyebrow
     (bosnia) — the hamburger takes over navigation. The vehicles filter bar and
     every brand mark stay. */
  .topbar__nav,
  .topbar__eyebrow { display: none !important; }

  /* Reserve the top-right corner for the fixed toggle so it never sits on the
     brand or the vehicles filter bar (which stays, in a ROW beside the toggle
     here). Longhand overrides each page's shorthand padding on the right only. */
  .topbar { padding-right: 7.5rem !important; }

  .sm-toggle { display: inline-flex; }
  .sm-overlay { display: block; }
}

/* ------------------------------------------------------------- toggle ------- */
.sm-toggle {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 70;                          /* above the panel so "Close" is tappable */
  align-items: center;
  gap: 0.45rem;
  padding: clamp(1rem, 2.4vw, 1.55rem) clamp(1.1rem, 3.5vw, 1.5rem);
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #0d0d0d;                       /* closed (over the light topbar); JS animates it */
  font-family: var(--font-sans, "Helvetica Neue", Arial, sans-serif);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}
.sm-toggle:focus-visible { outline: 2px solid var(--sm-accent); outline-offset: 4px; border-radius: 4px; }
/* No-GSAP fallback: flip the toggle to light while the dark panel is open. */
html:not(.sm-gsap) .sm-toggle.is-open { color: #f4f5f7; }

.sm-toggle-textWrap {
  position: relative;
  display: inline-block;
  height: 1em;
  overflow: hidden;                     /* only one label line shows at a time */
  white-space: nowrap;
}
.sm-toggle-textInner { display: flex; flex-direction: column; line-height: 1; }
.sm-toggle-line { display: block; height: 1em; line-height: 1; }

.sm-icon { position: relative; width: 15px; height: 15px; flex: 0 0 15px; display: inline-flex; }
.sm-icon-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.sm-icon-line-v { transform: translate(-50%, -50%) rotate(90deg); }   /* forms the "+" */
/* No-GSAP fallback: spin the "+" into an "×" on open. */
html:not(.sm-gsap) .sm-icon { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
html:not(.sm-gsap) .sm-toggle.is-open .sm-icon { transform: rotate(225deg); }

/* ------------------------------------------------------------- overlay ------ */
.sm-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;                 /* only the scrim + panel are interactive */
  overflow: hidden;                     /* clips the offscreen panel / prelayers */
}
.sm-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.sm-overlay[data-open] .sm-scrim { opacity: 1; pointer-events: auto; }

.sm-prelayers {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 360px);
  pointer-events: none;
}
.sm-prelayer { position: absolute; inset: 0; }
html:not(.sm-gsap) .sm-prelayers { display: none; }   /* decorative only — skip without GSAP */

.sm-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(86vw, 360px);
  height: 100%;
  background: var(--sm-panel-bg);
  display: flex;
  flex-direction: column;
  padding: calc(env(safe-area-inset-top, 0px) + 5.25rem) clamp(1.5rem, 6vw, 2rem) 2rem;
  overflow-y: auto;
  pointer-events: auto;
}
/* Offscreen baseline for the no-GSAP fallback AND the brief pre-init frame.
   IMPORTANT: once html.sm-gsap is set, GSAP owns the transform — the panel must
   carry NO CSS translate then, or GSAP folds the 100% into its `x` baseline and
   `xPercent:0` never reaches flush. So this is scoped to :not(.sm-gsap) only. */
html:not(.sm-gsap) .sm-panel,
html:not(.sm-gsap) .sm-prelayer { transform: translateX(100%); }
/* No-GSAP fallback: slide the panel in with a plain transition. */
html:not(.sm-gsap) .sm-panel { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
html:not(.sm-gsap) .sm-overlay[data-open] .sm-panel { transform: translateX(0); }

.sm-panel-inner { flex: 1; display: flex; flex-direction: column; gap: 1.75rem; }

.sm-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  counter-reset: smItem;
}
.sm-panel-itemWrap { position: relative; overflow: hidden; line-height: 1; }
.sm-panel-item {
  position: relative;
  display: inline-block;
  color: var(--sm-item);
  font-family: "Raleway", var(--font-display, sans-serif);
  font-weight: 800;
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-decoration: none;
  padding-right: 1.6em;                 /* room for the number */
  transition: color 0.25s ease;
}
.sm-panel-item:hover,
.sm-panel-item:focus-visible,
.sm-panel-item.is-current { color: var(--sm-accent); }
.sm-panel-itemLabel { display: inline-block; will-change: transform; transform-origin: 50% 100%; }

.sm-panel-list[data-numbering] .sm-panel-item::after {
  counter-increment: smItem;
  content: counter(smItem, decimal-leading-zero);
  position: absolute;
  top: 0.2em;
  right: 0.2em;
  font-family: var(--font-sans, sans-serif);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--sm-accent);
  pointer-events: none;
  user-select: none;
  opacity: var(--sm-num-opacity, 1);    /* default visible so no-GSAP shows numbers */
}

/* --------------------------------------------------------- contact block --- */
.sm-contact {
  margin-top: auto;
  padding-top: 1.75rem;
  border-top: 1px solid var(--sm-line);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.sm-contact-title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sm-accent);
}
.sm-contact-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.4rem; flex-wrap: wrap; }
.sm-contact-link {
  color: var(--sm-item);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 600;
  transition: color 0.25s ease;
}
.sm-contact-link:hover,
.sm-contact-link:focus-visible { color: var(--sm-accent); }

/* GSAP mode: the library owns these transforms — kill CSS transitions that
   would otherwise fight its per-frame writes. */
html.sm-gsap .sm-panel,
html.sm-gsap .sm-prelayer,
html.sm-gsap .sm-icon { transition: none; }

/* Very narrow screens: the topbars stack into a column, so the fixed toggle
   sits in the brand's row ABOVE any filter bar / eyebrow — no side-by-side
   collision to avoid. Drop most of the reserved gutter back so the row below
   (e.g. the vehicles filter bar) regains its width. */
@media (max-width: 30rem) {
  .topbar { padding-right: 1.5rem !important; }
}

/* Scroll-lock the page while the menu is open. */
html.sm-locked { overflow: hidden; }

/* Reduced motion: no transitions (GSAP tweens are also skipped in the module). */
@media (prefers-reduced-motion: reduce) {
  .sm-scrim,
  .sm-panel,
  .sm-icon,
  .sm-panel-item,
  .sm-contact-link { transition: none !important; }
}