/* Breadcrumbs, section nav (dropdown/mega styling lives in daab-common.css) */

/* `.nav-link-cta` exists only for semantics; visually identical to .nav-link */
.nav-link-cta {
  /* no extra styling — inherits .nav-link behaviour for hover / active */
}

/* Legacy mega-link aliases — kept so any cached static fallback HTML still renders. */
.nav-mega-link {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
  padding: 10px 14px !important;
  color: var(--ink) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  font-family: var(--font-sans) !important;
  text-decoration: none !important;
  white-space: normal !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease !important;
}

.nav-mega-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  line-height: 1.25 !important;
  color: inherit !important;
}

.nav-mega-desc {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  color: #5a7c93 !important;
}

.nav-mega-link:hover,
.nav-mega-link:focus-visible {
  color: var(--blue-700) !important;
  background: var(--soft) !important;
}

.nav-mega-link.active {
  color: var(--white) !important;
  background: var(--blue-700) !important;
  border-color: var(--blue-700) !important;
}

.nav-mega-link.active .nav-mega-title,
.nav-mega-link.active .nav-mega-desc {
  color: var(--white) !important;
}

/* Breadcrumbs — fixed under nav via daab-sticky-chrome.css */
.daab-breadcrumbs,
.forum-breadcrumbs,
.breadcrumbs.forum-breadcrumbs,
div.breadcrumbs.forum-breadcrumbs {
  width: 100%;
  margin: 0;
  background: #e8f4fb;
  border-bottom: 1px solid rgba(0, 105, 180, .2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .65) inset;
}

/* Side panels sit below nav + breadcrumbs when both are present */
.charter-layout > .toc-card,
.charter-sidebar.toc-card {
  top: calc(var(--daab-sticky-top-stack, var(--daab-nav-height, 86px)) + 12px) !important;
}

.daab-breadcrumbs-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 2px;
  max-width: var(--max, 1200px);
  min-height: 36px;
  margin: 0 auto;
  padding: 10px 24px 10px clamp(132px, 14vw, 156px);
  list-style: none;
}

.daab-breadcrumbs-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  line-height: 1.3 !important;
  color: #5a7c93;
}

.daab-breadcrumbs-item > * {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}

.daab-breadcrumbs-sep {
  color: #9ab2c2;
}

.daab-breadcrumbs a {
  color: #2c5470;
  text-decoration: none;
}

.daab-breadcrumbs a:hover,
.daab-breadcrumbs a:focus-visible {
  color: var(--blue-700);
  text-decoration: underline;
}

.daab-breadcrumbs-current {
  color: var(--muted-hero);
}

/* In-section navigation — pill buttons mirror the project's .btn system. */
/* Section pills sit below the page hero/title band (see daab-section-nav.js). */
header.page-hero + .daab-section-nav,
header.hero + .daab-section-nav,
header.forum-hero + .daab-section-nav {
  max-width: 1180px;
  margin: 0 auto 20px;
  padding: 16px 24px;
  box-sizing: border-box;
}

.daab-section-nav {
  margin: 0 0 24px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--color-border-blue-muted);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 45, 82, .06);
}

.daab-section-nav-title {
  margin: 0 0 12px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5a7f94;
}

.daab-section-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Match .btn / .btn-secondary by default; .active matches .btn-primary. */
.daab-section-nav-icon {
  flex-shrink: 0;
  font-size: 1.05em;
  line-height: 1;
}

.daab-section-nav-label {
  min-width: 0;
}

.daab-section-nav-list a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  color: var(--blue-700) !important;
  background: var(--white) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: 0 10px 24px rgba(0, 45, 82, .12) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform .22s ease, filter .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

/* Match the global a.btn::after arrow, including the slide-on-hover transition. */
.daab-section-nav-list a::after {
  content: "↗";
  display: inline-block;
  margin-left: .15em;
  font-weight: 900;
  transition: transform .18s ease;
}

.daab-section-nav-list a:hover::after,
.daab-section-nav-list a:focus-visible::after {
  transform: translate(2px, -2px);
}

.daab-section-nav-list a:hover {
  transform: translateY(-2px);
  filter: brightness(1.02);
  box-shadow: 0 14px 30px rgba(0, 45, 82, .18) !important;
}

.daab-section-nav-list a:focus-visible {
  outline: 3px solid rgba(255, 240, 191, .95);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--color-border-blue-light) !important;
}

.daab-section-nav-list a.active,
.daab-section-nav-list a[aria-current="page"] {
  color: var(--white) !important;
  background: var(--blue-700) !important;
  border-color: var(--blue-700) !important;
  box-shadow: 0 14px 30px rgba(0, 45, 82, .22) !important;
}

.daab-section-nav-list a.active:hover,
.daab-section-nav-list a[aria-current="page"]:hover {
  box-shadow: 0 18px 36px rgba(0, 45, 82, .28) !important;
}

@media (max-width: 720px) {
  .daab-section-nav {
    padding: 14px 14px;
  }

  .daab-section-nav-list {
    gap: 8px;
  }

  .daab-section-nav-list a {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 12px 16px;
    text-align: center;
    white-space: normal;
  }
}

@media (max-width: 1180px) {
  .nav-menu .nav-mega-link,
  .nav-menu .nav-dropdown-link {
    padding: 12px 14px !important;
    border-radius: 8px !important;
  }

  .nav-menu .nav-mega-title,
  .nav-menu .nav-dropdown-link-title {
    font-size: 15px !important;
    color: #1e3d54 !important;
  }

  .nav-menu .nav-mega-desc,
  .nav-menu .nav-dropdown-link-desc {
    font-size: 12px !important;
    color: #5a7c93 !important;
  }

  .nav-menu .nav-mega-link:hover,
  .nav-menu .nav-mega-link:focus-visible,
  .nav-menu .nav-dropdown-link:hover,
  .nav-menu .nav-dropdown-link:focus-visible {
    color: var(--blue-700) !important;
    background: rgba(0, 105, 180, .08) !important;
    border-color: rgba(0, 105, 180, .14) !important;
  }

  .nav-menu .nav-mega-link:hover .nav-mega-desc,
  .nav-menu .nav-dropdown-link:hover .nav-dropdown-link-desc {
    color: #3d6580 !important;
  }

  .nav-menu .nav-mega-link.active,
  .nav-menu .nav-dropdown-link.active {
    color: var(--blue-700) !important;
    background: rgba(0, 105, 180, .12) !important;
    border-color: rgba(0, 105, 180, .22) !important;
  }

  .nav-menu .nav-mega-link.active .nav-mega-title,
  .nav-menu .nav-mega-link.active .nav-mega-desc,
  .nav-menu .nav-dropdown-link.active .nav-dropdown-link-title,
  .nav-menu .nav-dropdown-link.active .nav-dropdown-link-desc {
    color: var(--blue-700) !important;
  }

  .daab-breadcrumbs-list {
    padding: 8px 16px 8px 56px;
  }

  .daab-breadcrumbs-item {
    font-size: 11.5px !important;
  }
}

@media (max-width: 720px) {
  .daab-breadcrumbs-list {
    padding: 6px 14px !important;
  }
}

@media (max-width: 760px) {
  .daab-section-nav-list {
    flex-direction: column;
    align-items: stretch;
  }

  .daab-section-nav-list a {
    justify-content: center;
    border-radius: 10px;
  }
}