/* GEGENEREERD door tools/chrome.mjs uit src/chrome/chrome.css. Niet hier
   bewerken: pas de bron aan en draai node tools/to-pages.mjs. */

/* Gedeelde chrome: kopnavigatie en voettekst, op elke pagina dezelfde.
   Maten uit het artboard "Landingspagina v2 — norm" (Paper). Componenten:
   src/chrome/Nav.tsx en Footer.tsx.

   De React-bundel importeert dit bestand (App.tsx). De statische pagina's
   delen niets met de bundel, dus tools/chrome.mjs schrijft een kopie naar
   public/chrome.css en zet die met een inhoudshash in hun <head>. Bewerk
   alleen dit bestand en draai daarna de generators.

   Rekent op .wrap en .btn-fill uit de basisstijl (global.css c.q. to.css)
   en moet ná die basis geladen worden: .nav-cta overschrijft .btn-fill. */

/* Navigation: the brand, four quiet links and the one action. Paper,
   page "Website", artboards "Nav A · Stille links". Below 960px the links
   move into the details/summary menu (.nav-menu). */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
}

.nav-merk {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav-links {
  display: flex;
  gap: 32px;
}

/* 32px box for the focus ring, 44px hit area through ::before. */
.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding-inline: 8px;
  margin-inline: -8px;
  border-radius: 8px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.005em;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: color 150ms ease;
}

.nav-links a::before {
  content: "";
  position: absolute;
  inset: -6px 0;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--text);
}

.nav-links a[aria-current="page"] {
  color: var(--text);
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--accent);
  text-underline-offset: 7px;
  text-decoration-skip-ink: none;
}

.nav-links a:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 0;
}

.nav-cta {
  height: 42px;
  padding: 0 20px;
  font-size: 15px;
  border-radius: 11px;
}

.nav-menu {
  display: none;
}

/* Measured: brand, links and action take 594px in Satoshi and at most
   602px in the fallback fonts, so the links would still fit at 720px.
   960px keeps at least 260px between brand and links; below it the bar
   would crowd, so the links move into the menu. */
@media (max-width: 959px) {
  .nav {
    height: 72px;
  }

  .nav-links {
    display: none;
  }

  .nav-actions {
    gap: 0;
  }

  .nav-cta {
    height: 44px;
    padding: 0 18px;
  }

  .nav-menu {
    display: block;
  }

  /* Block plus padding instead of flex: older Safari ignores flex on summary. */
  .nav-menu > summary {
    display: block;
    width: 48px;
    height: 48px;
    padding: 14px;
    margin-right: -16px;
    list-style: none;
    cursor: pointer;
    color: var(--text);
  }

  .nav-menu > summary svg {
    display: block;
  }

  .nav-menu > summary::-webkit-details-marker {
    display: none;
  }

  .nav-menu > summary:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: -4px;
    border-radius: 12px;
  }

  .nav-menu[open] .nav-icon-bars,
  .nav-menu:not([open]) .nav-icon-close {
    display: none;
  }

  /* Opened just below the top of the page, the bar sticks so the panel
     never leaves a strip of page between the two. */
  .nav:has(.nav-menu[open]) {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--ground);
  }

  .nav:has(.nav-menu[open]) .nav-cta {
    visibility: hidden;
  }

  body:has(.nav-menu[open]) {
    overflow: hidden;
  }

  .nav-menu[open] > .nav-panel {
    position: fixed;
    inset: 72px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px clamp(20px, 5vw, 72px) max(32px, env(safe-area-inset-bottom));
    background: var(--ground);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .nav-panel a {
    border-radius: 8px;
    transition: color 150ms ease;
  }

  .nav-panel a:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 0;
  }

  .nav-panel-primary a {
    display: block;
    padding-block: 6px;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.03em;
  }

  .nav-panel-primary a[aria-current="page"] {
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--accent);
    text-underline-offset: 10px;
    text-decoration-skip-ink: none;
  }

  .nav-panel-secondary {
    display: flex;
    flex-direction: column;
    padding-top: 12px;
    border-top: 1px solid var(--hairline);
  }

  .nav-panel-secondary a {
    display: flex;
    align-items: center;
    height: 44px;
    font-size: 16px;
    line-height: 22px;
  }

  .nav-panel-legal {
    display: flex;
    gap: 24px;
    border-top: 1px solid var(--hairline);
  }

  .nav-panel-legal a {
    display: flex;
    align-items: center;
    height: 44px;
    font-size: 14px;
    line-height: 20px;
  }

  .nav-panel-secondary a,
  .nav-panel-legal a {
    color: var(--text-secondary);
  }

  .nav-panel-secondary a:hover,
  .nav-panel-legal a:hover,
  .nav-panel-secondary a[aria-current="page"],
  .nav-panel-legal a[aria-current="page"] {
    color: var(--text);
  }

  .nav-panel .download {
    margin-top: auto;
  }

  .nav-panel .download-noot {
    line-height: 20px;
  }
}

