/* =============================================================================
   Fairly Social — theme.css
   Version: 1.2.1
   Child of Twenty Twenty-Five (TT5)
   Palette: cream / moss / sage / rose / terra / charcoal
   Fonts: Nunito (display) + Plus Jakarta Sans (body)
   ============================================================================= */


/* =============================================================================
   1. DESIGN TOKENS
   ============================================================================= */

:root {
  /* ── Palette ──────────────────────────────────────────────────────────────── */
  --cream:        #FAF6EE;
  --moss-light:   #E8EFE3;
  --sage:         #7A9E7E;
  --sage-dark:    #4D7152;
  --rose:         #D4908A;
  --rose-dark:    #A85F59;
  --terra:        #C4724A;
  --terra-light:  #F0DDD4;
  --charcoal:     #2E2B26;
  --charcoal-mid: #5C5850;
  --charcoal-low: #8C8880;
  --white:        #FFFFFF;

  /* ── Semantic tokens ──────────────────────────────────────────────────────── */
  --bg:       var(--cream);
  --surface:  var(--white);
  --text:     var(--charcoal);
  --muted:    var(--charcoal-mid);
  --subtle:   var(--charcoal-low);
  --accent:   var(--sage);
  --accent-dark: var(--sage-dark);
  --highlight:   var(--terra);
  --highlight-bg:var(--terra-light);
  --link:        var(--sage-dark);
  --link-hover:  var(--charcoal);
  --border:      rgba(46, 43, 38, 0.1);
  --border-md:   rgba(46, 43, 38, 0.18);

  /* ── WP preset mapping ────────────────────────────────────────────────────── */
  /* Map contrast/base correctly. Do NOT map primary to sage — TT5 uses
     primary as its fallback heading/text color in global-styles-inline-css. */
  --wp--preset--color--base:      var(--cream);
  --wp--preset--color--contrast:  var(--charcoal);
  --wp--preset--color--primary:   var(--charcoal);   /* was sage — caused heading bleed */
  --wp--preset--color--secondary: var(--sage);
  --wp--preset--color--tertiary:  var(--moss-light);

  /* ── Radius ──────────────────────────────────────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 100px;

  /* ── Shadow ──────────────────────────────────────────────────────────────── */
  --shadow-sm: 0 2px 8px rgba(46, 43, 38, 0.07);
  --shadow-md: 0 6px 20px rgba(46, 43, 38, 0.10);
  --shadow-lg: 0 12px 36px rgba(46, 43, 38, 0.13);

  /* ── Motion ──────────────────────────────────────────────────────────────── */
  --ease:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --speed: 200ms;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg:         #1a1814;
    --surface:    #242018;
    --text:       #F5F0E8;
    --muted:      #B8B2A8;
    --subtle:     #7A7570;
    --border:     rgba(245, 240, 232, 0.1);
    --border-md:  rgba(245, 240, 232, 0.18);
    --link:       var(--sage);
    --link-hover: var(--cream);
  }

  .wp-element-button,
  .wp-block-button__link {
    background-color: var(--sage-dark);
    color: var(--cream) !important;
  }
  .wp-element-button:hover,
  .wp-block-button__link:hover {
    background-color: var(--sage);
  }
}


/* =============================================================================
   2. BASE RESET
   ============================================================================= */

body,
.wp-site-blocks {
  background-color: var(--cream) !important;
  color: var(--charcoal) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p,
.wp-block-paragraph {
  color: var(--charcoal);
  margin-block: 0 1.1em;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading,
:root :where(h1, h2, h3, h4, h5, h6),
:root :where(.wp-block-heading) {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  color: var(--charcoal) !important;
  letter-spacing: -0.2px;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.25rem) !important; line-height: 1.15 !important; letter-spacing: -0.5px !important; }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem) !important; line-height: 1.2  !important; letter-spacing: -0.3px !important; }
h3 { font-size: 1.15rem !important; line-height: 1.3 !important; }
h4 { font-size: 1rem    !important; line-height: 1.35 !important; }
h5 { font-size: 0.925rem !important; }
h6 { font-size: 0.875rem !important; }

