/* MEC Blocks bare-bones foundation: homepage + header/footer */

/* Global layout tokens */
:root {
  --mec-header-height: var(--wp--custom--layout--header-height-desktop); /* 5.875rem ~94px — desktop */
}

:root :where(*),
:root :where(*::before),
:root :where(*::after) {
  box-sizing: border-box;
}

:root :where(body) {
  margin: 0;
}

/* ════════════════════════════════════════════════════════════
   WP CORE OVERRIDES — grouped here for easy cascade debugging
   ════════════════════════════════════════════════════════════ */

/* Override WP core: remove the auto margin centering on constrained layout children */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  margin-left: auto;
  margin-right: auto;
}

.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media {
  min-height: 450px;
}

/* Override WP global styles: columns gap reduced on mobile (WP sets 2em via :where — zero specificity) */
@media (max-width: 48rem) {
  .wp-block-columns.is-layout-flex {
    gap: 0.5em;
  }
}


/* button border defaults to 1px */
.wp-block-button.is-style-outline .wp-block-button__link {
  border-width: 1px;
}

/* Override WP core: wp-block-group.has-background adds 2.375em side padding — root padding handles this */
:where(.wp-block-group.alignfull.has-background) {
  padding-inline: 0;
}

/* Override WP core: media-text content gets 0 8% padding — not needed, root padding handles gutters */
.wp-block-media-text > .wp-block-media-text__content {
  padding: 0;
}

/* ── Separators ── */
/* ── Separator — stretch to fill when alignment is set ── */
:root :where(.wp-block-separator.alignfull),
:root :where(.wp-block-separator.alignwide) {
  width: 100%;
}

/* ── Separator — hairline thickness across all styles ── */
:root :where(.wp-block-separator) {
  border-bottom-width: 1px;
}

/* ── Section mark — strip WP background padding (bare selector required to beat :where specificity) ── */
/* WP adds padding to .wp-block-group.has-background — strip it on the section mark.
   Bare selector needed here to beat WP's 0-2-0 specificity. */
.mec-section-mark.wp-block-group.has-background {
  padding: 0;
}

/* ════════════════════════════════════════════════════════════
   GLOBAL SITE LAYOUT
   ════════════════════════════════════════════════════════════ */

:root :where(img) {
  max-width: 100%;
  height: auto;
}

:root :where(.wp-site-blocks) {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

:root :where(.site-main) {
  flex: 1;
  width: 100%;
}

:root :where(.site-main .wp-block-post-content > *) {
  margin-block: 0;
}

/* ════════════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════════════ */

:root :where(.wp-site-blocks > header.wp-block-template-part) {
  width: 100%;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  position: relative;
}

/* Top row: centred logo + absolutely-placed utility bar */
:root :where(.mec-site-header__top) {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: var(--wp--preset--spacing--2-xs-plus) var(--wp--preset--spacing--sm-plus);
  width: 100%;

}

:root :where(.mec-site-header__branding) {
  margin: 0;
}

:root :where(.mec-site-header__logo) {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

:root :where(.mec-site-header__logo img) {
  width: var(--wp--custom--layout--logo-width-desktop);
  max-width: 100%;
  display: block;
}

:root :where(.mec-site-header__utility) {
  position: absolute;
  right: var(--wp--preset--spacing--sm-plus);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

:root :where(.mec-site-header__phone) {
  margin: 0;
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--body-xl);
  line-height: var(--wp--custom--line-height--body);
  letter-spacing: var(--wp--custom--letter-spacing--body);
  white-space: nowrap;
}

:root :where(.mec-site-header__phone-cta) {
  display: inline-block;
  margin-left: var(--wp--preset--spacing--2-xs-plus);
  background: transparent;
  color: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--white);
  text-decoration: none;
  padding: var(--wp--preset--spacing--2-xs-plus) var(--wp--preset--spacing--sm);
  border-radius: 9999px;
  font-size: var(--wp--preset--font-size--body-small);
  font-weight: 300;
  white-space: nowrap;
  line-height: var(--wp--custom--line-height--loose);
  transition: background 0.2s ease, color 0.2s ease;
}

:root :where(.mec-site-header__phone-cta:hover),
:root :where(.mec-site-header__phone-cta:focus-visible) {
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--neutral-dark);
  outline-offset: 2px;
}

/* Nav */
:root :where(nav.mec-site-header__nav) {
  width: 100%;
  margin: 0 auto;
  padding-inline: var(--wp--preset--spacing--sm-plus);
  padding-block: var(--wp--preset--spacing--2-xs);
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 25%, transparent);
  text-align: center;
}

:root :where(.mec-site-header__nav .wp-block-navigation__container) {
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}

:root :where(.mec-site-header__nav .wp-block-navigation-item) {
  margin: 0 var(--wp--preset--spacing--sm);
  padding: var(--wp--preset--spacing--3-xs) 0;
}

:root :where(.mec-site-header__nav .wp-block-navigation-item__content) {
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--caption-small);
  line-height: var(--wp--custom--line-height--loose);
  font-weight: 300;
  letter-spacing: var(--wp--custom--letter-spacing--body);
  text-transform: uppercase;
  text-decoration: none;
  padding: 0;
}

/* Bare selectors for reliable hover specificity */
.mec-site-header__nav .wp-block-navigation-item__content:hover,
.mec-site-header__nav .wp-block-navigation-item__content:focus-visible,
.mec-site-header__nav .current-menu-item .wp-block-navigation-item__content {
  color: var(--wp--preset--color--secondary);
  outline-offset: 2px;
}

/* ── Desktop submenu dropdown ──────────────────────────────
   Works WITH WP core defaults:
   - Parent <li> keeps position:relative  (core default)
   - Core handles show/hide via opacity + visibility on :hover / :focus-within
   We offset top so the panel aligns with the nav bar bottom edge,
   and bridge the small gap with a ::before so hover stays connected. */

/* Offset panel so it clears the nav bar bottom padding */
.mec-site-header__nav .has-child > .wp-block-navigation__submenu-container {
  top: calc(100% + var(--wp--preset--spacing--2-xs));
}

/* Transparent bridge covers the offset gap — hover chain stays intact */
.mec-site-header__nav .has-child > .wp-block-navigation__submenu-container::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: calc(var(--wp--preset--spacing--2-xs) + 2px);
}

:root :where(.mec-site-header__nav .wp-block-navigation__submenu-container) {
  min-width: 15rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
  background: var(--wp--preset--color--white);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent);
}

:root :where(.mec-site-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item) {
  width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
}

:root :where(.mec-site-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child) {
  border-bottom: 0;
}

:root :where(.mec-site-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content),
:root :where(.mec-site-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.85rem 1rem;
  color: var(--wp--preset--color--primary);
  font-size: var(--wp--preset--font-size--caption-small);
  font-weight: 400;
  text-align: left;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--wp--preset--color--white);
}

.mec-site-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.mec-site-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible,
.mec-site-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle:hover,
.mec-site-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle:focus-visible,
.mec-site-header__nav .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content,
.mec-site-header__nav .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-submenu__toggle {
  color: var(--wp--preset--color--accent);
  background: color-mix(in srgb, var(--wp--preset--color--accent) 8%, var(--wp--preset--color--white));
}

:root :where(.mec-site-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle svg),
:root :where(.mec-site-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle svg path) {
  fill: currentColor;
  stroke: currentColor;
}

/* Close button only needed when the overlay menu is open on mobile */
:root :where(.mec-site-header__nav .wp-block-navigation__responsive-container-close) {
  display: none;
}


