/* ---------------------------------------------------------------------------
   Design tokens — all measurements live here
   --------------------------------------------------------------------------- */
:root {
  /* Motion */
  --header-ease: ease;
  --header-duration: 0.35s;
  --header-duration-reduced: 0.01ms;
  --page-transition-duration: 0.35s;
  --page-transition-duration-reduced: 0.01ms;
  --page-transition-ease: ease;

  /* Colors from Beth's color palette */
  --color-balsam-green: #576664;
  --color-aquatone: #a8b6aa;
  --color-artemis: #d3a86d;
  --color-dusty-coral: #d29b83;
  --color-warm-copper: #b97054;
  --color-palette-background: #f2f1ef;
  --color-site-header: #ffffff;

  --color-bg: #f4f6f9;
  --color-text: #1a2332;
  --color-accent: #2d6cdf;
  /* --color-header-bg: #ffffff; */
  --color-header-bg: var(--color-aquatone);
  --color-header-border: transparent;
  --color-nav-link-border: rgba(26, 35, 50, 0.06);

  /* Page */
  --page-main-max-width: 100vw;
  --page-main-padding-block-start: 1.5rem;
  --page-main-padding-inline: 1.25rem;
  --page-main-padding-block-end: 3rem;
  --page-main-paragraph-margin-bottom: 1rem;

  /* Footer */
  --site-footer-padding-block: 0.625rem;
  --site-footer-padding-inline: 1.25rem;
  --site-footer-row-gap: 0.375rem;
  --site-footer-social-gap: 0.75rem;
  --site-footer-icon-size: 1.25rem;
  --site-footer-copyright-font-size: 0.8125rem;
  --site-footer-placeholder-height: 4.25rem;
  --line-height-body: 1.5;
  --line-height-none: 0;
  --space-zero: 0;
  --margin-inline-auto: auto;
  --font-weight-medium: 500;

  /* Grid nav collapse */
  --grid-nav-rows-collapsed: 0fr;
  --grid-nav-rows-expanded: 1fr;

  /* Flex track / min sizing */
  --min-size-zero: 0;
  --flex-nav-grow: 1;
  --flex-nav-shrink: 1;
  --flex-nav-basis: auto;
  --flex-brand-grow: 0;
  --flex-brand-shrink: 0;
  --flex-brand-basis: auto;

  /* Transform / position offsets */
  --translate-y-zero: 0;
  --translate-y-half-negative: -50%;
  --translate-y-full-negative: -100%;

  /* Opacity */
  --opacity-transparent: 0;

  /* Visually hidden / screen-reader-only sizing */
  --visually-hidden-size: 1px;
  --visually-hidden-margin-offset: -1px;

  /* Header shell */
  --site-header-border-width: 1px;

  /* Web component host placeholder (kept close to the real header height so
     there is no layout shift when the component upgrades). */
  --site-header-placeholder-height-mobile: 11.5rem;
  --site-header-placeholder-height-desktop: 12rem;

  /* Logo */
  --logo-size: 150px;

  /* Header brand row (mobile / stacked) */
  --header-brand-padding-block: 1rem;
  --header-brand-padding-inline-end: 4.5rem;
  --header-padding-inline-start: 4rem;

  /* Hamburger */
  --hamburger-inset-inline-end: 1rem;
  --hamburger-gap: 0.35rem;
  --hamburger-padding: 0.5rem;
  --hamburger-border-radius: 0.35rem;
  --hamburger-box-width: 1.75rem;
  --hamburger-box-height: 1.25rem;
  --hamburger-line-thickness: 3px;
  --hamburger-line-border-radius: 2px;
  --hamburger-line-rotate-open: 45deg;
  --hamburger-line-rotate-open-alt: -45deg;

  /* Position / fraction helpers */
  --fraction-half: 50%;
  --fraction-full: 100%;

  /* Focus rings */
  --focus-outline-width: 2px;
  --focus-outline-offset: 2px;
  --focus-outline-offset-negative: -2px;

  /* Main nav (mobile column) */
  --nav-list-max-width-mobile: 28rem;
  --nav-list-padding-inline-mobile: 1.25rem;
  --nav-list-padding-block-end-mobile: 1rem;
  --nav-link-padding-block-mobile: 0.85rem;
  --nav-link-padding-inline-mobile: 1.25rem;
  --nav-link-border-top-width: 1px;
  --nav-link-current-underline-offset: 0.25em;
  --nav-link-current-underline-thickness: 2px;

  /* Desktop header */
  --desktop-header-gap: 2rem;
  --desktop-header-padding-block: 1.25rem;
  --desktop-header-padding-inline-end: 2rem;
  --desktop-nav-list-row-gap: 0.5rem;
  --desktop-nav-list-column-gap: 1.5rem;
  --desktop-nav-link-padding-block: 0.35rem;
  --desktop-nav-link-padding-inline: 0.5rem;
  --desktop-nav-link-border-radius: 0.25rem;
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--page-transition-duration);
  animation-timing-function: var(--page-transition-ease);
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Always reserve the vertical-scrollbar gutter so the viewport width is the
   same on pages that scroll and pages that don't. Prevents a horizontal
   layout shift (and the visual flash that comes with it) when navigating
   between pages of different content lengths under cross-document
   View Transitions. */
