/* Site navigation (#mainNav). Loaded after the compiled theme in styles.css
   and overrides only the bar. Tokens mirror the home hero's navy and the
   theme's primary, so the bar belongs to the page under it.

   Collapses at xl, not lg: seven links and a call to action need ~860px of
   the 864px a lg container offers, and that margin is exactly how the labels
   used to wrap. Between 992 and 1199px the "Menu" toggler is the honest
   answer. */

:root {
  --dst-nav-h: 64px;
  --dst-navy: #0d1b2a;
  --dst-ink: #1b263b;
  --dst-muted: #5c6b7d;
  --dst-primary: #2937f0;
  --dst-primary-ink: #1e2ac0;
  --dst-hair: rgba(13, 27, 42, 0.08);
}

#mainNav {
  padding: 0;
  background: #fff;
  border-bottom: 1px solid var(--dst-hair);
  box-shadow: none;
  transition: box-shadow 0.2s ease;
}
/* A shadow only once the page has moved under it; at rest the bar sits flat
   on the hero instead of casting on it. */
#mainNav.is-scrolled {
  box-shadow: 0 8px 24px rgba(13, 27, 42, 0.08);
}
#mainNav > .container {
  min-height: var(--dst-nav-h);
}

/* --- brand ------------------------------------------------------------- */
#mainNav .navbar-brand {
  display: flex;
  align-items: center;
  padding: 0;
  margin-right: 2rem;
}
#mainNav .navbar-brand img {
  display: block;
  height: 34px;
  width: auto;
}

/* --- links --------------------------------------------------------------- */
#mainNav .navbar-nav {
  align-items: center;
  gap: 0 1.75rem;
}
@media (min-width: 1400px) {
  #mainNav .navbar-nav {
    gap: 0 2.1rem;
  }
}
#mainNav .navbar-nav .nav-item .nav-link {
  position: relative;
  padding: 0.5rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--dst-ink);
  white-space: nowrap;
  transition: color 0.15s ease;
}
#mainNav .navbar-nav .nav-item .nav-link:hover,
#mainNav .navbar-nav .nav-item .nav-link:focus-visible {
  color: var(--dst-primary);
}
#mainNav .navbar-nav .nav-item .nav-link.active {
  color: var(--dst-primary);
}
#mainNav .navbar-nav .nav-item .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--dst-primary);
}
#mainNav a:focus-visible,
#mainNav button:focus-visible {
  outline: 2px solid var(--dst-primary);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --- the one call to action ---------------------------------------------- */
.dst-cta {
  margin-left: 0.5rem;
}
.dst-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 40px;
  padding: 0 1rem 0 1.15rem;
  border: 0;
  border-radius: 999px;
  background: var(--dst-primary);
  color: #fff;
  font-family: var(--bs-body-font-family);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 6px 16px rgba(41, 55, 240, 0.22);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.dst-btn:hover {
  background: var(--dst-primary-ink);
  color: #fff;
}
.dst-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 3px 8px rgba(41, 55, 240, 0.2);
}
.dst-btn.dropdown-toggle::after {
  display: none;
}
.dst-btn svg {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform 0.2s ease;
}
.dst-btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.dst-menu {
  min-width: 300px;
  padding: 0.5rem;
  margin-top: 0.6rem !important;
  border: 1px solid var(--dst-hair);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(13, 27, 42, 0.14);
}
.dst-menu-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  white-space: normal;
  color: inherit;
}
.dst-menu-item:hover,
.dst-menu-item:focus {
  background: rgba(41, 55, 240, 0.07);
  color: inherit;
}
.dst-menu-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dst-navy);
}
.dst-menu-item:hover .dst-menu-name,
.dst-menu-item:focus .dst-menu-name {
  color: var(--dst-primary);
}
.dst-menu-where {
  font-size: 0.8rem;
  color: var(--dst-muted);
}

/* --- toggler ------------------------------------------------------------- */
/* No `display` here: an id selector outranks the theme's
   `.navbar-expand-xl .navbar-toggler { display: none }`, and setting it
   globally put the toggler back on desktop. The flex layout it needs is
   applied below the breakpoint, further down. */
#mainNav .navbar-toggler {
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(13, 27, 42, 0.16);
  border-radius: 999px;
  color: var(--dst-ink);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
}
#mainNav .navbar-toggler:hover {
  border-color: var(--dst-primary);
  color: var(--dst-primary);
}
#mainNav .navbar-toggler:focus {
  box-shadow: none;
}
#mainNav .navbar-toggler .dst-toggler-close,
#mainNav .navbar-toggler[aria-expanded="true"] .dst-toggler-open {
  display: none;
}
#mainNav .navbar-toggler[aria-expanded="true"] .dst-toggler-close {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* --- collapsed (below xl) ------------------------------------------------- */
@media (max-width: 1199.98px) {
  #mainNav .navbar-toggler {
    display: inline-flex;
  }
  #mainNav .navbar-collapse {
    max-height: calc(100vh - var(--dst-nav-h));
    overflow-y: auto;
  }
  #mainNav .navbar-nav {
    align-items: stretch;
    gap: 0;
    padding: 0.25rem 0 1rem;
  }
  #mainNav .navbar-nav .nav-item .nav-link {
    padding: 0.85rem 0;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--dst-hair);
  }
  #mainNav .navbar-nav .nav-item .nav-link.active::after {
    display: none;
  }
  .dst-mobile-merch {
    padding-top: 1.1rem;
  }
  .dst-eyebrow {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dst-muted);
  }
  .dst-mobile-event {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--dst-hair);
    border-radius: 12px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease;
  }
  .dst-mobile-event:hover,
  .dst-mobile-event:focus-visible {
    border-color: rgba(41, 55, 240, 0.4);
    color: inherit;
  }
  .dst-mobile-event .dst-menu-name {
    font-size: 1rem;
  }
  .dst-mobile-event svg {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--dst-primary);
  }
}