@media (max-width: 60rem) {
  /* Mobile header is shorter (~68.5px) than desktop (~94px) — update the token */
  :root {
    --mec-header-height: var(--wp--custom--layout--header-height-mobile); /* 4.3rem ~68.8px */
  }

  /* Mobile header: logo left, phone CTA right, hamburger far right */
  :root :where(.mec-site-header__top) {
    justify-content: space-between;
    padding-right: 3.5rem;
  }

  :root :where(.mec-site-header__branding) {
    flex: unset;
    text-align: unset;  
 /* visual tweak to vertically align the smaller logo with the utility items on mobile */
  }

  /* Utility: return to normal flow so it sits left of the hamburger */
  :root :where(.mec-site-header__utility) {
    position: static;
    transform: none;
    right: auto;
    top: auto;
    flex-shrink: 0;
  }

  /* Hide "Call today" — number only on mobile */
  :root :where(.mec-site-header__phone-label) {
    display: none;
  }

  /* Compact pill button on mobile */
  :root :where(.mec-site-header__phone-cta) {
    margin-left: 0;
    padding: var(--wp--preset--spacing--3-xs) var(--wp--preset--spacing--xs);
    font-size: var(--wp--preset--font-size--caption);
  }

  /* Smaller logo on mobile */
  :root :where(.mec-site-header__logo img) {
    width: var(--wp--custom--layout--logo-width-mobile);
  }

  /* Nav: zero height so it adds nothing to header size */
  :root :where(.mec-site-header__nav) {
    height: 0;
    overflow: visible;
    padding: 0;
    margin: 0;
    width: 100%;
    position: static;
  }

  /* Hamburger: floats absolute at the right of the header */
  :root :where(.mec-site-header__nav .wp-block-navigation__responsive-container-open) {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    padding: var(--wp--preset--spacing--3-xs);
    color: var(--wp--preset--color--white);
    line-height: 1;
  }

  /* Hide hamburger when the menu panel is open */
  .wp-block-navigation.mec-site-header__nav:has(.is-menu-open) .wp-block-navigation__responsive-container-open {
    display: none;
  }

  /* Hide nav container when closed */
  :root :where(.mec-site-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open)) {
    display: none;
  }

  /* Open dropdown: drops below header, overrides WP's position:fixed.
     .wp-block-navigation.mec-site-header__nav gives (0,4,0) specificity,
     beating WP's :not(.has-background) rule which is also (0,4,0) —
     ours loads last so wins on the tie. */
  .wp-block-navigation.mec-site-header__nav .wp-block-navigation__responsive-container.is-menu-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: auto;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--wp--preset--color--white);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent);
    padding: 0;
    text-align: left;
    /* WP sets overflow:auto which clips the close button above the container — override */
    overflow: visible;
  }

  /* Close button: positioned to sit at exactly the same spot as the hamburger.
     Containing block is .is-menu-open which starts at top = --mec-header-height.
     Formula: translateY( -(header + button) / 2 ) centres the button in the header. */
  .wp-block-navigation.mec-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(calc((var(--mec-header-height) + 100%) / -2));
    color: var(--wp--preset--color--primary);
    line-height: 1;
    background: transparent;
    border: 0;
    cursor: pointer;
  }

  /* WP's × icon is an SVG with a hardcoded fill — force it dark */
  .wp-block-navigation.mec-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg,
  .wp-block-navigation.mec-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg path {
    fill: var(--wp--preset--color--primary);
    stroke: var(--wp--preset--color--primary);
  }

  /* Fix WP's inner dialog wrappers — they collapse to a row without fixed height */
  .wp-block-navigation.mec-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
  .wp-block-navigation.mec-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
  }

  /* WP adds margin-top: 46px to the dialog — strip it */
  .wp-block-navigation.mec-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
    margin-top: 0;
  }

  /* WP adds padding-top: 56px for the close button overlay — strip it */
  .wp-block-navigation.mec-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: auto;
    padding-top: 0;
  }

  /* Nav items: left-aligned column in mobile dropdown */
  .wp-block-navigation.mec-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
    height: auto;
    text-align: left;
  }

  /* All mobile nav items: left-aligned, full-width, row layout */
  .wp-block-navigation.mec-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    width: 100%;
    margin: 0;
    padding: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
  }

  .wp-block-navigation.mec-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    text-align: left !important;
    display: flex;
    align-items: center;
    flex: 1;
    color: var(--wp--preset--color--primary) !important;
    font-size: var(--wp--preset--font-size--caption-large);
    font-weight: 400;
    letter-spacing: var(--wp--custom--letter-spacing--body);
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.85rem 1.25rem;
    background: transparent;
  }

  /* Chevron toggle: inline, no border, no background */
  .wp-block-navigation.mec-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: auto;
    padding: 0.85rem 1.25rem 0.85rem 0;
    color: var(--wp--preset--color--primary) !important;
    background: transparent;
    border: 0;
    outline: 0;
    cursor: pointer;
  }

  .wp-block-navigation.mec-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
  .wp-block-navigation.mec-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible,
  .wp-block-navigation.mec-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle:hover,
  .wp-block-navigation.mec-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle:focus-visible {
    color: var(--wp--preset--color--accent) !important;
  }

  .wp-block-navigation.mec-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg,
  .wp-block-navigation.mec-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg path {
    fill: currentColor;
    stroke: currentColor;
  }

  /* Accordion: hide submenu by default, override core's forced height:auto */
  .wp-block-navigation.mec-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    display: none;
    position: static;
    top: auto;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: var(--wp--preset--color--neutral-soft) !important;
  }

  /* Hide the desktop bridge in mobile */
  .wp-block-navigation.mec-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container::before {
    display: none;
  }

  /* Show submenu when toggle is expanded */
  .wp-block-navigation.mec-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
    display: flex;
    flex-direction: column;
  }

  .wp-block-navigation.mec-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
  }

  .wp-block-navigation.mec-site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding: 0.85rem 1.25rem;
  }

}

/* ════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */

:root :where(.wp-site-blocks > footer.wp-block-template-part),
:root :where(.mec-site-footer) {
  width: 100%;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  padding: var(--wp--preset--spacing--lg-plus) var(--wp--preset--spacing--sm-plus) var(--wp--preset--spacing--md);
}

:root :where(.mec-site-footer__inner) {
  width: min(var(--wp--style--global--wide-size, 90rem), 100%);
  margin-inline: auto;
  min-height: var(--wp--custom--layout--footer-min-height);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--wp--preset--spacing--lg);
  row-gap: var(--wp--preset--spacing--md);
}

:root :where(.mec-site-footer__brand) {
  display: inline-flex;
  align-items: center;
  grid-column: 1;
  grid-row: 1;
  text-decoration: none;
}

:root :where(.mec-site-footer__brand .wp-block-image) {
  margin: 0;
}

:root :where(.mec-site-footer__brand img) {
  width: var(--wp--custom--layout--footer-logo-width);
  height: auto;
  display: block;
}

