/* ── Brand logo ─────────────────────────────────────────────── */
/* The SVG has empty space around the letters (20.21 of 85.67 units on the left): the
   negative margin lines the letters up with the content edge. */
.brand-logo { --brand-logo-height: 70px; display: block; height: var(--brand-logo-height); width: auto; margin-left: calc(var(--brand-logo-height) * -20.21 / 85.67); color: var(--color-white); }
.brand-logo--accent { color: var(--color-accent); }

/* ── Header ─────────────────────────────────────────────────── */
.site-header { position: relative; z-index: 20; color: var(--color-white); }
/* Stays in view while scrolling, like the home header, but keeps its place in the layout. */
.site-header--solid { position: sticky; top: 0; background: var(--color-accent); }
.site-header--overlay { position: absolute; top: 0; left: 0; right: 0; }
/* The shade that keeps the white menu readable on the hero photo. */
.site-header--overlay::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0)); }

/* Where scroll-driven animations exist, the header stays in view and turns into the
   solid orange bar as the hero scrolls past - white on a light section is unreadable.
   Without that support it stays absolute and simply scrolls away with the hero. */
@supports (animation-timeline: scroll()) {
  .site-header--overlay {
    position: fixed;
    animation: header-solidify linear both;
    animation-timeline: scroll(root block);
    animation-range: calc(var(--home-hero-height) - var(--header-height) - 120px) calc(var(--home-hero-height) - var(--header-height));
  }
  .site-header--overlay::before {
    animation: header-shade-out linear both;
    animation-timeline: scroll(root block);
    animation-range: calc(var(--home-hero-height) - var(--header-height) - 120px) calc(var(--home-hero-height) - var(--header-height));
  }
  @keyframes header-solidify { to { background-color: var(--color-accent); } }
  @keyframes header-shade-out { to { opacity: 0; } }

  /* Reduced motion disables animations site-wide, which would leave the fixed header
     transparent over light sections, so fall back to the scrolling header. */
  @media (prefers-reduced-motion: reduce) {
    .site-header--overlay { position: absolute; }
  }
}
/* Mobile (header.js adds --autohide): the header slides out of view while scrolling down
   and back in while scrolling up. On home it replaces the scroll-driven animation above
   with a class that header.js sets once the hero has scrolled past. */
.site-header--autohide { transition: transform 0.25s ease, background-color 0.25s ease; }
.site-header--autohide.site-header--hidden { transform: translateY(-100%); }
.site-header--overlay.site-header--autohide { position: fixed; animation: none; }
.site-header--overlay.site-header--autohide::before { animation: none; transition: opacity 0.25s ease; }
.site-header--overlay.site-header--scrolled { background-color: var(--color-accent); }
.site-header--overlay.site-header--scrolled::before { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .site-header--autohide, .site-header--autohide::before { transition: none; }
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-height); margin-inline: 0; }
.site-nav { display: flex; gap: 32px; }
.site-nav a { display: inline-block; font-size: 18px; font-weight: 900; line-height: 1.2; padding-block: 6px; border-bottom: 2px solid transparent; transition: border-color var(--transition); }
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: currentColor; }
.site-header--overlay .site-nav a { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer__main { background: var(--color-sand); padding-block: 48px 72px; }
/* Flex with wrapping, not a fixed three-column grid: with a large font scale (zoom-font.js) the columns move below
   the logo, and a column that is still too wide wraps its text, instead of the footer growing wider than the screen. */
.site-footer__grid { display: flex; flex-wrap: wrap; gap: 32px 64px; align-items: flex-start; }
.site-footer__brand { flex: 1 1 auto; }
.site-footer__column { min-width: 0; overflow-wrap: anywhere; }
.site-footer__heading { font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--color-accent); }
.site-footer__column p { font-size: 15px; line-height: 1.6; }
.site-footer__column a:hover { text-decoration: underline; }
.site-footer__bar { background: var(--color-accent); color: var(--color-white); font-size: 12px; line-height: 1.4; }
.site-footer__bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; min-height: 40px; padding-block: 8px; }
.site-footer__bar a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .site-footer__grid { flex-direction: column; }
}
@media (max-width: 600px) {
    .site-header__inner { gap: 16px; }
    .site-nav { gap: 12px; }
  .site-nav a { font-size: 16px; }
  .brand-logo { --brand-logo-height: 58px; }
}
/* On the narrowest phones the logo (a link to home) has to make room for the menu. */
@media (max-width: 360px) {
  .site-nav__home { display: none; }
}