/* ==========================================================================
   PROPOSED NAV: TRAINING CENTER — shared by proposed-nav-training-center.html
   and every mock-*.html page, so all of them render the exact same header.
   Markup + behavior live in tc-nav.js; edit nav labels there (NAV_DATA).

   Same interactive layout/mechanics as the main missionkidscac.org nav
   facsimile (desktop mega-menu dropdown + mobile full-screen menu),
   re-skinned with the Training Center sub-brand's content and colors
   (docs/brand/BRAND.md).

   Context variants:
     .site-header-wrap            — bordered demo card (nav wireframe page)
     .site-header-wrap--page      — full-bleed header at the top of a mock's
                                    main.page (cancels its 28px/32px padding)
   ========================================================================== */

:root {
  --safe-harbor: #276ea9;
  --safe-harbor-dark: #1f5686;
  --twilight: #143c64;
  --midnight: #090420;
  --midnight-soft: rgba(255,255,255,0.14);
  --sky: #35caff;
  --slate: #3D4759;
  --frost: #D6E3EC;
  --off-white: #F7FAFC;
}

.site-header-wrap {
  --tc-nav-pad-x: 20px;
  max-width: 1200px; margin: 0 auto 40px; border: 1px solid var(--frost); border-radius: 10px;
  box-shadow: 0 2px 8px rgba(9,4,32,0.08); position: relative;
}
/* Resets for pages that don't already have them; :where() keeps them from
   outranking the component rules below */
:where(.site-header-wrap) a { text-decoration: none; }
:where(.site-header-wrap) button { font: inherit; }

.site-header-wrap--page {
  --tc-nav-pad-x: 32px;
  max-width: none; margin: -28px -32px 28px; border: none; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid var(--frost);
}
.site-header-wrap--page .utility-bar,
.site-header-wrap--page .mobile-overlay { border-radius: 0; }

/* Utility bar */
.utility-bar {
  background: var(--safe-harbor); display: flex; align-items: center;
  padding: 8px var(--tc-nav-pad-x); border-radius: 10px 10px 0 0;
}
.utility-bar a { color: #fff; font-size: 13px; font-weight: 700; }
.utility-bar a:hover { text-decoration: underline; }

/* Main bar */
.main-bar {
  background: #fff; display: flex; align-items: center; justify-content: flex-start;
  padding: 14px var(--tc-nav-pad-x); gap: 16px; position: relative; z-index: 20;
}
.logo { display: flex; align-items: center; }
.logo-img { display: block; height: 40px; width: auto; }
.logo--on-dark .logo-img { height: 30px; }

/* Desktop nav */
.desktop-nav { display: flex; align-items: center; gap: 18px; margin-left: 36px; }
.nav-trigger {
  background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 5px;
  font-family: "degular", Georgia, serif; font-weight: 700; font-size: 15px; color: var(--twilight); padding: 6px 0;
  white-space: nowrap; flex-shrink: 0;
}
.nav-trigger .caret { font-size: 10px; transition: transform 0.15s; }
.nav-trigger:hover, .nav-trigger.active { color: var(--safe-harbor); }
.nav-trigger.active .caret { transform: rotate(180deg); }

/* Mobile menu trigger (hidden on desktop) */
.menu-trigger {
  display: none; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--frost);
  border-radius: 6px; padding: 9px 14px; font-weight: 700; color: var(--twilight); cursor: pointer; margin-left: auto;
}
.menu-trigger .bars { display: flex; flex-direction: column; gap: 3px; }
.menu-trigger .bars span { width: 18px; height: 2px; background: var(--twilight); display: block; }