:root :where(.mec-site-footer__nav) {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

:root :where(.mec-site-footer__nav .wp-block-navigation) {
  margin: 0;
}

:root :where(.mec-site-footer__nav .wp-block-navigation__container) {
  justify-content: flex-end;
  gap: 0;
  flex-wrap: wrap;
}

:root :where(.mec-site-footer__nav .wp-block-navigation-item) {
  margin: 0 0 0 var(--wp--preset--spacing--lg);
}

:root :where(.mec-site-footer__nav .wp-block-navigation-item__content) {
  color: color-mix(in srgb, var(--wp--preset--color--white) 70%, transparent);
  text-transform: uppercase;
  font-size: var(--wp--preset--font-size--overline);
  line-height: var(--wp--custom--line-height--loose);
  letter-spacing: var(--wp--custom--letter-spacing--body);
  font-weight: 500;
  text-decoration: none;
  padding: 0;
}

:root :where(.mec-site-footer__nav .current-menu-item .wp-block-navigation-item__content),
:root :where(.mec-site-footer__nav .wp-block-navigation-item__content:hover),
:root :where(.mec-site-footer__nav .wp-block-navigation-item__content:focus-visible) {
  color: var(--wp--preset--color--white);
}

:root :where(.mec-site-footer__copyright) {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: end;
  margin: 0;
  text-align: right;
  font-size: var(--wp--preset--font-size--caption);
  line-height: var(--wp--custom--line-height--loose);
  letter-spacing: var(--wp--custom--letter-spacing--body);
  color: color-mix(in srgb, var(--wp--preset--color--white) 55%, transparent);
}

@media (max-width: 60rem) {
  :root :where(.mec-site-footer) {
    padding: 1.75rem 1rem 1.25rem;
  }

  :root :where(.mec-site-footer__inner) {
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 1rem;
  }

  :root :where(.mec-site-footer__brand) {
    justify-self: center;
    grid-column: 1;
    grid-row: 1;
  }

  :root :where(.mec-site-footer__nav) {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
  }

  :root :where(.mec-site-footer__nav .wp-block-navigation__container) {
    justify-content: center;
  }

  :root :where(.mec-site-footer__nav .wp-block-navigation-item) {
    margin: 0 0.75rem;
  }

  :root :where(.mec-site-footer__copyright) {
    grid-column: 1;
    grid-row: 3;
    justify-self: center;
    align-self: start;
    text-align: center;
  }
}

/* ════════════════════════════════════════════════════════════
   PATTERN GLOBALS — shared components used across patterns
   ════════════════════════════════════════════════════════════ */

/* ── Section Mark ── */
/* Orange section mark bar — 64×4px accent under headings */
:root :where(.mec-section-mark.wp-block-group) {
  height: 4px;
  width: 64px;
  margin-top: var(--wp--preset--spacing--md);
  margin-bottom: var(--wp--preset--spacing--md);
  /* Constrained layout applies margin:auto to children — override so mark stays left */
  margin-left: 0;
  margin-right: auto;
}

/* Remove default paragraph margin-top that follows the section mark — block gap handles spacing */
:root :where(.mec-section-mark + p),
:root :where(.mec-section-mark ~ .wp-block-group > *:first-child),
:root :where(.mec-callout-bar__text > p:first-child),
:root :where(.mec-split-section__text > p:first-child) {
  margin-top: 0;
}

/* ── Icon Item (mec/service-icon-item) ── */
:root :where(.mec-icon-item) {
  gap: var(--wp--preset--spacing--xs); /* 0.75rem ≈ 12px — gap between icon and text */
}

/* Bare selector: beats WP core figure.wp-block-image { width:100% } */
.mec-icon-item__icon {
  flex-shrink: 0;
  width: auto;
  margin: 0;
  line-height: 0;
}

/* Bare selector beats WP core .wp-block-image img { height:auto } */
.mec-icon-item__icon img {
  display: block;
  width: var(--wp--custom--component--icon-size);
  height: var(--wp--custom--component--icon-size);
  object-fit: contain;
}

.mec-icon-item__heading {
  margin: 0;
  line-height: var(--wp--custom--line-height--subheading);
}

:root :where(.mec-icon-item__body) {
  margin: 0;
  color: var(--wp--preset--color--neutral-mid);
  line-height: var(--wp--custom--line-height--body);
}

/* ─── Testimonial pull quote ───────────────────────────────────── */

:root :where(.mec-testimonial-pull) {
  border-left: 3px solid var(--wp--preset--color--secondary);
  padding: var(--wp--preset--spacing--lg);
}

:root :where(.mec-testimonial-pull::before) {
  content: '\201C';
  display: block;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--wp--preset--color--secondary);
  margin-bottom: var(--wp--preset--spacing--3-xs);
  font-family: Georgia, serif;
}

:root :where(.mec-testimonial-pull__quote) {
  font-size: var(--wp--preset--font-size--body-xl);
  color: var(--wp--preset--color--neutral-dark);
  line-height: var(--wp--custom--line-height--loose);
  font-style: italic;
  margin: 0 0 1rem;
}

:root :where(.mec-testimonial-pull__attribution) {
  font-size: var(--wp--preset--font-size--overline);
  font-weight: 700;
  letter-spacing: var(--wp--custom--letter-spacing--body);
  text-transform: uppercase;
  color: var(--wp--preset--color--neutral-mid);
  margin: 0;
}

/* ─── Breadcrumbs band ────────────────────────────────────────────────────── */

/* Strip default margin WP adds to shortcode block wrapper */
:root :where(.mec-breadcrumbs-band .wp-block-shortcode) {
  margin-block: 0;
}

/* Breadcrumb overlaid at the top of the service hero intro section.
   Taken out of flow so the H1/columns vertical centring is unaffected. */
.mec-pattern-intro > .mec-breadcrumbs-wrap {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 1;
  pointer-events: none;
}

.mec-pattern-intro > .mec-breadcrumbs-wrap > * {
  pointer-events: auto;
}

:root :where(.mec-pattern-intro .mec-breadcrumbs) {
  padding-block: var(--wp--preset--spacing--sm);
  padding-inline-start: max(1.25rem, calc(50vw - 45rem));
}

:root :where(.mec-breadcrumbs) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  /* Matches the height of a single-line heading with md padding — keeps both
     archive and single page bands the same visual height */
  padding-block: var(--wp--preset--spacing--md);
  margin: 0;
  font-size: var(--wp--preset--font-size--body-small);
  letter-spacing: var(--wp--custom--letter-spacing--body);
  color: var(--wp--preset--color--white);
}

