/* KWCS prose — default styling for ordinary page content.
 *
 * Every selector is wrapped in :where() so it carries ZERO specificity. That
 * means any component class (.section-title, .program-title, .comm-card-desc…)
 * always wins, and these rules can never leak into the custom section blocks.
 */

:where(.kwcs-prose) {
  color: var(--text);
  font-size: 17px;
  line-height: 1.7;
}

/* ── Headings ─────────────────────────────────────────────────────────── */

:where(.kwcs-prose h1, .kwcs-prose h2, .kwcs-prose h3,
       .kwcs-prose h4, .kwcs-prose h5, .kwcs-prose h6) {
  font-family: 'Chewy', cursive;
  font-weight: 400;
  color: var(--navy-deep);
  line-height: 1.15;
  margin: 1.8em 0 0.5em;
}

:where(.kwcs-prose > :first-child) { margin-top: 0; }

:where(.kwcs-prose h1) { font-size: clamp(38px, 4.4vw, 58px); line-height: 1.05; }
:where(.kwcs-prose h2) { font-size: clamp(30px, 3.2vw, 42px); }
:where(.kwcs-prose h3) { font-size: 28px; }
:where(.kwcs-prose h4) { font-size: 23px; }
:where(.kwcs-prose h5) { font-size: 20px; }
:where(.kwcs-prose h6) {
  font-size: 15px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* ── Text ─────────────────────────────────────────────────────────────── */

:where(.kwcs-prose p) { margin: 0 0 1.15em; }

:where(.kwcs-prose p.is-style-lead, .kwcs-prose .lead) {
  font-size: 20px;
  line-height: 1.6;
  color: var(--navy);
  font-weight: 600;
}

/* An H5 heading block is lead text, so editors get the style from the heading
   level alone. Scoped to .wp-block-heading so component h5s are untouched;
   the :root prefix lifts it over the zero-specificity prose heading rules and
   the global Chewy heading face. */
:root h5.wp-block-heading {
  font-family: 'Nunito', sans-serif;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: normal;
  color: var(--navy);
  font-weight: 600;
}

:where(.kwcs-prose a) {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--gold);
  transition: color 0.18s, text-decoration-color 0.18s;
}

:where(.kwcs-prose a:hover) {
  color: var(--gold-deep);
  text-decoration-color: var(--gold-deep);
}

:where(.kwcs-prose strong, .kwcs-prose b) { font-weight: 800; color: var(--navy-deep); }
:where(.kwcs-prose em, .kwcs-prose i) { font-style: italic; }
:where(.kwcs-prose small) { font-size: 14px; color: var(--muted); }
:where(.kwcs-prose del) { color: var(--muted); }
:where(.kwcs-prose ins) { text-decoration: none; background: var(--gold-pale); padding: 0 4px; border-radius: 4px; }
:where(.kwcs-prose abbr) { text-decoration: underline dotted; cursor: help; }

:where(.kwcs-prose mark) {
  background: var(--gold-pale);
  color: var(--navy-deep);
  padding: 1px 5px;
  border-radius: 5px;
}

:where(.kwcs-prose code) {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.88em;
  background: var(--navy-tint);
  color: var(--navy);
  padding: 2px 7px;
  border-radius: 6px;
}

:where(.kwcs-prose kbd) {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.85em;
  background: white;
  border: 2px solid var(--border);
  border-bottom-width: 3px;
  border-radius: 6px;
  padding: 2px 7px;
}

:where(.kwcs-prose pre) {
  background: var(--navy-deep);
  color: #E8EEF8;
  padding: 22px 24px;
  border-radius: 14px;
  overflow-x: auto;
  margin: 0 0 1.4em;
  line-height: 1.6;
  font-size: 14px;
}

:where(.kwcs-prose pre code) { background: none; color: inherit; padding: 0; font-size: inherit; }

/* ── Lists ────────────────────────────────────────────────────────────── */

:where(.kwcs-prose ul, .kwcs-prose ol) { margin: 0 0 1.3em; padding-left: 1.5em; }
:where(.kwcs-prose li) { margin-bottom: 0.5em; padding-left: 0.25em; }

/* ::marker is a pseudo-element, which :where() does not accept — the whole
   rule would be dropped as invalid, so this one stays unwrapped. */
.kwcs-prose li::marker { color: var(--gold-deep); font-weight: 800; }
:where(.kwcs-prose ul ul, .kwcs-prose ol ol,
       .kwcs-prose ul ol, .kwcs-prose ol ul) { margin: 0.5em 0 0; }

:where(.kwcs-prose dl) { margin: 0 0 1.3em; }
:where(.kwcs-prose dt) { font-weight: 800; color: var(--navy-deep); margin-top: 0.9em; }
:where(.kwcs-prose dd) { margin: 0.25em 0 0; padding-left: 1.2em; color: var(--muted); }

/* ── Quotes ───────────────────────────────────────────────────────────── */

:where(.kwcs-prose blockquote) {
  margin: 1.6em 0;
  padding: 4px 0 4px 28px;
  border-left: 5px solid var(--gold);
  color: var(--navy-deep);
  font-size: 20px;
  line-height: 1.6;
  font-weight: 600;
}

:where(.kwcs-prose blockquote p:last-child) { margin-bottom: 0; }

:where(.kwcs-prose blockquote cite, .kwcs-prose figcaption cite) {
  display: block;
  margin-top: 0.7em;
  font-size: 14.5px;
  font-weight: 700;
  font-style: normal;
  color: var(--muted);
}

