/* WP Customizer overrides body background from theme default to #e4e4e8 */
body.custom-background { background-color: #e4e4e8; }

/* Info page background image (WP applied via .page-id-84 body class; we apply directly) */
/* Scoped to template-typ-info body class so it doesn't apply to faq/privacy-policy pages */
body.template-typ-info .info-page {
  background: url("/assets/images/Homepage_Info_TYP.webp") no-repeat center center fixed;
  -webkit-background-size: cover;
  background-size: cover;
}

/* legacy.css constrains content sections via .info-page selector; apply equivalent
   constraints for pages that use different <main> class names */
.privacy-policy-page #privacy-policy { max-width: 640px; }
.info-page #harassment-info { max-width: 640px; }

/* Gutenberg flex grid — not included in WP theme CSS, required for step-options buttons */
.wp-block-columns {
  display: flex;
  flex-wrap: wrap;
}
.wp-block-column {
  flex: 1 1 0;
  min-width: 0;
}

/* Wizard step visibility */
.wizard-step { display: none; }

/* Status dots for step 7 results */
.status-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #f1c40f;
  margin-right: 8px;
  vertical-align: middle;
}
.status-dot.status-ok  { background-color: #2ecc71; }
/* SPEC-007: queued for its disease window, not sent yet. */
.status-dot.status-scheduled { background-color: #f1c40f; }
.status-dot.status-error { background-color: #e74c3c; }
.status-note { font-size: 15px; color: #555; }

/* Results list (Step 7) */
.results-list { list-style: none; padding: 0; margin: 0; }
/* SPEC-007: shown only when the notification was queued rather than sent. */
.queued-note { margin: 0 0 14px; font-size: 15px; line-height: 1.4; }
/* Centred: the theme gives list items a 20px left margin, which pushed the
   number pill off centre on the thank-you step. */
#results-list li { margin: 0 auto 8px; }

/* Error message inside steps. Coral on the teal step read at 1.84:1 (H2 in
   the 2026-10-19 audit); a white pill with dark red text reads at 7.5:1. */
.error-message {
  background: #fff;
  color: #b00020;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 700;
  margin-top: 12px;
}

/* Recipient rows (Step 2) */
.recipient-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.recipient-row input {
  flex: 1;
}
.remove-recipient {
  background: none;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  padding: 0 8px;
  margin-left: 4px;
}

/* Add recipient button */
.add-recipient-btn {
  margin-top: 8px;
}

/* Turnstile container */
.turnstile-container {
  margin: 16px auto;
  display: flex;
  justify-content: center;
}

/* Celebration gif */
img.celebration-gif {
  max-width: 80%;
  max-height: 300px;
  margin: 0 auto 28px;            /* room before RESOURCES */
  display: block;
}

/* legacy.css opt-out form rules target type="phone"; alias them for valid type="tel".
   Also override Bootstrap's display:block on type="tel" to keep input+button inline. */
.info-page input[type="tel"].opt-notif-number {
  display: inline-block;
  border: 1px solid #26a9e0;
  border-radius: 60px;
  height: 60px;
  padding: 16px;
  width: 80%;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  background-color: #fff;
  color: #000;
  font-family: Lato, "Lucida Grande", Tahoma, Sans-Serif;
  font-size: 15px;
  letter-spacing: -0.4px;
  text-align: center;
  text-transform: uppercase;
  vertical-align: top;
}
@media (max-width: 668px) {
  .info-page input[type="tel"].opt-notif-number {
    border-radius: 60px;
    width: 100%;
  }
}

/* legacy.css targets html[lang="es-ES"] for the Spanish hero button but our pages use lang="es" */
html[lang="es"] .option-buttons button {
  max-width: 380px;
  padding-left: 20px;
  padding-right: 20px;
}

/* FAQ accordion */
.faq-row {
  cursor: pointer;
}
.faq-row-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease-out;
}

/* Step 3: "I'm just testing this out". A flag, not a sixteenth condition, so
   it sits alone under a rule with a smaller circle. It uses the grid's own
   stacked layout (circle on the centre axis, label beneath) so it is centred
   by the same rules as the conditions; the circle mechanics come from
   legacy.css (#step-details [type=checkbox] + .radio-button). */
#step-details .typ-test-row {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}
#step-details .typ-test-row .form-check-inline {
  display: block;
  width: 100%;
  text-align: center;
}
/* w3-button brings padding: 8px 16px and text-align: left, which pushes the
   glyph right and down inside a 40px circle. Centre it with flex instead. */
#step-details .typ-test-row [type=checkbox] + .radio-button,
#step-details .typ-test-row [type=checkbox]:checked + .radio-button {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#step-details .typ-test-row [type=checkbox] + .radio-button .fa-check {
  padding: 0;
  font-size: 16px;
  line-height: 1;
}
#step-details .typ-test-row .f8 {
  max-width: 340px;
  margin: 6px auto 0;
  font-size: 15px;
}