:root :where(.mec-breadcrumbs .mec-breadcrumbs__link) {
  color: var(--wp--preset--color--white);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

:root :where(.mec-breadcrumbs .mec-breadcrumbs__link:hover),
:root :where(.mec-breadcrumbs .mec-breadcrumbs__link:focus-visible) {
  opacity: 1;
  text-decoration: underline;
}

:root :where(.mec-breadcrumbs .mec-breadcrumbs__sep) {
  opacity: 0.4;
  user-select: none;
}

:root :where(.mec-breadcrumbs .mec-breadcrumbs__current) {
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   PATTERNS — desktop rules followed by co-located responsive
   ════════════════════════════════════════════════════════════ */

/* ── Hero Slider ── */
:root :where(.mec-hero-slider) {
  position: relative;
  overflow: hidden;
  background: var(--wp--preset--color--primary);
}

:root :where(.mec-hero-slider__slides) {
  position: relative;
  /* Height is set by the active slide — no explicit size needed at desktop */
}

:root :where(.mec-hero-slide) {
  position: absolute;
  inset: 0;
  min-height: var(--wp--custom--layout--hero-min-height);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

:root :where(.mec-hero-slide.is-active) {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

:root :where(.mec-hero-slide__content) {
  width: min(var(--wp--style--global--wide-size, 90rem), 100% - (var(--wp--preset--spacing--md) * 2));
  margin-inline: auto;
  text-align: center;
  padding-top: clamp(9rem, 18vw, 16rem);
  padding-bottom: clamp(9rem, 18vw, 16rem);
}

:root :where(.mec-hero-slide__kicker) {
  margin: 0;
  color: var(--wp--preset--color--white);
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--letter-spacing--heading);
  font-size: clamp(var(--wp--preset--font-size--h-3), 2.4vw, var(--wp--preset--font-size--h-2));
  font-weight: 400;
  line-height: var(--wp--custom--line-height--relaxed);
}

:root :where(.mec-hero-slide__title) {
  margin: var(--wp--preset--spacing--2-xs) 0 0;
  color: var(--wp--preset--color--white);
  font-family: var(--wp--preset--font-family--display);
  letter-spacing: var(--wp--custom--letter-spacing--snug);
  /* 2rem at ~390px → 4.8rem at ~1440px */
  font-size: clamp(2rem, 4.3vw + 1rem, 4.8rem);
  font-weight: 800;
  line-height: var(--wp--custom--line-height--display-large);
}

:root :where(.mec-hero-slider__controls) {
  position: absolute;
  left: 50%;
  bottom: var(--wp--preset--spacing--sm-plus);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 3;
}

:root :where(.mec-hero-slider__dots) {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

:root :where(.mec-hero-slider__dot) {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--wp--preset--color--white) 45%, transparent);
  cursor: pointer;
  text-indent: -9999px;
  overflow: hidden;
}

:root :where(.mec-hero-slider__dot.is-active) {
  background: var(--wp--preset--color--white);
}


@media (max-width: 60rem) {
  /* Hero: fill remaining viewport height — drive from the outer container down */
  :root :where(.mec-hero-slider) {
    height: calc(100dvh - var(--mec-header-height));
  }

  :root :where(.mec-hero-slider__slides) {
    height: 100%;
  }

  /* Active slide fills the slides wrapper; min-height !important beats WP Cover's inline style */
  :root :where(.mec-hero-slide) {
    min-height: unset !important;
    height: 100%;
  }

  :root :where(.mec-hero-slide__content) {
    width: min(100% - 2rem, 44rem);
    /* Vertical centering handled by wp-block-cover's own display:flex align-items:center */
    padding-top: var(--wp--preset--spacing--lg);
    padding-bottom: var(--wp--preset--spacing--xl); /* leave room for dot controls */
  }

  :root :where(.mec-hero-slider__controls) {
    bottom: 1rem;
  }

}

@media (max-width: 30rem) {
  :root :where(.mec-hero-slide__title) {
    font-size: clamp(var(--wp--preset--font-size--h-3), 7.5vw, var(--wp--preset--font-size--display-medium));
  }
}

/* ── Pattern Intro / Service Hero ── */
:root :where(.mec-pattern-intro) {
  background: var(--wp--preset--color--secondary);
  padding-block: 0;
  position: relative;
}

:root :where(.mec-pattern-intro__columns) {
  margin: 0;
  gap: 0;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  max-width: none;
  min-height: clamp(24rem, 42vw, 34rem);
  align-items: stretch;
}

/* Higher specificity than WP's flex rules — locks the 50/50 split
   so the image never expands when max-width is applied to the text side */
.mec-pattern-intro__columns > .wp-block-column {
  flex: 0 0 50%;
  max-width: 50%;
  min-width: 0;
}

:root :where(.mec-pattern-intro__content) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  min-width: 0;
  margin: 0;
  /* Vertical breathing room; inline: text left edge tracks contentSize left edge
     (50vw - 45rem = half viewport minus half of 90rem contentSize).
     padding-inline-end gives clearance from the centre seam. */
  padding-block: clamp(2rem, 3.5vw, 4rem);
  padding-inline-end: var(--wp--preset--spacing--lg);
  padding-inline-start: max(1.25rem, calc(50vw - 45rem));
}

/* 45rem = half of 90rem contentSize — text left edge aligns with constrained body below */
:root :where(.mec-pattern-intro__content > *) {
  max-width: 45rem;
  width: 100%;
}

/* When inner wrapper IS present (after pattern re-insert in editor) */
:root :where(.mec-pattern-intro__text-inner) {
  max-width: 45rem;
  margin-left: auto;
  margin-right: 0;
  padding: 0;
}

:root :where(.mec-pattern-intro__title) {
  margin: 0;
  color: var(--wp--preset--color--white);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--display-large);
  font-weight: 800;
  line-height: var(--wp--custom--line-height--display-large);
  letter-spacing: var(--wp--custom--letter-spacing--display);
}

:root :where(.mec-pattern-intro__text) {
  margin: var(--wp--preset--spacing--sm-plus) 0 0;
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--body);
  line-height: var(--wp--custom--line-height--body);
  letter-spacing: var(--wp--custom--letter-spacing--body);
}

/* position: relative so the absolutely-placed figure always fills
   whatever height the flex row stretches this column to */
:root :where(.mec-pattern-intro__media-wrap) {
  position: relative;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

:root :where(.mec-pattern-intro__media) {
  position: absolute;
  inset: 0;
  margin: 0;
}

:root :where(.mec-pattern-intro__media),
:root :where(.mec-pattern-intro__media img) {
  width: 100%;
  height: 100%;
}

/* Bare selector (no :where) so specificity beats WP core's .wp-block-image img { height:auto } */
.mec-pattern-intro__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Service post-content wrapper - only zero block-direction; inline root gutter (has-global-padding) must remain */

@media (max-width: 60rem) {
  /* Breadcrumb: back to normal flow on mobile so it can never overlap the heading.
     Absolute positioning is only safe when the section has guaranteed vertical space. */
  .mec-pattern-intro > .mec-breadcrumbs-wrap {
    position: static;
    padding-inline: var(--wp--preset--spacing--sm-plus);
  }

  :root :where(.mec-pattern-intro .mec-breadcrumbs) {
    padding-block: var(--wp--preset--spacing--sm);
    padding-inline-start: 0;
  }

  :root :where(.mec-pattern-intro) {
    padding-block-start: var(--wp--preset--spacing--lg);
  }

  :root :where(.mec-pattern-intro__columns) {
    flex-wrap: wrap;
    min-height: auto;
  }

  .mec-pattern-intro__columns > .wp-block-column {
    flex: 0 0 100%;
    max-width: 100%;
  }

  :root :where(.mec-pattern-intro__content) {
    padding-block-start: 0;
    padding-block-end: var(--wp--preset--spacing--lg);
    padding-inline: var(--wp--preset--spacing--sm-plus);
    align-items: flex-start;
  }

  :root :where(.mec-pattern-intro__content > *) {
    max-width: none;
    width: 100%;
  }

  :root :where(.mec-pattern-intro__title) {
    font-size: var(--wp--preset--font-size--display-medium);
  }

}

/* ── Service Content, Pattern Services, Service Cards ── */
:root :where(.single-service .wp-block-post-content) {
  padding-block: 0;
}

/* Service body content area */
:root :where(.mec-service-body) {
  padding-block: clamp(3rem, 6vw, 6rem);
  padding-inline: clamp(var(--wp--preset--spacing--sm-plus), 2vw, 2rem);
  min-height: clamp(20rem, 40vh, 40rem);
}

:root :where(.mec-service-body > *) {
  margin-block-start: 0;
  margin-block-end: var(--wp--preset--spacing--md);
}

:root :where(.mec-service-body > *:last-child) {
  margin-block-end: 0;
}

:root :where(.mec-pattern-services) {
  padding-block: clamp(var(--wp--preset--spacing--lg-plus), 4vw, 5rem);
}

:root :where(.mec-pattern-services__title) {
  margin: 0;
  color: var(--wp--preset--color--neutral-dark);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--h-1);
  font-weight: 800;
  line-height: var(--wp--custom--line-height--heading);
  letter-spacing: var(--wp--custom--letter-spacing--snug);
}


:root :where(.mec-pattern-services .wp-block-post-template.mec-pattern-services__grid) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(var(--wp--preset--spacing--sm-plus), 3vw, var(--wp--preset--spacing--lg-plus));
}


:root :where(.mec-service-card) {
  gap: var(--wp--preset--spacing--xs);
  align-items: flex-start;
}

:root :where(.mec-service-card__content) {
  min-width: 0;
  padding-top: var(--wp--preset--spacing--3-xs);
}

:root :where(.mec-service-card__image) {
  margin: 0;
  flex-shrink: 0;
}

:root :where(.mec-service-card__image a) {
  display: block;
}

:root :where(.mec-service-card__image img) {
  width: var(--wp--custom--layout--service-media-width);
  height: var(--wp--custom--layout--service-media-width);
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--wp--preset--color--accent);
  padding: 0.15rem;
}

:root :where(.mec-service-card__title) {
  margin: 0;
  color: var(--wp--preset--color--neutral-dark);
  font-size: var(--wp--preset--font-size--h-3);
  font-weight: 700;
  line-height: var(--wp--custom--line-height--normal);
  letter-spacing: var(--wp--custom--letter-spacing--snug);
}

