/* ==========================================================================
   JYO Health — minimal "coming soon" page-specific styling
   Loaded after base.css, which provides shared tokens, the header/footer.
   Intentionally minimal: this is a placeholder ahead of the full JYO
   Health build (a future step), not the full offering.
   ========================================================================== */

.health-hero {
  position: relative;
  overflow: hidden; /* clip the off-canvas network motif at the true page edge */
  min-height: calc(100vh - 130px);
  display: flex;
  align-items: center;
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}
@media (max-width: 720px) {
  .health-hero {
    min-height: auto;
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }
}
.health-hero-content {
  max-width: 620px;
}
.health-name {
  font-size: clamp(1.95rem, 3.8vw, 2.65rem);
  color: var(--deep-indigo);
  margin-bottom: var(--space-1);
}
.health-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
}
.health-positioning {
  font-size: 1.05rem;
  color: var(--ink-soft);
  max-width: 52ch;
  margin-bottom: var(--space-2);
}
/* ---------- pillars ---------- */
/* The three connected aspects of JYO Health, presented as one restrained
   line — same typographic treatment already used for this pattern on the
   homepage pathway cards (uppercase, letter-spaced, muted ink), with the
   separating dots picked out in the Health accent (Coral) so the three
   phrases read as connected rather than as three separate labels.
   Below ~520px there isn't reliably room for all three on one line without
   "Science Decoded" wrapping mid-phrase, so the three items stack as clean
   separate rows instead — dots are hidden in that state (a lone dot reads
   oddly once the phrases are no longer inline), same typography otherwise. */
.health-pillars {
  margin-top: var(--space-2);
  color: var(--ink-soft);
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.health-pillar {
  white-space: nowrap; /* each phrase stays whole, never splits mid-word */
}
.health-pillars-dot {
  color: var(--coral);
  margin: 0 0.6em;
}
@media (max-width: 520px) {
  .health-pillars {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4em;
  }
  .health-pillars-dot {
    display: none;
  }
}

/* ---------- waitlist ---------- */
/* Real Infomaniak Newsletter/webform integration. The vendor script
   (loaded inside #waitlist-form, see health/index.html) injects its own
   working <form> — its exact markup/class names aren't knowable ahead of
   time, so these rules target it by element type/role (input[type=email],
   button/input[type=submit], the injected form/wrapper) rather than by
   class, reset likely vendor defaults first (box-sizing, width, margin),
   then reapply the site's existing input/button look with !important on
   the properties that matter visually, so Infomaniak's own default styling
   cannot take over the page. If the script instead renders inside an
   <iframe>, none of this can reach its internals — that would need to be
   confirmed in a real browser once the form is live and revisited then. */
.waitlist-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: var(--space-3) 0 0.6em;
}
#waitlist-form {
  max-width: 440px;
  margin: 0 0 var(--space-2);
  font-family: var(--font-body) !important;
}
/* Force the site's UI/body font (Montserrat) on every piece of text the
   Infomaniak script injects — its title, description, field, privacy/GDPR
   text and button alike — per the JYO typography system (DM Serif Display
   is reserved for brand/display moments, never functional/UI text like a
   form). Two things could otherwise leak in here: Infomaniak's own default
   font on any element it sets one on directly, and/or this site's own
   global `h1, h2, h3 { font-family: var(--font-display) }` rule (base.css)
   if Infomaniak renders its form title using a heading tag. The universal
   `*` selector plus !important closes both paths without touching size,
   weight, spacing or colour anywhere. */
#waitlist-form * {
  box-sizing: border-box;
  font-family: var(--font-body) !important;
}
#waitlist-form form,
#waitlist-form > div {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--space-1) !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  background: none !important;
  border: none !important;
}
#waitlist-form input[type="email"],
#waitlist-form input[type="text"] {
  flex: 1 1 200px !important;
  min-width: 0 !important;
  width: auto !important;
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  padding: 0.75em 1em !important;
  border: 1px solid var(--line) !important;
  border-radius: 2px !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  margin: 0 !important;
  box-shadow: none !important;
}
#waitlist-form input[type="email"]::placeholder,
#waitlist-form input[type="text"]::placeholder {
  color: var(--ink-soft);
  opacity: 0.7;
}
#waitlist-form input[type="email"]:focus-visible,
#waitlist-form input[type="text"]:focus-visible {
  outline: 2px solid var(--deep-indigo);
  outline-offset: 2px;
}
#waitlist-form button,
#waitlist-form input[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  padding: 0.85em 1.5em !important;
  border: 1px solid var(--coral) !important;
  border-radius: 2px !important;
  background: none !important;
  color: var(--coral) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 0.82rem !important;
  transition: background-color 0.15s ease, color 0.15s ease;
  margin: 0 !important;
  box-shadow: none !important;
}
#waitlist-form button:hover,
#waitlist-form button:focus-visible,
#waitlist-form input[type="submit"]:hover,
#waitlist-form input[type="submit"]:focus-visible {
  background: var(--coral) !important;
  color: var(--warm-ivory) !important;
}
.waitlist-privacy {
  margin: 0.6em 0 var(--space-2);
  max-width: 440px;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* Network motif — same shared symbol, recoloured to Energy/Vitality coral
   per the approved identity, mirrored to distinguish it from the Life
   Sciences (Mineral Blue) treatment. Subtle, low-opacity, partially
   off-canvas — a supporting texture, not a focal illustration. */
.network-motif--health-hero {
  position: absolute;
  top: 50%;
  right: -110px;
  width: 320px;
  height: auto;
  color: var(--coral);
  opacity: 0.5;
  transform: translateY(-50%) scaleX(-1);
  pointer-events: none;
}
@media (max-width: 720px) {
  .network-motif--health-hero {
    top: auto;
    bottom: -10px;
    transform: scaleX(-1);
    width: 150px;
    right: -45px;
    opacity: 0.25;
  }
}