/* ==========================================================================
   Patru.design — shared chrome: header, burger menu, footer
   --------------------------------------------------------------------------
   Depends on css/tokens.css + css/base.css (load both first). Styles the
   canonical header/menu/footer markup block (see fixtures/chrome.html — the
   copy-into-every-page source per plan KTD1) together with js/header.js
   (scroll behavior) and js/menu.js (burger overlay).

   Values measured on the live site (2026-07-16, 1200/1280/768/375 widths):
   header padding-block 2vmax + page gutter inline; logo max-height 54px
   (44px <=575px); nav = text-normal fluid size, 24px gaps, 1px underline
   1.87px (0.1em) above the bottom on active/hover; social boxes: 24px icon
   + 10px padding + 1px inset box-shadow ring, 24px apart; hidden header =
   translateY(-100%) with transitions background 0.3s ease-in-out, padding
   0.14s, transform 0.14s ease-in-out 0.14s; solid state is always white
   with 0.9x padding (live .shrink). Overlay: white, opacity 0.4s /
   visibility 0.6s cubic-bezier(0.4,0,0.2,1), centered links at
   8.5vmin / 6.6vmin (>=576px) / 6vmin (>=768px), line-height 1; burger =
   two 35x3px lines 8px apart in a 47x37 button, morphing to an X.
   Footer: black theme + Background-Black.png cover image, white symbol
   logo, h2 CTA with coral 3px underline on the @gmail.com span, coral
   Terms link, 48px social boxes.
   ========================================================================== */

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

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  font-size: 1rem;                   /* line metrics of the skip-link line —
                                        matches the live 19px contribution */
  line-height: normal;
  background-color: transparent;
  transition:
    background 0.3s ease-in-out,
    transform 0.14s ease-in-out 0.14s;
}

/* Skip link — same construction as live: an inline off-screen button whose
   line box is part of the header's height (the live header is ~19px taller
   because of it; keeping it preserves 1:1 geometry AND the a11y feature).
   Pages give their main content id="page". */
.site-header__skip {
  display: inline;                   /* inline like live: only its ~19px line
                                        box counts, never the .btn padding */
  font-size: 1rem;
  position: relative;
  left: -14400px;
}

.site-header__skip:focus {
  left: var(--page-gutter);
}

.site-header__inner {
  position: relative;
  z-index: var(--z-raised);          /* logo + burger sit above the overlay */
  display: flex;
  align-items: center;
  padding-top: var(--header-pad-y);
  padding-bottom: var(--header-pad-y);
  transition: padding 0.14s ease-in-out;
}

/* Solid state (live .shrink): white background, slightly tighter padding.
   Applied by js/header.js whenever the page is scrolled off the very top. */
.site-header.is-solid {
  background-color: var(--color-white);
}

.site-header.is-solid .site-header__inner {
  padding-top: calc(var(--header-pad-y) * 0.9);
  padding-bottom: calc(var(--header-pad-y) * 0.9);
}

/* Hidden state (scrolling down): slide fully out. */
.site-header.is-hidden {
  transform: translateY(-100%);
}

.site-header__logo {
  display: block;
  margin-right: auto;
}

.site-header__logo img {
  display: block;
  width: auto;
  max-height: 54px;
}

/* --------------------------------------------------------------------------
   Desktop navigation
   -------------------------------------------------------------------------- */

.site-header__nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.site-header__nav a {
  --fluid-scale: var(--text-normal-scale);
  font-size: calc(var(--fluid-scale) * 1rem);
  line-height: var(--body-line-height);
  color: var(--color-black);
  text-decoration: none;
  /* Live active/hover underline: 1px line 0.1em above the link's bottom. */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: 0 calc(100% - 0.1em);
  transition: background-size var(--link-underline-duration) var(--anim-curve-flex);
}

@media screen and (min-width: 768px), screen and (orientation: landscape) {
  .site-header__nav a {
    font-size: min(
      calc((var(--fluid-scale) - 1) * 1.2vw + 1rem),
      max(
        calc((var(--fluid-scale) - 1) * 0.012 * var(--max-page-width) + 1rem),
        calc(var(--fluid-scale) * 1rem)
      )
    );
  }
}

.site-header__nav a:hover,
.site-header__nav a[aria-current="page"] {
  background-size: 100% 1px;
}

/* --------------------------------------------------------------------------
   Social icon boxes — shared by header, overlay and footer.
   Live: 24px svg + 10px padding + 1px currentColor inset ring; the box
   size is tuned per placement via --social-box-pad.
   -------------------------------------------------------------------------- */