:root :where(.mec-service-card__title a) {
  color: inherit;
  text-decoration: none;
}

:root :where(.mec-service-card__title a:hover),
:root :where(.mec-service-card__title a:focus-visible) {
  color: var(--wp--preset--color--secondary);
}

:root :where(.mec-service-card__text) {
  margin: 0.8rem 0 0;
}

:root :where(.mec-service-card__text .wp-block-post-excerpt__excerpt) {
  margin: 0;
  color: var(--wp--preset--color--neutral-mid);
  font-size: var(--wp--preset--font-size--body-small);
  line-height: var(--wp--custom--line-height--loose);
  letter-spacing: var(--wp--custom--letter-spacing--body);
}

:root :where(.mec-service-card__link) {
  display: inline-block;
  margin: 0.85rem 0 0;
  color: var(--wp--preset--color--accent);
  font-size: var(--wp--preset--font-size--overline);
  font-weight: 500;
  letter-spacing: var(--wp--custom--letter-spacing--body);
  line-height: var(--wp--custom--line-height--loose);
  text-decoration: none;
  text-transform: uppercase;
}

:root :where(.mec-service-card__link:hover),
:root :where(.mec-service-card__link:focus-visible) {
  color: var(--wp--preset--color--neutral-dark);
}

:root :where(.mec-pattern-services__empty) {
  margin: var(--wp--preset--spacing--xs) 0 0;
  text-align: center;
}


@media (max-width: 60rem) {
  :root :where(.mec-service-body) {
    padding-block: clamp(2rem, 4vw, 3rem);
    padding-inline: var(--wp--preset--spacing--sm-plus);
  }

  :root :where(.mec-pattern-services .wp-block-post-template.mec-pattern-services__grid) {
    grid-template-columns: 1fr;
  }

  .mec-service-card.wp-block-group {
    display: grid;
    grid-template-columns: var(--wp--custom--layout--service-card-mobile-size) 1fr;
    column-gap: var(--wp--preset--spacing--2-xs);
    align-items: start;
  }

  :root :where(.mec-service-card__image) {
    grid-column: 1;
    grid-row: 1;
  }

  :root :where(.mec-service-card__image img) {
    width: var(--wp--custom--layout--service-card-mobile-size);
    height: var(--wp--custom--layout--service-card-mobile-size);
  }

  :root :where(.mec-service-card__content) {
    grid-column: 2;
    grid-row: 1;
    padding-top: 0;
  }

}

/* ── Split Row ── */
:root :where(.mec-split-row) {
  padding-block: var(--wp--preset--spacing--3-xl);
}

:root :where(.mec-split-row .wp-block-media-text) {
  column-gap: var(--wp--preset--spacing--2-xl); /* 64px */
}

@media (max-width: 48rem) {
  .mec-split-row .wp-block-media-text {
    grid-template-columns: 100% !important;
    grid-template-rows: auto auto;
  }

  /* Image always on top when stacked */
  .mec-split-row .wp-block-media-text .wp-block-media-text__media {
    grid-column: 1;
    grid-row: 1;
    min-height: 20rem;
  }

  .mec-split-row .wp-block-media-text .wp-block-media-text__content {
    grid-column: 1;
    grid-row: 2;
  }
}

/* ── Responsive: Split Row — reduce vertical padding when stacked ── */
@media (max-width: 60rem) {
  .mec-split-row.wp-block-group {
    padding-top: var(--wp--preset--spacing--2-xl);
    padding-bottom: var(--wp--preset--spacing--2-xl);
  }
}


/* ─── CTA Section ────────────────────────────────────────────── */
/* Mapped from TSX: bg-secondary py-20 md:py-24 max-w-2xl centered */

:root :where(.mec-cta-section) {
  padding-block: clamp(5rem, 5.5vw, 6rem);
}

:root :where(.mec-cta-section__inner) {
  text-align: center;
}

:root :where(.mec-cta-section__heading) {
  margin: 0 0 1rem;
  color: var(--wp--preset--color--white);
  font-size: clamp(var(--wp--preset--font-size--h-2), 3vw, var(--wp--preset--font-size--display-medium));
  font-weight: 700;
  line-height: var(--wp--custom--line-height--heading);
}

:root :where(.mec-cta-section__subtext) {
  margin: 0 0 2rem;
  color: color-mix(in srgb, var(--wp--preset--color--white) 80%, transparent);
  font-size: var(--wp--preset--font-size--body-xl);
  line-height: var(--wp--custom--line-height--loose);
}

:root :where(.mec-cta-section__button .wp-block-button__link) {
  height: var(--wp--custom--component--button-height);
  padding-inline: var(--wp--preset--spacing--lg-plus);
  border-radius: 9999px;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 30%, transparent);
  background: transparent;
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--body);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

:root :where(.mec-cta-section__button .wp-block-button__link:hover),
:root :where(.mec-cta-section__button .wp-block-button__link:focus-visible) {
  background: color-mix(in srgb, var(--wp--preset--color--white) 10%, transparent);
  border-color: color-mix(in srgb, var(--wp--preset--color--white) 50%, transparent);
  color: var(--wp--preset--color--white);
}


/* ── Benefits Bar ── */
:root :where(.mec-benefits-bar) {
  padding-block: var(--wp--preset--spacing--3-xl);
}

/* Vertically centre icon items across all columns */
:root :where(.mec-benefits-bar .wp-block-columns) {
  align-items: center;
}

/* Auto-border: works for any number of columns, no class needed on individual columns */
:root :where(.mec-benefits-bar .wp-block-column:not(:first-child)) {
  border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--neutral-dark) 15%, transparent);
  padding-left: var(--wp--preset--spacing--lg);
}


/* ── Responsive: Benefits Bar — first col gets border on mobile to match stacked siblings ── */
@media (max-width: 48rem) {
  :root :where(.mec-benefits-bar .wp-block-column:first-child) {
    border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--neutral-dark) 15%, transparent);
    padding-left: var(--wp--preset--spacing--lg);
  }
}


/* ── Callout Bar — teal split section ── */
:root :where(.mec-callout-bar) {
  padding-block: var(--wp--preset--spacing--3-xl);
}

:root :where(.mec-callout-bar__text.wp-block-group) {
  border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 35%, transparent);
  padding-left: var(--wp--preset--spacing--2-xl);
}


/* ── Responsive: Callout Bar ── */
@media (max-width: 48rem) {
  .mec-callout-bar .wp-block-columns {
    flex-direction: column;
  }

  .mec-callout-bar__text.wp-block-group {
    border-left: none;
    padding-left: 0;
  }
}


/* ── Split Section — white background variant ── */
:root :where(.mec-split-section) {
  padding-block: var(--wp--preset--spacing--3-xl);
}

:root :where(.mec-split-section__text.wp-block-group) {
  border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 15%, transparent);
  padding-left: var(--wp--preset--spacing--2-xl);
}


/* ── Responsive: Switchboard Upgrades / Split Section ── */
@media (max-width: 48rem) {
  .mec-split-section .wp-block-columns {
    flex-direction: column;
  }

  .mec-split-section__text.wp-block-group {
    border-left: none;
    padding-left: 0;
  }
}


/* ── Testimonial Section (static pattern + dynamic slider) ── */

/* Shared section padding */
:root :where(.mec-testimonial-section) {
  padding-top: var(--wp--preset--spacing--3-xl);
  padding-bottom: var(--wp--preset--spacing--3-xl);
}

/* Static pattern column alignment */
:root :where(.mec-testimonial-section .wp-block-columns) {
  align-items: center;
}

/* Quotemark — large serif decorative character */
.mec-quotemark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 6rem;
  line-height: 0.8;
  text-align: right;
  color: var(--wp--preset--color--neutral-mid);
  margin: 0;
  padding: 0;
}

/* Attribution panel */
:root :where(.mec-testimonial-attribution.wp-block-group) {
  border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 25%, transparent);
  padding-left: var(--wp--preset--spacing--md);
}

