/*
 * /css/homepage-capture.css
 * Companion stylesheet for views/partials/hero-capture.ejs and
 * views/partials/newsletter-popup.ejs.
 *
 * The bulk of the styling lives inline inside each partial so the
 * sections are self-contained when included elsewhere. This file
 * carries the small set of layout-positional helpers + the role-variant
 * accent toggles, which work better as a single global sheet.
 */

/* ===== Hero capture role-variant accents (server-side rendered variant) ===== */
.hero-capture[data-role-variant="parent"]  { --hero-accent: var(--accent); }
.hero-capture[data-role-variant="teacher"] { --hero-accent: #38bdf8; }
.hero-capture[data-role-variant="district"]{ --hero-accent: #a855f7; }

/* Compensate for the secondary social-proof strip offset now that the hero
   section is taller on mobile (hero + capture stacks). */
@media (max-width: 768px) {
  .social-proof-strip { margin-top: -8px; }
}

/* Keyboard focus fallback for browser autofill that strips our focus styles */
.hero-capture .capture-field input:-webkit-autofill {
  -webkit-text-fill-color: var(--fg);
  box-shadow: 0 0 0 1000px rgba(10,10,18,0.7) inset;
  caret-color: var(--fg);
}

/* Newsletter popup: respect reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  .nl-popup:not([hidden]) { animation: none; }
}