/* ==========================================================================
   vxh — Netflix-style header for styles/default
   Consumes ONLY existing customizer variables (--vod-*), so tenant colors
   set via the template customizer apply unchanged. vodlix.css is untouched;
   every selector here is namespaced under .vxh / .vxh-drawer / body helpers.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bar
   -------------------------------------------------------------------------- */
.vxh {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030; /* above legacy 110, below Bootstrap modals (1050) */
  background: linear-gradient(180deg, var(--vod-header-gradient-top) 10%, var(--vod-header-gradient-bottom));
}

/* Scrolled state: cross-fade to the tenant's scroll gradient (same vars +
   geometry as the legacy .appHeaderOpt rule, so saved customizations render
   identically — the swap just animates now). */
.vxh::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--vxl-dur-3) var(--vxl-ease);
  background: linear-gradient(139deg, var(--vod-scroll-header-gradient-left) 39%, var(--vod-scroll-header-gradient-right) 100%);
}
.vxh.is-scrolled::before {
  opacity: 1;
}
/* DS: a stuck bar ends in a single hairline — the edge is what separates it
   from the page, not a shadow. Drawn inset so it costs no layout. */
.vxh.is-scrolled {
  box-shadow: inset 0 -1px 0 0 var(--vxl-line);
}

.vxh__bar {
  position: relative; /* paints above ::before */
  z-index: 1;
  display: flex;
  align-items: center;
  height: var(--vxl-header-h, 68px);
  padding: 0 4%;
  gap: 4px;
}
.vxh__bar > * {
  flex-shrink: 0;
}

