/*
  Brandstart - free website health check form (component)
  -------------------------------------------------------
  LOCAL DRAFT 2026-10-14. Not deployed. Pairs with /assets/health-check.js.

  2026-10-15: optional "do better" select (.bshc-field--goal) and a visible
  quote route (.bshc-alt). Wherever the grid has two columns the fields sit
  2 x 2: website | email, then question | button.

  Three variants, one markup pattern (see _health-check-snippet.html):
    .bshc--inline  dark card that sits inside the article column
    .bshc--end     light block for the end of an article (copy + checklist + form)
    .bshc--strip   compact dark strip; one row when wide, stacked in a sidebar

  Layout uses container queries, so a variant adapts to the box it is placed
  in (article column, full-width band or narrow sidebar), not the viewport.
  Browsers without container queries get the stacked mobile layout.

  Fonts come from the page (@font-face for Plus Jakarta Sans, Inter and
  Fraunces is already inline in every Brandstart page head).
*/
.bshc{
  --bshc-red:#C8102E;
  --bshc-red-2:#CD3B4C;
  --bshc-red-text:#A50D26;   /* 4.9:1 on white, the site's pink text token */
  --bshc-pink:#F8BDB4;       /* light pink accents on dark */
  --bshc-ink:#0A0A0A;
  --bshc-muted:#5F5757;
  --bshc-line:rgba(10,10,10,.14);
  --bshc-err:#A50D26;
  --bshc-radius:10px;
  container-type:inline-size;
  container-name:bshc;
  position:relative;
  font-family:'Inter',system-ui,sans-serif;
  line-height:1.55;
  border-radius:var(--bshc-radius);
  text-align:left;
}
.bshc *,.bshc *::before,.bshc *::after{box-sizing:border-box}
.bshc p,.bshc h2,.bshc h3,.bshc ul{margin:0;padding:0}

/* ---------- theme: dark (inline + strip) ---------- */
.bshc--dark{
  --bshc-fg:#fff;
  --bshc-fg-2:#E2D3CF;
  --bshc-fg-3:#C8B7B3;
  --bshc-field-bg:rgba(255,255,255,.07);
  --bshc-field-bd:rgba(255,255,255,.22);
  --bshc-field-bg-focus:rgba(255,255,255,.11);
  --bshc-err:#FFB3BD;
  --bshc-kicker:var(--bshc-pink);
  --bshc-focus:#fff;
  color:var(--bshc-fg);
  background-color:#0A0A0A;
  background-image:
    radial-gradient(520px 340px at 100% 0%,rgba(140,10,22,.85) 0%,rgba(140,10,22,0) 62%),
    radial-gradient(420px 300px at 0% 100%,rgba(200,16,46,.32) 0%,rgba(200,16,46,0) 60%);
}
/* ---------- theme: light (end-of-article block) ---------- */
.bshc--light{
  --bshc-fg:var(--bshc-ink);
  --bshc-fg-2:#2B2424;
  --bshc-fg-3:var(--bshc-muted);
  --bshc-field-bg:#fff;
  --bshc-field-bd:rgba(10,10,10,.28);
  --bshc-field-bg-focus:#fff;
  --bshc-kicker:var(--bshc-red-text);
  --bshc-focus:var(--bshc-ink);
  color:var(--bshc-fg);
  background:#fff;
  border:1px solid var(--bshc-line);
  border-top:3px solid var(--bshc-red);
  box-shadow:0 30px 60px -44px rgba(70,12,16,.45);
}

/* ---------- shared pieces ---------- */
.bshc .bshc-in{padding:clamp(22px,4cqi,38px)}
.bshc .bshc-kicker{display:inline-flex;align-items:center;gap:.6em;font:600 .72rem/1.2 'Inter',sans-serif;
  letter-spacing:.2em;text-transform:uppercase;color:var(--bshc-kicker)}
