// =============================================================================
// HEADER / NAV — v2 (Figma 18580:5827 web / 18580:5909 mobile)
// .site-header        : contains nav + hero as a single full-bleed block
// .site-nav           : transparent navbar overlaid on hero
// .site-nav__hamburger: gold square button (left, laptop+ only — 'laptop'
//                       breakpoint, 62rem/992px, tokens.scss)
// .site-nav__logo     : centred logo
// .site-nav__lang     : globe + "Français" language switcher (below laptop —
//                       mobile through tablet)
// .site-nav__book     : gold "BOOK NOW" CTA (laptop+ only) — anchors to the
//                       in-page booking widget; mirrors the mobile/tablet
//                       bottom bar's own BOOK button.
// =============================================================================
@import '../mixins';

// ─── Site header wrapper ─────────────────────────────────────────────────────
.site-header {
  position: relative;
}

// ─── Sticky nav ──────────────────────────────────────────────────────────────
.site-nav {
  position: absolute;        // overlaid on top of hero image
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100%;
  background: transparent;
  padding: 0 2.5rem;         // 40px sides
  height: 8.5rem;            // 136px
  transition: background-color 0.3s ease;

  &.is-scrolled {
    background-color: var(--color-ink);  // #0a0d12 — black sticky header
    position: fixed;
  }
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 90rem; // 1440px
  margin: 0 auto;
}

// Hamburger button — gold bg square, 44×44px
.site-nav__hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  background-color: var(--color-gold);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.2s ease;

  &:hover {
    background-color: var(--color-gold-dark);
  }

  &:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
  }

  // The template ships the dark icon variants (menu-dark.svg, and x-close.svg
  // once main.js swaps it in for the open state — both #171717), but the
  // bottom bar's own burger is white (icon-fa-reg-burger.svg /
  // x-close-white.svg) and the design calls for the same white icon here.
  // Knocked out to white in CSS rather than by repointing the template at
  // menu.svg/x-close-white.svg, so the frozen markup stays untouched and
  // BOTH states (menu and close) are covered by this one rule regardless of
  // which src main.js has swapped in. Same technique .site-nav__logo and
  // .mobile-nav-bar__logo already use for their own white knockouts.
  img {
    width: 24px;
    height: 24px;
    display: block;
    filter: brightness(0) invert(1);
  }
}

// .site-nav__hamburger is also the desktop close button now (see main.js —
// one element, its own icon morphs in place instead of crossing over with a
// separate .menu-overlay__close). .site-nav (z-index:100) normally sits
// below .menu-overlay (z-index:400, _menu-overlay.scss), so once the
// overlay opens it would bury the hamburger along with the rest of the
// header. Promoting .site-nav itself above the overlay while hiding its
// other children keeps exactly the hamburger/close button visible in place
// — same technique .mobile-nav-bar already uses (its own z-index:410, see
// below) to stay on top while the overlay's open. Scoped to the laptop+
// breakpoint since that's where .site-nav__hamburger itself is shown
// (d-lg-flex) — below that, the bottom bar's own toggle handles this
// already (mobile through tablet) and .site-nav__logo-link must stay
// visible/untouched there.
@include respond-to('laptop') {
  body.menu-open .site-nav {
    z-index: 410;

    // Pin to the viewport for as long as the overlay is open, so the close
    // button is always reachable regardless of how far the page was scrolled
    // when the menu was opened.
    //
    // Without this the button silently vanishes on any scrolled page: opening
    // the overlay applies a scroll lock (body{position:fixed;top:-<scrollY>px}),
    // which makes window.scrollY report 0. That fires the scroll listener in
    // main.js, whose `scrollY > 80` test then strips .is-scrolled — dropping
    // .site-nav back to its default `position:absolute`. Absolute means it is
    // anchored to .site-header at the top of the document, and the locked body
    // has just been shifted up by the old scroll offset, so the whole nav (the
    // close button with it) is carried off the top of the screen. Holding it
    // fixed here overrides both the base rule and the .is-scrolled rule for
    // the duration of the overlay, and does not depend on that class at all.
    position: fixed;
    top: 0;
  }

  body.menu-open .site-nav__logo-link,
  body.menu-open .site-nav__book {
    visibility: hidden;
  }
}

// Logo — centred absolutely so it doesn't disturb flex spacing
.site-nav__logo-link {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
}

.site-nav__logo {
  width: 227.708px;
  height: 80px;
  display: block;
  // Figma header logo is the white knockout variant of the shared mark
  filter: brightness(0) invert(1);

  @include respond-to('tablet') {
    width: 170px;
    height: auto;
  }

  @include respond-to('desktop') {
    width: 227.708px;
    height: 80px;
  }
}

// Right-side "BOOK NOW" CTA — desktop only, balances the hamburger on the left.
// Sizing/color entirely from .btn .btn-gold; only flex behaviour lives here.
.site-nav__book {
  flex-shrink: 0;
  white-space: nowrap;
}

// Language switcher — globe icon + "Français", mobile only (v2 mobile ref)
.site-nav__lang {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--fs-sm);        // 14px
  font-weight: var(--fw-regular);
  line-height: var(--lh-sm);
  text-decoration: none;

  img {
    width: 24px;
    height: 24px;
    display: block;
  }

  &:hover,
  &:focus-visible {
    color: var(--color-white);
    text-decoration: underline;
  }
}

