/* ==========================================================================
   Site header
   --------------------------------------------------------------------------
   Sticky bar, primary navigation with dropdown and mega panels, language
   switcher, auth buttons, and the mobile drawer.

   Everything is namespaced under .site-header / .nav / .drawer / .btn so it
   cannot collide with the legacy theme rules in main.css.
   ========================================================================== */

:root {
  --header-h: 80px;
  --header-bg: rgba(8, 11, 24, 0.9);
}

/* ==========================================================================
   Bar
   ========================================================================== */

/* The bar keeps a constant height. Animating it on scroll reflows the whole
   page on every frame and is a common source of jank, so scrolling changes
   only the surface: translucency, blur and shadow. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  transition:
    background var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  height: var(--header-h);
}

.site-header.is-stuck {
  background: var(--header-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--color-border-strong);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
}

/* A beam of brand colour along the bottom edge, brightest at the centre and
   fading out to nothing at both ends. It only appears once the bar detaches
   from the top of the page, so it reads as the header lifting off. */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 166, 8, 0.5) 35%,
    rgba(255, 198, 92, 0.75) 50%,
    rgba(255, 166, 8, 0.5) 65%,
    transparent
  );
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

.site-header.is-stuck::after {
  opacity: 1;
}

/* --- Logo ---------------------------------------------------------------- */
.site-header__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  line-height: 0;
}

.site-header__logo img {
  height: 56px;
  width: auto;
}

/* --- Right-hand actions -------------------------------------------------- */
.site-header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* ==========================================================================
   Primary navigation
   ========================================================================== */

.nav {
  display: flex;
  align-items: center;
  height: 100%;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

/* The link is a pill rather than a bare text run: a capsule that scales in
   behind the label, and a lit line beneath it that grows from the centre. */
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  color: var(--color-default);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--transition-fast);
}

/* Label and chevron ride above the capsule. */
.nav__link > span,
.nav__link > .nav__chevron {
  position: relative;
  z-index: 1;
}

/* The capsule. A hairline top highlight sells it as a raised surface rather
   than a flat tint. */
.nav__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.09),
      rgba(255, 255, 255, 0.02)
    );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  opacity: 0;
  transform: scale(0.86);
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast);
}

/* The marker line. Tapered at both ends rather than a flat bar — the gradient
   runs out to transparent, so it reads as a lit filament under the label
   instead of a border that only covers part of the pill. */
.nav__link::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 3px;
  z-index: 1;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-primary) 22%,
    var(--color-primary-light) 50%,
    var(--color-primary) 78%,
    transparent
  );
  box-shadow: 0 0 10px rgba(255, 166, 8, 0.5);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition-base);
}

.nav__item:hover > .nav__link,
.nav__item:focus-within > .nav__link,
.nav__link:hover {
  color: var(--color-heading);
}

.nav__item:hover > .nav__link::before,
.nav__item:focus-within > .nav__link::before {
  opacity: 1;
  transform: scale(1);
}

.nav__item:hover > .nav__link::after,
.nav__item:focus-within > .nav__link::after {
  transform: scaleX(1);
}

/* Active section: the capsule stays, tinted amber, and the line stays lit. */
.nav__item.is-active > .nav__link {
  color: var(--color-primary);
}

.nav__item.is-active > .nav__link::before {
  opacity: 1;
  transform: scale(1);
  border-color: var(--color-primary-line);
  background: linear-gradient(
    180deg,
    rgba(255, 166, 8, 0.16),
    rgba(255, 166, 8, 0.05)
  );
  box-shadow: inset 0 1px 0 rgba(255, 214, 140, 0.22);
}

.nav__item.is-active > .nav__link::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .nav__link::before,
  .nav__link::after {
    transition: opacity var(--transition-fast);
    transform: none;
  }

  .nav__item:hover > .nav__link::before,
  .nav__item:focus-within > .nav__link::before,
  .nav__item.is-active > .nav__link::before {
    transform: none;
  }

  .nav__link::after {
    opacity: 0;
  }

  .nav__item:hover > .nav__link::after,
  .nav__item:focus-within > .nav__link::after,
  .nav__item.is-active > .nav__link::after {
    opacity: 1;
    transform: none;
  }
}

.nav__chevron {
  font-size: 10px;
  opacity: 0.7;
  transition: transform var(--transition-fast);
}

