/* =====================================================================
   kc-nav.css - the site-wide mega navigation (the approved "mega refined"
   design, option 11 of /nav-preview/, flipped live 2026-07-21).

   This file owns every style the shared header needs: the label+caret
   dropdown, the News mega panel, the four item megas (Music / Posters /
   Shop / Calm Coaches), the featured cards (crown poster, coach photo,
   live song tile), the condensed scrolled bar layout, and the RTL mirror
   rules for ar / fa / ur.

   The first level (.wt-subnav__dd trigger + .wt-subnav__menu surface,
   hover/click open, positioning) is cdo-watchtower.css + cdo-watchtower.js.
   Behaviour for everything here lives in /assets/js/kc-nav.js.

   Colours are the shipped site pairs only: ink --wt-ink (11.8:1 light /
   13.6:1 dark), hover fill --wt-chip-bg, accent --wt-accent, focus ring
   --kc-focus. No new colour pair enters the system, so contrast holds in
   BOTH themes. nav-preview.css used to carry these rules; the preview
   pages now load this file first and keep only option-specific styles.
   ===================================================================== */

/* ---------- the label is a real link; only the caret toggles ---------- */
.np-dd { display: inline-flex; align-items: center; gap: 3px; }
.np-dd__label { color: inherit; text-decoration: none; }
.np-dd:hover .np-dd__label, .np-dd__label:hover { text-decoration: underline; }
.np-dd__toggle { padding: 2px; line-height: 0; }
.np-dd__toggle:focus-visible { outline: 3px solid var(--kc-focus, var(--wt-accent)); outline-offset: 2px; border-radius: 4px; }
.np-dd .wt-subnav__caret { width: 12px; height: 12px; opacity: .7; }

/* ---------- panel base + shared link row ---------- */
.np-menu { min-width: 236px; padding: 8px; }
.np-mega__col { min-width: 0; }
.np-mega__col a {
  display: block; padding: 9px 12px; border-radius: 7px;
  font: 500 14px var(--wt-font-ui); color: var(--wt-ink);
  text-decoration: none; white-space: normal; letter-spacing: normal;
}
.np-mega__col a:hover { background: var(--wt-chip-bg); }
.np-mega__col a:focus-visible { outline: 3px solid var(--kc-focus, var(--wt-accent)); outline-offset: -2px; }
.np-mega__hd {
  display: block; padding: 6px 12px 8px;
  font: 700 11px var(--wt-font-ui); letter-spacing: .09em; text-transform: uppercase;
  color: var(--wt-accent); text-decoration: none;
}
a.np-mega__hd:hover { text-decoration: underline; }
.np-mega__hd--label { cursor: default; }

/* ---------- the daily-context header (tells people it rotates) ---------- */
.np-fhead { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.np-fhead__t {
  font: 700 11px var(--wt-font-ui); letter-spacing: .09em; text-transform: uppercase;
  color: var(--wt-ink-quiet, var(--wt-ink-soft));
}
.np-fhead__tag {
  font: 700 9.5px var(--wt-font-ui); letter-spacing: .06em; text-transform: uppercase;
  color: var(--wt-accent); background: var(--wt-chip-bg);
  border: 1px solid var(--wt-rule); border-radius: 999px; padding: 2px 9px;
}

/* ---------- a featured story card ---------- */
.np-menu a.np-fc { display: block; text-decoration: none; border-radius: 12px; overflow: hidden; }
.np-fc__img {
  display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 12px;
  background: var(--wt-chip-bg) center / cover no-repeat;
}
.np-fc__body { display: block; padding: 10px 2px 2px; }
.np-menu a.np-fc .np-fc__kicker {
  display: block; white-space: normal;
  font: 700 10px var(--wt-font-ui); letter-spacing: .08em; text-transform: uppercase;
  color: var(--wt-accent); margin-bottom: 3px;
}
.np-menu a.np-fc .np-fc__h {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  white-space: normal; font: 700 14px/1.32 var(--wt-font-ui); color: var(--wt-ink);
}
.np-menu a.np-fc .np-fc__dek {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  white-space: normal; font: 400 12.5px/1.45 var(--wt-font-ui);
  color: var(--wt-ink-quiet, var(--wt-ink-soft)); margin-top: 5px;
}
.np-fc:hover .np-fc__h { color: var(--wt-accent); }
.np-fc:hover .np-fc__img { filter: brightness(1.04); }
.np-fc:focus-visible { outline: 3px solid var(--kc-focus, var(--wt-accent)); outline-offset: 3px; }
.np-fc__img, .np-fc__h { transition: filter 160ms ease, color 160ms ease; }

/* =====================================================================
   The News mega ("mega refined"): flat grid, one restrained daily story,
   Hard Times marked as help, quiet nonprofit line + de-emphasized ask.
   ===================================================================== */
.np-menu--mr { min-width: 0; width: min(1040px, calc(100vw - 48px)); padding: 20px; }
.np-mr__grid { display: grid; grid-template-columns: repeat(4, 1fr) 280px; gap: 4px 18px; align-items: start; }
.np-mr__feat { border-left: 1px solid var(--wt-rule); padding-left: 22px; }
.np-menu--mr .np-fc--wide .np-fc__img { aspect-ratio: 16 / 9; }

/* Hard Times marked as help: quiet but distinct, first in its column. */
.np-menu a.np-mr__help {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-weight: 700; color: var(--wt-ink);
}
.np-mr__helpc {
  font: 700 9px var(--wt-font-ui); letter-spacing: .06em; text-transform: uppercase;
  color: var(--wt-accent); background: var(--wt-chip-bg);
  border: 1px solid var(--wt-rule); border-radius: 999px; padding: 2px 7px; white-space: nowrap;
}
.np-mr__help:hover .np-mr__helpc { border-color: var(--wt-accent); }

/* the quiet nonprofit footer, kept out of the crisis reading path */
.np-mr__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--wt-rule);
}
.np-mr__id { margin: 0; white-space: normal; font: 400 12.5px/1.45 var(--wt-font-ui); color: var(--wt-ink-quiet, var(--wt-ink-soft)); max-width: 560px; }
.np-mr__links { display: inline-flex; align-items: center; gap: 20px; white-space: nowrap; }
.np-menu a.np-mr__all { white-space: nowrap; font: 600 13px var(--wt-font-ui); color: var(--wt-accent); text-decoration: none; }
.np-mr__all:hover { text-decoration: underline; }
.np-menu a.np-mr__give { white-space: nowrap; font: 600 13px var(--wt-font-ui); color: var(--wt-ink-quiet, var(--wt-ink-soft)); text-decoration: none; }
.np-mr__give:hover { color: var(--wt-accent); text-decoration: underline; }
/* the arrow is CSS so it can mirror under RTL (markup carries no glyph) */
.np-mr__all::after { content: " \2192"; }
[dir="rtl"] .np-mr__all::after { content: " \2190"; }