/* Step 4: shown only when the flag is on. */
#step-review .typ-test-note {
  text-align: center;
  color: #fff;
  margin: 14px 0 0;
  font-size: 16px;
  opacity: 0.9;
}

/* ── Accessibility (2026-10-19 frontend audit, fixed 2026-10-20) ───────────
   H3: the brand teal (#1CC7CE) and blue (#26a9e0) carried white text at about
   2:1. Every surface that carries text keeps its hue but darkens until white
   text reads at 4.5:1 or better; #1CC7CE stays wherever it is only a fill.
   Links darken to pass on white. Same selectors as legacy.css, loaded later. */
.notif-step, .main-menu, .main-overlay-background { background-color: #128388; }
.top-menu .menu-right button i { color: #128388; }
.f11, .f12, .faq-row-body h3,
.find-clinic a, .find-clinic a:link, .find-clinic a:hover, .find-clinic a:visited, .find-clinic a:active { color: #186c8f; }
.find-clinic button, .find-clinic input[type=submit], .footer,
.info-page #notification-table th, .faq-page #notification-table th { background-color: #186c8f; }
.info-page input[type="button"].opt-notif-send { background-color: #186c8f; border-color: #186c8f; }
#step-details [type=checkbox]:checked + .radio-button { background-color: #186c8f !important; border: 2px solid #fff; opacity: 1; }
a, a:visited, .faq-row.faq-row-open .faq-row-title, button.faq-row-button, #step-review .typ-big-button:hover { color: #1f7fa3; }
button.faq-row-button { border-color: #1f7fa3; }
.faq-row-icon, .wp-block-group.faq-row.faq-row-no-open .buttons a:hover button { background-color: #1f7fa3; }
.faq-row-body a, .info-page p a { text-decoration: underline; }

/* M1: the FAQ title is a real button inside its heading (faq.js builds it). */
.faq-row-title .faq-row-toggle {
  background: none; border: 0; padding: 0; margin: 0; width: 100%;
  font: inherit; color: inherit; text-align: inherit; text-transform: inherit;
  letter-spacing: inherit; line-height: inherit; cursor: pointer;
}
.faq-row-title .faq-row-toggle:focus-visible { outline: 3px solid #1f7fa3; outline-offset: 4px; border-radius: 2px; }
/* A closed body is hidden from the Tab key and screen readers, not just clipped. */
.faq-row-body[hidden] { display: none !important; }

/* M2: the disease checkbox input is invisible by design; the ring goes on the circle. */
#step-details [type=checkbox]:focus-visible + .radio-button { outline: 3px solid #fff; outline-offset: 3px; }
/* Visible focus everywhere: white on the teal surfaces, link-blue on white ones. */
.notif-step :focus-visible, .main-menu :focus-visible, .main-overlay :focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.faq-page :focus-visible, .info-page :focus-visible, .top-menu :focus-visible, .footer :focus-visible { outline: 3px solid #1f7fa3; outline-offset: 2px; }
/* M3: the step heading takes focus on every step change (app.js showStep). */
.step-header h1[tabindex]:focus-visible { outline: 2px dashed rgba(255, 255, 255, 0.75); outline-offset: 8px; }

/* Visually hidden, read by assistive technology (the wizard's live region). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Post-send questions on the thank-you step (app.js renderPostSend): one at a
   time, with the step's own text and its .step-options buttons. */
.post-send { margin-top: 24px; text-align: center; }
.post-send[hidden], .notif-step .step-options[hidden] { display: none !important; }
.post-send-count { margin: 0 0 12px; }
.post-send-text, .post-send-more p { margin: 0 auto 20px; max-width: 520px; }
.post-send-more[hidden] { display: none !important; }
/* Answers read top to bottom in their own order (the wizard's two-button rows
   are reversed on phones so the main action comes first; not here), and the
   locator links look like the other answer buttons. */
body .notif-step .post-send .step-options .wp-block-columns { flex-direction: column; align-items: center; }
.post-send .step-options .wp-block-column { margin: 0 0 12px; width: 100%; max-width: 240px; flex-basis: auto; }
.post-send .step-options button,
.post-send .step-options a.w3-btn { text-transform: uppercase; text-decoration: none; white-space: normal; display: inline-block; }
.post-send-progress { max-width: 240px; height: 6px; margin: 8px auto 0; background: rgba(255, 255, 255, .3); border-radius: 3px; overflow: hidden; }
.post-send-progress > div { height: 100%; background: #fff; border-radius: 3px; }
.post-send-intro { margin: 0 auto 18px; max-width: 520px; }
.post-send-done { margin: 0 auto 8px; max-width: 520px; font-weight: 700; }
.post-send-skip[hidden] { display: none !important; }
.post-send-skip { display: block; text-transform: none; letter-spacing: normal; margin: 0 auto 6px; padding: 6px 12px; background: none; border: 0; color: #fff; font: inherit; font-size: 16px; text-decoration: underline; cursor: pointer; }
.post-send-skip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#celebration-container[hidden] { display: none !important; }
/* The longer questions (PEP, PrEP, doxyPEP, 2026-10-22) left one word on the
   last line on phones; balanced lines keep the centred question even. */
.post-send-text { font-weight: 700; text-wrap: balance; }
/* The theme hangs the home page's background 12px past the right edge, which
   gave every phone a sideways scroll. Flush with the edge instead. */
.background { right: 0; }
/* The questions take the whole thank-you step after the first tap. */
.ps-focus .step-header, .ps-focus #queued-note, .ps-focus #results-list { display: none !important; }
.ps-focus .post-send { margin-top: 0; }
/* The about-you screen: four dropdowns (app.js psAboutYou). */
.post-send-group { margin: 0 auto 16px; max-width: 420px; text-align: left; }
.post-send-group-label { display: block; margin: 0 0 6px; font-weight: 700; color: #000; }
.post-send-select { width: 100%; font: 17px/1.3 Lato, "Lucida Grande", Tahoma, sans-serif; color: #000; background: #fff; border: 0; border-radius: 12px; padding: 12px 14px; }
.post-send-select:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* The recipient's questions on /i/<code> (docs/RECIPIENT-QUESTIONS.md):
   the sender's thank-you questions, full-screen above the info page. */
.rq[hidden] { display: none !important; }
.rq { padding-top: 24px; }
.rq .notif-step-content { margin: 24px auto 40px; padding: 0 16px; }
body .rq .post-send .step-options .wp-block-columns { flex-direction: column; align-items: center; }
.rq .post-send-sub { margin: -8px auto 20px; max-width: 520px; }
.rq .post-send-intro { color: #fff; }
.info-page .rq :focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* .info-page sets dark paragraphs and small headings; inside the questions
   they read as the wizard's: white text, the question itself in black. */
.info-page .rq p { color: #fff; }
.info-page .rq .post-send-text { color: #000; }
.info-page .rq h2.post-send-count { font-size: 25px; color: #fff; margin: 0 0 12px; }

/* M8 (2026-10-19 audit): on phones the Spanish labels did not fit. legacy.css
   caps the step buttons at 184px with 5.4px letter-spacing and nowrap, so
   "MANDAR CÓDIGO" (228px) rendered as "MANDAR CÓD"; the step 2 and step 5
   placeholders were cut the same way. Tighter spacing, a slightly smaller size
   and less side padding fit every Spanish label on one line at 320px; the
   text itself is unchanged, and wrapping is allowed as a last resort. */
@media (max-width: 479px) {
  html[lang="es"] .notif-step .step-options button,
  html[lang="es"] .notif-step .step-options a.w3-btn {
    font-size: 16px;
    letter-spacing: 1.5px;
    white-space: normal;
    padding-left: 6px;
    padding-right: 6px;
  }
  html[lang="es"] #step-recipients input[type=tel],
  html[lang="es"] #step-verify input[type=tel],
  html[lang="es"] #step-send input[type=text] {
    padding-left: 12px;
    padding-right: 12px;
  }
  html[lang="es"] #step-recipients input[type=tel]::placeholder,
  html[lang="es"] #step-verify input[type=tel]::placeholder,
  html[lang="es"] #step-send input[type=text]::placeholder {
    font-size: 13px;
  }
}