.nav__item:hover > .nav__link .nav__chevron,
.nav__item:focus-within > .nav__link .nav__chevron,
.lang.is-open .nav__chevron {
  transform: rotate(180deg);
}

/* ==========================================================================
   Dropdown panels
   ========================================================================== */

.nav__panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  min-width: 232px;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast),
    visibility var(--transition-fast);
}

.nav__item:hover > .nav__panel,
.nav__item:focus-within > .nav__panel,
.lang.is-open .nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.nav__panel-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__panel-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--color-default);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}

.nav__panel-link:hover,
.nav__panel-link:focus-visible {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.nav__panel-link.is-active {
  color: var(--color-primary);
  font-weight: 600;
}

/* --- Mega panel ---------------------------------------------------------- */
.nav__panel--mega {
  left: 50%;
  transform: translate(-50%, 10px);
  min-width: 620px;
  padding: var(--space-md);
}

.nav__item:hover > .nav__panel--mega,
.nav__item:focus-within > .nav__panel--mega {
  transform: translate(-50%, 0);
}

.nav__mega {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.nav__mega-col > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__mega-title {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nav__mega-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: var(--radius-sm);
  color: var(--color-default);
  font-size: var(--text-sm);
  text-decoration: none;
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}

.nav__mega-link:hover,
.nav__mega-link:focus-visible {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-heading);
}

.nav__mega-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-primary-line);
  border-radius: 9px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 15px;
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}

.nav__mega-link:hover .nav__mega-icon {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.nav__mega-label {
  flex: 1;
}

.nav__mega-arrow {
  font-size: 11px;
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

.nav__mega-link:hover .nav__mega-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--color-primary);
}

/* ==========================================================================
   Language switcher
   ========================================================================== */

.lang {
  position: relative;
}

.lang__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-default);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.lang__toggle:hover,
.lang.is-open .lang__toggle {
  border-color: var(--color-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-heading);
}

.lang__toggle .fa-globe {
  font-size: 14px;
  color: var(--color-primary);
}

.lang__panel {
  left: auto;
  right: 0;
  min-width: 190px;
}

/* Real SVG flags rather than emoji. The hairline matters: Russia's top band
   and the USA's stripes are white, and without an edge they bleed into the
   panel behind them. */
.lang__flag {
  flex-shrink: 0;
  width: 20px;
  height: 14px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
  object-fit: cover;
}

/* The drawer's row is tighter than the desktop panel. */
.drawer__lang .lang__flag {
  width: 18px;
  height: 12px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  /* Clips the shine sweep to the pill, and keeps the gradient hairline from
     bleeding past the radius. */
  overflow: hidden;
  isolation: isolate;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

/* The shine. One pass across the face on hover, then it waits off-screen on
   the far side rather than sliding back through the button. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.42) 50%,
    transparent 70%
  );
  transform: translateX(-130%);
  pointer-events: none;
}

.btn:hover::after,
.btn:focus-visible::after {
  transform: translateX(130%);
  transition: transform 0.65s var(--ease-out);
}

.btn:active {
  transform: translateY(1px);
}

/* --- Ghost --------------------------------------------------------------
   A glass pill with a gradient hairline rather than a flat 1px border: the
   line brightens from white at the top-left to amber at the bottom-right, so
   the button catches light like the surfaces elsewhere on the site.
   ------------------------------------------------------------------------ */

.btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-heading);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.btn--ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    140deg,
    rgba(255, 255, 255, 0.34),
    rgba(255, 255, 255, 0.06) 45%,
    rgba(255, 166, 8, 0.4)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  transition: background var(--transition-fast);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.btn--ghost:hover::before,
.btn--ghost:focus-visible::before {
  background: linear-gradient(
    140deg,
    rgba(255, 198, 92, 0.7),
    rgba(255, 166, 8, 0.5) 50%,
    rgba(255, 166, 8, 0.85)
  );
}

/* --- Primary ------------------------------------------------------------- */

.btn--primary {
  background: var(--gradient-primary);
  color: var(--color-on-primary);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(140, 88, 0, 0.28),
    0 4px 14px rgba(255, 166, 8, 0.26);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  color: var(--color-on-primary);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -1px 0 rgba(140, 88, 0, 0.28),
    0 10px 26px rgba(255, 166, 8, 0.42);
}

.btn--primary:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(140, 88, 0, 0.34),
    0 2px 8px rgba(255, 166, 8, 0.24);
}