html {
  scrollbar-gutter: stable;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  margin: var(--space-zero);
  font-family: Raleway, sans-serif;
  line-height: var(--line-height-body);
  color: var(--color-text);
  background: var(--color-aquatone); /*var(--color-bg);*/
}

.page-main {
  flex: 1 0 auto;
  max-width: var(--page-main-max-width);
  margin: var(--space-zero) var(--margin-inline-auto);
  padding: var(--page-main-padding-block-start) var(--page-main-padding-inline)
    var(--page-main-padding-block-end);
}

.page-main p {
  margin: var(--space-zero) var(--space-zero) var(--page-main-paragraph-margin-bottom);
}

/* ---------------------------------------------------------------------------
   Visually hide checkbox but keep it usable with label
   --------------------------------------------------------------------------- */
.nav-toggle {
  position: absolute;
  width: var(--visually-hidden-size);
  height: var(--visually-hidden-size);
  padding: var(--space-zero);
  margin: var(--visually-hidden-margin-offset);
  overflow: hidden;
  clip: rect(var(--space-zero), var(--space-zero), var(--space-zero), var(--space-zero));
  white-space: nowrap;
  border-width: var(--space-zero);
  border-style: none;
}

/* ---------------------------------------------------------------------------
   Mobile-first header: stacked, logo center, hamburger upper right
   --------------------------------------------------------------------------- */
.site-header {
  background: var(--color-header-bg);
  border-bottom: var(--site-header-border-width) solid var(--color-header-border);
}

/* ---------------------------------------------------------------------------
   <site-header> Web Component host
   - `view-transition-name` keeps the header stable across cross-document
     view transitions instead of being part of the full-page cross-fade.
   - `:not(:defined)` reserves layout space and paints a placeholder before
     the component upgrades, so there is no jump when the real markup is
     inserted.
   --------------------------------------------------------------------------- */
site-header {
  display: block;
  view-transition-name: site-header;
}

site-header:not(:defined) {
  min-height: var(--site-header-placeholder-height-mobile);
  background: var(--color-header-bg);
  border-bottom: var(--site-header-border-width) solid var(--color-header-border);
}

.header-brand {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: var(--header-brand-padding-block) var(--header-brand-padding-inline-end)
    var(--header-brand-padding-block) var(--header-padding-inline-start);
}

.logo {
  display: block;
  margin: auto;
  line-height: var(--line-height-none);
}

.logo-svg {
  display: block;
  width: var(--logo-size);
  height: var(--logo-size);
}

/* Hamburger — only interactive nav control on small screens */
.hamburger {
  position: absolute;
  inset-inline-end: var(--hamburger-inset-inline-end);
  top: var(--fraction-half);
  translate: 0 var(--translate-y-half-negative);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hamburger-gap);
  padding: var(--hamburger-padding);
  margin: var(--space-zero);
  cursor: pointer;
  color: var(--color-text);
  border-radius: var(--hamburger-border-radius);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.hamburger:focus-visible {
  outline: var(--focus-outline-width) solid var(--color-accent);
  outline-offset: var(--focus-outline-offset);
}

.hamburger-label {
  position: absolute;
  width: var(--visually-hidden-size);
  height: var(--visually-hidden-size);
  padding: var(--space-zero);
  margin: var(--visually-hidden-margin-offset);
  overflow: hidden;
  clip: rect(var(--space-zero), var(--space-zero), var(--space-zero), var(--space-zero));
  white-space: nowrap;
  border-width: var(--space-zero);
  border-style: none;
}

.hamburger-box {
  width: var(--hamburger-box-width);
  height: var(--hamburger-box-height);
  position: relative;
  display: block;
}

