/* design-tokens-v3.css
 * Test-bed stylesheet for the Compassion-inspired nav + footer redesign.
 * Loaded only by header-v3.php / footer-v3.php (currently wired up only on /vision/).
 * Starts as a verbatim copy of design-tokens.css; nav + footer sections at the bottom
 * are rewritten with new `.site-nav-v3` / `.site-footer-v3` selectors so this file
 * can coexist with design-tokens.css without clobbering legacy `-new` pages.
 */

/* ─── Self-hosted fonts ─── */

/* Lora — variable woff2 covers weights 400, 600, 700 */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/webfonts/lora/lora-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/webfonts/lora/lora-italic-latin.woff2') format('woff2');
}

/* Source Sans 3 — variable woff2 covers weights 300, 400, 500, 600 */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/assets/webfonts/source-sans-3/source-sans-3-latin.woff2') format('woff2');
}

/* ─── Design tokens ─── */
:root {
  --blue-900: #0d2e52;
  --blue-800: #1a4a7a;
  --blue-700: #1e5fa0;
  --blue-600: #2672b8;
  --blue-100: #ddeaf7;
  --blue-50:  #f0f6fc;
  --gold:      #b8924a;
  --gold-dark: #a07840;
  --gold-lt:   #f5edd8;

  --text-900: #1a1e26;
  --text-700: #3c4352;
  --text-500: #6b7280;
  --text-300: #adb5bd;

  --bg:       #fafbfc;
  --bg-alt:   #f2f5f9;
  --bg-card:  #ffffff;
  --border:   #e2e8f0;

  --radius:    10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --shadow:    0 4px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);
  --shadow-lg: 0 8px 28px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);

  /* v3-only additions for the light nav + megamenu pattern */
  --nav-v3-height:   72px;
  --nav-v3-link:     var(--text-700);
  --nav-v3-border:   var(--border);
  --megamenu-shadow: 0 16px 40px rgba(13,46,82,.12), 0 4px 12px rgba(13,46,82,.06);

  /* State colors — machine-driven processing states (kept distinct from blue/gold).
     Used by manage-courses.css and any other UI surface that renders queued /
     processing / ready / failed pills, banners, or chips. */
  --state-warn:    #b9852e;   /* queued */
  --state-warn-bg: #fbf3df;
  --state-info:    #1e5fa0;   /* processing — reuses blue-700 */
  --state-info-bg: #e3effa;
  --state-ok:      #2f7a4b;   /* ready / saved / active */
  --state-ok-bg:   #e3f1e7;
  --state-bad:     #b3261e;   /* failed */
  --state-bad-bg:  #fdecea;
}

/* ─── Base typography ─── */
body {
  font-family: 'Source Sans 3', system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  background: var(--bg);
  color: var(--text-900);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Lora', Georgia, serif;
  color: var(--blue-900);
}

a { color: var(--blue-700); text-decoration: none; }
a:hover { color: var(--blue-900); text-decoration: underline; }

main { display: block; }


/* =================================================================== */
/* ─── v3 skip link (keyboard a11y) ────────────────────────────────── */
/* =================================================================== */

.skip-link-v3 {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 9999;
  padding: 10px 16px;
  background: var(--text-900);
  color: #fff;
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  transition: top .15s;
}
.skip-link-v3:focus {
  top: 8px;
  color: #fff;
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}


/* =================================================================== */
/* ─── v3 site nav (Compassion-inspired light bar + megamenus) ────── */
/* =================================================================== */

.site-nav-v3 {
  background: var(--bg-card);
  position: relative;        /* containing block for full-width megamenus */
  z-index: 100;
  isolation: isolate;
}
/* When a breadcrumb band follows the nav, the breadcrumb owns the bottom
 * border separating the unified white "chrome" from the page content.
 * Header sets .has-breadcrumb on the nav element whenever $breadcrumbs is
 * non-empty, so the rule doesn't rely on DOM sibling structure. */
.site-nav-v3:not(.has-breadcrumb) {
  border-bottom: 1px solid var(--nav-v3-border);
}

.site-nav-v3 .nav-v3-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--nav-v3-height);
  flex-wrap: wrap;
}

/* Each dropdown li becomes position:static so the megamenu's absolute
 * positioning falls through to .site-nav-v3, letting it span full width. */
