/* ==========================================================================
   DataLabelify mega-menu — divergence D2
   Self-contained. No framework, no CDN, no @import (the Pages CSP blocks
   external hosts).

   NO-JS CONTRACT (playbook gotcha 9.3)
   ------------------------------------
   The BASE layer of this stylesheet — everything outside a `.dlm-js` selector —
   renders the whole menu as a plain, in-flow, fully visible list:

       .dlm-panel { position: static; opacity: 1; visibility: visible; }

   `opacity: 0` and `visibility: hidden` appear ONLY inside `html.dlm-js …`
   selectors. `dlm-js` is added by the bootstrap script injected in the header,
   and removed again by that script's watchdog if menu.js never marks itself
   ready. So computed opacity is 1 when:
       * JS is disabled            -> class never added
       * menu.js 404s / throws     -> watchdog removes the class
       * prefers-reduced-motion    -> only `transition` is suppressed below;
                                      no reduced-motion rule sets opacity
   With JS working, the class is present and the open state is driven by
   `data-dlm-open` (set by menu.js) or `:hover`. `:focus-within` deliberately
   does NOT appear in the `html.dlm-js` layer: menu.js closes a panel by
   removing that attribute and returning focus to the trigger, which is a child
   of `.dlm-item`, so a `:focus-within` rule would out-specify the closed rule
   and Escape would leave the panel visibly open. Keyboard users lose nothing —
   panels open on Enter/Space/ArrowDown, and if the script never runs the class
   is gone and the base layer shows everything.
   Verify with getComputedStyle(panel).opacity, never innerText.
   ========================================================================== */

:root {
  --dlm-fg: #14202b;
  --dlm-fg-muted: #55636f;
  --dlm-accent: #007ea7;
  --dlm-accent-ink: #ffffff;
  --dlm-bg: #ffffff;
  --dlm-bg-soft: #f0f3ff;
  --dlm-line: #e4e8ee;
  --dlm-shadow: 0 24px 48px -12px rgba(16, 32, 48, .18), 0 2px 6px rgba(16, 32, 48, .06);
  --dlm-radius: 16px;
  --dlm-bar-h: 76px;
  --dlm-panel-max: 940px;
  --dlm-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------------------------------------------------------------- shell */

.dlm-header {
  position: relative;
  z-index: 900;
  background: var(--dlm-bg);
  border-bottom: 1px solid var(--dlm-line);
  color: var(--dlm-fg);
  font-synthesis-weight: none;
}

.dlm-header *,
.dlm-header *::before,
.dlm-header *::after { box-sizing: border-box; }

.dlm-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 20px;
  min-height: var(--dlm-bar-h);
}

.dlm-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.dlm-logo img { display: block; height: 40px; width: auto; max-width: 220px; }

.dlm-spacer { flex: 1 1 auto; }

/* ---------------------------------------------------------------- nav */

.dlm-nav { position: relative; flex: 1 1 auto; min-width: 0; }

.dlm-top,
.dlm-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dlm-top { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

.dlm-item { position: relative; }

.dlm-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--dlm-fg);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-align: start;
}

.dlm-trigger:hover { background: var(--dlm-bg-soft); color: var(--dlm-accent); }

.dlm-trigger:focus-visible,
.dlm-link:focus-visible,
.dlm-cta:focus-visible,
.dlm-burger:focus-visible,
.dlm-lang-toggle:focus-visible,
.dlm-lang a:focus-visible {
  outline: 2px solid var(--dlm-accent);
  outline-offset: 2px;
}

.dlm-chev {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  transition: transform .18s var(--dlm-ease);
}

/* ---------------------------------------------------------------- panel */

.dlm-panel {
  /* BASE = no JS. In flow, opaque, interactive. Do not move these three
     declarations into a media query or a JS-scoped block. */
  position: static;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  display: block;
  margin: 6px 0 14px;
  padding: 0;
}

.dlm-panel-inner {
  background: var(--dlm-bg);
  border: 1px solid var(--dlm-line);
  border-radius: var(--dlm-radius);
  padding: 18px;
}

.dlm-panel-title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dlm-fg-muted);
}

.dlm-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 12px;
}

.dlm-panel[data-dlm-cols="2"] .dlm-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.dlm-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--dlm-fg);
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
}

.dlm-link:hover,
.dlm-link:focus-visible { background: var(--dlm-bg-soft); color: var(--dlm-accent); }

.dlm-link-arrow {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  opacity: 0;
  margin-inline-start: auto;
  transition: opacity .15s var(--dlm-ease);
}

.dlm-link:hover .dlm-link-arrow,
.dlm-link:focus-visible .dlm-link-arrow { opacity: .7; }