.hamburger-line {
  position: absolute;
  left: var(--space-zero);
  width: var(--fraction-full);
  height: var(--hamburger-line-thickness);
  border-radius: var(--hamburger-line-border-radius);
  background: currentColor;
  transition:
    transform var(--header-duration) var(--header-ease),
    opacity var(--header-duration) var(--header-ease),
    top var(--header-duration) var(--header-ease),
    translate var(--header-duration) var(--header-ease);
}

.hamburger-line:nth-child(1) {
  top: var(--space-zero);
  translate: 0 var(--translate-y-zero);
}

.hamburger-line:nth-child(2) {
  top: var(--fraction-half);
  translate: 0 var(--translate-y-half-negative);
}

.hamburger-line:nth-child(3) {
  top: var(--fraction-full);
  translate: 0 var(--translate-y-full-negative);
}

/* Icon → X (same duration as nav panel) */
.nav-toggle:checked ~ .header-brand .hamburger-line:nth-child(1) {
  top: var(--fraction-half);
  translate: 0 var(--translate-y-half-negative);
  transform: rotate(var(--hamburger-line-rotate-open));
}

.nav-toggle:checked ~ .header-brand .hamburger-line:nth-child(2) {
  opacity: var(--opacity-transparent);
}

.nav-toggle:checked ~ .header-brand .hamburger-line:nth-child(3) {
  top: var(--fraction-half);
  translate: 0 var(--translate-y-half-negative);
  transform: rotate(var(--hamburger-line-rotate-open-alt));
}

/* Collapsible nav: grid row animation pushes page content */
.main-nav {
  display: grid;
  grid-template-rows: var(--grid-nav-rows-collapsed);
  transition: grid-template-rows var(--header-duration) var(--header-ease);
}

.main-nav-inner {
  min-height: var(--min-size-zero);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-toggle:checked ~ .main-nav {
  grid-template-rows: var(--grid-nav-rows-expanded);
}

.nav-list {
  list-style: none;
  margin: var(--space-zero);
  padding: var(--space-zero) var(--nav-list-padding-inline-mobile)
    var(--nav-list-padding-block-end-mobile);
  width: var(--fraction-full);
  max-width: var(--nav-list-max-width-mobile);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-zero);
}

.nav-list a {
  display: block;
  padding: var(--nav-link-padding-block-mobile) var(--nav-link-padding-inline-mobile);
  text-align: center;
  text-decoration: none;
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  border-top: var(--nav-link-border-top-width) solid var(--color-nav-link-border);
}

.nav-list a:hover {
  color: var(--color-accent);
}

.nav-list a[aria-current="page"] {
  cursor: default;
  text-decoration-line: underline;
  text-decoration-thickness: var(--nav-link-current-underline-thickness);
  text-underline-offset: var(--nav-link-current-underline-offset);
}

.nav-list a:focus-visible {
  outline: var(--focus-outline-width) solid var(--color-accent);
  outline-offset: var(--focus-outline-offset-negative);
}

/* Desktop header overrides live in header-desktop.css, gated by the <link
   media="…"> in index.html (browsers do not apply custom properties in
   @media / @container conditions reliably). */

/* ---------------------------------------------------------------------------
   <site-footer> Web Component host
   --------------------------------------------------------------------------- */
site-footer {
  display: block;
  flex-shrink: 0;
  view-transition-name: site-footer;
}

site-footer:not(:defined) {
  min-height: var(--site-footer-placeholder-height);
  background: var(--color-balsam-green);
}

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--site-footer-row-gap);
  padding: var(--site-footer-padding-block) var(--site-footer-padding-inline);
  text-align: center;
  color: var(--color-site-header);
  background: var(--color-balsam-green);
}

.site-footer-copyright {
  margin: var(--space-zero);
  font-size: var(--site-footer-copyright-font-size);
  line-height: 1.2;
}

.site-footer-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--site-footer-social-gap);
}

.site-footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.125rem 0.25rem;
  color: inherit;
  text-decoration: none;
}

.site-footer-social-link:hover,
.site-footer-social-link:focus-visible {
  color: var(--color-artemis);
}

.site-footer-social-link:focus-visible {
  outline: var(--focus-outline-width) solid var(--color-artemis);
  outline-offset: var(--focus-outline-offset-negative);
}

.site-footer-icon {
  display: block;
  width: var(--site-footer-icon-size);
  height: var(--site-footer-icon-size);
}

/* ---------------------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --header-duration: var(--header-duration-reduced);
    --page-transition-duration: var(--page-transition-duration-reduced);
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: var(--page-transition-duration-reduced) !important;
  }
}