/* ============================================================
   SCC Foundation — shared pieces of the 2026 redesign
   Section rule, date block, square buttons, readability layer,
   and the core block styles registered by scc-blocks.

   Loaded only with the blocks and block styles that use it (it is a
   dependency of their style handles), never deferred: WPCode's
   Performance Optimizations snippet defers scc-blocks-global, so every
   live token below is read with its value as a fallback.
   ============================================================ */

:root {
  --scc-paper:  #fff;
  --scc-band:   #eef3f4;
  --scc-ink:    #1c2a31;
  --scc-muted:  #3c4a50;
  --scc-aqua:   #08b9aa;
  --scc-rule:   rgba(14, 75, 100, .18);
  --scc-rule-2: rgba(14, 75, 100, .34);
  --scc-gutter: clamp(1rem, 4vw, 3rem);
  --scc-sec:    clamp(3rem, 7vw, 5.5rem);
  --scc-inner:  82rem;
  --scc-tap:    3.25rem;
}

/* ── Section rule: a thick coloured rule over a heavy heading ── */
.scc-rule,
.wp-block-heading[class*="is-style-scc-rule-"] {
  margin: 0;
  padding-top: 1.1rem;
  border-top: 8px solid var(--scc-rule-color, var(--scc-teal, #0e4b64));
  color: var(--scc-teal, #0e4b64);
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
  text-wrap: balance;
}
/* (0,2,0): beats Kadence's .entry-content h2 (0,1,1) whatever loads last. */
.wp-block-heading.is-style-scc-rule-teal       { --scc-rule-color: var(--scc-teal, #0e4b64); }
.wp-block-heading.is-style-scc-rule-teal-light { --scc-rule-color: var(--scc-teal-light, #1e6685); }
.wp-block-heading.is-style-scc-rule-aqua       { --scc-rule-color: var(--scc-aqua); }
.wp-block-heading.is-style-scc-rule-lime       { --scc-rule-color: var(--scc-lime, #dbde2f); }
.wp-block-heading.is-style-scc-rule-teal,
.wp-block-heading.is-style-scc-rule-teal-light,
.wp-block-heading.is-style-scc-rule-aqua,
.wp-block-heading.is-style-scc-rule-lime {
  padding-top: 1.1rem;
  border-top: 8px solid var(--scc-rule-color);
  font-weight: 800;
}
/* Paragraphs that follow a ruled heading read as its intro. */
.wp-block-heading[class*="is-style-scc-rule-"] + p {
  margin-top: .85rem;
  max-width: 44rem;
  color: var(--scc-muted);
  font-size: 1.15rem;
}

/* ── Date block: month / day / weekday ── */
.scc-dblock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: start;
  width: var(--scc-dblock-w, 4.6rem);
  margin: 0;
  padding: .45rem 0 .5rem;
  background: var(--scc-dblock-bg, var(--scc-teal, #0e4b64));
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  text-align: center;
}
.scc-dblock span { font-size: 1rem; font-weight: 600; }
.scc-dblock b {
  margin: .12rem 0 .16rem;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

/* ── Square buttons: 54px, full width on phones ── */
.scc-btn2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.4rem;
  padding: 0 1.35rem;
  border: 0;
  border-radius: 0;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.scc-btn2--lime  { background: var(--scc-lime, #dbde2f); color: var(--scc-teal-dark, #093a4e); }
.scc-btn2--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .75); }
.scc-btn2--ink   { background: var(--scc-teal, #0e4b64); color: #fff; }
.scc-btn2--line  { background: transparent; color: var(--scc-teal, #0e4b64); box-shadow: inset 0 0 0 2px var(--scc-teal, #0e4b64); }
a.scc-btn2--lime:hover, a.scc-btn2--lime:focus-visible { background: #fff; color: var(--scc-teal-dark, #093a4e); }
a.scc-btn2--ghost:hover, a.scc-btn2--ghost:focus-visible,
a.scc-btn2--line:hover { background: #fff; color: var(--scc-teal, #0e4b64); }
a.scc-btn2--ink:hover { background: var(--scc-teal-dark, #093a4e); color: #fff; }
@media (max-width: 599.98px) {
  .scc-btn2 { width: 100%; }
}

/* ── Readability layer (class scc-readable on a section row) ── */
.scc-readable {
  color: var(--scc-ink);
  font-size: 1.125rem;
  line-height: 1.6;
  letter-spacing: normal;
}
.scc-readable p { text-wrap: pretty; overflow-wrap: break-word; }
.scc-readable a:not([class*="scc-btn"]) {
  color: var(--scc-teal, #0e4b64);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .18em;
}
.scc-readable a:not([class*="scc-btn"]):hover { color: var(--scc-magenta, #c11f70); }
.scc-readable :focus-visible,
.scc-focus :focus-visible { outline: 3px solid var(--scc-magenta, #c11f70); outline-offset: 3px; }
.scc-readable a[href^="tel:"],
.scc-focus a[href^="tel:"],
.scc-nowrap { white-space: nowrap; }

/* ── Core block styles ── */

/* Paragraph "SCC Note": a boxed aside */
p.is-style-scc-note {
  max-width: 44rem;
  margin-top: 1.5rem;
  padding: .9rem 1rem;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--scc-rule-2);
}
p.is-style-scc-note strong, p.is-style-scc-note b { color: var(--scc-teal, #0e4b64); }

/* Group "SCC Section" / "SCC Band": a full-width page row with an 82rem
   inner column. Children are capped rather than the group, so the band's
   background still spans the window. */
/* The side padding grows to centre an 82rem column, so children keep their
   own left edge (a 44rem intro paragraph sits left, not centred). */
.wp-block-group.is-style-scc-section,
.wp-block-group.is-style-scc-band {
  padding-block: var(--scc-sec);
  padding-inline: max(var(--scc-gutter), (100% - var(--scc-inner)) / 2);
  background-color: var(--scc-paper);
}
.wp-block-group.is-style-scc-band { background-color: var(--scc-band); }
/* Full width: % padding would resolve against the theme's content column,
   not the window, so centre the column on the viewport. */
.wp-block-group.alignfull.is-style-scc-section,
.wp-block-group.alignfull.is-style-scc-band {
  padding-inline: max(var(--scc-gutter), (100vw - var(--scc-inner)) / 2);
}
/* Page rows sit flush: no block gap between sections. */
.wp-block-group.is-style-scc-section,
.wp-block-group.is-style-scc-band,
.scc-quick-links.is-style-text,
.scc-cta-banner.is-style-dark { margin-block: 0; }
.wp-block-group.is-style-scc-section > :first-child,
.wp-block-group.is-style-scc-band > :first-child { margin-top: 0; }
/* Blocks inside a section supply their own row width; drop their outer
   padding so they line up with the section's headings. */
/* The section is already full width, so a full-width block inside it fills
   the section instead of breaking out of it (the global sheet's 100vw rule
   assumes the block sits straight in the theme's content column). */
.wp-block-group.is-style-scc-section > .alignfull,
.wp-block-group.is-style-scc-band > .alignfull { width: auto; max-width: none; margin-left: 0; margin-right: 0; }
.wp-block-group.is-style-scc-section > [class*="wp-block-scc-"],
.wp-block-group.is-style-scc-band > [class*="wp-block-scc-"] { --scc-gutter: 0px; --scc-block-pad: 0px; }

/* WordPress's own screen-reader class, in case the theme lacks it. */
.screen-reader-text:not(:focus) {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Paragraphs directly in a page row keep a readable line length. */
.wp-block-group.is-style-scc-section > p,
.wp-block-group.is-style-scc-band > p,
.wp-block-group.is-style-scc-band .wp-block-column > p { max-width: 44rem; }
/* A ruled heading in a column (two sections side by side) is a size down. */
.wp-block-column > .wp-block-heading[class*="is-style-scc-rule-"] { font-size: clamp(1.9rem, 3.2vw, 2.5rem); }