/* App Store badge (AppStoreBadge.tsx) and the row it sits in. */
.app-store-badge {
  display: inline-flex;
  flex-shrink: 0;
  transition: opacity 150ms ease;
}

.app-store-badge:hover {
  opacity: 0.9;
}

.app-store-badge img {
  width: 156px;
  height: 52px;
}

.download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.download-noot {
  font-size: 14px;
  color: var(--text-secondary);
}

/* Footer (Paper, page "Website", "Footer F2 · Kolommen zonder labels"):
   brand block left, three unlabeled link columns right, then a bottom row
   with the copyright, the legal links and the Launch Llama badge. */
.voettekst {
  padding-bottom: 48px;
}

.voettekst-boven {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  padding: 64px 0 80px;
  border-top: 1px solid var(--hairline);
}

.voettekst-merk {
  display: flex;
  flex: 0 1 380px;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-top: 2px;
}

.voettekst-zin {
  max-width: 348px;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: -0.005em;
  color: var(--text-secondary);
}

.voettekst-merk .app-store-badge {
  margin-top: 8px;
}

.voettekst-merk .app-store-badge img {
  display: block;
  width: 132px;
  height: 44px;
}

.voettekst-kolommen {
  display: grid;
  flex: 0 1 502px;
  grid-template-columns: repeat(3, 1fr);
}

.voettekst-kolommen ul {
  list-style: none;
}

.voettekst-kolommen a {
  display: flex;
  align-items: center;
  height: 36px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.005em;
  color: var(--text-secondary);
  transition: color 150ms;
}

.voettekst-kolommen a:hover,
.voettekst-kolommen a:focus-visible {
  color: var(--text);
}

.onderkantregel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  line-height: 16px;
  color: var(--text-dim);
}

.onderkant-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
}

.onderkant-links a {
  color: var(--text-secondary);
}

.onderkant-links a:hover,
.onderkant-links a:focus-visible {
  color: var(--text);
}

/* Directory badge: kept small, the image itself comes from Launch Llama.
   A condition of their free listing, so it stays while the listing runs. */
.voettekst-badge img {
  display: block;
  height: 36px;
  width: auto;
  opacity: 0.85;
}

.voettekst-badge:hover img {
  opacity: 1;
}

@media (max-width: 959px) {
  .voettekst {
    padding-bottom: 40px;
  }

  .voettekst-boven {
    flex-direction: column;
    gap: 40px;
    padding: 48px 0 40px;
  }

  .voettekst-merk {
    flex: none;
    gap: 16px;
  }

  .voettekst-merk .nav-merk {
    height: 44px;
  }

  .voettekst-zin {
    max-width: 268px;
  }

  .voettekst-kolommen {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 20px;
  }

  .voettekst-kolommen a {
    height: 44px;
    font-size: 16px;
    line-height: 22px;
  }

  .onderkantregel {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding-top: 12px;
  }

  .onderkant-links {
    gap: 24px;
  }

  .onderkant-links span {
    margin-right: auto;
  }

  .onderkant-links a {
    display: inline-flex;
    align-items: center;
    height: 44px;
    font-size: 14px;
    line-height: 18px;
  }

  .voettekst-badge {
    align-self: flex-start;
  }

  .voettekst-badge img {
    height: 44px;
  }
}