/* =============================================================================
   Herrons Modern Child — theme.css
   Version: 1.7.7
   Palette: coolors.co/001b2e-294c60-adb6c4-ffefd3-ffc49b
   ============================================================================= */

/* =============================================================================
   1. DESIGN TOKENS — Light Mode (default)
   ============================================================================= */

:root {
  /* ── Palette constants (reference only — not used directly in rules) ──────── */
  /* --navy:    #001B2E; */
  /* --steel:   #294C60; */
  /* --silver:  #ADB6C4; */
  /* --parchment: #FFEFD3; */
  /* --peach:   #FFC49B; */

  /* ── Radius ──────────────────────────────────────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 12px;
  /* --radius-lg: 16px; */ /* reserved for future use */

  /* ── Shadow ──────────────────────────────────────────────────────────────── */
  --shadow-sm: 0 4px 10px rgba(0,0,0,.06);
  --shadow-md: 0 10px 24px rgba(0,0,0,.10);
  /* --shadow-lg: 0 18px 40px rgba(0,0,0,.14); */ /* reserved */

  /* ── Motion ──────────────────────────────────────────────────────────────── */
  --easing: cubic-bezier(.22,.61,.36,1);
  --speed:  220ms;

  /* ── Semantic colour tokens — light mode ─────────────────────────────────── */
  --bg:        #FFEFD3;   /* parchment cream                                   */
  --surface:   #ffffff;
  --surface-2: #ADB6C4;   /* silver-blue: tinted sections, hero bg             */
  --text:      #001B2E;   /* navy: 15.50:1 on bg, 17.56:1 on white — AAA      */
  --muted:     #294C60;   /* steel: 8.07:1 on bg, 9.14:1 on white — AAA       */
  --border:    rgba(0,0,0,.12);

  --brand:       #001B2E; /* = --text in light mode; diverges in dark          */
  --brand-strong:#FFC49B; /* peach: warm highlight / dark-mode btn border      */
  --accent:      #294C60; /* steel: buttons, interactive elements              */
  --accent-ink:  #FFEFD3; /* parchment on steel: 8.07:1 — AAA                 */
  --link:        #294C60; /* steel: 8.07:1 on bg — AAA                        */
  --link-hover:  #001B2E; /* navy: deepens on hover                            */
  --focus-ring:  rgba(41,76,96,.4);
  --table-stripe:rgba(0,0,0,.035);
  --btn-text:    #FFEFD3; /* parchment                                         */

  --clay-900: #294C60;    /* steel: replaces warm clay — table th, outline btn */
  --mint-200: #dce8f0;    /* pale blue tint: tinted section bg                 */
  --teal-400: #ADB6C4;    /* silver: decorative / featured-table accent        */

  /* ── WP semantic preset mapping (TT5 block compatibility) ─────────────────── */
  --wp--preset--color--base:      var(--bg);
  --wp--preset--color--contrast:  var(--text);
  --wp--preset--color--primary:   var(--accent);
  --wp--preset--color--secondary: var(--brand-strong);
  --wp--preset--color--tertiary:  var(--surface-2);
  --wp--preset--color--link:      var(--link);
}


/* =============================================================================
   2. DARK MODE TOKENS
   All dark-mode overrides consolidated here — single @media block.
   ============================================================================= */

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg:        #001220;   /* navy deepened                                   */
    --surface:   #001B2E;   /* navy                                            */
    --surface-2: #294C60;   /* steel                                           */
    --text:      #FFEFD3;   /* parchment: 15.50:1 on surface — AAA            */
    --muted:     #ADB6C4;   /* silver: 8.58:1 on surface — AAA                */
    --border:    rgba(255,255,255,.14);

    --brand:       #001B2E;
    --brand-strong:#FFC49B;
    --accent:      #294C60;
    --accent-ink:  #FFEFD3;
    --link:        #FFC49B; /* peach: 11.39:1 on bg — AAA                     */
    --link-hover:  #FFEFD3; /* parchment: 15.50:1 on surface — AAA            */
    --focus-ring:  rgba(173,182,196,.5);
    --table-stripe:rgba(255,255,255,.05);
    --btn-text:    #FFEFD3; /* parchment: 15.50:1 on navy surface — AAA       */

    --clay-900: #ADB6C4;    /* silver: table th in dark — cream on this 5.5:1 */
    --mint-200: #0a1e2e;    /* deep navy tint for section bg                  */
    --teal-400: #ADB6C4;

    /* WP semantic preset remap for dark mode */
    --wp--preset--color--base:      var(--bg);
    --wp--preset--color--contrast:  var(--text);
    --wp--preset--color--primary:   var(--accent);
    --wp--preset--color--secondary: var(--brand-strong);
    --wp--preset--color--tertiary:  var(--surface-2);
    --wp--preset--color--link:      var(--link);
  }

  /* ── Buttons: dark-mode fill override ────────────────────────────────────── */
  .wp-element-button,
  .wp-block-button__link {
    background-color: var(--surface-2);
    color: var(--btn-text) !important;
    border: 1px solid var(--brand-strong);
  }
  .wp-element-button:hover,
  .wp-block-button__link:hover {
    background-color: var(--brand-strong);
    color: var(--brand) !important;
    border-color: var(--brand-strong);
  }

  /* ── Service cards: secondary-bg variant in dark ─────────────────────────── */
  .service-card.has-background.has-secondary-background-color {
    background-color: color-mix(in oklab, var(--wp--preset--color--secondary), white 12%);
    box-shadow: 0 1px 0 rgba(0,0,0,.2), 0 4px 16px rgba(0,0,0,.25);
  }
}


