/* ==========================================================================
   Region header — the second bar, shown under the site header on region
   pages. Same chain language as header.css but lighter: sand background,
   ink text, smaller dots. Fully scoped under .gh-regionbar; self-contained
   like header.css (fonts shared via the same @import URL, deduped by the
   browser).
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=IBM+Plex+Mono:wght@400;500&display=swap");

.gh-regionbar {
  --gh-ink: #102b3b;
  --gh-ink-soft: #35505f;
  --gh-sand: #e8e2d4;
  --gh-reef-deep: #075c55;
  --gh-display: "Bricolage Grotesque", system-ui, sans-serif;
  --gh-mono: "IBM Plex Mono", ui-monospace, monospace;

  position: relative;
  z-index: 59;
  margin: 0;
  background: var(--gh-sand);
  border-bottom: 1px solid rgba(16, 43, 59, 0.15);
  color: var(--gh-ink);
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
}
.gh-regionbar-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.5rem clamp(1rem, 4vw, 2.5rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.5rem;
}
.gh-regionbar a { color: var(--gh-ink-soft); text-decoration: none; }
.gh-regionbar a:focus-visible { outline: 3px solid var(--gh-reef-deep); outline-offset: 2px; border-radius: 2px; }

.gh-regionbar-label {
  font-family: var(--gh-mono); font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gh-reef-deep);
  padding-right: 1.25rem; border-right: 1px solid rgba(16, 43, 59, 0.18);
}
.gh-regionbar .gh-regionbar-label:hover { text-decoration: underline; }

.gh-regionbar ol {
  display: flex; flex-wrap: wrap; gap: 0.1rem 1.2rem;
  margin: 0; padding: 0; list-style: none;
}
.gh-regionbar li { margin: 0; padding: 0; }
.gh-regionbar ol a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--gh-display); font-weight: 600; font-size: 0.86rem;
  letter-spacing: normal; text-transform: none;
  padding: 0.25rem 0; opacity: 1;
}
.gh-regionbar-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: 0.45; flex: none;
}
.gh-regionbar ol a:hover { color: var(--gh-ink); }
.gh-regionbar ol a[aria-current="page"] { color: var(--gh-ink); }
.gh-regionbar ol a[aria-current="page"] .gh-regionbar-dot { opacity: 1; background: var(--gh-reef-deep); }