/**
 * YWA Chrome — site header and footer
 * ---------------------------------------------------------------------------
 * Built against the `Nav`, `Footer` and `Footer / Mobile` components in the
 * live Figma file (read 2026-07-20).
 *
 * This is the shared chrome: the /whiffs Media Library app pulls in the same
 * header.php and footer.php, so these styles govern BOTH applications. Keep
 * selectors scoped to .site-header / .site-footer so nothing leaks into
 * page content.
 *
 * Every value routes through a token. Where a measurement came from the Figma
 * components rather than the token scales, it is marked MEASURED.
 */

/* ===========================================================================
   HEADER
   =========================================================================== */

.site-header {
  position: relative;
  z-index: var(--z-sticky);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-800);
  min-height: 72px; /* trimmed from the Figma's 80px (2026-07-23) — reads
                       lighter under the smaller hero title. The buttons +
                       padding actually drive the height, so the tighter
                       padding-block below is what does the trimming. */
  padding-block: var(--space-300);
}

/* --- treatments ----------------------------------------------------------
   The Figma set has two: a near-black bar, and transparent for sitting over
   a hero image. Both use inverse text. Default is solid. */

.site-header--solid {
  background-color: var(--color-surface-inverse);
}

.site-header--transparent {
  background-color: transparent;
}

.site-header--solid,
.site-header--transparent {
  color: var(--color-text-inverse);
}

/* --- brand --------------------------------------------------------------- */

.site-header__brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-inline-end: auto; /* pushes nav and actions to the right */
  text-decoration: none;
}

.site-header__crest {
  display: block;
  height: 36px; /* MEASURED */
  width: auto;
}

/* --- primary links ------------------------------------------------------- */

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-800); /* MEASURED — generous spacing between nav items */
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__list li {
  margin: 0;
}

.site-nav__list a {
  color: var(--color-text-inverse);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--motion-duration-fast) var(--motion-easing-standard);
}

.site-nav__list a:hover {
  opacity: 0.7;
}

/* Current page gets a quiet underline rather than a colour change, since the
   bar is already inverse and colour contrast is limited here. */
.site-nav__list .current-menu-item > a {
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

/* --- header buttons (Shop, Media Library) --------------------------------
   Outlined, square — matching the `Button` component set, which is radius 0
   across all ten variants. Rendered from menu items, so they are styled here
   rather than carrying .btn classes an editor would have to remember. */

.site-header__actions-list {
  display: flex;
  align-items: center;
  gap: var(--space-300);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header__actions-list li {
  margin: 0;
}

.site-header__actions-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-300) var(--space-500); /* matches the Button component */
  border: 1px solid currentColor;
  border-radius: var(--radius-none);
  color: var(--color-text-inverse);
  font-family: var(--type-family-brand);
  font-size: var(--type-size-action);
  font-weight: var(--type-weight-regular);        /* Book — matched to the nav links (2026-07-23) */
  letter-spacing: var(--type-tracking-nav);        /* same 0.022em as the nav lane */
  line-height: var(--type-leading-tight);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--motion-duration-fast) var(--motion-easing-standard),
    color var(--motion-duration-fast) var(--motion-easing-standard);
}

.site-header__actions-list a:hover {
  background-color: var(--color-text-inverse);
  color: var(--color-surface-inverse);
}

/* --- mobile toggle ------------------------------------------------------- */

.site-nav__toggle {
  display: none;
  flex: 0 0 auto;
  padding: var(--space-200);
  color: inherit;
}

/* Hamburger drawn in CSS rather than shipped as an icon file */
.site-nav__bars,
.site-nav__bars::before,
.site-nav__bars::after {
  display: block;
  width: 24px;
  height: 2px;
  background-color: currentColor;
  transition: transform var(--motion-duration-standard) var(--motion-easing-standard);
}

.site-nav__bars {
  position: relative;
}

.site-nav__bars::before,
.site-nav__bars::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
}

.site-nav__bars::before { top: -7px; }
.site-nav__bars::after  { top: 7px; }

/* Open state — bars cross into an X */
[aria-expanded="true"] .site-nav__bars {
  background-color: transparent;
}

[aria-expanded="true"] .site-nav__bars::before {
  transform: translateY(7px) rotate(45deg);
}

[aria-expanded="true"] .site-nav__bars::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- mobile drawer ------------------------------------------------------- */

/* The overlay: a full-screen scrim that dims the hero; the panel is anchored to
   the right. This is the fix for the earlier lopsided full-width band — the panel
   is sized to its content, the scrim covers everything so there's no patchwork. */
.site-nav-mobile {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;                          /* shown (flex) only when open + ≤1023, see breakpoint */
  justify-content: flex-end;              /* panel hugs the right edge */
  background-color: rgba(0, 0, 0, 0.55);  /* scrim — evenly dims the hero behind the panel */
}

.site-nav-mobile[hidden] {
  display: none;
}

/* The panel: a right-anchored column sized to its content, on the scrim. */
.site-nav-mobile__panel {
  display: flex;
  flex-direction: column;
  width: min(340px, 84vw);
  height: 100%;
  padding: var(--space-800) var(--space-800) var(--space-1000);
  background-color: rgba(0, 0, 0, 0.92);  /* high-opacity black — the dimmed hero reads faintly behind it */
  color: var(--color-text-inverse);
  overflow-y: auto;
}

.site-nav-mobile__close {
  align-self: flex-end;                   /* X at the panel's top-right */
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-block-end: var(--space-600);
  padding: 0;
  color: var(--color-text-inverse);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.site-nav-mobile__close svg { width: 22px; height: 22px; }

.site-nav-mobile__list,
.site-nav-mobile__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-500);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav-mobile__list li,
.site-nav-mobile__actions li {
  margin: 0;
}