/* Headings inside cover blocks and dark bands — override to light color */
.wp-block-cover h1,
.wp-block-cover h2,
.wp-block-cover h3,
.wp-block-cover .wp-block-heading,
.band--charcoal h1,
.band--charcoal h2,
.band--charcoal h3,
.band--charcoal .wp-block-heading {
  color: #FAF6EE !important;
}

/* Heading links */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: inherit !important;
  text-decoration: none;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--speed) var(--ease);
}
a:hover,
a:focus {
  color: var(--link-hover);
  text-decoration-thickness: 2px;
}

/* Strip underline from nav/button contexts */
.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);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Focus ring */
:focus-visible {
  outline: 3px solid var(--sage);
  outline-offset: 3px;
  border-radius: 3px;
}


/* Cover block overlays — navy tint instead of default black.
   has-background-dim (no number) = dimRatio 50, Process cover — medium tint.
   has-background-dim-70 = legacy fallback.
   has-background-dim-80 = Why Us cover — deep navy. */
.wp-block-cover__background.has-background-dim:not([class*="has-background-dim-"]) {
  background-color: #1a2a3a !important;
}
.wp-block-cover__background.has-background-dim-70 {
  background-color: #1a2a3a !important;
}
.wp-block-cover__background.has-background-dim-80 {
  background-color: #001220 !important;
}


/* Header template part — force white background and correct text colors.
   TT5's text-only-header pattern uses var:preset|color|contrast for site title,
   which can resolve incorrectly. We override all header color contexts here. */
header.wp-block-template-part,
header.wp-block-template-part .wp-block-group {
  background-color: var(--white) !important;
  color: var(--charcoal) !important;
}

/* Ensure the outermost header group is always white */
.wp-block-template-part[class*="header"] {
  background-color: var(--white) !important;
}

/* Site title */
.wp-block-site-title a,
.wp-block-site-title a:where(:not(.wp-element-button)) {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800 !important;
  color: var(--charcoal) !important;
  text-decoration: none !important;
}

/* Tagline */
.wp-block-site-tagline {
  font-size: 0.7rem;
  color: var(--charcoal-low) !important;
  letter-spacing: 0.3px;
  margin-top: 2px;
}


/* =============================================================================
   4. NAVIGATION
   ============================================================================= */

.wp-block-navigation a {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--muted);
  transition: color var(--speed) var(--ease);
}
.wp-block-navigation a:hover {
  color: var(--text);
}

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

/* Mobile hamburger */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  color: var(--text);
}


/* =============================================================================
   5. BUTTONS
   ============================================================================= */

.wp-element-button,
.wp-block-button__link {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  border-radius: var(--radius-pill);
  padding: 0.7em 1.6em;
  background-color: var(--sage);
  color: var(--white);
  border: 1px solid transparent;
  outline: 3px solid transparent;
  outline-offset: 3px;
  transition:
    background-color var(--speed) var(--ease),
    box-shadow var(--speed) var(--ease),
    outline-color var(--speed) var(--ease);
}
.wp-element-button:hover,
.wp-block-button__link:hover {
  background-color: var(--sage-dark);
  box-shadow: var(--shadow-md);
}
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
  outline-color: var(--sage);
}