.bshc .bshc-kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--bshc-red);flex:none}
.bshc--dark .bshc-kicker::before{background:#E86F7F}
.bshc .bshc-title{max-width:none;margin-bottom:0;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;letter-spacing:-.02em;
  line-height:1.12;color:var(--bshc-fg);text-wrap:balance;margin-top:12px;
  font-size:clamp(1.35rem,1.1rem + 1.4cqi,1.85rem)}
.bshc .bshc-title em{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em}
.bshc .bshc-lede{max-width:none;margin-top:10px;color:var(--bshc-fg-2);font-size:1rem;line-height:1.6;text-wrap:pretty}

/* what the check covers */
.bshc .bshc-checks{list-style:none;padding:0;display:grid;gap:10px;margin-top:18px}
.bshc .bshc-checks li{max-width:none;margin:0;display:flex;gap:11px;align-items:flex-start;font-size:.97rem;line-height:1.5;color:var(--bshc-fg-2);text-wrap:pretty}
.bshc .bshc-checks li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;
  background:var(--bshc-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.2 2.2L9.5 3.7' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.bshc .bshc-checks b{color:var(--bshc-fg);font-weight:700}

/* form */
.bshc .bshc-form{margin-top:20px}
.bshc .bshc-grid{display:grid;grid-template-columns:1fr;gap:14px}
.bshc .bshc-field{min-width:0}
.bshc .bshc-label{display:block;font:600 .74rem/1.3 'Inter',sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bshc-fg-3);margin-bottom:7px}
.bshc .bshc-input{display:block;width:100%;min-height:52px;padding:12px 15px;
  font:400 16px/1.3 'Inter',system-ui,sans-serif; /* 16px stops iOS zooming on focus */
  color:var(--bshc-fg);background:var(--bshc-field-bg);border:1px solid var(--bshc-field-bd);border-radius:6px;
  transition:border-color .2s,background-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.bshc .bshc-input::placeholder{color:var(--bshc-fg-3);opacity:.85}
.bshc .bshc-input:hover{border-color:var(--bshc-fg-3)}
.bshc .bshc-input:focus{outline:none;border-color:var(--bshc-red);background:var(--bshc-field-bg-focus);
  box-shadow:0 0 0 3px rgba(200,16,46,.35)}
.bshc .bshc-input[aria-invalid="true"]{border-color:var(--bshc-err);box-shadow:0 0 0 1px var(--bshc-err)}
.bshc .bshc-input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(200,16,46,.45)}
.bshc .bshc-err{display:flex;gap:7px;align-items:flex-start;margin-top:7px;font-size:.88rem;line-height:1.4;color:var(--bshc-err);font-weight:600}
.bshc .bshc-err[hidden]{display:none}
.bshc .bshc-err::before{content:"!";flex:none;width:17px;height:17px;border-radius:50%;margin-top:1px;
  background:var(--bshc-err);color:#0A0A0A;font:800 .7rem/17px 'Inter',sans-serif;text-align:center}
.bshc--light .bshc-err::before{color:#fff}

.bshc .bshc-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;width:100%;min-height:52px;
  padding:14px 24px;border:0;border-radius:6px;cursor:pointer;
  font:700 1.02rem/1.2 'Plus Jakarta Sans',sans-serif;color:#fff;white-space:nowrap;
  background:linear-gradient(135deg,var(--bshc-red),var(--bshc-red-2));
  box-shadow:0 16px 36px -16px rgba(200,16,46,.75);transition:transform .2s,box-shadow .2s,filter .2s}
.bshc .bshc-btn:hover{transform:translateY(-1px);box-shadow:0 22px 44px -16px rgba(200,16,46,.85)}
.bshc .bshc-btn:focus-visible{outline:3px solid var(--bshc-focus);outline-offset:3px}
.bshc .bshc-btn[aria-busy="true"]{filter:saturate(.7) brightness(.92);cursor:progress}
.bshc .bshc-btn .bshc-arrow{transition:transform .2s}
.bshc .bshc-btn:hover .bshc-arrow{transform:translateX(3px)}
.bshc .bshc-btn-wrap{display:flex;flex-direction:column;justify-content:flex-end}

/* optional qualifying question (2026-10-15) */
/* 2026-10-15 predeploy-2: same small uppercase treatment as the other labels
   (inherits .bshc-label); only "(optional)" is lighter so it still reads as optional */
.bshc .bshc-label--q .bshc-opt{font-weight:400;letter-spacing:.06em}
.bshc .bshc-select{cursor:pointer;padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C8102E' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.bshc--dark .bshc-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F8BDB4' stroke-width='2' fill='none'/%3E%3C/svg%3E")}
.bshc .bshc-select option{color:#0A0A0A;background:#fff}

/* secondary route: straight to a quote */
.bshc .bshc-alt{max-width:none;margin-top:10px;font-size:.92rem;line-height:1.5;color:var(--bshc-fg-2)}
.bshc .bshc-alt a{border-bottom:0;color:var(--bshc-fg);font-weight:700;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(200,16,46,.7);white-space:nowrap}
.bshc .bshc-alt a:hover{text-decoration-color:currentColor}
.bshc .bshc-alt a:focus-visible{outline:2px solid var(--bshc-focus);outline-offset:2px;border-radius:2px}

.bshc .bshc-consent{max-width:none;margin-top:14px;font-size:.84rem;line-height:1.5;color:var(--bshc-fg-3);text-wrap:pretty}
.bshc .bshc-consent a{border-bottom:0;color:var(--bshc-fg);font-weight:600;text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:rgba(200,16,46,.7)}
.bshc .bshc-consent a:hover{text-decoration-color:currentColor}
.bshc .bshc-consent a:focus-visible,.bshc .bshc-done a:focus-visible,.bshc .bshc-alert a:focus-visible{outline:2px solid var(--bshc-focus);outline-offset:2px;border-radius:2px}

.bshc .bshc-alert{margin-top:14px;padding:12px 14px;border-radius:6px;font-size:.9rem;line-height:1.5;
  border:1px solid rgba(200,16,46,.55);border-left:3px solid var(--bshc-red);background:rgba(200,16,46,.12);color:var(--bshc-fg)}
.bshc .bshc-alert[hidden]{display:none}
.bshc .bshc-alert a{border-bottom:0;color:inherit;font-weight:700;text-decoration:underline}

/* honeypot: off-screen, out of the tab order, hidden from assistive tech */
.bshc .bshc-hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}

/* success */
.bshc.bshc-is-done.bshc--inline .bshc-lede{display:none}
.bshc .bshc-done{margin-top:20px}
.bshc--strip .bshc-done{margin-top:14px}
@container bshc (min-width:760px){.bshc--end .bshc-done{margin-top:0}}
@container bshc (min-width:980px){.bshc--strip .bshc-done{margin-top:0}}
.bshc .bshc-done{outline:none}
.bshc .bshc-done[hidden]{display:none}
.bshc .bshc-done-head{display:flex;align-items:center;gap:14px}
.bshc .bshc-tick{flex:none;width:46px;height:46px;border-radius:50%;background:var(--bshc-red);display:grid;place-items:center}
.bshc .bshc-done h3{margin:0;font:800 clamp(1.25rem,1.05rem + 1cqi,1.6rem)/1.15 'Plus Jakarta Sans',sans-serif;letter-spacing:-.02em;color:var(--bshc-fg);text-wrap:balance}
.bshc .bshc-done p{max-width:none;margin-top:12px;color:var(--bshc-fg-2);font-size:1rem;line-height:1.6;text-wrap:pretty}
.bshc .bshc-done strong{color:var(--bshc-fg);word-break:break-word}
.bshc .bshc-done .bshc-done-alt{font-size:.9rem;color:var(--bshc-fg-3)}
.bshc .bshc-done a{border-bottom:0;color:var(--bshc-fg);font-weight:600;text-decoration:underline;text-decoration-color:rgba(200,16,46,.7);text-underline-offset:2px}
.bshc .bshc-done:focus-visible{outline:2px solid var(--bshc-focus);outline-offset:6px;border-radius:4px}

.bshc .bshc-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- variant: inline in-article card ---------- */
.bshc--inline{margin-block:2.4em}
@container bshc (min-width:600px){
  .bshc--inline .bshc-grid{grid-template-columns:1fr 1fr;align-items:start}
  .bshc--inline .bshc-btn-wrap{align-self:end}
}

/* ---------- variant: end-of-article block ---------- */
.bshc--end{margin-block:2.6em 0}
.bshc--end .bshc-title{font-size:clamp(1.5rem,1.15rem + 2cqi,2.2rem)}
.bshc--end .bshc-cols{display:grid;grid-template-columns:1fr;gap:clamp(20px,4cqi,44px)}
@container bshc (min-width:560px){
  .bshc--end .bshc-checks{grid-template-columns:1fr 1fr;column-gap:24px}
}
@container bshc (min-width:760px){
  /* The card runs the full height of the row so its top and bottom edges line up
     with the copy column, and the form sits centred inside it. Top-aligning left a
     dead gap below the card wherever the checklist ran longer than the fields. */
  .bshc--end .bshc-cols{grid-template-columns:1.1fr .9fr}
  .bshc--end .bshc-checks{grid-template-columns:1fr}
  .bshc--end .bshc-formcol{padding:clamp(20px,2.4cqi,28px);border-radius:8px;background:#FBF7F6;border:1px solid var(--bshc-line);display:flex;flex-direction:column;justify-content:center}
  .bshc--end .bshc-form{margin-top:0}
  .bshc--end .bshc-done{padding-block:6px}
}

/* ---------- variant: compact strip / sidebar ---------- */
.bshc--strip .bshc-in{padding:clamp(18px,3cqi,24px) clamp(18px,3cqi,28px)}
.bshc--strip .bshc-title{font-size:1.18rem;margin-top:8px}
.bshc--strip .bshc-lede{font-size:.93rem;margin-top:6px}
.bshc--strip .bshc-form{margin-top:14px}
.bshc--strip .bshc-grid{gap:10px}
.bshc--strip .bshc-label{font-size:.68rem;margin-bottom:5px}
.bshc--strip .bshc-input,.bshc--strip .bshc-btn{min-height:48px}
.bshc--strip .bshc-consent{font-size:.8rem;margin-top:10px}
/* strip: --q inherits .bshc--strip .bshc-label sizing */
@container bshc (min-width:540px){
  .bshc--strip .bshc-grid{grid-template-columns:1fr 1fr;align-items:start}
  .bshc--strip .bshc-btn-wrap{align-self:end}
}
@container bshc (min-width:980px){
  .bshc--strip .bshc-row{display:grid;grid-template-columns:minmax(220px,.8fr) 2fr;gap:32px;align-items:center}
  .bshc--strip .bshc-form{margin-top:0}
}

/* page furniture that could cover the form on a phone (see health-check.js) */
body.bshc-focus .sticky-cta,body.bshc-focus .bs-quote,body.bshc-focus .bswa,body.bshc-focus .sticky-bar{
  opacity:0!important;pointer-events:none!important;visibility:hidden!important}

@media (prefers-reduced-motion:reduce){
  .bshc *{transition:none!important}
  .bshc .bshc-btn:hover{transform:none}
}
@media (forced-colors:active){
  .bshc .bshc-input{border:1px solid CanvasText}
  .bshc .bshc-btn{border:2px solid ButtonText}
  .bshc .bshc-checks li::before,.bshc .bshc-kicker::before{forced-color-adjust:none}
}