/* Carade V2 — Batch 2 shared nav/breadcrumb styles
   Linked on every page so the new "More" disclosure and breadcrumb
   markup render consistently without duplicating CSS into every
   page's embedded <style> block. Uses the same design tokens as the
   rest of the site (defined per-page in :root, matched here). */

:root {
  --v2-black: #0D0D0D;
  --v2-slate: #1C2B3A;
  --v2-mid: #3A4F62;
  --v2-body-txt: #E8EDF1;
  --v2-signal: #C94118;
  --v2-signal-h: #A83512;
  --v2-fog: #EEF2F5;
}

/* "More" disclosure inside the existing off-canvas nav-menu panel.
   Uses native <details>/<summary> for built-in keyboard and
   screen-reader accessibility with no extra JS required. */
.nav-menu details.nav-more {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 0;
}
.nav-menu details.nav-more summary {
  color: var(--v2-body-txt);
  font-size: 0.92rem;
  font-weight: 500;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color 0.2s;
}
.nav-menu details.nav-more summary::-webkit-details-marker { display: none; }
.nav-menu details.nav-more summary:hover { color: var(--v2-signal); }
.nav-menu details.nav-more summary::after {
  content: "+";
  font-size: 1.1rem;
  color: var(--v2-signal);
  transition: transform 0.2s;
}
.nav-menu details.nav-more[open] summary::after { transform: rotate(45deg); }
.nav-menu details.nav-more .nav-more-list {
  display: flex;
  flex-direction: column;
  padding-bottom: 8px;
}
.nav-menu details.nav-more .nav-more-list a {
  border-bottom: none;
  padding: 8px 0 8px 14px;
  font-size: 0.86rem;
  color: rgba(232,237,241,0.8);
}
.nav-menu details.nav-more .nav-more-list a:hover { color: var(--v2-signal); }

/* Visible breadcrumb trail, used on articles and resource hubs */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: #8A9EAD;
  padding: 18px 8vw 0;
}
.breadcrumb a {
  color: #8A9EAD;
  text-decoration: none;
  transition: color 0.2s;
}
.breadcrumb a:hover { color: var(--v2-signal); }
.breadcrumb .breadcrumb-sep { color: #C4D0DA; }
.breadcrumb .breadcrumb-current {
  color: var(--v2-mid);
  font-weight: 600;
}
/* Breadcrumb on dark hero backgrounds (resource hub pages) needs
   lighter tones for contrast */
.page-hero .breadcrumb,
.hero .breadcrumb {
  padding: 0 0 18px;
  color: rgba(255,255,255,0.5);
}
.page-hero .breadcrumb a,
.hero .breadcrumb a { color: rgba(255,255,255,0.5); }
.page-hero .breadcrumb a:hover,
.hero .breadcrumb a:hover { color: var(--v2-signal); }
.page-hero .breadcrumb .breadcrumb-sep,
.hero .breadcrumb .breadcrumb-sep { color: rgba(255,255,255,0.25); }
.page-hero .breadcrumb .breadcrumb-current,
.hero .breadcrumb .breadcrumb-current { color: rgba(255,255,255,0.85); }

@media (max-width: 960px) {
  .breadcrumb { padding-left: 6vw; padding-right: 6vw; }
}