/* ============================================================================
   /every-family/ — the request form only.

   ⛔ EVERYTHING ELSE ON THAT PAGE IS BORROWED, NOT BUILT. The page loads
   css/style.css (nav, footer, buttons, tokens, the three-phone trio, the
   .proof-* credential figures) and css/wyw.css (.wyw-hero, .wyw-section,
   .wyw-steps, .wyw-how, .wyw-stage-wrap, .wyw-trust, .wyw-foot-note). This file
   exists because a form is the one component the site did not already have.
   ⛔ Do not re-declare a token, a button or a section rhythm here.

   Loaded AFTER style.css and wyw.css.
   ============================================================================ */

.ef-card {
  max-width: 620px; margin: 26px auto 0;
  background: var(--bg-white);
  border: 1px solid rgba(21,25,43,0.14);
  border-radius: var(--radius-card);
  padding: clamp(22px, 4vw, 32px);
  box-shadow: 0 18px 44px -28px rgba(2,4,8,0.38);
}

.ef-hidden { display: none !important; }

.ef-field { margin-bottom: 18px; }
.ef-field:last-of-type { margin-bottom: 22px; }

.ef-label {
  display: block; margin-bottom: 7px;
  font-family: var(--font-sans); font-size: 0.95rem; font-weight: 700;
  color: var(--text-primary);
}
/* 0.9rem on #64748b measures 4.76:1 on white, which clears AA for the 14.4px
   this computes to. Do not lighten it. */
.ef-hint { font-weight: 400; color: var(--text-secondary); font-size: 0.9rem; }