@media (prefers-reduced-motion: reduce) {
  .btn::after {
    display: none;
  }

  .btn--primary:hover,
  .btn--primary:focus-visible {
    transform: none;
  }
}


/* ==========================================================================
   Burger
   ========================================================================== */

/* A glass pill carrying the same gradient hairline as the ghost button, so
   the one control left in the bar on a phone still belongs to the set. The
   middle bar retracts to the left as the outer two cross. */
.site-header__burger {
  position: relative;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 12px;
  border: 0;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.site-header__burger::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    140deg,
    rgba(255, 255, 255, 0.34),
    rgba(255, 255, 255, 0.06) 45%,
    rgba(255, 166, 8, 0.4)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  transition: background var(--transition-fast);
}

.site-header__burger:hover {
  background: var(--color-primary-soft);
}

.site-header__burger:hover::before {
  background: linear-gradient(
    140deg,
    rgba(255, 198, 92, 0.7),
    rgba(255, 166, 8, 0.5) 50%,
    rgba(255, 166, 8, 0.85)
  );
}

.site-header__burger span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--color-heading);
  transform-origin: center;
  transition:
    transform var(--transition-base),
    opacity var(--transition-fast),
    width var(--transition-base),
    background var(--transition-fast);
}

/* The middle bar is shorter at rest, which reads as deliberate rather than a
   three-line stack that happens to be the same width. */
.site-header__burger span:nth-child(2) {
  width: 65%;
}

.site-header__burger:hover span:nth-child(2) {
  width: 100%;
}

.site-header__burger[aria-expanded="true"] span {
  background: var(--color-primary);
}

.site-header__burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header__burger[aria-expanded="true"] span:nth-child(2) {
  width: 0;
  opacity: 0;
}

.site-header__burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Mobile drawer
   ========================================================================== */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 900;
}

.drawer[hidden] {
  display: none;
}

.drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 14, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.drawer.is-open .drawer__backdrop {
  opacity: 1;
}

.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(88vw, 360px);
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--color-border);
  /* Three layers, all painted on the element rather than on a child, so they
     stay put while the panel's content scrolls under them:
       1. a lit edge down the leading side, so the panel reads as sitting
          above the page rather than butted against it;
       2. an amber wash bleeding from the top-right corner, giving the drawer
          a light source instead of a flat fill;
       3. the ground itself. */
  background:
    linear-gradient(
        180deg,
        transparent,
        rgba(255, 166, 8, 0.55) 18%,
        rgba(255, 198, 92, 0.3) 50%,
        transparent 85%
      )
      left / 1px 100% no-repeat,
    radial-gradient(
      120% 60% at 100% 0%,
      rgba(255, 166, 8, 0.13),
      rgba(255, 166, 8, 0) 60%
    ),
    var(--color-bg-alt);
  transform: translateX(100%);
  transition: transform var(--transition-base);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.drawer.is-open .drawer__panel {
  transform: translateX(0);
}

/* --- Drawer scrollbar ---------------------------------------------------
   The page's 10px amber bar is right for a full document and far too heavy
   for a 360px panel — it read as a third of the panel's chrome. This one is
   a 4px overlay pill with no track at all, and it only takes on colour while
   the pointer is over the drawer.
   ------------------------------------------------------------------------ */

.drawer__panel {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 166, 8, 0.28) transparent;
}

.drawer__panel::-webkit-scrollbar {
  width: 4px;
}

.drawer__panel::-webkit-scrollbar-track {
  background: transparent;
}

.drawer__panel::-webkit-scrollbar-thumb {
  border: 0;
  border-radius: 100px;
  background: rgba(255, 166, 8, 0.28);
  background-clip: padding-box;
  transition: background-color var(--transition-fast);
}

.drawer__panel:hover {
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

.drawer__panel:hover::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  background-clip: padding-box;
}

.drawer__panel::-webkit-scrollbar-thumb:active {
  background: var(--color-primary);
  background-clip: padding-box;
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.drawer__logo img {
  height: 44px;
  width: auto;
}

.drawer__close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-heading);
  font-size: 16px;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.drawer__close:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* --- Drawer nav ---------------------------------------------------------- */
.drawer__nav {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
}

.drawer__nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Items fade up in sequence as the panel arrives. The delays are short and
   the whole run finishes inside the panel's own slide, so it reads as one
   movement rather than a queue. */
