/* components.css
 * The whole component vocabulary. Nothing else exists.
 *
 *   .btn        primary, ghost and large call to action
 *   .eyebrow    small gold uppercase kicker above a heading
 *   .checklist  green tick list
 *   .card       surface panel used inside .grid-3
 *   .quote      testimonial block, real testimonials only
 *   details / summary  the FAQ accordion, works with JS disabled
 *   .trust-bar  slim strip of short reassurance items
 *   .bio        small round portrait beside a short credibility paragraph
 *   .media      a framed photograph, never cropped through a face
 *
 * Plus the lead form and the video frame, which every page reuses through
 * partials/form.njk and partials/video.njk.
 */

/* ---------- .btn ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  min-height: 48px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--accent);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  transition: background var(--speed) var(--ease), transform var(--speed) var(--ease),
    box-shadow var(--speed) var(--ease);
}

.btn:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: var(--accent-ink);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: translateY(0);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn--ghost {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: none;
}

.btn--ghost:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

.btn--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: #26210f;
}

.btn--gold:hover {
  background: #b28f3d;
  border-color: #b28f3d;
  color: #26210f;
}

.btn--lg {
  padding: 1.05rem 2.2rem;
  font-size: var(--step-1);
  min-height: 56px;
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
}

.btn-note {
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.section--accent .btn,
.section--dark .btn {
  background: #fff;
  border-color: #fff;
  color: var(--accent-dark);
}

.section--accent .btn:hover,
.section--dark .btn:hover {
  background: var(--surface-alt);
  border-color: var(--surface-alt);
  color: var(--accent-dark);
}

.section--accent .btn-note,
.section--dark .btn-note {
  color: rgba(255, 255, 255, 0.8);
}

/* ---------- .eyebrow ---------- */

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-2xs);
}

.eyebrow--green {
  color: var(--accent);
}

.section--accent .eyebrow,
.section--dark .eyebrow {
  color: var(--gold);
}

/* ---------- .checklist ---------- */

/* margin-inline, not margin. A blanket "margin: 0" here has the same
   specificity as ".stack > * + *" and wins on source order, so a checklist
   dropped into a .stack silently loses its vertical rhythm and collides with
   the paragraph above it. */
.checklist {
  list-style: none;
  margin-inline: 0;
  padding: 0;
  display: grid;
  gap: var(--space-xs);
  max-width: var(--measure);
}

.checklist li {
  position: relative;
  padding-left: 2rem;
  line-height: 1.6;
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 1.1rem;
  height: 0.6rem;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.checklist--gold li::before {
  border-color: var(--gold);
}

.section--accent .checklist li::before,
.section--dark .checklist li::before {
  border-color: var(--gold);
}

/* A plain dot list, for the rare place a tick would overclaim. */
.dotlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2xs);
}

.dotlist li {
  position: relative;
  padding-left: 1.25rem;
}

.dotlist li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.75em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-muted);
}

/* ---------- .card ---------- */

.card {
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--shadow-sm);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.card h3,
.card h4 {
  margin: 0;
}

.card p {
  color: var(--ink-muted);
  margin: 0;
}

.card--warm {
  background: var(--surface-alt);
  border-color: transparent;
}

.card--accent {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
}

.card--accent h3,
.card--accent h4 {
  color: var(--accent-ink);
}

.card--accent p {
  color: rgba(255, 255, 255, 0.86);
}

.card--flat {
  box-shadow: none;
}

.card__num {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--gold);
  line-height: 1;
}

.card__foot {
  margin-top: auto;
  padding-top: var(--space-s);
  font-size: var(--step--1);
  color: var(--ink-muted);
}

/* ---------- .quote ---------- */
/* Real testimonials only. Never invent a quote, a name or a result. */

.quote {
  background: var(--surface);
  border: var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 2rem);
  margin: 0;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  height: 100%;
}

.quote p {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: none;
}

.quote figcaption,
.quote__by {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  margin-top: auto;
}

/* Star row above a real review. Decorative only, the row carries an aria-label
   so a screen reader hears the rating once instead of five glyphs. */
.quote__stars {
  color: var(--gold);
  font-size: var(--step-0);
  letter-spacing: 0.12em;
  line-height: 1;
}

.quote--plain {
  background: transparent;
  border: 0;
  border-left: 3px solid var(--gold);
  box-shadow: none;
  border-radius: 0;
  padding-block: 0.25rem;
}

/* ---------- FAQ, details and summary ---------- */
/* Native disclosure. No JavaScript, works with JS disabled, keyboard friendly. */

.faq {
  display: grid;
  gap: var(--space-xs);
  max-width: 800px;
}

.faq details {
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-s);
  padding: 1.1rem clamp(1rem, 3vw, 1.5rem);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.65rem;
  height: 0.65rem;
  margin-top: 0.4em;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform var(--speed) var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(-135deg);
}

.faq details[open] summary {
  color: var(--accent-dark);
}

.faq summary:hover {
  background: var(--surface-alt);
}

.faq__body {
  padding: 0 clamp(1rem, 3vw, 1.5rem) 1.25rem;
  color: var(--ink-muted);
}

.faq__body > * + * {
  margin-top: var(--space-xs);
}

.faq__body p {
  max-width: none;
}

/* ---------- .trust-bar ---------- */

/* Selector is ul.trust-bar, not .trust-bar, on purpose. The primitives reset
   uses ul[class] to strip list padding, and ul[class] out-specifies a bare
   class, so a plain .trust-bar rule loses its padding-block and the rules sit
   on top of the text. Margin is inline only, so .stack keeps control of the
   vertical rhythm above the bar. */