/* Outline variant */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button[class*="is-style-outline"] .wp-block-button__link {
  background: transparent;
  color: var(--charcoal);
  border: 1px solid var(--border-md);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button[class*="is-style-outline"] .wp-block-button__link:hover {
  background: var(--moss-light);
  color: var(--charcoal) !important;
  border-color: var(--sage);
  box-shadow: none;
}
/* Outline buttons inside cover blocks start with white text/border */
.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-cover .wp-block-button[class*="is-style-outline"] .wp-block-button__link {
  color: #FFFFFF;
  border-color: rgba(255,255,255,0.7);
}
.wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-cover .wp-block-button[class*="is-style-outline"] .wp-block-button__link:hover {
  background: var(--moss-light);
  color: var(--charcoal) !important;
  border-color: var(--sage);
}

/* CTA nav button */
.wp-block-button.is-style-cta .wp-block-button__link {
  background: var(--sage);
  color: var(--white);
  font-size: 0.875rem;
}


/* =============================================================================
   6. TRUST BAR
   ============================================================================= */

.trust-bar {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0.8rem 1.5rem !important;
  text-align: center;
  font-size: 0.8rem;
  color: var(--subtle);
  letter-spacing: 0.3px;
}
.trust-bar p {
  margin: 0 !important;
  color: var(--subtle);
  width: 100%;
  max-width: none !important;
  text-align: center !important;
}
.trust-bar strong {
  color: var(--muted);
  font-weight: 500;
}


/* =============================================================================
   7. HERO
   ============================================================================= */

.fs-hero {
  background: var(--bg);
}

.fs-hero .wp-block-cover,
.fs-hero-cover {
  min-height: 60vh;
}

/* Hero label pill — rendered as a wp:paragraph block.
   Must be display:block (not inline-block) so has-text-align-center can center it.
   Pill appearance comes from bg/padding/radius on the block itself, but we
   constrain the width so it looks like a pill rather than a full-width bar. */
p.hero-label {
  display: table;              /* shrinks to content width like inline-block, but centering works */
  margin-inline: auto !important;
  margin-bottom: 1.25rem !important;
  margin-top: 0 !important;
  background: var(--terra-light);
  color: var(--terra) !important;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.3rem 0.9rem;
  border-radius: var(--radius-pill);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
}

/* Hero tagline (italic subhead) */
.hero-tagline {
  font-family: 'Nunito', sans-serif;
  font-size: 1.1rem;
  font-style: italic;
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.hero-tagline em {
  color: var(--sage-dark);
  font-style: normal;
  font-weight: 700;
}

/* Hero illustration placeholder */
.hero-illustration-wrap {
  background: var(--moss-light);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* =============================================================================
   8. SECTION UTILITIES
   ============================================================================= */

/* Section label (small allcaps above headings) — used as wp:paragraph */
/* sage #7A9E7E fails AA at 0.7rem (2.8–3.0:1). sage-dark #4D7152 passes on
   white (5.53:1), cream (5.13:1), and moss (4.71:1) — all AA compliant. */
.section-label,
.fs-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--sage-dark);
  margin-bottom: 0.6rem !important;
  margin-top: 0 !important;
}
/* On dark backgrounds, use sage (#7A9E7E) — 4.71:1 on charcoal, AA pass */
.band--charcoal .fs-label,
.band--charcoal .section-label {
  color: var(--sage) !important;
}
/* On cover blocks (photo + overlay), use semi-transparent white */
.wp-block-cover .fs-label,
.wp-block-cover .section-label {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Hero label pill — used as wp:paragraph inside cover */
.hero-label {
  display: inline-block;
  background: var(--terra-light);
  color: var(--terra) !important;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.3rem 0.9rem;
  border-radius: var(--radius-pill);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 1.25rem !important;
  margin-top: 0 !important;
}

/* Section subtitle */
.section-sub,
.fs-subtitle {
  font-size: 1rem;
  color: var(--muted);
  max-width: 580px;
  margin-inline: auto;
  line-height: 1.75;
}

/* Band backgrounds — !important needed to beat TT5 global-styles-inline-css */
.band--moss {
  background-color: var(--moss-light) !important;
  color: var(--charcoal) !important;
}
.band--white {
  background-color: var(--white) !important;
  color: var(--charcoal) !important;
}
.band--charcoal {
  background-color: var(--charcoal) !important;
  color: var(--cream) !important;
}
.band--charcoal h2,
.band--charcoal h3,
.band--charcoal p,
.band--charcoal strong {
  color: var(--cream) !important;
}
.band--charcoal a:where(:not(.wp-element-button)) {
  color: var(--sage) !important;
}

/* Force text color on all content inside light bands */
.band--white p,
.band--white li,
.band--white strong,
.band--moss p,
.band--moss li,
.band--moss strong {
  color: var(--charcoal) !important;
}

/* Pull quote / callout — used as wp:quote */
.wp-block-quote.fs-callout,
.fs-callout {
  background: var(--moss-light);
  border-left: 3px solid var(--sage);
  border-right: none;
  border-top: none;
  border-bottom: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1.1rem 1.4rem;
  font-family: 'Nunito', sans-serif;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--sage-dark);
  margin-top: 1.5rem;
}
.wp-block-quote.fs-callout p,
.fs-callout p {
  color: var(--sage-dark) !important;
  margin: 0;
}
.wp-block-quote.fs-callout cite {
  display: none;
}

/* Pill tag / badge — used as wp:paragraph */
.fs-tag,
p.fs-tag {
  display: inline-block;
  background: var(--terra-light);
  color: var(--terra) !important;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-pill);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-bottom: 0.75rem !important;
  margin-top: 0 !important;
}
.fs-tag--sage,
p.fs-tag--sage {
  background: var(--moss-light);
  color: var(--sage-dark) !important;
}