.ef-input, .ef-select {
  width: 100%; min-height: 52px;
  padding: 13px 15px;
  font-family: var(--font-sans); font-size: 1rem; color: var(--text-primary);
  background: var(--bg-white);
  border: 1.5px solid rgba(21,25,43,0.22); border-radius: 14px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.ef-select {
  /* Native chevron is removed on some platforms by the border-radius, so the
     caret is drawn here and the right padding leaves room for it. */
  appearance: none; -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.ef-input:focus, .ef-select:focus {
  outline: none;
  border-color: var(--accent-amber);
  box-shadow: 0 0 0 3px rgba(217,119,6,0.18);
}
.ef-input::placeholder { color: var(--text-muted); }

/* ⛔ HONEYPOT. Off-screen, NOT display:none and NOT hidden, because some bots
   skip fields they can tell are hidden. aria-hidden + tabindex=-1 keep it away
   from screen readers and the keyboard, so a real parent never meets it.
   ⛔ Never give it a name a password manager would try to autofill. */
.ef-hp {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.ef-err {
  display: none; margin: 0 0 14px;
  padding: 11px 14px; border-radius: 12px;
  background: #FEF2F2; border: 1px solid #FCA5A5; color: #7F1D1D;
  font-size: 0.95rem; line-height: 1.5;
}
.ef-err.visible { display: block; }

.ef-submit-note {
  margin: 14px 0 0; text-align: center;
  color: var(--text-secondary); font-size: 0.9rem; line-height: 1.55;
}

/* ---------- Success ----------
   ⛔ NO CODE EVER APPEARS HERE. The code is emailed after a person looks at the
   request. A code rendered on a public page is the exact failure that
   OFFER_CODES_AND_REFERRAL_LINKS.md exists to prevent, and a success state is
   still a public page. */
.ef-success { display: none; text-align: center; padding: 10px 0 4px; }
.ef-success.visible { display: block; }
.ef-success-icon {
  width: 54px; height: 54px; margin: 0 auto 18px;
  border-radius: 50%; background: var(--accent-green-bg); color: var(--accent-green-text);
  display: flex; align-items: center; justify-content: center;
}
.ef-success-icon svg { width: 26px; height: 26px; }
.ef-success h3 {
  font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.25;
  color: var(--text-primary); margin: 0 0 10px;
}
.ef-success p { margin: 0; color: var(--text-secondary); font-size: 1.02rem; line-height: 1.6; }

/* ---------- The two quiet audiences ----------
   Organisations and funders. Deliberately plainer than anything a parent
   reads: a parent must never scroll past this and feel the page is not for
   them. */
.ef-asides { display: grid; gap: 16px; margin-top: 30px; }
@media (min-width: 720px) { .ef-asides { grid-template-columns: 1fr 1fr; } }
.ef-aside {
  background: var(--bg-light); border: 1px solid rgba(0,0,0,0.07);
  border-radius: var(--radius-card); padding: 22px 24px;
}
.ef-aside h3 {
  font-family: var(--font-sans); font-size: 1rem; font-weight: 800;
  color: var(--text-primary); margin: 0 0 8px;
}
.ef-aside p { margin: 0 0 12px; color: var(--text-secondary); font-size: 0.97rem; line-height: 1.6; }
.ef-aside a { color: #92400E; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(146,64,14,0.35); }
.ef-aside a:hover { border-bottom-color: #92400E; }

/* ---------- Small print ---------- */
.ef-fine {
  max-width: 620px; margin: 40px auto 0; padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.ef-fine ul { margin: 0; padding-left: 20px; }
.ef-fine li { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.65; margin-bottom: 7px; }
.ef-fine a { color: #92400E; }
.ef-fine .ef-android-row { margin-top: 16px; }

/* The credential figures sit in a shared component; it only needs centring and
   breathing room on this page. */
.ef .proof-container { margin: 28px auto 0; justify-content: center; }

/* ⚠️ Width is set here, not with class="w-100". `.w-100` appears on 109 pages
   (the early-access modal's submit button) and is DEFINED NOWHERE in css/, so
   relying on it would have produced an auto-width button that looked like a
   mistake. */
#efSubmit { width: 100%; min-height: 54px; padding: 15px; font-size: 1rem; }

/* ============================================================================
   PRINT
   ⛔ THIS BLOCK IS REQUIRED, NOT A NICETY. css/wyw.css carries a print sheet
   written for /adhd/ and /autism/ that hides .wyw-hero, .wyw-stage-wrap,
   .wyw-how and .wyw-trust with !important and prints only the numbered steps
   under a .wyw-print-head title. This page loads that sheet for its screen
   styles, so without the overrides below a printed copy came out as a
   headerless fragment with a blank form in the middle of it.

   ⭐ Who prints this: the caseworker, nurse or teacher who cannot hand a family
   a link. So the sheet is the headline, the three steps and the address to go
   to. ⛔ Not the form — nobody fills in a paper form, and a printed form field
   invites someone to write an email address on a page that goes in a bin.
   ============================================================================ */
@media print {
  /* Put the hero back. It carries the one sentence that makes the sheet make
     sense, and wyw.css hid it with !important.
     ⛔ margin AND max-width have to go too. .wyw-hero is max-width:880px with
     margin:0 auto, and it sits OUTSIDE .wyw-wrap, so the print block's rule for
     .wyw-wrap never reached it. Killing only the padding left the headline and
     the opening lines centred in the page while "How it works" and the steps
     started at the left margin — two different left edges on one sheet, which
     reads as a broken document. Caught by looking at the render. */
  .ef .wyw-hero {
    display: block !important; text-align: left;
    padding: 0 !important; margin: 0 !important; max-width: none !important;
  }
  .ef .wyw-hero .headline { font-size: 17pt !important; margin: 0 0 7pt !important; color: #000; }
  .ef .wyw-hero p { font-size: 10.5pt !important; color: #222 !important; margin: 0 0 5pt !important; max-width: none; }
  .ef .wyw-cta-row { display: none !important; }

  /* Screen furniture that has no meaning on paper. */
  .ef-card, .ef-success, .ef-asides, .ef-android-row, .ef-submit-note,
  .ef .proof-container, .ef-fine ul { display: none !important; }
  .ef-fine { border: none !important; margin: 0 !important; padding: 0 !important; }

  /* ⭐ THE ADDRESS IS THE MOST IMPORTANT THING ON THE PRINTED SHEET, and until
     2026-11-06 it was an 11pt line that disappeared into the page.
     The outreach thread reports these go on pamphlet shelves at Kentucky Family
     Resource Centres and get handed out by Head Start and home-visiting staff.
     A family reads this on paper and has to be able to type the address later,
     possibly from across a room or off a noticeboard. So it gets a box and real
     size. ⛔ Do not shrink it back to a sentence. */
  .ef-print-url {
    display: block !important;
    margin-top: 16pt; padding: 10pt 12pt;
    border: 1.5pt solid #000; border-radius: 4pt;
    font-size: 11pt; color: #000; line-height: 1.35;
  }
  .ef-print-url strong {
    display: block; margin-top: 2pt;
    font-size: 18pt; letter-spacing: 0.01em;
  }

  #request > h2, #request > p { display: none !important; }
}

/* Hidden on screen, printed at the bottom of the sheet. */
.ef-print-url { display: none; }