.social-links {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.social-links a {
  --social-box-pad: 10px;
  display: block;
  padding: var(--social-box-pad);
  box-shadow: inset 0 0 0 1px currentColor;
  color: inherit;
}

.social-links svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.site-header__social {
  gap: 24px;
  margin-left: 24px;
  color: var(--color-black);
}

/* --------------------------------------------------------------------------
   Burger button — two 35x3px lines 8px apart (patty hidden on the live
   site), 47x37 hit area, morphing to an X while the overlay is open.
   -------------------------------------------------------------------------- */

.site-header__burger {
  display: none;
  position: relative;
  width: 47px;
  height: 37px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.site-header__burger span {
  position: absolute;
  left: 6px;
  width: 35px;
  height: 3px;
  background-color: var(--color-black);
  transition: transform 0.25s cubic-bezier(0.2, 0.6, 0.3, 1);
}

.site-header__burger span:first-child  { top: 12px; }
.site-header__burger span:last-child   { top: 23px; }

.site-header__burger[aria-expanded="true"] span:first-child {
  transform: translateY(5.5px) rotate(45deg);
}

.site-header__burger[aria-expanded="true"] span:last-child {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Mobile: burger replaces the inline nav + social. The live site swaps by
   measuring nav overflow; 900px still fits, 768px does not — the rebuild
   uses the midpoint as a plain media query.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 829px) {
  .site-header__nav,
  .site-header__social {
    display: none;
  }

  .site-header__burger {
    display: block;
  }
}

@media screen and (max-width: 575px) {
  .site-header__logo img {
    max-height: 44px;
  }
}

/* --------------------------------------------------------------------------
   Full-screen menu overlay — sits inside .site-header, under the logo/
   burger row (z-index), fading per the live transition pair.
   -------------------------------------------------------------------------- */

.site-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-base);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--color-white);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-menu.is-open {
  opacity: 1;
  visibility: visible;
}

/* Scroll lock while the overlay is open (set on <html> by js/menu.js). */
html.has-menu-open {
  overflow: hidden;
}

.site-menu__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 var(--page-gutter);
}

.site-menu__nav a {
  font-size: 8.5vmin;                /* live steps: 8.5 / 6.6 / 6 vmin */
  line-height: 1;
  padding: 0.235em 0;
  color: var(--color-black);
  text-decoration: none;
}

@media screen and (min-width: 576px) {
  .site-menu__nav a { font-size: 6.6vmin; }
}

@media screen and (min-width: 768px) {
  .site-menu__nav a { font-size: 6vmin; }
}

.site-menu__social {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  gap: 15px;
  color: var(--color-black);
}

.site-menu__social a {
  --social-box-pad: 10.5px;          /* live overlay boxes are 45px */
}

/* --------------------------------------------------------------------------
   Footer — black theme, Background-Black.png cover image, left-aligned
   column at the page gutter. Vertical rhythm measured at 1280px.
   -------------------------------------------------------------------------- */

.site-footer {
  position: relative;
  overflow: hidden;
}

.site-footer__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-footer__inner {
  position: relative;                /* above the background image */
  padding-top: 72px;
  padding-bottom: 112px;
}

.site-footer__symbol {
  display: block;
  width: 162px;
  height: auto;
}

.site-footer__cta {
  margin: 55px 0 0;
}

/* Coral bar under the plain-text “@gmail.com” (live sqsrte-text-highlight;
   the email is deliberately NOT a mailto link, per R18). */
.site-footer__email-highlight {
  box-shadow: 0 0.06em 0 0 var(--color-accent);
}

.site-footer__copyright {
  margin: 120px 0 0;
  font-size: 1rem;
}

.site-footer__terms {
  margin: 1rem 0 0;
  font-size: 1rem;
}

.site-footer__terms a {
  color: var(--color-accent);
}

.site-footer__social {
  margin-top: 33px;
  gap: 12px;
  color: var(--color-white);
}

.site-footer__social a {
  --social-box-pad: 12px;            /* live footer boxes are 48px */
}

/* Mobile footer rhythm (measured live at 375: symbol full-width at 77,
   h2 at 171, © at 465, socials at 609, 51px bottom padding). */
@media screen and (max-width: 767px) {
  .site-footer__inner {
    padding-top: 77px;
    padding-bottom: 51px;
  }

  .site-footer__symbol {
    width: 100%;
  }

  .site-footer__cta {
    margin-top: 74px;
    overflow-wrap: break-word;       /* the long plain-text email address */
  }

  .site-footer__social {
    margin-top: 84px;
  }
}