:root :where(.mec-testimonial-role) {
  text-transform: uppercase;
  letter-spacing: 0.12em;
}


/* ── Responsive: Testimonial Section — quotemark to corner, stack columns ── */
@media (max-width: 48rem) {
  :root :where(.mec-testimonial-section .wp-block-columns) {
    flex-direction: column;
    position: relative;
    padding-top: 0;
    gap: 0.5em;
  }

  :root :where(.mec-testimonial-section .wp-block-column:first-child) {
    position: absolute;
    top: -40px;
    left: 0;
    flex-basis: auto !important;
    width: auto;
  }

  .mec-quotemark {
    font-size: 8rem;
    text-align: left;
    opacity: 0.5;
  }

  :root :where(.mec-testimonial-attribution.wp-block-group) {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 25%, transparent);
    padding-top: var(--wp--preset--spacing--md);
    margin-top: var(--wp--preset--spacing--md);
  }
}


/* ── Testimonial Slider (dynamic block) ── */

.wp-block-mec-testimonial-slider {
  width: 100%;
}

.mec-ts-inner {
  max-width: var(--wp--style--global--wide-size, 90rem);
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--lg);
}

/* Slides stacked in same grid cell — fade between them */
.mec-testimonial-slider {
  display: grid;
  position: relative;
}

.mec-testimonial-slide {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
  visibility: hidden;
}

.mec-testimonial-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

/* Three-column layout inside each slide */
.mec-ts-columns {
  display: flex;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--2-xl);
}

.mec-ts-col-quote {
  flex: 0 0 15%;
  padding-top: var(--wp--preset--spacing--md);
}

.mec-ts-col-body {
  flex: 1 1 0;
  padding-top: var(--wp--preset--spacing--md);
}

.mec-ts-col-attr {
  flex: 0 0 28%;
}

.mec-ts-quote {
  font-style: italic;
  font-size: var(--wp--preset--font-size--body-xl);
}

.mec-ts-quote p {
  margin: 0 0 var(--wp--preset--spacing--sm-plus);
}

.mec-ts-quote .mec-section-mark {
  margin-top: var(--wp--preset--spacing--md);
}

/* Navigation dots */
.mec-ts-dots {
  display: flex;
  justify-content: center;
  gap: var(--wp--preset--spacing--xs);
  margin-top: var(--wp--preset--spacing--lg);
}

.mec-ts-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: color-mix(in srgb, var(--wp--preset--color--white) 25%, transparent);
  transition: background 0.3s ease, transform 0.3s ease;
}

.mec-ts-dot.is-active {
  background: var(--wp--preset--color--secondary);
  transform: scale(1.25);
}

@media (max-width: 48rem) {
  .mec-ts-columns {
    flex-direction: column;
    gap: var(--wp--preset--spacing--lg);
  }

  .mec-ts-col-quote,
  .mec-ts-col-attr {
    flex: 0 0 auto;
    width: 100%;
  }

  .mec-ts-col-quote .mec-quotemark {
    text-align: left;
  }
}


/* ── Problem Cards ── */
/* Padding via CSS — block attrs stripped by editor; CSS is canonical */
:root :where(.mec-problems-section) {
  padding-block: var(--wp--preset--spacing--3-xl);
}

/* Constrain heading + intro text narrower than the alignwide card columns */
/* heading selector outside :where() → 0,2,0 specificity, beats WP layout rule at 0,1,0 */
:root .mec-problems-section > .wp-block-heading,
:root :where(.mec-problems-section > p) {
  max-width: 55ch;
  margin-inline: auto;
}

:root :where(.mec-problems-section .wp-block-columns) {
  align-items: stretch;
}

:root :where(.mec-problems-section .wp-block-column) {
  display: flex;
  flex-direction: column;
}

:root :where(.mec-problem-card.wp-block-group) {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.mec-problem-card__icon {
  flex-shrink: 0;
  margin: 0 auto;
  line-height: 0;
}

.mec-problem-card__icon img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

/* Alternate card — slightly reduced opacity */
.mec-problem-card--alt.wp-block-group {
  opacity: 0.88;
}


/* ── Responsive: Problem Cards — 2-col at tablet, 1-col at mobile ── */
@media (max-width: 60rem) {
  .mec-problems-section .wp-block-columns {
    flex-wrap: wrap;
  }

  .mec-problems-section .wp-block-column {
    flex-basis: calc(50% - 0.75rem) !important;
    min-width: calc(50% - 0.75rem);
  }
}

@media (max-width: 36rem) {
  .mec-problems-section .wp-block-column {
    flex-basis: 100% !important;
    min-width: 100%;
  }
}


/* ── Positive Cards ── */
/* Padding via CSS — block attrs stripped by editor; CSS is canonical */
:root :where(.mec-positive-section) {
  padding-block: var(--wp--preset--spacing--3-xl);
}

/* Constrain heading + intro text narrower than the alignwide card columns */
/* heading selector outside :where() → 0,2,0 specificity, beats WP layout rule at 0,1,0 */
:root .mec-positive-section > .wp-block-heading,
:root :where(.mec-positive-section > p) {
  max-width: 55ch;
  margin-inline: auto;
}

:root :where(.mec-positive-section .wp-block-columns) {
  align-items: stretch;
}

:root :where(.mec-positive-section .wp-block-column) {
  display: flex;
  flex-direction: column;
}

:root :where(.mec-positive-card.wp-block-group) {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}


/* ── Responsive: Positive Cards — 2-col at tablet, 1-col at mobile ── */
@media (max-width: 60rem) {
  .mec-positive-section .wp-block-columns {
    flex-wrap: wrap;
  }

  .mec-positive-section .wp-block-column {
    flex-basis: calc(50% - 0.75rem) !important;
    min-width: calc(50% - 0.75rem);
  }
}

@media (max-width: 36rem) {
  .mec-positive-section .wp-block-column {
    flex-basis: 100% !important;
    min-width: 100%;
  }
}


/* ── FAQ Section ── */
/* Padding via CSS — block attrs stripped by editor; CSS is canonical */
:root :where(.mec-faq-section) {
  padding-block: var(--wp--preset--spacing--3-xl);
}

:root :where(.mec-faq-section .wp-block-details) {
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--neutral-dark) 15%, transparent);
  padding-block: var(--wp--preset--spacing--md);
  margin: 0;
}

:root :where(.mec-faq-section .wp-block-details:first-of-type) {
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--neutral-dark) 15%, transparent);
  margin-top: var(--wp--preset--spacing--lg);
}

:root :where(.mec-faq-section .wp-block-details summary) {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--body-xl);
  font-weight: 700;
  color: var(--wp--preset--color--neutral-dark);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--wp--preset--spacing--lg);
}

/* Hide native disclosure triangle */
:root :where(.mec-faq-section .wp-block-details summary::-webkit-details-marker),
:root :where(.mec-faq-section .wp-block-details summary::marker) {
  display: none;
}

/* +/− icon */
:root :where(.mec-faq-section .wp-block-details summary::after) {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  flex-shrink: 0;
  color: var(--wp--preset--color--neutral-mid);
  transition: transform 0.2s ease;
}

:root :where(.mec-faq-section .wp-block-details[open] summary::after) {
  content: '−';
}

:root :where(.mec-faq-section .wp-block-details p) {
  color: var(--wp--preset--color--neutral-mid);
  font-size: var(--wp--preset--font-size--body);
  line-height: var(--wp--custom--line-height--loose);
  margin-top: var(--wp--preset--spacing--sm);
  margin-bottom: 0;
  max-width: 72ch;
}


/* ─── Project Cards (archive + related projects) ──────────────────────── */

/* Card wrapper: rounded corners + clip so image fills cleanly to the edges */
:root :where(.mec-project-card) {
  --wp--style--block-gap: 0;
  border-radius: var(--wp--custom--border-radius--md);
  overflow: hidden;
}

