/*
 * VALDIER V3 — off-canvas menu (template-parts/site/offcanvas.php, js/valdier-offcanvas.js).
 *
 * A white panel from the inline end over a dimmed page: 480px from 768px up, the whole screen on phones.
 * Desktop: name and close, the menu in large type, "Book a journey", a dotted hairline (80%, centred), the
 * contacts in two columns under small caps labels, the Language section (every public language by name), the
 * footer badge at the bottom. Phones: the same, the contacts as icon rows and "Book a journey" at the bottom.
 * The navbar's globe (.nav_globe) opens the same panel on its Language section.
 * Colours are VALDIER V3's (design-system tokens): ink #171717, text #3d3d3d, muted #6b6b6b, hairline
 * rgba(0,0,0,.14), overlay rgba(17,17,17,.42); the button takes the Theme Engine's accent (--v-accent).
 */

/* ---- The header: the logo on the left, the menu button on the right, at every width (no links in the bar) */
.nav_grid--offcanvas { display: flex; align-items: center; justify-content: space-between; }
.nav_grid--offcanvas .nav_logo { float: none; }
/* The menu button: V2's two-line mark (below) on a 48px tap area; no fill, no background on hover. */
.nav_menu-button[data-offcanvas] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: none;
  width: 3rem;
  height: 3rem;
  margin: 0 -0.75rem 0 0; /* the lines end on the container's edge, as the logo starts on it */
  margin-inline-end: max(-0.75rem, -3vw); /* never past the bar's 3% gutter (below 400px it would scroll the page sideways) */
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f5f5f5;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.nav_menu-button[data-offcanvas].is-open { background: transparent; color: #f5f5f5; }
/* Keyboard focus as V2's: a ring inside the button, nothing for the pointer. */
.nav_menu-button[data-offcanvas]:focus-visible { outline: 2px solid #f5f5f5; outline-offset: -6px; border-radius: 0.375rem; }
/* VALDIER V2's menu mark (packages/theme/assets/css/header.css, .vd-menu-toggle): two short lines, 22 × 1.5px,
   6px apart. Hover shortens them unevenly (68% from the left, 50% from the right); open, they meet as a cross
   (±45°). Transform only, 180ms on V2's easing; the cross follows aria-expanded, set when the menu opens or closes. */
.nav_menu-button[data-offcanvas] { flex-direction: column; gap: 6px; }
.nav_menu-line {
  display: block;
  width: 1.375rem;
  height: 1.5px;
  border-radius: 1px;
  background-color: currentColor;
  transition: transform 180ms cubic-bezier(0.2, 0.6, 0.25, 1);
}
.nav_menu-line:first-child { transform-origin: left center; }
.nav_menu-line:nth-child(2) { transform-origin: right center; }
@media (hover: hover) {
  .nav_menu-button[data-offcanvas]:hover .nav_menu-line:first-child { transform: scaleX(0.68); }
  .nav_menu-button[data-offcanvas]:hover .nav_menu-line:nth-child(2) { transform: scaleX(0.5); }
}
.nav_menu-button[data-offcanvas][aria-expanded='true'] .nav_menu-line {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  margin-inline-start: -0.6875rem;
  margin-block-start: -0.75px;
  transform-origin: center;
}
.nav_menu-button[data-offcanvas][aria-expanded='true'] .nav_menu-line:first-child { transform: rotate(45deg); }
.nav_menu-button[data-offcanvas][aria-expanded='true'] .nav_menu-line:nth-child(2) { transform: rotate(-45deg); }
/* Compact navbar (scrolled): 40px drawn, as the bar is lower, still answering on 48px. */
.nav_component[data-nav-compact] .nav_menu-button[data-offcanvas] { width: 2.5rem; height: 2.5rem; margin-inline-end: -0.5rem; padding: 0; }
.nav_component[data-nav-compact] .nav_menu-button[data-offcanvas]::before { content: ""; position: absolute; inset: -0.25rem; }

/* ---- The language globe: beside the menu button, in the bar's ink; opens the panel on Language ----------------
   It comes and goes (js: data-cycle="in" | "out"): opacity and scale only, its 44px place always kept, so the logo
   and the menu button never move. Coming in, the meridian turns once. No script: always shown. */
.nav_button-wrapper:has(.nav_globe) { gap: 0.25rem; }
.nav_globe {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--vs-nav-ink, #f5f5f5);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 1;
  transform: none;
  transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1), transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 180ms ease;
}
.nav_globe[data-cycle='out'] { opacity: 0; transform: scale(0.82); transition-duration: 900ms, 900ms, 180ms; }
.nav_globe:focus-visible { opacity: 1; transform: none; outline: 2px solid var(--vs-nav-ink, #f5f5f5); outline-offset: -4px; }
@media (hover: hover) { .nav_globe[data-cycle='in']:hover { background-color: rgba(255, 255, 255, 0.08); } }
.nav_globe-icon { display: block; width: 1.25rem; height: 1.25rem; overflow: visible; }
.nav_globe-meridian { transform-box: fill-box; transform-origin: center; }
.nav_globe[data-cycle='in'] .nav_globe-meridian { animation: nav-globe-turn 1600ms cubic-bezier(0.45, 0, 0.25, 1) 150ms 1 both; }
@keyframes nav-globe-turn {
  0% { transform: scaleX(1); }
  35% { transform: scaleX(0.08); }
  50% { transform: scaleX(-0.6); }
  75% { transform: scaleX(0.08); }
  100% { transform: scaleX(1); }
}
@media (scripting: none) { .nav_globe[data-cycle='out'] { opacity: 1; transform: none; } }
.nav_component[data-nav-compact] .nav_globe { width: 2.5rem; height: 2.5rem; }
.nav_component[data-nav-compact] .nav_globe::before { content: ""; position: absolute; inset: -0.25rem; border-radius: 50%; }

/* ---- Frame ----------------------------------------------------------- */
.vo { position: fixed; inset: 0; z-index: 2000; font-family: "Inter Tight", system-ui, sans-serif; }
.vo[hidden] { display: none; }
.vo__backdrop {
  position: absolute;
  inset: 0;
  background: var(--v-overlay, rgba(17, 17, 17, 0.42));
  opacity: 0;
  transition: opacity 360ms cubic-bezier(0.32, 0.72, 0, 1);
}
.vo__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  width: min(100%, 30rem);
  box-sizing: border-box;
  padding: max(2rem, env(safe-area-inset-top)) max(3rem, env(safe-area-inset-right)) max(2.5rem, env(safe-area-inset-bottom)) 3rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--vs-panel, #fff);
  color: var(--v-ink, #171717);
  box-shadow: -1rem 0 3rem rgba(0, 0, 0, 0.08);
  transform: translateX(100%);
  transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
  outline: none;
}
:dir(rtl) .vo__panel, [dir='rtl'] .vo__panel { transform: translateX(-100%); box-shadow: 1rem 0 3rem rgba(0, 0, 0, 0.08); }
.vo.is-open .vo__backdrop { opacity: 1; }
.vo.is-open .vo__panel { transform: none; }
/* Closing: a little quicker, easing in. */
.vo.is-closing .vo__backdrop { transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
.vo.is-closing .vo__panel { transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }

/* The content settles in after the panel: a short fade and rise, a step apart. */
.vo__nav, .vo__cta, .vo__divider, .vo__contacts, .vo__langs, .vo__foot {
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 320ms ease, transform 380ms cubic-bezier(0.32, 0.72, 0, 1);
}
.vo.is-open :is(.vo__nav, .vo__cta, .vo__divider, .vo__contacts, .vo__langs, .vo__foot) { opacity: 1; transform: none; }
.vo.is-open .vo__nav { transition-delay: 90ms; }
.vo.is-open .vo__cta { transition-delay: 140ms; }
.vo.is-open .vo__divider, .vo.is-open .vo__contacts { transition-delay: 180ms; }
.vo.is-open .vo__langs, .vo.is-open .vo__divider--langs { transition-delay: 200ms; }
.vo.is-open .vo__foot { transition-delay: 220ms; }
/* Opened from the globe: the Language section first, the rest after it. */
.vo.is-open.is-langs .vo__langs, .vo.is-open.is-langs .vo__divider--langs { transition-delay: 90ms; }
.vo.is-closing :is(.vo__nav, .vo__cta, .vo__divider, .vo__contacts, .vo__langs, .vo__foot) { transition-duration: 160ms; transition-delay: 0ms; }

/* ---- Head ------------------------------------------------------------ */
.vo__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; flex: none; }
.vo__brand { display: inline-flex; align-items: center; min-width: 0; min-height: 2.75rem; text-decoration: none; }
.vo__brand img { display: block; width: auto; height: 2.25rem; max-width: 100%; }
.vo__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--v-line-strong, rgba(0, 0, 0, 0.14));
  border-radius: 50%;
  background: var(--vs-panel, #fff);
  color: var(--v-ink, #171717);
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease;
}
@media (hover: hover) { .vo__close:hover { border-color: var(--v-ink, #171717); } }
/* The close control's cross: V2's mark closed (.vd-menu-toggle--close), 16px lines; hover shortens it to 82%. */
.vo__close { position: relative; }
.vo__close-line {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  width: 1rem;
  height: 1.5px;
  margin-inline-start: -0.5rem;
  margin-block-start: -0.75px;
  border-radius: 1px;
  background-color: currentColor;
  transform: rotate(45deg);
  transition: transform 180ms cubic-bezier(0.2, 0.6, 0.25, 1);
}
.vo__close-line:nth-child(2) { transform: rotate(-45deg); }
@media (hover: hover) {
  .vo__close:hover .vo__close-line:first-child { transform: rotate(45deg) scaleX(0.82); }
  .vo__close:hover .vo__close-line:nth-child(2) { transform: rotate(-45deg) scaleX(0.82); }
}

/* ---- Menu ------------------------------------------------------------ */
.vo__nav { margin-top: 3rem; }
.vo__list { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.vo__link {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.5rem 0 0.5rem 1.25rem;
  color: var(--v-text, #3d3d3d);
  font-size: 2.125rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-decoration: none;
  overflow-wrap: anywhere; /* enlarged text: a long word wraps instead of widening the panel */
  transition: color 180ms ease;
}
@media (hover: hover) { .vo__link[href]:hover { color: var(--v-accent-text, #252525); } }
.vo__link[aria-current='page'] { padding-inline-start: 0; color: var(--v-accent-text, #252525); }
.vo__link[aria-current='page']::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--v-accent, #252525); }
.vo__link[aria-disabled='true'] { color: var(--vs-faint, #9a9a9a); cursor: default; }

/* Sub-entries (a menu with a second level): a quieter list under their entry. */
.vo__sub { display: flex; flex-direction: column; margin: 0 0 0.5rem; padding: 0 0 0 1.25rem; list-style: none; }
.vo__sublink { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--v-muted, #6b6b6b); font-size: 1rem; font-weight: 450; text-decoration: none; }
@media (hover: hover) { .vo__sublink[href]:hover { color: var(--v-accent-text, #252525); } }
.vo__sublink[aria-current='page'] { color: var(--v-accent-text, #252525); }
.vo__ext { margin-inline-start: 0.375rem; font-size: 0.5em; vertical-align: super; }
.vo .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- Book a journey -------------------------------------------------- */
.vo__cta {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: 3.5rem;
  margin-top: 2.5rem;
  padding: 0 1.375rem;
  border-radius: 0.9375rem;
  background: var(--v-accent, #252525);
  color: var(--v-accent-fg, #fff);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 180ms ease, opacity 360ms ease, transform 460ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (hover: hover) { .vo__cta:hover { background: var(--v-accent-hover, #3b3b3b); color: var(--v-accent-fg, #fff); } }

/* ---- Contacts -------------------------------------------------------- */
.vo__divider { width: 80%; height: 0; margin: 2rem auto; border: 0; border-top: 1px dotted var(--v-line-strong, rgba(0, 0, 0, 0.14)); flex: none; }
.vo__contacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
.vo__contact { position: relative; display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.vo__contact--address, .vo__contact--hours { grid-column: 1 / -1; }
.vo__label { color: var(--v-muted, #6b6b6b); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; }
.vo__value { display: flex; align-items: center; gap: 0.75rem; color: var(--v-ink, #171717); font-size: 0.9375rem; font-weight: 500; line-height: 1.45; text-decoration: none; overflow-wrap: anywhere; }
span.vo__value { color: var(--v-text, #3d3d3d); font-weight: 400; }
.vo__icon { display: none; flex: none; color: var(--v-muted, #6b6b6b); }
@media (hover: hover) { a.vo__value:hover { color: var(--v-accent-text, #252525); } a.vo__value:hover span { text-decoration: underline; text-underline-offset: 0.2em; } }

/* ---- Foot ------------------------------------------------------------ */
.vo__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1.25rem; color: var(--v-muted, #6b6b6b); font-size: 0.8125rem; }

/* ---- Language: every public language by its own name; the current one marked as the menu's current page ---- */
.vo__divider--langs { margin-block: 1.5rem 1.25rem; }
.vo__langs { flex: none; display: flex; flex-direction: column; gap: 0.25rem; scroll-margin-block: 1.5rem; }
.vo__langs-title { margin: 0; color: var(--v-muted, #6b6b6b); font-size: 0.6875rem; font-weight: 400; line-height: 1.4; letter-spacing: 0.18em; text-transform: uppercase; }
.vo__lang-list { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; margin: 0; padding: 0; list-style: none; }
.vo__lang {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  color: var(--v-text, #3d3d3d);
  font-size: 1rem;
  font-weight: 450;
  text-decoration: none;
}
.vo__lang-code { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 1.5rem; padding: 0 0.375rem; box-sizing: border-box; border: 1px solid var(--v-line-strong, rgba(0, 0, 0, 0.14)); border-radius: 999px; color: var(--v-muted, #6b6b6b); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; transition: background-color var(--v-duration, 200ms) ease, border-color var(--v-duration, 200ms) ease, color var(--v-duration, 200ms) ease; }
.vo__lang[aria-current='true'] { color: var(--v-ink, #171717); font-weight: 500; }
.vo__lang[aria-current='true'] .vo__lang-code { border-color: var(--v-accent, #252525); background: var(--v-accent, #252525); color: var(--v-accent-fg, #fff); }
@media (hover: hover) {
  .vo__lang:not([aria-current='true']):hover { color: var(--v-accent-text, #252525); }
  .vo__lang:not([aria-current='true']):hover .vo__lang-code { border-color: var(--v-accent-text, #252525); color: var(--v-accent-text, #252525); }
}
/* Hover in the theme's colour: a short colour change (none with reduced motion: --v-duration is 0 then). */
:is(.vo__link, .vo__sublink, .vo__lang, a.vo__value) { transition: color var(--v-duration, 200ms) ease; }

/* ---- Focus: one ink ring, keyboard only ------------------------------ */
.vo :is(a, button):focus-visible { outline: 2px solid var(--v-focus-color, #252525); outline-offset: 3px; }
.vo .vo__cta:focus-visible { outline-offset: 3px; }

/* ---- Phones ---------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .vo__panel { width: 100%; padding: max(1rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left)); box-shadow: none; }
  .vo__brand img { height: 2rem; }
  .vo__close { width: 2.75rem; height: 2.75rem; }
  .vo__nav { margin-top: 2rem; }
  .vo__list { gap: 0; }
  .vo__link { min-height: 3.25rem; padding: 0 0 0 1.125rem; font-size: 1.875rem; }
  .vo__link[aria-current='page'] { gap: 0.75rem; padding-inline-start: 0; }
  .vo__divider { margin: 1.5rem auto; }
  .vo__contacts { grid-template-columns: minmax(0, 1fr); gap: 0.875rem; }
  .vo__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .vo__icon { display: block; }
  .vo__value { min-height: 2.75rem; font-size: 1rem; }
  span.vo__value { font-size: 0.9375rem; }
  /* Book a journey at the bottom, under the languages. */
  .vo__cta { order: 10; margin-top: 1rem; }
  .vo__foot { justify-content: center; padding-top: 1.5rem; }
  .vo__badge { display: none; }
  .vo__foot { padding-top: 0; }
  .vo__lang-list { gap: 0.25rem 1.25rem; }
  .vo.is-open .vo__cta { transition-delay: 220ms; }
}

/* A laptop screen (768–960px tall): a little tighter, so the Language section and the badge fit without scrolling. */
@media screen and (min-width: 768px) and (max-height: 960px) {
  .vo__nav { margin-top: 2rem; }
  .vo__link { padding-block: 0.375rem; }
  .vo__cta { margin-top: 1.75rem; }
  .vo__divider { margin-block: 1.5rem; }
  .vo__divider--langs { margin-block: 1.25rem 1rem; }
}

/* Low screens (a phone held sideways, a small laptop window): tighter rhythm; the panel scrolls if still taller. */
@media screen and (max-height: 640px) {
  .vo__nav { margin-top: 1.5rem; }
  .vo__link { min-height: 0; padding-block: 0.25rem; font-size: 1.625rem; }
  .vo__cta { margin-top: 1.5rem; }
  .vo__divider { margin-block: 1.25rem; }
  .vo__foot { padding-top: 1rem; }
}

/* The page under an open menu does not scroll (js adds the class; the scrollbar's width is kept). */
html.vo-locked, html.vo-locked body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nav_menu-line, .vo__close-line { transition: none; }
  .vo__backdrop, .vo__panel, .vo__nav, .vo__cta, .vo__divider, .vo__contacts, .vo__langs, .vo__foot { transition: none !important; }
  .vo__nav, .vo__cta, .vo__divider, .vo__contacts, .vo__langs, .vo__foot { transform: none; }
  /* The globe simply stays (js keeps it "in"): no fade, no scale, no turn. */
  .nav_globe { transition: background-color 0s; }
  .nav_globe[data-cycle] { opacity: 1; transform: none; }
  .nav_globe .nav_globe-meridian { animation: none !important; }
}