.site-nav-mobile__list a {
  color: var(--color-text-inverse);
  font-size: 1.25rem;                     /* 20px — a takeover scale, not the 16px bar nav */
  text-decoration: none;
}

.site-nav-mobile__actions {
  margin-block-start: var(--space-800);   /* sits just below the nav, divider between */
  padding-block-start: var(--space-800);
  border-top: 1px solid rgba(255, 255, 255, 0.16);  /* divider — spans the panel, separating utilities from the nav */
  gap: var(--space-400);
}

.site-nav-mobile__actions a {
  display: block;
  width: 100%;                            /* full panel width — clean in a contained panel */
  text-align: center;
  padding: var(--space-300) var(--space-500);
  border: 1px solid currentColor;
  color: var(--color-text-inverse);
  font-family: var(--type-family-brand);
  font-size: var(--type-size-action);
  font-weight: var(--type-weight-regular);        /* Book — matched to the nav links */
  letter-spacing: var(--type-tracking-nav);
  text-decoration: none;
}

/* --- breakpoint ----------------------------------------------------------
   The full horizontal nav needs room for five links plus two buttons, so it
   collapses at lg (1024px) rather than md. Tablet gets the mobile drawer. */

@media (max-width: 1023px) {
  .site-nav,
  .site-header__actions {
    display: none;
  }

  .site-nav__toggle {
    display: block;
  }

  .site-nav-mobile:not([hidden]) {
    display: flex;
  }

  .site-header__inner {
    min-height: 64px; /* MEASURED — shorter mobile bar */
  }
}

/* ===========================================================================
   FOOTER
   ---------------------------------------------------------------------------
   Light canvas, red crest. NOT surface.sunken — a footer is not a well, it is
   a plain full-width region, so it takes canvas per the elevation-first rule.
   =========================================================================== */

.site-footer {
  background-color: var(--color-surface-canvas);
  padding-block: var(--space-2400) var(--space-1200);

  /* The whiff-red rule above the footer. It belongs HERE rather than to the
     last section on the page: every design has it, on every page, whatever
     section happens to end that page. It used to arrive only because the
     homepage's final section block emitted a trailing seam — which meant an
     interior page, composed of blocks that emit none, had no rule at all.
     Verified against the designs by scanning for rows of the accent colour:
     Home has five (one between each section, plus this one), while About,
     Contact, Donation and News & Events have exactly one, right here. */
  border-block-start: 4px solid var(--color-accent-default); /* MEASURED — design red-strip is 4px */
}

/* The homepage's own trailing seam would now sit directly on top of the
   footer's rule and read as an 8px band. A seam is only ever emitted as a
   section's trailing sibling, so one that is its parent's last child is by
   definition the one abutting the footer — suppress that one, keep the rest. */
.home-section-seam:last-child { display: none; }

.site-footer__inner {
  display: flex;
  flex-direction: column;
}

.site-footer__brand {
  display: inline-flex;
  align-self: flex-start;
  text-decoration: none;
}

.site-footer__crest {
  display: block;
  height: 37px; /* MEASURED */
  width: auto;
}

.site-footer__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1000); /* MEASURED — wide gaps in the single-row layout */
  margin: 0;
  padding: 0;
  margin-block-start: var(--space-1000);
  list-style: none;
}

.site-footer__list li {
  margin: 0;
}

.site-footer__list a {
  color: var(--color-text-default);
  text-decoration: none;
  white-space: nowrap;
}

.site-footer__list a:hover {
  color: var(--color-accent-text);
}

.site-footer__rule {
  width: 100%;
  height: 1px;
  border: 0;
  background-color: var(--color-border-default);
  margin-block: var(--space-1600) var(--space-800);
}

/* --- legal row ----------------------------------------------------------- */

.site-footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-600);
  flex-wrap: wrap;
}

.site-footer__copyright {
  margin: 0;
  color: var(--color-text-subdued);
}

.site-footer__legal-list {
  display: flex;
  align-items: center;
  gap: var(--space-800);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__legal-list li {
  margin: 0;
}

.site-footer__legal-list a {
  color: var(--color-text-subdued);
  text-decoration: none;
  white-space: nowrap;
}

/* Underline on hover — the plain convention for a text link, and the clearest
   affordance for these small grey legal links. The colour also lifts from
   subdued to default; that darkening is a standard "muted link brightens on
   hover" pattern and both ends are tokens, so it stays. */
.site-footer__legal-list a:hover {
  color: var(--color-text-default);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* --- mobile --------------------------------------------------------------
   Everything centres and stacks. Note the ORDER INVERSION: on desktop the
   copyright leads and legal links sit right; on mobile the legal links come
   first and the copyright goes last. Done with `order` rather than duplicated
   markup, so there is one source of truth. */

@media (max-width: 767px) {
  .site-footer {
    padding-block: var(--space-1600) var(--space-1200);
    text-align: center;
  }

  .site-footer__inner {
    align-items: center;
  }

  .site-footer__brand {
    align-self: center;
  }

  .site-footer__list {
    flex-direction: column;
    gap: var(--space-500);
    align-items: center;
  }

  .site-footer__rule {
    width: 60%; /* MEASURED — the mobile rule is inset, not full-bleed */
  }

  .site-footer__legal {
    flex-direction: column;
    gap: var(--space-600);
  }

  .site-footer__legal-list {
    flex-direction: column;
    gap: var(--space-400);
  }

  /* the inversion */
  .site-footer__legal-nav { order: 1; }
  .site-footer__copyright { order: 2; }
}