:root :where(.mec-project-card .wp-block-post-featured-image) {
  margin-bottom: 0;
}

:root :where(.mec-project-card .wp-block-post-featured-image img) {
  display: block;
  object-fit: cover;
  width: 100%;
}

/* White label area — only the title, not the image */
:root :where(.mec-project-card .wp-block-post-title) {
  background: var(--wp--preset--color--white);
  margin-block-start: 0;
  margin-block-end: 0;
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm) var(--wp--preset--spacing--sm);
}

:root :where(.mec-project-card .wp-block-post-title a) {
  color: var(--wp--preset--color--neutral-dark);
  text-decoration: none;
  transition: color 0.2s ease;
}

:root :where(.mec-project-card .wp-block-post-title a:hover),
:root :where(.mec-project-card .wp-block-post-title a:focus-visible) {
  color: var(--wp--preset--color--secondary);
}

/* ─── Masonry archive grid ─────────────────────────────────────────────── */

/* Use plain class selectors (not :where) so these beat WP's :where-wrapped flex styles */
.mec-projects-grid .wp-block-post-template {
  columns: 3;
  column-gap: var(--wp--preset--spacing--md);
  display: block; /* override WP flex layout */
}

.mec-projects-grid .wp-block-post-template > li {
  break-inside: avoid;
  margin-bottom: var(--wp--preset--spacing--md);
}

@media (min-width: 48rem) and (max-width: 64rem) {
  .mec-projects-grid .wp-block-post-template {
    columns: 2;
  }
}

@media (max-width: 48rem) {
  .mec-projects-grid .wp-block-post-template {
    columns: 1;
  }
}


/* ── Contact Form (CF7, html_class="contact-form") ──────────────
   Scope all rules to .contact-form to avoid touching other forms. */

.contact-form .wpcf7-form p {
  margin-block: 0 var(--wp--preset--spacing--sm);
}

.contact-form .wpcf7-form p:last-of-type {
  margin-bottom: 0;
}

.contact-form label {
  display: block;
  font-size: var(--wp--preset--font-size--caption-large);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--letter-spacing--body);
  color: var(--wp--preset--color--neutral-dark);
  margin-bottom: var(--wp--preset--spacing--2-xs);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--body);
  line-height: var(--wp--custom--line-height--body);
  color: var(--wp--preset--color--neutral-dark);
  background: var(--wp--preset--color--white);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--neutral-dark) 20%, transparent);
  border-radius: 0;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: var(--wp--preset--color--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);
}

.contact-form textarea {
  min-height: 9rem;
  resize: vertical;
}

.contact-form input[type="submit"],
.contact-form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  height: var(--wp--custom--component--button-height);
  padding-inline: var(--wp--preset--spacing--lg-plus);
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--body);
  font-weight: 700;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.2s ease;
  margin-top: var(--wp--preset--spacing--xs);
}

.contact-form input[type="submit"]:hover,
.contact-form .wpcf7-submit:hover {
  background: var(--wp--preset--color--neutral-dark);
}

.contact-form input[type="submit"]:focus-visible,
.contact-form .wpcf7-submit:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

/* CF7 AJAX response message */
.contact-form .wpcf7-response-output {
  margin: var(--wp--preset--spacing--sm) 0 0;
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
  font-size: var(--wp--preset--font-size--body-small);
  border-left: 3px solid var(--wp--preset--color--accent);
  background: color-mix(in srgb, var(--wp--preset--color--accent) 8%, var(--wp--preset--color--white));
  color: var(--wp--preset--color--neutral-dark);
}

/* Inline validation error */
.contact-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: var(--wp--preset--spacing--3-xs);
  font-size: var(--wp--preset--font-size--caption);
  color: var(--wp--preset--color--secondary);
}

.contact-form input.wpcf7-not-valid,
.contact-form textarea.wpcf7-not-valid {
  border-color: var(--wp--preset--color--secondary);
}

/* ── Contact Split Section (form left / map right) ─────────────── */

/* Section: padding handled by block spacing attributes */
:root :where(.mec-contact-split) {
  padding-block: 0;
}

/* Both columns same height */
.mec-contact-split .wp-block-columns {
  align-items: stretch;
}

/* Compact variant — applied via html_class="contact-form contact-form--compact" on CF7 shortcode */
.contact-form--compact input[type="text"],
.contact-form--compact input[type="email"],
.contact-form--compact input[type="tel"],
.contact-form--compact textarea,
.contact-form--compact select {
  background: transparent;
  padding-block: 0.35rem;
  font-size: var(--wp--preset--font-size--caption-large);
}

.contact-form--compact .wpcf7-form p {
  margin-bottom: 0.6rem;
}

.contact-form--compact label {
  font-size: var(--wp--preset--font-size--caption);
  margin-bottom: 0.2rem;
}

.contact-form--compact textarea {
  min-height: 5rem;
}

.contact-form--compact input[type="text"]:focus,
.contact-form--compact input[type="email"]:focus,
.contact-form--compact input[type="tel"]:focus,
.contact-form--compact textarea:focus,
.contact-form--compact select:focus {
  border-color: var(--wp--preset--color--secondary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--secondary) 12%, transparent);
}

/* Map column: flex so iframe fills the full column height */
.mec-contact-map-col.wp-block-column {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
}

.mec-contact-map-col .wp-block-html {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mec-contact-map-col iframe {
  flex: 1;
  width: 100%;
  min-height: 380px;
  border: 0;
  display: block;
}

/* ── Contact Tiles Section ──────────────────────────────────────── */

/* Tile group: small gap between icon / heading / body / link */
:root :where(.mec-contact-tile.wp-block-group) {
  gap: var(--wp--preset--spacing--xs);
}

/* Icon: core/image figure styled as a soft orange circle */
figure.wp-block-image.mec-contact-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: color-mix(in srgb, var(--wp--preset--color--secondary) 12%, transparent);
  border-radius: 50%;
  margin: 0;
  padding: 0.65rem;
  box-sizing: border-box;
  overflow: hidden;
}

figure.wp-block-image.mec-contact-tile-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Tile link colour */
.mec-contact-tile a {
  color: var(--wp--preset--color--accent);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.mec-contact-tile a:hover {
  color: var(--wp--preset--color--secondary);
  text-decoration: underline;
}

@media (max-width: 48rem) {
  .mec-contact-map-col iframe {
    min-height: 260px;
  }
}


/* ── Section padding: scale 3-xl → lg on mobile ── */
@media (max-width: 48rem) {
  :root :where(.mec-split-row),
  :root :where(.mec-benefits-bar),
  :root :where(.mec-callout-bar),
  :root :where(.mec-split-section),
  :root :where(.mec-testimonial-section),
  :root :where(.mec-problems-section),
  :root :where(.mec-positive-section),
  :root :where(.mec-faq-section) {
    padding-block: var(--wp--preset--spacing--lg);
  }
}




/* ==========================================================================
   News / Blog — index feed, cards, single post, generic page header
   ========================================================================== */

/* ── Generic page header (page.html) ──────────────────────────────────────── */

:root :where(.mec-page-content .wp-block-post-content h2) {
  margin-top: var(--wp--preset--spacing--lg);
  margin-bottom: var(--wp--preset--spacing--xs);
}

:root :where(.mec-page-content .wp-block-post-content h3) {
  margin-top: var(--wp--preset--spacing--md);
  margin-bottom: var(--wp--preset--spacing--xs);
}

:root :where(.mec-page-content .wp-block-post-content p) {
  margin-top: 0;
  margin-bottom: var(--wp--preset--spacing--sm);
  line-height: var(--wp--custom--line-height--relaxed);
}

:root :where(.mec-page-content .wp-block-post-content ul),
:root :where(.mec-page-content .wp-block-post-content ol) {
  margin-top: 0;
  margin-bottom: var(--wp--preset--spacing--sm);
  padding-left: var(--wp--preset--spacing--lg);
  line-height: var(--wp--custom--line-height--relaxed);
}

:root :where(.mec-page-content .wp-block-post-content a) {
  color: var(--wp--preset--color--accent);
  text-decoration: underline;
  transition: color 0.2s ease;
}

:root :where(.mec-page-content .wp-block-post-content a:hover) {
  color: var(--wp--preset--color--secondary);
}

/* Table (used in Privacy Policy cookie table) */
:root :where(.mec-page-content .wp-block-table table) {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wp--preset--font-size--body-small);
  margin-bottom: var(--wp--preset--spacing--sm);
}