/* =============================================================================
   9. CARDS — GENERIC
   ============================================================================= */

.fs-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--speed) var(--ease),
    border-color var(--speed) var(--ease);
}
.fs-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-md);
}


/* =============================================================================
   10. HOW IT WORKS — STEPS
   ============================================================================= */

.wp-block-columns.fs-steps {
  gap: 1.75rem !important;
  align-items: stretch !important;
}
.wp-block-columns.fs-steps > .wp-block-column {
  background-color: var(--white) !important;
  color: var(--charcoal) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-sm);
  flex: 1 1 0 !important;
  min-width: 0;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--speed) var(--ease);
}
.wp-block-columns.fs-steps > .wp-block-column:hover {
  box-shadow: var(--shadow-md);
}

/* Step number */
.fs-step-num {
  font-family: 'Nunito', sans-serif;
  font-size: 3rem;
  font-weight: 800;
  color: var(--moss-light);
  line-height: 1;
  margin-bottom: 0.75rem;
  display: block;
}

/* Step icon pill */
.fs-step-icon {
  width: 40px;
  height: 40px;
  background: var(--terra-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.wp-block-columns.fs-steps > .wp-block-column h3 {
  font-size: 1.05rem !important;
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: var(--charcoal) !important;
}
.wp-block-columns.fs-steps > .wp-block-column p {
  font-size: 0.9rem;
  color: var(--charcoal-mid) !important;
  line-height: 1.7;
  margin: 0;
}


/* =============================================================================
   11. SERVICE CARDS
   ============================================================================= */

.wp-block-columns.fs-service-grid {
  gap: 1.5rem !important;
  align-items: stretch !important;
  flex-wrap: wrap !important;
}
.wp-block-columns.fs-service-grid > .wp-block-column {
  flex: 1 1 calc(50% - 0.75rem) !important;
  min-width: min(100%, 280px);
  display: flex;
}
.fs-service-card {
  background-color: var(--white) !important;
  color: var(--charcoal) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem !important;
  max-width: 100% !important;
  box-shadow: var(--shadow-sm);
  flex: 1;
  transition: box-shadow var(--speed) var(--ease);
}
.fs-service-card:hover {
  box-shadow: var(--shadow-md);
}
.fs-service-card h3 {
  font-size: 1.05rem !important;
  margin-bottom: 0.6rem;
  color: var(--charcoal) !important;
}
.fs-service-card p {
  font-size: 0.875rem;
  color: var(--charcoal-mid) !important;
  line-height: 1.7;
  margin: 0;
}


/* =============================================================================
   12. WHY US — 2×2 CARDS
   ============================================================================= */

.wp-block-columns.fs-why-grid {
  gap: 1.25rem !important;
  align-items: stretch !important;
  flex-wrap: wrap !important;
  max-width: 820px;
  margin-inline: auto;
}
.wp-block-columns.fs-why-grid > .wp-block-column {
  flex: 1 1 calc(50% - 0.625rem) !important;
  min-width: min(100%, 300px);
  display: flex;
}
.fs-why-card {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(46,43,38,0.12);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.75rem !important;
  max-width: 100% !important;
  flex: 1;
  color: #2E2B26 !important;
}

/* Restore muted color for paragraphs specifically */
.fs-why-card p {
  font-size: 0.875rem;
  color: #5C5850 !important;
  line-height: 1.7;
  margin: 0;
}

.fs-why-card h3 {
  font-size: 1rem !important;
  margin-bottom: 0.4rem;
  color: #2E2B26 !important;
}

.fs-why-card a {
  color: #4D7152 !important;
}


/* =============================================================================
   13. BLOG CARDS
   ============================================================================= */

/* Query loop grid */
.fs-blog-grid .wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  list-style: none;
  padding: 0;
}

/* Individual card */
.fs-blog-grid .wp-block-post-template > li {
  background-color: var(--white) !important;
  color: var(--charcoal) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  min-height: 360px;
  transition:
    box-shadow var(--speed) var(--ease),
    border-color var(--speed) var(--ease);
}
.fs-blog-grid .wp-block-post-template > li:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-md);
}