@media (max-width: 1040px) {
  .np-mr__grid { grid-template-columns: repeat(2, 1fr); }
  .np-mr__feat { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--wt-rule); padding: 16px 0 0; margin-top: 8px; }
}
@media (max-width: 700px) {
  .np-mr__grid { grid-template-columns: 1fr; }
  .np-mr__foot { flex-direction: column; align-items: flex-start; }
  .np-menu--mr { width: calc(100vw - 32px); }
}

/* ============================================================
   Condensed (scrolled) bar: icon cluster left, sections centered,
   actions right. ONE button system across every control.
   ============================================================ */
.wt-mini .wt-mini__inner { display: flex; align-items: center; gap: 12px; }
.wt-mini .wt-mini__lead { flex: 0 0 auto !important; order: 0 !important; display: flex; align-items: center; gap: 14px; min-width: 0; }
.wt-mini .wt-mini__lead .wt-mini__logo { margin: 0 !important; order: 0 !important; }
.wt-mini .wt-mini__tools { display: inline-flex; align-items: center; gap: 8px; order: 0 !important; }
.wt-mini .wt-mini__subnav { flex: 0 0 auto !important; order: 0 !important; margin: 0 auto !important; }
.wt-mini .wt-mini__actions { flex: 0 0 auto !important; order: 0 !important; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

/* Desktop lists every section inline, so the hamburger is redundant there. */
.wt-mini__menu-btn { display: none; }
@media (max-width: 820px) { .wt-mini__menu-btn { display: inline-flex; } }

/* ONE button system: theme, language, search, music note, sign in/up. */
.wt-mini__tools .wt-mini__toolbtn,
.wt-mini__tools .kc-np-note,
.wt-mini__lang .kc-lang__btn,
.wt-mini .kc-acct__signin,
.wt-mini .kc-acct__signup {
  border: 1px solid var(--wt-rule);
  background: transparent;
  border-radius: 999px;
  color: var(--wt-ink);
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.wt-mini__tools .wt-mini__toolbtn,
.wt-mini__tools .kc-np-note {
  width: 36px; height: 36px; min-width: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.wt-mini__tools .wt-mini__toolbtn svg,
.wt-mini__tools .wt-mini__batmode svg { width: 18px; height: 18px; }
.wt-mini__lang .kc-lang__btn,
.wt-mini .kc-acct__signin,
.wt-mini .kc-acct__signup {
  height: 36px; padding: 0 15px; gap: 7px;
  font: 700 13px var(--wt-font-ui);
  display: inline-flex; align-items: center;
}
.wt-mini__tools .wt-mini__toolbtn:hover,
.wt-mini__tools .kc-np-note:hover,
.wt-mini__lang .kc-lang__btn:hover,
.wt-mini .kc-acct__signin:hover,
.wt-mini .kc-acct__signup:hover {
  border-color: var(--wt-accent);
  background: var(--wt-chip-bg);
  color: var(--wt-accent);
  opacity: 1;
}
.kc-lang__btn { border-color: var(--wt-rule); }
@media (max-width: 820px) { .wt-mini__lang { display: none; } }

/* The language menu sits in the LEFT tools cluster, so it opens rightward
   (or it runs off the viewport). Mirrored for RTL below. */
.wt-mini__lang .kc-lang__menu,
.kc-navleft .kc-lang__menu { left: 0; right: auto; }

/* Un-scrolled masthead: language pill matches the other 34px controls. */
.wt-masthead .kc-lang__btn { height: 34px; padding: 0 12px; }

/* ============================================================
   Item megas: Music / Posters / Shop / Calm Coaches.
   ============================================================ */
.np-menu--im { width: min(820px, calc(100vw - 48px)); padding: 20px; }
.np-im__grid { display: flex; gap: 8px 26px; align-items: stretch; }
.np-im__grid .np-mega__col { flex: 1 1 0; min-width: 0; }
.np-im__feat { flex: 0 0 260px; min-width: 0; border-left: 1px solid var(--wt-rule); padding-left: 22px; }

.np-menu a.np-fc--im { display: flex; flex-direction: column; overflow: visible; border-radius: 0; }
.np-fc--im .np-fc__body { display: block; padding: 12px 2px 2px; }
.np-menu a.np-fc--im .np-ic__title { display: block; white-space: normal; font: 700 14px/1.3 var(--wt-font-ui); color: var(--wt-ink); }
.np-menu a.np-fc--im .np-ic__spec { display: block; white-space: normal; font: 700 12px var(--wt-font-ui); color: var(--wt-accent); margin: 3px 0 1px; }
.np-menu a.np-fc--im .np-ic__sub {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  white-space: normal; font: 400 12px/1.42 var(--wt-font-ui);
  color: var(--wt-ink-quiet, var(--wt-ink-soft)); margin-top: 3px;
}
.np-fc--im:hover .np-ic__title { color: var(--wt-accent); }

/* the crown poster, drawn in CSS. Theme colours ride on --np-pd / --np-pl. */
.np-cp {
  --np-bg: var(--np-pd); --np-ink: #ffffff;
  position: relative; box-sizing: border-box; width: 100%; max-width: 232px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 11% 8% 13%; border-radius: 10px; overflow: hidden;
  background: var(--np-bg); color: var(--np-ink);
  container-type: inline-size;
}
html[data-mode="batman"] .np-cp { --np-bg: var(--np-pl); --np-ink: #111111; }
.np-cp--square { aspect-ratio: 1 / 1; }
.np-cp--poster, .np-cp--framed { aspect-ratio: 3 / 4; }
.np-cp--framed { border: 9px solid #ffffff; box-shadow: 0 10px 26px rgba(20, 26, 22, .30); }
html[data-mode="batman"] .np-cp--framed { border-color: #e7e2d5; box-shadow: 0 10px 26px rgba(0, 0, 0, .5); }
.np-cp__crown {
  width: 40px; height: 32px; margin-bottom: 9px; background: currentColor;
  -webkit-mask: url(/assets/logos/keepcalm-crown.svg) center / contain no-repeat;
  mask: url(/assets/logos/keepcalm-crown.svg) center / contain no-repeat;
}
.np-cp__brand, .np-cp__word { font: 800 clamp(20px, 13cqw, 30px)/1.04 var(--wt-font-ui); letter-spacing: .04em; }
.np-cp__word { text-transform: uppercase; overflow-wrap: anywhere; }
.np-cp__and { font: 700 10px/1 var(--wt-font-ui); letter-spacing: .2em; text-transform: uppercase; margin: 5px 0 6px; opacity: .9; }
.np-cp__url { position: absolute; left: 0; right: 0; bottom: 6%; font: 600 9px var(--wt-font-ui); letter-spacing: .04em; opacity: .85; }
.np-fc--im:hover .np-cp { filter: brightness(1.03); }
.np-cp, .np-coach__img, .np-ic__title { transition: filter 160ms ease, color 160ms ease; }

/* the coach portrait: a real photo, cropped from the top so the face keeps */
.np-coach__img {
  display: block; width: 100%; max-width: 232px; aspect-ratio: 3 / 4; border-radius: 10px;
  background: var(--wt-chip-bg) center top / cover no-repeat;
}
.np-fc--im:hover .np-coach__img { filter: brightness(1.04); }

/* Live-reused real components (song tile / poster wall card) fill the slot. */
.np-live { display: block; max-width: 100%; min-width: 0; }
.np-live .am-card, .np-live .kc-pcard { max-width: 100%; margin: 0; }

.np-live--music .mus-card { background: none; border: 0; padding: 0; box-shadow: none; gap: 6px; }
.np-live--music .mus-card:hover { transform: none; border-color: transparent; box-shadow: none; }
.np-live--music .mus-card__row { display: none; }

.np-live--music .am-card__art, .np-live--music .mus-card__art { padding: 0; border: 0; overflow: hidden; }
.np-live--music .mus-hoverposter, .np-live--music .mus-hoverposter__link { position: absolute; inset: 0; width: 100%; height: 100%; }
.np-live--music .mus-hovervid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.np-live--music .mus-hoverposter__scrim { background: rgba(0, 0, 0, 0.12); }
html[data-mode="batman"] .np-live--music .mus-hoverposter__scrim,
html[data-theme="dark"] .np-live--music .mus-hoverposter__scrim { background: rgba(255, 255, 255, 0.26); }

.np-live--poster { width: 100%; }
.np-live--poster .kc-pcard, .np-live--poster .kc-pcard__poster { width: 100%; max-width: 100%; min-width: 0; }
.np-live--poster .kc-flip, .np-live--poster .kc-flip--gallery { max-width: 100%; }

/* the real /music/ song tile (v17 .am-card), no heart / "+" / play-count */
.np-live--music .am-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.np-live--music .am-card__art { position: relative; }
.np-live--music .am-card__play {
  position: absolute; right: 8px; bottom: 8px; z-index: 4;
  width: 42px; height: 42px; opacity: 0; transform: scale(0.85);
  transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease;
}
.np-live--music .am-card:hover .am-card__play,
.np-live--music .am-card:focus-within .am-card__play,
.np-live--music .am-card.is-playing .am-card__play { opacity: 1; transform: none; }
.np-live--music .am-card__more {
  position: absolute; top: 8px; right: 8px; z-index: 4;
  width: 42px; height: 42px; opacity: 0; transform: scale(0.85);
  transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease;
}
.np-live--music .am-card:hover .am-card__more,
.np-live--music .am-card:focus-within .am-card__more { opacity: 1; transform: none; }
.np-live--music .am-card__more:focus-visible { opacity: 1; }
.np-live--music .am-card__art.is-menu-open .am-card__play,
.np-live--music .am-card__art.is-menu-open .am-card__more { opacity: 1; transform: none; }
.np-live--music .am-card__t { font-size: 14px; font-weight: 600; margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-live--music .am-card.is-current .am-card__t { color: var(--mus-accent); }
.np-live--music .am-card__c { font-size: 12.5px; color: var(--mus-ink-quiet); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: flex-start; padding: 2px 0; }
.np-live--music .am-card__c:hover { color: var(--mus-ink); text-decoration: underline; }
@media (hover: none) {
  .np-live--music .am-card__play, .np-live--music .am-card__more { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .np-live--music .am-card__play, .np-live--music .am-card__more { transition: background 0.16s ease, color 0.16s ease; }
  .np-fc__img, .np-fc__h, .np-cp, .np-coach__img, .np-ic__title { transition: none; }
}

@media (max-width: 860px) {
  .np-im__grid { flex-wrap: wrap; }
  .np-im__feat { flex-basis: 100%; border-left: 0; border-top: 1px solid var(--wt-rule); padding: 16px 0 0; margin-top: 8px; }
  .np-menu--im { width: calc(100vw - 32px); }
}

/* Shop featured card wired live: whole product contained on white. */
.np-shop__img { aspect-ratio: 1 / 1; background-color: #fff; background-size: contain; background-position: center; }

/* ============================================================
   RTL (ar / fa / ur): mirror the panels, rails, and drawer.
   The mega panels are centered under their trigger (direction
   neutral); kc-nav.js clamps them to the viewport on open, which
   covers both edges in both directions.
   ============================================================ */
[dir="rtl"] .np-mr__feat { border-left: 0; border-right: 1px solid var(--wt-rule); padding-left: 0; padding-right: 22px; }
[dir="rtl"] .np-im__feat { border-left: 0; border-right: 1px solid var(--wt-rule); padding-left: 0; padding-right: 22px; }
@media (max-width: 1040px) {
  [dir="rtl"] .np-mr__feat { border-right: 0; padding-right: 0; }
}
@media (max-width: 860px) {
  [dir="rtl"] .np-im__feat { border-right: 0; padding-right: 0; }
}
/* language menu opens leftward from the right-side tools cluster in RTL */
[dir="rtl"] .wt-mini__lang .kc-lang__menu,
[dir="rtl"] .kc-navleft .kc-lang__menu { left: auto; right: 0; }
/* the mobile drawer slides in from the right in RTL */
[dir="rtl"] .wt-mini__drawer-panel { left: auto; right: 0; box-shadow: -2px 0 20px rgba(0, 0, 0, 0.25); }