/* RTL: the forward arrow must point the other way. */
[dir="rtl"] .dlm-link-arrow { transform: scaleX(-1); }

/* ---------------------------------------------------------------- actions */

.dlm-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.dlm-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--dlm-accent);
  color: var(--dlm-accent-ink);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.dlm-cta:hover,
.dlm-cta:focus-visible { filter: brightness(1.08); color: var(--dlm-accent-ink); }

.dlm-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--dlm-line);
  border-radius: 10px;
  background: var(--dlm-bg);
  color: var(--dlm-fg);
  cursor: pointer;
}

.dlm-burger svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------------- languages */

.dlm-lang { position: relative; }

.dlm-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border: 1px solid var(--dlm-line);
  border-radius: 999px;
  background: var(--dlm-bg);
  color: var(--dlm-fg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.dlm-lang-list {
  /* BASE = no JS: a plain visible list. */
  position: static;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.dlm-lang-list a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--dlm-fg-muted);
  font-size: 14px;
  text-decoration: none;
}

.dlm-lang-list a:hover { background: var(--dlm-bg-soft); color: var(--dlm-accent); }
.dlm-lang-list img { display: block; width: 18px; height: 12px; }
.dlm-lang-list .dlm-lang-current > a { color: var(--dlm-fg); font-weight: 700; }

/* ---------------------------------------------------------------- booking */

.dlm-book {
  /* BASE = no JS: visible, so the CTA anchor always lands on real content. */
  position: static;
  opacity: 1;
  visibility: visible;
  display: block;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px 20px;
}

.dlm-book-inner {
  border: 1px solid var(--dlm-line);
  border-radius: var(--dlm-radius);
  padding: 18px;
  background: var(--dlm-bg-soft);
}

.dlm-book h2 { margin: 0 0 6px; font-size: 18px; line-height: 1.3; }
.dlm-book p { margin: 0 0 8px; color: var(--dlm-fg-muted); line-height: 1.5; }
.dlm-book a { color: var(--dlm-accent); }

/* ==========================================================================
   JS-ENHANCED LAYER
   Everything below is scoped to html.dlm-js. If the class is absent — JS off,
   or menu.js failed and the watchdog removed it — none of it applies and the
   base layer above stands.
   ========================================================================== */

html.dlm-js .dlm-panel {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-start: 0;
  z-index: 20;
  width: max-content;
  min-width: 520px;
  max-width: min(var(--dlm-panel-max), calc(100vw - 40px));
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px) scale(.985);
  transform-origin: top var(--dlm-origin-x, left);
  transition: opacity .18s var(--dlm-ease),
              transform .18s var(--dlm-ease),
              visibility 0s linear .18s;
}

html.dlm-js [dir="rtl"] .dlm-panel { --dlm-origin-x: right; }

/* The last trigger sits nearest the end edge, so its panel hangs off-screen if
   it keeps opening towards the end. Anchor that one to the end edge instead —
   logical properties make this one rule cover both directions. */
html.dlm-js .dlm-item:last-child > .dlm-panel {
  inset-inline-start: auto;
  inset-inline-end: 0;
  --dlm-origin-x: right;
}

html.dlm-js [dir="rtl"] .dlm-item:last-child > .dlm-panel { --dlm-origin-x: left; }

html.dlm-js .dlm-panel-inner { box-shadow: var(--dlm-shadow); padding: 22px; }

/* Opened by :hover, or by menu.js setting data-dlm-open.

   :focus-within must NOT appear here. menu.js closes a panel by removing
   data-dlm-open and then focusing the trigger, and the trigger is a CHILD of
   .dlm-item -- so a `:focus-within` rule (0,4,1) beats the closed rule
   `html.dlm-js .dlm-panel` (0,2,1) and the panel stays visibly open while
   aria-expanded says false. Escape, and a second click, would not close
   anything, which BUILD-FACTS section 10 requires them to do.

   Nothing is lost. Keyboard access is guaranteed by the un-scoped base layer:
   when JS is off the class is never added, and when menu.js fails to load or
   throws, the bootstrap watchdog removes it. With JS working, Enter/Space and
   ArrowDown open the panel via data-dlm-open -- which is what the spec asks
   for ("panels open on Enter/Space"), not opening merely on focus. */
html.dlm-js .dlm-item:hover > .dlm-panel,
html.dlm-js .dlm-item[data-dlm-open="true"] > .dlm-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition: opacity .2s var(--dlm-ease),
              transform .2s var(--dlm-ease),
              visibility 0s;
}

/* Same reason, plus: a rotated chevron on a merely-focused trigger claims the
   panel is open when it is not. Open styling follows the open state only. */
html.dlm-js .dlm-item:hover > .dlm-trigger,
html.dlm-js .dlm-item[data-dlm-open="true"] > .dlm-trigger {
  background: var(--dlm-bg-soft);
  color: var(--dlm-accent);
}

