/*
 * PHABSA Lead Modal and the forms placed on pages, by the brandbook (PHABSA_BRANDBOOK pp. 23-33, 40): one flat white card
 * (radius 16, Breeze Blue hairline on light pages, no shadow, no card inside a card), groups split by Breeze Blue soft
 * dividers, Oswald Regular uppercase title in Academy Teal with a Fresh Lime accent word (p.32), Manrope: 16px body in
 * the fields, the 14px caption for labels, hints, badges and the legal consent texts (p.30, nothing smaller), Deep Teal
 * text and Academy Teal links on white, the site's primary CTA (Fresh Lime, Deep Teal caps label, radius 10, arrow) and
 * solid Academy Teal focus rings.
 * Everything is scoped to .phabsa-lead (the dialog lives outside #new-style, which resets styles).
 * Theme rules are strong (Astra input[type=...]:focus and input[type=checkbox]:checked selectors), hence two-class
 * selectors and a few !important overrides.
 */
html.phabsa-lead-open {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.phabsa-lead {
  --pl-teal: #128291;      /* Academy Teal: title, field and checkbox borders, focus */
  --pl-teal-dark: #14323c; /* Deep Teal: hover and pressed states */
  --pl-accent: #c0d94e;    /* Fresh Lime accent word in the title (p.32; the client accepted its contrast on light) */
  --pl-cta: #c0d94e;       /* Fresh Lime: the primary button (p.24, UI call-to-action) */
  --pl-focus: #128291;
  --pl-navy: #14323c;      /* Deep Teal: close button */
  --pl-text: #14323c;
  --pl-muted: #14323c;
  --pl-line: #a1dee5;      /* Breeze Blue: card and consent-row borders */
  --pl-field: #128291;     /* input borders: 4.5:1 on white, above the 3:1 needed for a field boundary */
  --pl-error: #b42318;
  --pl-bg: #ffffff;        /* the card */
  --pl-mist: #eff9f9;      /* Aqua Mist: badges */
  box-sizing: border-box;
  width: min(640px, calc(100vw - 24px));
  max-width: 100%;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: none;
  border-radius: 16px;
  background: var(--pl-bg);
  color: var(--pl-text);
  box-shadow: 0 30px 80px rgba(20, 50, 60, 0.28);
  font: 400 16px/1.4 "Manrope", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* body leading 130-140% (p.31) */
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #a1dee5 transparent;
}
.phabsa-lead *,
.phabsa-lead *::before,
.phabsa-lead *::after {
  box-sizing: border-box;
}
.phabsa-lead::backdrop {
  background: rgba(20, 50, 60, 0.6);
  backdrop-filter: blur(2px);
}
.phabsa-lead[open] {
  animation: phabsa-lead-in 0.2s ease-out;
}
@keyframes phabsa-lead-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .phabsa-lead[open] { animation: none; }
}

/* Neutralize theme typography (Manrope tracking 0, p.31). */
.phabsa-lead h2,
.phabsa-lead button,
.phabsa-lead label,
.phabsa-lead legend,
.phabsa-lead p,
.phabsa-lead span {
  text-transform: none;
  letter-spacing: 0;
}
.phabsa-lead button { box-shadow: none; text-shadow: none; }

.phabsa-lead__panel {
  position: relative;
  padding: 36px 36px 28px;
}

/* ---- Header -------------------------------------------------------------------------------------- */
.phabsa-lead .phabsa-lead__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--pl-line);
  border-radius: 9999px;
  background: #fff;
  color: var(--pl-navy);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.phabsa-lead .phabsa-lead__close:hover,
.phabsa-lead .phabsa-lead__close:focus {
  background: var(--pl-navy);
  color: #fff;
}

