/* Component Styles - Reusable UI Components
 * Uses CSS custom properties from variables.css
 */

/* Site Header */
/* Compact header with subtle presence */
.site-header {
  padding: var(--spacing-sm, 0.5rem) 0;
  border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
}

/* Site Navigation */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: none;
  margin: 0;
  padding-left: var(--edge-padding, 1.5rem);
  padding-right: var(--edge-padding, 1.5rem);
}

/* Site Logo */
/* Sans-serif logo with cool blue hover - matches modern direction */
.site-logo {
  font-family: var(--font-body, sans-serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-logo, var(--color-text, rgba(0, 0, 0, 0.87)));
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color var(--transition-fast, 150ms ease);
}

.site-logo:visited {
  color: var(--color-logo, var(--color-text, rgba(0, 0, 0, 0.87)));
}

.site-logo:hover {
  color: var(--color-link, #004276);
}

/* Navigation Links */
/* Professional nav with cool blue hover accent */
.nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--spacing-xl, 2rem);
}

.nav-links a {
  color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
  text-decoration: none;
  font-size: var(--font-size-small, 0.875rem);
  font-weight: 500;
  transition: color var(--transition-fast, 150ms ease);
}

.nav-links a:hover {
  color: var(--color-link, #004276);
}

/* Site Footer */
/* Single-line footer */
.site-footer {
  padding: var(--spacing-sm, 0.5rem) var(--container-padding, 1.5rem);
  margin-top: auto;
  border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
}

.footer-content {
  max-width: var(--container-max-width, 1200px);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm, 0.5rem);
  font-size: var(--font-size-small, 0.875rem);
}

.footer-title {
  color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
}

.footer-content a {
  color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
  text-decoration: none;
  transition: color var(--transition-fast, 150ms ease);
}

.footer-content a:hover {
  color: var(--color-link, #004276);
}

.footer-divider {
  color: var(--color-text-muted, rgba(0, 0, 0, 0.3));
}

/* Article */
.article {
  max-width: var(--content-width-wide, 80ch);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding, 1.5rem);
  padding-right: var(--container-padding, 1.5rem);
  counter-reset: sidenote-counter;
}

/* Article Header */
.article-header {
  margin-bottom: var(--spacing-xl, 2rem);
  padding-bottom: var(--spacing-md, 1rem);
  border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
}

/* Article Title */
.article-title {
  font-size: var(--font-size-h1, 2.5rem);
  margin-top: 0;
  margin-bottom: var(--spacing-md, 1rem);
}

/* Article Description/Subtitle */
.article-description {
  font-size: 1.125rem;
  color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
  line-height: var(--line-height-body, 1.6);
  margin-bottom: 0;
}

/* Article Prerequisites */
.article-prerequisites {
  font-size: var(--font-size-small, 0.875rem);
  color: var(--color-text-muted, rgba(0, 0, 0, 0.4));
  margin-top: var(--spacing-sm, 0.5rem);
  margin-bottom: 0;
}

/* Article Prerequisites - enhanced with "Read first:" label */
.prerequisites-label {
  font-weight: 600;
  color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
}

/* Article Meta (date, author, etc.) */
.article-meta {
  font-size: var(--font-size-small, 0.875rem);
  color: var(--color-text-muted, rgba(0, 0, 0, 0.4));
  margin-top: var(--spacing-md, 1rem);
}

/* Article Body */
.article .article-body {
  padding-left: 0;
  padding-right: 0;
}

/* Reduce dead space before first section heading */
.article-body > h2:first-child,
.article-body > h3:first-child {
  margin-top: var(--spacing-lg, 1.5rem);
}

/* Topic Card (for topic listing pages) */
.topic-card {
  padding: var(--spacing-lg, 1.5rem);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
  border-radius: var(--radius-lg, 8px);
  margin-bottom: var(--spacing-md, 1rem);
  transition: border-color var(--transition-base, 200ms ease);
}

.topic-card:hover {
  border-color: var(--color-border-strong, rgba(0, 0, 0, 0.2));
}

.topic-card h2,
.topic-card h3 {
  margin-top: 0;
}

.topic-card a {
  text-decoration: none;
}

.topic-card a:hover {
  text-decoration: underline;
}

/* Button styles moved to BUTTONS section below */