/* ── Tables ───────────────────────────────────────────────────────────── */

:where(.kwcs-prose table) {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5em;
  font-size: 15.5px;
}

:where(.kwcs-prose caption) {
  caption-side: bottom;
  padding-top: 12px;
  font-size: 14px;
  color: var(--muted);
  text-align: left;
}

:where(.kwcs-prose th) {
  background: var(--navy);
  color: white;
  font-weight: 800;
  text-align: left;
  padding: 14px 16px;
}

:where(.kwcs-prose thead th:first-child) { border-radius: 12px 0 0 0; }
:where(.kwcs-prose thead th:last-child) { border-radius: 0 12px 0 0; }

:where(.kwcs-prose td) { padding: 13px 16px; border-bottom: 2px solid var(--border); }
:where(.kwcs-prose tbody tr:nth-child(even)) { background: var(--gold-tint); }
:where(.kwcs-prose tfoot td) { font-weight: 800; color: var(--navy-deep); border-bottom: none; }

/* Tables must scroll inside their own container, never the page. */
:where(.kwcs-prose .wp-block-table, .kwcs-prose .table-scroll) { overflow-x: auto; }

/* ── Media & rules ────────────────────────────────────────────────────── */

:where(.kwcs-prose img) { max-width: 100%; height: auto; border-radius: 14px; }

:where(.kwcs-prose figure) { margin: 1.8em 0; }

:where(.kwcs-prose figcaption) {
  margin-top: 12px;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.55;
}

:where(.kwcs-prose hr) {
  border: none;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  margin: 2.6em 0;
}

/* ── Layout container for ordinary pages ──────────────────────────────── */

.kwcs-prose {
  max-width: 820px;
  margin: 0 auto;
  padding: 72px 32px 96px;
}

@media (max-width: 768px) {
  .kwcs-prose { padding: 48px 20px 72px; }
}

/* A page can mix a prose column with full-bleed section blocks, so a nested
   .kwcs-prose never re-applies the container. */
.kwcs-prose .kwcs-prose {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ── Core block wrappers ──────────────────────────────────────────────────
   Core ships its own class-based styles for these blocks, which outrank the
   zero-specificity rules above. Scoping through .kwcs-prose gives us the
   specificity to win them back. */

.kwcs-prose .wp-block-quote {
  border-left: 5px solid var(--gold);
  padding: 4px 0 4px 28px;
  margin: 1.6em 0;
}

.kwcs-prose .wp-block-quote cite {
  display: block;
  margin-top: 0.7em;
  font-size: 14.5px;
  font-weight: 700;
  font-style: normal;
  color: var(--muted);
}

.kwcs-prose .wp-block-separator {
  border: none;
  height: 3px;
  background: var(--border);
  opacity: 1;
  border-radius: 2px;
  margin: 2.6em 0;
  width: 100%;
  max-width: none;
}

.kwcs-prose .wp-block-code {
  background: var(--navy-deep);
  color: #E8EEF8;
  border: none;
  padding: 22px 24px;
  border-radius: 14px;
  font-size: 14px;
}

.kwcs-prose .wp-block-image { margin: 1.8em 0; }
.kwcs-prose .wp-block-image img { border-radius: 14px; }

.kwcs-prose .wp-element-caption {
  margin-top: 12px;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.55;
  text-align: left;
}

.kwcs-prose .wp-block-table { overflow-x: auto; margin: 0 0 1.5em; }

/* Core buttons take the KWCS pill treatment. */
.kwcs-prose .wp-block-buttons { gap: 16px; margin: 0 0 1.5em; }

.kwcs-prose .wp-block-button__link {
  background: var(--navy);
  color: white;
  border-radius: 100px;
  padding: 16px 34px;
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease;
}

.kwcs-prose .wp-block-button__link:hover { background: var(--navy-deep); color: white; }

.kwcs-prose .is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--border);
}

.kwcs-prose .is-style-outline .wp-block-button__link:hover {
  background: var(--gold-tint);
  border-color: var(--gold);
  color: var(--navy);
}

/* ── Core-block page sections ─────────────────────────────────────────────
   Interior pages (Who We Are and its siblings) are assembled from ordinary
   core blocks so editors keep every colour, column and spacing control. These
   classes are presentation hooks only — added via the block's Additional CSS
   Class field — and never dictate structure. */

/* Full-bleed bands have to butt up against each other and against the ACF
   section blocks, so drop the default block gap between them. */
