/*
 * Key for Change — SEO architecture layer (task #12681).
 * Styles for the publishing skeleton: quick-exit, crisis banner, breadcrumbs,
 * questions block, answer-first lead, spoke card grid, related rail.
 * All colour/spacing via tokens.css (var(--k4c-*)). Loaded after pages.css.
 */

/* ── Quick-exit control (§7.2) — always reachable, above everything ─────────────
   Pinned to the VERTICAL CENTRE of the RIGHT edge as a slim vertical tab
   (#1001037). It used to sit top-right (top:0;right:0) which collided with the
   mobile/tablet hamburger toggle — same corner, and this tab's z-index (2000)
   painted over the burger so there was no clean click target for the menu
   (Mike's report). Mid-right-edge clears the burger entirely at every width and
   is the recognised "leave this site" side-tab idiom for DV-adjacent sites;
   `writing-mode: vertical-rl` keeps it a ~40px-wide strip so it barely intrudes
   on reading content. Left corners are rounded now it protrudes from the edge. */
.k4c-quick-exit {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 2000;
  display: inline-flex;
  align-items: center;
  gap: var(--k4c-space-2);
  writing-mode: vertical-rl;
  padding: 0.95rem 0.45rem;
  font-family: var(--k4c-font-heading);
  font-size: var(--k4c-fs-xs);
  font-weight: var(--k4c-fw-bold);
  letter-spacing: var(--k4c-tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--k4c-red);
  border-top-left-radius: var(--k4c-radius);
  border-bottom-left-radius: var(--k4c-radius);
  box-shadow: var(--k4c-shadow);
}
.k4c-quick-exit:hover,
.k4c-quick-exit:focus-visible { background: var(--k4c-red-dark); color: #fff; outline: none; }
.k4c-quick-exit:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,0.6), var(--k4c-shadow); }
.k4c-quick-exit__label { line-height: 1; }

/* ── "or press [Esc]" advertisement (#1000990, revised #1001037) ──────────────
   #1000990 added a horizontal "or press [Esc]" keycap hint INSIDE this tab. That
   inline hint is what stretched the tab to ~232px and drove the top-right burger
   collision, and it doesn't read cleanly in the new vertical strip — so it is no
   longer shown on the floating tab. Esc stays fully advertised where a keyboard
   user meets it: the footer Quick-exit pill and the mobile nav-sheet pill both
   carry the same `.k4c-key` cap, the tab's title/aria-label still name the Esc
   key, and js/quick-exit.js still bails on Escape. */
.k4c-quick-exit__hint { display: none; }
.k4c-quick-exit__or {
  font-weight: var(--k4c-fw-medium);
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.92;
}
.k4c-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2em;
  padding: 0.18em 0.42em 0.2em;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-bottom-width: 3px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-family: var(--k4c-font-heading);
  font-size: 0.92em;
  font-weight: var(--k4c-fw-bold);
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: none;
  transform: translateY(-1px);
  transition: transform 90ms ease-out, border-bottom-width 90ms ease-out, background-color 90ms ease-out;
}
/* Pressed look: cap drops onto its base, brightens. */
.k4c-quick-exit:hover .k4c-key,
.k4c-quick-exit:focus-visible .k4c-key,
.k4c-footer__exit:hover .k4c-key,
.k4c-footer__exit:focus-visible .k4c-key,
.kfc-nav__exit:hover .k4c-key,
.kfc-nav__exit:focus-visible .k4c-key {
  transform: translateY(1px);
  border-bottom-width: 1px;
  background: rgba(255, 255, 255, 0.3);
}
/* One-off attention tap on load: two presses, then rest. */
@keyframes k4c-key-tap {
  0%, 100%      { transform: translateY(-1px); border-bottom-width: 3px; background: rgba(255, 255, 255, 0.16); }
  18%, 32%      { transform: translateY(1px);  border-bottom-width: 1px; background: rgba(255, 255, 255, 0.34); }
  50%           { transform: translateY(-1px); border-bottom-width: 3px; background: rgba(255, 255, 255, 0.16); }
  68%, 82%      { transform: translateY(1px);  border-bottom-width: 1px; background: rgba(255, 255, 255, 0.34); }
}
@media (prefers-reduced-motion: no-preference) {
  .k4c-quick-exit .k4c-key { animation: k4c-key-tap 1.4s ease-in-out 1.2s 1 both; }
}
/* Touch / small screens: slightly trimmer vertical strip; keep the footer +
   sheet keycaps hidden where there's no keyboard. */
