/* ═══════════════════════════════════════════════════════════════
   PARENTS_JOURNEY.CSS — pain-point Parents Journey
   (hero → pick a pain point → 5-question reflection → fixed action
   schedule → tools). New selectors only. Layout/typography tokens
   come from setu_styles.css (--space-*, --ds-radius-*, --sage), same
   as the Repeater module's own stylesheet. Colour is this module's
   own — the same exclusive rose already used for the "For Parents"
   entry button (index.php) and the repeater hub's own Parents card —
   so a parent's eye learns to recognise it as "my section" everywhere
   it appears. #stage/#footer/#header are reused unedited from the
   main stylesheet, exactly like repeaters.css does.
═══════════════════════════════════════════════════════════════ */

:root {
  --par-primary:      #D6336C;
  --par-primary-dark:  #A61E4D;
  --par-primary-pale:  #FDEEF3;
  --par-primary-12:    rgba(214, 51, 108, 0.14);
  --par-primary-08:    rgba(214, 51, 108, 0.08);
}

/* ══════════════════════════════════════════════════════════
   FIXED APP SHELL — identical fix to repeaters.css: this module
   also always fits in exactly one screen, header/footer pinned,
   only #stage scrolls. See repeaters.css's own docblock for why
   min-height:0 + dropping will-change:transform are both required
   for that to actually hold (popup/overlay clipping bug otherwise).
═══════════════════════════════════════════════════════════ */
html, body { height: 100%; }
body { min-height: 100dvh; }

#app {
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

#header { flex: 0 0 auto; }

#stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: var(--s4);
  will-change: opacity;
  z-index: 300;
}

#footer {
  flex: 0 0 auto;
  position: static;
  box-shadow: none;
}

/* Every primary button in this module — reskinned from MannSetu's
   gold to this module's own rose. Scoped safely: parents_journey.css
   only ever loads on this module's own pages. */
.btn.gold {
  background: linear-gradient(135deg, var(--par-primary) 0%, var(--par-primary-dark) 100%);
  box-shadow: 0 4px 14px rgba(166, 30, 77, .35);
}
.btn.gold:hover { box-shadow: 0 6px 18px rgba(166, 30, 77, .45); }

/* ── Header chrome — trust link ── */
.parents-trust-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  color: var(--navy, #1e3a5f);
  opacity: .75;
}

/* ── ulzan-bar — current pain-point context label (empty until one is
   chosen), no crisis chrome in this module. Mirrors the main journey's
   own #ulzan-label: gold-on-navy, centred, invisible when empty. ── */
.parents-ulzan-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-4, 16px);
}
.parents-pain-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--gold, #d4a63a);
  letter-spacing: .02em;
  text-align: center;
  line-height: 1.4;
  opacity: 0;
  transition: opacity .2s ease;
}
.parents-pain-label:not(:empty) { opacity: 1; }

/* ── LANG — the module's first screen (mirrors the Repeater module's
   own onboarding LANG stage). ── */
.parents-lang-sub { opacity: .6; font-size: .88em; margin: -4px 0 var(--space-4, 16px); }
.parents-lang-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3, 12px);
}
.parents-lang-choice-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5, 22px) 0;
  border-radius: var(--ds-radius-card, 16px);
  border: 2px solid var(--par-primary-12);
  background: #fff;
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1em;
}
.parents-lang-choice-btn:active { background: var(--par-primary-pale); }

/* ── CONSENT — second onboarding screen, mirrors the Repeater module's
   own .repeater-consent-* pattern almost exactly, including reusing
   --sage (not this module's own rose) for the checked state — the
   universal "agreed/done" signal convention, same reasoning as the
   Repeater module's own docblock gives for that colour choice. ── */
.parents-consent-reassurance {
  font-size: .9em;
  opacity: .75;
  line-height: 1.5;
  margin: 0 0 var(--space-3, 12px);
  font-style: italic;
}
.parents-consent-list { margin: var(--space-3, 12px) 0; padding-left: 1.2em; }
.parents-consent-list li { margin-bottom: 10px; line-height: 1.5; }
.parents-consent-agree {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-radius: var(--ds-radius-card, 16px);
  border: 2px solid var(--ds-navy-08, rgba(13, 27, 62, .08));
  cursor: pointer;
  margin-top: var(--space-3, 12px);
}
.parents-consent-agree:has(.parents-consent-check:checked) {
  border-color: var(--sage, #2f9e6e);
  background: rgba(47, 158, 110, .08);
}
.parents-consent-agree input { width: 18px; height: 18px; accent-color: var(--sage, #2f9e6e); }

/* Continue — same gated-CTA pattern as the quiz's Next button. */
.parents-consent-cta {
  opacity: .4;
  pointer-events: none;
  transition: opacity .15s ease;
}
#app:has(.parents-consent-check:checked) .parents-consent-cta,
.parents-consent-cta.is-ready {
  opacity: 1;
  pointer-events: auto;
}

/* ── HERO ── */
.checkpoint-stage:has(.parents-hero),
.calm-stage:has(.parents-hero) {
  background: linear-gradient(120deg, var(--par-primary-08) 0%, var(--par-primary-pale) 50%, var(--par-primary-08) 100%);
}
.parents-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3, 12px);
  padding: 14vh 0 0;
}
.parents-hero-eyebrow {
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--par-primary-dark);
  margin: 0;
}
.parents-hero-headline {
  font-size: 1.5em;
  font-weight: 800;
  color: var(--navy, #1e3a5f);
  margin: 0;
  max-width: 22ch;
}
.parents-hero-sub { opacity: .68; margin: 0; max-width: 30ch; }

/* ── PAIN — pain-point picker. Mirrors index.php's own module-picker
   cards (colour, icon left, arrow right, tap-to-enter) rather than a
   bullet list — the card itself is the only action on this screen. ── */
.parents-pain-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  margin-top: var(--space-3, 12px);
}
.parents-pain-card {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-radius: var(--ds-radius-card, 16px);
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, var(--par-primary) 0%, var(--par-primary-dark) 100%);
  box-shadow: 0 6px 18px rgba(166, 30, 77, .28);
}
.parents-pain-icon {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  font-size: 1.05rem;
}
.parents-pain-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.parents-pain-title { font-weight: 800; font-size: 1em; }
.parents-pain-intro { font-size: .78em; opacity: .9; line-height: 1.4; }
.parents-pain-arrow { opacity: .85; font-size: 1.1em; }

