/* ===================================================================
   BabyHavyn — shared styles for the public, non-app pages.
   (index.html, beta.html, and anything added later.)

   The React app does NOT use this file: it styles itself from the THEMES
   objects in NewbornVisitorApp.jsx, because a household picks its own
   palette at runtime. These pages are always the Meadow palette, which is
   the "messages from BabyHavyn" identity.

   Page-specific rules stay in that page's own <style> block. What lives
   here is the stuff that should look identical everywhere.
   =================================================================== */

:root {
  --primary: #6B9C7D;
  --secondary: #E38B6F;
  --tertiary: #6FA3B5;
  --ink: #2E3B30;
  --ink-soft: #6E7C6F;
  --border: #D6E4D2;
  --surface: #FAFCF8;
  --base: #EFF4EC;

  /* Same three colours as channel triplets, so decoration can set its own
     alpha. rgba() needs the components, not a hex. */
  --primary-rgb: 107, 156, 125;
  --secondary-rgb: 227, 139, 111;
  --tertiary-rgb: 111, 163, 181;

  /* HALF the reading column's width. Each page overrides it, and the
     background decoration positions itself relative to it — so circles sit
     beside the content on any page and any viewport, rather than at fixed
     offsets tuned for one layout. */
  --col: 360px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: linear-gradient(160deg, #E3EFDD 0%, #F5F8F0 45%, #DCEAE6 100%);
  line-height: 1.55;
  min-height: 100vh;
}

.wrap {
  max-width: calc(var(--col) * 2);
  margin: 0 auto;
  padding: 0 20px;
  position: relative;   /* sits above .bg-decor */
  z-index: 1;
}

/* ---- Typography ---------------------------------------------------- */

h1 { font-family: Georgia, serif; font-size: 34px; line-height: 1.2; margin: 0 0 14px; }
h2 { font-family: Georgia, serif; font-size: 24px; margin: 0 0 18px; }
h3 { font-size: 15.5px; margin: 0 0 4px; }
p  { font-size: 15.5px; color: var(--ink-soft); margin: 0 0 16px; }
.lede { font-size: 18px; color: var(--ink); }

/* A narrow single-purpose page (the beta form) wants a smaller, centred
   hero than a marketing page does. Scoped to a body class rather than
   left to stylesheet order: `<style>` after `<link>` does win in a real
   browser, but relying on that is brittle and invisible to a reader. */
.page-form h1 { font-size: 26px; text-align: center; margin: 0 0 10px; }
.page-form .lede { font-size: 15px; color: var(--ink-soft); text-align: center; margin-bottom: 28px; }
.page-form .card { padding: 28px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); }
.page-form footer { padding: 28px 0; font-size: 12px; }
.page-form .wrap { padding-top: 40px; }

/* A confirmation that IS the whole page shouldn't sit in a raised card
   competing with itself — transparent, so it reads as part of the page. */
.page-form .success {
  text-align: center; padding: 8px 0 4px;
  background: transparent; box-shadow: none; border: none;
}
.page-form .success h2 {
  font-family: Georgia, serif; font-size: 25px; line-height: 1.25;
  margin: 0 0 12px; color: var(--ink);
}
.page-form .success p { color: var(--ink-soft); font-size: 15px; margin: 0; }

/* Emphasis needs its own colour. Without this it inherits the soft body
   colour and reads as washed out — bold but no more prominent than the
   text around it. 600 rather than `bolder`, which is relative to the
   parent and so resolves differently in a <p> than in an <li>. */
strong { color: var(--ink); font-weight: 600; }

/* ---- Wordmark ------------------------------------------------------ */

/* Flex, not text-align: the app icon sits in front of the word, and
   text-align does nothing once the box is a flex container. */
.wordmark {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: Georgia, serif; font-size: 15px; letter-spacing: 1px;
  color: var(--primary); text-transform: uppercase; margin-bottom: 20px;
}
.wordmark img { border-radius: 8px; display: block; flex-shrink: 0; }

/* ---- Surfaces ------------------------------------------------------ */

.card {
  background: var(--surface); border-radius: 18px; padding: 32px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

/* ---- Buttons and links --------------------------------------------- */

.btn {
  display: inline-block; padding: 13px 26px; border-radius: 10px;
  font-weight: 600; font-size: 15px; text-decoration: none;
  text-align: center; cursor: pointer; border: none;
}
.btn-primary { background: var(--primary); color: white; }
.btn-secondary { background: white; color: var(--ink); border: 1px solid var(--border); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

/* ---- Form controls -------------------------------------------------- */

label {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--ink-soft); margin-bottom: 5px; margin-top: 16px;
}
input, select, textarea {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); font-size: 14.5px;
  font-family: inherit; box-sizing: border-box;
}
textarea { resize: vertical; min-height: 70px; }

.error { color: var(--secondary); font-size: 13px; margin-top: 10px; }

/* ---- Background decoration ------------------------------------------ */

/* The motif is the app icon's own: "a ring of small dots — the people
   gathered around". Drawn as gradients on ONE element rather than a dozen
   <span>s, so a page needs a single empty div and nothing else.

   Positions are relative to the reading column via --col, so they stay
   beside the content whatever its width. */
.bg-decor {
  position: fixed; inset: 0; overflow: hidden;
  pointer-events: none;   /* never intercept a click or a tap on a field */
  z-index: 0;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle 150px at calc(50% - var(--col) - 110px) 8%,  rgba(var(--primary-rgb), 0.13) 99%, transparent 100%),
    radial-gradient(circle  65px at calc(50% - var(--col) + 40px) 27%,  rgba(var(--tertiary-rgb), 0.15) 99%, transparent 100%),
    radial-gradient(circle  34px at calc(50% - var(--col) - 30px) 43%,  rgba(var(--secondary-rgb), 0.15) 99%, transparent 100%),
    radial-gradient(circle 105px at calc(50% - var(--col) - 80px) 64%,  rgba(var(--tertiary-rgb), 0.11) 99%, transparent 100%),
    radial-gradient(circle  48px at calc(50% - var(--col) + 26px) 86%,  rgba(var(--primary-rgb), 0.13) 99%, transparent 100%),

    radial-gradient(circle 170px at calc(50% + var(--col) + 120px) 10%, rgba(var(--tertiary-rgb), 0.12) 99%, transparent 100%),
    radial-gradient(circle  44px at calc(50% + var(--col) + 34px) 33%,  rgba(var(--secondary-rgb), 0.15) 99%, transparent 100%),
    radial-gradient(circle  80px at calc(50% + var(--col) + 46px) 53%,  rgba(var(--primary-rgb), 0.13) 99%, transparent 100%),
    radial-gradient(circle  58px at calc(50% + var(--col) + 22px) 74%,  rgba(var(--tertiary-rgb), 0.14) 99%, transparent 100%),
    radial-gradient(circle  30px at calc(50% + var(--col) + 70px) 91%,  rgba(var(--secondary-rgb), 0.13) 99%, transparent 100%);
}

/* Below this there are no side margins to decorate — the circles would sit
   behind the text rather than beside it, which is the opposite of what
   they're for. */
@media (max-width: 900px) { .bg-decor { display: none; } }

/* ---- Footer --------------------------------------------------------- */

footer { text-align: center; padding: 32px 0 48px; font-size: 12.5px; color: var(--ink-soft); }
footer a { color: var(--ink-soft); }