.site-nav-v3 .nav-v3-links > li.dropdown {
  position: static;
}

/* — Brand — */
.nav-v3-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-v3-brand:hover { text-decoration: none; }
.nav-v3-logo {
  height: 38px;
  width: auto;
  /* Original logo colors — light nav, no invert filter. */
}

/* — Toggler (mobile only) — */
.nav-v3-toggler {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-700);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.nav-v3-toggler:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 2px; }

/* — Collapse wrapper — */
.nav-v3-collapse {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* — Primary link list — */
.nav-v3-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.nav-v3-links > li { margin: 0; position: relative; }

.nav-v3-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--nav-v3-link);
  font-family: 'Source Sans 3', sans-serif;
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: .005em;
  padding: 26px 16px;        /* tall vertical padding so underline pins to nav-bottom */
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: color .15s;
}
.nav-v3-link::after {
  /* Bootstrap's default dropdown caret. We hide it and use a chevron instead. */
  display: none !important;
}
.nav-v3-link .nav-v3-caret {
  font-size: .68rem;
  opacity: .6;
  transition: transform .2s;
}
.nav-v3-link[aria-expanded="true"] .nav-v3-caret {
  transform: rotate(180deg);
  opacity: 1;
}
.nav-v3-link:hover,
.nav-v3-link:focus,
.nav-v3-link[aria-expanded="true"],
.nav-v3-link.is-active {
  color: var(--blue-700);
  text-decoration: none;
  outline: none;
}

/* Underline pinned to the bottom edge of the nav, shown on hover, focus,
 * open-megamenu, and current-page. Same 3px brand-blue rule for all four
 * so feedback is identical regardless of cause. */
.nav-v3-link:hover::before,
.nav-v3-link:focus-visible::before,
.nav-v3-link[aria-expanded="true"]::before,
.nav-v3-link.is-active::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 3px;
  background: var(--blue-700);
}

/* When the user is hovering one nav link, OR another link's megamenu is open,
 * suppress the current-page underline on the OTHER (non-hovered, non-open)
 * .is-active items. Without this rule, a user on /vision/ sees both "Mission"
 * (current page) and "Discover" (hovered/open) underlined simultaneously. */
.nav-v3-links:has(.nav-v3-link:hover) .nav-v3-link.is-active:not(:hover)::before,
.nav-v3-links:has(.nav-v3-link[aria-expanded="true"]) .nav-v3-link.is-active:not([aria-expanded="true"])::before {
  display: none;
}

/* — Right-side actions — */
.nav-v3-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nav-v3-signin {
  color: var(--text-700);
  font-weight: 600;
  font-size: .95rem;
  padding: 10px 12px;
  border-radius: 8px;
}
.nav-v3-signin:hover { color: var(--blue-900); background: var(--bg-alt); text-decoration: none; }

.btn-nav-v3-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gold);
  color: #fff;
  border: none;
  font-family: 'Source Sans 3', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 999px;
  text-decoration: none;
  letter-spacing: .01em;
  transition: background .15s, transform .15s;
}
.btn-nav-v3-cta:hover {
  background: var(--gold-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

/* — Avatar / user button — */
.nav-v3-user-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-700);
  font-family: 'Source Sans 3', sans-serif;
  font-size: .92rem;
  font-weight: 600;
  padding: 5px 14px 5px 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.nav-v3-user-btn:hover, .nav-v3-user-btn:focus {
  background: var(--bg-alt);
  border-color: var(--text-300);
  color: var(--blue-900);
}
.nav-v3-user-btn::after { display: none; }
.nav-v3-user-btn .fa-user-circle { font-size: 1.6rem; color: var(--text-500); }
.nav-v3-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

/* — Megamenu panels (full-width, Compassion-style) — */
.megamenu-v3 {
  /* Override Bootstrap's .dropdown-menu defaults: this is a full-width band
   * pinned to the bottom edge of .site-nav-v3, not a small panel anchored
   * to the trigger. data-bs-display="static" on the trigger disables Popper. */
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  width: 100%;
  margin: 0 !important;
  padding: 36px 0 40px;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg-card);
  box-shadow: 0 16px 28px -16px rgba(13,46,82,.18);
  min-width: 0;
}

