/* 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;
}

: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. */
.kwcs-subhead {
  font-size: 20px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--gold-deep);
  margin-top: -6px;
  /* 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. */
}

/* 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;
}

/* Prominent "here is the PDF" band the copy deck keeps asking for. */
.kwcs-doc-cta {
  background: var(--navy-tint);
  border: 2px dashed var(--navy-mid);
  border-radius: 24px;
  padding: 30px 34px;
  text-align: center;
}

.kwcs-doc-cta h3 {
  font-size: 26px;
  line-height: 1.1;
  color: var(--navy-deep);
  margin-bottom: 8px;
}

.kwcs-doc-cta p {
  font-size: 15.5px;
  color: var(--muted);
  margin-bottom: 18px;
}

/* 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;
  margin: 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;
}

/* 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;
}

/* 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;
}

/* 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: 26px 20px; }
  .kwcs-subhead { 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; }
}