/*
 * blocks-b.css -- the CSS of the Stage B elements and blocks. HAND-MAINTAINED (docs/HAND-MAINTAINED.md): no generator writes it. Readable, not minified.
 * Loaded after site.css (home.css on the front page) on the public page AND in the editor canvas (functions.php). site.css and home.css are fixed output;
 * every new rule goes here. Tokens only: the colours, corners and spacing steps of site.css :root and theme.json (--plan-blue, --tint, --paper, --s1 .. --s2,
 * --focus, --m-hover ...). The few sizes the Standard fixes (Part 19: 44px, 36px, 20px, 15px, 13px, the 3px ring) are named ONCE in the :root block below.
 * The markup each element takes and the limits of the block that places it: docs/EDITOR-CONTRACT.md section 14 (the masthead's row: section 15). That is the one copy; do not repeat it here.
 */

:root{
  /* colour */
  --yellow-hover:#f2ca00;      /* the yellow button's hover fill: Part 16 state table "background darkens", the kit's #f2ca00; ink on it is 9.15:1 */
  /* type and size */
  --font-poppins:'Poppins','Poppins Fallback',Arial,sans-serif;
  --r-pill:999px;              /* "--ggf-radius-control": buttons and chips */
  --btn-h-lg:52px;             /* Part 19: the 52px button (site.css gives .btn its 52px as a fixed height; the masthead's row uses it as a minimum) */
  --btn-h-sm:44px;             /* Part 19: the 44px button, the text link's target and the selector chip's tap height */
  --btn-px-sm:20px;
  --btn-fs-sm:15px;
  --btn-bw:2px;
  --chip-h:36px;               /* Part 19: the chip */
  --chip-px:var(--s2);         /* 14px */
  --chip-fs:13px;
  --chip-ls:.04em;
  --chip-bw:1px;               /* transparent: shows in Windows high contrast */
  --count-h:24px;              /* the selector chip's count */
  --ring-w:3px;                /* the site's focus ring: 3px, offset 3px, colour --focus (navy on light, yellow on dark) */
  --ring-gap:3px;
  /* The ground, read by btn-outline and by the text link. Light is the default. */
  --gnd-line:var(--plan-blue);
  --gnd-ink:var(--plan-blue);
  --gnd-wash:var(--tint);
  --gnd-wash-ink:var(--tint-ink);
  --gnd-mark:currentColor;     /* the line drawn in under a text link on hover: its own ink, 1px, on a light ground */
  --gnd-mark-w:1px;
}

/* Dark and Plan Blue grounds: the same list as the yellow focus ring in site.css, plus the Statement band (its class is statement-block), the hero, the
   picture-with-words band, and `is-dark` for whatever comes.
   A box that STORES a colour (data-ground, 00-grounds.css) is not in this list: :is() takes the specificity of its most specific member (`.band-alt .lay-overlap .lo-card`, 0,3,0), which would beat
   the stored ground's own tokens (0,1,0) and leave a lead card set to White with a yellow ring and white lines. :where() adds no specificity, so the list keeps its weight for every box
   that stores nothing, and a box that stores a colour takes that colour's tokens, light or dark. */
:is(.mast,.mast-sheet,.mast-menu,header.plan,footer.plan,.statement,.statement-block,.people.is-dark,.ribbon,.dd-lead,.pg-masthead--deep,.pg-masthead--blue,.hero,.give,.lay-on,.is-dark,
    .band-alt .lay-overlap .lo-card,.alt .lay-overlap .lo-card):not(:where([data-ground])){
  --gnd-line:var(--paper);
  --gnd-ink:var(--paper);
  --gnd-wash:var(--paper);             /* hover fills white: a pale wash on Plan Blue would take white text under 4.5:1 */
  --gnd-wash-ink:var(--plan-blue-dk);
  --gnd-ring:var(--yellow);            /* the focus ring is yellow on a dark ground (site.css lists some of these grounds for --focus, and not the Statement's) */
  --gnd-mark:var(--yellow);            /* a text link's drawn line is yellow, 2px, under WHITE words: yellow is never a text colour (3.44:1 on Plan Blue) */
  --gnd-mark-w:2px;
}
/* Tint grounds: the only ink on tint is #005AA6 (Plan Blue itself is 4.1:1 on tint). Every surface the site paints with --tint is listed: the closing card, the tint card of a grid (.dd-tint),
   the note callout and the news pull quote; a new tint surface carries `is-tint`. (A box that stores a colour is left to that colour, as above: this list is 0,2,0 through `.callout.is-note`.) */