/* =============================================================================
   3. BASE / RESET
   ============================================================================= */

body,
.wp-site-blocks {
  background-color: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.65;
}

p,
.wp-block-paragraph {
  margin-block: 0 1.1em;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text);
  letter-spacing: .2px;
}

h1, .wp-block-post-title {
  font-size: clamp(2.25rem, 3vw, 2.75rem);
  line-height: 1.12;
}
h2 { font-size: 1.75rem; line-height: 1.15; }
h3 { font-size: 1.4rem;  line-height: 1.15; }
h4 { font-size: 1.2rem;  line-height: 1.18; }
h5 { font-size: 1.05rem; line-height: 1.2;  }
h6 { font-size: 0.95rem; line-height: 1.25; }

/* Headings that are links keep heading colour, no underline */
h1 a, h2 a, h3 a,
h4 a, h5 a, h6 a {
  color: inherit;
  text-decoration: none;
}

/* Steel links are AAA on both bg surfaces — underline retained for convention */
a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:visited {
  color: var(--link);
}
a:hover,
a:focus {
  color: var(--link-hover);
  text-decoration-thickness: 2px;
}

/* Strip underline where visual context already signals interactivity */
.wp-block-navigation a,
.wp-block-button a,
.wp-block-button__link,
.wp-element-button {
  text-decoration: none;
}

hr,
.wp-block-separator {
  border-color: var(--border);
}


/* =============================================================================
   4. HEADER
   Note: colour tokens auto-remap in dark mode via :root — no separate @media needed.
   ============================================================================= */

header.wp-block-template-part {
  color: var(--text);
  background-color: var(--bg);
}

.wp-block-site-title a {
  color: currentColor;
  text-decoration: none;
}


/* =============================================================================
   5. NAVIGATION
   ============================================================================= */

.wp-block-navigation a {
  color: var(--text);
}

.wp-block-navigation button,
.wp-block-navigation svg {
  color: currentColor;
  fill: currentColor;
}

/* Scope SVG reset to UI contexts only — avoids overriding decorative/illustration SVGs */
.wp-block-template-part svg,
.wp-block-navigation svg,
.wp-element-button svg,
.wp-block-button svg {
  color: currentColor;
  fill: currentColor;
}


/* =============================================================================
   6. BUTTONS
   Base selector narrowed to WP button classes to reduce !important pressure downstream.
   ============================================================================= */

.wp-element-button,
.wp-block-button__link {
  border-radius: 999px;
  padding: 0.7em 1.6em;
  font-weight: 600;
  border: 1px solid transparent;
  background-color: var(--accent);
  color: var(--accent-ink);
  outline: 3px solid transparent;
  outline-offset: 3px;
  transition:
    background-color var(--speed) var(--easing),
    box-shadow var(--speed) var(--easing),
    outline-color var(--speed) var(--easing);
}

.wp-element-button:hover,
.wp-block-button__link:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
  outline-color: var(--focus-ring);
}

/* Fill style */
.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button .wp-block-button__link:not(.has-background) {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: rgba(0,0,0,.08);
  box-shadow: var(--shadow-sm);
}
.wp-block-button.is-style-fill .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:not(.has-background):hover {
  box-shadow: var(--shadow-md);
}