ul.trust-bar,
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs) var(--space-l);
  padding-inline: 0;
  padding-block: var(--space-s);
  border-top: var(--border);
  border-bottom: var(--border);
  list-style: none;
  margin-inline: 0;
}

.trust-bar li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  text-transform: none;
}

.trust-bar li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex: 0 0 auto;
}

.section--accent .trust-bar,
.section--dark .trust-bar {
  border-color: rgba(255, 255, 255, 0.22);
}

.section--accent .trust-bar li,
.section--dark .trust-bar li {
  color: rgba(255, 255, 255, 0.88);
}

/* ---------- lead form, partials/form.njk ---------- */

.lead-form {
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--shadow-md);
  display: grid;
  gap: var(--space-s);
  max-width: 520px;
}

.lead-form--wide {
  max-width: none;
}

.lead-form__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  margin: 0;
}

.lead-form__note {
  font-size: var(--step--1);
  color: var(--ink-muted);
  margin: 0;
  max-width: none;
}

.lead-form__note a {
  color: var(--accent);
}

/* Shown only when lead.php bounced an incomplete submission back with ?error=1.
   The [hidden] rule is repeated here because `display: grid` on .lead-form
   would otherwise beat the browser default styling for the hidden attribute and
   the banner would show on every page load. */
.lead-form__error {
  margin: 0;
  padding: var(--space-xs) var(--space-s);
  border-left: 3px solid #a03530;
  border-radius: 6px;
  background: #fbeceb;
  color: #7a2723;
  font-size: var(--step--1);
}

.lead-form__error[hidden] {
  display: none;
}

/* The form is a white card even when it sits on a dark or green band. Without
   this the section rule paints the title white on white and it vanishes. */
.section--dark .lead-form__title,
.section--accent .lead-form__title {
  color: var(--ink);
}

.section--dark .lead-form__note,
.section--accent .lead-form__note {
  color: var(--ink-muted);
}

.section--dark .lead-form__note a,
.section--accent .lead-form__note a {
  color: var(--accent);
}

/* .section--dark .btn and .section--accent .btn invert the button to white so
   it reads on a coloured band. The submit button is NOT on the band, it is on
   the white form card, so the inversion would paint it white on white. Put the
   normal green button back. Without this the primary conversion control on
   /healthcare-burnout/ is invisible. */
.section--dark .lead-form .btn,
.section--accent .lead-form .btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.section--dark .lead-form .btn:hover,
.section--accent .lead-form .btn:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: var(--accent-ink);
}

.field {
  display: grid;
  gap: 0.35rem;
}

.field label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
}

.field input {
  width: 100%;
  padding: 0.85rem 1rem;
  min-height: 48px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.field input::placeholder {
  color: #9aa79f;
}

.field input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: var(--focus-ring);
}

.field input:user-invalid {
  border-color: #a5462f;
}

/* Honeypot. Hidden from humans and from screen readers, visible to bots. */
.hp-field {
  position: absolute;
  left: -5000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ---------- video frame, partials/video.njk ---------- */

.video {
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--accent-dark);
  box-shadow: var(--shadow-lg);
}

.video wistia-player {
  display: block;
  width: 100%;
}

.video__caption {
  margin-top: var(--space-2xs);
  text-align: center;
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.section--accent .video__caption,
.section--dark .video__caption {
  color: rgba(255, 255, 255, 0.78);
}

/* ---------- site footer ---------- */

.site-footer {
  background: var(--accent-dark);
  color: rgba(255, 255, 255, 0.82);
  padding-block: var(--space-xl);
  font-size: var(--step--1);
}

.site-footer a {
  color: #fff;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.site-footer__brand {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: #fff;
}

.site-footer__meta {
  color: rgba(255, 255, 255, 0.72);
  max-width: 60ch;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__disclaimer {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: var(--space-s);
  color: rgba(255, 255, 255, 0.74);
  max-width: 70ch;
}

.site-footer__legal {
  color: rgba(255, 255, 255, 0.6);
}

/* ---------- .bio ---------- */
/* A small round portrait beside a short credibility paragraph. One per page.
 *
 *   <div class="bio">
 *     <img class="bio__photo" src="..." alt="..." width="968" height="968" />
 *     <div class="bio__body stack stack--s"> ... </div>
 *   </div>
 *
 * The photo box is square and the source is square, so object-fit never has
 * anything to crop. If a future portrait is not square, fix the file, not this.
 */

.bio {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-m);
  background: var(--surface-alt);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 2rem);
}

.bio__photo {
  flex: 0 0 auto;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow-sm);
}

.bio__body {
  flex: 1 1 20rem;
  min-width: 0;
}

.bio__body p {
  max-width: none;
}

/* ---------- .media ---------- */
/* A framed photograph. Used inside .split so a section photo matches the
 * rounding, shadow and background of .card and .video instead of sitting on
 * the page as a raw rectangle. Always give the <img> real alt text.
 *
 *   <figure class="media">
 *     <img src="..." alt="..." width="1014" height="676" loading="lazy" />
 *   </figure>
 */

.media {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-alt);
  box-shadow: var(--shadow-md);
}

.media img {
  display: block;
  width: 100%;
  height: auto;
}

.media figcaption {
  padding: var(--space-xs) var(--space-s);
  background: var(--surface);
  font-size: var(--step--1);
  color: var(--ink-muted);
}

/* ---------- skip link ---------- */

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 0.75rem 1rem;
  background: var(--accent);
  color: #fff;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
  top: 0;
}