/*
  Shared styling for the static content pages in public/.

  These pages sit OUTSIDE the React app on purpose: the app renders
  client-side and its planning pages are behind authentication, so a
  crawler that does not run JavaScript sees nothing of them. wrangler
  serves a real file in dist/ directly and only falls back to the app
  for unmatched paths, so these are plain HTML with no bundle involved.

  ── This file mirrors the landing page, deliberately ──────────────────
  The landing page is React + Tailwind; these are hand-written CSS. They
  must still look like one site, so the values below are copied from what
  src/routes/index.tsx actually renders rather than invented:

    header   sticky, background/90 + blur, 1px bottom border, 48px mark,
             wordmark in --primary, nav links at 70% foreground, and a
             solid primary "Get Started" button on the right
    hero     the SAME washed-out wide illustration the landing page uses
             (src/assets/landing_page_hero.png -> /hero-bg.webp), laid in
             as a faint background with the subject to the right and a
             left-to-right scrim over it, headline sitting on top
    cards    rounded-2xl (1rem), white, 1px --border, and on hover the
             border warms to primary/40 with a small shadow
    footer   solid #C05621 with white text, four columns, darker bottom bar

  Colour tokens are the "Compassionate Legacy" palette from src/styles.css,
  written here as the hex equivalents of its oklch() values (the comments
  in that file give the same hexes). src/styles.css is the source of truth
  — if the brand changes there, update these to match.
*/

:root {
  --background: #fff8f5;
  --foreground: #241910;
  --surface-low: #fff1e8;
  --surface-container: #ffeadb;
  --surface-high: #f3dfd0;
  --card: #ffffff;
  --border: #e0c0b1;
  --primary: #9d4300;
  --primary-soft: #f97316;
  --muted-foreground: #584237;
  --footer: #c05621;
  --footer-deep: #a8481b;

  --shell: 80rem; /* max-w-7xl */
  --prose: 48rem; /* readable measure for running text */
  --radius: 0.75rem;
  --radius-lg: 1rem; /* rounded-2xl */
  --ring: 0 0 0 3px rgba(249, 115, 22, 0.35);
  --shadow-sm: 0 1px 2px rgba(87, 46, 10, 0.06), 0 1px 3px rgba(87, 46, 10, 0.05);
  --shadow-md: 0 4px 12px -2px rgba(87, 46, 10, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  /* iOS inflates text when a page is rotated to landscape unless this is
     pinned. The -webkit- form is the one Safari actually honours. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--background);
  color: var(--foreground);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Long words and URLs must not force a sideways scroll on a narrow phone. */
  overflow-wrap: break-word;
  -webkit-tap-highlight-color: rgba(157, 67, 0, 0.12);
}

a:focus-visible,
button:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 0.4rem;
}

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  /* env() keeps content clear of the notch and home indicator in landscape.
     max() means the normal padding still applies where there is no inset.
     Requires viewport-fit=cover, which every page sets. */
  padding-inline: max(1.5rem, env(safe-area-inset-left)) max(1.5rem, env(safe-area-inset-right));
}

/* ── Header ───────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 248, 245, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(224, 192, 177, 0.5);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.85rem;
}

a.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
}

/* logo-mark.png has a real alpha channel, so unlike the landing page's
   logo.jpg it needs no mix-blend-mode: multiply to fake transparency. */
a.brand img {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}

.header-nav {
  display: none;
  align-items: center;
  gap: 2rem;
  font-size: 0.875rem;
}

.header-nav a {
  color: rgba(36, 25, 16, 0.7);
  text-decoration: none;
  transition: color 0.15s ease;
  white-space: nowrap;
}

.header-nav a:hover,
.header-nav a:focus-visible,
.header-nav a[aria-current="page"] {
  color: var(--foreground);
}

.header-nav a[aria-current="page"] {
  font-weight: 600;
}

/* Matches the landing page: the link row only appears once there is room,
   and the brand plus the primary action carry the header below that. */
@media (min-width: 64rem) {
  .header-nav {
    display: flex;
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  /* Apple's minimum comfortable tap target. */
  min-height: 44px;
  padding: 0.7rem 1.5rem;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: #8a3b00;
  box-shadow: var(--shadow-md);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.8);
  color: var(--foreground);
  border: 1px solid var(--border);
  font-weight: 500;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: #fff;
  border-color: var(--primary);
}

.btn-sm {
  padding: 0.6rem 1.15rem;
  font-size: 0.875rem;
  min-height: 40px;
}

/* "Back to Home" now sits at the END of the page, not in the header. In the
   header it was a third control competing with the brand and the primary
   action, and on a phone it squeezed the wordmark out entirely — which is
   why "LegacyNest" had gone missing there. */
