/* The site header and footer, the same on every page. Self-contained (it
   does not need tokens.css) because the legal pages load it next to the
   older style.css; several rules below exist only to undo that file's
   element-level `nav` and `footer` styles.

   The markup lives in dev/sync_chrome.py, which writes it into each page.
   dev/check_frame.mjs measures that every page comes out the same. */

/* ── The page frame ──
   One frame for every page: content is at most 1280px wide with a side
   gutter of 20px on phones and up to 80px on wide screens. The header, each
   page's content and the footer all take their side padding from
   --frame-pad, so their edges line up. */

:root {
  --gutter: 20px;
  --frame-max: 1280px;
  --frame-pad: max(var(--gutter), calc((100% - var(--frame-max)) / 2));
}

@media (min-width: 800px) {
  :root { --gutter: clamp(32px, 5.556vw, 80px); }
}

/* Every page sits on the app's canvas colour. */
body { background-color: #F8F7F4; }

.site-header,
.site-footer {
  --chrome-ink: #1A1A1A;
  --chrome-mid: #5C5C5A;
  --chrome-soft: #6E6E69;
  --chrome-brand: #1B5E42;
  box-sizing: border-box;
  font-family: 'DM Sans', system-ui, sans-serif;
}

.site-header *,
.site-footer * { box-sizing: border-box; }

.site-header a,
.site-footer a { text-decoration: none; }

.site-header nav,
.site-footer nav {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ── Header ── */

.site-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  height: 68px;
  padding: 0 var(--frame-pad);
  background: transparent;
}

.wordmark {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: -0.01em;
  color: var(--chrome-ink);
  text-decoration: none;
}

.site-header .header-links { display: none; align-items: center; justify-content: flex-start; gap: 32px; }

.header-links > a {
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: var(--chrome-mid);
  white-space: nowrap;
  transition: color 0.2s;
}

/* An invisible semibold copy sets the width, so the current page's bolder
   link takes no more room and nothing shifts between pages. */
.header-links > a { display: inline-flex; flex-direction: column; align-items: center; }

.header-links > a::after {
  content: attr(data-text);
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 600;
}

.header-links > a:hover,
.header-app summary:hover { color: var(--chrome-ink); }

.header-links > a[aria-current="page"] { font-weight: 600; color: var(--chrome-brand); }

/* "Get the app": styled as a nav link, opens a small menu with the two
   store listings. A <details>, so it works without JavaScript. */
.header-app { position: relative; font-size: 14px; line-height: 18px; }

.header-app summary {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: var(--chrome-mid);
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.header-app summary::-webkit-details-marker { display: none; }

.header-app summary svg { width: 10px; height: 10px; flex-shrink: 0; }

.header-app[open] summary { color: var(--chrome-ink); }

.header-app summary:focus-visible { outline: 2px solid var(--chrome-brand); outline-offset: 4px; border-radius: 4px; }

.site-header .header-app .menu { top: calc(100% + 12px); right: 0; width: 176px; }

/* Mobile: the menu icon and its anchored dropdown (the app's popup menu:
   38px rows, 20px icon slot, 10px gap). */
.header-menu { position: static; }

.header-menu summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

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

.header-menu summary:focus-visible { outline: 2px solid var(--chrome-brand); outline-offset: -6px; border-radius: 12px; }

.site-header .menu {
  position: absolute;
  top: 60px;
  right: var(--frame-pad);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 224px;
  padding: 8px 0;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

.menu a {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: var(--chrome-ink);
}

.menu a:hover { background: #F8F7F4; }

.menu a[aria-current="page"] { font-weight: 700; }

.menu a svg { width: 17px; height: 17px; margin: 0 11.5px 0 1.5px; flex-shrink: 0; }

.menu a:focus-visible { outline: 2px solid var(--chrome-brand); outline-offset: -2px; border-radius: 8px; }

/* ── Footer ── */

footer.site-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 32px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 44px var(--frame-pad) 32px;
  background: #FFFFFF;
  color: var(--chrome-ink);
  text-align: left;
}

.footer-top { display: flex; flex-direction: column; gap: 32px; }

.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

.footer-brand .wordmark { font-size: 26px; letter-spacing: 0; }

.site-footer .footer-brand p { max-width: 300px; margin: 0; font-size: 15px; line-height: 24px; color: var(--chrome-mid); }

.footer-columns { display: flex; flex-direction: column; gap: 28px; }

.site-footer .footer-columns nav { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px; }

.site-footer .footer-heading {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chrome-soft);
}

.footer-columns a { font-size: 15px; font-weight: 500; line-height: 22px; color: var(--chrome-ink); transition: color 0.2s; }

.footer-columns a:hover { color: var(--chrome-brand); }

.site-footer .footer-legal {
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid #E8E8E5;
  font-size: 13px;
  line-height: 20px;
  color: var(--chrome-soft);
}

/* ── Wider screens: text links in the header, footer in a row ── */

@media (min-width: 800px) {
  .site-header { height: 78px; }

  .site-header .wordmark { font-size: 26px; letter-spacing: 0; }

  .site-header .header-links { display: flex; }

  .header-menu { display: none; }

  footer.site-footer { gap: 48px; padding: 64px var(--frame-pad) 36px; }

  .footer-top { flex-direction: row; justify-content: space-between; gap: 64px; }

  .footer-columns { flex-direction: row; gap: 72px; }

  .site-footer .footer-columns nav { min-width: 150px; }
}

/* ── The frame on the older pages (privacy, terms, support) ──
   Their content styles are in style.css. These rules only place that
   content in the shared frame: the text column keeps its reading width and
   starts at the frame's left edge, in line with the wordmark. The support
   page keeps its centred design, inside the same frame. */

.page-content {
  max-width: none;
  margin: 0;
  padding-left: var(--frame-pad);
  padding-right: var(--frame-pad);
}

.page-content > * { max-width: 640px; }

.support-hero {
  max-width: none;
  padding-left: var(--frame-pad);
  padding-right: var(--frame-pad);
}