.learning-header,
.learning-header * { box-sizing: border-box; }

body > header:not(.learning-header) {
  min-height: 4.25rem !important;
  max-height: 4.25rem !important;
  overflow: hidden !important;
}

.learning-nav-source { display: none !important; }

html:has(.learning-header) {
  scroll-behavior: auto !important;
  scroll-padding-top: 5rem !important;
}

.learning-header {
  --nav-bg: rgba(248, 250, 252, 0.96);
  --nav-panel: #ffffff;
  --nav-ink: #0f172a;
  --nav-muted: #526176;
  --nav-line: rgba(100, 116, 139, 0.28);
  --nav-accent: #2563eb;
  --nav-soft: #eff6ff;
  position: sticky;
  top: 0;
  z-index: 80;
  min-height: 4.25rem;
  border-bottom: 1px solid var(--nav-line);
  background: var(--nav-bg);
  color: var(--nav-ink);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
  backdrop-filter: blur(18px);
}

html[data-theme="dark"] .learning-header {
  --nav-bg: rgba(7, 16, 31, 0.96);
  --nav-panel: #0f1a2d;
  --nav-ink: #edf5ff;
  --nav-muted: #aebdd1;
  --nav-line: rgba(125, 151, 184, 0.3);
  --nav-accent: #8ab4ff;
  --nav-soft: #172554;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}

.learning-header [hidden] { display: none !important; }
.learning-header a,
.learning-header button { font: inherit; }

.learning-bar {
  width: min(1280px, calc(100% - 2rem));
  height: 4.25rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(15rem, 1fr) auto auto;
  align-items: center;
  gap: 0.75rem;
}

.learning-brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--nav-ink);
  text-decoration: none;
}

.learning-brand-mark {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 0.75rem;
  background: #0f172a;
  color: #67e8f9;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.learning-brand-copy { min-width: 0; display: grid; gap: 0.08rem; }
.learning-brand-title,
.learning-location { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.learning-brand-title { color: var(--nav-ink); font-size: 0.88rem; font-weight: 950; }
.learning-location { color: var(--nav-muted); font-size: 0.69rem; font-weight: 800; }
.learning-location [data-current-route] { color: var(--nav-ink); }
.learning-location [aria-hidden="true"] { color: var(--nav-muted); padding-inline: 0.12rem; }
.learning-location [data-current-section] { color: var(--nav-accent); }

.learning-primary { display: grid; grid-template-columns: 10.25rem 6.5rem; align-items: center; gap: 0.45rem; }
.learning-actions { display: flex; align-items: center; gap: 0.45rem; }

.learning-nav-button,
.learning-header .learning-control,
.learning-header .pwa-install-button {
  height: 2.55rem !important;
  max-height: 2.55rem !important;
  min-height: 2.55rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.42rem !important;
  margin: 0 !important;
  border: 1px solid var(--nav-line) !important;
  border-radius: 0.75rem !important;
  background: var(--nav-panel) !important;
  color: var(--nav-ink) !important;
  padding: 0.55rem 0.72rem !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap;
  box-shadow: none !important;
  cursor: pointer;
}

.learning-header .learning-control,
.learning-header .pwa-install-button {
  width: 2.55rem !important;
  min-width: 2.55rem !important;
  max-width: 2.55rem !important;
}

.learning-nav-button.is-path {
  border-color: color-mix(in srgb, var(--nav-accent) 48%, var(--nav-line)) !important;
  background: var(--nav-accent) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .learning-nav-button.is-path { color: #07101f !important; }

.learning-nav-button:hover,
.learning-nav-button:focus-visible,
.learning-header .learning-control:hover,
.learning-header .learning-control:focus-visible,
.learning-header .pwa-install-button:hover,
.learning-header .pwa-install-button:focus-visible {
  border-color: var(--nav-accent) !important;
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nav-accent) 24%, transparent) !important;
}

.learning-short-label { display: none; }
.learning-actions > span { width: 2.55rem; height: 2.55rem; display: grid; place-items: center; }
.learning-header .pwa-install-button { width: 2.55rem !important; padding: 0.5rem !important; }

.learning-header .pwa-install-button > span,
.learning-header .learning-control .header-control-copy,
.learning-header .learning-control .button-copy,
.learning-header .learning-control .utility-text,
.learning-header .learning-control .control-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.learning-header .theme-toggle-track,
.learning-header .language-toggle-track { display: none !important; }

.learning-header .learning-control > :first-child,
.learning-header .pwa-install-button svg { width: 1rem !important; height: 1rem !important; flex: 0 0 auto; }

.learning-dialog {
  width: min(calc(100% - 1.5rem), 48rem);
  max-height: calc(100dvh - 1.5rem);
  margin: auto;
  border: 1px solid var(--nav-line);
  border-radius: 1.25rem;
  background: var(--nav-panel);
  color: var(--nav-ink);
  padding: 0;
  overflow: auto;
  box-shadow: 0 32px 90px rgba(15, 23, 42, 0.32);
}

.learning-dialog::backdrop { background: rgba(2, 6, 23, 0.7); backdrop-filter: blur(4px); }
.learning-dialog-inner { position: relative; padding: 1.4rem; }

.learning-dialog-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--nav-line);
  border-radius: 0.7rem;
  background: var(--nav-panel);
  color: var(--nav-muted);
  font-size: 1.25rem;
  cursor: pointer;
}