.megamenu-v3-inner {
  /* Mirrors Bootstrap's .container max-width at lg+ */
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Section header inside the megamenu — clickable link to the section's
 * canonical landing page, with its own underline. */
.megamenu-v3-section-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--blue-700);
  text-decoration: none;
  padding-bottom: 6px;
  margin-bottom: 28px;
  border-bottom: 2px solid var(--blue-700);
}
.megamenu-v3-section-link:hover {
  color: var(--blue-900);
  border-color: var(--blue-900);
  text-decoration: none;
}
.megamenu-v3-section-link .fa-arrow-right {
  font-size: .85rem;
}

/* 3-column feature grid */
.megamenu-v3-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 40px;
}

/* Each cell can stack multiple feature items. */
.megamenu-v3-cell {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Feature item: icon + heading + description.
 * The whole card is the link's hit area; hover fills with a soft blue tint
 * the way Compassion's megamenu cards do. */
.megamenu-v3-feature {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
  text-decoration: none;
  color: inherit;
  padding: 12px 14px;
  border-radius: 10px;
  transition: background .15s, box-shadow .15s;
}
.megamenu-v3-feature:hover,
.megamenu-v3-feature:focus-visible {
  background: var(--blue-50);
  text-decoration: none;
  outline: none;
}
.megamenu-v3-feature:hover .megamenu-v3-feature-title,
.megamenu-v3-feature:focus-visible .megamenu-v3-feature-title {
  color: var(--blue-700);
}
.megamenu-v3-feature:hover .megamenu-v3-feature-icon,
.megamenu-v3-feature:focus-visible .megamenu-v3-feature-icon {
  background: var(--blue-700);
  color: #fff;
}

/* Current-page state — feature card for the page the user is currently on.
 * Distinguished from :hover by a left-side accent bar, so even when the user
 * is hovering elsewhere the "you are here" anchor stays visible. */
.megamenu-v3-feature.is-current {
  background: var(--blue-50);
  position: relative;
}
.megamenu-v3-feature.is-current::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  background: var(--blue-700);
  border-radius: 2px;
}
.megamenu-v3-feature.is-current .megamenu-v3-feature-title {
  color: var(--blue-700);
}
.megamenu-v3-feature.is-current .megamenu-v3-feature-icon {
  background: var(--blue-700);
  color: #fff;
}
.megamenu-v3-feature-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--blue-50);
  color: var(--blue-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.megamenu-v3-feature-title {
  display: block;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-900);
  margin: 2px 0 4px;
  transition: color .15s;
}
.megamenu-v3-feature-desc {
  display: block;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--text-500);
  margin: 0;
}

/* User-menu specific (regular-width dropdown, not megamenu) */
.site-nav-v3 .dropdown-menu.user-menu-v3 {
  font-family: 'Source Sans 3', sans-serif;
  font-size: .92rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--megamenu-shadow);
  padding: 8px;
  margin-top: 8px;
  min-width: 240px;
}
.site-nav-v3 .dropdown-menu.user-menu-v3 .dropdown-item {
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text-900);
  font-weight: 500;
}
.site-nav-v3 .dropdown-menu.user-menu-v3 .dropdown-item:hover { background: var(--blue-50); color: var(--blue-900); }
.site-nav-v3 .dropdown-menu.user-menu-v3 .dropdown-header {
  color: var(--text-500);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 8px 12px 4px;
}
.site-nav-v3 .dropdown-menu.user-menu-v3 .dropdown-divider {
  margin: 6px 0;
  border-color: var(--border);
}

/* — Mobile collapse (< lg) — */
@media (max-width: 991.98px) {
  .nav-v3-collapse {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 12px;
    padding-bottom: 12px;
  }
  .nav-v3-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-v3-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  /* Megamenus go static-position on mobile so they flow inline within the
   * collapsed nav rather than as a full-width band. */
  .megamenu-v3 {
    position: static !important;
    width: auto;
    transform: none !important;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--border);
    border-radius: 0;
    padding: 14px 8px 16px 22px;
  }
  .megamenu-v3-inner { padding: 0; max-width: none; }
  .megamenu-v3-section-link { font-size: .98rem; margin-bottom: 14px; }
  .megamenu-v3-grid { grid-template-columns: 1fr; gap: 14px; max-width: none; }
  .megamenu-v3-feature { padding: 0; }
  .megamenu-v3-feature-desc { display: none; }   /* keep mobile menu compact */

  /* On mobile, the active underline pin makes no sense — restyle as a left-border tint */
  .nav-v3-link {
    padding: 14px 12px;
    border-radius: 8px;
    width: 100%;
    justify-content: space-between;
  }
  .nav-v3-link[aria-expanded="true"]::before,
  .nav-v3-link.is-active::before { display: none; }
  .nav-v3-link.is-active,
  .nav-v3-link[aria-expanded="true"] { background: var(--blue-50); }
}

