/*
 * Shared site chrome — header, footer, buttons, page container.
 *
 * Every page under public/ used to carry its own inline copy of these rules, which is why
 * the nav drifted: the landing page had 7 links, a sticky blurred bar and a button CTA;
 * about/contact had 3 plain links and no sticky; privacy/terms/delete-account had no header
 * at all. This file is the single source of truth — pages keep their inline <style> for
 * page-specific styling only.
 *
 * Rules here use class selectors so they beat the bare `a { color: … }` in the legal pages'
 * inline styles regardless of load order.
 *
 * The header markup is identical on every page. Keep it that way:
 *
 *   <header class="nav">
 *     <div class="wrap nav-in">
 *       <a class="brand" href="/"><img class="logo-img" src="/app-icon.png" alt="Weekend Services logo" width="38" height="38" /> Weekend Services</a>
 *       <nav class="nav-links">
 *         <a class="link-section" href="/#how">How it works</a>
 *         …
 *         <a class="btn btn-primary" href="/get">Get the app</a>
 *       </nav>
 *     </div>
 *   </header>
 *
 * Section links use absolute `/#anchor` form so the same markup works from a sub-page
 * (navigates home, then scrolls) and from the landing page (same-document scroll, no reload).
 */

:root {
  --ws-orange: #f97316;
  --ws-orange-d: #ea580c;
  --ws-ink: #0f172a;
  --ws-slate: #475569;
  --ws-muted: #64748b;
  --ws-line: #e9edf3;
}

/* Border-box declared here, not inherited from the page: index/about/contact carry a global
   `* { box-sizing: border-box }` reset but the legal pages don't, which made .wrap 40px wider
   there and pushed the brand 20px left of where it sits everywhere else. */
.wrap,
.doc,
.nav-in,
.btn {
  box-sizing: border-box;
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Header ---------- */
/* Typography pinned rather than inherited: pages disagree on body line-height (1.5 on the
   landing page, 1.6 elsewhere), font stack (the legal pages omit Arial) and font-smoothing
   (they omit it entirely), all of which the header would otherwise pick up and render
   differently on. Verified pixel-identical across all six pages with these set. */
header.nav,
footer {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

header.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ws-line);
}
.nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 18px;
  color: var(--ws-ink);
  text-decoration: none;
}
.logo-img {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: block;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.35);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav-links a:not(.btn) {
  font-weight: 600;
  color: var(--ws-slate);
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}
.nav-links a:not(.btn):hover {
  color: var(--ws-ink);
}

/* Shed links in two steps rather than all at once, so a phone still has About/Contact
   before it drops to just the brand and the CTA. */
@media (max-width: 860px) {
  .nav-links a.link-section {
    display: none;
  }
}
@media (max-width: 520px) {
  .nav-links a.link {
    display: none;
  }
  .nav-links {
    gap: 14px;
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  border-radius: 12px;
  padding: 13px 20px;
  font-size: 15px;
  cursor: pointer;
  border: 0;
  text-decoration: none;
  transition:
    transform 0.08s ease,
    box-shadow 0.2s ease;
}
.btn-primary {
  background: var(--ws-orange);
  color: #fff;
  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.35);
}
.btn-primary:hover {
  background: var(--ws-orange-d);
}
/* The nav CTA sits in a 64px-tall bar, so it needs to be shorter than a body button. */
.nav-links .btn {
  padding: 9px 16px;
}

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--ws-line);
  padding: 44px 0;
  color: var(--ws-muted);
  font-size: 14px;
}
.foot-grid {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.foot-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.foot-links a {
  color: var(--ws-muted);
  text-decoration: none;
}
.foot-links a:hover {
  color: var(--ws-ink);
}

/* ---------- Content pages (about, contact, privacy, terms, delete-account) ---------- */
/* Same outer width as the header, so the text's left edge lines up with the brand above it
   — a centred narrow column under a 1080px header leaves the heading visibly indented.
   The inner cap keeps the line length readable instead of stretching prose to 1080px. */
.doc {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}
.doc > * {
  max-width: 780px;
}