/* The Perslis section row, carried by every page directly above its footer.
   Emitted by scripts/build_topnav.py between <!--sections--> and <!--/sections-->.

   Self-contained on purpose: the site has two page shells with opposite
   footers — the main site's is cream (styles.css --cream-2), every micro-site
   and standalone footer is near-black (#06090f) — and this row has to read as
   part of whichever one it is sitting on. build_topnav picks .on-light or
   .on-dark from the shell, and each variant copies that footer's own
   background and gutter so the two left edges land on one vertical.

   Every selector here names its element as well as its class. Each shell
   styles bare h2 and bare a with a class of context of its own
   (.peel-site h2, .mo-site a, …), and that is enough to outrank a lone class.
   One extra element per selector wins on all of them without !important. */

section.site-sections {
  padding-top: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(18px, 2.4vw, 32px);
}

/* The inner box, not the band, carries the gutter on the light shell, so the
   row's first letter lands on the same vertical as the footer column below. */
section.site-sections .site-sections-inner {
  margin: 0 auto;
  padding-left: clamp(20px, 5vw, 64px);
  padding-right: clamp(20px, 5vw, 64px);
}

section.site-sections h2.site-sections-label {
  display: block;
  margin: 0 0 clamp(10px, 1.4vw, 16px);
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .18em;
  text-transform: uppercase;
}

section.site-sections nav.site-sections-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 26px) clamp(20px, 3.4vw, 46px);
  align-items: baseline;
}

section.site-sections nav.site-sections-row a {
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  text-decoration: none;
  transition: color .2s;
}

section.site-sections nav.site-sections-row a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 4px;
}

/* ---- on a micro-site: black footer, so the row is the same black ----
   peel-site.css gutters that footer with
     padding: 48px max(28px, calc((100vw - 1104px) / 2))
   on a full-bleed element. Copying it exactly is what lines the two up. */
section.site-sections.on-dark {
  background: #06090f;
  border-top: 1px solid rgba(155, 180, 210, .12);
  padding-left: max(28px, calc((100vw - 1104px) / 2));
  padding-right: max(28px, calc((100vw - 1104px) / 2));
}
section.site-sections.on-dark .site-sections-inner { padding-left: 0; padding-right: 0; }
section.site-sections.on-dark h2.site-sections-label { color: #6e6e76; }
section.site-sections.on-dark nav.site-sections-row a { color: #9aa6b6; }
section.site-sections.on-dark nav.site-sections-row a:hover,
section.site-sections.on-dark nav.site-sections-row a:focus-visible { color: #fff; }
section.site-sections.on-dark nav.site-sections-row a[aria-current="page"] { color: #75b7ff; }

/* ---- on the main site: cream footer, so the row is the same cream ----
   styles.css gutters .footer-inner with max-width 1120px and the same clamp. */
section.site-sections.on-light {
  background: #f2eee4;
  border-top: 1px solid rgba(26, 26, 46, .10);
}
section.site-sections.on-light .site-sections-inner { max-width: 1120px; }
section.site-sections.on-light h2.site-sections-label { color: #6b6456; }
section.site-sections.on-light nav.site-sections-row a { color: #3a4452; }
section.site-sections.on-light nav.site-sections-row a:hover,
section.site-sections.on-light nav.site-sections-row a:focus-visible { color: #11161d; }
section.site-sections.on-light nav.site-sections-row a[aria-current="page"] { color: #1a6fbe; }

/* The main site's footer draws its own top border; two in a row would stripe. */
section.site-sections.on-light + .site-footer { border-top: 0; }

@media (max-width: 620px) {
  section.site-sections nav.site-sections-row { gap: 10px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  section.site-sections nav.site-sections-row a { transition: none; }
}

/* ------------------------------------------------------------------ the top
   A page's own navigation now lives in the slot the section row used to hold:
   the right-hand side of the brand row. It carries more links than the five
   section names did, so it is allowed to wrap, and the language toggle is
   pushed to the end of the line. */

.peel-global.has-chapters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 20px;
}

.peel-global.has-chapters .lang-toggle { margin-left: 4px; }

/* The micro-site's current chapter, marked the way the old second row did. */
.peel-global.has-chapters a[aria-current="page"] {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* The section's call to action keeps its weight in the new row. */
.peel-global.has-chapters .peel-nav-demo { color: #82decf; font-weight: 600; }
.peel-global.has-chapters .peel-nav-demo:hover { color: #a2ecdf; }

/* The main site's menu, in the same slot, with the same freedom to wrap. */
header.nav .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px 18px;
}

@media (max-width: 900px) {
  .peel-global.has-chapters,
  header.nav .nav-links { justify-content: flex-start; }
}