/* -----------------------------------------------------------------
 * Rouxbarb closed-beta pages — shared styles
 * Garden Theme palette (matches public/index.html)
 * ----------------------------------------------------------------- */

:root {
  /* Brand */
  --pink-petal: #fa7e97;
  --pink-bubblegum: #f54d6f;
  --pink-deep: #d62e58;
  --rose-cherry: #9d2c42;
  --green-garden: #9dc962;
  --garden-deep: #3f6b22;

  /* Surfaces (light context) — used inside the form/confirmation containers
     where we need a light background with dark text for legibility. */
  --paper-cream: #f8f6f2;  /* lightest surface — bgField */
  --cream: #f1ede4;        /* bgSurface (page-level text on dark gradient) */
  --soft-linen: #e9e4d8;   /* bgElevated */
  --bone: #e1dbcb;         /* bgElevatedTertiary / strokes */

  /* Text colors for the light-context container interior. The outside-the-card
     stack (h1, lede, footer over the pink gradient) keeps using --cream. */
  --text-primary: #1a1a1a;
  --text-secondary: #3a3a3a;
  --text-muted: #6b6b6b;

  /* Status colors */
  --status-error: #ff004f;
  --status-success: #3f6b22;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; min-height: 100%; }

/* iOS Safari safe-area handling.
   --------------------------------------------------------------------------
   iOS 26 dropped support for the <meta name="theme-color"> hint and now
   samples the BODY element's CSS `background-color` (a solid color — NOT
   `background-image`, NOT a gradient) to fill the notch / home-indicator
   safe areas. We therefore set:
     - body { background-color: var(--rose-cherry); }  ← what iOS samples
     - body { background-image: <gradient>; }          ← what users see
     - html { background-color: var(--rose-cherry); }  ← fallback for
       overscroll bounce + non-Safari browsers
   Important: must use the long-hand `background-color` / `background-image`
   pair. The shorthand `background: <gradient>;` RESETS background-color to
   its default (transparent), which is what produces the white bars. */
html {
  background-color: var(--rose-cherry);
  min-height: 100vh;
  min-height: 100dvh;
}

body {
  font-family: 'Krub', system-ui, -apple-system, sans-serif;
  font-weight: 500;
  color: var(--cream);
  background-color: var(--rose-cherry); /* iOS samples this for the safe areas */
  background-image: radial-gradient(
    ellipse 120% 100% at 15% 0%,
    var(--pink-petal) 0%,
    var(--pink-bubblegum) 35%,
    var(--pink-deep) 65%,
    var(--rose-cherry) 100%
  );
  background-attachment: fixed;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
  /* Pad past iOS safe-area insets so content doesn't tuck under the notch
     or the home indicator. */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Decorative petal cluster — same SVG / positioning as the home page.
   Sits off-screen to the right, partially clipped. Pointer-events disabled
   so the form stays clickable. */
.petal-cluster {
  position: fixed;
  right: -50%;
  bottom: -100%;
  width: 250vmin;
  height: 250vmin;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}
.petal-cluster svg { width: 100%; height: 100%; }

/* Layout — left-aligned single column over the petal background. */
.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 48px clamp(20px, 5vw, 64px);
}
header {
  display: flex;
  justify-content: flex-start;
}
.wordmark { display: inline-block; height: 32px; color: var(--cream); }
.wordmark svg { height: 100%; width: auto; display: block; }
.wordmark path { fill: currentColor; }

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 640px;
  margin-top: 80px;
}