/* Featured image — 1:1 */
.fs-blog-grid .wp-block-post-featured-image,
.fs-blog-grid .wp-block-post-featured-image a {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--moss-light);
}
.fs-blog-grid .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Card body */
.fs-blog-grid .blog-card__body {
  padding: 1.2rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.4rem;
}

/* Post title */
.fs-blog-grid .wp-block-post-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}
.fs-blog-grid .wp-block-post-title a {
  color: var(--text);
  text-decoration: none;
}
.fs-blog-grid .wp-block-post-title a:hover {
  color: var(--link);
  text-decoration: underline;
}

/* Date */
.fs-blog-grid .wp-block-post-date {
  font-size: 0.775rem;
  color: var(--subtle);
  margin: 0;
}

/* Excerpt */
.fs-blog-grid .wp-block-post-excerpt {
  font-size: 0.875rem;
  color: var(--muted);
  flex: 1;
  margin: 0;
}
.fs-blog-grid .wp-block-post-excerpt__more-link {
  display: none;
}


/* =============================================================================
   14. SINGLE POST
   ============================================================================= */

.wp-block-post-content {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text);
}

/* Constrain prose width */
.wp-block-post-content > *:not(.alignfull):not(.alignwide) {
  max-width: 700px;
  margin-inline: auto;
}

.wp-block-post-content h2,
.wp-block-post-content h3,
.wp-block-post-content h4 {
  margin-top: 2em;
  margin-bottom: 0.6em;
}

.wp-block-post-content p {
  margin-bottom: 1.2em;
}

.wp-block-post-content ul,
.wp-block-post-content ol,
.wp-block-list {
  color: var(--charcoal) !important;
}

.wp-block-post-content li,
.wp-block-list li {
  color: var(--charcoal) !important;
  margin-bottom: 0.4em;
}
.wp-block-post-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1.2em;
}

.wp-block-post-content li {
  margin-bottom: 0.4em;
}

.wp-block-post-content blockquote,
.wp-block-quote {
  border-left: 3px solid var(--sage);
  padding: 0.75rem 1.25rem;
  margin-inline: 0;
  background: var(--moss-light);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: 'Nunito', sans-serif;
  font-style: italic;
  color: var(--sage-dark);
}

.wp-block-post-content code,
.wp-block-code {
  font-size: 0.875rem;
  background: var(--moss-light);
  border-radius: var(--radius-sm);
  padding: 0.15em 0.4em;
  font-family: 'Courier New', monospace;
}

/* Post header */
.wp-block-post-title.single-post-title {
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  line-height: 1.15;
  margin-bottom: 0.5rem;
}

.single-post-meta {
  font-size: 0.8rem;
  color: var(--subtle);
  margin-bottom: 2rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Featured image in post */
.wp-block-post-featured-image.single-featured img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: 2.5rem;
}

/* Tags / categories */
.wp-block-post-terms a {
  display: inline-block;
  background: var(--terra-light);
  color: var(--terra);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-pill);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  text-decoration: none;
  margin-right: 0.4rem;
}
.wp-block-post-terms a:hover {
  background: var(--terra);
  color: var(--white);
}


/* =============================================================================
   15. WPFORMS
   ============================================================================= */

.wpforms-container {
  max-width: 600px;
  margin-inline: auto;
}

.wpforms-field-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.4rem;
  display: block;
}

.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field input[type="tel"],
.wpforms-field textarea,
.wpforms-field select {
  width: 100%;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-md);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.9rem;
  line-height: 1.5;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.wpforms-field input:focus,
.wpforms-field textarea:focus,
.wpforms-field select:focus {
  outline: none;
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(122, 158, 126, 0.2);
}

.wpforms-field textarea {
  min-height: 140px;
  resize: vertical;
}

.wpforms-submit-container {
  margin-top: 1.5rem;
}