/* Visually hidden (accessibility) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   SKIP LINK
   Accessibility: skip-to-content link, hidden until focused.
   ========================================================================== */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--spacing-md);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-background);
  border: 2px solid var(--color-link);
  border-radius: var(--radius-md);
  color: var(--color-link);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
  z-index: 1000;
}

.skip-link:focus {
  top: var(--spacing-sm);
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.hero {
  padding: var(--spacing-2xl, 3rem) var(--container-padding, 1.5rem);
  border-bottom: none;
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.hero-content {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.hero-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-link, #004276);
  margin-bottom: var(--spacing-sm, 0.5rem);
}

.hero-title {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--spacing-md, 1rem) 0;
  color: var(--color-text, rgba(0, 0, 0, 0.87));
}

.hero-description {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
  margin: 0 0 var(--spacing-lg, 1.5rem) 0;
}

.hero-actions {
  display: flex;
  gap: var(--spacing-md, 1rem);
  justify-content: center;
  flex-wrap: wrap;
}

.hero-open-source {
  font-size: 0.875rem;
  color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
  margin: var(--spacing-lg, 1.5rem) 0 0 0;
}

.hero-open-source a {
  color: var(--color-primary, #2563eb);
  text-decoration: underline;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  font-family: var(--font-body, sans-serif);
  text-decoration: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--transition-fast, 150ms ease);
}

.btn-primary {
  background: var(--color-btn-primary, var(--color-link, #004276));
  color: #ffffff !important;
  border: 1px solid var(--color-btn-primary, var(--color-link, #004276));
  font-weight: 600;
  text-decoration: none;
}

.btn-primary:hover {
  background: var(--color-link-hover, #002d52);
  border-color: var(--color-link-hover, #002d52);
  color: #ffffff !important;
  text-decoration: none;
}

.btn-secondary {
  background: transparent;
  color: var(--color-link, #004276);
  border: 1px solid var(--color-border-strong, rgba(0, 0, 0, 0.2));
}

.btn-secondary:hover {
  border-color: var(--color-link, #004276);
  background: var(--color-btn-secondary-hover-bg);
}

/* ==========================================================================
   FEATURE CARDS
   ========================================================================== */

.features {
  padding: var(--spacing-2xl, 3rem) var(--container-padding, 1.5rem);
  max-width: var(--container-max-width, 1200px);
  margin: 0 auto;
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg, 1.5rem);
}

.feature-card {
  padding: var(--spacing-lg, 1.5rem);
  background: var(--color-background, #ffffff);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
  border-radius: 10px;
  transition: all var(--transition-base, 200ms ease);
}

.feature-card:hover {
  border-color: var(--color-border-strong, rgba(0, 0, 0, 0.15));
  box-shadow: 0 4px 12px var(--color-feature-card-shadow);
}

.feature-icon {
  font-size: 1.5rem;
  margin-bottom: var(--spacing-md, 1rem);
}

.feature-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 var(--spacing-sm, 0.5rem) 0;
  color: var(--color-text, rgba(0, 0, 0, 0.87));
}

.feature-card p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
  margin: 0;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (min-width: 768px) {
  .site-nav {
    padding-left: var(--edge-padding, 1.5rem);
    padding-right: var(--edge-padding, 1.5rem);
  }

  .article {
    padding-left: 0;
    padding-right: 0;
  }

  .article-header {
    text-align: center;
    margin-bottom: var(--spacing-xl, 2rem);
  }

  .article-description {
    font-size: 1.25rem;
  }

  /* Hero responsive */
  .hero {
    padding: var(--spacing-2xl, 3rem) var(--spacing-xl, 2rem) var(--spacing-3xl, 4rem);
  }

  .hero-title {
    font-size: 2.25rem;
  }

  .hero-description {
    font-size: 1.125rem;
  }

  /* Features responsive */
  .features {
    padding: var(--spacing-3xl, 4rem) var(--spacing-xl, 2rem);
  }

  .features-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl, 2rem);
  }
}

@media (min-width: 1200px) {
  /* Align header content with the page grid + sidebar content padding. */
  .site-nav {
    max-width: none;
    margin: 0;
  }

  .sidebar {
    padding: var(--spacing-sm, 0.5rem) var(--edge-padding, 1.5rem);
  }

  .hero-title {
    font-size: 2.5rem;
  }
}

/* ==========================================================================
   CITATIONS
   Numbered inline references with hover tooltips (desktop) and
   tap-to-expand (mobile). Pairs with the cite shortcode in eleventy.config.js.
   ========================================================================== */

.citation {
  position: relative;
  display: inline;
}

.citation-number {
  text-decoration: none;
  color: var(--color-link, #004276);
  font-weight: 600;
}

.citation-tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-tooltip-bg, #333);
  color: var(--color-tooltip-text, #fff);
  padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
  border-radius: var(--radius-md, 4px);
  font-size: var(--font-size-small, 0.875rem);
  line-height: 1.4;
  white-space: normal;
  width: max-content;
  max-width: 300px;
  z-index: 10;
  pointer-events: none;
}

/* Show tooltip on hover (desktop) and focus (keyboard/mobile tap) */
.citation:hover .citation-tooltip,
.citation:focus-within .citation-tooltip {
  display: block;
}

.citation-error {
  color: #cc0000;
  font-weight: 600;
}

/* Mobile: tap to expand inline instead of floating tooltip */
@media (max-width: 767px) {
  .citation-tooltip {
    position: static;
    transform: none;
    display: none;
    background: var(--color-background-subtle, rgba(0, 0, 0, 0.02));
    color: var(--color-text, rgba(0, 0, 0, 0.87));
    margin: var(--spacing-xs, 0.25rem) 0;
    width: 100%;
    max-width: 100%;
  }

  .citation:focus-within .citation-tooltip {
    display: block;
  }
}

/* ==========================================================================
   SIDENOTES & MARGIN NOTES
   Tufte-style CSS-only responsive sidenotes using the checkbox hack.
   Hover: show in a popover box near the reference.
   ========================================================================== */

/* Sidenote numbering via CSS counters */
.sidenote-wrapper {
  position: relative;
  display: inline;
}

.sidenote-number {
  counter-increment: sidenote-counter;
  cursor: pointer;
}

.sidenote-number::after {
  content: counter(sidenote-counter);
  font-size: 0.75rem;
  vertical-align: super;
  line-height: 0;
  color: var(--color-link, #004276);
}

.sidenote::before {
  content: counter(sidenote-counter) " ";
  font-size: 0.75rem;
  vertical-align: super;
  line-height: 0;
}

/* Popover box (hidden unless hovered/focused/toggled) */
.sidenote,
.marginnote {
  display: none;
  position: absolute;
  left: 0;
  top: 1.35em;
  z-index: 20;
  width: min(360px, 80vw);
  max-width: 360px;
  padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
  background: var(--color-background, #ffffff);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
  border-radius: var(--radius-md, 4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  font-size: var(--font-size-small, 0.875rem);
  line-height: 1.4;
  color: var(--color-text, rgba(0, 0, 0, 0.87));
}

/* Hide the checkbox, but keep label working */
.sidenote-toggle-input {
  display: none;
}

/* Margin note indicator styling */
.marginnote-indicator {
  cursor: pointer;
  color: var(--color-link, #004276);
}

/* Invisible bridge so the mouse can travel from the superscript to the popover
   without losing hover. The ::after pad extends upward from the popover box. */
.sidenote-wrapper:hover > .sidenote::after,
.sidenote-wrapper:hover > .marginnote::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 100%;
  height: 1.5em;
}

/* Show on hover / keyboard focus / click-toggle */
.sidenote-wrapper:hover > .sidenote,
.sidenote-wrapper:hover > .marginnote,
.sidenote-wrapper:focus-within > .sidenote,
.sidenote-wrapper:focus-within > .marginnote,
.sidenote-toggle-input:checked + .sidenote,
.sidenote-toggle-input:checked + .marginnote {
  display: block;
}

/* On touch/small screens, show expanded notes inline (not as a popover). */
@media (max-width: 767px), (hover: none) {
  .sidenote,
  .marginnote {
    position: static;
    width: 100%;
    max-width: none;
    margin: var(--spacing-xs, 0.25rem) 0;
    background: var(--color-background-subtle, rgba(0, 0, 0, 0.02));
    box-shadow: none;
  }
}

/* ==========================================================================
   COLLAPSIBLE PROMPTS (DETAILS/SUMMARY)
   "Pause and think" blocks using native HTML5 details/summary.
   No JavaScript required.
   ========================================================================== */

.pause-and-think {
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
  border-radius: var(--radius-md, 4px);
  padding: var(--spacing-md, 1rem);
  margin: var(--spacing-lg, 1.5rem) 0;
  background: var(--color-background-subtle, rgba(0, 0, 0, 0.02));
}

.pause-and-think summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-link, #004276);
}

.pause-and-think[open] summary {
  margin-bottom: var(--spacing-md, 1rem);
  border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
  padding-bottom: var(--spacing-sm, 0.5rem);
}

/* ==========================================================================
   SIDEBAR NAVIGATION
   Topic hierarchy sidebar with block groupings.
   Desktop: always visible in left column. Mobile: hidden, toggled by hamburger.
   ========================================================================== */

.sidebar {
  padding: var(--spacing-sm, 0.5rem) var(--edge-padding, 1.5rem);
  border-right: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
}

.sidebar-inner {
  position: sticky;
  top: var(--spacing-lg, 1.5rem);
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.sidebar-inner::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.sidebar-title {
  font-size: var(--font-size-small, 0.875rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted, rgba(0, 0, 0, 0.4));
  margin: 0 0 var(--spacing-sm, 0.5rem) 0;
}

.sidebar-block {
  border: 0;
  margin-bottom: 0.75rem;
}

.sidebar-block-title {
  font-size: var(--font-size-small, 0.875rem);
  font-weight: 600;
  color: var(--color-text, rgba(0, 0, 0, 0.87));
  margin: 0;
  padding: 0.2rem 0;
  line-height: var(--line-height-tight, 1.2);
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  gap: 0.5rem;
}

.sidebar-block-title::-webkit-details-marker {
  display: none;
}

.sidebar-block-title::after {
  content: "›";
  color: var(--color-text-muted, rgba(0, 0, 0, 0.4));
  transform: rotate(0deg);
  transition: transform var(--transition-fast, 150ms ease);
}

.sidebar-block[open] > .sidebar-block-title::after {
  transform: rotate(90deg);
}

.sidebar-block[open] > .sidebar-block-title {
  margin-bottom: 0.25rem;
}

.sidebar-topics {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-topics li {
  margin-bottom: 0.0625rem;
}

.sidebar-topics a {
  display: block;
  padding: 0.18rem 0.35rem;
  font-size: var(--font-size-small, 0.875rem);
  color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
  text-decoration: none;
  border-radius: var(--radius-sm, 3px);
  transition: all var(--transition-fast, 150ms ease);
}

.sidebar-topics a:hover {
  color: var(--color-link, #004276);
  background: var(--color-sidebar-hover-bg);
}

.sidebar-topics a.sidebar-active,
.sidebar-topics a[aria-current="page"] {
  color: var(--color-link, #004276);
  background: var(--color-sidebar-active-bg);
  font-weight: 600;
}

/* ==========================================================================
   HAMBURGER TOGGLE (Mobile)
   Shows/hides sidebar on small screens. Hidden on desktop via CSS.
   ========================================================================== */

.sidebar-toggle {
  display: none;
  background: none;
  border: none;
  padding: var(--spacing-sm, 0.5rem);
  cursor: pointer;
}

.hamburger-icon {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-text, rgba(0, 0, 0, 0.87));
  position: relative;
}

.hamburger-icon::before,
.hamburger-icon::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-text, rgba(0, 0, 0, 0.87));
  position: absolute;
  left: 0;
}

.hamburger-icon::before {
  top: -6px;
}

.hamburger-icon::after {
  top: 6px;
}

/* ==========================================================================
   THEME TOGGLE
   Dark/light mode switch button in header.
   ========================================================================== */

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 0.5rem);
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-xs);
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.theme-toggle:hover {
  color: var(--color-link);
  border-color: var(--color-border-strong);
}

.theme-toggle svg {
  display: block;
}

.github-link {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-xs);
  color: var(--color-text-secondary);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.github-link:hover {
  color: var(--color-link);
  border-color: var(--color-border-strong);
}

.github-link svg {
  display: block;
}

/* ==========================================================================
   NAV TOGGLE (Mobile header menu)
   Collapses nav links behind a hamburger on small screens.
   Hidden on desktop via CSS. Shown via JS (progressive enhancement).
   ========================================================================== */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-xs);
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.nav-toggle:hover {
  color: var(--color-link);
  border-color: var(--color-border-strong);
}

.nav-toggle-icon {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  position: relative;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  position: absolute;
  left: 0;
}

.nav-toggle-icon::before {
  top: -6px;
}

.nav-toggle-icon::after {
  top: 6px;
}

@media (max-width: 767px) {
  .site-nav {
    flex-wrap: wrap;
  }

  .nav-toggle:not([hidden]) {
    display: flex;
  }

  .nav-links {
    display: none;
    order: 99;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    gap: var(--spacing-lg, 1.5rem);
    padding: var(--spacing-sm, 0.5rem) 0;
    border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    margin-top: var(--spacing-sm, 0.5rem);
  }

  .nav-links.nav-open {
    display: flex;
  }

  .nav-links li a {
    display: block;
    padding: 0.5rem 0;
  }

  .header-actions {
    margin-left: auto;
  }
}

/* Mobile: sidebar hidden, slides in from left when toggled */
@media (max-width: 1199px) {
  .sidebar {
    display: none;
  }

  .sidebar-inner {
    position: static;
    top: auto;
  }
}

/* ==========================================================================
   BREADCRUMBS
   Home > Block > Article navigation path.
   ========================================================================== */

.breadcrumbs {
  max-width: var(--content-width-wide, 80ch);
  margin: 0 auto;
  padding: var(--spacing-sm, 0.5rem) var(--container-padding, 1.5rem);
}

.breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: var(--font-size-small, 0.875rem);
  color: var(--color-text-muted, rgba(0, 0, 0, 0.4));
}

.breadcrumbs li:not(:last-child)::after {
  content: ">";
  margin-left: 0.25rem;
  color: var(--color-text-muted, rgba(0, 0, 0, 0.3));
}

.breadcrumbs a {
  color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--color-link, #004276);
}

.breadcrumbs [aria-current="page"] {
  color: var(--color-text, rgba(0, 0, 0, 0.87));
}

@media (min-width: 768px) {
  .breadcrumbs {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ==========================================================================
   TABLE OF CONTENTS
   Auto-generated from h2/h3 headings. Hidden on mobile, sticky on wide screens.
   ========================================================================== */

.article-content-wrapper {
  position: relative;
}

.article-toc {
  display: none;
}

.toc-heading {
  font-size: var(--font-size-small, 0.875rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted, rgba(0, 0, 0, 0.4));
  margin: 0 0 var(--spacing-sm, 0.5rem) 0;
}

.article-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.article-toc li {
  margin-bottom: 0.25rem;
}

.article-toc a {
  font-size: var(--font-size-small, 0.875rem);
  color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
  text-decoration: none;
  display: block;
  padding: 0.125rem 0;
  transition: color var(--transition-fast, 150ms ease);
}

.article-toc a:hover {
  color: var(--color-link, #004276);
}

/* Nested TOC items (h3) are indented */
.article-toc ul ul {
  padding-left: var(--spacing-md, 1rem);
}

/* Show TOC on wide screens, positioned in right margin */
@media (min-width: 1400px) {
  .article-content-wrapper {
    display: grid;
    grid-template-columns: minmax(0, var(--content-width, 65ch)) 220px;
    gap: var(--spacing-2xl, 3rem);
    align-items: start;
  }

  .article-toc {
    display: block;
    position: sticky;
    top: var(--spacing-xl, 2rem);
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    padding-top: var(--spacing-lg, 1.5rem);
  }
}

/* TOC "progress" rail + active marker (Linear-style) */
.article-toc-nav {
  position: relative;
  padding-left: 14px;
}

.article-toc-nav::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 999px;
  background: var(--color-border, rgba(0, 0, 0, 0.12));
}

.toc-active-indicator {
  position: absolute;
  left: 0;
  width: 2px;
  border-radius: 999px;
  background: var(--color-text, rgba(0, 0, 0, 0.87));
  opacity: var(--toc-indicator-opacity, 0);
  height: var(--toc-indicator-height, 0px);
  transform: translateY(var(--toc-indicator-top, 0px));
  transition:
    transform 180ms ease,
    height 180ms ease,
    opacity 180ms ease;
}

.article-toc ul {
  margin: 0;
  padding: 0;
}

.article-toc li {
  margin: 0;
}

.article-toc a {
  padding: 0.25rem 0;
  color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
}

.article-toc a.toc-active,
.article-toc a[aria-current="location"] {
  color: var(--color-text, rgba(0, 0, 0, 0.87));
  font-weight: 500;
}

/* ==========================================================================
   ARTICLE CONTRIBUTION FOOTER
   Call-to-action for contributing/editing on GitHub.
   ========================================================================== */

.article-contribute {
  max-width: var(--content-width-wide, 80ch);
  margin: var(--spacing-2xl, 3rem) auto var(--spacing-lg, 1.5rem);
  padding: var(--spacing-md, 1rem) var(--container-padding, 1.5rem);
  border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
}

.article-contribute p {
  margin: 0;
  font-size: var(--font-size-small, 0.875rem);
  color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
  text-align: center;
}

.article-contribute p + p {
  margin-top: var(--spacing-xs, 0.25rem);
}

.article-contribute a {
  color: var(--color-link, #004276);
}

.article-contribute a:hover {
  color: var(--color-link-hover, #002d52);
}

@media (min-width: 768px) {
  .article-contribute {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ==========================================================================
   PREVIOUS/NEXT ARTICLE NAVIGATION
   Sequential navigation links at the bottom of articles.
   ========================================================================== */

.article-nav {
  max-width: var(--content-width-wide, 80ch);
  margin: var(--spacing-2xl, 3rem) auto;
  padding: 0 var(--container-padding, 1.5rem);
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-md, 1rem);
}

.article-nav-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  padding: var(--spacing-md, 1rem);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
  border-radius: var(--radius-lg, 8px);
  transition: border-color var(--transition-fast, 150ms ease);
  flex: 1;
  max-width: 48%;
}

.article-nav-link:hover {
  border-color: var(--color-link, #004276);
}

.article-nav-prev {
  align-items: flex-start;
}

.article-nav-next {
  align-items: flex-end;
  margin-left: auto;
}

.article-nav-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted, rgba(0, 0, 0, 0.4));
  margin-bottom: 0.25rem;
}

.article-nav-title {
  font-size: var(--font-size-small, 0.875rem);
  color: var(--color-link, #004276);
  font-weight: 500;
}

@media (max-width: 480px) {
  .article-nav {
    flex-direction: column;
  }

  .article-nav-link {
    max-width: 100%;
  }

  .article-nav-next {
    align-items: flex-start;
  }
}

@media (min-width: 768px) {
  .article-nav {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ==========================================================================
   LEARNING PATH
   Visual learning path on homepage showing suggested reading order.
   Numbered blocks with linked topics.
   ========================================================================== */

.learning-path {
  padding: var(--spacing-2xl, 3rem) var(--container-padding, 1.5rem);
  border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
}

.learning-path-content {
  max-width: 680px;
  margin: 0 auto;
}

.learning-path-title {
  font-size: var(--font-size-h2, 1.5rem);
  font-weight: 600;
  margin: 0 0 var(--spacing-sm, 0.5rem) 0;
  text-align: center;
}

.learning-path-description {
  text-align: center;
  color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
  margin: 0 0 var(--spacing-xl, 2rem) 0;
  font-size: 1.0625rem;
  line-height: 1.6;
}

.learning-path-blocks {
  list-style: none;
  margin: 0;
  padding: 0;
}

.learning-path-block {
  margin-bottom: var(--spacing-lg, 1.5rem);
  padding: var(--spacing-lg, 1.5rem);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
  border-radius: var(--radius-lg, 8px);
  transition: border-color var(--transition-base, 200ms ease);
}

.learning-path-block:hover {
  border-color: var(--color-border-strong, rgba(0, 0, 0, 0.15));
}

.learning-path-block-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md, 1rem);
  margin-bottom: var(--spacing-md, 1rem);
}

.learning-path-block-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-link, #004276);
  color: #ffffff;
  font-size: var(--font-size-small, 0.875rem);
  font-weight: 600;
  flex-shrink: 0;
}

.learning-path-block-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
  color: var(--color-text, rgba(0, 0, 0, 0.87));
}

.learning-path-block-meta {
  font-size: 0.9375rem;
  color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
  margin: 0.2rem 0 0 0;
}

.learning-path-topics {
  list-style: none;
  margin: 0;
  padding: 0 0 0 calc(2rem + var(--spacing-md, 1rem));
}

.learning-path-topic {
  margin-bottom: 0.25rem;
}

.learning-path-topic a {
  display: inline-block;
  padding: 0.25rem 0;
  color: var(--color-link, #004276);
  text-decoration: none;
  font-size: 0.9375rem;
}

.learning-path-topic a:hover {
  text-decoration: underline;
}

/* Connecting line between blocks */
.learning-path-block + .learning-path-block {
  position: relative;
}

.learning-path-block + .learning-path-block::before {
  content: "";
  display: block;
  width: 2px;
  height: var(--spacing-lg, 1.5rem);
  background: var(--color-border, rgba(0, 0, 0, 0.1));
  margin: calc(-1 * var(--spacing-lg, 1.5rem)) auto var(--spacing-lg, 1.5rem);
}

@media (min-width: 768px) {
  .learning-path {
    padding: var(--spacing-3xl, 4rem) var(--spacing-xl, 2rem);
  }
}

/* ==========================================================================
   PAGEFIND SEARCH UI
   Theming overrides for the Pagefind search widget to match site design.
   ========================================================================== */

.pagefind-ui {
  --pagefind-ui-scale: 0.9;
  --pagefind-ui-primary: var(--color-link, #004276);
  --pagefind-ui-text: var(--color-text, rgba(0, 0, 0, 0.87));
  --pagefind-ui-background: var(--color-background, #ffffff);
  --pagefind-ui-border: var(--color-border, rgba(0, 0, 0, 0.1));
  --pagefind-ui-tag: var(--color-background-subtle, rgba(0, 0, 0, 0.02));
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: var(--radius-md, 4px);
  --pagefind-ui-font: var(--font-body);
}

.search-page {
  max-width: var(--content-width-wide);
  margin: 0 auto;
  padding: var(--spacing-xl) var(--container-padding);
}

.search-page h1 {
  margin-bottom: var(--spacing-sm);
}

.search-page > p {
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xl);
}

/* ==========================================================================
   GLOSSARY PAGE
   Alphabetically organized glossary of MI terms with letter navigation.
   ========================================================================== */

.glossary-page {
  max-width: var(--content-width-wide);
  margin: 0 auto;
  padding: var(--spacing-xl) var(--container-padding);
}

/* ==========================================================================
   TOPICS PAGE
   Landing page for the full curriculum map.
   ========================================================================== */

.topics-page {
  max-width: var(--content-width-wide);
  margin: 0 auto;
  padding: var(--spacing-xl) var(--container-padding) 0;
}

.topics-page h1 {
  margin-bottom: var(--spacing-sm);
}

.topics-description {
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-lg);
}

.topics-actions {
  justify-content: flex-start;
}

.glossary-page h1 {
  margin-bottom: var(--spacing-sm);
}

.glossary-description {
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xl);
}

.glossary-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-2xl);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.glossary-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  color: var(--color-link);
}

.glossary-nav a:hover {
  background: var(--color-background-subtle);
  color: var(--color-link-hover);
}

.glossary-letter {
  font-size: var(--font-size-h2);
  color: var(--color-link);
  margin-top: var(--spacing-2xl);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-xs);
  border-bottom: 2px solid var(--color-link);
}

.glossary-list {
  margin: 0;
  padding: 0;
}

.glossary-entry {
  margin-bottom: var(--spacing-lg);
}

.glossary-entry dt {
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--spacing-xs);
}

.glossary-entry dd {
  margin-left: 0;
  color: var(--color-text);
  line-height: var(--line-height-body);
}

.glossary-links {
  display: block;
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}

.glossary-links a {
  color: var(--color-link);
}

.glossary-links a:hover {
  color: var(--color-link-hover);
}

/* ==========================================================================
   ERROR PAGE (404)
   ========================================================================== */

.error-page {
  text-align: center;
  padding: var(--spacing-4xl, 4rem) var(--spacing-lg, 1.5rem);
}

.error-page h1 {
  font-size: 4rem;
  margin-bottom: var(--spacing-md, 1rem);
  color: var(--color-text-secondary);
}

.error-actions {
  display: flex;
  gap: var(--spacing-md, 1rem);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--spacing-xl, 2rem);
}