/* ==========================================================================
   Small Shift Parenting — the legal pages: /terms-and-conditions/ and
   /privacy-policy/, edition 2

   One stylesheet, byte for byte the same in both folders
   (qa/legal/legal.test.mjs checks it): change one, copy it to the other and
   bump ?v= in both pages.

   There is no Figma frame for these pages. The copy files ask for "the same
   style and footer as the rest of the site", so the layout follows the
   WordPress pages they replace (measured 08.10.2026 at 390, 768 and 1440): a
   muted-brown band with the title, one centred column of text on cream, a
   white footer with the logo above the links. Colours, font and gutter are
   the site's tokens (why-kids-pull-away/css/styles.css); the footer tokens
   are the landing page's.

   Each fluid token is defined twice, 390 -> 768 here and 768 -> 1440 in the
   768 block, landing on the WordPress page's value at 390, 768 and 1440 and
   capped there. Body text starts at 16px where WordPress has 14.6px: 16px
   is the site's smallest body size.

   State changes are instant everywhere by design (SPEC §8): no CSS motion
   properties, no keyframes, no scroll effects.
   ========================================================================== */

@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/poppins-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/poppins-semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --c-cream: #fff3e0;
  --c-brown-dark: #341f12;
  --c-brown-mid: #705747;
  --c-white: #ffffff;
  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lh-title: 1.35;
  --lh-body: 1.65;

  /* ---- 390 -> 768 ---- */
  --gutter:        clamp(1.875rem, 0.8433rem + 4.2328vw, 2.875rem);
  --container-max: 120rem;                   /* 1920px */

  /* the band: 264px tall at 390 with the title on two lines */
  --hero-pb:       clamp(5.5625rem, 1.3711rem + 17.1958vw, 9.625rem);
  --fs-title:      clamp(1.75rem, 0.6458rem + 5.5556vw, 3.3125rem);

  --legal-pb:      clamp(5.125rem, 3.3839rem + 7.1429vw, 6.8125rem);
  --w-text:        53.75rem;                 /* 860px, the WordPress column */
  --fs-body:       clamp(1rem, 0.8710rem + 0.5291vw, 1.125rem);
  --gap-p:         clamp(0.5rem, 0.1131rem + 1.5873vw, 0.875rem);

  /* the footer: the landing page's tokens */
  --logo-w:        10.3rem;
  --fs-footer:     clamp(0.675rem, 0.3319rem + 1.7143vw, 0.75rem);
  --footer-pt:     clamp(1.25rem, 0.4119rem + 3.4392vw, 2.0625rem);
  --footer-gutter: var(--gutter);
}

@media (min-width: 768px) {
  :root {
    /* ---- 768 -> 1440 ---- */
    --gutter:        clamp(2.875rem, -1.4583rem + 9.0278vw, 9.375rem);

    --hero-pb:       clamp(9.625rem, 3.2679rem + 13.2440vw, 15.1875rem);
    --fs-title:      clamp(3.3125rem, 2.9554rem + 0.7440vw, 3.625rem);

    --legal-pb:      clamp(6.8125rem, 3.1696rem + 7.5893vw, 10rem);
    --fs-body:       clamp(1.125rem, 0.6964rem + 0.8929vw, 1.5rem);
    --gap-p:         0.875rem;

    --logo-w:        clamp(14.75rem, 13.3333rem + 2.9514vw, 16.875rem);
    --fs-footer:     clamp(0.75rem, 0.5rem + 0.5208vw, 1.125rem);
    --footer-pt:     clamp(1.8125rem, 2.2294rem + -0.3472vw, 2.0625rem);
    --footer-gutter: clamp(2.875rem, 0.625rem + 4.6875vw, 6.25rem);
  }
}

/* ------------------------------- reset ---------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; }

body {
  margin: 0;
  background: var(--c-cream);
  color: var(--c-brown-dark);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, p, ul { margin: 0; }

:focus-visible {
  outline: 2px solid var(--c-brown-dark);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* -------------------------------- band ---------------------------------- */

.legal-hero {
  background: var(--c-brown-mid);
  color: var(--c-white);
  padding-block: var(--hero-pb);
}

.legal-hero__title {
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: var(--lh-title);
  text-align: center;
  text-wrap: balance;
}

/* -------------------------------- text ---------------------------------- */

.legal {
  padding-block: var(--legal-pb);
}

.legal__text {
  max-width: var(--w-text);
  margin-inline: auto;
}

.legal__text p,
.legal__text ul { margin-block-end: var(--gap-p); }

.legal__text > :last-child { margin-block-end: 0; }

/* the two date lines sit together, set apart by weight as on WordPress */
.legal__text .legal__date {
  margin-block-end: 0;
  font-weight: 600;
}

/* section headings: body size, set apart by weight and a line of space */
.legal__text h2 {
  margin-block: 2em var(--gap-p);
  font-size: 1em;
  font-weight: 600;
  line-height: var(--lh-body);
}

/* subheadings inside a section (Terms §7, Privacy §3 and §6), bold as the
   copy files ask */
.legal__text h3 {
  margin-block: 1.25em var(--gap-p);
  font-size: 1em;
  font-weight: 600;
  line-height: var(--lh-body);
}

/* the anchor of every "Refund Policy" link: a little air above it */
#refund { scroll-margin-block-start: 1rem; }

.legal__text ul { padding-inline-start: 1.25em; }

.legal__text a {
  color: inherit;
  /* the address is long and has no spaces: let it break rather than push
     the column wider than a 320px phone */
  overflow-wrap: anywhere;
}

/* ------------------------------- footer --------------------------------- */

.footer {
  background: var(--c-white);
  color: var(--c-brown-dark);
  padding-block: var(--footer-pt);
}

.footer .container { padding-inline: var(--footer-gutter); }

.footer__home {
  display: inline-block;
  vertical-align: top;
}

.footer__logo {
  display: block;
  width: var(--logo-w);
  height: auto;
}

/* stacked on phones and tablets, one row across the footer from 1024, as on
   the WordPress footer */
.footer__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  margin-block-start: var(--footer-pt);
}

.footer__link {
  /* the padding gives the small links a taller hit area */
  padding-block: 0.4em;
  color: inherit;
  font-size: var(--fs-footer);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;      /* "Terms & Conditions" never splits mid-label */
}

@media (hover: hover) {
  .footer__link:hover { text-decoration: underline; }
}

@media (min-width: 1024px) {
  .footer__nav {
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
  }
}