/* Every Age, the website.

   Palette and type are lifted from the app so the two read as one thing:
   colours from apps/ios/RaisingCapableKids/RaisingCapableKids/Assets.xcassets/Colors,
   sizes and radii from .../Design/Theme.swift. Every pair below is one the
   app already checks in tools/contrast_check.py, in both appearances.

   One typeface in three weights, no display face. Nothing may read as
   cheerful. */

:root {
  --background: #efe9e0;   /* Bone */
  --surface: #f7f2ea;      /* Paper */
  --rule: #ded5ca;         /* Oat */
  --accent: #a6644b;       /* Clay: fills and large text only */
  --accent-text: #8a5138;  /* Darker clay for body-sized accent text */
  --on-accent: #f7f2ea;
  --text-primary: #2e2a26; /* Ink, never pure black */
  --text-secondary: #6b635b;
  --text-muted: #71685e;

  --card-radius: 16px;
  --sheet-radius: 20px;
  --screen-padding: 24px;
  --control-height: 60px;

  /* One measure, everywhere. The container is the measure, so a paragraph
     and a panel end on the same edge instead of disagreeing by 7rem. */
  --measure: 38rem;

  --font: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI",
    system-ui, sans-serif;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #1b1917;   /* Predawn */
    --surface: #262320;      /* Slate */
    --rule: #3a3630;         /* Dusk */
    --accent: #c4805f;
    --accent-text: #d2937a;
    --on-accent: #1b1917;
    --text-primary: #e7dfd4;
    --text-secondary: #a39a8f;
    --text-muted: #91897e;
  }
}

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

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

body {
  margin: 0;
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font);
  font-weight: 400;
  font-size: 17px;
  line-height: 26px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

/* Layout */

.wrap {
  width: 100%;
  max-width: calc(var(--measure) + var(--screen-padding) * 2);
  margin: 0 auto;
  /* Longhands, not the shorthand. Every section and the footer carry .wrap
     too, and a `padding: 0 24px` here beat their element selectors and quietly
     zeroed the vertical rhythm the rules below are asking for. */
  padding-left: var(--screen-padding);
  padding-right: var(--screen-padding);
}

main {
  display: block;
}

section {
  padding: 44px 0;
  border-top: 1px solid var(--rule);
}

section:first-of-type {
  border-top: 0;
}

/* Type roles, from Theme.Font */

.eyebrow {
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 10px;
}

.wordmark {
  font-weight: 300;
  font-size: clamp(40px, 9vw, 56px);
  line-height: 1;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--text-primary);
}

/* The wordmark is a link home on every page but the home page. It takes the
   ink colour, not the link colour, because it is the mark and not a link in
   a sentence. */
.wordmark a {
  color: inherit;
  text-decoration: none;
}

.wordmark a:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}

h1,
h2 {
  font-weight: 400;
  color: var(--text-primary);
}

h1 {
  font-size: clamp(28px, 6vw, 34px);
  line-height: 1.15;
  margin: 0 0 14px;
}

h2 {
  font-size: clamp(26px, 5.5vw, 34px);
  line-height: 1.15;
  margin: 0 0 16px;
}

h3 {
  font-size: 19px;
  line-height: 26px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--text-primary);
}

p {
  margin: 0 0 16px;
}

.lead {
  font-size: 22px;
  line-height: 32px;
  color: var(--text-secondary);
}

.detail {
  font-size: 15px;
  line-height: 22px;
  color: var(--text-muted);
}

ul,
ol {
  padding-left: 1.15em;
}

li {
  margin-bottom: 8px;
}

a {
  color: var(--accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 4px;
}

strong {
  font-weight: 600;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 32px 0;
}

/* Motion. There is one hover state on the whole site and it is a link
   thickening. Anyone who has asked for less movement gets none. */

@media (prefers-reduced-motion: no-preference) {
  a,
  .panel {
    transition: text-decoration-thickness 180ms ease,
      border-color 180ms ease, background-color 180ms ease;
  }
}

/* Skip link */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
}

.skip:focus {
  left: var(--screen-padding);
  top: 12px;
  z-index: 2;
  background: var(--surface);
  color: var(--accent-text);
  padding: 10px 16px;
  border-radius: var(--card-radius);
}

/* Hero */

.hero {
  /* Horizontal padding is restated because the shorthand would otherwise
     wipe the one .wrap sets, and the wordmark would sit 24px left of every
     heading under it. */
  padding: 64px var(--screen-padding) 44px;
}

/* The app icon, not an approximation of it: the Clay square is the artwork,
   and the Paper arch and floor light are knocked out of it. The clipPath
   keeps the light inside the rounded corner it spills into. */
