/*
  Site frame: fixed top nav, footer, body offset.
  Chrome is present on every page; individual pages may opt out of the footer.
*/

body {
  padding-block-start: var(--nav-height);
}

/* ---- Fixed top navigation ---- */

.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  block-size: var(--nav-height);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding-inline: max(var(--space-md), calc((100vw - var(--width-content)) / 2));
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.4) blur(8px);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--border-light);
  font-family: var(--font-ui);
}
.site-brand {
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--brand);
  text-decoration: none;
  font-size: .95rem;
}
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: clamp(.5rem, 2vw, 2rem);
  align-items: center;
}
.site-nav a {
  padding: .5rem .7rem;
  color: var(--ink-muted);
  text-decoration: none;
  font-weight: 700;
  font-size: .9rem;
  border-radius: var(--radius-sm);
  transition: color var(--duration-normal), background var(--duration-normal);
}
.site-nav a:hover,
.site-nav a:focus-visible { color: var(--brand); background: var(--bg-tint-teal); }
.site-nav [aria-current="page"] { color: var(--brand); background: var(--bg-tint-teal); }

/* ---- Site footer ---- */

.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, .75);
  padding: var(--space-lg) max(var(--space-md), calc((100vw - var(--width-content)) / 2));
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  justify-content: space-between;
}
.site-footer .colophon {
  font-size: .85rem;
  color: rgba(255, 255, 255, .55);
  margin: 0;
}

/* ---- Language switcher (used in footer) ---- */

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .95rem;
}
.lang-switch button {
  color: rgba(255, 255, 255, .75);
  padding: .3rem .5rem;
  border-radius: var(--radius-sm);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: transparent;
}
.lang-switch button:hover { color: white; background: rgba(255, 255, 255, .1); }
.lang-switch button[aria-current="true"] {
  color: white;
  font-weight: 700;
  text-decoration-color: currentColor;
}

/* ---- Skip-to-content link (reveals on focus) ---- */

.skip-to-content {
  position: absolute;
  top: -10rem;
  left: var(--space-md);
  z-index: 100;
  padding: .5rem 1rem;
  background: var(--brand);
  color: white;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.skip-to-content:focus { top: calc(var(--nav-height) + var(--space-xs)); }

/* ---- Anchor landing: duck under the fixed nav ---- */
:target { scroll-margin-top: calc(var(--nav-height) + 1rem); }