@media (hover: none), (max-width: 767px) {
  .k4c-quick-exit { gap: var(--k4c-space-1); padding: 0.85rem 0.4rem; }
  .k4c-footer__exit .k4c-key, .kfc-nav__exit .k4c-key { display: none; }
}
@media (max-width: 480px) { .k4c-quick-exit { padding: 0.75rem 0.4rem; } }

/* ── Crisis / support banner (§7.2) ── */
.k4c-crisis { background: var(--k4c-purple-dark); color: #fff; }
.k4c-crisis__inner { padding-block: var(--k4c-space-2); }
.k4c-crisis__text { margin: 0; font-size: var(--k4c-fs-sm); line-height: var(--k4c-lh-body); }
.k4c-crisis__link { color: #fff; text-decoration: underline; font-weight: var(--k4c-fw-semibold); }
.k4c-crisis__link:hover { color: var(--k4c-purple-100); }

/* ── Breadcrumbs (§5.3) ── */
.k4c-breadcrumbs { border-bottom: 1px solid var(--k4c-border); background: #fff; }
.k4c-breadcrumbs .k4c-container { padding-block: var(--k4c-space-2); }
.k4c-breadcrumbs__list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; font-size: var(--k4c-fs-xs); color: var(--k4c-grey-600); }
nav.k4c-breadcrumbs ol.k4c-breadcrumbs__list { margin: 0; } /* #1001402: beat Pico `nav ol:first-of-type` negative margin */
.k4c-breadcrumbs__item { display: inline-flex; align-items: center; padding: 0; margin: 0; } /* #1001402: Pico `nav li` padding (16px 8px) leaked in → 75px bar */
.k4c-breadcrumbs__item + .k4c-breadcrumbs__item::before { content: "/"; margin-right: 0.4rem; color: var(--k4c-grey-400); }
.k4c-breadcrumbs__item a { color: var(--k4c-purple); text-decoration: none; margin: 0; padding: 0; } /* #1001402: Pico `nav a` -8px margin/8px pad */
.k4c-breadcrumbs__item a:hover { text-decoration: underline; }
.k4c-breadcrumbs__item--current { color: var(--k4c-grey-800); font-weight: var(--k4c-fw-medium); }
/* #1001403: the bar now renders on every template, including the scoped designs
   (.k4c-about, .k4c-contact, .k4c-bp …) whose own `a`/`li` rules would otherwise
   recolour it — pin one look sitewide. */
nav.k4c-breadcrumbs li.k4c-breadcrumbs__item a { color: var(--k4c-purple); font-weight: inherit; text-decoration: none; }
nav.k4c-breadcrumbs li.k4c-breadcrumbs__item a:hover { text-decoration: underline; }
nav.k4c-breadcrumbs li.k4c-breadcrumbs__item { font-size: 0.875rem; line-height: 1.5; color: var(--k4c-grey-600); }
nav.k4c-breadcrumbs li.k4c-breadcrumbs__item--current { color: var(--k4c-grey-800); font-weight: var(--k4c-fw-medium); }
section.kfc-band:has(+ nav.k4c-breadcrumbs) { margin-bottom: 0; } /* Pico section margin left a 16px strip above the bar on about/coaching/programme */

/* ── Pillar body fills the container (#1000912) ──
   Base .k4c-prose caps at 46rem and is left-aligned (no auto margin), so on the
   1200px pillar container it used ~61% of the width and left a large right-hand
   gap. On pillar bodies we drop the cap so the content spans the full container
   as Mike asked. (Guide/content pages keep the readable .k4c-prose measure.)
   NB pillars now render through partials/guide-body.html.twig, so in practice
   this class only lands on the section-index hub intro — see .k4c-hub-intro. */
.k4c-prose.k4c-answer-first { max-width: none; }

/* ── Section-index hub intro (#1001362) ──
   The one-paragraph lede on /library/, /library/videos/, /glossary/, /tools/,
   /services/ etc. It used a full k4c-section (up to 96px top+bottom) AND
   max-width:none, so a single sentence stretched the full container width and
   floated in ~150px of empty band once the next section added its own top pad.
   Make it a compact lede that reads as a lead-in to the card grid below:
   readable measure, a modest gap under the breadcrumb, and a SINGLE clean gap
   to the following section instead of two stacked ones. */
.k4c-hub-intro { padding-block: clamp(1rem, 2vw, 1.5rem) 0; } /* #1001402 tightened from 3rem */
.k4c-hub-intro + .k4c-section { padding-top: clamp(1.25rem, 2.5vw, 1.75rem); } /* #1001401 3rem→2.25, #1001402 →1.75 */
.k4c-hub-intro .k4c-prose.k4c-answer-first.k4c-hub-intro__lede {
  max-width: 58rem;
  font-size: var(--k4c-fs-md);
  line-height: var(--k4c-lh-body);
  /* #1001402: reads as a lead-in, not a floating paragraph — brand rule on the left */
  border-left: 3px solid var(--k4c-purple);
  padding-left: var(--k4c-space-3);
}
.k4c-hub-intro__lede > :last-child { margin-bottom: 0; }

/* ── Answer-first lead (§5.5) ── */
.k4c-answer-first__lead {
  font-size: var(--k4c-fs-lg);
  line-height: var(--k4c-lh-body);
  color: var(--k4c-grey-800);
  font-weight: var(--k4c-fw-medium);
  border-left: 4px solid var(--k4c-purple);
  padding-left: var(--k4c-space-3);
  margin: 0;
}

/* ── "Questions this answers" block (§5.8) ── */
.k4c-qbox__intro { margin: 0 0 var(--k4c-space-2); font-size: var(--k4c-fs-md); }
.k4c-qlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .k4c-qlist { grid-template-columns: 1fr 1fr; column-gap: var(--k4c-space-5); } }
.k4c-qlist li { display: flex; align-items: flex-start; gap: 0.6rem; list-style: none; line-height: var(--k4c-lh-body); }
.k4c-qlist li::before { content: "?"; flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: calc((1em * var(--k4c-lh-body) - 1.15rem) / 2); font-size: 0.72rem; font-weight: 700; line-height: 1.15rem; text-align: center; color: #fff; background: var(--k4c-purple); border-radius: var(--k4c-radius-pill); }
.k4c-qlist a { color: var(--k4c-purple-dark); text-decoration: none; }
.k4c-qlist a:hover { text-decoration: underline; }

/* ── Spoke card grid (hub / pillar §5.1) ── */
.k4c-cards--auto { display: grid; gap: var(--k4c-space-4); grid-template-columns: 1fr; }
@media (min-width: 620px) { .k4c-cards--auto { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .k4c-cards--auto { grid-template-columns: 1fr 1fr 1fr; } }
.k4c-card--link { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--k4c-border); border-radius: var(--k4c-radius-lg); padding: var(--k4c-space-4); box-shadow: var(--k4c-shadow-sm); transition: box-shadow var(--k4c-ease), transform var(--k4c-ease); }
.k4c-card--link:hover { box-shadow: var(--k4c-shadow-lg); transform: translateY(-2px); }
.k4c-card--link .k4c-card__title { margin: 0 0 var(--k4c-space-1); color: var(--k4c-purple-dark); }
.k4c-card--link .k4c-card__text { flex: 1; margin: 0 0 var(--k4c-space-2); color: var(--k4c-grey-600); font-size: var(--k4c-fs-sm); }
.k4c-card--link .k4c-card__link { color: var(--k4c-purple); font-weight: var(--k4c-fw-semibold); font-size: var(--k4c-fs-sm); }

/* ── Related rail (§5.1) ── */
.k4c-related { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--k4c-space-2); }
.k4c-related li a { display: inline-block; padding: 0.4rem 0.9rem; background: var(--k4c-purple-50); color: var(--k4c-purple-dark); border-radius: var(--k4c-radius-pill); text-decoration: none; font-size: var(--k4c-fs-sm); }
.k4c-related li a:hover { background: var(--k4c-purple-100); }

/* ── Skeleton / staging note ── */
.k4c-skeleton-note { margin: 0; padding: var(--k4c-space-3); border: 1px dashed var(--k4c-purple-light); border-radius: var(--k4c-radius); background: var(--k4c-purple-50); color: var(--k4c-purple-dark); font-size: var(--k4c-fs-sm); }
.k4c-section--tight { padding-block: var(--k4c-space-5); }


/* ============================================================================
   Hub card icon chips (task #1001168) — enrich section-index / spoke cards.
   The chip inherits .k4c-card__icon basics from pages.css (3rem purple pill);
   these overrides give the linked hub cards a larger, softer square tile that
   fills brand purple on card hover/focus. Icons come from
   partials/icons.html.twig via front matter `icon: <name>`.
   ========================================================================== */
.k4c-card--link .k4c-card__icon {
  width: 3.25rem; height: 3.25rem; margin: 0 0 var(--k4c-space-3);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--k4c-purple-50), var(--k4c-purple-100));
  color: var(--k4c-purple);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--k4c-purple) 14%, transparent);
  transition: background var(--k4c-ease), color var(--k4c-ease), transform var(--k4c-ease), box-shadow var(--k4c-ease);
}
.k4c-card--link .k4c-card__icon svg { width: 1.65rem; height: 1.65rem; display: block; }
.k4c-card--link:hover .k4c-card__icon,
.k4c-card--link:focus-visible .k4c-card__icon {
  background: var(--k4c-purple);
  color: #fff;
  box-shadow: inset 0 0 0 1px transparent;
  transform: scale(1.07) rotate(-3deg);
}
.k4c-card--link:hover .k4c-card__title { color: var(--k4c-purple); }
.k4c-card--link:focus-visible { outline: 3px solid var(--k4c-purple-light); outline-offset: 2px; }
.k4c-card--link:focus-visible { text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  .k4c-card--link .k4c-card__icon { transition: none; }
  .k4c-card--link:hover .k4c-card__icon,
  .k4c-card--link:focus-visible .k4c-card__icon { transform: none; }
}