/* ---------- Desktop mega-menu dropdown ---------- */
.desktop-dropdown {
  display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--midnight);
  padding: 28px var(--tc-nav-pad-x); z-index: 30;
}
.desktop-dropdown.open { display: block; }
.mm-cols { display: flex; gap: 40px; flex-wrap: wrap; }
.mm-col { flex: 0 0 220px; }
.mm-heading {
  display: block; font-family: "degular", Georgia, serif; font-weight: 700; font-size: 16px;
  color: var(--sky); margin: 0 0 10px; border: none; background: none; cursor: default;
}
a.mm-heading { cursor: pointer; }
a.mm-heading:hover { text-decoration: underline; }
.mm-links { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.mm-link { color: rgba(255,255,255,0.82); font-size: 13.5px; }
.mm-link:hover { color: var(--sky); }
.mm-btn {
  display: inline-block; background: var(--safe-harbor); color: #fff; font-weight: 700;
  font-size: 13.5px; border-radius: 5px; padding: 10px 16px; text-align: center;
}
.mm-btn:hover { background: var(--safe-harbor-dark); }

/* Eyebrow-label columns (Attend a Training) — the label reads small/quiet,
   the links underneath are the prominent, larger element. */
.mm-eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--sky); margin: 0 0 12px;
}
.mm-link-lg { color: #fff; font-size: 17px; font-weight: 700; }
.mm-link-lg:hover { color: var(--sky); }

/* Explore the Spaces — a headline column plus one card per room. The headline
   column matches the Attend a Training headline exactly (2 of 7 units plus the
   gap between them), so the first column doesn't jump when switching dropdowns;
   the six room cards share the remaining width. */
.mm-cols--explore {
  display: grid; gap: 18px;
  grid-template-columns: calc((100% - 6 * 18px) * 2 / 7 + 18px) repeat(6, 1fr);
}
.mm-space-intro {
  font-family: "degular", Georgia, serif; font-weight: 700; font-size: 17px; line-height: 1.3; color: #fff;
}
a.mm-space-intro { display: block; }
a.mm-space-intro:hover { color: var(--sky); }
.mm-intro-arrow { color: var(--sky); }
.mm-space-card { display: block; color: inherit; }
.mm-space-thumb { height: 70px; border-radius: 5px; margin-bottom: 8px; }
.mm-space-thumb.courtroom { background: linear-gradient(135deg, var(--safe-harbor), var(--twilight)); }
.mm-space-thumb.hall { background: linear-gradient(135deg, var(--sky), var(--safe-harbor)); }
.mm-space-thumb.ignite { background: linear-gradient(135deg, var(--twilight), var(--midnight)); }
.mm-space-thumb.suite { background: linear-gradient(135deg, var(--sky), var(--twilight)); }
.mm-space-thumb.skills { background: linear-gradient(135deg, var(--safe-harbor), var(--sky)); }
.mm-space-name { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.mm-space-card:hover .mm-space-name { color: var(--sky); }
.mm-space-desc { font-size: 11px; line-height: 1.35; color: rgba(255,255,255,0.65); }

/* Attend a Training — same 7-column grid: headline (2), upcoming events (2),
   curricula (2), one open column. Event rows reuse the ROAR sidebar
   .attend-widget .date-row styles, recolored for the Midnight panel. */
.mm-cols--attend { display: grid; grid-template-columns: repeat(7, 1fr); gap: 18px; }
.mm-cols--attend .mm-col { min-width: 0; }
.mm-span-2 { grid-column: span 2; }
.mm-span-3 { grid-column: span 3; }
.mm-events { margin-bottom: 14px; }
.mm-event-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,0.14); text-decoration: none;
}
.mm-event-row:first-child { border-top: none; padding-top: 0; }
.mm-event-date {
  width: 32px; height: 38px; border-radius: 5px; background: var(--twilight); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; line-height: 1;
}
.mm-event-month { font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; margin-bottom: 3px; }
.mm-event-day { font-size: 13px; font-weight: 700; }
.mm-event-title { display: block; font-size: 12.5px; font-weight: 700; color: #fff; }
.mm-event-time { display: block; font-size: 11.5px; color: rgba(255,255,255,0.65); margin-top: 2px; }
.mm-event-row:hover .mm-event-title { color: var(--sky); }
.mm-btn-outline {
  display: inline-block; border: 1.5px solid var(--sky); color: var(--sky); font-weight: 700;
  font-size: 13.5px; border-radius: 5px; padding: 9px 16px; text-align: center;
}
.mm-btn-outline:hover { background: var(--sky); color: var(--midnight); }

/* ---------- Mobile full-screen overlay ----------
   Positioned absolute within .site-header-wrap (not fixed to the browser
   viewport) so it covers the demo card, matching where the real header
   sits on the page, rather than the whole document. */
.mobile-overlay {
  position: absolute; top: 0; left: 0; right: 0; max-height: 640px;
  background: var(--midnight); z-index: 100; overflow-y: auto; border-radius: 10px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  padding: 20px 24px 32px;
}
.mobile-overlay.open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-overlay-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mobile-close { background: none; border: none; color: var(--sky); font-size: 26px; line-height: 1; cursor: pointer; padding: 6px; }

.mobile-accordion { border-top: 1px solid var(--midnight-soft); margin-top: 12px; }
.acc-item { border-bottom: 1px solid var(--midnight-soft); }
.acc-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; background: none; border: none;
  color: #fff; font-family: "degular", Georgia, serif; font-weight: 700; font-size: 19px; padding: 16px 2px; cursor: pointer;
}
.acc-trigger .chev { font-size: 16px; transition: transform 0.15s; color: #fff; }
.acc-trigger.open .chev { transform: rotate(90deg); }
.mobile-accordion-panel { display: none; padding: 0 2px 20px; }
.mobile-accordion-panel.open { display: block; }
.mobile-accordion-panel .mm-cols { display: block; }
.mobile-accordion-panel .mm-col { margin-bottom: 20px; }
.mobile-accordion-panel .mm-btn { display: block; margin-bottom: 10px; }
.mobile-accordion-panel .mm-space-intro { margin-bottom: 18px; }
.mobile-accordion-panel .mm-events { margin-bottom: 10px; }
.mobile-accordion-panel .mm-space-card {
  display: flex; flex-direction: row-reverse; align-items: center; gap: 14px; margin-bottom: 16px;
}
.mobile-accordion-panel .mm-space-thumb { flex: 0 0 33%; height: 72px; margin-bottom: 0; }
.mobile-accordion-panel .mm-space-text { flex: 1 1 auto; }

/* Breakpoint: matches the main nav facsimile's switch from inline nav to hamburger */
@media (max-width: 1024px) {
  .desktop-nav { display: none; }
  .menu-trigger { display: flex; }
}
@media (max-width: 600px) {
  .site-header-wrap--page { --tc-nav-pad-x: 16px; margin: -20px -16px 20px; }
}