/**
 * FUSION block style variations.
 *
 * The appearance behind the toolbar choices registered in inc/block-styles.php.
 * Each rule targets the `is-style-*` class WordPress adds when an editor picks
 * the variation, using the same palette tokens as the rest of the theme so a
 * colour change in theme.json flows through here too.
 *
 * These are self-contained — they do not depend on the `.ds-c-*` classes the
 * patterns hand-author — so they work on a bare core block dropped anywhere.
 * Colours come from the FUSION palette; --color-* is the Design System /
 * FUSION-alias namespace defined in theme.css.
 *
 * The core/button variations are the exception: they live in buttons.css so
 * they can reuse the Design System button token system alongside the pattern
 * buttons, rather than restyling the button from scratch here.
 */

/* ------------------------------------------------------------- core/group */

/* Card — white surface, hairline border, soft shadow. */
.wp-block-group.is-style-fusion-card {
  padding: 1.5rem;
  background-color: var(--color-white, #ffffff);
  border: 1px solid var(--color-fusion-gray-line, #e6e6e6);
  border-radius: var(--radius-medium, 0.5rem);
  box-shadow: 0 1px 2px rgba(7, 18, 77, 0.06), 0 4px 12px rgba(7, 18, 77, 0.06);
}

/* Card on dark — same shape, tuned for placement on a dark band. */
.wp-block-group.is-style-fusion-card-dark {
  padding: 1.5rem;
  background-color: color-mix(in srgb, #ffffff 8%, transparent);
  border: 1px solid color-mix(in srgb, #ffffff 16%, transparent);
  border-radius: var(--radius-medium, 0.5rem);
  color: var(--color-white, #ffffff);
}

.wp-block-group.is-style-fusion-card-dark :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-white, #ffffff);
}

.wp-block-group.is-style-fusion-card-dark p {
  color: color-mix(in srgb, #ffffff 82%, transparent);
}

/* Card flat — card surface without the shadow, for dense grids. */
.wp-block-group.is-style-fusion-card-flat {
  padding: 1.5rem;
  background-color: var(--color-white, #ffffff);
  border: 1px solid var(--color-fusion-gray-line, #e6e6e6);
  border-radius: var(--radius-medium, 0.5rem);
}

/* Panel — tinted surface, no shadow, for grouped supporting content. */
.wp-block-group.is-style-fusion-panel {
  padding: 1.5rem;
  background-color: var(--color-fusion-blue-surface, #e8f1fb);
  border-radius: var(--radius-medium, 0.5rem);
}

/*
 * Band — full-width primary section. Pulls text to light on the dark ground.
 * Only affects a group the editor made full-width; otherwise it just tints.
 */
.wp-block-group.is-style-fusion-band {
  padding-block: 3rem;
  color: var(--color-white, #ffffff);
  background-color: var(--color-primary, #0d2499);
}

.wp-block-group.is-style-fusion-band :is(h1, h2, h3, h4, h5, h6),
.wp-block-group.is-style-fusion-band p {
  color: var(--color-white, #ffffff);
}

.wp-block-group.is-style-fusion-band a:not(.wp-element-button) {
  color: var(--color-white, #ffffff);
  text-decoration: underline;
}

/* ------------------------------------------------------------- core/quote */

/* Accent — swap the default primary rule for the accent yellow. */
.wp-block-quote.is-style-fusion-accent {
  border-left: 4px solid var(--color-accent-primary, #ffe400);
  padding-left: 1.5rem;
}

/* ----------------------------------------------------------- core/heading */
/* Article headings, selectable from the Styles panel (no manual classes). They
   carry the platform-article sizes + deep-navy colour so a page built from plain
   core headings matches the reference; the Typography size control can still
   override the size per heading. */
.wp-block-heading.is-style-fusion-title {
  font-size: clamp(1.75rem, 2.8vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-primary-darkest, #07124d);
}

.wp-block-heading.is-style-fusion-section {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-primary-darkest, #07124d);
}

/* --------------------------------------------------------- core/separator */

/* Thick — heavier primary rule for deliberate section breaks. */
.wp-block-separator.is-style-fusion-thick {
  height: 4px;
  border: 0;
  max-width: 6rem;
  background-color: var(--color-primary, #0d2499);
  opacity: 1;
}

.wp-block-separator.is-style-fusion-thick.alignwide,
.wp-block-separator.is-style-fusion-thick.alignfull {
  max-width: none;
}

/* Rule — thin hairline that spans the full content width (the section divider
   from the platform pages). Core defaults a separator to a short centred line;
   this overrides the width and colour to match the reference. */
/* Base separator: full content width + thin hairline (the platform-article
   divider), instead of core's short centred 100px line. The :not()s mirror
   core's own rule (.wp-block-separator:not(.is-style-wide):not(.is-style-dots)
   {width:100px}) and add one more, so this clears its (0,3,0) specificity. The
   short "FUSION thick" style opts out and keeps its own width. */
.wp-block-separator:not(.is-style-wide):not(.is-style-dots):not(.is-style-fusion-thick) {
  width: 100%;
  max-width: none;
  height: 0;
  border: 0;
  border-top: 1px solid var(--color-gray-lighter, #d9d9d9);
  opacity: 1;
}

/* ---------------------------------------------------------- Accessibility */

@media (prefers-reduced-motion: reduce) {
  .wp-block-button.is-style-fusion-ghost > .wp-block-button__link,
  .wp-block-button.is-style-fusion-on-dark > .wp-block-button__link,
  .wp-block-button.is-style-fusion-accent > .wp-block-button__link {
    transition: none;
  }
}

@media (forced-colors: active) {
  .wp-block-group.is-style-fusion-card,
  .wp-block-group.is-style-fusion-panel {
    border: 1px solid CanvasText;
  }
}

/* ----------------------------------------------- core/group — section bands */

/*
 * Bands are full-width groups (align:full) with a constrained inner layout, so
 * their background spans edge-to-edge while content centres at contentSize. The
 * style supplies the block padding (band height) and side padding for narrow
 * screens — no wrapper class needed.
 */
.wp-block-group.is-style-fusion-band-plain,
.wp-block-group.is-style-fusion-band-gray,
.wp-block-group.is-style-fusion-band-dark {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  padding-inline: var(--fusion-site-padding-x, 1.5rem);
}

@media (min-width: 768px) {
  .wp-block-group.is-style-fusion-band-plain,
  .wp-block-group.is-style-fusion-band-gray,
  .wp-block-group.is-style-fusion-band-dark {
    padding-inline: var(--fusion-site-padding-x-md, 3rem);
  }
}

.wp-block-group.is-style-fusion-band-gray {
  background: color-mix(in srgb, var(--color-primary-lightest, #e8f1fb) 30%, #f6f8fb);
}

.wp-block-group.is-style-fusion-band-dark {
  background: linear-gradient(
    150deg,
    var(--color-primary-darkest, #07124a) 0%,
    var(--color-primary-darker, #0d2499) 100%
  );
  color: var(--color-white, #ffffff);
}

.wp-block-group.is-style-fusion-band-dark :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-white, #ffffff);
}

.wp-block-group.is-style-fusion-band-dark p {
  color: color-mix(in srgb, #ffffff 85%, transparent);
}

.wp-block-group.is-style-fusion-band-dark a:not(.wp-element-button) {
  color: var(--color-primary-light, #4f95c7);
}

/* ------------------------------------------------- core/group — stat tile */
.wp-block-group.is-style-fusion-stat {
  text-align: center;
}

.wp-block-group.is-style-fusion-stat > .wp-block-heading {
  margin: 0;
  font-family: var(--global__font-family, 'Open Sans', system-ui, sans-serif);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary, #005ea2);
}

.wp-block-group.is-style-fusion-stat > p {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  color: var(--color-gray-dark, #5a5a5a);
}

.is-style-fusion-band-dark .is-style-fusion-stat > .wp-block-heading {
  color: var(--color-primary-light, #4f95c7);
}

.is-style-fusion-band-dark .is-style-fusion-stat > p {
  color: color-mix(in srgb, #ffffff 80%, transparent);
}

/* --------------------------------------------------------- core/paragraph */
p.is-style-fusion-eyebrow {
  margin: 0 0 0.5rem;
  font-family: var(--global__font-family, 'Open Sans', system-ui, sans-serif);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary, #005ea2);
}

.is-style-fusion-band-dark p.is-style-fusion-eyebrow {
  color: var(--color-primary-light, #4f95c7);
}

p.is-style-fusion-lede {
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  line-height: 1.5;
  color: var(--color-gray-dark, #5a5a5a);
}

.is-style-fusion-band-dark p.is-style-fusion-lede {
  color: color-mix(in srgb, #ffffff 85%, transparent);
}

/* Lead paragraph: article-body size, and any bold text (the leading label such
   as "What it is:") turns deep navy — so you just bold the label, no colour
   picking. Matches .pa-article__lead / .pa-article__lead-label. */
p.is-style-fusion-lead {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--color-gray-darkest, #333333);
}

p.is-style-fusion-lead :is(strong, b) {
  color: var(--color-primary-darkest, #07124d);
  font-weight: 700;
}

p.is-style-fusion-badge {
  display: inline-block;
  margin: 0;
  padding: 0.125rem 0.5rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-primary, #005ea2);
  background: color-mix(in srgb, var(--color-primary-lightest, #e8f1fb) 75%, #ffffff);
}

/* -------------------------------------------------------------- core/table */
/*
 * Matches the platform-article `.pa-table` look so an editable core/table reads
 * identically to the data-driven platform pages: a rounded, softly shadowed
 * bordered frame (figure = the frame, clips corners via overflow), a lavender
 * uppercase header, a flat light-gray first column that stands in for a row
 * header (whether the column's cells are <th> or <td>), soft blue-gray divider
 * lines with core's default all-sides cell border zeroed out, and a
 * caption rendered as a top bar. The figure is a flex column so the figcaption —
 * which core/table always outputs after the table — can be lifted above it with
 * `order`. Colours are the prototype's literal DS values (1:1 with pa-table).
 */
.wp-block-table.is-style-fusion-table {
  display: flex;
  flex-direction: column;
  overflow: auto;
  background: var(--color-white, #ffffff);
  border: 1px solid #b4b9d0;
  border-radius: 12px;
  box-shadow: 0 1px 2px 0 rgba(7, 18, 77, 0.05);
}

.wp-block-table.is-style-fusion-table table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white, #ffffff);
  font-size: 0.9375rem;
}

.wp-block-table.is-style-fusion-table th,
.wp-block-table.is-style-fusion-table td {
  padding: 1rem;
  text-align: left;
  line-height: 1.5;
  vertical-align: top;
  /* Core's block-library CSS puts `border: 1px solid` (currentColor) on all four
     sides of every cell. Zero it so only the soft bottom divider shows — otherwise
     the dark top/left/right edges read as a grid overlay on top of the frame. */
  border: 0;
  border-bottom: 1px solid rgba(217, 217, 217, 0.85);
}

.wp-block-table.is-style-fusion-table thead th {
  padding: 0.875rem 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #07124d;
  background: #eef0f8;
  border-bottom: 1px solid #b2b7cf;
}

/* Flat gray first column standing in for a row header. Core/table emits the
   first column as either <th> (row-header cells, as the platform tables use) or
   <td>, so match both — keying only on td:first-child left real tables gray-less. */
.wp-block-table.is-style-fusion-table tbody th,
.wp-block-table.is-style-fusion-table tbody td:first-child {
  width: 28%;
  font-weight: 700;
  text-align: center;
  font-size: 0.9375rem;
  color: #07124d;
  background: #f7f7f7;
}

.wp-block-table.is-style-fusion-table tbody td {
  color: #262626;
}

.wp-block-table.is-style-fusion-table tbody tr:last-child th,
.wp-block-table.is-style-fusion-table tbody tr:last-child td {
  border-bottom: none;
}

.wp-block-table.is-style-fusion-table figcaption {
  order: -1;
  margin: 0;
  caption-side: top;
  padding: 0.875rem 1rem;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: none;
  color: #09196b;
  background: #f2f3fa;
  border-bottom: 1px solid #b8bcd1;
}

/* =====================================================================
 * Breadcrumb bar — appearance variants
 *
 * Single source of truth for how a breadcrumb strip is painted. The three
 * looks (solid / gradient / light) are registered as core/group block styles
 * in inc/block-styles.php, so an editor can pick them, and the theme's own
 * breadcrumb renderers apply the same is-style-* class.
 *
 * This file owns COLOR + SURFACE only. Per-page layout (full-bleed, flush-to-
 * hero margins, section-nav collapse, inner padding) stays with each page's
 * CSS and keys on .kc-breadcrumb-bar / page-wrapper classes.
 *
 * Every themeable value is a --_bc-* custom property, so a variant is just a
 * token remap — no re-declaring the child-element rules.
 * ===================================================================== */
.kc-breadcrumb-bar {
  /* Defaults = solid, so a bare bar is never unpainted. */
  --_bc-bg: var(--fusion-blue-deep, #09196b);
  --_bc-border: 0;
  --_bc-shadow: none;
  --_bc-link: rgba(255, 255, 255, 0.7);
  --_bc-link-hover: #ffffff;
  --_bc-link-hover-decoration: none;
  --_bc-sep: rgba(255, 255, 255, 0.5);
  --_bc-current: #ffffff;

  background: var(--_bc-bg);
  border-bottom: var(--_bc-border);
  box-shadow: var(--_bc-shadow);
}

.kc-breadcrumb-bar .kc-breadcrumb-link,
.kc-breadcrumb-bar .kc-breadcrumb-link:visited {
  color: var(--_bc-link);
  text-decoration: none;
}

.kc-breadcrumb-bar .kc-breadcrumb-link:hover {
  color: var(--_bc-link-hover);
  text-decoration: var(--_bc-link-hover-decoration);
  text-underline-offset: 0.15em;
}

.kc-breadcrumb-bar .kc-breadcrumb-sep {
  color: var(--_bc-sep);
}

.kc-breadcrumb-bar .kc-breadcrumb-current {
  color: var(--_bc-current);
  font-weight: 700;
}

/* Solid — deep FUSION blue. Shared Services and other interior pages. */
.kc-breadcrumb-bar.is-style-fusion-breadcrumb-solid {
  --_bc-bg: var(--fusion-blue-deep, #09196b);
  --_bc-border: 0;
}

/* Gradient — dark. Explore and platform-article "initiatives" headers. */
.kc-breadcrumb-bar.is-style-fusion-breadcrumb-gradient {
  --_bc-bg: linear-gradient(
    180deg,
    var(--color-primary-darkest, #07124d) 0%,
    color-mix(in srgb, var(--color-primary-darker, #09196b) 90%, var(--color-primary, #0d2499)) 100%
  );
  --_bc-border: 1px solid color-mix(in srgb, #ffffff 10%, transparent);
}

/* Light — white header carrying into a light hero. Fusion Toolkit, Landing. */
.kc-breadcrumb-bar.is-style-fusion-breadcrumb-light {
  --_bc-bg: linear-gradient(
    180deg,
    var(--color-white) 0%,
    color-mix(in srgb, var(--color-primary-lightest) 88%, var(--color-white)) 100%
  );
  --_bc-border: 1px solid color-mix(in srgb, var(--color-primary-light) 22%, var(--color-gray-lighter));
  --_bc-shadow: 0 1px 0 color-mix(in srgb, var(--color-white) 80%, transparent);
  --_bc-link: color-mix(in srgb, var(--color-primary-darker) 78%, var(--color-gray-dark));
  --_bc-link-hover: var(--color-primary-darkest);
  --_bc-link-hover-decoration: underline;
  --_bc-sep: color-mix(in srgb, var(--color-primary-light) 70%, var(--color-gray-light));
  --_bc-current: var(--color-primary-darkest);
}