.vxh__spacer {
  flex: 1 1 auto;
  min-width: 8px;
}

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */
.vxh__logo {
  margin: 0 20px 0 0;
  padding: 0;
  line-height: 0;
}
.vxh__logo a {
  /* inline-flex + a 44px floor: as inline-block the link hugged the logo
     bitmap at 30px tall, under the minimum tap size for the one control that
     takes you home */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.vxh__logo img {
  display: block;
  height: 34px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   Burger (mobile only)
   -------------------------------------------------------------------------- */
.vxh__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--vod-white-color);
  cursor: pointer;
}
.vxh__burger i {
  font-size: 26px;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Desktop nav
   -------------------------------------------------------------------------- */
.vxh__nav {
  flex-shrink: 1;
  min-width: 0;
}
.vxh__navList {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vxh__navList .nav-item {
  white-space: nowrap;
}
.vxh__navLink {
  display: inline-block;
  padding: 6px 10px;
  color: var(--vod-white-color);
  font-size: 14px;
  text-decoration: none;
  transition: opacity var(--vxl-dur-1) var(--vxl-ease);
}
.vxh__navLink:hover,
.vxh__navLink:focus {
  color: var(--vod-white-color);
  opacity: 0.7;
  text-decoration: none;
}
.vxh__navLink.is-active {
  font-weight: 600;
  opacity: 1;
}
.vxh__navLink.dropdown-toggle::after {
  vertical-align: 0.15em;
}

/* --------------------------------------------------------------------------
   Dropdown menus (nav submenus, language, user) — Bootstrap-driven
   -------------------------------------------------------------------------- */
/* DS float treatment: hairline + real radius + shadow (a dropdown is one of
   the few genuinely floating things, so it is allowed its shadow). The old
   2px brand top-border was chrome from another era. */
.vxh__menu.dropdown-menu {
  min-width: 200px;
  margin-top: 10px;
  padding: 6px 0;
  border: 1px solid var(--vxl-line-strong);
  border-radius: var(--vxl-radius-md);
  background-color: var(--vod-menu-bg);
  box-shadow: var(--vxl-shadow-2);
  overflow: hidden; /* items clip to the new radius */
}
/* Open motion: the storefront-wide dropdown drop-in in components.css
   (.dropdown-menu.show → vx-menu-in) covers these menus. */
.vxh__menu .dropdown-item {
  padding: 9px 18px;
  color: var(--vod-white-color);
  font-size: 14px;
  background-color: transparent;
}
.vxh__menu .dropdown-item:hover,
.vxh__menu .dropdown-item:focus,
.vxh__menu .dropdown-item.active {
  color: var(--vod-white-color);
  background-color: var(--vxl-surface-2);
}
.vxh__menu .dropdown-item.text-danger {
  color: var(--vod-danger, #e57373);
}
.vxh__menu .dropdown-divider {
  border-top: 1px solid var(--vxl-line);
}

/* --------------------------------------------------------------------------
   Icon buttons (search toggle, language, user)
   -------------------------------------------------------------------------- */
.vxh__iconBtn {
  display: flex;
  align-items: center;
  padding: 6px;
  border: 0;
  background: transparent;
  color: var(--vod-white-color);
  cursor: pointer;
  transition: opacity var(--vxl-dur-1) var(--vxl-ease);
}
.vxh__iconBtn:hover,
.vxh__iconBtn:focus {
  color: var(--vod-white-color);
  opacity: 0.75;
  outline: none;
  box-shadow: none;
  text-decoration: none;
}
.vxh__iconBtn i,
.vxh__iconBtn .vxm-ico {
  font-size: 22px; /* .vxm-ico SVGs are 1em, so this sizes them like the old MDI glyph */
  line-height: 1;
}
.vxh__iconBtn.dropdown-toggle::after {
  display: none;
}
/* `.is-active` is a hook, not a colour. Header icons all share one ink
   (--vod-white-color) and the active page is announced with aria-current
   instead, so the row stays visually even — an accent on one icon reads as a
   button that does something different, not as "you are here". A tenant that
   wants a marker can style this class in custom.css. */

/* --------------------------------------------------------------------------
   Expanding search
   NOTE: collapsed via width/opacity only — the input (#vodlix-search-field)
   must stay in the DOM for the Algolia/Typesense autocomplete plugins, and
   NO ancestor may use overflow:hidden or their suggestion panel gets clipped.
   -------------------------------------------------------------------------- */
.vxh__search {
  display: flex;
  align-items: center;
}
.vxh__searchBox {
  position: relative; /* anchors plugin-inserted absolute suggestion panels */
  width: 0;
  opacity: 0;
  pointer-events: none;
  transition: width var(--vxl-dur-2) var(--vxl-ease), opacity var(--vxl-dur-1) var(--vxl-ease);
}
.vxh__search.is-open .vxh__searchBox {
  width: min(260px, 50vw);
  opacity: 1;
  pointer-events: auto;
}
.vxh__searchInput {
  width: 100%;
  height: 36px;
  padding: 4px 14px;
  border: 1px solid var(--vxl-line-strong);
  border-radius: var(--vxl-radius-pill);
  background-color: var(--vxl-scrim);
  color: var(--vod-white-color);
  font-size: 14px;
  transition: border-color var(--vxl-dur-1) ease, box-shadow var(--vxl-dur-1) ease;
}
.vxh__searchInput:focus {
  outline: none;
  border-color: var(--vxl-accent);
  box-shadow: 0 0 0 3px var(--vxl-focus-tint);
}
.vxh__searchInput::placeholder {
  color: var(--vod-placeholder-color, #fff);
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
   Language switcher
   -------------------------------------------------------------------------- */
.vxh__lang .vxh__langCode {
  margin-left: 4px;
  font-size: 13px;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   User menu
   -------------------------------------------------------------------------- */
.vxh__avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--vxl-avatar-radius, 10%); /* Template Manager › Avatar corners */
  object-fit: cover;
}
.vxh__userName {
  margin-left: 8px;
  color: var(--vod-white-color);
  font-size: 13px;
}
.vxh__caret {
  font-size: 18px;
  transition: transform var(--vxl-dur-1) var(--vxl-ease);
}
.show > .vxh__iconBtn .vxh__caret,
.vxh__user.show .vxh__caret {
  transform: rotate(180deg);
}
.vxh__menu .vxh__avatar {
  margin-right: 8px;
}

/* --------------------------------------------------------------------------
   Guest buttons
   -------------------------------------------------------------------------- */
.vxh__btn.btn {
  margin-left: 8px;
  padding: 6px 16px;
  border-radius: var(--vxl-btn-radius, var(--vxl-radius-pill)); /* the button_shape word, like every labeled control */
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--vod-header-btn-text-color);
  box-shadow: none;
}
.vxh__btn.btn:hover,
.vxh__btn.btn:focus {
  color: var(--vod-header-btn-text-color);
  box-shadow: none;
}
/* The guest account glyph is the PHONE's stand-in for the Login button (it
   sits where the avatar sits once signed in). Desktop has room for the
   labelled button, so the glyph is off here and mobile-app.css swaps the
   pair at 991.98px. */
.vxh__guestAccount {
  display: none;
}

/* --------------------------------------------------------------------------
   Mobile drawer
   -------------------------------------------------------------------------- */
.vxh-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  visibility: hidden;
  transition: visibility 0s linear var(--vxl-dur-2);
}
.vxh-drawer.is-open {
  visibility: visible;
  transition-delay: 0s;
}
.vxh-drawer__backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity var(--vxl-dur-2) var(--vxl-ease);
}
.vxh-drawer.is-open .vxh-drawer__backdrop {
  opacity: 1;
}
.vxh-drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: min(320px, 85vw);
  height: 100vh;
  height: 100dvh;
  background: var(--vod-menu-bg);
  transform: translateX(-105%);
  transition: transform var(--vxl-dur-2) var(--vxl-ease);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.vxh-drawer.is-open .vxh-drawer__panel {
  transform: translateX(0);
}
.vxh-drawer__close {
  align-self: flex-end;
  margin: 8px 8px 0 0;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--vod-white-color);
  cursor: pointer;
}
.vxh-drawer__close i {
  font-size: 24px;
  line-height: 1;
}
.vxh-drawer__nav {
  padding: 4px 0 24px;
}
.vxh-drawer__link {
  display: block;
  padding: 13px 22px;
  color: var(--vod-white-color);
  font-size: 15px;
  text-decoration: none;
}
.vxh-drawer__link:hover,
.vxh-drawer__link:focus,
.vxh-drawer__link.is-active {
  color: var(--vod-white-color);
  background: var(--vxl-surface-2);
  text-decoration: none;
}
.vxh-drawer__link.is-active {
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--vod-primary);
}
.vxh-drawer__groupToggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 22px;
  border: 0;
  background: transparent;
  color: var(--vod-white-color);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.vxh-drawer__groupToggle i {
  font-size: 20px;
  transition: transform var(--vxl-dur-1) var(--vxl-ease);
}
.vxh-drawer__group.is-open .vxh-drawer__groupToggle i {
  transform: rotate(180deg);
}
.vxh-drawer__sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--vxl-dur-2) var(--vxl-ease);
  background: rgba(0, 0, 0, 0.25);
}
.vxh-drawer__group.is-open .vxh-drawer__sub {
  max-height: 100vh;
}
.vxh-drawer__sub .vxh-drawer__link {
  padding-left: 34px;
  font-size: 14px;
}