/* ── QUIZ — one reflective question per screen, 4 single-or-multi-
   select options (worst-first/best-last — see ParentsScreens::
   orderOpts()). Reuses .opt/.opt-check/.opt-text as-is (defined in
   setu_styles.css) — native checkboxes stay in the DOM for real,
   JS-free selection; :has() gives them this module's own rose
   "selected" treatment, driven by :checked. Mirrors the Repeater
   module's own .repeater-opt pattern exactly. ── */
.parents-quiz-q { display: block; font-weight: 600; }
.parents-quiz-opts { display: flex; flex-direction: column; gap: var(--space-2, 8px); margin: var(--space-3, 12px) 0; }
.parents-opt { position: relative; padding: var(--space-3, 12px); }
.parents-opt-input {
  position: absolute;
  width: 20px; height: 20px;
  opacity: 0; /* .opt-check span is the visible indicator */
  margin: 0;
  cursor: pointer;
}
.parents-opt:has(.parents-opt-input:checked),
.parents-opt.is-checked {
  border-color: var(--par-primary);
  background: var(--par-primary-pale);
  box-shadow: 0 3px 12px rgba(166, 30, 77, .18);
}
.parents-opt:has(.parents-opt-input:checked) .opt-check,
.parents-opt.is-checked .opt-check {
  background: var(--par-primary);
  border-color: var(--par-primary);
}
.parents-opt:has(.parents-opt-input:checked) .opt-check::after,
.parents-opt.is-checked .opt-check::after {
  content: '';
  position: absolute;
  left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.parents-multiselect-hint {
  font-size: .76em;
  opacity: .55;
  text-align: center;
  margin: var(--space-2, 8px) 0 0;
}

/* Next — starts visually inert, activates once at least one option is
   checked. #app:has(...) reaches across from #stage's checkboxes to
   #footer's button (siblings under #app), the primary no-JS-safe
   mechanism; .is-ready is parents_journey.js's reliable companion
   (same reasoning as repeaters.js's syncCheckedStates()). */
.parents-quiz-next {
  opacity: .4;
  pointer-events: none;
  transition: opacity .15s ease;
}
#app:has(.parents-opt-input:checked) .parents-quiz-next,
.parents-quiz-next.is-ready {
  opacity: 1;
  pointer-events: auto;
}

/* Quiz progress dots — rendered inside $footer (core/parents_screens.php's
   quiz()), not the scrollable stage body, so they read as "directly above
   the Next button" rather than floating over page content. .probe-counter
   is shared/setu_styles.css's own position:fixed row (sized for a shorter,
   single-button footer elsewhere in the app) — overridden back to normal
   flow here so it just stacks above the button inside #footer instead. */
#footer .probe-counter {
  position: static;
  padding: 0 0 var(--space-2, 8px);
  pointer-events: auto;
  z-index: auto;
}

/* ── AJAX navigation busy state (assets/js/parents_journey.js) —
   deliberately subtle, mirrors repeaters.css's #app.rs-loading. ── */
#app.pj-loading #stage,
#app.pj-loading #footer {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* ── RESULT — fixed 5-action schedule for the chosen pain point ── */
.parents-actions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  margin: var(--space-3, 12px) 0;
}
.parents-action-card {
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-radius: var(--ds-radius-card, 16px);
  border: 1px solid var(--par-primary-12);
  background: rgba(255, 255, 255, .7);
}
.parents-action-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 8px);
}
.parents-action-label { font-weight: 700; color: var(--par-primary-dark); }
.parents-action-cadence {
  flex: 0 0 auto;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--par-primary-12);
  color: var(--par-primary-dark);
}
.parents-action-detail {
  margin: 6px 0 0;
  font-size: .9em;
  line-height: 1.55;
  opacity: .85;
}
.parents-action-link {
  display: inline-block;
  margin-top: 8px;
  font-size: .82em;
  font-weight: 600;
  color: var(--par-primary-dark);
  word-break: break-all;
}
.parents-result-explore {
  display: block;
  text-align: center;
  font-size: .82em;
  opacity: .6;
  color: inherit;
  text-decoration: none;
  padding: var(--space-2, 8px) 0 0;
}

/* ── TOOLS — final CTA grid ── */
.parents-tools-sub {
  opacity: .75;
  margin: 0 0 var(--space-3, 12px);
  line-height: 1.55;
}
.parents-tools-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}
.parents-tool-card {
  display: block;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-radius: var(--ds-radius-card, 16px);
  border: 2px solid var(--par-primary-12);
  color: var(--par-primary-dark);
  font-weight: 700;
  text-decoration: none;
  background: #fff;
}
.parents-tool-card:active { background: var(--par-primary-pale); }

@media (max-width: 480px) {
  .parents-hero { padding-top: 10vh; }
}