:root :where(.entry-content, .wp-block-post-content) > .kwcs-page-hero,
:root :where(.entry-content, .wp-block-post-content) > .kwcs-page-section,
:root :where(.entry-content, .wp-block-post-content) > .kwcs-callout {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Interior page hero — the lighter cousin of the homepage .hero band. */
.kwcs-page-hero {
  padding: 96px 80px;
  text-align: center;
}

.kwcs-page-hero h1 {
  font-size: clamp(46px, 5vw, 76px);
  line-height: 1;
  color: var(--navy-deep);
  margin-bottom: 0;
}

.kwcs-page-hero p {
  font-size: 19px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--navy-deep);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Small uppercase label above a heading — the core-block twin of
   .section-eyebrow, minus the gold dash (which needs a flex container the
   editor can't guarantee). */
.kwcs-eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 14px;
}

.kwcs-page-hero .kwcs-eyebrow {
  color: var(--navy);
}

.kwcs-callout .kwcs-eyebrow {
  color: var(--gold-light);
}

.kwcs-page-hero .wp-block-image img {
  border-radius: 26px;
  border: 6px solid white;
  box-shadow: 0 12px 0 rgba(20, 55, 107, 0.12);
}

/* A full-width band of core blocks, matching the .section padding scale. */
.kwcs-page-section {
  padding: 100px 80px;
  position: relative;
}

.kwcs-page-section h2 {
  font-size: clamp(36px, 3.8vw, 54px);
  line-height: 1;
  color: var(--navy-deep);
  margin-bottom: 18px;
}

.kwcs-page-section > * + h2 {
  margin-top: 56px;
}

/* Only a bare h3 in the band itself — the cards below style their own. */
.kwcs-page-section > h3 {
  font-size: 28px;
  line-height: 1.1;
  color: var(--navy-deep);
  margin: 48px 0 16px;
}

.kwcs-page-section p {
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--muted);
  font-weight: 500;
}

/* Journey-stage card — used for the three columns under Our Lifetime
   Commitment, and reusable by any 2–4 column core/columns row. */
.kwcs-stage-card {
  height: 100%;
  background: white;
  border: 2px solid var(--gold-pale);
  border-radius: 24px;
  padding: 32px 30px;
  box-shadow: 0 2px 0 rgba(30, 75, 143, 0.08);
}

.kwcs-stage-card h3 {
  font-size: 25px;
  line-height: 1.05;
  color: var(--navy-deep);
  margin-bottom: 10px;
}

.kwcs-stage-card p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 0;
}

.kwcs-stage-card--blue {
  border-color: #c9d7ee;
}

/* Short, loud statement band. */
.kwcs-callout {
  padding: 76px 80px;
  text-align: center;
}

.kwcs-callout h2 {
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.05;
  color: white;
  max-width: 900px;
  margin: 0 auto;
}

.kwcs-callout p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 17px;
  max-width: 720px;
  margin: 16px auto 0;
}

/* Mission / vision pair. */
.kwcs-mv-card {
  height: 100%;
  border-radius: 26px;
  padding: 40px 38px;
}

.kwcs-mv-card h2 {
  font-size: 34px;
  line-height: 1.05;
  color: var(--navy-deep);
  margin-bottom: 14px;
}

.kwcs-mv-card p {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: 0;
}

/* The deck's "Sub-Heading:" rows — a serif-free line of intent under an h2.
   An H4 heading block gets the same look, so editors don't need the class. */
/* The `:root` prefix is load-bearing. `.kwcs-page-section p` is (0,1,1) and
   would otherwise out-specify a bare `.kwcs-subhead` (0,1,0), flattening every
   subhead inside a page section back to plain body copy. */
:root .kwcs-subhead,
:root h4.wp-block-heading {
  font-family: 'Nunito', sans-serif;
  letter-spacing: normal;
  font-size: 20px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--gold-deep);
  /* No max-width: constrained layout centres anything narrower than the
     content width, which would float this line away from the heading it
     belongs under. It runs the full column like the body copy instead. */
}

/* The pull-up only makes sense when the subhead is tucked under its heading.
   Standing on its own — after a note, a card, or a list — it keeps the normal
   block gap instead of colliding with whatever sits above it. */
:root :is(h1, h2, h3, h4) + .kwcs-subhead,
:root :is(h1, h2, h3) + h4.wp-block-heading {
  margin-top: -6px;
}

/* Number-forward stat card, matching the homepage impact band's proportions
   but on a light ground. The figure is an h3 and the label a paragraph, so
   both stay ordinary editable blocks. */
.kwcs-stat-card {
  height: 100%;
  background: var(--gold-tint);
  border-radius: 24px;
  padding: 32px 30px;
  text-align: center;
}

.kwcs-stat-card h3 {
  font-size: clamp(42px, 4.4vw, 60px);
  line-height: 1;
  color: var(--gold-deep);
  margin-bottom: 12px;
}

.kwcs-stat-card p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 0;
}

.kwcs-stat-card--blue {
  background: var(--navy-tint);
}

.kwcs-stat-card--blue h3 {
  color: var(--navy);
}

/* Staff / board entry. Kept flat so the same card works with or without a
   portrait once headshots arrive. */
.kwcs-person-card {
  height: 100%;
  background: white;
  border: 2px solid var(--gold-pale);
  border-radius: 20px;
  padding: 26px 24px;
}

.kwcs-person-card h3 {
  font-size: 22px;
  line-height: 1.1;
  color: var(--navy-deep);
  margin-bottom: 6px;
}

.kwcs-person-card p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: 0;
}

.kwcs-person-card p + p {
  margin-top: 8px;
}

.kwcs-person-card .kwcs-person-role {
  font-weight: 700;
  color: var(--gold-deep);
}

.kwcs-person-card a {
  color: var(--navy);
  font-weight: 600;
  word-break: break-word;
}

/* The "here is the PDF / here is who to email" band the copy deck keeps asking
   for. It is the loudest thing in its section, so it reads as a lifted white
   card rather than another flat panel: the shadow separates it from cream and
   warm-white section backgrounds alike, and the gold rule across the top ties
   it to the stage and quote cards without repeating their border. */
.kwcs-doc-cta {
  position: relative;
  overflow: hidden;
  background: white;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 40px 40px 36px;
  text-align: center;
  box-shadow: 0 18px 40px -24px rgba(20, 55, 107, 0.45);
}

