/* ==========================================================================
   Shared site header & footer (markup: tools/site-chrome/site-*.html, synced
   into every page by tools/site-chrome/sync.py; behaviour: scripts/site-chrome.js).
   The look itself is the homepage's (style.css + overrides.css, loaded on every
   page). <html data-chrome> marks the sub-pages: "theme" (Privacy, Terms: theme.js,
   no ux-fixes.js) and "standalone" (About, Thank-you: no theme.js). This file
   only fills the gaps on those pages. There theme.js is not
   around to split the nav labels or to open the mobile drawer, so the same
   result is reproduced here.
   ========================================================================== */

/* overrides.css paints html #151515 under the homepage's animated background
   (body transparent). Privacy/Terms have no such layer: keep their black page. */
html[data-chrome="theme"] {
  background: #000;
}

/* Faded-out intro loader (site-chrome.js): stop its infinite animations. */
.site-loader.vgl-loader-gone {
  display: none !important;
}

/* The logo is a link (works without theme.js); keep it looking like the old button. */
.header__logo {
  display: inline-flex;
  align-items: center;
  color: inherit;
}

/* theme.js wraps each in-page nav label in .nav__link__chars (padding-top .5rem);
   reproduce that spacing so the desktop menu has the same rhythm everywhere. */
html[data-chrome="standalone"] .header .nav__link.js-nav-link {
  padding-top: 0.5rem;
}

/* Scrolled backdrop: theme.js keeps .header__bg at scaleY(0) and opens it itself. */
html[data-chrome="standalone"] .header.js-header.is-scrolled .header__bg {
  transform: none !important;
}

@media (max-width: 767px) {
  /* Closed by default: background folded up, items hidden. */
  html[data-chrome="standalone"] .nav__bg {
    transform: scaleY(0);
    transition: transform 0.55s cubic-bezier(0.7, 0, 0.2, 1);
  }
  html[data-chrome="standalone"] .nav__item,
  html[data-chrome="standalone"] .nav__cta {
    visibility: hidden;
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity 0.25s ease, transform 0.35s ease, visibility 0s linear 0.35s;
  }
  /* Open */
  html[data-chrome="standalone"] .header.vgl-menu-open .nav__bg {
    transform: scaleY(1);
  }
  html[data-chrome="standalone"] .header.vgl-menu-open .nav__list {
    pointer-events: auto;
  }
  html[data-chrome="standalone"] .header.vgl-menu-open .nav__item,
  html[data-chrome="standalone"] .header.vgl-menu-open .nav__cta {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s;
    transition-delay: calc(0.18s + var(--vgl-i, 0) * 0.05s);
  }
  /* Burger ↔ cross */
  html[data-chrome="standalone"] .nav-toggle[aria-expanded="true"] .nav-toggle__burger { display: none; }
  html[data-chrome="standalone"] .nav-toggle[aria-expanded="true"] .nav-toggle__cross { display: block; }

  /* Sub-pages: short scrolled backdrop on phones (desktop version lives in
     overrides.css). html[data-chrome] = any page other than the homepage. */
  html[data-chrome] .header.js-header.is-scrolled .header__bg {
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 84px;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(6, 4, 15, 0.94) 0%, rgba(6, 4, 15, 0.78) 62%, rgba(6, 4, 15, 0) 100%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent);
    mask-image: linear-gradient(to bottom, #000 65%, transparent);
  }
}

/* Phones: keep a clear gap between the logo and the "Discuss a Project" pill.
   .header__inner is a flex row and the logo is the item that shrinks (its SVG
   scales down with the box), so it was squeezed until it touched the pill:
   0–2px apart at every width from 361 to 430px. Reserve the gap after the logo
   and slim the pill a little so the logo keeps most of its size. */
@media (max-width: 430px) {
  .header__logo {
    margin-right: 12px;
  }
  .header__cta .btn {
    padding-left: 11px !important;
    padding-right: 11px !important;
  }
  .header__cta .btn__text {
    font-size: 12px !important;
    letter-spacing: 0.02em;
  }
}
/* ≤360px overrides.css fixes the logo at 98px; below ~330px that no longer leaves the gap. */
@media (max-width: 330px) {
  body:has(.nav-toggle) .header__logo {
    flex: 0 0 84px;
    width: 84px;
  }
  body:has(.nav-toggle) .header__logo svg {
    width: 84px;
  }
}

/* Footer on pages where it is not inside the homepage contact section. */
html[data-chrome] .vgen-footer {
  margin-top: clamp(3rem, 6vw, 6rem);
}

@media (prefers-reduced-motion: reduce) {
  html[data-chrome="standalone"] .nav__bg,
  html[data-chrome="standalone"] .nav__item,
  html[data-chrome="standalone"] .nav__cta {
    transition: none !important;
  }
}