.phabsa-lead__head {
  margin: 0 0 22px;
  padding-right: 44px;
}
.phabsa-lead .phabsa-lead__eyebrow {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 12px;
  padding: 4px 12px;
  border-radius: 9999px;
  background: var(--pl-mist);
  color: var(--pl-teal-dark); /* Deep Teal on Aqua Mist, 12.6:1 */
  font-weight: 500;           /* caption for small badges: Manrope Medium 14 (p.30) */
  font-size: 14px;
  line-height: 20px;
}
/* H2 on white: Oswald Regular caps in Academy Teal, Fresh Lime accent word, tracking -1%, leading 105% (pp.30-32). */
.phabsa-lead .phabsa-lead__title {
  margin: 0 0 10px;
  color: var(--pl-teal);
  font: 400 36px/1.05 "Oswald", "Arial Narrow", sans-serif;
  letter-spacing: -0.01em;
  text-transform: uppercase !important; /* outranks the h2 reset above and any theme h2 rule */
}
.phabsa-lead__title:focus { outline: none; }
.phabsa-lead .phabsa-lead__accent {
  color: var(--pl-accent);
  text-transform: inherit; /* the span reset above would keep the accent word in lower case */
  letter-spacing: inherit;
}
.phabsa-lead .phabsa-lead__intro {
  margin: 0;
  color: var(--pl-text);
  font-size: 16px;
  line-height: 1.4;
}

/* ---- Fields ------------------------------------------------------------------------------------- */
/* The fields sit directly in the card: no card inside the card and no shadow (flat cards, p.33). */
.phabsa-lead__card {
  padding: 0;
  border: none;
  background: none;
}
.phabsa-lead__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
.phabsa-lead__field { margin: 0 0 16px; }
.phabsa-lead .phabsa-lead__label {
  display: block;
  margin: 0 0 6px;
  color: var(--pl-navy);
  font-weight: 600; /* caption size, SemiBold for a field label (p.30) */
  font-size: 14px;
  line-height: 1.3;
}
.phabsa-lead .phabsa-lead__input {
  display: block;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--pl-field);
  border-radius: 10px; /* the CTA radius */
  background: #fff;
  color: #14323c;
  font: 400 16px/1.4 "Manrope", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.phabsa-lead .phabsa-lead__input::placeholder { color: rgba(20, 50, 60, 0.7); } /* 5.2:1 on white */
.phabsa-lead .phabsa-lead__input:hover { border-color: var(--pl-teal-dark); }
/* Solid brand focus ring. Astra's input[type=...]:focus (0,2,1) would make the border dotted and the text #111. */
.phabsa-lead .phabsa-lead__input:focus {
  border: 1px solid var(--pl-teal);
  color: var(--pl-text);
  box-shadow: none;
  outline: 2px solid var(--pl-focus);
  outline-offset: 2px;
}
.phabsa-lead .phabsa-lead__select {
  padding-right: 42px;
  appearance: none;
  -webkit-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23128291' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center;
  cursor: pointer;
}
/* The program list in brand colours where the browser lets a page style it (customizable select: Chrome and Edge 135+):
   a white list with the Breeze Blue hairline, Deep Teal options, Aqua Mist under the pointer, the chosen one on Breeze
   Blue with an Academy Teal tick, Academy Teal group names. Other browsers keep their own list; the closed field and
   the value the GHL tracker reads stay the same. */