.kwcs-doc-cta::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
}

.kwcs-doc-cta h3 {
  font-size: 27px;
  line-height: 1.15;
  color: var(--navy-deep);
  margin-bottom: 10px;
}

.kwcs-doc-cta p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 46ch;
  margin: 0 auto 22px;
}

/* Core buttons take the KWCS pill treatment inside page sections too, not
   only inside .kwcs-prose. */
.kwcs-page-section .wp-block-buttons,
.kwcs-doc-cta .wp-block-buttons {
  gap: 16px;
}

.kwcs-page-section .wp-block-button__link,
.kwcs-doc-cta .wp-block-button__link {
  background: var(--navy);
  color: white;
  border-radius: 100px;
  padding: 16px 34px;
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease;
}

.kwcs-page-section .wp-block-button__link:hover,
.kwcs-doc-cta .wp-block-button__link:hover {
  background: var(--navy-deep);
  color: white;
}

/* Ticked list for "Where Your Impact Lands" and its siblings. Applied to a
   core/list, so items stay ordinary list items. */
.kwcs-check-list {
  list-style: none;
  padding-left: 0;
  /* Leave the top margin to the layout's block gap, so a lead-in paragraph
     gets the same breathing room as any other pair of blocks. */
  margin-inline: 0;
  margin-block-end: 0;
  display: grid;
  gap: 14px;
}

.kwcs-check-list li {
  position: relative;
  padding-left: 42px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--muted);
  font-weight: 500;
}

.kwcs-check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

/* Chronological archive of report links. */
.kwcs-report-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.kwcs-report-list li {
  background: white;
  border: 2px solid var(--gold-pale);
  border-radius: 14px;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 600;
}

.kwcs-report-list li a {
  color: var(--navy);
  text-decoration: none;
}

.kwcs-report-list li a:hover {
  color: var(--gold-deep);
  text-decoration: underline;
}

/* The copy deck's "Accordions or Pillars" sections. Built from core/details so
   the disclosure behaviour is the browser's own — no JS, keyboard accessible,
   and findable by in-page search when open. */
/* Deliberately a block container, not a grid or flex column: constrained
   layout pins `margin-inline: auto !important` on every child, which in a grid
   or flex context shrink-wraps the item to its content — collapsed panels
   would sit centred and half-width. In normal block flow those same auto
   margins resolve to zero and each panel fills the column. */
.kwcs-accordion {
  margin-top: 32px;
}

/* Global block gap would otherwise push the first panel 24px off its heading
   and space the rest at 24px instead of the tighter 14px stack. */
:root .kwcs-accordion > * {
  margin-block-start: 0;
}

.kwcs-accordion .wp-block-details + .wp-block-details {
  margin-top: 14px;
}

.kwcs-accordion .wp-block-details {
  background: white;
  border: 2px solid var(--gold-pale);
  border-radius: 20px;
  padding: 0;
}

.kwcs-accordion .wp-block-details > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 24px 64px 24px 28px;
  font-family: 'Nunito', sans-serif;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--navy-deep);
}

/* Safari still paints the default triangle without this. */
.kwcs-accordion .wp-block-details > summary::-webkit-details-marker {
  display: none;
}

.kwcs-accordion .wp-block-details > summary::after {
  content: '';
  position: absolute;
  right: 24px;
  top: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  border-radius: 50%;
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
  transition: transform 0.2s ease;
}

.kwcs-accordion .wp-block-details[open] > summary::after {
  transform: rotate(180deg);
}

.kwcs-accordion .wp-block-details[open] > summary {
  padding-bottom: 8px;
}

/* Everything after the <summary> is the panel body. */
.kwcs-accordion .wp-block-details > :not(summary) {
  padding-left: 28px;
  padding-right: 28px;
}

.kwcs-accordion .wp-block-details > :last-child {
  padding-bottom: 28px;
}

/* A list opening the panel sits under the summary's own padding, not the
   block gap the check list otherwise takes. */
.kwcs-accordion .wp-block-details > summary + .kwcs-check-list {
  margin-block-start: 0;
}

/* The journey stages carry more weight than the pillars, so they read as
   navigation rather than fine print. */
.kwcs-accordion--journey .wp-block-details > summary {
  font-size: 25px;
}

/* Year count sitting beside an accordion label, e.g. "2025 · 12 segments". */
.kwcs-accordion .kwcs-count {
  display: inline-block;
  margin-left: 10px;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--gold-tint);
  color: var(--gold-deep);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

/* Long runs of dated links — the Global Edmonton archive. Rows rather than
   bullets, because a bullet in front of a date reads as noise at this length. */
.kwcs-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kwcs-link-list li {
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}

.kwcs-link-list li:last-child { border-bottom: 0; }

.kwcs-link-list li strong {
  color: var(--navy-deep);
  font-weight: 800;
  white-space: nowrap;
}

.kwcs-link-list a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid rgba(30, 75, 143, 0.22);
}

.kwcs-link-list a:hover {
  color: var(--gold-deep);
  border-bottom-color: var(--gold);
}

/* A boxed aside for the copy deck's "Note:" rows. */
.kwcs-note {
  background: var(--gold-tint);
  border-left: 5px solid var(--gold);
  border-radius: 0 16px 16px 0;
  padding: 20px 24px;
  margin-top: 24px;
}

:root .kwcs-note > * {
  margin-block-start: 0;
}

.kwcs-note p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 0;
}