body.vxh-noscroll {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Responsive — breakpoint matches the old d-lg-* split (Bootstrap 4 lg)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .vxh-drawer {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .vxh__bar {
    height: 52px;
    padding: 0 12px;
  }
  .vxh__nav {
    display: none;
  }
  .vxh__burger {
    display: flex;
  }
  .vxh__logo {
    margin-right: 8px;
  }
  .vxh__logo img {
    height: 26px;
    max-width: 130px;
  }
}

@media (max-width: 767.98px) {
  .vxh__userName {
    display: none;
  }
  /* compact bar so guest buttons never overflow a 360-375px viewport */
  .vxh__bar {
    padding: 0 8px;
    gap: 2px;
  }
  .vxh__logo img {
    max-width: 104px;
  }
  .vxh__iconBtn {
    padding: 4px;
  }
  .vxh__langCode {
    display: none;
  }
  .vxh__btn.btn {
    margin-left: 4px;
    padding: 5px 10px;
    font-size: 12px;
  }
  body.rtl .vxh__btn.btn {
    margin-left: 0;
    margin-right: 4px;
  }
  /* Search opens as a full-bar overlay, app style */
  .vxh__search.is-open {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 100%;
    z-index: 2;
    padding: 0 10px;
    background: var(--vod-menu-bg);
  }
  .vxh__search.is-open .vxh__searchBox {
    flex: 1 1 auto;
    width: auto;
  }
  /* Legacy vodlix.css zeroes .contentHolder padding under 768px because the
     old header was in-flow there; the vxh header is fixed, so restore an
     offset on every page except home (home's hero sits under the bar). */
  body:not(.page-home) .contentHolder {
    padding-top: 60px !important;
  }
}

/* --------------------------------------------------------------------------
   Page-scoped
   -------------------------------------------------------------------------- */
/* Homepage hero sits under the transparent header — only when the page really
   opens with a hero slider (:has-guarded; browsers without :has, and tenants
   whose homepage starts with plain card rows, keep the padded layout). On
   mobile the legacy featureSlider -3rem margin already lands the hero at y=0. */
@media (min-width: 768px) {
  /* real hero (.featureSlider) OR its loading skeleton (.vxg-hero) both sit
     under the transparent bar, so clear the offset for either */
  body.page-home .contentHolder:has(.featureSlider),
  body.page-home .contentHolder:has(.vxg-hero) {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}
@media (max-width: 767.98px) {
  /* no hero on mobile home either -> clear the fixed bar like other pages */
  body.page-home .contentHolder:not(:has(.featureSlider)):not(:has(.vxg-hero)) {
    padding-top: 60px !important;
  }
}

/* watch_video keeps an in-flow header (parity with legacy rule) */
.watchVideoPage .vxh {
  position: relative;
}

/* --------------------------------------------------------------------------
   RTL
   -------------------------------------------------------------------------- */
body.rtl .vxh__logo {
  margin: 0 0 0 20px;
}
body.rtl .vxh__burger {
  margin-right: 0;
  margin-left: 4px;
}
body.rtl .vxh__userName {
  margin-left: 0;
  margin-right: 8px;
}
body.rtl .vxh__btn.btn {
  margin-left: 0;
  margin-right: 8px;
}
body.rtl .vxh__menu .vxh__avatar {
  margin-right: 0;
  margin-left: 8px;
}
body.rtl .vxh-drawer__panel {
  left: auto;
  right: 0;
  transform: translateX(105%);
}
body.rtl .vxh-drawer.is-open .vxh-drawer__panel {
  transform: translateX(0);
}
body.rtl .vxh-drawer__close {
  align-self: flex-start;
  margin: 8px 0 0 8px;
}
body.rtl .vxh-drawer__groupToggle {
  text-align: right;
}
body.rtl .vxh-drawer__link.is-active {
  box-shadow: inset -3px 0 0 var(--vod-primary);
}
body.rtl .vxh-drawer__sub .vxh-drawer__link {
  padding-left: 22px;
  padding-right: 34px;
}
@media (max-width: 991.98px) {
  body.rtl .vxh__logo {
    margin-right: 0;
    margin-left: 8px;
  }
}

/* (vxf footer styles moved to footer.css) */


/* --------------------------------------------------------------------------
   Global loader — restyles Bootstrap's .spinner-border everywhere into a
   Netflix-style ring: faint track, primary arc with a comet tail. Pure CSS
   over the existing markup (spinner-border text-primary), no template edits.
   -------------------------------------------------------------------------- */
.spinner-border {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-color: color-mix(in srgb, var(--vod-white-color) 12%, transparent);
  border-top-color: var(--vod-primary);
  border-right-color: color-mix(in srgb, var(--vod-primary) 45%, transparent);
  animation: vx-spin 0.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
.spinner-border-sm {
  width: 20px;
  height: 20px;
  border-width: 2px;
}
@keyframes vx-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vxh::before,
  .vxh__searchBox,
  .vxh__caret,
  .vxh-drawer,
  .vxh-drawer__backdrop,
  .vxh-drawer__panel,
  .vxh-drawer__sub,
  .vxh-drawer__groupToggle i {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Drawer polish — staggered item entrance + safe areas. The stagger is a
   pure-CSS cascade on the open state; reduced-motion users get an instant
   drawer (transitions already zeroed above, and the animation is gated too).
   -------------------------------------------------------------------------- */
.vxh-drawer__nav > * {
  opacity: 0;
  transform: translateX(-10px);
}
.vxh-drawer.is-open .vxh-drawer__nav > * {
  animation: vxh-drawer-item 0.32s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.vxh-drawer.is-open .vxh-drawer__nav > *:nth-child(1) { animation-delay: 0.05s; }
.vxh-drawer.is-open .vxh-drawer__nav > *:nth-child(2) { animation-delay: 0.09s; }
.vxh-drawer.is-open .vxh-drawer__nav > *:nth-child(3) { animation-delay: 0.13s; }
.vxh-drawer.is-open .vxh-drawer__nav > *:nth-child(4) { animation-delay: 0.17s; }
.vxh-drawer.is-open .vxh-drawer__nav > *:nth-child(5) { animation-delay: 0.21s; }
.vxh-drawer.is-open .vxh-drawer__nav > *:nth-child(n+6) { animation-delay: 0.25s; }
@keyframes vxh-drawer-item {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.vxh-drawer__panel {
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  padding-left: env(safe-area-inset-left, 0px);
}
@media (prefers-reduced-motion: reduce) {
  .vxh-drawer__nav > * {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   header_style arrangement option (body[data-lo-header-style]) — two-way:
   classic can wear cinematic's glass, cinematic can go back to the solid
   tenant gradient. The extra [data-layout] in each selector outweighs the
   per-layout sheets regardless of load order. Defaults (classic solid,
   cinematic glass) reproduce today's look exactly.
   -------------------------------------------------------------------------- */
body[data-layout][data-lo-header-style="glass"] .vxh {
  background: linear-gradient(180deg, var(--vxl-scrim, rgba(0, 0, 0, 0.55)) 0%, transparent 100%);
}
body[data-layout][data-lo-header-style="glass"] .vxh.is-scrolled::before {
  background: var(--vxl-glass, rgba(18, 18, 18, 0.72));
  -webkit-backdrop-filter: var(--vxl-glass-blur, blur(14px));
  backdrop-filter: var(--vxl-glass-blur, blur(14px));
  border-bottom: 1px solid var(--vxl-line, rgba(255, 255, 255, 0.08));
}
@supports not (backdrop-filter: blur(1px)) {
  /* never a see-through bar: fall back to the tenant's own scroll gradient */
  body[data-layout][data-lo-header-style="glass"] .vxh.is-scrolled::before {
    background: linear-gradient(139deg,
      var(--vod-scroll-header-gradient-left) 39%,
      var(--vod-scroll-header-gradient-right) 100%);
  }
}
body[data-layout][data-lo-header-style="glass"] .vxh__navLink {
  letter-spacing: 0.01em;
}
body[data-layout][data-lo-header-style="solid"] .vxh {
  background: linear-gradient(180deg, var(--vod-header-gradient-top) 10%, var(--vod-header-gradient-bottom));
}
body[data-layout][data-lo-header-style="solid"] .vxh.is-scrolled::before {
  background: linear-gradient(139deg, var(--vod-scroll-header-gradient-left) 39%, var(--vod-scroll-header-gradient-right) 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 0;
}

/* Chrome legibility over artwork: with a transparent (glass) header the
   nav sits on the billboard and on the detail hero, so a bright still can
   wash it out. Cheap on dark artwork, decisive on light. */
@media (min-width: 992px) {
  body[data-layout][data-lo-header-style="glass"] .vxh__logo img {
    filter: drop-shadow(0 1px 3px var(--vxl-scrim-solid));
  }
  body[data-layout][data-lo-header-style="glass"] .vxh__navLink,
  body[data-layout][data-lo-header-style="glass"] .vxh__iconBtn,
  body[data-layout][data-lo-header-style="glass"] .vxh__userName {
    text-shadow: 0 1px 3px var(--vxl-scrim-solid);
  }
}

/* ==========================================================================
   vxn — the sidebar (arrangement: nav_layout="side", desktop).

   The site menu moved out of the bar into a column down the side of every
   page that has the header. Keyed on html.vxn-on, which the sidebar's own
   state script sets — so nothing here applies to a page that renders no
   sidebar (the player, sign-in, a "top" site), whatever <body> is stamped.

     html.vxn-on       the page has a sidebar; #wrapper makes room for it
     html.vxn-closed   it is tucked away and the page takes the full width
     html.vxn-ready    set after first paint; only then do the two animate

   The column sits under the header, on the page's own colour and with no
   edge of its own: it reads as part of the page, the way the bar does.
   Phones never see it — they have the tab bar.
   ========================================================================== */
.vxn {
  display: none;
}
@media (min-width: 992px) {
  html.vxn-on {
    --vxn-w: 232px;
  }
  html.vxn-on.vxn-closed {
    --vxn-w: 0px;
  }
  html.vxn-on .vxn {
    display: block;
    position: fixed;
    top: var(--vxl-header-h, 68px);
    bottom: 0;
    inset-inline-start: 0;
    z-index: 1020; /* over the page (an open card is 100), under the bar */
    width: 232px;
    padding: 8px 12px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--vod-body-bg);
  }
  html.vxn-on.vxn-closed .vxn {
    transform: translateX(-100%);
    visibility: hidden;
  }
  html.vxn-on.vxn-closed body.rtl .vxn {
    transform: translateX(100%);
  }
  html.vxn-on #wrapper {
    padding-inline-start: var(--vxn-w);
  }
  html.vxn-on.vxn-ready .vxn {
    transition: transform var(--vxl-dur-2) var(--vxl-ease),
                visibility 0s linear 0s;
  }
  html.vxn-on.vxn-ready.vxn-closed .vxn {
    transition: transform var(--vxl-dur-2) var(--vxl-ease),
                visibility 0s linear var(--vxl-dur-2);
  }
  /* The footer is pinned to the wrapper's bottom-left corner (absolute,
     left: 0, width: 100% — vodlix.css), so the wrapper's padding does not
     move it and the sidebar sat over its first 232px. It makes the same
     room itself. */
  html.vxn-on .footerHolder {
    left: auto;
    right: auto;
    inset-inline-start: var(--vxn-w);
    width: calc(100% - var(--vxn-w));
  }
  html.vxn-on.vxn-ready #wrapper {
    transition: padding var(--vxl-dur-2) var(--vxl-ease);
  }
  html.vxn-on.vxn-ready .footerHolder {
    transition: inset-inline-start var(--vxl-dur-2) var(--vxl-ease),
                width var(--vxl-dur-2) var(--vxl-ease);
  }

  /* the bar gives up its links and gains the button that tucks the column */
  html.vxn-on .vxh__nav {
    display: none;
  }
  html.vxn-on .vxh__burger {
    display: flex;
    border-radius: 50%;
    transition: background-color var(--vxl-dur-1) var(--vxl-ease);
  }
  html.vxn-on .vxh__burger:hover {
    background-color: color-mix(in srgb, var(--vxl-ink) 10%, transparent);
  }
  /* the glyph is 1em of a button with no text (14px); a control this
     prominent needs the bar's icon size */
  html.vxn-on .vxh__burger .vxm-ico {
    width: 22px;
    height: 22px;
  }
  /* The bar's own 4% gutter put the button 58px in while the column's text
     starts at 24px. Pull the bar's leading edge to the column's, so the
     button's glyph and the links below it share a left edge. */
  html.vxn-on .vxh__bar {
    padding-inline-start: 13px;
  }

  .vxn__nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .vxn__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 0;
    border-radius: var(--vxl-radius-md);
    background: transparent;
    color: var(--vxl-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--vxl-dur-1) var(--vxl-ease);
  }
  .vxn__link:hover,
  .vxn__link:focus-visible {
    background-color: color-mix(in srgb, var(--vxl-ink) 8%, transparent);
    color: var(--vxl-ink);
    text-decoration: none;
  }
  .vxn__link.is-active {
    background-color: color-mix(in srgb, var(--vxl-ink) 12%, transparent);
    font-weight: 600;
  }
  /* a long menu title takes a second line rather than being cut */
  .vxn__label {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .vxn__chev {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--vxl-ink-muted);
    transition: transform var(--vxl-dur-1) var(--vxl-ease);
  }
  .vxn__group.is-open .vxn__chev {
    transform: rotate(180deg);
  }
  .vxn__sub {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding-top: 2px;
  }
  .vxn__group.is-open .vxn__sub {
    display: flex;
  }
  .vxn__link--sub {
    min-height: 36px;
    padding-inline-start: 24px;
    color: var(--vxl-ink-muted);
    font-size: 13px;
  }
  .vxn__rule {
    height: 1px;
    margin: 10px 12px;
    background: var(--vxl-line);
  }
}
@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
  html.vxn-on.vxn-ready .vxn,
  html.vxn-on.vxn-ready.vxn-closed .vxn,
  html.vxn-on.vxn-ready #wrapper,
  html.vxn-on.vxn-ready .footerHolder,
  .vxn__chev {
    transition: none;
  }
}