.back-home {
  display: block;
  width: fit-content;
  margin: 3rem auto 0;
  padding: 0.7rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.back-home:hover,
.back-home:focus-visible {
  border-color: var(--primary);
  background: var(--surface-low);
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Needed for the multiply below to have anything to blend WITH. isolate
     starts a fresh stacking context whose backdrop is transparent, so
     without an explicit colour here the artwork multiplied against nothing
     and the white box stayed visible. */
  background: var(--background);
}

/* Sized to the ARTWORK, not to the hero box: height:100% + width:auto makes
   the <img> element exactly as wide as the picture it paints, and flex pins
   it to the right. That matters for the mask below — a mask is resolved in
   element coordinates, so if the element were stretched to the full hero
   width the fade would land in empty space and miss the artwork's real edge
   entirely. */
.hero-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* The whole illustration, uncropped — the landing page shows the complete
   shield and these pages have to match it. An earlier attempt used
   object-fit: cover, which filled the box and killed the seam but zoomed in
   and cut the top of the shield, so the same artwork read as a different,
   clumsier image than the one on the home page.

   The seam that cover was working around is handled by the mask instead. It
   cannot be handled by blending: the artwork's backdrop is not white but a
   warm cream (252,243,230 at mid-left), so mix-blend-mode: multiply against
   the page cream DARKENS that region and deepens the very edge it was meant
   to dissolve. */
.hero-art img {
  height: 100%;
  width: auto;
  max-width: none;
  opacity: 0.72;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 46%);
  mask-image: linear-gradient(to right, transparent 0%, #000 46%);
}

/* The scrim is what keeps the headline readable over the artwork, and why
   the illustration can be a background here instead of a boxed image. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    var(--background) 0%,
    rgba(255, 248, 245, 0.92) 38%,
    rgba(255, 248, 245, 0.55) 60%,
    rgba(255, 248, 245, 0) 82%
  );
}

.hero-inner {
  position: relative;
  padding-block: 2.5rem 2.75rem;
}

.hero-copy {
  max-width: 36rem;
}

/* The landing page's "The Eternal Banyan Approach" chip. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  border-radius: 999px;
  background: var(--surface-container);
  padding: 0.375rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--primary);
}

h1 {
  font-size: clamp(2.1rem, 5vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin: 1rem 0 0;
  max-width: 15ch;
}

.lede {
  margin: 0.85rem 0 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--muted-foreground);
  max-width: 30rem;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
}

/* Below the point where the artwork would sit behind the text rather than
   beside it, fade it right back and let the words win. */
/* On a phone there is no room beside the headline, so the artwork moves under
   it: full width, pinned to the bottom, and faded from the top instead of
   from the left. */
@media (max-width: 48rem) {
  .hero-art {
    align-items: flex-end;
    justify-content: center;
  }

  .hero-art img {
    width: 100%;
    height: auto;
    opacity: 0.4;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
  }

  .hero-scrim {
    background: linear-gradient(
      to bottom,
      var(--background) 0%,
      rgba(255, 248, 245, 0.82) 55%,
      rgba(255, 248, 245, 0.6) 100%
    );
  }
}

/* ── Content ──────────────────────────────────────────────────────────
   Two columns on a wide screen. Measured before changing anything: the
   prose is capped at 48rem for readability inside an 80rem shell, which
   left a dead 512px strip down the right of every desktop viewport —
   about a third of the page, empty, on every one of these pages. Widening
   the prose to fill it would have pushed the line length past 120
   characters, which is the wrong fix; the column earns its keep instead.

   Below 64rem this collapses to one column and the aside is dropped
   entirely (see .side) — on a phone its contents would only duplicate the
   closing CTA and the footer's own guidance nav. */
.content-wrap {
  display: grid;
  gap: 3.5rem;
  align-items: start;
}

@media (min-width: 64rem) {
  .content-wrap {
    /* minmax(0,1fr), not 1fr: a bare 1fr has min-width:auto, so one long
       unbreakable string in the prose would push the grid wider than the
       shell instead of wrapping. */
    grid-template-columns: minmax(0, 1fr) 20rem;
  }
}

.content {
  padding-block: 0.5rem 3rem;
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.side {
  display: none;
}

@media (min-width: 64rem) {
  .side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Follows the reader down a long page. 5.5rem clears the sticky
       header, which is ~4.5rem tall. */
    position: sticky;
    top: 5.5rem;
    padding-top: 0.5rem;
  }
}

/* The aside is navigation ONLY — deliberately no call to action in here.
   It briefly carried a "Start your plan" card, which was a mistake: being
   sticky, it was on screen at the same time as BOTH the hero's CTA row and
   the closing one, so a reader could see the same two buttons three times
   over (five counting the header's "Get Started"). The page now asks twice,
   at the two moments where asking makes sense — once at the top, once when
   you have finished reading — and the sidebar just helps you get somewhere
   else. */
.side-nav {
  background: var(--surface-low);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}

.side-nav h2 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 0.75rem;
}