/* Testimonial pulled out of the flow — used for the Camp Beat It quotes. */
.kwcs-quote-card {
  background: white;
  border: none;
  border-left: 5px solid var(--gold);
  border-radius: 0 20px 20px 0;
  padding: 26px 30px;
  margin: 0 0 16px;
}

.kwcs-quote-card p {
  font-size: 17px;
  line-height: 1.65;
  font-style: italic;
  color: var(--navy-deep);
  margin-bottom: 10px;
}

.kwcs-quote-card cite {
  display: block;
  font-style: normal;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--gold-deep);
}

/* The solid pill above is the default; outline is the secondary action. */
.kwcs-page-section .is-style-outline .wp-block-button__link,
.kwcs-doc-cta .is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
}

.kwcs-page-section .is-style-outline .wp-block-button__link:hover,
.kwcs-doc-cta .is-style-outline .wp-block-button__link:hover {
  background: var(--navy);
  color: white;
}

/* A callout band is navy, so its button inverts to stay legible. */
.kwcs-callout .wp-block-buttons {
  margin-top: 28px;
}

.kwcs-callout .wp-block-button__link {
  background: white;
  color: var(--navy-deep);
  border-radius: 100px;
  padding: 16px 34px;
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease;
}

.kwcs-callout .wp-block-button__link:hover {
  background: var(--gold);
  color: white;
}

/* Age range under a programme name, reusing the person-card role treatment. */
.kwcs-stage-card .kwcs-person-role {
  font-weight: 700;
  color: var(--gold-deep);
  font-size: 14.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

/* Global styles put a 24px block gap between every child of a group, which is
   far too much inside a card whose heading and body are one unit. The :root
   prefix buys the specificity to beat `:root :where(.wp-block-group) > *`. */
:root .kwcs-stat-card > *,
:root .kwcs-person-card > *,
:root .kwcs-stage-card > *,
:root .kwcs-doc-cta > * {
  margin-block-start: 0;
}

/* Round gallery images by default, matching the prose image radius. The figure
   clips so caption overlays follow the corners too. Images given their own
   border in the editor (.has-custom-border) keep whatever was set. */
.wp-block-gallery.has-nested-images figure.wp-block-image:not(.has-custom-border) {
  border-radius: 14px;
  overflow: hidden;
}

.wp-block-gallery.has-nested-images figure.wp-block-image:not(.has-custom-border) img {
  border-radius: inherit;
}

/* An empty gallery is a deliberate slot for photography that hasn't landed
   yet; give it enough presence that it doesn't read as a broken section. */
.kwcs-media-grid .wp-block-gallery:not(:has(figure)) {
  min-height: 220px;
  border: 2px dashed var(--gold-pale);
  border-radius: 24px;
}

@media (max-width: 1024px) {
  .kwcs-page-hero { padding: 72px 32px; }
  .kwcs-page-section { padding: 72px 32px; }
  .kwcs-callout { padding: 60px 32px; }

  /* Core only stacks columns at 781px, which leaves the 3- and 4-up card rows
     squeezed into unreadable slivers on tablets. Go two-up in between. */
  .kwcs-page-section .wp-block-columns:not(.is-not-stacked-on-mobile) {
    /* Core pins `flex-wrap: nowrap !important` above 782px, so the !important
       here is the only way to let the row break. */
    flex-wrap: wrap !important;
  }

  .kwcs-page-section .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: calc(50% - var(--wp--style--block-gap, 24px) / 2);
    flex-grow: 0;
  }
}

@media (max-width: 768px) {
  .kwcs-page-hero { padding: 56px 20px; }
  .kwcs-page-section { padding: 56px 20px; }
  .kwcs-callout { padding: 48px 20px; }
  .kwcs-mv-card { padding: 30px 26px; }
  .kwcs-doc-cta { padding: 30px 22px 26px; }
  .kwcs-doc-cta h3 { font-size: 23px; }
  :root .kwcs-subhead,
  :root h4.wp-block-heading { font-size: 18px; }
  .kwcs-quote-card { padding: 22px 20px; }

  .kwcs-accordion .wp-block-details > summary {
    font-size: 18px;
    padding: 20px 56px 20px 20px;
  }

  .kwcs-accordion--journey .wp-block-details > summary { font-size: 20px; }

  .kwcs-accordion .wp-block-details > :not(summary) {
    padding-left: 20px;
    padding-right: 20px;
  }

  .kwcs-accordion .wp-block-details > :last-child { padding-bottom: 20px; }
}

/* ── Faces pattern on core blocks ─────────────────────────────────────────
   The ACF section blocks paint their faces with an inline <svg class="faces-pattern">
   child (see kwcs_faces_pattern() in inc/helpers.php). Core blocks can't emit
   that child, so when one of the faces classes is used WITHOUT it — i.e. on a
   core group or cover — the same tile is painted from a pseudo-element instead.
   The :not(:has()) guard keeps the ACF blocks on their inline SVG so they never
   end up with two layers of faces. */

.orange-background-with-faces:not(:has(> .faces-pattern)),
.blue-background-with-faces:not(:has(> .faces-pattern)) {
  position: relative;
}

