/* Site header and footer, shared across every page. Built on tokens.css and
   base.css; component styles only, nothing page-specific lives here. */

.logo {
  display: inline-flex;
  text-decoration: none;
}

/* Brand lockup as a mask so one asset serves every color context
   (blue header, white footer, off-white nav overlay). */
.logo-mark {
  display: block;
  width: 158.57px;
  height: 31.81px;
  background: currentColor;
  -webkit-mask: url("../img/logo-lockup.svg") center / contain no-repeat;
  mask: url("../img/logo-lockup.svg") center / contain no-repeat;
}

/* Three-part row mirroring the Figma frame: fixed logo and CTA columns
   (177.454 / 192px, 10px gaps, CTA inset 10px) with the nav centered in the
   remaining space — its center sits at x 632.7 of the 1280 row, not 640. */
.brand-row {
  display: grid;
  grid-template-columns: 177.454px 1fr 192px;
  gap: 10px;
  align-items: center;
}

.brand-row > .logo {
  justify-self: start;
}

.brand-row > .btn-cta {
  justify-self: end;
  margin-right: 10px;
}

/* ---------- Header ---------- */

.site-header {
  padding-top: var(--space-40);
}

.site-header .logo {
  color: var(--dozen-blue);
}

.site-header__row {
  height: 78px;
}

.site-header__nav {
  display: none;
  justify-self: center;
}

.site-header__nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
}

.site-header__nav-list a {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: 1rem;
  line-height: 1.40625;
  color: var(--dozen-dark);
  text-decoration: none;
}

@media (min-width: 1024px) {
  .site-header__nav {
    display: block;
  }

  .site-header__nav-list {
    gap: clamp(2rem, -9.5385rem + 18.0288vw, 6.6875rem);
  }
}

@media (max-width: 1023.98px) {
  .site-header__row {
    height: auto;
    padding-block: 0; /* the mobile board's header row is bare 43.7px */
  }

  /* With JS the header collapses to wordmark + hamburger, mirroring the open
     menu's top row, since the mobile designs have no closed-state header to
     copy. Without JS the stacked fallback below applies. */
  .js .site-header .brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .js .site-header .brand-row > .btn-cta {
    display: none;
  }

  .js .nav-toggle {
    display: block;
  }
}

/* ---------- Mobile nav (hamburger + full-screen overlay) ---------- */

.nav-toggle {
  display: none;
  position: relative;
  z-index: 11;
  border: 0;
  background: none;
  padding: 6px; /* 43.7x38 control frame around the 31.8px mark, per Figma */
  cursor: pointer;
}

/* The menu control is the Dozen "D" mark per the mobile boards: blue in the
   closed header, teal inside the open overlay (where it closes the menu). */
.nav-toggle__mark {
  display: block;
  width: 31.8px;
  height: 31.86px;
  background: var(--dozen-blue);
  -webkit-mask: url("../img/logo-d.svg") center / contain no-repeat;
  mask: url("../img/logo-d.svg") center / contain no-repeat;
  transition: background-color 0.25s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__mark {
  background: var(--dozen-teal);
}

/* Figma "navigation" frame: dozen-blue panel, pad 40; wordmark row up top,
   teal menu 138px below it, CTA pinned to the bottom edge. */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: var(--space-40);
  background: var(--dozen-blue);
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.3s ease,
    visibility 0s 0.3s;
}

.nav-overlay.is-open {
  visibility: visible;
  opacity: 1;
  transition:
    opacity 0.3s ease,
    visibility 0s;
}

.nav-overlay__wordmark {
  color: var(--off-white);
}

.nav-overlay nav {
  margin-top: 138px;
  margin-bottom: auto;
}

.nav-overlay__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem; /* 32px per the nav frame; no spacing token matches */
  list-style: none;
  padding: 0;
}

.nav-overlay__list a {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: 2.25rem;
  line-height: 1.2;
  color: var(--dozen-teal);
  text-decoration: none;
}

.nav-overlay__list a:hover,
.nav-overlay__list a:focus-visible {
  color: var(--pure-white);
}

.nav-overlay__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-20);
  border: 1px solid var(--pure-white);
  border-radius: 60px;
  background: var(--gradient-blue-deep);
  font-family: var(--font-body);
  font-weight: var(--weight-heading);
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: -0.7px;
  color: var(--pure-white);
  text-decoration: none;
}

body.nav-open {
  overflow: hidden;
}

html:not(.js) .nav-toggle,
html:not(.js) .nav-overlay,
.nav-overlay:not(.is-open) {
  pointer-events: none;
}

