/* ==========================================================================
   Header chrome — fixed; dark(transparent-over-hero) vs light(solid white)
   ========================================================================== */

.d55-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--d55-header-height);
  display: flex;
  align-items: center;
  transition: height var(--d55-t) var(--d55-ease), background-color var(--d55-t) var(--d55-ease), box-shadow var(--d55-t) var(--d55-ease);
  background: transparent;
}
.d55-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
}
.d55-header__logo { flex: 0 0 auto; display: inline-flex; align-items: center; }
.d55-header__logo img {
  width: auto;
  height: 46px;
  transition: height var(--d55-t) var(--d55-ease);
}
.d55-header.is-scrolled .d55-header__logo img { height: 38px; }

/* Nav — centred, pushes actions right */
.d55-nav { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.d55-nav__menu {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: clamp(14px, 1.8vw, 30px);
}
.d55-nav__menu a {
  font-family: var(--d55-font-display);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  padding: 6px 2px;
  position: relative;
  transition: color 0.2s var(--d55-ease);
}
.d55-nav__menu a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 2px; background: var(--d55-accent);
  transition: right 0.28s var(--d55-ease);
}
.d55-nav__menu a:hover { color: var(--d55-accent); }
.d55-nav__menu a:hover::after { right: 0; }
.d55-nav__menu .current-menu-item > a { color: var(--d55-accent); }

.d55-header__actions { display: flex; align-items: center; gap: 16px; }

/* Language switcher — compact pill dropdown */
.d55-lang { position: relative; }
.d55-lang__toggle {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--d55-font-display);
  letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.95rem;
  color: #fff; padding: 7px 14px;
  transition: background-color 0.2s var(--d55-ease), border-color 0.2s var(--d55-ease);
}
.d55-lang__toggle:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.4); }
.d55-lang__globe { opacity: 0.85; flex: 0 0 auto; }
.d55-lang__current { line-height: 1; }
.d55-lang__chevron { transition: transform 0.25s var(--d55-ease); flex: 0 0 auto; }
.d55-lang__menu {
  list-style: none; margin: 0; padding: 6px;
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 168px;
  background: #1c1c1c; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
  box-shadow: var(--d55-shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.22s var(--d55-ease), transform 0.22s var(--d55-ease), visibility 0.22s;
  z-index: 120;
}
.d55-lang:hover .d55-lang__menu,
.d55-lang:focus-within .d55-lang__menu,
.d55-lang__menu[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.d55-lang:hover .d55-lang__chevron,
.d55-lang:focus-within .d55-lang__chevron,
.d55-lang__toggle[aria-expanded="true"] .d55-lang__chevron { transform: rotate(180deg); }
.d55-lang__menu a {
  display: block; padding: 9px 14px; border-radius: 6px;
  font-family: var(--d55-font-display); letter-spacing: 0.04em; text-transform: uppercase;
  font-size: 0.95rem; color: #E2E8F0;
  transition: background-color 0.15s var(--d55-ease), color 0.15s var(--d55-ease);
}
.d55-lang__menu a:hover { background: rgba(255,255,255,0.08); color: var(--d55-accent); }
.d55-lang__menu a[aria-current="true"] { color: var(--d55-accent); background: rgba(43,185,217,0.1); }

/* Light-header variant */
body.d55-header--light .d55-lang__toggle { color: var(--d55-ink); background: rgba(17,24,39,0.05); border-color: rgba(17,24,39,0.16); }
body.d55-header--light .d55-lang__toggle:hover { background: rgba(17,24,39,0.09); border-color: rgba(17,24,39,0.3); }

/* Inline switcher (mobile drawer) */
.d55-lang-inline { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }
.d55-lang-inline a { font-family: var(--d55-font-display); text-transform: uppercase; letter-spacing: 0.04em; color: #fff; }
.d55-lang-inline a[aria-current="true"], .d55-lang-inline a:hover { color: var(--d55-accent); }

.d55-header__cta { font-size: 1rem; padding: 0.55em 1.3em 0.45em; }

/* Burger (mobile) */
.d55-burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 10px;
  background: transparent; border: 0; cursor: pointer;
}
.d55-burger span { display: block; height: 2px; width: 100%; background: #fff; transition: transform 0.3s var(--d55-ease), opacity 0.3s var(--d55-ease); }
.d55-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.d55-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.d55-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Scrolled state (dark variant): solid dark bar --- */
.d55-header--dark .d55-header.is-scrolled,
body.d55-header--dark .d55-header.is-scrolled {
  height: var(--d55-header-height-scrolled);
  background: rgba(18, 18, 18, 0.94);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  backdrop-filter: saturate(140%) blur(6px);
}

/* --- Light variant: solid white from load, dark text --- */
body.d55-header--light .d55-header {
  background: #fff;
  box-shadow: 0 1px 0 var(--d55-border);
}
body.d55-header--light .d55-header.is-scrolled { box-shadow: 0 6px 24px rgba(17, 24, 39, 0.10); height: var(--d55-header-height-scrolled); }
body.d55-header--light .d55-nav__menu a { color: var(--d55-ink); }
body.d55-header--light .d55-nav__menu a:hover,
body.d55-header--light .d55-nav__menu .current-menu-item > a { color: var(--d55-accent); }
body.d55-header--light .d55-burger span { background: var(--d55-ink); }

/* Pages without a hero: push content below the fixed header */
body:not(.d55-has-hero) .d55-main { padding-top: var(--d55-header-height); }

/* No hero → the dark header has no dark hero behind it, so make it solid from the start
   (otherwise the transparent header shows white nav text over the white gap). */
body:not(.d55-has-hero).d55-header--dark .d55-header {
  background: rgba(18, 18, 18, 0.98);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
}

/* ==========================================================================
   Mobile off-canvas nav
   ========================================================================== */
.d55-mobile-nav {
  position: fixed; inset: 0 0 0 auto;
  width: min(84vw, 340px);
  z-index: 99;
  background: #141414;
  padding: calc(var(--d55-header-height) + 20px) 28px 40px;
  transform: translateX(100%);
  transition: transform 0.36s var(--d55-ease);
  overflow-y: auto;
}
.d55-mobile-nav.is-open { transform: translateX(0); }
.d55-mobile-nav[hidden] { display: block; } /* JS toggles is-open; keep it in the DOM for transition */
.d55-mobile-nav__menu { list-style: none; margin: 0 0 24px; padding: 0; text-align: right; }
.d55-mobile-nav__menu li { border-bottom: 1px solid rgba(255,255,255,0.08); }
.d55-mobile-nav__menu a {
  display: block; padding: 14px 0;
  font-family: var(--d55-font-display); font-size: 1.4rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: #fff;
}
.d55-mobile-nav__menu a:hover { color: var(--d55-accent); }
.d55-mobile-nav__actions { display: flex; flex-direction: column; gap: 16px; align-items: flex-end; }
.d55-mobile-nav__actions .d55-lang-switcher a { color: #fff; }
.d55-nav-backdrop {
  position: fixed; inset: 0; z-index: 98; background: rgba(0,0,0,0.5);
  opacity: 0; pointer-events: none; transition: opacity 0.3s var(--d55-ease);
}
.d55-nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

@media (max-width: 992px) {
  .d55-nav, .d55-header__cta, .d55-header__actions .d55-lang-switcher { display: none; }
  .d55-burger { display: flex; }
  .d55-header__actions { margin-left: auto; }
}
@media (min-width: 993px) {
  .d55-mobile-nav, .d55-nav-backdrop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .d55-header, .d55-header__logo img, .d55-mobile-nav, .d55-nav-backdrop, .d55-burger span { transition: none; }
}