.orange-background-with-faces:not(:has(> .faces-pattern))::before,
.blue-background-with-faces:not(:has(> .faces-pattern))::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='f' x='0' y='0' width='140' height='100' patternUnits='userSpaceOnUse' patternTransform='rotate(-10)'%3E%3Cpath fill='white' d='M59.12.07c11.2.68 17.09 14.24 11.51 23.49-.57 1.43.98 1.08 1.69.45.86-.14 2.19 1.61 2.55 2.36v.31c-2.13 1.8-4.97 2.29-6.96 0-5.77 5.84-15.38 5.94-21.11 0-1.39 1.49-3.5 2.01-5.38 1.1-.22-.11-1.44-.96-1.51-1.09-.12-.22-.03-.23.08-.39.12-.18 1.87-1.93 2-1.99.3-.15 1.44 1.12 2.25.35.74-.7-.42-1.99-.75-2.76-3.71-8.73.76-18.38 9.66-21.28l2.29-.54h3.67ZM48.57 7.71c2.56 1.7 6.08 1.03 6.96-2.14.24-.85.64-1.95-.57-1.8-2.26.27-4.97 2.21-6.39 3.94m17.44 0c-1.6-2.19-4.45-3.8-7.19-3.98-.24 2.77 1.8 5.14 4.66 4.89.95-.08 1.67-.6 2.52-.92m-8.56 1.39s-.14.02-.22 0c-2.45 3.15-7.06 3.54-10.25 1.23-3.54 6.35.47 15.1 7.42 16.9 8.79 2.27 16.18-5.84 14.27-14.43-.19-.85-.55-1.65-.82-2.47-1.39.68-2.79 1.4-4.37 1.51-2.03.14-4.28-.78-5.72-2.19-.21-.2-.27-.52-.3-.54'/%3E%3Cpath fill='white' d='M60.81 22.24c-.37 4.18-6.51 4.23-6.88 0zM61.54 15.24c2.51-.29 3.03 3.62.56 3.93-2.92.37-3.03-3.65-.56-3.93M52.67 15.24c2-.27 3.07 2.45 1.34 3.64-2.7 1.86-4.54-3.2-1.34-3.64M25.02.07c6.22.57 11.67 6.02 13.05 11.96C41.1 25.02 26.93 36.26 15.34 28.8c-3.15-2.03-7.14-7.36-7.14-11.21v-2.68L.4 15.97 0 12.6l8.78-1.4c1.45-4.95 5.24-8.97 10.2-10.52.62-.19 1.78-.55 2.37-.61.91-.1 2.75-.09 3.67 0m7.03 7.8c.19-.16-1.28-1.53-1.46-1.68-5.96-4.96-14.91-2.62-17.81 4.43zM11.72 14.3c-.7 5.38 2.9 11.15 8.1 12.76 8.67 2.7 16.46-5.06 14.95-13.72-.09-.52-.41-2.16-.96-2.26z'/%3E%3Cpath fill='white' d='M21.65 21.63c.02 1.05.59 2.03 1.75 1.98 1.46-.06 1.49-1.98 1.7-1.98h2.37c.27 4.87-6.71 6.22-8.15 1.5-.07-.24-.37-1.5-.03-1.5h2.37ZM27.43 15.24c2.54-.35 3.1 3.57.71 3.94-2.86.44-3.17-3.6-.71-3.94M18.71 15.24c2.34-.27 3.05 3.58.56 3.94-2.82.41-3.22-3.63-.56-3.94'/%3E%3Cg transform='translate(60, 50)'%3E%3Cpath fill='white' d='M59.12.07c11.2.68 17.09 14.24 11.51 23.49-.57 1.43.98 1.08 1.69.45.86-.14 2.19 1.61 2.55 2.36v.31c-2.13 1.8-4.97 2.29-6.96 0-5.77 5.84-15.38 5.94-21.11 0-1.39 1.49-3.5 2.01-5.38 1.1-.22-.11-1.44-.96-1.51-1.09-.12-.22-.03-.23.08-.39.12-.18 1.87-1.93 2-1.99.3-.15 1.44 1.12 2.25.35.74-.7-.42-1.99-.75-2.76-3.71-8.73.76-18.38 9.66-21.28l2.29-.54h3.67ZM48.57 7.71c2.56 1.7 6.08 1.03 6.96-2.14.24-.85.64-1.95-.57-1.8-2.26.27-4.97 2.21-6.39 3.94m17.44 0c-1.6-2.19-4.45-3.8-7.19-3.98-.24 2.77 1.8 5.14 4.66 4.89.95-.08 1.67-.6 2.52-.92m-8.56 1.39s-.14.02-.22 0c-2.45 3.15-7.06 3.54-10.25 1.23-3.54 6.35.47 15.1 7.42 16.9 8.79 2.27 16.18-5.84 14.27-14.43-.19-.85-.55-1.65-.82-2.47-1.39.68-2.79 1.4-4.37 1.51-2.03.14-4.28-.78-5.72-2.19-.21-.2-.27-.52-.3-.54'/%3E%3Cpath fill='white' d='M60.81 22.24c-.37 4.18-6.51 4.23-6.88 0zM61.54 15.24c2.51-.29 3.03 3.62.56 3.93-2.92.37-3.03-3.65-.56-3.93M52.67 15.24c2-.27 3.07 2.45 1.34 3.64-2.7 1.86-4.54-3.2-1.34-3.64M25.02.07c6.22.57 11.67 6.02 13.05 11.96C41.1 25.02 26.93 36.26 15.34 28.8c-3.15-2.03-7.14-7.36-7.14-11.21v-2.68L.4 15.97 0 12.6l8.78-1.4c1.45-4.95 5.24-8.97 10.2-10.52.62-.19 1.78-.55 2.37-.61.91-.1 2.75-.09 3.67 0m7.03 7.8c.19-.16-1.28-1.53-1.46-1.68-5.96-4.96-14.91-2.62-17.81 4.43zM11.72 14.3c-.7 5.38 2.9 11.15 8.1 12.76 8.67 2.7 16.46-5.06 14.95-13.72-.09-.52-.41-2.16-.96-2.26z'/%3E%3Cpath fill='white' d='M21.65 21.63c.02 1.05.59 2.03 1.75 1.98 1.46-.06 1.49-1.98 1.7-1.98h2.37c.27 4.87-6.71 6.22-8.15 1.5-.07-.24-.37-1.5-.03-1.5h2.37ZM27.43 15.24c2.54-.35 3.1 3.57.71 3.94-2.86.44-3.17-3.6-.71-3.94M18.71 15.24c2.34-.27 3.05 3.58.56 3.94-2.82.41-3.22-3.63-.56-3.94'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23f)'/%3E%3C/svg%3E");
}

