/* YumYums landing page.
   Vanilla CSS, mobile first, no build step, no framework, no web fonts.

   Colours are lifted from the app's Theme.swift so the page and the product
   look like the same thing. Two are deliberately not: --accent is the app's
   terracotta darkened to #B24E35, which takes it from 3.95:1 to 4.56:1 against
   the page background, and the app's "muted" grey is not used for body text at
   all because it lands at 3.98:1. Everything below is at or above 4.5:1 for
   normal text and 3:1 for large text, in both schemes. */

:root {
  --bg: #f7efe2;
  --bg-deep: #eddDc8;
  --surface: #fffaf2;
  --inset: #f2e4d2;
  --ink: #2e231b;
  --secondary: #6f5a48;
  --accent: #b24e35;
  --amber: #e8913a;
  --amber-ink: #2b190b;
  --border: #e0cdb4;
  --radius: 14px;
  --measure: 34rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1612;
    --bg-deep: #15100d;
    --surface: #2a2118;
    --inset: #211a14;
    --ink: #f5ede4;
    --secondary: #cbbbaf;
    --accent: #e08b6d;
    --border: #453629;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.65 ui-serif, Georgia, "Times New Roman", serif;
}

/* Headings and controls in the system UI face; body copy in a serif, which is
   the same split the app uses. */
h1, h2, h3, .lede, nav, footer, .button {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5em; }
h1 { font-size: clamp(2rem, 8vw, 3rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.4rem, 5vw, 1.8rem); margin-top: 2.5rem; }
h3 { font-size: 1.125rem; margin-top: 1.75rem; }
p { margin: 0 0 1rem; }
ul { margin: 0 0 1rem; padding-left: 1.25rem; }
li { margin-bottom: 0.5rem; }

a { color: var(--accent); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

/* A visible focus ring everywhere, and never removed. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--ink);
  padding: 0.75rem 1rem;
  z-index: 10;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* The privacy page has no hero, so its heading would otherwise sit against the
   masthead border. */
main.wrap { padding-block-start: 2.5rem; }

/* Header */

.masthead {
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border);
  padding: 1rem 0;
}

.masthead .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}

.wordmark {
  font: 700 1.25rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--accent);
  text-decoration: none;
}

nav ul { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
nav a { display: inline-flex; align-items: center; min-height: 44px; }

/* Hero */

/* padding-block, not padding: the shorthand would wipe out .wrap's side
   padding and push the headline against the edge of a phone screen. */
.hero { padding-block: 3rem 1rem; }
.lede {
  font-size: 1.1875rem;
  color: var(--secondary);
  margin-bottom: 1.5rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 48px;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  background: var(--amber);
  color: var(--amber-ink);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
}
.button:hover { background: #d9822c; }
.button.secondary {
  background: transparent;
  color: var(--secondary);
  border-color: var(--amber);
}
.button.secondary:hover { background: rgba(232, 145, 58, 0.14); }
.buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.price {
  margin-top: 0.75rem;
  color: var(--secondary);
  font-size: 0.9375rem;
}

/* Screenshot strip: scrolls sideways on a phone, sits in a row on a desktop. */

.shots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 62%;
  gap: 1rem;
  overflow-x: auto;
  padding: 0.5rem 1.25rem 1.5rem;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
.shots img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  scroll-snap-align: center;
  background: var(--surface);
}

@media (min-width: 46rem) {
  .shots {
    grid-auto-columns: 1fr;
    max-width: 60rem;
    margin: 0 auto;
    overflow-x: visible;
  }
}

/* Cards and content blocks */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--amber);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin: 1.5rem 0;
}
.card h3 { margin-top: 0; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }

dl { margin: 0; }
dt { font-weight: 600; margin-top: 1.5rem; }
dd { margin: 0.25rem 0 0; color: var(--secondary); }

/* Footer */

footer {
  margin-top: 3.5rem;
  padding: 2rem 0 3rem;
  background: var(--bg-deep);
  border-top: 1px solid var(--border);
  font-size: 0.9375rem;
  color: var(--secondary);
}
footer a { color: var(--accent); }

.placeholder {
  background: var(--inset);
  border: 1px dashed var(--accent);
  border-radius: 6px;
  padding: 0.15em 0.45em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}