.drawer__item {
  opacity: 0;
  transform: translateX(14px);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base);
}

.drawer.is-open .drawer__item {
  opacity: 1;
  transform: none;
}

.drawer__item:nth-child(1) { transition-delay: 60ms; }
.drawer__item:nth-child(2) { transition-delay: 100ms; }
.drawer__item:nth-child(3) { transition-delay: 140ms; }
.drawer__item:nth-child(4) { transition-delay: 180ms; }
.drawer__item:nth-child(5) { transition-delay: 220ms; }
.drawer__item:nth-child(6) { transition-delay: 260ms; }

.drawer__item + .drawer__item {
  border-top: 1px solid var(--color-line-soft, rgba(255, 255, 255, 0.06));
}

.drawer__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  /* A 52px target rather than 45px, and the padding now sits inside a rounded
     hit area instead of running to the panel edge. */
  padding: 16px 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-heading);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    color var(--transition-fast),
    background var(--transition-fast);
}

/* The accent bar. It grows from the vertical centre, which is what stops it
   looking like a border that happens to be thick. */
.drawer__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 22px;
  border-radius: 0 3px 3px 0;
  background: var(--color-primary);
  box-shadow: 0 0 12px rgba(255, 166, 8, 0.6);
  transform: translateY(-50%) scaleY(0);
  transition: transform var(--transition-base);
}

.drawer__link:hover,
.drawer__link.is-active {
  color: var(--color-primary);
  background: rgba(255, 166, 8, 0.06);
}

.drawer__link:hover::before,
.drawer__link.is-active::before {
  transform: translateY(-50%) scaleY(1);
}

@media (prefers-reduced-motion: reduce) {
  .drawer__item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .drawer__link::before {
    transition: none;
  }
}

.drawer__link[aria-expanded="true"] .nav__chevron {
  transform: rotate(180deg);
}

/* A guide line down the left of the sub-list ties the children to the parent
   they belong to — indentation alone leaves them floating.

   Scoped through `.drawer__nav` because the `.drawer__nav ul` reset above
   carries two classes; a bare `.drawer__sub` loses to it on specificity and
   the indent silently collapses to zero. */
.drawer__nav .drawer__sub {
  display: none;
  position: relative;
  margin: 0 0 0 14px;
  padding: 2px 0 12px 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.09);
}

.drawer__nav .drawer__item.is-open .drawer__sub {
  display: block;
}

.drawer__sub a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  color: var(--color-default);
  font-size: var(--text-sm);
  text-decoration: none;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

/* A node on the guide line, level with the label. */
.drawer__sub a::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 50%;
  width: 5px;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  transition:
    width var(--transition-fast),
    background var(--transition-fast);
}

.drawer__sub a:hover,
.drawer__sub a.is-active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  transform: translateX(2px);
}

.drawer__sub a:hover::before,
.drawer__sub a.is-active::before {
  width: 9px;
  background: var(--color-primary);
}

.drawer__sub a i {
  width: 18px;
  color: var(--color-primary);
  font-size: 14px;
}

/* --- Drawer footer ------------------------------------------------------- */
.drawer__langs {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--color-border);
}

.drawer__lang {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-default);
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.drawer__lang:hover,
.drawer__lang.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.drawer__actions {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.drawer__actions .btn {
  width: 100%;
  height: 48px;
}

/* Stop the page scrolling behind the drawer. */
body.drawer-open {
  overflow: hidden;
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

/* Tighten the bar before anything is forced to wrap. */
@media (max-width: 1400px) {
  .site-header__inner {
    gap: var(--space-md);
  }

  .nav__link {
    padding: 10px 11px;
  }
}

@media (max-width: 1199px) {
  .nav__link {
    font-size: var(--text-xs);
    padding: 10px 9px;
  }

  .btn {
    padding: 0 18px;
  }

  .site-header__logo img {
    height: 52px;
  }
}

/* Below this the bar becomes logo + burger. */
@media (max-width: 991px) {
  :root {
    --header-h: 68px;
  }

  .nav,
  .site-header__actions .lang,
  .site-header__actions .btn {
    display: none;
  }

  .site-header__burger {
    display: flex;
  }

  .site-header__logo img {
    height: 46px;
  }

}

@media (max-width: 400px) {
  .drawer__panel {
    width: 100vw;
  }
}