/* Custom Styles */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500&family=Chivo:wght@400;600;700&display=swap');

/* ====================================================================
   MOMENTUM NAVBAR SKIN — matches the member-area course themes
   Visual overrides only: no layout, spacing, or behavior changes.
   To restore the original navbar, delete everything below this line.
   ==================================================================== */

/* glass bar surface — normal and sticky states.
   The frosted background lives on a ::before layer, NOT on the header
   itself: backdrop-filter directly on a position:fixed element (combined
   with any transform) makes mobile Safari intermittently stop painting
   the header while scrolling — the "navbar disappears over some sections"
   bug. The pseudo-element pattern avoids it. */
.header,
.header.header--fixed {
  background: transparent !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 0 rgba(21, 22, 27, 0.05), 0 10px 26px rgba(74, 134, 194, 0.1);
}
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.72));
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
}

/* Encore ships `.header--fixed { transform: translateZ(999999px) }` — a
   legacy compositing hack. On mobile it makes the pinned header's layer
   drop out of the frame while scrolling (it re-appears when scrolling
   stops), reading as "the navbar hides on some sections". z-index 9999
   already guarantees stacking, so the transform can go — for everyone,
   on every page, logged in or not. */
.header.header--fixed {
  -webkit-transform: none !important;
  transform: none !important;
}
.header .header__content--desktop,
.header .header__content--mobile {
  background: transparent !important;
}

/* links: ink at rest, steel blue on hover */
.header a,
.header a.link-list__link,
.header a.link-list__link:hover,
.header .dropdown__item a,
.header .user__login a,
.header a.social-icons__icon,
.header .dropdown .dropdown__trigger,
.header .header__block--user .dropdown__trigger {
  color: #15161b !important;
  transition: color 0.18s ease;
}
.header a.link-list__link:hover,
.header .dropdown__item a:hover,
.header .user__login a:hover,
.header a.social-icons__icon:hover,
.header .dropdown .dropdown__trigger:hover {
  color: #29517c !important;
}

/* dropdown panels (account menu): frosted card */
.header .dropdown__menu {
  background: rgba(255, 255, 255, 0.93) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(21, 22, 27, 0.06), 0 18px 40px rgba(21, 22, 27, 0.14);
  overflow: hidden;
}
.header .dropdown__menu .dropdown__item a {
  color: #15161b !important;
}
.header .dropdown__menu .dropdown__item a:hover {
  color: #29517c !important;
}

/* mobile hamburger goes ink on the light glass */
.header .hamburger__slices .hamburger__slice,
.header.header--fixed .hamburger__slice {
  background-color: #15161b !important;
}

/* cart inherits ink */
.header .header__block--cart {
  color: #15161b !important;
}

/* — Momentum nav typography: Chivo caps like the member-area labels — */
.header a.link-list__link,
.header .user__login a,
.header .dropdown .dropdown__trigger,
.header .header__block--user .dropdown__trigger {
  font-family: 'Chivo', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.header .dropdown__menu .dropdown__item a {
  font-family: 'Chivo', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* — vertical alignment of the desktop bar —
     Encore's base stylesheet gives .link-list__link a 5px bottom margin,
     which nudges the nav links ~2px above true center in the flex row.
     The Log In link and Join Now button have no such margin, so they sat
     visibly lower than the menu. Zero it inside the desktop header so
     every item centers on the same axis. — */
.header .header__content--desktop .link-list__link {
  margin-bottom: 0;
}

/* — Log In vertical alignment —
     The .user__login span inherits the header's base type metrics
     (20px font / 32px line-height from the header font-size setting), so
     the 13px "Log In" text inside it rides that larger baseline and sits
     ~3px lower than the menu links, which are block-level with their own
     13px line boxes. Give the span the same metrics as the links so all
     items share one text line. Scoped to desktop; the mobile menu lays
     these out as stacked rows and is unaffected. — */
.header .header__content--desktop .user__login {
  font-size: 13px;
  line-height: 1.6;
}

/* — logo readability on the light glass bar — */
/* the current wordmark PNG is white; render it as ink */
.header .logo .logo__image {
  filter: brightness(0) opacity(0.93);
}
/* if the logo is ever switched to text mode, match the bar */
.header .logo .logo__text {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: .02em;
  color: #15161b !important;
}

/* — Join Now CTA button in the navbar (ink pill, exempt from the ink-link rule) — */
.header .header__block--cta .btn {
  color: #fff !important;
  font-family: 'Chivo', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 12px 22px;
  transition: transform .15s ease, background-color .15s ease;
}
.header .header__block--cta .btn:hover {
  color: #fff !important;
  background-color: #2A2B33 !important;
  transform: translateY(-1px);
}

/* — keep Encore's native sticky-header mechanism (fixed + main padding),
     but stop animating the mode switch: transition only the paint
     properties, never position/layout/backdrop. This removes the visible
     flicker when the header toggles fixed at scroll start. — */
.header {
  transition: box-shadow .3s ease, background .3s ease !important;
}

/* — dropdown stacking at rest —
     Encore only gives the header position + z-index once you scroll
     (.header--fixed). At scroll 0 the header is an unpositioned block,
     so the open account menu can paint behind later page sections.
     Give the resting header the same stacking as the fixed one.
     The :not() guard means Encore's own fixed/overlay positioning is
     never touched — this rule simply stops applying once you scroll. — */
.header {
  z-index: 9999;
}
.header:not(.header--fixed):not(.header--overlay) {
  position: relative;
}

/* — member My Library shortcut —
     header.liquid gives logged-in members a My Library link at the top of
     the mobile menu and beside the avatar on desktop. The account dropdown
     lists its own Library item in both contexts (Encore expands it inline
     on mobile), so hide that one everywhere to avoid the duplicate —
     Settings and Logout remain in the dropdown. — */
.header .dropdown__item--library {
  display: none;
}