// ─── Mobile + tablet nav adjustments ──────────────────────────────────────────
// v2 mobile/tablet: no hamburger at top — language switcher centred at top
// (~41px), logo centred below it. Menu access is via the bottom bar MENU
// button, which now spans mobile through tablet (see .site-nav__hamburger's
// d-lg-flex / .mobile-nav-bar's d-lg-none) — this collapsed layout matches
// that range, up to just below the 'laptop' breakpoint (62rem/992px) where
// the desktop hamburger/book take over instead.
@media (max-width: 61.9375rem) {
  .site-nav {
    height: auto;
    padding: 2.5rem 1rem 0;   // lang row sits ~41px from top
  }

  .site-nav__inner {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2.375rem;            // lang → logo (logo at ~144px in the 749px hero)
  }

  // Logo flows under the language switcher instead of absolute centring
  .site-nav__logo-link {
    position: static;
    transform: none;
  }

  .site-nav__logo {
    width: 181px;   // Figma mobile logo: 181×64px frame
    height: auto;
  }

  // No sticky/scrolled header below desktop — v2 mobile nav stays in-flow over
  // the hero; menu access is via the fixed bottom bar, not a scrolled top nav.
  .site-nav.is-scrolled {
    position: absolute;
    background: transparent;
  }
}

// ─── Mobile bottom action bar ─────────────────────────────────────────────────
// Figma node 19622:5675 — gold bg bar, MENU + centered logo + BOOK, spread
// with justify-between and 40px/14px padding instead of the old two-button
// center+gap layout (client added the logo between MENU and BOOK). Height is
// no longer a fixed 63px: the logo (41px) is taller than the MENU/BOOK
// buttons (35px), so it — not a hardcoded value — now determines the bar's
// height via align-items:center + the 14px vertical padding.
.mobile-nav-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  // Above the menu overlay (400, _menu-overlay.scss) — this bar is persistent
  // page chrome (Figma 18694:5060 keeps it visible with the MENU icon toggled
  // to an X while the overlay's open), not overlay content, so it must stay
  // on top rather than being covered once the overlay opens.
  z-index: 410;
  background-color: var(--color-brand);  // #b8923b — Figma: colors/brand/600
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 2.5rem;  // 14px/40px — Figma: py-14 px-40
}

// Cookiebot's persistent "manage consent" floating icon (#CookiebotWidget) is
// injected by their own runtime script — there's no template hook or local
// class to key off, and no admin-side setting for its position. It defaults
// to a 48x48px circle fixed at bottom:10px/left:10px, which is the exact
// corner this bar's own MENU button occupies below 'laptop' (where this bar
// replaces the desktop nav) — it sits directly on top of the button,
// blocking it entirely. Raised clear of the bar's own height (69px, driven
// by its 41px logo + 14px vertical padding — see .mobile-nav-bar above) plus
// a small gap, rather than moved sideways, so it doesn't just relocate onto
// the BOOK button on the other side instead.
//
// #CookiebotWidget is a stable, publicly documented styling hook (Cookiebot's
// own docs cover repositioning it via CSS), so this is a supported
// customisation point, not reaching into unstable third-party internals.
// !important is required because Cookiebot's stylesheet is injected by its
// own script at runtime, after this compiled stylesheet has already loaded —
// without it, their later same-specificity rule would win regardless.
@media (max-width: 61.9375rem) { // below 'laptop' (62rem) — matches .mobile-nav-bar's own d-lg-none range
  #CookiebotWidget {
    bottom: calc(4.3125rem + var(--space-3)) !important; // 69px bar height + 12px gap
  }
}

.mobile-nav-bar__logo-link {
  display: flex;
  flex-shrink: 0;
}

// 116×41 — Figma's footer logo frame, same aspect ratio as the desktop
// header's own logo.svg (228×80) scaled down, not a separate asset.
.mobile-nav-bar__logo {
  width: 7.25rem;
  height: 2.5625rem;
  // White knockout of the shared dark-green logo mark, against this bar's
  // gold background — same technique .menu-overlay__logo already uses
  // against its own dark background (no separate white asset exists).
  filter: brightness(0) invert(1);
}

.mobile-nav-bar__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  background: none;
  border: none;
  color: var(--color-white);
  cursor: pointer;
  text-decoration: none;
  padding: 0;

  span {
    font-family: var(--font-body);
    font-size: 0.5625rem;  // 9px — Figma: text-[9px]
    font-weight: var(--fw-regular);
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--color-white);
  }

  &:focus-visible {
    outline: 2px solid var(--color-white);
    outline-offset: 2px;
  }
}

.mobile-nav-bar__icon {
  display: block;
  flex-shrink: 0;
}

// Hamburger → X morph — the MENU button's icon toggles when the overlay
// opens, matching Figma 18694:5060 (bottom bar stays visible with an X in
// place of the hamburger while the menu's open). The icon is now a flat
// <img> (data-icon-close/data-label-close in MobileNavBar.html and
// Navigation.html, swapped by main.js), not individual SVG bars, so the
// morph is a rotate+scale+fade crossfade instead of the old per-bar
// rotation: main.js adds/removes .is-swapping around the src swap
// (transitionend-timed), this transitions the OLD icon out, then the NEW
// one (once src has changed) back in through the exact same rule — a
// symmetric "spin away, spin back in" rather than a hard cut. Shared by the
// mobile bottom-bar toggle and the desktop hamburger/close button — same
// single-button-morphs-in-place pattern on both.
.mobile-nav-bar__toggle-icon,
.site-nav__hamburger-icon {
  transition: transform 0.2s ease, opacity 0.2s ease;

  &.is-swapping {
    transform: rotate(90deg) scale(0.6);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav-bar__toggle-icon,
  .site-nav__hamburger-icon {
    transition: none;
  }
}