:is(.cta-card,.is-tint,.dd-tint,.callout.is-note,.news-pull):not(:where([data-ground])){
  --gnd-line:var(--tint-ink);
  --gnd-ink:var(--tint-ink);
  --gnd-wash:var(--paper);
  --gnd-wash-ink:var(--tint-ink);
  --gnd-mark:currentColor;
  --gnd-mark-w:1px;
}
/* The masthead's own grounds: the tinted band (the default, and the short band) is a tint ground; the white one keeps the light default; deep and Plan Blue are in the dark list above. */
.pg-masthead:not(.pg-masthead--white,.pg-masthead--deep,.pg-masthead--blue){
  --gnd-line:var(--tint-ink);
  --gnd-ink:var(--tint-ink);
  --gnd-wash:var(--paper);
  --gnd-wash-ink:var(--tint-ink);
  --gnd-mark:currentColor;
  --gnd-mark-w:1px;
}
/* A light surface inside a dark section (a white card on a navy band) puts the light ground back. */
.on-light{
  --gnd-line:var(--plan-blue);
  --gnd-ink:var(--plan-blue);
  --gnd-wash:var(--tint);
  --gnd-wash-ink:var(--tint-ink);
  --gnd-ring:var(--plan-blue-deep);
  --gnd-mark:currentColor;
  --gnd-mark-w:1px;
}

/* The ring: site.css draws it from --focus (3px, offset 3px). On the new elements it follows the ground set above, and falls back to --focus where no ground is named. */
.btn.btn-sm:focus-visible,
.btn.btn-outline:focus-visible{outline-color:var(--gnd-ring,var(--focus))}

/* ---------- the 44px button ---------- */
.btn.btn-sm{
  height:auto;                          /* site.css gives .btn 52px: this one grows if a label wraps (nothing has a fixed height) */
  min-height:var(--btn-h-sm);
  padding:var(--s1) var(--btn-px-sm);
  justify-content:center;
  font-size:var(--btn-fs-sm);
  line-height:1.2;
  text-align:center;
}
.btn.btn-sm:is(:hover,:focus-visible){box-shadow:none}          /* Part 16: no shadow on a control */
.btn.btn-sm:focus-visible{border-radius:var(--r-pill)}          /* site.css gives .btn an 8px corner on focus: the pill stays a pill */
/* Part 16 state table: hover "background darkens, translateY(-1px), no shadow". site.css's yellow only lifts and casts the shadow the Standard forbids, so on this size the fill darkens. */
.btn.btn-sm.btn-yellow:is(:hover,:focus-visible){background:var(--yellow-hover);border-color:var(--yellow-hover)}
/* The white-fill button (for Plan Blue grounds) turns #eef6fc on hover with Plan Blue ink, 4.5:1 only by a hair: #005AA6 ink on that state is 6.4:1 (the colour table's rule for ink on a pale fill). */
.btn.btn-sm.btn-line:is(:hover,:focus-visible){color:var(--tint-ink)}