@media (min-width: 1024px) {
  .nav-toggle,
  .nav-overlay {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle__mark,
  .nav-overlay {
    transition: none;
  }
}

/* ---------- Shared CTA ---------- */

.btn-cta {
  display: inline-block;
  padding: 20px 40px;
  border-radius: 60px;
  /* Figma runs the gradient slightly off-horizontal (~11° downward) */
  background: linear-gradient(101deg, var(--red-fade), var(--red-fade-60));
  font-family: var(--font-body);
  font-weight: var(--weight-heading);
  font-size: 1.1014rem;
  line-height: 1;
  letter-spacing: -0.617px;
  color: var(--pure-white);
  text-decoration: none;
  transition:
    filter 0.2s ease,
    transform 0.2s ease;
}

.btn-cta:hover,
.btn-cta:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* ---------- Error page ---------- */

.error-page {
  padding-block: var(--space-60) var(--space-100);
  text-align: center;
}

.error-page .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-20);
}

.error-page__copy {
  max-width: 40rem;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--dozen-blue);
}

.error-page .btn-cta {
  margin-top: var(--space-20);
}

@media (min-width: 1024px) {
  .error-page {
    padding-block: var(--space-120) var(--space-240);
  }
}

/* ---------- Legal pages ---------- */

.legal-page {
  padding-block: var(--space-60) var(--space-100);
}

.legal-page .container {
  max-width: calc(45rem + 2 * var(--container-padding));
}

.legal-page h1 {
  font-size: var(--h2-size);
  line-height: var(--h2-leading);
}

.legal-page .legal-page__updated {
  margin-top: var(--space-10);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: 0.875rem;
  color: var(--dozen-blue);
}

.legal-page h2 {
  margin-top: var(--space-40);
  font-size: var(--h4-size);
  line-height: var(--h4-leading);
}

.legal-page p,
.legal-page ul {
  margin-top: var(--space-20);
}

.legal-page li {
  margin-top: var(--space-10);
  padding-left: 0.5rem;
}

.legal-page ul {
  padding-left: 1.25rem;
}

.legal-page a {
  color: var(--dozen-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 1024px) {
  .legal-page {
    padding-block: var(--space-100) var(--space-120);
  }
}

/* ---------- Footer ---------- */

.site-footer {
  background-color: var(--dozen-dark);
  padding: var(--space-60) 0 var(--space-20);
}

.site-footer .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.site-footer__row--primary,
.site-footer__row--secondary {
  min-height: 78px;
}

.site-footer__row--primary .logo {
  color: var(--pure-white);
}

.site-footer__row--secondary {
  display: grid;
  align-items: center;
}

.site-footer__nav {
  justify-self: center;
}

.site-footer__nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  gap: 6.6875rem;
}

.site-footer__nav-list a {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: 1rem;
  line-height: 1.40625;
  color: var(--off-white);
  text-decoration: none;
}

.site-footer__tagline {
  justify-self: center;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: 0.75rem;
  line-height: 1.40625;
  color: var(--dozen-teal);
  text-align: center;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--space-20);
  row-gap: 0.375rem;
  padding-top: var(--space-10);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: 0.75rem;
  line-height: 1.40625;
  /* off-white at 72% over the dark footer; 6.7:1 against #333 */
  color: rgba(243, 244, 244, 0.72);
  text-align: center;
}

.site-footer__legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
  color: var(--dozen-teal);
}

@media (min-width: 1024px) {
  /* Footer has no nav between logo and CTA, so the CTA would fall into the
     middle column. Pin it to the right column so it lines up with the header
     CTA and balances the logo. */
  .site-footer__row--primary > .btn-cta {
    grid-column: 3;
  }
}

@media (max-width: 1023.98px) {
  /* Footer always stacks; the header only falls back to this without JS. */
  .brand-row {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--space-20);
  }

  .brand-row > .logo,
  .brand-row > .btn-cta {
    justify-self: center;
    margin-right: 0;
  }

  /* Mobile footer per the Figma elements sheet: 40 pad, 20 gaps, centered
     logo row, links stacked on a 48px pitch, full-width CTA. */
  .site-footer {
    padding: var(--space-40) 0;
  }

  .site-footer .container {
    gap: var(--space-20);
  }

  .site-footer__nav-list {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .site-footer__nav-list a {
    line-height: 3; /* 48px rows at 16px type */
    letter-spacing: -0.56px;
  }

  .site-footer .btn-cta {
    width: 100%;
    text-align: center;
  }

  .site-footer__row--primary,
  .site-footer__row--secondary {
    min-height: 0;
  }

  /* Figma keeps the centered 78px logo row (Frame 53) on mobile */
  .site-footer .logo {
    min-height: 78px;
    align-items: center;
  }
}