/* Nav mega menus (navmega.js): About, Timeline, Archive, Programs. Loaded on every page after site.css or home.css. */

/* each top link + its arrow */
.nav__item { position: relative; display: inline-flex; align-items: center; gap: 2px; pointer-events: auto; }
.nav__drop { display: inline-grid; place-items: center; width: 22px; height: 26px; margin: 0 -6px 0 0; padding: 0; background: none; border: 0; color: #fff; cursor: pointer; border-radius: 3px; }
.nav__drop svg { width: 10px; height: 7px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s cubic-bezier(.23, 1, .32, 1); }
.nav__drop[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__drop:hover { color: var(--gold); }
.nav__drop:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hhl-nav-styled .nav__links a.is-section::after { transform: scaleX(1); }

/* the logo hangs below the nav bar, so it stays above the panel */
.nav.is-mega .nav__brand { z-index: 2; }

/* the panel: a solid sheet under the nav; the Timeline's six eras are strung on the line, the others are picture cards */
.mega { position: fixed; left: 0; right: 0; top: var(--mega-top, 84px); z-index: 1; pointer-events: auto;
  background: #0b0a08; border-top: 1px solid rgb(241 233 216 / .1); border-bottom: 1px solid rgb(241 233 216 / .14);
  box-shadow: 0 40px 80px rgb(0 0 0 / .6);
  opacity: 0; transform: translateY(-8px); transition: opacity .2s cubic-bezier(.23, 1, .32, 1), transform .25s cubic-bezier(.23, 1, .32, 1); }
.mega.is-open { opacity: 1; transform: none; }
.mega[hidden] { display: none; }
.nav.is-mega::after { opacity: 1; }
.mega__inner { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 4.2fr); gap: clamp(24px, 3vw, 56px); padding: clamp(26px, 2.6vw, 38px) var(--gutter, 48px) clamp(30px, 3vw, 44px); }

/* About, Archive, Programs: three or four cards, kept to a comfortable size */
.mega__inner--few { grid-template-columns: minmax(220px, 1fr) minmax(0, 3fr); }
.mega__inner--few .mega__eras { max-width: calc(var(--n) * 290px); }
.mega__inner--few .mega__dec { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .01em; }

.mega__kicker { margin: 0 0 10px; font: 500 11.5px/1.3 var(--f-label); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.mega__title { margin: 0 0 22px; font: 800 clamp(1.15rem, 1.5vw, 1.45rem)/1.18 var(--f-label); text-transform: uppercase; color: var(--cream); text-wrap: balance; }
.mega__all, .mega__next { display: block; width: fit-content; margin-top: 10px; font: 500 12px/1.3 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--cream); text-decoration: none; }
.mega__all { padding: 11px 18px 10px; background: var(--gold); color: #000; }
.mega__all:hover { background: var(--gold-bright, #f5d48a); }
.mega__next { margin-top: 16px; color: var(--cream-soft); }
.mega__next:hover, .mega__next[aria-current="page"] { color: var(--gold); }
.mega__all:focus-visible, .mega__next:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.mega__eras { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px); }
/* Timeline: the line runs through the stops, one colour per era */
.mega__eras--line::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--rose) 0 16.6%, var(--mustard) 16.6% 33.3%, var(--teal) 33.3% 50%, var(--red) 50% 66.6%, var(--blue) 66.6% 83.3%, var(--olive) 83.3%); }
.mega__era a { position: relative; display: flex; flex-direction: column; color: var(--cream); text-decoration: none; }
.mega__eras--line .mega__era a { padding-top: 30px; }
.mega__eras--line .mega__era a[aria-current="page"]::after { top: 38px; }
.mega__stop { position: absolute; top: 0; left: 0; width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; background: #fff; border: 4px solid #000; box-shadow: 0 0 0 3px var(--c); transition: transform .2s cubic-bezier(.23, 1, .32, 1); }
.mega__photo { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #1a1916; }
.mega__photo img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .25s, transform .5s cubic-bezier(.23, 1, .32, 1); }
.mega__photo::after { content: ""; position: absolute; inset: 0; background: var(--c); mix-blend-mode: color; opacity: .45; transition: opacity .25s; }
.mega__dec { margin-top: 12px; font: 800 1.35rem/1 var(--f-label); letter-spacing: -.005em; color: var(--cream); font-variant-numeric: tabular-nums; }
.mega__name { margin-top: 6px; font: 500 11.5px/1.3 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--c); filter: brightness(1.45); }
.mega__blurb { margin-top: 8px; font: 400 .82rem/1.45 var(--f-body); color: var(--cream-soft); }
.mega__era a:hover .mega__photo img, .mega__era a:focus-visible .mega__photo img { opacity: 1; transform: scale(1.04); }
.mega__era a:hover .mega__photo::after, .mega__era a:focus-visible .mega__photo::after { opacity: .25; }
.mega__era a:hover .mega__stop, .mega__era a:focus-visible .mega__stop { transform: scale(1.2); }
.mega__era a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.mega__era a[aria-current="page"] .mega__stop { background: var(--c); border-color: #fff; }
.mega__era a[aria-current="page"]::after { content: "You're here"; position: absolute; top: 8px; right: 8px; padding: 4px 7px 3px; background: var(--cream); color: #000; font: 800 9.5px/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 1180px) {
  .mega__inner { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .mega__intro { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
  .mega__title { margin: 0; flex: 1 1 280px; }
  .mega__kicker { flex-basis: 100%; margin: 0; }
  .mega__all, .mega__next { margin-top: 0; }
  .mega__eras--line .mega__blurb { display: none; }
}
@media (max-width: 760px) { .mega { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .mega, .mega__photo img, .mega__stop, .nav__drop svg { transition: none; } }

/* phones: each panel's links under its top link in the open menu */
.nav__sub[hidden] { display: none; }
@media (max-width: 760px) {
  .nav__item { display: flex; align-items: center; justify-content: space-between; }
  .nav__item > a { flex: 1; }
  .nav__drop { width: 44px; height: 44px; margin: 0; }
  .nav__drop svg { width: 14px; height: 9px; }
  .nav__sub { display: grid; padding: 0 0 12px 10px; }
  .nav .nav__links .nav__sub a.nav__subera { position: relative; display: block; padding: 10px 0 10px 22px !important; border-bottom: 0 !important; font: 500 14px/1.2 var(--f-label) !important; letter-spacing: .06em !important; text-transform: none !important; color: var(--cream) !important; }
  .nav .nav__links .nav__sub a.nav__subera::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--c, var(--gold)); border: 0; box-shadow: none; box-sizing: border-box; }
  .nav .nav__links .nav__sub a.nav__subera::after { display: none; }
  .nav .nav__links .nav__sub a.nav__subera b { font-weight: 800; margin-right: 6px; }
  .nav .nav__links .nav__sub a.nav__subera[aria-current="page"] { color: var(--gold) !important; }
  .nav .nav__links .nav__sub a.nav__subera--all { color: var(--cream-soft) !important; text-transform: uppercase !important; font-size: 12px !important; letter-spacing: .14em !important; }
  .nav .nav__links .nav__sub a.nav__subera--all::before { background: none; border: 1px solid var(--cream-soft); }
}

.drop__ext { margin-left: 6px; font-size: 13px; color: inherit; opacity: .7; }

/* small laptops and tablets in landscape (761–940px): tighten the row so six links and their arrows clear Donate */
@media (min-width: 761px) and (max-width: 940px) {
  .nav .nav__links { gap: 12px; }
  .hhl-nav-styled .nav .nav__links a:not(.nav__donate) { font-size: 11.5px; letter-spacing: .09em; }
  .nav__drop { width: 18px; margin-right: -4px; }
}

/* Zeffy's donation pop-up: Zeffy sets it 5% / 10% in from the edges, which fills the screen.
   Size it like a dialog instead (it's a plain element in our page, styled inline, hence !important). */
body > div:has(> iframe[src*="zeffy.com"][src*="modal=true"]) {
  inset: 50% auto auto 50% !important; transform: translate(-50%, -50%);
  width: min(460px, calc(100vw - 24px)) !important; height: min(580px, calc(100dvh - 32px)) !important;
  border-radius: 6px; overflow: hidden; box-shadow: 0 30px 80px rgb(0 0 0 / .6);
}