/* ---------- the ground-aware outline ---------- */
.btn.btn-outline{
  background:transparent;
  color:var(--gnd-ink);
  border-color:var(--gnd-line);
}
.btn.btn-outline:is(:hover,:focus-visible){
  background:var(--gnd-wash);
  color:var(--gnd-wash-ink);
  box-shadow:none;
}
/* site.css's .btn transitions four properties and leaves the ink out, so a label snapped to its hover colour while its fill faded: colour joins the others (the same 240ms and easing). */
.btn.btn-sm,.btn.btn-outline{transition:transform var(--m-hover) var(--m-ease),background-color var(--m-hover) var(--m-ease),border-color var(--m-hover) var(--m-ease),box-shadow var(--m-hover) var(--m-ease),color var(--m-hover) var(--m-ease)}
.btn.btn-sm:active,.btn.btn-outline:active{transition-duration:var(--m-press)}   /* site.css's press (the lift comes back in 120ms): the line above would hold it at 240ms */

/* ---------- the chip: metadata, 36px ---------- */
.chip-row,
.chip-sel-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s1);
  margin:0;
  padding:0;
  list-style:none;
}
.chip-row>li,
.chip-sel-row>li{display:flex}
.chip{
  display:inline-flex;
  align-items:center;
  min-height:var(--chip-h);
  padding:var(--s1) var(--chip-px);
  border:var(--chip-bw) solid transparent;
  border-radius:var(--r-pill);
  background:var(--tint);
  color:var(--tint-ink);
  font-family:var(--font-poppins);
  font-weight:700;
  font-size:var(--chip-fs);
  line-height:1.3;
  letter-spacing:var(--chip-ls);
  text-decoration:none;
  cursor:default;
}

/* ---------- the selector chip: a control, 44px ---------- */
.chip-sel{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s1);
  min-height:var(--btn-h-sm);
  margin:0;
  padding:var(--s1) var(--btn-px-sm);
  border:var(--btn-bw) solid var(--plan-blue);
  border-radius:var(--r-pill);
  background:transparent;
  color:var(--plan-blue);
  font-family:var(--font-poppins);
  font-weight:700;
  font-size:var(--btn-fs-sm);
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  transition:background-color var(--m-hover) var(--m-ease),color var(--m-hover) var(--m-ease),border-color var(--m-hover) var(--m-ease);
}
/* The class is written three times on the states below on purpose: site.css recolours a link in copy on hover (main li a:hover, specificity 0,3,3) and a chip must not follow it. */
.chip-sel.chip-sel.chip-sel:hover{background:var(--tint);color:var(--tint-ink)}
.chip-sel:focus-visible{outline:var(--ring-w) solid var(--focus);outline-offset:var(--ring-gap)}
.chip-sel.chip-sel.chip-sel:is([aria-current]:not([aria-current="false"]),[aria-selected="true"],[aria-pressed="true"]){
  background:var(--plan-blue);
  color:var(--paper);
  border-color:var(--plan-blue);
}
.chip-sel-n{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:var(--count-h);
  height:var(--count-h);
  padding:0 var(--s1);
  border-radius:var(--r-pill);
  background:var(--tint);
  color:var(--tint-ink);
  font-size:var(--chip-fs);
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.chip-sel:is([aria-current]:not([aria-current="false"]),[aria-selected="true"],[aria-pressed="true"]) .chip-sel-n{background:var(--paper);color:var(--plan-blue-dk)}

/* A row that scrolls sideways on a phone. Its padding keeps the 3px ring (and its 3px gap) inside the scroller, where it would be clipped. */
.chip-sel-row--scroll{
  flex-wrap:nowrap;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  padding:var(--s1);
  margin-inline:calc(-1 * var(--s1));
  scroll-padding-inline:var(--s2);
}
.chip-sel-row--scroll>*{flex:none}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .btn.btn-sm,
  .btn.btn-outline,
  .chip-sel{transition-property:color,background-color,border-color}   /* a colour change only: the lift and the arrow slide are already off in site.css */
  .chip-sel-row{scroll-behavior:auto}
}