.side-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.side-nav li {
  margin: 0;
}

.side-nav a {
  display: block;
  padding: 0.45rem 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  text-decoration: none;
  border-bottom: 1px solid rgba(224, 192, 177, 0.4);
  transition: color 0.15s ease;
}

.side-nav li:last-child a {
  border-bottom: 0;
}

.side-nav a:hover,
.side-nav a:focus-visible {
  color: var(--primary);
}

/* h2 carries a 3rem top margin to separate sections, but the first element
   here already sits below the hero's own bottom padding — stacking both left
   a ~110px dead gap under the CTAs. */
.content > :first-child {
  margin-top: 0;
}

/* Running text keeps a readable measure; the tile grids below break out
   to the full shell so they can run three and four across like the
   landing page's "Everything your child's future needs" strip. */
.content > p,
.content > h2,
.content > h3,
.content > ul:not(.grid),
.content > ol:not(.steps) {
  max-width: var(--prose);
}

h2 {
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 2.5rem 0 0.75rem;
}

h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--foreground);
  margin: 0 0 0.35rem;
}

p,
li {
  color: var(--muted-foreground);
}

strong {
  color: var(--foreground);
  font-weight: 600;
}

.content > ul:not(.grid) {
  padding-left: 1.15rem;
}

li {
  margin-bottom: 0.5rem;
}

/* ── Cards and tiles — the landing page's card vocabulary ─────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.5rem;
  margin: 1.75rem 0;
  max-width: var(--prose);
  box-shadow: var(--shadow-sm);
}

.card p:last-child {
  margin-bottom: 0;
}

.card h3 {
  font-size: 1rem;
}

/* The landing page marks its emphasis cards with a 4px top rule rather
   than a different fill (.legacy-card-accent-top in src/styles.css). */
.card.accent {
  border-top: 4px solid var(--primary-soft);
  background: var(--surface-low);
}

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.grid li {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.grid li:hover {
  border-color: rgba(157, 67, 0, 0.4);
  box-shadow: var(--shadow-sm);
}

.grid li p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
}

ol.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 1.5rem 0 0;
  max-width: var(--prose);
}

ol.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 3rem;
  margin-bottom: 1.35rem;
}

ol.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 2rem;
  height: 2rem;
  border-radius: 0.75rem;
  background: rgba(157, 67, 0, 0.1);
  color: var(--primary);
  font-weight: 700;
  font-size: 0.9rem;
  /* Longhand rather than `place-items`, which older Safari ignores in
     grid containers — the digit would sit top-left instead of centred. */
  display: grid;
  align-items: center;
  justify-items: center;
}

/* ── Footer — solid #C05621, as on the landing page ───────────────── */
.site-footer {
  background: var(--footer);
  color: #fff;
  margin-top: 3rem;
}

.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  padding-block: 3rem;
}

.footer-brand {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
}

.footer-grid p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  margin: 0;
}

.footer-grid h2 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 0.9rem;
}

.footer-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-grid li {
  margin-bottom: 0.55rem;
}

.footer-grid a {
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  transition: opacity 0.15s ease;
}

.footer-grid a:hover,
.footer-grid a:focus-visible {
  opacity: 0.75;
  text-decoration: underline;
}

.footer-grid a[aria-current="page"] {
  font-weight: 700;
  text-decoration: underline;
}

.footer-note {
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  font-size: 0.85rem;
}

.footer-bottom {
  background: var(--footer-deep);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
}

.footer-bottom .shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 1rem;
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  margin-left: 1.25rem;
}

.footer-bottom a:first-child {
  margin-left: 0;
}

.footer-bottom a:hover,
.footer-bottom a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.25rem;
}

@media (max-width: 30rem) {
  .btn-primary {
    padding-inline: 0.9rem;
  }

  /* The wordmark stays. It used to be hidden here to make room for the
     back-link, which cost the site its name on exactly the screens where
     the name matters most; the back-link has moved to the foot of the page
     instead, so the header is just brand + primary action and both fit. */
  a.brand {
    font-size: 1.05rem;
    gap: 0.4rem;
  }

  a.brand img {
    width: 2.25rem;
    height: 2.25rem;
  }

  .cta-row .btn {
    width: 100%;
  }
}

/* Honour the OS setting. The lifts and slides here are decoration; for
   anyone who has asked for less motion they are just noise. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}