/* ============================================================
 * chrome.css — the site header, as ONE component.
 *
 * Loaded by every page. Before this there were three implementations:
 * `.site-header` on the landing, `.tour-header` overriding it on the tour, and
 * `.nav` from styles.css on /how-liway-works/. They were kept looking alike by
 * hand, which is why the same fix had to be made three times and the header
 * drifted apart again after each one — different heights, different insets,
 * different link labels.
 *
 * Self-contained on purpose: it depends only on tokens.css, so a page can load
 * it WITHOUT home.css and its reset. /how-liway-works/ needs exactly that.
 *
 * Markup contract — identical on every page:
 *
 *   <header class="site-header">
 *     <div class="site-header-inner">
 *       <a href="/" class="brand" aria-label="liway home"> <svg/> <img/> </a>
 *       <nav class="site-nav" aria-label="Primary">
 *         <a href="/how-liway-works/">How it works</a>
 *         <a href="/tour/">Product tour</a>
 *       </nav>
 *       <a href="https://my.liway.app" class="header-cta">My liway</a>
 *     </div>
 *   </header>
 *
 * The current page is a <span class="is-current"> in place of its own <a>.
 * ============================================================ */

:root { --chrome-shell: 1160px; }

.site-header {
  background: var(--cream-100);
  border-bottom: 1px solid rgba(20, 24, 26, 0.07);
}
.site-header-inner {
  max-width: var(--chrome-shell);
  margin: 0 auto;
  padding: 0 32px;
  height: 74px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-header .brand { display: flex; align-items: center; gap: 10px; }
.site-header .brand svg { height: 26px; width: 26px; flex: none; display: block; }
/* An SVG in an <img> has no useful intrinsic size — without this the wordmark
 * collapses and squeezes the mark to zero width. */
.site-header .brand img { height: 23px; width: auto; flex: none; display: block; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: 16px;
  font-weight: 500;
  color: var(--slate-950);
  margin-left: auto;
}
.site-nav a { color: inherit; text-decoration: none; transition: color 0.16s ease; }
.site-nav a:hover { color: var(--euc-700); }
/* You-are-here: unlinked, same treatment the legal pages use. */
.site-nav .is-current { font-weight: 600; color: var(--slate-950); white-space: nowrap; }

.header-cta {
  margin-left: 34px;
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  padding: 11px 24px;
  border-radius: 999px;
  background: var(--euc-500);
  color: var(--cream-100);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.16s ease;
}
.header-cta:hover { background: var(--euc-700); }

@media (max-width: 720px) {
  .site-header-inner { padding: 0 20px; }
  .site-nav { display: none; }
  .header-cta { margin-left: auto; }
}

/* ============================================================
 * SITE FOOTER — the same component argument as the header above.
 *
 * Was three implementations with matching content: `.site-footer` in home.css,
 * `.tour-footer` in tour.css, and `.footer` in styles.css on /how-liway-works/.
 * They agreed only because all three were hand-edited together; the header was
 * in exactly that state before it drifted three ways.
 *
 * NOT applied to the legal pages (privacy/terms/security). Those load no
 * external stylesheets at all and keep their own cross-nav — deliberate, so no
 * CSS change can break a published legal document. See docs/ops/marketing-site.md.
 *
 * Markup contract:
 *
 *   <footer class="site-footer">
 *     <div class="site-footer-inner">
 *       <div class="footer-grid">
 *         <div class="footer-brand"> <img/> <p/> </div>
 *         <div class="footer-col"> <h2/> <ul><li><a/></li></ul> </div> x3
 *       </div>
 *       <div class="footer-base"> <span/> <span class="footer-note"/> </div>
 *     </div>
 *   </footer>
 * ============================================================ */

.site-footer {
  background: var(--cream-200);
  border-top: 1px solid rgba(20, 24, 26, 0.08);
}
.site-footer-inner {
  max-width: var(--chrome-shell);
  margin: 0 auto;
  padding: 56px 32px 30px;
}
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 40px;
}
.site-footer .footer-brand img { height: 26px; width: auto; display: block; margin-bottom: 12px; }
.site-footer .footer-tagline {
  font-size: 14px;
  line-height: 1.55;
  color: var(--slate-500);
  max-width: 280px;
  margin: 0;
}
.site-footer .footer-col h2 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-400);
  margin: 0 0 14px;
}
.site-footer .footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.site-footer .footer-col a {
  font-size: 15px;
  color: var(--slate-700);
  text-decoration: none;
  transition: color 0.16s ease;
}
.site-footer .footer-col a:hover { color: var(--euc-700); }
.site-footer .footer-base {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(20, 24, 26, 0.08);
  font-size: 13px;
  color: var(--slate-400);
}
.site-footer .footer-note {
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  font-weight: 500;
}

@media (max-width: 900px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 720px) {
  .site-footer-inner { padding: 44px 20px 26px; }
  .site-footer .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .site-footer .footer-base { flex-direction: column; gap: 8px; }
}