h1 {
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
h1 .accent { color: var(--green-garden); font-style: italic; }

.lede {
  font-size: clamp(16px, 2.2vw, 19px);
  line-height: 1.5;
  font-weight: 400;
  max-width: 560px;
  margin: 0 0 32px;
  opacity: 0.92;
}

/* Form container — Paper Cream frosted surface over the pink gradient.
   Bg uses our lightest surface color at high alpha (still slightly translucent
   so the gradient bleeds through). Content inside flips to dark text on light. */
.beta-form {
  background: rgba(248, 246, 242, 0.92);
  border: 1px solid rgba(225, 219, 203, 0.7); /* Bone with alpha */
  border-radius: 16px;
  padding: clamp(20px, 4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  color: var(--text-primary); /* inherit dark text */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
/* Hint text below each field label. Matches the size of the checkbox-row
   labels ("I am 18 or older") for readability, but slightly lighter weight
   so labels still read as the dominant element. max-width keeps the line
   length comfortable on wider viewports. */
.field .hint {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  margin-top: -2px;
  line-height: 1.4;
  max-width: 480px;
}
.field input[type="email"],
.field input[type="text"],
.field select,
.field textarea {
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  background: #ffffff;
  border: 1px solid var(--bone);
  border-radius: 10px;
  padding: 12px 14px;
  outline: none;
  width: 100%;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.field input[type="email"]:focus,
.field input[type="text"]:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--pink-bubblegum);
  box-shadow: 0 0 0 3px rgba(245, 77, 111, 0.15); /* subtle Rouxbarb Pink focus ring */
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-muted);
}
.field textarea { resize: vertical; min-height: 96px; }
.field select option { color: var(--text-primary); }

/* Checkboxes */
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-primary);
}
.checkbox-row input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--pink-bubblegum);
  cursor: pointer;
}
.checkbox-row a {
  color: var(--rose-cherry);
  border-bottom: 1px solid rgba(157, 44, 66, 0.3);
  text-decoration: none;
}
.checkbox-row a:hover {
  border-bottom-color: var(--rose-cherry);
}

/* Honeypot: visually hidden, screen-reader-hidden, but in the DOM */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Submit — Rouxbarb Pink against the light Paper Cream container so it pops. */
.submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--pink-bubblegum);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  margin-top: 8px;
  align-self: flex-start;
  transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
  box-shadow: 0 4px 16px rgba(245, 77, 111, 0.25);
}
.submit:hover {
  background: var(--pink-deep);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(214, 46, 88, 0.35);
}
.submit:active { background: var(--pink-deep); transform: translateY(0); }
.submit:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* Status messages — sit inside the light form container, so dark/brand colors. */
.status {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.4;
  min-height: 20px;
}
.status.error { color: var(--status-error); font-weight: 600; }
.status.ok { color: var(--status-success); font-weight: 600; }

/* Small legal-disclaimer text under the form (reCAPTCHA notice, ToS, etc.).
   Lives inside the light form container, so muted dark text + brand link color. */
.legal-notice {
  margin-top: 12px;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
.legal-notice a {
  color: var(--rose-cherry);
  border-bottom: 1px solid rgba(157, 44, 66, 0.3);
  text-decoration: none;
}
.legal-notice a:hover {
  border-bottom-color: var(--rose-cherry);
}

/* Floating reCAPTCHA v3 badge that Google's SDK injects bottom-right.
   The legal-notice block in the form already satisfies Google's ToS
   requirement to disclose reCAPTCHA, so the badge is decorative — we tuck
   the blue "protected by reCAPTCHA" panel off-screen and leave just the
   white square (with the reCAPTCHA icon) visible in the corner.
   The badge is 256px wide; pushing `right: -196px` leaves 60px on-screen,
   which is the full white square and no blue panel.
   z-index keeps it above the petal-cluster overlay. */
.grecaptcha-badge {
  right: -196px !important;
  z-index: 2147483647 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Footer */
footer {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  font-size: 13px;
  opacity: 0.85;
  /* Indent matches the content container's corner radius (16px) so the first
     link visually aligns with the start of the card text above. */
  padding-left: 16px;
}
footer a {
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid rgba(241, 237, 228, 0.4);
  padding-bottom: 1px;
}
footer .sep { opacity: 0.5; }

/* Confirmation-page card — same Paper Cream frosted surface as the form. */
.confirmation {
  background: rgba(248, 246, 242, 0.92);
  border: 1px solid rgba(225, 219, 203, 0.7);
  border-radius: 16px;
  padding: 32px;
  max-width: 560px;
  width: 100%;
  color: var(--text-primary);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.confirmation h2 {
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
}
.confirmation p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.confirmation strong { color: var(--text-primary); }
.confirmation .btn-secondary {
  display: inline-block;
  margin-top: 8px;
  padding: 12px 22px;
  border: 1px solid var(--bone);
  border-radius: 999px;
  background: #ffffff;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: background 120ms ease, border-color 120ms ease;
}
.confirmation .btn-secondary:hover {
  background: var(--soft-linen);
  border-color: var(--rose-cherry);
}

@media (max-width: 480px) {
  .page { padding: 32px 24px; }
  .petal-cluster {
    right: -30%;
    bottom: -25%;
    opacity: 0.15;
  }
}