/* Outline style */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--clay-900);
  border: 2px solid var(--clay-900);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--clay-900);
  color: var(--surface);
}

/* Secondary / ghost style */
.wp-block-button.is-secondary .wp-block-button__link {
  background: transparent;
  color: var(--clay-900);
  border-color: var(--accent);
}
.wp-block-button.is-secondary .wp-block-button__link:hover {
  background: var(--accent);
  color: var(--accent-ink);
}


/* =============================================================================
   7. FORMS
   ============================================================================= */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
  background: var(--surface);
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .7rem .8rem;
  transition:
    border-color var(--speed) var(--easing),
    box-shadow var(--speed) var(--easing);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--clay-900);
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: none;
}


/* =============================================================================
   8. TABLES
   ============================================================================= */

.wp-block-table.is-style-stripes table {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background: var(--table-stripe);
}
.wp-block-table td,
.wp-block-table th {
  border-color: var(--border);
  padding: .95rem .85rem;
}
.wp-block-table th {
  background: var(--clay-900);
  color: var(--surface);
  font-weight: 800;
}

/* Featured table component */
.featured-table-wrap {
  background: var(--wp--preset--color--secondary);
  border: 1px solid var(--wp--preset--color--tertiary);
  border-radius: 14px;
  padding: 16px;
  overflow: clip;
}
.featured-table-wrap table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.featured-table-wrap thead th {
  background: color-mix(in oklab, var(--wp--preset--color--secondary), black 6%);
  font-weight: 700;
  text-align: center;
  padding: 14px 12px;
  border-bottom: 1px solid var(--wp--preset--color--tertiary);
}
.featured-table-wrap thead th:first-child { border-top-left-radius: 10px; }
.featured-table-wrap thead th:last-child  { border-top-right-radius: 10px; }
.featured-table-wrap tbody td {
  padding: 14px 12px;
  text-align: center;
}
.featured-table-wrap tbody tr:nth-child(odd) td {
  background: color-mix(in oklab, var(--wp--preset--color--secondary), white 6%);
}
.featured-table-wrap tbody tr:hover td {
  background: color-mix(in oklab, var(--wp--preset--color--secondary), var(--teal-400) 10%);
}
.featured-table-wrap tbody tr:last-child td:first-child { border-bottom-left-radius: 10px; }
.featured-table-wrap tbody tr:last-child td:last-child  { border-bottom-right-radius: 10px; }


/* =============================================================================
   9. SERVICE CARDS
   ============================================================================= */

.wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.wp-block-columns > .wp-block-column {
  display: flex;
  flex: 1 1 0;
}

.wp-block-columns > .wp-block-column > .wp-block-group.service-card,
.service-grid > .wp-block-column > .wp-block-group.service-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--radius-md);
}

.service-grid > .wp-block-column {
  display: flex;
}

.service-card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
  /* Override has-global-padding constrained layout on the card group itself */
  max-width: 100% !important;
  padding-inline: 1.25rem !important;
  transition:
    box-shadow var(--speed) var(--easing),
    border-color var(--speed) var(--easing);
}
.service-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--clay-900);
}
.service-card h3 {
  text-align: center;
  margin-top: .4rem;
}
.service-card p {
  text-align: center;
  color: var(--muted);
}
.service-card .wp-block-image img {
  display: block;
  margin-inline: auto;
  border-radius: var(--radius-sm);
}
.service-card .wp-block-buttons {
  margin-top: auto;
}

.service-card.has-background.has-secondary-background-color {
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.05);
}


/* =============================================================================
   10. COVER BLOCK
   ============================================================================= */

.wp-block-cover {
  overflow: hidden;
  position: relative;
  border-radius: var(--radius-md);
}

/* WP uses opacity on the __background span, controlled by has-background-dim-N classes.
   dim-50 = 0.5 opacity. We don't override that — the markup has dim-50 which is fine.
   Instead we force the overlay colour to be dark so the dim actually darkens. */
.wp-block-cover .wp-block-cover__background:not([class*="has-background-gradient"]) {
  background-color: #000000 !important;
}

/* Force white on ALL text/headings inside cover.
   No inline color styles on these elements in the rendered HTML,
   but body { color: #001B2E } inherits unless we override here. */