html.dlm-js .dlm-item:hover > .dlm-trigger .dlm-chev,
html.dlm-js .dlm-item[data-dlm-open="true"] > .dlm-trigger .dlm-chev {
  transform: rotate(180deg);
}

/* language dropdown */
html.dlm-js .dlm-lang-list {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  width: max-content;
  max-width: min(420px, calc(100vw - 40px));
  margin: 0;
  padding: 8px;
  background: var(--dlm-bg);
  border: 1px solid var(--dlm-line);
  border-radius: 12px;
  box-shadow: var(--dlm-shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .16s var(--dlm-ease),
              transform .16s var(--dlm-ease),
              visibility 0s linear .16s;
}

/* :focus-within omitted for the same reason as .dlm-panel above -- menu.js closes
   this dropdown by removing data-dlm-open and focusing .dlm-lang-toggle, which is
   a child of .dlm-lang. */
html.dlm-js .dlm-lang:hover > .dlm-lang-list,
html.dlm-js .dlm-lang[data-dlm-open="true"] > .dlm-lang-list {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .16s var(--dlm-ease), transform .16s var(--dlm-ease), visibility 0s;
}

/* booking block: collapsed to a jump target once JS is running */
html.dlm-js .dlm-book { padding: 0; }
html.dlm-js .dlm-book:not([data-dlm-open="true"]) .dlm-book-inner { display: none; }
html.dlm-js .dlm-book[data-dlm-open="true"] { padding: 0 20px 20px; }

/* Reduced motion: kill the movement, never the visibility. There is no
   opacity:0 in this block — that is the whole point of gotcha 9.3. */
@media (prefers-reduced-motion: reduce) {
  html.dlm-js .dlm-panel,
  html.dlm-js .dlm-lang-list,
  html.dlm-js .dlm-chev,
  html.dlm-js .dlm-link-arrow {
    transition: none !important;
    transform: none !important;
  }
  html.dlm-js .dlm-item:hover > .dlm-trigger .dlm-chev,
  html.dlm-js .dlm-item[data-dlm-open="true"] > .dlm-trigger .dlm-chev {
    transform: rotate(180deg) !important;
  }
}

/* ---------------------------------------------------------------- mobile */

@media (max-width: 1023px) {
  .dlm-burger { display: inline-flex; }
  .dlm-nav { flex-basis: 100%; order: 5; }
  .dlm-links { grid-template-columns: 1fr; }
  .dlm-panel[data-dlm-cols="2"] .dlm-links { grid-template-columns: 1fr; }
  .dlm-actions { order: 4; }
  .dlm-logo { margin-inline-end: auto; }

  /* Accordion, not hover. Panels sit in flow under their trigger. */
  html.dlm-js .dlm-nav {
    display: none;
    padding-top: 8px;
    border-top: 1px solid var(--dlm-line);
    margin-top: 12px;
  }
  html.dlm-js .dlm-header[data-dlm-drawer="open"] .dlm-nav { display: block; }

  html.dlm-js .dlm-top { display: block; }
  html.dlm-js .dlm-item { border-bottom: 1px solid var(--dlm-line); }
  html.dlm-js .dlm-item:last-child { border-bottom: 0; }

  html.dlm-js .dlm-trigger {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 14px 4px;
    border-radius: 0;
  }

  html.dlm-js .dlm-panel {
    position: static;
    width: auto;
    min-width: 0;
    max-width: none;
    transform: none;
    transition: none;
  }

  /* Hover must NOT open an accordion on touch — only explicit state does. */
  html.dlm-js .dlm-item:hover > .dlm-panel {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* data-dlm-open only. With :focus-within here the accordion could not be
     tapped shut: menu.js removes the attribute and focuses the trigger, which
     is inside .dlm-item, so the panel would stay open. */
  html.dlm-js .dlm-item[data-dlm-open="true"] > .dlm-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    padding-bottom: 10px;
  }

  html.dlm-js .dlm-panel-inner { border: 0; padding: 0 0 8px; box-shadow: none; }

  html.dlm-js .dlm-lang-list {
    position: static;
    box-shadow: none;
    border: 0;
    padding: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    display: none;
  }
  html.dlm-js .dlm-lang[data-dlm-open="true"] > .dlm-lang-list { display: grid; }
}

@media (min-width: 1024px) {
  .dlm-nav { flex: 0 1 auto; }
  html.dlm-js .dlm-header[data-dlm-drawer] .dlm-nav { display: block; }
}

/* ---------------------------------------------------------------- print */

@media print {
  .dlm-panel, .dlm-lang-list, .dlm-book { display: none; }
}