.orange-background-with-faces:not(:has(> .faces-pattern))::before { opacity: 0.1; }
.blue-background-with-faces:not(:has(> .faces-pattern))::before { opacity: 0.042; }

/* Content sits above the faces. The cover block's own background span is
   excluded so it stays underneath them. */
.orange-background-with-faces:not(:has(> .faces-pattern)) > *:not(.wp-block-cover__background),
.blue-background-with-faces:not(:has(> .faces-pattern)) > *:not(.wp-block-cover__background) {
  position: relative;
  z-index: 3;
}

/* ── Style guide page ─────────────────────────────────────────────────────
   The guide lives at /style-guide/ as ordinary core blocks. Only the labels
   that introduce each live block demo need styling; everything above them is
   covered by .kwcs-prose. Previously these rules sat in a per-block
   stylesheet, which stopped loading when the style-guide block was removed. */

.sg-live-label {
  padding: 64px 80px 0;
  border-top: 3px solid var(--border);
  margin-top: 8px;
}

.sg-live-label .section-title { margin-bottom: 10px; }

.sg-live-label .sg-note {
  font-size: 15.5px;
  color: var(--muted);
  font-weight: 500;
}

.sg-live-label code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  background: var(--navy-tint);
  padding: 3px 8px;
  border-radius: 6px;
}

@media (max-width: 1024px) {
  .sg-live-label { padding: 48px 32px 0; }
}

@media (max-width: 768px) {
  .sg-live-label { padding: 40px 20px 0; }
}

/* --- Contact page ------------------------------------------------------- */

/* The three ways to reach us. The icon is a background image rather than
   markup: it is decoration, and keeping it out of the block tree means an
   editor rewrites the card as ordinary heading-and-paragraph blocks without
   ever having to think about an SVG. */
.kwcs-contact-card {
  height: 100%;
  background: white;
  border: 2px solid var(--gold-pale);
  border-radius: 24px;
  padding: 74px 28px 28px;
  position: relative;
  box-shadow: 0 2px 0 rgba(30, 75, 143, 0.08);
}

.kwcs-contact-card::before {
  content: '';
  position: absolute;
  top: 26px;
  left: 28px;
  width: 44px;
  height: 44px;
  border-radius: 100px;
  background-color: var(--gold-tint);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 23px 23px;
}

.kwcs-contact-card--phone::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314376B' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h3l1.5 4-2 1.3a12 12 0 0 0 5.7 5.7l1.3-2 4 1.5v3a2 2 0 0 1-2.2 2A16.5 16.5 0 0 1 4.5 5.2 2 2 0 0 1 6.5 3z'/%3E%3C/svg%3E"); }
.kwcs-contact-card--email::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314376B' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='M3.5 7l8.5 6 8.5-6'/%3E%3C/svg%3E"); }
.kwcs-contact-card--visit::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314376B' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E"); }

:root .kwcs-contact-card > * { margin-block-start: 0; }

.kwcs-contact-card h3 {
  font-size: 20px;
  line-height: 1.2;
  color: var(--navy-deep);
  margin-bottom: 6px;
}

/* The number, address or address block — the thing someone came for. */
.kwcs-contact-card .kwcs-contact-value {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.45;
  color: var(--navy-deep);
  margin-bottom: 10px;
}

.kwcs-contact-card .kwcs-contact-value a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 2px solid rgba(30, 75, 143, 0.25);
}

.kwcs-contact-card .kwcs-contact-value a:hover {
  color: var(--gold-deep);
  border-bottom-color: var(--gold);
}

