/* Desktop mega vs mobile drawer — breakpoint matches --sv-nav-desktop-min (1366px). */
[data-sv-desktop-nav] { display: none; }
[data-sv-mobile-nav] { display: none; }

@media (min-width: 1366px) {
  [data-sv-desktop-nav] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sv-space-1);
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
  }

  .sv-mobile-drawer__backdrop {
    display: none !important;
  }

  .sv-desktop-nav__item {
    flex: 0 0 auto;
    position: static;
    list-style: none;
  }

  .sv-desktop-nav__link,
  .sv-desktop-nav__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.65rem 0.62rem;
    border: 0;
    background: transparent;
    color: var(--sv-color-charcoal);
    /* Slightly larger, lighter and more open than the previous
       0.72rem/600 setting, which read dense and technical. */
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.075em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    max-width: none;
  }

  .sv-desktop-nav__trigger-label {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    max-width: none;
  }

  .sv-desktop-nav__trigger::after {
    content: "";
    flex: 0 0 auto;
    width: 0.35rem;
    height: 0.35rem;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
  }

  .sv-desktop-nav__item.is-open > .sv-desktop-nav__trigger,
  .sv-desktop-nav__link:hover,
  .sv-desktop-nav__link:focus-visible {
    color: var(--sv-color-gold);
  }
}

@media (max-width: 1365px) {
  /* Contain off-canvas drawer so it cannot create a horizontal page scroll. */
  html,
  body {
    overflow-x: hidden;
  }

  [data-sv-mobile-nav] {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .sv-site-header__nav {
    /* Fixed drawer only — closed state stays in-viewport (width:0) so it
       never expands layout/scrollWidth the way translateX(100%) does. */
    position: fixed;
    top: var(--drupal-displace-offset-top, 0px);
    right: 0;
    bottom: 0;
    left: auto;
    width: 0;
    max-width: 100vw;
    height: auto;
    max-height: none;
    margin: 0;
    flex: 0 0 auto;
    z-index: var(--sv-z-drawer);
    background: var(--sv-color-surface);
    border-left: 0;
    padding: var(--sv-space-6) 0;
    padding-bottom: calc(var(--sv-space-6) + env(safe-area-inset-bottom, 0px));
    transform: none;
    transition: width var(--sv-duration) var(--sv-ease),
      padding var(--sv-duration) var(--sv-ease),
      border-color var(--sv-duration) var(--sv-ease);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    pointer-events: none;
  }

  html.sv-mobile-open .sv-site-header__nav,
  body.sv-mobile-open .sv-site-header__nav {
    width: min(22rem, 100vw);
    border-left: 1px solid var(--sv-border);
    padding-left: var(--sv-space-5);
    padding-right: var(--sv-space-5);
    visibility: visible;
    pointer-events: auto;
  }
}

/* Shared mobile item styles (visible in drawer). */
.sv-mobile-nav__item {
  list-style: none;
  border-bottom: 1px solid var(--sv-border);
}

.sv-mobile-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sv-space-2);
}

.sv-mobile-nav__link,
.sv-mobile-nav__label,
.sv-mobile-nav__sub-link {
  display: block;
  padding: var(--sv-space-4) 0;
  color: var(--sv-color-charcoal);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.sv-mobile-nav__toggle {
  border: 0;
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
  padding: var(--sv-space-3);
  /* Meet the 44px minimum touch target. */
  min-width: 2.75rem;
  min-height: 2.75rem;
}

.sv-mobile-nav__sub {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--sv-space-3) var(--sv-space-3);
}