@supports (appearance: base-select) {
  .phabsa-lead select.phabsa-lead__select,
  .phabsa-lead select.phabsa-lead__select::picker(select) {
    appearance: base-select;
  }
  /* The closed field grows with a long program name (it wraps here, unlike the native select) instead of letting
     it run out of a fixed 48px box; the chevron stays clear (padding-right above). */
  .phabsa-lead select.phabsa-lead__select {
    display: flex;
    align-items: center;
    height: auto;
    min-height: 48px;
    padding-top: 11px;
    padding-bottom: 11px;
    line-height: 1.4;
  }
  .phabsa-lead select.phabsa-lead__select::picker-icon { display: none; } /* the chevron is the background above */
  .phabsa-lead select.phabsa-lead__select::picker(select) {
    max-height: min(420px, 70vh);
    margin-top: 4px;
    padding: 6px 0;
    border: 1px solid var(--pl-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 24px rgba(20, 50, 60, 0.12); /* a floating list, like the dialog */
    overflow-y: auto;
  }
  .phabsa-lead select.phabsa-lead__select optgroup {
    padding: 8px 0 2px;
    color: var(--pl-teal);
    font-weight: 700;
    font-size: 14px;
  }
  .phabsa-lead select.phabsa-lead__select option {
    padding: 8px 14px;
    color: var(--pl-text);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
  }
  .phabsa-lead select.phabsa-lead__select option:hover,
  .phabsa-lead select.phabsa-lead__select option:focus-visible {
    background: var(--pl-mist);
    outline: none;
  }
  .phabsa-lead select.phabsa-lead__select option:checked { background: var(--pl-line); }
  .phabsa-lead select.phabsa-lead__select option::checkmark { color: var(--pl-teal); }
}
.phabsa-lead .phabsa-lead__input:-webkit-autofill {
  box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: #14323c;
}
/* Error: a 2px red border drawn inside, so the focus ring outside stays clear. */
.phabsa-lead .phabsa-lead__input[aria-invalid="true"] {
  border-color: var(--pl-error);
  box-shadow: inset 0 0 0 1px var(--pl-error);
}
/* Captions: Manrope Regular 14, leading 140% (p.30-31). */
.phabsa-lead .phabsa-lead__hint {
  margin: 0 0 8px;
  color: var(--pl-muted);
  font-size: 14px;
  line-height: 1.4;
}
.phabsa-lead .phabsa-lead__hint--below { margin: 6px 0 0; }
.phabsa-lead .phabsa-lead__note {
  margin: 2px 0 0;
  color: var(--pl-muted);
  font-size: 14px;
  line-height: 1.4;
}

/* ---- Consents ------------------------------------------------------------------------------------ */
/* Each group starts under a Breeze Blue soft divider (p.23); the consent rows are plain lines, not boxes. */
.phabsa-lead .phabsa-lead__consents {
  min-width: 0;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border: none;
  border-top: 1px solid var(--pl-line);
}
/* A floated legend leaves the fieldset's top border whole: the divider runs above the group title, not through it. */
.phabsa-lead .phabsa-lead__legend {
  display: flex;
  float: left;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 10px;
  padding: 0;
  color: var(--pl-navy);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
}
.phabsa-lead .phabsa-lead__legend + * { clear: both; }
.phabsa-lead .phabsa-lead__marker {
  padding: 2px 10px;
  border-radius: 9999px;
  background: #a1dee5;
  color: var(--pl-teal-dark);
  font-weight: 500; /* small badge: Manrope Medium 14 (p.30) */
  font-size: 14px;
  line-height: 20px;
}
.phabsa-lead .phabsa-lead__marker--optional { background: var(--pl-mist); color: var(--pl-muted); }
.phabsa-lead .phabsa-lead__consents .phabsa-lead__hint { margin: -4px 0 10px; }
.phabsa-lead__check {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  margin: 0 0 10px;
  padding: 0;
}
.phabsa-lead__check:last-child { margin-bottom: 0; }
/* Brand checkbox drawn in CSS (the native box has a grey border); a white tick on Academy Teal when checked. */
.phabsa-lead .phabsa-lead__check input {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--pl-field);
  border-radius: 6px;
  background: #fff no-repeat center / 14px 14px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.phabsa-lead .phabsa-lead__check input:hover { border-color: var(--pl-teal-dark); }
/* Two classes + :checked: Astra's input[type="checkbox"]:checked (0,2,1) paints its own colours. */
.phabsa-lead .phabsa-lead__check input:checked {
  border-color: var(--pl-teal);
  background-color: var(--pl-teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.4l3 3 6-6.3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.phabsa-lead .phabsa-lead__check input[aria-invalid="true"] {
  border-color: var(--pl-error);
  box-shadow: inset 0 0 0 1px var(--pl-error);
}
/* Forced colours drop the fill and keep only a white tick: fall back to the native control there. */
@media (forced-colors: active) {
  .phabsa-lead .phabsa-lead__check input {
    -webkit-appearance: auto;
    appearance: auto;
  }
}
/* Consent texts are legal notices: caption Manrope Regular 14, leading 135% (pp.30-31; not smaller: the SMS consents
   must stay clear and conspicuous). */
.phabsa-lead__check-text {
  min-width: 0;
  color: var(--pl-text);
  font-size: 14px;
  line-height: 1.35;
}
.phabsa-lead .phabsa-lead__check label {
  display: inline;
  color: var(--pl-text);
  font-size: 14px;
  line-height: 1.35;
  cursor: pointer;
}
/* "Show details": a text button after the consent text (outside the label, see modal.php).
   States are set explicitly: theme/Elementor `button:hover` rules would otherwise paint it as a filled button. */
.phabsa-lead .phabsa-lead__toggle,
.phabsa-lead .phabsa-lead__toggle:hover,
.phabsa-lead .phabsa-lead__toggle:focus,
.phabsa-lead .phabsa-lead__toggle:active {
  display: inline;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--pl-teal-dark); /* 13.5:1 on the white card */
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.phabsa-lead .phabsa-lead__toggle:hover { color: var(--pl-navy); }
.phabsa-lead [hidden] { display: none !important; }
/* Collapsed layout: two visible lines; the button sits at the end of the second line over a fade of the text. */
.phabsa-lead__clampbox {
  position: relative;
  --pl-fade: var(--pl-bg);
}
.phabsa-lead .phabsa-lead__clampbox.is-collapsed .phabsa-lead__clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.phabsa-lead .phabsa-lead__clampbox.is-collapsed .phabsa-lead__toggle {
  position: absolute;
  right: 0;
  bottom: 0;
  padding-left: 2.5em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--pl-fade) 2em);
}
.phabsa-lead .phabsa-lead__notice {
  margin: 16px 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--pl-line);
  color: var(--pl-muted);
  font-size: 14px;
  line-height: 1.35;
}