/* ---------- Windows high contrast (forced colours) ---------- */
@media (forced-colors:active){
  .chip{border-color:CanvasText}                                   /* the transparent border becomes the chip's visible edge */
  .chip-sel.chip-sel.chip-sel:is([aria-current]:not([aria-current="false"]),[aria-selected="true"],[aria-pressed="true"]){
    forced-color-adjust:none;
    background:Highlight;
    color:HighlightText;
    border-color:Highlight;
  }
  .chip-sel-n{border:var(--chip-bw) solid currentColor}
}

/* =====================================================================================================================================================================
   The masthead band: Plan Blue, and its optional button row (unit B1-MAST). Markup and rules: docs/EDITOR-CONTRACT.md section 15; blocks/masthead/render.php.
   ===================================================================================================================================================================== */

/* Plan Blue, white words. White on Plan Blue is 4.9:1, so every word is SOLID white (site.css's deep band lets its lead go to 92% white, which would be about 4.4:1 here). The yellow
   rule before the eyebrow is the site's own device (the headline's highlighted phrase is drawn by no rule at present, so it stays white with the rest). The focus ring is yellow on this
   ground, as on every dark one. */
.pg-masthead--blue{
  background:var(--plan-blue);
  --focus:var(--yellow);
}
.pg-masthead--blue h1,
.pg-masthead--blue .sec-intro,
.pg-masthead--blue .sec-eyebrow{color:var(--paper)}
/* A link inside the lead: white with the yellow underline, and still white on hover (site.css turns a link in copy #005AA6 on hover, which is invisible on Plan Blue). */
.pg-masthead.pg-masthead--blue .sec-intro a{color:var(--paper);text-decoration-color:var(--yellow)}
main .pg-masthead.pg-masthead--blue .sec-intro a:is(:hover,:focus-visible){color:var(--paper)}
.pg-masthead--blue .sec-intro a:focus-visible{outline:var(--ring-w) solid var(--focus);outline-offset:var(--ring-gap)}

/* The row: a flex row, 14px gap, wraps on its own. It enters after the lead, in step with the other children of the copy. */
.mh-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s2);
  margin-top:var(--s3);
}
.pg-masthead .mh-copy>.mh-actions{--m-d0:calc(4 * var(--m-stagger))}
/* The 52px button is a minimum here, not a fixed height (Part 17 rule 5): a label that wraps on a phone makes the button grow. */
.mh-actions .btn{
  height:auto;
  min-height:var(--btn-h-lg);
  padding-block:var(--s1);
  justify-content:center;
  line-height:1.2;
  text-align:center;
}
.mh-actions .btn:focus-visible{border-radius:var(--r-pill)}      /* site.css squares a focused .btn to 8px; the masthead's pills stay pills, as the 44px button does */
/* The yellow button of the row darkens on hover, as the 44px one does, and has no shadow: the outline beside it has none, and the Standard forbids one on a control (site.css's yellow keeps its own). */
.mh-actions .btn.btn-yellow:is(:hover,:focus-visible){background:var(--yellow-hover);border-color:var(--yellow-hover);box-shadow:none}
/* The text link, last: Part 19's standalone link with its own arrow, the site's .dd-link (no underline at rest, a line drawn in under the words on hover, the arrow always, never counted as the row's).
   Ink and line come from the ground; the 44px target is centred on the buttons' line. site.css pins a .dd-link to the foot of a card (margin-top:auto, padding-top, flex-start): the row undoes that. */
.mh-actions .dd-link{margin:0;padding:0;align-self:center;min-height:var(--btn-h-sm);color:var(--gnd-ink)}
.mh-actions .dd-link svg{flex:none}
.mh-actions a.dd-link>span::after{height:var(--gnd-mark-w);background:var(--gnd-mark)}   /* specificity 0,2,3: one element selector over site.css's line */
.mh-actions .dd-link:focus-visible{outline-offset:var(--ring-gap)}                       /* the Standard's 3px; the card link's is 4px */