/* ==========================================================================
   WhatsApp consultation entry point (task #1001330)
   Prominent green card on /contact/ and funnel-cta bottom stage.
   Green (#25d366) used for instant WhatsApp recognition.
   ========================================================================== */
.k4c-wa {
  --wa: #25d366; --wa-deep: #128c7e;
  position: relative;
  display: flex; align-items: center; gap: 18px;
  padding: 20px 22px; border-radius: var(--k4c-radius-lg);
  background: linear-gradient(135deg, #2bd96e 0%, var(--wa) 55%, var(--wa-deep) 100%);
  color: #fff; text-decoration: none;
  box-shadow: 0 12px 30px -10px rgba(18, 140, 126, .55);
  border: 1px solid rgba(255, 255, 255, .25);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.k4c-wa::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, .5);
  animation: k4cWaPulse 2.6s cubic-bezier(.4, 0, .2, 1) infinite;
  pointer-events: none;
}
@keyframes k4cWaPulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
  70%  { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.k4c-wa:hover, .k4c-wa:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px -10px rgba(18, 140, 126, .6);
  filter: brightness(1.04);
  color: #fff; text-decoration: none;
}
.k4c-wa:focus-visible { outline: 3px solid var(--k4c-purple-light); outline-offset: 3px; }
.k4c-wa__ico {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255, 255, 255, .18);
}
.k4c-wa__ico svg { width: 28px; height: 28px; color: #fff; }
.k4c-wa__body { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; }
.k4c-wa__title { font-family: var(--k4c-font-heading); font-size: 1.2rem; font-weight: 600; line-height: 1.2; color: #fff; }
.k4c-wa__sub { font-size: .875rem; line-height: 1.45; color: rgba(255, 255, 255, .92); }
.k4c-wa__go { flex: none; display: inline-flex; opacity: .9; transition: transform .22s ease; }
.k4c-wa__go svg { width: 22px; height: 22px; color: #fff; }
.k4c-wa:hover .k4c-wa__go { transform: translate(2px, -2px); }

/* "or fill in the form" / "or book online" divider */
.k4c-wa-split {
  display: flex; align-items: center; gap: 14px;
  padding: var(--k4c-space-5) 0 var(--k4c-space-3);
  color: var(--k4c-grey-400); font-size: .875rem;
}
.k4c-wa-split::before, .k4c-wa-split::after {
  content: ""; flex: 1; height: 1px; background: var(--k4c-grey-200);
}

/* Inline WhatsApp link used in funnel-cta bottom stage */
.k4c-wa-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--k4c-grey-600); font-size: .9rem; text-decoration: none;
  margin-top: var(--k4c-space-4);
  transition: color .18s ease;
}
.k4c-wa-link:hover, .k4c-wa-link:focus-visible { color: #128c7e; text-decoration: underline; }
.k4c-wa-link svg { width: 18px; height: 18px; color: #25d366; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .k4c-wa { transition: none; }
  .k4c-wa::after { animation: none; }
  .k4c-wa:hover { transform: none; }
  .k4c-wa__go { transition: none; }
  .k4c-wa:hover .k4c-wa__go { transform: none; }
  .k4c-wa-link { transition: none; }
}