.wpforms-submit {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  border-radius: var(--radius-pill);
  padding: 0.7em 1.8em;
  background: var(--sage);
  color: var(--white);
  border: none;
  cursor: pointer;
  transition: background-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.wpforms-submit:hover {
  background: var(--sage-dark);
  box-shadow: var(--shadow-md);
}

.wpforms-error-container,
.wpforms-field .wpforms-error {
  font-size: 0.8rem;
  color: #A32D2D;
  margin-top: 0.3rem;
}

.wpforms-confirmation-container-full {
  background: var(--moss-light);
  border: 1px solid var(--sage);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  color: var(--sage-dark);
  font-weight: 500;
}


/* Contact form wrapper */
.fs-contact-form {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  max-width: 600px;
  margin-inline: auto;
}


/* =============================================================================
   16. FOOTER
   ============================================================================= */

footer.wp-block-template-part,
footer.wp-block-template-part .wp-block-group,
.wp-site-footer,
.wp-block-site-footer {
  background-color: var(--charcoal) !important;
  color: rgba(245, 240, 232, 0.55) !important;
}

footer.wp-block-template-part a,
.wp-site-footer a {
  color: var(--sage) !important;
  text-decoration: none;
  transition: color var(--speed) var(--ease);
}
footer.wp-block-template-part a:hover,
.wp-site-footer a:hover {
  color: var(--cream) !important;
}

.footer-logo {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--white) !important;
}
.footer-logo em {
  color: var(--sage);
  font-style: italic;
}

.footer-tagline {
  font-size: 0.7rem;
  color: rgba(245, 240, 232, 0.35) !important;
  margin-top: 2px;
}

/* Site title and tagline in footer */
footer.wp-block-template-part .wp-block-site-title a,
footer.wp-block-template-part .wp-block-site-title a:hover {
  color: var(--white) !important;
}
footer.wp-block-template-part .wp-block-site-tagline {
  color: rgba(245, 240, 232, 0.45) !important;
  font-size: 0.7rem;
}

footer.wp-block-template-part .has-contrast-color,
footer.wp-block-template-part .has-contrast-background-color,
footer.wp-block-template-part .has-base-background-color {
  background: transparent !important;
  color: rgba(245, 240, 232, 0.55) !important;
}


/* =============================================================================
   17. RESPONSIVE — Mobile first
   ============================================================================= */

/* Stack service grid at 2 → 1 column on mobile */
@media (max-width: 782px) {
  .wp-block-columns.fs-service-grid > .wp-block-column {
    flex-basis: 100% !important;
  }
  .wp-block-columns.fs-service-grid {
    flex-wrap: wrap !important;
  }

  /* Stack steps */
  .wp-block-columns.fs-steps {
    flex-wrap: wrap !important;
  }
  .wp-block-columns.fs-steps > .wp-block-column {
    flex-basis: 100% !important;
  }

  /* Stack why grid */
  .wp-block-columns.fs-why-grid > .wp-block-column {
    flex-basis: 100% !important;
  }

  /* Blog: single column */
  .fs-blog-grid .wp-block-post-template {
    grid-template-columns: 1fr !important;
  }

  /* Smaller hero */
  h1 { font-size: clamp(1.8rem, 7vw, 2.5rem); }
  h2 { font-size: clamp(1.4rem, 5vw, 1.9rem); }

  /* Full-width buttons on small screens */
  .wp-block-buttons.is-stacked-on-mobile .wp-block-button {
    width: 100%;
  }
  .wp-block-buttons.is-stacked-on-mobile .wp-block-button__link {
    width: 100%;
    text-align: center;
  }

  /* Trust bar wrap */
  .trust-bar {
    font-size: 0.72rem;
    padding: 0.8rem 1rem;
  }

  /* Post content full width on mobile */
  .wp-block-post-content > *:not(.alignfull):not(.alignwide) {
    max-width: 100%;
  }
}

/* Tablet — 2-column service grid */
@media (min-width: 600px) and (max-width: 782px) {
  .wp-block-columns.fs-service-grid > .wp-block-column {
    flex-basis: calc(50% - 0.75rem) !important;
  }
  .fs-blog-grid .wp-block-post-template {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}