/* ============================================================================
   Oli's Anecdotes — content-page navigation bar
   ----------------------------------------------------------------------------
   Injected into the standalone content pages so the site is navigable from
   anywhere. Deliberately NOT site.css:

     - heroes.html and childrens-guide.html already define `.wrap`, and the
       explainer/landscape/devops pages already define `.card`, `.grid`,
       `.chip` and `.hero` via Tailwind. Loading site.css into them would
       silently restyle their content.
     - So every selector here is prefixed `.oa-` and nothing is global except
       one rule that pushes an existing sticky header down (see bottom).

   Colours come from oli-dark.css variables where available, with literal
   fallbacks because childrens-guide.html does not load the design system.
   ========================================================================== */

/* Fallbacks only. The real values are theme tokens generated into
   oli-dark.css from the CMS, so the header's density is editable in the admin
   like every other design decision. Pages that don't load the design system
   (heroes, childrens-guide) fall back to these. */
:root {
  --oa-bar-h: 54px;
  --oa-bar-brand: 15px;
  --oa-bar-nav: 13px;
}

.oa-bar {
  position: sticky; top: 0; z-index: 9999;
  height: var(--oa-bar-h, 54px);
  display: flex; align-items: center; gap: 14px;
  padding: 0 20px;
  background: color-mix(in srgb, var(--md-surface-low, #141821) 88%, transparent);
  border-bottom: 1px solid var(--md-outline-variant, #333A46);
  backdrop-filter: blur(12px) saturate(1.2);
  font-family: var(--md-font, 'Roboto Flex MD', Roboto, 'Segoe UI', system-ui, sans-serif);
  font-size: var(--oa-bar-nav, 13px);
  color: var(--md-on-surface-variant, #B6BCC8);
  transition: background .3s ease, border-color .3s ease;
  box-sizing: border-box;
  /* Clips to the fixed bar height; .oa-nav below is the thing that actually
     scrolls (horizontally, via its own overflow-x: auto) when the links
     don't fit — this just stops that scroller's contents from growing the
     bar itself. */
  overflow: hidden;
}
.oa-bar * { box-sizing: border-box; }

/* The landing bar sits over the hero art: transparent until scrolled. Only a
   state — height, type and spacing are identical to every other page, so the
   header never reads as a different component. */
.oa-bar:not(.is-solid) {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}
body.oa-over-hero .oa-bar.is-solid {
  background: color-mix(in srgb, var(--md-surface-low, #141821) 88%, transparent);
  border-bottom-color: var(--md-outline-variant, #333A46);
  backdrop-filter: blur(12px) saturate(1.2);
}
/* Every page that is NOT over a hero is solid from the start. */
body:not(.oa-over-hero) .oa-bar { background: color-mix(in srgb, var(--md-surface-low, #141821) 88%, transparent); border-bottom-color: var(--md-outline-variant, #333A46); backdrop-filter: blur(12px) saturate(1.2); }

.oa-home {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--md-on-surface, #E3E6EC);
  font-weight: 700; letter-spacing: -.02em; font-size: var(--oa-bar-brand, 15px);
  white-space: nowrap;
}
.oa-home img { height: 24px; width: auto; display: block; }

/* Tagline rides with the brand on the landing page, where there is no
   breadcrumb competing for the line. Dropped early — it is the first thing
   that should go when space is tight. */
.oa-tagline {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--md-on-surface-variant, #B6BCC8); opacity: .75;
  white-space: nowrap;
}
@media (max-width: 900px) { .oa-tagline { display: none; } }
.oa-home .oa-accent { color: var(--md-primary, #B69DF8); }
.oa-home:hover { opacity: .82; }

.oa-sep { color: var(--md-outline, #8A92A0); opacity: .6; }

.oa-crumb {
  text-decoration: none; color: var(--md-secondary, #8FC3FF);
  white-space: nowrap;
}
.oa-crumb:hover { text-decoration: underline; }

/* min-width:0 lets this flex item shrink below its content width — without
   it the nowrap links force the whole document wider than the viewport.
   Overflow scrolls inside the bar instead, scrollbar hidden so the 42px
   bar height is unaffected. */
.oa-nav {
  display: flex; gap: 2px; margin-left: auto;
  min-width: 0; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.oa-nav::-webkit-scrollbar { display: none; }
.oa-nav a {
  text-decoration: none; color: var(--md-on-surface-variant, #B6BCC8);
  padding: 7px 14px; border-radius: 9999px;
  border: 1px solid transparent; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.oa-nav a:hover {
  background: rgba(182, 157, 248, .10);
  color: var(--md-on-surface, #E3E6EC);
  border-color: var(--md-primary-container, #463371);
}
.oa-nav a[aria-current="page"] {
  color: var(--md-primary, #B69DF8);
  border-color: var(--md-primary-container, #463371);
  background: rgba(182, 157, 248, .10);
}
.oa-nav a.oa-planned { opacity: .4; cursor: default; }
.oa-nav a.oa-planned:hover { background: none; color: var(--md-on-surface-variant, #B6BCC8); }

/* --- Sibling navigation (previous / next) ----------------------------------
   Injected by pagebar.js onto pages that have no next-nav of their own — the
   five raw-HTML pages. The twelve Markdown articles get theirs from the doc
   template and style it from article.css, which these pages never load, so
   the same look is reproduced here with literal fallbacks. Namespaced
   `.oa-next-nav` so it cannot restyle the doc pages' version. */
.oa-next-nav {
  display: grid; gap: 12px; grid-template-columns: 1fr 1fr;
  max-width: 760px; margin: 56px auto 0; padding: 0 16px;
  box-sizing: border-box;
  font-family: var(--md-font, 'Roboto Flex MD', Roboto, 'Segoe UI', system-ui, sans-serif);
}
.oa-next-nav a {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--md-outline-variant, #333A46);
  border-radius: var(--md-shape-lg, 16px);
  background: var(--md-surface-c, #171C26);
  padding: 16px;
  transition: background .15s ease, border-color .15s ease, transform .2s ease;
}
.oa-next-nav a:hover {
  background: var(--md-surface-high, #1E2430);
  border-color: var(--md-primary-container, #463371);
  transform: translateY(-2px);
}
.oa-next-nav a:focus-visible { outline: 2px solid var(--md-primary, #B69DF8); outline-offset: 3px; }
.oa-next-nav .nn-label {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--md-teal, #4DD0C0); margin: 0 0 4px;
}
.oa-next-nav .nn-title { font-size: 14px; font-weight: 600; color: var(--md-on-surface, #E3E6EC); margin: 0; }
.oa-next-nav .nn-blurb {
  font-size: 13px; color: var(--md-on-surface-variant, #B6BCC8); margin: 4px 0 0;
  line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 620px) { .oa-next-nav { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .oa-next-nav a:hover { transform: none; } }

/* --- Shared page footer ----------------------------------------------------
   Injected by pagebar.js onto content pages that have none of their own, so
   every page on the site ends the same way. Matches the .site footer that
   shell.js renders on the landing and section pages. Literal fallbacks again,
   because childrens-guide.html does not load the design system. */
.oa-foot {
  margin-top: 56px;
  padding: 24px 16px 40px;
  border-top: 1px solid var(--md-outline-variant, #333A46);
  font-family: var(--md-font, 'Roboto Flex MD', Roboto, 'Segoe UI', system-ui, sans-serif);
  font-size: 11px;
  line-height: 1.6;
  color: var(--md-on-surface-variant, #B6BCC8);
  box-sizing: border-box;
}
.oa-foot p { margin: 0 0 8px; max-width: 78ch; }
.oa-foot p:last-child { margin-bottom: 0; }
.oa-foot a { color: var(--md-secondary, #8FC3FF); }

/* --- The one non-namespaced rule ------------------------------------------
   explainer / landscape / devops carry their own `sticky top-0 z-40` header.
   Without this they would sit UNDER the bar and both would stick at 0.
   Pushing them down by the bar height stacks them cleanly instead. */
body > header.sticky { top: var(--oa-bar-h) !important; }

@media (max-width: 620px) {
  .oa-bar { gap: 9px; padding: 0 11px; }
  .oa-crumb, .oa-sep { display: none; }
  .oa-nav a { padding: 5px 9px; }
}