.kwcs-contact-card p:not(.kwcs-contact-value) {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* Map. The iframe is given its ratio by the wrapper so the band does not
   collapse or jump while Google's script boots. */
.kwcs-map {
  margin: 28px 0;
  border-radius: 24px;
  overflow: hidden;
  border: 2px solid var(--gold-pale);
  box-shadow: 0 18px 40px -28px rgba(20, 55, 107, 0.5);
  background: var(--gold-tint);
}

.kwcs-map iframe {
  display: block;
  width: 100%;
  height: 440px;
  border: 0;
}

.kwcs-map-section .wp-block-buttons { margin-top: 4px; }

/* Social row sits with the copy, not floating in its own band. */
.kwcs-page-section .wp-block-social-links { margin-top: 20px; }

@media (max-width: 768px) {
  .kwcs-contact-card { padding: 68px 22px 24px; }
  .kwcs-contact-card::before { top: 22px; left: 22px; }
  .kwcs-map iframe { height: 320px; }
}

/* ── Snapshot image styles ────────────────────────────────────────────────
   Two block styles for core/image that frame a photo the way the page hero
   frames its card: a tilted white mount with hand-drawn doodles tucked around
   the corners. Mirrored, so the photo leans away from the column it sits in —
   "right column" is the version that tilts clockwise. */

.wp-block-image.is-style-snapshot-left,
.wp-block-image.is-style-snapshot-right,
.wp-block-image.is-style-framed {
  position: relative;
  width: min(100%, 460px);
}

/* .wp-block-image is carried along to outweigh the .kwcs-prose image defaults
   further up this file. */
.wp-block-image.is-style-snapshot-left img,
.wp-block-image.is-style-snapshot-right img,
.wp-block-image.is-style-framed img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  /* Fixed 460x420 mount; anything wider or taller is centre-cropped into it. */
  aspect-ratio: 460 / 420;
  height: auto;
  object-fit: cover;
  border: 13px solid #fff;
  border-radius: 48px;
  box-shadow: 0 16px 34px rgba(30, 75, 143, 0.18);
}

/* Only the photo tilts. The doodles hang off the figure, which stays square,
   so they read as drawn onto the page rather than onto the photo. */
.wp-block-image.is-style-snapshot-left img { transform: rotate(-2deg); }
.wp-block-image.is-style-snapshot-right img { transform: rotate(2deg); }

/* The doodles are gold masks of the shared icons rather than recoloured
   copies, so they follow the palette token. Two pseudo-elements carry three
   doodles: the second one masks the burst and the heart together. */
.is-style-snapshot-left::before,
.is-style-snapshot-left::after,
.is-style-snapshot-right::before,
.is-style-snapshot-right::after {
  content: '';
  position: absolute;
  /* Reaches well past the frame so the doodles can sit outside its corners. */
  inset: -100px;
  pointer-events: none;
  background-color: var(--gold);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.is-style-snapshot-left::before,
.is-style-snapshot-right::before {
  -webkit-mask-image: url(../img/kwcs-icon-stars.svg);
  mask-image: url(../img/kwcs-icon-stars.svg);
  -webkit-mask-size: 64px auto;
  mask-size: 64px auto;
}

.is-style-snapshot-left::after,
.is-style-snapshot-right::after {
  -webkit-mask-image: url(../img/kwcs-icon-burst.svg), url(../img/kwcs-icon-heart.svg);
  mask-image: url(../img/kwcs-icon-burst.svg), url(../img/kwcs-icon-heart.svg);
  -webkit-mask-size: 58px auto, 76px auto;
  mask-size: 58px auto, 76px auto;
}

/* Stars and burst sit in the same top corners for both variants. */
.is-style-snapshot-left::before,
.is-style-snapshot-right::before {
  -webkit-mask-position: left 50px top 55px;
  mask-position: left 50px top 55px;
}

/* The heart is the one that moves: it hangs off whichever side of the frame
   faces away from the column's text. */
.is-style-snapshot-left::after {
  -webkit-mask-position: right 65px top 70px, left 25px bottom 140px;
  mask-position: right 65px top 70px, left 25px bottom 140px;
}

.is-style-snapshot-right::after {
  -webkit-mask-position: right 65px top 70px, right 25px bottom 140px;
  mask-position: right 65px top 70px, right 25px bottom 140px;
}

@media (max-width: 600px) {
  /* At phone width there is no room beside the frame for doodles. */
  .is-style-snapshot-left::before,
  .is-style-snapshot-left::after,
  .is-style-snapshot-right::before,
  .is-style-snapshot-right::after {
    display: none;
  }
}


/* ── Framed ───────────────────────────────────────────────────────────────
   The snapshot mount standing straight, with no doodles: for mid-page
   sections where the tilt would fight the copy beside it. The frame itself
   comes from the shared rules above. */

/* ── Heart accent ─────────────────────────────────────────────────────────
   A group block style that hangs a single gold heart in the band's top-left
   corner, drawn from the section rather than placed as a block, so it always
   lands in the same spot no matter what the section contains. */

.wp-block-group.is-style-heart-accent {
  position: relative;
  /* Half the band's content width. Override it on a section that constrains
     its content to something other than 1200px. */
  --kwcs-heart-inset: 600px;
}

.wp-block-group.is-style-heart-accent::before {
  content: '';
  position: absolute;
  top: 34px;
  /*
   * Pinned by its right edge to the gutter beside the constrained content, so
   * it tracks the text column as the window resizes instead of clinging to the
   * band's own corner. Anchoring the right edge lets the width shrink with the
   * gutter: when there is no gutter left the width computes to zero and the
   * heart simply stops being drawn, rather than sliding over the copy.
   */
  right: calc(50% + var(--kwcs-heart-inset) + 20px);
  width: min(116px, calc(50% - var(--kwcs-heart-inset) - 36px));
  aspect-ratio: 116 / 120;
  pointer-events: none;
  background-color: var(--gold);
  -webkit-mask: url(../img/kwcs-icon-heart.svg) no-repeat center / contain;
  mask: url(../img/kwcs-icon-heart.svg) no-repeat center / contain;
}

@media (max-width: 1100px) {
  /* Below this the gutter is gone and the heart would sit on the copy. */
  .wp-block-group.is-style-heart-accent::before { display: none; }
}