/* Desktop (>= lg): force the collapse target to render as a row */
@media (min-width: 992px) {
  .site-nav-v3 .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
    flex-direction: row;
    align-items: center;
    margin-top: 0;
  }
}


/* =================================================================== */
/* ─── v3 breadcrumb band ──────────────────────────────────────────── */
/* =================================================================== */

/* Sits directly below the nav. Same white background as .site-nav-v3 so the
 * two read as one unified chrome block; the bottom border separates the
 * combined chrome from the page content (or hero) below. */
.breadcrumb-v3 {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 4px 0 14px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: .88rem;
}
.breadcrumb-v3 .breadcrumb {
  --bs-breadcrumb-divider: "";   /* override Bootstrap's "/" — we use a chevron */
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.breadcrumb-v3 .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  color: var(--text-500);
}
.breadcrumb-v3 .breadcrumb-item + .breadcrumb-item {
  padding-left: 0;
}
.breadcrumb-v3 .breadcrumb-item + .breadcrumb-item::before {
  content: "\f054";              /* fa-chevron-right */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: .6rem;
  color: var(--text-300);
  padding: 0 12px;
  float: none;                   /* Bootstrap floats the divider; we don't want that */
}
.breadcrumb-v3 .breadcrumb-item a {
  color: var(--text-700);
  text-decoration: none;
  font-weight: 500;
  transition: color .15s;
}
.breadcrumb-v3 .breadcrumb-item a:hover {
  color: var(--blue-700);
  text-decoration: underline;
}
.breadcrumb-v3 .breadcrumb-item.active {
  color: var(--text-900);
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .breadcrumb-v3 { padding: 10px 0; font-size: .82rem; }
  .breadcrumb-v3 .breadcrumb-item + .breadcrumb-item::before { padding: 0 8px; }
}


/* =================================================================== */
/* ─── v3 site footer (dark, Compassion-inspired column matrix) ──── */
/* =================================================================== */

.site-footer-v3 {
  background: var(--blue-900);
  color: rgba(255,255,255,.72);
  padding: 56px 0 0;
  font-family: 'Source Sans 3', sans-serif;
  font-size: .92rem;
}

/* — Brand band (top of footer) — */
.footer-v3-brand-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-v3-brand {
  display: inline-block;
  margin-bottom: 14px;
}
.footer-v3-logo {
  height: 40px;
  width: auto;
  filter: brightness(0) invert(1);
}
.footer-v3-tagline {
  color: rgba(255,255,255,.65);
  font-size: .95rem;
  line-height: 1.6;
  max-width: 34em;
  margin: 0;
}

/* — Column matrix — */
.footer-v3-columns {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 28px;
  padding: 40px 0 32px;
}
@media (max-width: 1199.98px) {
  .footer-v3-columns { grid-template-columns: repeat(4, 1fr); gap: 32px 24px; }
}
@media (max-width: 991.98px) {
  .footer-v3-columns { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575.98px) {
  .footer-v3-columns { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
}

.footer-v3-col-title {
  color: #fff;
  font-family: 'Source Sans 3', sans-serif;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.footer-v3-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-v3-link-list li { margin-bottom: 9px; }
.footer-v3-link-list a {
  color: rgba(255,255,255,.72);
  font-size: .92rem;
  text-decoration: none;
  transition: color .15s;
}
.footer-v3-link-list a:hover { color: #fff; text-decoration: none; }

/* — Bottom legal row — */
.footer-v3-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: .82rem;
  color: rgba(255,255,255,.55);
}
.footer-v3-bottom-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-v3-bottom-links a {
  color: rgba(255,255,255,.7);
  text-decoration: none;
  transition: color .15s;
}
.footer-v3-bottom-links a:hover { color: #fff; text-decoration: underline; }