.wp-block-cover,
.wp-block-cover *:not(.wp-block-button__link):not(.wp-element-button) {
  color: #ffffff !important;
}
.wp-block-cover h1,
.wp-block-cover h2,
.wp-block-cover h3,
.wp-block-cover p,
.wp-block-cover strong,
.wp-block-cover .wp-block-heading,
.wp-block-cover .wp-block-paragraph {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
/* Buttons keep their own colours */
.wp-block-cover .wp-block-button__link,
.wp-block-cover .wp-element-button {
  color: var(--accent-ink) !important;
  text-shadow: none;
}


/* =============================================================================
   11. LAYOUT & SPACING
   ============================================================================= */

/* Prevent double-padding on nested groups */
.wp-block-group:not(.wp-block-group .wp-block-group),
.wp-block-cover,
.wp-block-query {
  padding-block: 3rem;
}

.page-section {
  padding-block: 3rem;
}
.page-section + .page-section {
  margin-top: 0;
}

.section--tinted {
  background: var(--mint-200);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.has-background {
  color: var(--text);
}

/* Light text on dark preset backgrounds */
.wp-block-group.has-background.has-clay-900-background-color,
.wp-block-group.has-background.has-black-background-color {
  color: var(--surface);
}
.wp-block-group.has-background.has-clay-900-background-color .wp-block-site-title a,
.wp-block-group.has-background.has-black-background-color .wp-block-site-title a,
.wp-block-cover .wp-block-site-title a {
  color: var(--surface) !important;
}

/* Dark text on light preset backgrounds */
.wp-block-group.has-background.has-white-background-color,
.wp-block-group.has-background.has-secondary-background-color {
  color: var(--text);
}
.wp-block-group.has-background.has-white-background-color .wp-block-site-title a,
.wp-block-group.has-background.has-secondary-background-color .wp-block-site-title a {
  color: var(--text) !important;
}


/* =============================================================================
   12. META TEXT
   ============================================================================= */

.entry-meta,
.wp-block-post-date,
.wp-block-post-terms,
.wp-block-query-title,
.wp-block-query-pagination {
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.entry-meta {
  color: var(--muted);
}
.entry-meta a {
  color: var(--link);
}
.entry-meta a:hover,
.entry-meta a:focus {
  color: var(--link-hover);
}

/* Force meta blocks to muted/link tokens regardless of TT5 preset class overrides */
:where(
  .wp-block-post-date,
  .wp-block-post-terms,
  .wp-block-post-author,
  .wp-block-post-author-name,
  .wp-block-post-comments-count,
  .wp-block-post-time-to-read,
  .wp-block-query-pagination,
  .wp-block-post-navigation-link
) {
  color: var(--muted) !important;
}

:where(
  .wp-block-post-date,
  .wp-block-post-terms,
  .wp-block-post-author,
  .wp-block-post-author-name,
  .wp-block-post-comments-count,
  .wp-block-post-time-to-read,
  .wp-block-query-pagination,
  .wp-block-post-navigation-link
) a {
  color: var(--link) !important;
}

:where(
  .wp-block-post-date,
  .wp-block-post-terms,
  .wp-block-post-author,
  .wp-block-post-author-name,
  .wp-block-post-comments-count,
  .wp-block-post-time-to-read,
  .wp-block-query-pagination,
  .wp-block-post-navigation-link
) a:hover,
:where(
  .wp-block-post-date,
  .wp-block-post-terms,
  .wp-block-post-author,
  .wp-block-post-author-name,
  .wp-block-post-comments-count,
  .wp-block-post-time-to-read,
  .wp-block-query-pagination,
  .wp-block-post-navigation-link
) a:focus {
  color: var(--link-hover) !important;
}


/* =============================================================================
   13. FOOTER
   ============================================================================= */

footer.wp-block-template-part,
.wp-site-footer,
.wp-block-site-footer {
  background: transparent;
  color: var(--text);
}

footer.wp-block-template-part a,
.wp-site-footer a,
.wp-block-site-footer a {
  color: var(--link);
}

footer.wp-block-template-part a:hover,
footer.wp-block-template-part a:focus,
.wp-site-footer a:hover,
.wp-site-footer a:focus,
.wp-block-site-footer a:hover,
.wp-block-site-footer a:focus {
  color: var(--link-hover);
}

/* has-contrast-color: use text token */
footer.wp-block-template-part .has-contrast-color,
.wp-site-footer .has-contrast-color,
.wp-block-site-footer .has-contrast-color {
  color: var(--text);
}
footer.wp-block-template-part .has-contrast-color a,
.wp-site-footer .has-contrast-color a,
.wp-block-site-footer .has-contrast-color a {
  color: inherit;
}

/* Neutralize footer preset background classes */
footer.wp-block-template-part .has-contrast-background-color,
footer.wp-block-template-part .has-base-background-color,
footer.wp-block-template-part .has-background-background-color {
  background-color: transparent;
}

footer.wp-block-template-part .wp-block-navigation button {
  color: currentColor;
  fill: currentColor;
}


/* =============================================================================
   14. HOMEPAGE COMPONENTS
   ============================================================================= */

/* ── Lede / mission statement ─────────────────────────────────────────────── */
.lede {
  text-align: center;
  max-width: 700px;
  margin-inline: auto;
}
.lede p {
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--text);
}

/* ── Our Approach section ─────────────────────────────────────────────────── */
/* Silver (#ADB6C4) as background failed contrast: parchment on silver = 1.81:1 FAIL.
   Switched to mint-200 (#dce8f0): navy = 14.08:1 AAA, steel = 7.33:1 AAA. */
.section--approach {
  background: var(--mint-200) !important;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
/* has-background fires on this group — lock text explicitly */
.section--approach,
.section--approach h2,
.section--approach h3,
.section--approach p,
.section--approach strong {
  color: var(--text) !important;
}

/* ── Peach callout band ───────────────────────────────────────────────────── */
.band--peach {
  background: #FFC49B;
  color: #001B2E;
  border-top: 1px solid rgba(0,0,0,.08);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.band--peach h2,
.band--peach h3,
.band--peach p {
  color: #001B2E;
}
.band--peach .wp-element-button,
.band--peach .wp-block-button__link {
  background-color: #001B2E;
  color: #FFEFD3;
}
.band--peach .wp-element-button:hover,
.band--peach .wp-block-button__link:hover {
  background-color: #294C60;
  color: #FFEFD3;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* ── Navy CTA band ────────────────────────────────────────────────────────── */
/* band--navy has no has-background class (background comes from our CSS, not a preset),
   so WP's has-background colour rule doesn't fire. body colour (#001B2E) would inherit
   giving navy-on-navy. Lock parchment on the element itself to cover all descendants. */
.band--navy {
  background: #001B2E;
  color: #FFEFD3 !important;
  border-top: 1px solid rgba(255,255,255,.08);
}
.band--navy *:not(.wp-block-button__link):not(.wp-element-button) {
  color: #FFEFD3 !important;
}
.band--navy h2,
.band--navy h3,
.band--navy p,
.band--navy strong {
  color: #FFEFD3 !important;
}
.band--navy a:where(:not(.wp-element-button)) {
  color: #FFC49B !important;
}
.band--navy a:where(:not(.wp-element-button)):hover {
  color: #FFEFD3 !important;
}
.band--navy .wp-element-button,
.band--navy .wp-block-button__link {
  background-color: #FFC49B !important;
  color: #001B2E !important;
  border-color: transparent;
}
.band--navy .wp-element-button:hover,
.band--navy .wp-block-button__link:hover {
  background-color: #FFEFD3 !important;
  color: #001B2E !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
}
/* WP sometimes appends --2, --3 etc. to deduplicate outline style classes */
.band--navy .wp-block-button[class*="is-style-outline"] .wp-block-button__link {
  background: transparent !important;
  color: #FFEFD3 !important;
  border: 2px solid #FFEFD3 !important;
}
.band--navy .wp-block-button[class*="is-style-outline"] .wp-block-button__link:hover {
  background: #FFEFD3 !important;
  color: #001B2E !important;
}

/* ── How-it-works steps ───────────────────────────────────────────────────── */
/* NOTE: className="how-it-works" is on wp:columns, so .how-it-works IS .wp-block-columns.
   TT5 injects: .wp-block-columns { align-items: normal !important } via inline CSS.
   We must match that specificity to override. */
.wp-block-columns.how-it-works {
  counter-reset: step;
  align-items: stretch !important; /* beats TT5's align-items: normal !important */
  gap: 1.5rem !important;
  flex-wrap: nowrap !important;
}
.wp-block-columns.how-it-works > .wp-block-column {
  counter-increment: step;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 2rem 1.5rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  flex: 1 1 0 !important;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.wp-block-columns.how-it-works > .wp-block-column::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 1rem;
  font-weight: 700;
  margin-block-end: 1rem;
}
.wp-block-columns.how-it-works > .wp-block-column h3 {
  margin-top: 0;
  font-size: 1.1rem;
}
.wp-block-columns.how-it-works > .wp-block-column p {
  color: var(--muted);
  font-size: .95rem;
}

/* ── Why-choose-us 2×2 card grid ─────────────────────────────────────────── */
/* band--peach colour lock — keeps heading/text navy on the peach background */
.band--peach,
.band--peach h2,
.band--peach h3,
.band--peach h4,
.band--peach p,
.band--peach strong,
.band--peach .wp-block-heading,
.band--peach .wp-block-paragraph {
  color: #001B2E !important;
}
.band--peach a {
  color: #294C60 !important;
  text-decoration: underline;
}
.band--peach a:hover {
  color: #001B2E !important;
}


/* Implemented as wp:columns (isStackedOnMobile) with 2 cols, each containing
   a wp:group.why-card. This avoids all wp:list cascade and layout constraint fights. */
.wp-block-columns.why-grid {
  gap: 1.25rem !important;
  align-items: stretch !important;
  flex-wrap: wrap !important;        /* always wrap so we get 2 rows of 2 */
  max-width: 800px;
  margin-inline: auto;
}
.wp-block-columns.why-grid > .wp-block-column {
  flex: 1 1 calc(50% - 0.625rem) !important;
  min-width: min(100%, 300px);
  display: flex;
}
.why-card {
  background: var(--surface) !important;
  border: 1px solid rgba(0,0,0,.1);
  border-left: 4px solid #294C60;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1.4rem 1.5rem !important;
  box-shadow: var(--shadow-sm);
  flex: 1;                           /* fill the column height */
  /* Colour: lock to navy regardless of any cascade from band--peach or has-global-padding */
  color: #001B2E !important;
}
.why-card h3,
.why-card p,
.why-card strong {
  color: #001B2E !important;
}
.why-card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: .4rem;
}
.why-card p {
  font-size: .95rem;
  line-height: 1.55;
  margin: 0;
}
.why-card a {
  color: #294C60 !important;
  text-decoration: underline;
}
.why-card a:hover {
  color: #001B2E !important;
}

/* ── Blog query: 3-column card grid ──────────────────────────────────────── */
.blog-recent .wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  list-style: none;
  padding: 0;
}
.blog-recent .wp-block-post-template > li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  min-height: 360px; /* equalise card height regardless of excerpt/title length */
  transition: box-shadow var(--speed) var(--easing),
              border-color var(--speed) var(--easing);
}
.blog-recent .wp-block-post-template > li:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--clay-900);
}
/* Force 1:1 image slot — applies even when featured image is missing */
.blog-recent .wp-block-post-featured-image,
.blog-recent .wp-block-post-featured-image a {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--mint-200); /* placeholder bg for posts without a featured image */
}
.blog-recent .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-recent .blog-card__body {
  padding: 1.2rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .5rem;
}
.blog-recent .wp-block-post-title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}
.blog-recent .wp-block-post-title a {
  color: var(--text);
  text-decoration: none;
}
.blog-recent .wp-block-post-title a:hover {
  color: var(--link);
  text-decoration: underline;
}
.blog-recent .wp-block-post-date {
  font-size: .8rem;
  color: var(--muted);
  margin: 0;
}
.blog-recent .wp-block-post-excerpt {
  font-size: .9rem;
  color: var(--muted);
  flex: 1;
  margin: 0;
}
.blog-recent .wp-block-post-excerpt .wp-block-post-excerpt__more-link {
  display: none;
}

@media (max-width: 782px) {
  .blog-recent .wp-block-post-template {
    grid-template-columns: 1fr;
  }
  .wp-block-columns.how-it-works {
    flex-wrap: wrap !important;
  }
  .wp-block-columns.how-it-works > .wp-block-column {
    flex-basis: 100% !important;
  }
  /* why-grid: stack to 1 column on mobile */
  .wp-block-columns.why-grid > .wp-block-column {
    flex-basis: 100% !important;
  }
}


/* =============================================================================
   15. RESPONSIVE
   ============================================================================= */

@media (max-width: 782px) {
  .wp-block-buttons {
    gap: 12px;
  }
  .service-card {
    margin-block: 8px;
  }
  .wp-block-columns > .wp-block-column {
    flex-basis: 100%;
  }
}