:root :where(.mec-page-content .wp-block-table th),
:root :where(.mec-page-content .wp-block-table td) {
  text-align: left;
  padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--sm);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--neutral-dark) 15%, transparent);
  vertical-align: top;
}

:root :where(.mec-page-content .wp-block-table th) {
  font-weight: 600;
  background: color-mix(in srgb, var(--wp--preset--color--neutral-dark) 5%, transparent);
  font-size: var(--wp--preset--font-size--caption-large);
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--letter-spacing--body);
}

@media (max-width: 48rem) {
  :root :where(.mec-page-content .wp-block-table table) {
    display: block;
    overflow-x: auto;
  }
}

/* ── News index ───────────────────────────────────────────────────────────── */

/* Card grid — three columns, collapses at smaller viewports */
:root :where(.mec-news-grid > .wp-block-post-template.is-layout-grid) {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--lg);
}

@media (max-width: 60rem) {
  :root :where(.mec-news-grid > .wp-block-post-template.is-layout-grid) {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 40rem) {
  :root :where(.mec-news-grid > .wp-block-post-template.is-layout-grid) {
    grid-template-columns: 1fr;
  }
}

/* Card container */
:root :where(.mec-news-card.wp-block-group) {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Featured image — no extra margin */
:root :where(.mec-news-card .wp-block-post-featured-image) {
  margin: 0;
  overflow: hidden;
}

:root :where(.mec-news-card .wp-block-post-featured-image img) {
  transition: transform 0.35s ease;
}

:root :where(.mec-news-card .wp-block-post-featured-image a:hover img) {
  transform: scale(1.03);
}

/* Date */
:root :where(.mec-news-card .wp-block-post-date) {
  margin: var(--wp--preset--spacing--sm) 0 0;
}

/* Title */
:root :where(.mec-news-card .wp-block-post-title) {
  margin: var(--wp--preset--spacing--2-xs) 0 0;
  line-height: var(--wp--custom--line-height--subheading);
}

:root :where(.mec-news-card .wp-block-post-title a) {
  color: var(--wp--preset--color--neutral-dark);
  text-decoration: none;
  transition: color 0.2s ease;
}

:root :where(.mec-news-card .wp-block-post-title a:hover) {
  color: var(--wp--preset--color--secondary);
}

/* Excerpt + read more */
:root :where(.mec-news-card .wp-block-post-excerpt) {
  margin: var(--wp--preset--spacing--xs) 0 0;
  flex: 1;
}

:root :where(.mec-news-card .wp-block-post-excerpt__excerpt) {
  font-size: var(--wp--preset--font-size--body-small);
  color: var(--wp--preset--color--neutral-mid);
  line-height: var(--wp--custom--line-height--relaxed);
  margin: 0 0 var(--wp--preset--spacing--2-xs);
}

:root :where(.mec-news-card .wp-block-post-excerpt__more-link) {
  display: inline-block;
  font-size: var(--wp--preset--font-size--body-small);
  font-weight: 600;
  color: var(--wp--preset--color--secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

:root :where(.mec-news-card .wp-block-post-excerpt__more-link:hover) {
  color: var(--wp--preset--color--neutral-dark);
  text-decoration: underline;
}

/* Pagination */
:root :where(.mec-news-grid .wp-block-query-pagination) {
  margin-top: var(--wp--preset--spacing--2-xl);
  display: flex;
  justify-content: center;
  gap: var(--wp--preset--spacing--xs);
}

:root :where(.mec-news-grid .wp-block-query-pagination a),
:root :where(.mec-news-grid .wp-block-query-pagination-numbers .page-numbers) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding-inline: var(--wp--preset--spacing--xs);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--neutral-dark) 20%, transparent);
  border-radius: var(--wp--custom--border-radius--sm);
  font-size: var(--wp--preset--font-size--body-small);
  color: var(--wp--preset--color--neutral-dark);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

:root :where(.mec-news-grid .wp-block-query-pagination a:hover) {
  background: var(--wp--preset--color--secondary);
  border-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--white);
}

:root :where(.mec-news-grid .wp-block-query-pagination-numbers .current) {
  background: var(--wp--preset--color--primary);
  border-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  font-weight: 600;
}

/* ── Single post ──────────────────────────────────────────────────────────── */

/* Post header — date + mark + title */
:root :where(.mec-post-header .wp-block-post-date) {
  margin: 0;
  font-size: var(--wp--preset--font-size--caption-large);
  color: var(--wp--preset--color--neutral-mid);
}

:root :where(.mec-post-header .wp-block-post-title) {
  margin: 0;
  font-size: var(--wp--preset--font-size--h-1);
  font-weight: 800;
  line-height: var(--wp--custom--line-height--heading);
  color: var(--wp--preset--color--neutral-dark);
}

/* Hero image — no gap above, slight bottom breathing room */
:root :where(.mec-post-hero-image) {
  padding-block: 0;
}

:root :where(.mec-post-hero-image .wp-block-post-featured-image) {
  margin: 0;
}

/* Post body content */
:root :where(.mec-post-content .wp-block-post-content p) {
  margin-top: 0;
  margin-bottom: var(--wp--preset--spacing--sm);
  line-height: var(--wp--custom--line-height--relaxed);
}

:root :where(.mec-post-content .wp-block-post-content h2) {
  margin-top: var(--wp--preset--spacing--lg);
  margin-bottom: var(--wp--preset--spacing--xs);
}

:root :where(.mec-post-content .wp-block-post-content h3) {
  margin-top: var(--wp--preset--spacing--md);
  margin-bottom: var(--wp--preset--spacing--xs);
}

:root :where(.mec-post-content .wp-block-post-content ul),
:root :where(.mec-post-content .wp-block-post-content ol) {
  padding-left: var(--wp--preset--spacing--lg);
  margin-bottom: var(--wp--preset--spacing--sm);
  line-height: var(--wp--custom--line-height--relaxed);
}

:root :where(.mec-post-content .wp-block-post-content a) {
  color: var(--wp--preset--color--accent);
  text-decoration: underline;
  transition: color 0.2s ease;
}

:root :where(.mec-post-content .wp-block-post-content a:hover) {
  color: var(--wp--preset--color--secondary);
}

/* Back to news link */
:root :where(a.mec-post-back-link) {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--2-xs);
  font-size: var(--wp--preset--font-size--body-small);
  font-weight: 600;
  color: var(--wp--preset--color--neutral-mid);
  text-decoration: none;
  transition: color 0.2s ease;
}

:root :where(a.mec-post-back-link:hover) {
  color: var(--wp--preset--color--secondary);
}


/* ── Sticky nav ── */
#mec-sticky-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: var(--wp--preset--color--primary);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-100%);
  transition: transform 0.25s ease;
  display: flex;
  align-items: center;
  min-height: var(--wp--custom--component--sticky-nav-height); /* comfortable tap target on mobile */
}

#mec-sticky-nav.is-visible {
  transform: translateY(0);
}

#mec-sticky-nav nav.mec-site-header__nav {
  border-top: none;
  padding-block: var(--wp--preset--spacing--2-xs);
  width: 100%;
}

#mec-sticky-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
#mec-sticky-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-submenu__toggle {
  color: var(--wp--preset--color--white);
}