/* ---- Errors ------------------------------------------------------------------------------------- */
/* Error messages: caption size, Medium weight (p.30). */
.phabsa-lead .phabsa-lead__error {
  margin: 6px 0 0;
  color: var(--pl-error);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
}
.phabsa-lead .phabsa-lead__summary {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fdecea;
  color: var(--pl-error);
  font-weight: 500;
  font-size: 14px;
}

/* ---- Buttons: the site's primary CTA (Fresh Lime, Deep Teal caps label, radius 10, label + arrow) ----- */
.phabsa-lead .phabsa-lead__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 14px 24px;
  border: none;
  border-radius: 10px;
  background: var(--pl-cta);
  color: var(--pl-teal-dark); /* 8.6:1 on Fresh Lime */
  font: 700 16px/1.2 "Manrope", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
  text-align: center;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.phabsa-lead .phabsa-lead__submit::after {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M12 1L19 8M19 8L12 15M19 8H1' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M12 1L19 8M19 8L12 15M19 8H1' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Hover on a light surface: Deep Teal with a white label and a Fresh Lime arrow. */
.phabsa-lead .phabsa-lead__submit:hover { background: var(--pl-teal-dark); color: #fff; }
.phabsa-lead .phabsa-lead__submit:hover::after { background-color: var(--pl-cta); }
.phabsa-lead .phabsa-lead__submit:disabled { opacity: 0.75; cursor: progress; }
.phabsa-lead .phabsa-lead__submit:disabled::after { display: none; }
.phabsa-lead .phabsa-lead__done-close {
  justify-content: center;
  width: auto;
  min-width: 200px;
  margin: 8px auto 0;
}
.phabsa-lead .phabsa-lead__done-close::after { display: none; }

.phabsa-lead .phabsa-lead__links {
  margin: 14px 0 0;
  text-align: center;
  color: var(--pl-muted);
  font-size: 14px;
}
/* Links in Academy Teal (4.5:1 on white), always underlined: next to Deep Teal text the colour alone is too close
   (2.98:1). a[href] outranks Elementor's `.elementor a { text-decoration: none }` around the forms placed on pages. */
.phabsa-lead a[href] {
  color: var(--pl-teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.phabsa-lead a[href]:hover { color: var(--pl-navy); text-decoration: underline; }

/* ---- Thank-you / unavailable ------------------------------------------------------------------- */
.phabsa-lead__view--center {
  padding: 12px 8px 4px;
  text-align: center;
}
/* Keep centred titles clear of the close button (the unavailable view has no icon above its title). */
.phabsa-lead .phabsa-lead__view--center .phabsa-lead__title { padding: 0 40px; }
.phabsa-lead__icon {
  width: 72px;
  height: 72px;
  margin: 10px auto 22px;
  border-radius: 9999px;
  background: var(--pl-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  box-shadow: 0 0 0 10px #a1dee5;
}
.phabsa-lead .phabsa-lead__done-text {
  max-width: 440px;
  margin: 0 auto 12px;
  color: var(--pl-text);
  font-size: 16px;
}
.phabsa-lead .phabsa-lead__done-phone {
  margin: 0 0 20px;
  color: var(--pl-muted);
  font-size: 14px;
}

/* ---- Focus & a11y helpers ----------------------------------------------------------------------- */
/* Solid Academy Teal ring (4.2:1 on Aqua Mist, 4.5:1 on white); replaces Astra's thin dotted outlines. */
.phabsa-lead :focus-visible {
  outline: 2px solid var(--pl-focus);
  outline-offset: 2px;
}
.phabsa-lead .phabsa-lead__submit:focus-visible { outline-offset: 3px; }

/* Honeypot: off-screen, not display:none (some bots skip hidden fields). */
.phabsa-lead__hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.phabsa-lead__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- A form placed on a page ([phabsa_lead_form]) ------------------------------------------------- */
/* The modal's card in the flow of the page: no dialog scrolling or shadow (flat cards, p.33), no close button, the
   Breeze Blue hairline of the white cards on light pages; at most 860px wide and centred in wide columns (two fields
   per row stay readable). */
.phabsa-lead.phabsa-lead--page {
  display: flex;
  flex-direction: column;
  width: auto;
  max-width: 860px;
  max-height: none;
  margin: 0 auto;
  border: 1px solid var(--pl-line);
  overflow: visible;
  box-shadow: none;
  text-align: left;
}
/* surface="dark": on a dark or sphere background only white sits next to it (p.35), so no hairline. */
.phabsa-lead.phabsa-lead--on-dark { border-color: transparent; }
/* After a submit the form keeps its height (lead-modal.js): the thank-you view sits in the middle of it. */
.phabsa-lead--page .phabsa-lead__panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
}
.phabsa-lead--page .phabsa-lead__view--center .phabsa-lead__title { padding: 0; }
/* panel="none": the form inside a white card of the page (contact page) - no panel of its own; the faded ends of the
   collapsed texts blend into that white. */
.phabsa-lead.phabsa-lead--bare {
  --pl-bg: #ffffff;
  border: none;
  border-radius: 0;
  background: transparent;
}
.phabsa-lead--bare > .phabsa-lead__panel { padding: 0; }

/* ---- Small screens ------------------------------------------------------------------------------ */
@media (max-width: 599.98px) {
  .phabsa-lead__panel { padding: 24px 16px 20px; }
  .phabsa-lead .phabsa-lead__title { font-size: 28px; }
  .phabsa-lead__row { grid-template-columns: 1fr; }
}