.learning-dialog-kicker {
  margin-right: 3rem;
  color: var(--nav-accent);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.learning-dialog h2 {
  margin: 0.4rem 3rem 0 0;
  color: var(--nav-ink);
  font-size: clamp(1.5rem, 4vw, 2.15rem);
  font-weight: 950;
  line-height: 1.08;
}

.learning-dialog h2 + p {
  max-width: 38rem;
  margin: 0.65rem 3rem 0 0;
  color: var(--nav-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.learning-dialog h3 {
  margin: 1.25rem 0 0.65rem;
  color: var(--nav-muted);
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.learning-path-grid,
.learning-resource-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }

.learning-path-card {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: start;
  gap: 0.7rem;
  border: 1px solid var(--nav-line);
  border-radius: 0.95rem;
  background: color-mix(in srgb, var(--nav-panel) 86%, var(--nav-soft));
  color: var(--nav-ink);
  padding: 0.85rem;
  text-decoration: none;
}

.learning-path-card:hover,
.learning-path-card:focus-visible,
.learning-section-link:hover,
.learning-section-link:focus-visible,
.learning-dialog-close:hover,
.learning-dialog-close:focus-visible {
  border-color: var(--nav-accent);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nav-accent) 22%, transparent);
}

.learning-path-card[aria-current="page"] { border-color: var(--nav-accent); background: var(--nav-soft); }

.learning-path-number {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 0.7rem;
  background: #0f172a;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 950;
}

html[data-theme="dark"] .learning-path-number { background: #e2e8f0; color: #0f172a; }
.learning-path-copy { min-width: 0; display: grid; gap: 0.2rem; }
.learning-path-copy strong { color: var(--nav-ink); font-size: 0.9rem; line-height: 1.25; }
.learning-path-copy > span { color: var(--nav-muted); font-size: 0.72rem; line-height: 1.42; }

.learning-current-badge {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  border-radius: 999px;
  background: var(--nav-accent);
  color: #ffffff;
  padding: 0.2rem 0.42rem;
  font-size: 0.55rem;
  font-weight: 950;
}

html[data-theme="dark"] .learning-current-badge { color: #07101f; }
.learning-resource-section { border-top: 1px solid var(--nav-line); margin-top: 1rem; }

.learning-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin-top: 1.15rem;
}

.learning-section-link {
  min-width: 0;
  min-height: 2.65rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  border: 1px solid var(--nav-line);
  border-radius: 0.75rem;
  background: var(--nav-panel);
  color: var(--nav-ink);
  padding: 0.58rem 0.72rem;
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1.25;
  text-decoration: none;
}

.learning-section-link[aria-current="location"] { border-color: var(--nav-accent); background: var(--nav-soft); color: var(--nav-accent); }

body :is(a, button, summary, [role="button"]):hover,
body :is(a, button, summary, [role="button"]):active { transform: none !important; }

@media (max-width: 900px) {
  body > header:not(.learning-header) { min-height: 6.85rem !important; max-height: 6.85rem !important; }
  html:has(.learning-header) { scroll-padding-top: 7.5rem !important; }
  .learning-header,
  .learning-bar { min-height: 6.85rem; }
  .learning-bar {
    width: calc(100% - 1rem);
    height: 6.85rem;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 3.65rem 2.7rem;
    column-gap: 0.5rem;
    row-gap: 0;
  }
  .learning-brand { grid-column: 1; grid-row: 1; }
  .learning-actions { grid-column: 2; grid-row: 1; }
  .learning-primary {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: start;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .learning-nav-button { width: 100%; }
}

@media (max-width: 600px) {
  .learning-brand-mark { width: 2.25rem; height: 2.25rem; }
  .learning-brand-title { font-size: 0.76rem; }
  .learning-location { max-width: 10rem; font-size: 0.59rem; }
  .learning-actions { gap: 0.28rem; }
  .learning-actions > span,
  .learning-header .pwa-install-button,
  .learning-header .learning-control {
    width: 2.35rem !important;
    min-width: 2.35rem !important;
    height: 2.35rem !important;
    min-height: 2.35rem !important;
    padding: 0.45rem !important;
  }
  .learning-wide-label { display: none; }
  .learning-short-label { display: inline; }
  .learning-dialog-inner { padding: 1.1rem; }
  .learning-path-grid,
  .learning-resource-grid,
  .learning-section-grid { grid-template-columns: 1fr; }
  .learning-dialog h2 + p { margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .learning-header *,
  .learning-dialog * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}