.doormark {
  display: block;
  width: 72px;
  height: 72px;
  margin-bottom: 26px;
}

.hero .subtitle {
  font-size: 22px;
  line-height: 32px;
  color: var(--text-secondary);
  margin: 12px 0 22px;
}

.hero-shot {
  margin: 32px 0 0;
}

.hero-shot img {
  display: block;
  width: 260px;
  max-width: 100%;
  border-radius: var(--card-radius);
  border: 1px solid var(--rule);
}

/* The store link does not exist yet, so this is a label rather than a
   button: no href, no hover, nothing that invites a click that goes
   nowhere. Quiet fill, and the label sits at the app's own 19pt semibold.
   OnAccent on AccentText is 5.68:1, which clears the 4.5:1 body-text bar
   without the 24px workaround the accent fill used to need. */

.badge {
  display: inline-block;
  margin: 0;
  padding: 12px 20px;
  background: var(--accent-text);
  color: var(--on-accent);
  border-radius: var(--card-radius);
  font-size: 19px;
  line-height: 26px;
  font-weight: 600;
  /* One line, always. With the webfont blocked the label sets at 265px in the
     system fallback and 275px in plain sans-serif, so 315px including padding
     is the width every column here has to be able to give it. The narrowest
     is 327px at a 375px viewport. */
  white-space: nowrap;
}

.badge-note {
  margin: 12px 0 0;
}

/* Panels, from Theme's Panel view */

.panel {
  background: var(--surface);
  /* Paper on Bone is a whisper apart. Without the rule the panel edge is
     invisible in light, and nearly so in dark. */
  border: 1px solid var(--rule);
  border-radius: var(--card-radius);
  padding: 22px;
  margin: 0 0 14px;
}

.panel :last-child {
  margin-bottom: 0;
}

.routines {
  list-style: none;
  margin: 0;
  padding: 0;
}

.routines li {
  margin: 0 0 14px;
}

/* Three screens from the app, side by side at every width. Small on a
   phone, which is why each one carries a caption. */

.showcase {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 30px 0 0;
  padding: 0;
}

.showcase li {
  margin: 0;
}

.showcase img {
  display: block;
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--rule);
}

.showcase .caption {
  display: block;
  margin-top: 10px;
}

/* Prose pages: privacy, terms, support */

/* Smaller than the landing page's h2 so it still steps down clearly from the
   h1 once the h1 has clamped to its floor on a phone. */
.prose h2 {
  font-size: clamp(22px, 4vw, 26px);
  line-height: 1.3;
  margin: 36px 0 12px;
}

.prose h3 {
  margin: 26px 0 8px;
}

.prose > p:first-of-type {
  margin-top: 0;
}

.note {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--card-radius) var(--card-radius) 0;
  padding: 18px 22px;
  margin: 0 0 28px;
}

.note p {
  margin: 0;
  color: var(--text-secondary);
}

.updated {
  color: var(--text-secondary);
}

/* Footer */

footer {
  border-top: 1px solid var(--rule);
  padding: 32px 0 56px;
  margin-top: 12px;
}

footer nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  /* The gap carries the horizontal half of the 44px target, so the links can
     sit at their own width without a visible pill around each one. */
  gap: 0 26px;
  margin: 0 0 8px;
  padding: 0;
}

footer nav li {
  margin: 0;
}

/* 44px is the smallest thing a thumb reliably hits. A 26px line of text is
   not one. */
footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

footer .copyright {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 22px;
  margin: 0;
}

.backlink {
  padding-top: 34px;
}

.backlink a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

@media (min-width: 700px) {
  .hero {
    padding-top: 88px;
  }

  /* Text and the phone side by side, so the page does not open with 720px of
     screenshot between the name and the first sentence. Home page only: the
     prose pages have a header of two lines and nothing to sit beside. */
  .hero-home {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: center;
  }

  .hero-shot {
    margin: 0;
  }

  /* The container is 608px inside its padding at every viewport this rule
     reaches, so the phone and the gap decide what the text column gets. At
     220 and 32 that leaves 356px, and the badge needs 315 in the worst
     fallback font. Widening the phone here narrows the badge's column. */
  .hero-shot img {
    width: 220px;
  }

  .hero-text > :last-child {
    margin-bottom: 0;
  }

  section {
    padding: 56px 0;
  }
}

/* Above 900px the routines stop being a single 2700px column. Five panels in
   two columns, with the last one across the foot of the grid. */
@media (min-width: 900px) {
  .routines {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .routines li {
    margin: 0;
  }

  .routines li:last-child {
    grid-column: 1 / -1;
  }
}