.sr-only{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

p a.button {
    margin-bottom: 0;
}

/* .layout h2 {
    font-size: 2rem;
    font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, color-emoji;
    font-weight: 600;
    line-height: 1.2;
    margin: 25px 0 10px;
}

.layout figcaption.wp-element-caption {
    color: var(--color-text-dimmed);
    font-size: .875rem;
    line-height: 1.42;
    padding-left: 54px;
    position: relative;
}

.layout figcaption.wp-element-caption:before {
    background: var(--color-blue-100);
    border-radius: 4px;
    bottom: 0;
    content: "";
    display: block;
    height: 100%;
    left: 30px;
    margin: auto;
    position: absolute;
    right: auto;
    top: 0;
    width: 4px;
}

.layout figure img {
    border-radius: 16px;
    display: block;
    margin-bottom: 10px;
    width: 100%;
} */

.layout a {
    cursor: pointer;
}

:is(ol,ul):not([class],[id]) {
    margin: 0 0 20px 0px;
}

/*
p:has(+ :is(ul:not([class]), ol:not([class]))) {
    margin-bottom: 5px;
}
*/

.address-window {
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
}

#map img {
    background: none;
}

/* Margin Top */
.mt0  { margin-top:  0px; }
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt40 { margin-top: 40px; }
.mt50 { margin-top: 50px; }

/* Margin Bottom */
.mb0  { margin-bottom:  0px; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }
.mb50 { margin-bottom: 50px; }

/* Margin Left */
.ml0  { margin-left:  0px; }
.ml10 { margin-left: 10px; }
.ml20 { margin-left: 20px; }
.ml30 { margin-left: 30px; }
.ml40 { margin-left: 40px; }
.ml50 { margin-left: 50px; }

/* Margin Right */
.mr0  { margin-right:  0px; }
.mr10 { margin-right: 10px; }
.mr20 { margin-right: 20px; }
.mr30 { margin-right: 30px; }
.mr40 { margin-right: 40px; }
.mr50 { margin-right: 50px; }

/* Padding Top */
.pt0  { padding-top:  0px; }
.pt10 { padding-top: 10px; }
.pt20 { padding-top: 20px; }
.pt30 { padding-top: 30px; }
.pt40 { padding-top: 40px; }
.pt50 { padding-top: 50px; }

/* Padding Bottom */
.pb0  { padding-bottom:  0px !important; }
.pb10 { padding-bottom: 10px; }
.pb20 { padding-bottom: 20px; }
.pb30 { padding-bottom: 30px; }
.pb40 { padding-bottom: 40px; }
.pb50 { padding-bottom: 50px; }

/* Padding Left */
.pl0  { padding-left:  0px; }
.pl10 { padding-left: 10px; }
.pl20 { padding-left: 20px; }
.pl30 { padding-left: 30px; }
.pl40 { padding-left: 40px; }
.pl50 { padding-left: 50px; }

/* Padding Right */
.pr0  { padding-right:  0px; }
.pr10 { padding-right: 10px; }
.pr20 { padding-right: 20px; }
.pr30 { padding-right: 30px; }
.pr40 { padding-right: 40px; }
.pr50 { padding-right: 50px; }

.wp-block-tco-blocks-image-with-text-block .column-box__image {
    aspect-ratio: 0;
}

.slideshow__item {
    width:auto;
}

figure.wp-block-post-featured-image img,
div.top-image img {
    border-radius: 0;
}

figure.wp-block-post-featured-image {
    margin-top: 0;
}

.wp-block-tco-blocks-info-box-block.desc-box .desc-box__text p:last-child {
    margin-bottom: 0;
}

.desc-box--full-width {
    border-radius: 0;
}

.header__social-list img, .footer__social-list img {
    border-radius: 0;
    background: none;
}

@media (any-hover: hover) {
    .footer__social-link:hover img {
    filter: brightness(0) invert(1);
    }
}

.subscribe-popup .custom_form_container input[type="email"] {
  border: .5px solid var(--color-neutral-200);
  border-radius: 100px;
  color: var(--color-text-primary);
  background: transparent;
  height: 45px;
  font-size: 1rem;
}

form.cf_form input::placeholder {
  font-size: 1rem;
  color: var(--color-text-dimmed);
}

.slide-box__text-above-links {
    /* Now rendered inside .slide-box__scrollable, which already provides the
       horizontal padding — so align with the links instead of double-indenting. */
    padding-left: 0;
    padding-right: 0;
    font-size:18px;
    line-height:1.5em;
}

/* Slide box: let the scroll area flex within the fixed-height panel so the
   pinned "View all" button below it is never clipped at the bottom (desktop).
   Overrides the compiled .slide-box__scrollable{height:100%;flex-shrink:0}. */
.slide-box__scrollable {
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
}
.slide-box__button {
    flex-shrink: 0;
}


div.wpforms-container-full .wpforms-field.wpforms-field-checkbox ul li input+label, div.wpforms-container-full .wpforms-field.wpforms-field-radio ul li input+label, div.wpforms-container-full .wpforms-field.wpforms-field-payment-checkbox ul li input+label, div.wpforms-container-full .wpforms-field.wpforms-field-payment-multiple ul li input+label, div.wpforms-container-full .wpforms-field.wpforms-field-gdpr-checkbox ul li input+label {
    padding-inline-start: 30px !important;
}

/* On-page menu block — colour overrides via block settings (--pm-* CSS custom properties) */

/* Menu bar background */
.page-menu-a__wrapper,
.page-menu-b__wrapper,
.page-menu-c__wrapper {
    background: var(--pm-bg, var(--color-grey-243));
}

/* Heading colour */
.page-menu-a__heading,
.page-menu-b__heading,
.page-menu-c__heading {
    color: var(--pm-heading, inherit);
}

/* Links / buttons — normal state.
   Default is text-link (transparent bg); set --pm-btn-bg to make them buttons. */
.page-menu-a__button,
.page-menu-b__button,
.page-menu-c__button {
    background: var(--pm-btn-bg, transparent);
    border-color: var(--pm-btn-bg, transparent);
    color: var(--pm-link, inherit);
}

/* Links / buttons — hover/focus state */
.page-menu-a__button:hover,
.page-menu-a__button:focus-visible,
.page-menu-b__button:hover,
.page-menu-b__button:focus-visible,
.page-menu-c__button:hover,
.page-menu-c__button:focus-visible {
    /* If hover-bg is set use it; else fall back to the regular button bg; else site default */
    background:   var(--pm-btn-bg-hover, var(--pm-btn-bg, var(--page-menu-button-color-hover)));
    border-color: var(--pm-btn-bg-hover, var(--pm-btn-bg, transparent));
    color:        var(--pm-link-hover, var(--pm-link, inherit));
}

/* Submenu dropdown background */
.page-menu-a__menu-list,
.page-menu-b__menu-list,
.page-menu-c__menu-list {
    background: var(--pm-sub-bg, #fff);
    width: 300px;
}

/* Submenu links */
.page-menu-a__menu-link,
.page-menu-b__menu-link,
.page-menu-c__menu-link {
    color: var(--pm-sub-link, inherit);
}

.page-menu-a__menu-link:hover,
.page-menu-a__menu-link:focus-visible,
.page-menu-b__menu-link:hover,
.page-menu-b__menu-link:focus-visible,
.page-menu-c__menu-link:hover,
.page-menu-c__menu-link:focus-visible {
    color: var(--pm-sub-link-hover, var(--page-menu-dropown-color-hover));
}

img[src$=".svg"] {
    border-radius: initial;
    background: initial;
}

figure img[src$=".svg"] {
    margin-bottom: 0;
}

.wp-block-tco-blocks-section-block.has-white-bg .preview__inner {
  background: var(--color-neutral-50);
}

.wp-block-tco-blocks-section-block.has-white-bg .preview__inner:hover {
  background: var(--color-blue-10);
}

.field-wrap input[type="checkbox"]:checked + label::before {
    background: url(data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%229%22%20viewBox%3D%220%200%2012%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M11.128%200.956146C11.194%201.02194%2011.2463%201.10011%2011.2821%201.18617C11.3178%201.27222%2011.3361%201.36448%2011.3361%201.45765C11.3361%201.55082%2011.3178%201.64307%2011.2821%201.72913C11.2463%201.81518%2011.194%201.89335%2011.128%201.95915L4.75305%208.33415C4.68725%208.40011%204.60908%208.45245%204.52303%208.48815C4.43697%208.52386%204.34472%208.54225%204.25155%208.54225C4.15838%208.54225%204.06612%208.52386%203.98006%208.48815C3.89401%208.45245%203.81584%208.40011%203.75005%208.33415L0.916712%205.50081C0.783706%205.36781%200.708984%205.18741%200.708984%204.99931C0.708984%204.81121%200.783706%204.63082%200.916712%204.49781C1.04972%204.36481%201.23011%204.29008%201.41821%204.29008C1.60631%204.29008%201.78671%204.36481%201.91971%204.49781L4.25155%206.83106L10.125%200.956146C10.1908%200.890182%2010.269%200.837846%2010.3551%200.802137C10.4411%200.766428%2010.5334%200.748047%2010.6265%200.748047C10.7197%200.748047%2010.812%200.766428%2010.898%200.802137C10.9841%200.837846%2011.0622%200.890182%2011.128%200.956146Z%22%20fill%3D%22%233573b9%22%2F%3E%3C%2Fsvg%3E);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.select2-container--open {
    width: 290px;
}

.menu-button__list {
    min-width: 250px;
}

.gsc-option-menu-container.gsc-inline-block {
    min-width: 120px;
}

.footer__funder-heading {
    margin-bottom: 16px;
}

.module-box .title-box p {
    color: #000000;
}

.header-d__control-divider {
    display: none !important;
}

@media (min-width: 1200px) {
    .header-d__nav-container {
        width: 1228px;
    }
}

.header-d__nav-container {
    padding: 16px 32px;
}

.column-box {
    /*align-items: center;*/
}

.desc-box__button {
    margin: 16px auto 0;
}

.desc-box__title {
    margin: 0 0 16px;
}

.text-box.theme-bg-primary {
    background-color: #fff7d4;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  margin-bottom: 30px;
}
.video-container:last-child {
    margin-bottom: 0;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.wp-block-ub-content-toggle-accordion {
    border-top: none!important;
    border-left: none!important;
    border-right: none!important;
}
.wp-block-ub-content-toggle-accordion-title-wrap {
    background: none!important;
}

.wp-block-ub-content-toggle-accordion-content-wrap {
    padding-left: 25px;
    background: var(--text-box-secondary-bg-color);
    border-radius: var(--border-radius-large);
}

.wp-block-ub-content-toggle-accordion-content-wrap > :last-child {
    margin-bottom: 10px;
}

.wp-block-group__inner-container > :first-child {
    margin-top: 0;
}

html {
  scroll-behavior: smooth;
}

.resource-preview__data {
    justify-content: start;
}


/* Prevent sidebar filter selects from expanding wider than the sidebar */
.sidebar select,
.resource-post-2__form select {
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
}

/* Sticky menu color overrides (admin: Sticky menu background/font colour settings) */
@media (min-width: 1200px) {
    .header.is-fixed .header__nav-wrapper {
        background: var(--sticky-menu-bg-color);
    }
    .header.is-fixed {
        --nav-box-text-color: var(--sticky-menu-text-color);
    }
}

/* Header nav alignment (set via admin "Align Menu" option) */
@media (min-width: 1200px) {
    .is-nav-left {
        --header-menu-justify: flex-start;
        --header-b-menu-justify: flex-start;
        --header-c-menu-justify: flex-start;
    }

    .is-nav-center {
        --header-menu-justify: center;
        --header-b-menu-justify: center;
        --header-c-menu-justify: center;
    }

    .is-nav-right {
        --header-menu-justify: flex-end;
        --header-b-menu-justify: flex-end;
        --header-c-menu-justify: flex-end;
    }
}
/* Transparent header color schema — applied via --tc-transparent-color CSS variable.
   The variable is set per-page by an inline <style> in header.php (specificity 0,2,0);
   keep this default at the SAME specificity (no :not()) so that configured colour still
   wins. Falls back to the nav text colour instead of `inherit` (which resolves to an
   invalid value and made the icons disappear when no schema colour was configured).
   The :not(.is-fixed) lives on the *property* rules below: once scrolled, the header
   gains .is-fixed while keeping .is-transparent, so those overrides must switch off and
   let the normal (dark) menu scheme take over — otherwise nav arrows/icons stay pinned
   to the transparent (light) colour. */
.js-header.is-transparent {
    --tc-transparent-color: var(--nav-box-text-color);
}

/* Nav link text */
.js-header.is-transparent:not(.is-fixed) .nav-box__button,
.js-header.is-transparent:not(.is-fixed) .nav-box-b__heading-link,
.js-header.is-transparent:not(.is-fixed) .header__large-button,
.js-header.is-transparent:not(.is-fixed) .header-subscribe,
.js-header.is-transparent:not(.is-fixed) .header-social-wrapper__label,
.js-header.is-transparent:not(.is-fixed) .search-box__action-button {
    color: var(--tc-transparent-color);
}

/* SVG icon paths: top-bar nav arrows, search icon.
   NOTE: .nav-menu__button-icon-path (the flyout toggle arrow inside the dropdown) is
   intentionally excluded — the .nav-menu dropdown is always a solid white panel, so its
   arrow must stay dark (its base rule fill:var(--nav-menu-text-color)); forcing it to the
   transparent/white colour here would make it invisible on the white dropdown. */
.js-header.is-transparent:not(.is-fixed) .nav-box__button-icon-path,
.js-header.is-transparent:not(.is-fixed) .nav-box-b__button-icon-path,
.js-header.is-transparent:not(.is-fixed) .nav-menu-b__button-icon-path,
.js-header.is-transparent:not(.is-fixed) .search-box__action-icon-path,
.js-header.is-transparent:not(.is-fixed) .search-box__reset-icon-path {
    fill: var(--tc-transparent-color);
    stroke: var(--tc-transparent-color);
}

/* Search input border and text */
.js-header.is-transparent:not(.is-fixed) .search-box__input {
    border-color: var(--tc-transparent-color);
    color: var(--tc-transparent-color);
}
.js-header.is-transparent:not(.is-fixed) .search-box__input::placeholder {
    color: var(--tc-transparent-color);
    opacity: 0.6;
}

/* Vertical dividers between header control elements */
.js-header.is-transparent:not(.is-fixed) .header__control-divider {
    background: var(--tc-transparent-color);
}

/* Header-c: submenu ported to the .nav-menu dropdown design (matches home-bonnefield.html).

   1) Colour tokens: header-c natively defines only the --nav-menu-b-* set. The ported
      .nav-menu reads the non-b vars, which otherwise fall back to the global white default
      (:root, variables.css) and render invisible on the white dropdown. Mirror header-c's
      own dropdown tokens here. */
.header-c {
    --nav-menu-text-color: var(--header-c-dropdown-text-color);
    --nav-menu-text-color-hover: var(--header-c-dropdown-text-color-hover);
    --nav-menu-font-size: var(--header-dropdown-font-size);
}

/* The dropdown is always a white panel, so its links must stay dark in every state
   (incl. mobile). A base .nav-menu__link colour resolves to white and wins by source order;
   this header-c-scoped rule (higher specificity) reapplies the dropdown text colour. */
.header-c .nav-menu__link {
    color: var(--nav-menu-text-color);
}
.header-c .nav-menu__link:hover,
.header-c .nav-menu__link:focus-visible,
.header-c .nav-menu__link[aria-expanded="true"] {
    color: var(--nav-menu-text-color-hover);
}

/* 2) Positioning anchor: the .nav-menu dropdown is position:absolute, so each top-level
      <li> must be its anchor. header-e does this via .nav-box__item{position:relative};
      header-c's <li> carries no class, so anchor its direct <li> children (desktop only —
      on mobile .nav-menu renders as a static accordion). */
@media (min-width: 1200px) {
    .header-c .nav-box-b > li {
        position: relative;
    }
}


/*
.media-box.has-large-height .media-box__media {
    aspect-ratio: initial;
}
*/

/* =========================================================
   Icon menu block — alignment & colour CSS variables
   ========================================================= */

/* Alignment — override compiled fixed widths/auto-margins so justify-content works */
.link-with-icon-list[class*="icon-menu-align-"],
.icon-preview-list[class*="icon-menu-align-"],
.icon-preview-c-list[class*="icon-menu-align-"] {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

/* Ensure flex-wrap rows respect the chosen alignment (each row aligns the same way) */
.link-with-icon-list[class*="icon-menu-align-"],
.feature-list[class*="icon-menu-align-"],
.icon-preview-list[class*="icon-menu-align-"],
.icon-preview-c-list[class*="icon-menu-align-"],
.icon-preview-d-box__list[class*="icon-menu-align-"] {
    flex-wrap: wrap;
}

.link-with-icon-list.icon-menu-align-left,
.feature-list.icon-menu-align-left,
.icon-preview-list.icon-menu-align-left,
.icon-preview-c-list.icon-menu-align-left,
.icon-preview-d-box__list.icon-menu-align-left  { justify-content: flex-start; }

.link-with-icon-list.icon-menu-align-center,
.feature-list.icon-menu-align-center,
.icon-preview-list.icon-menu-align-center,
.icon-preview-c-list.icon-menu-align-center,
.icon-preview-d-box__list.icon-menu-align-center { justify-content: center; }

.link-with-icon-list.icon-menu-align-right,
.feature-list.icon-menu-align-right,
.icon-preview-list.icon-menu-align-right,
.icon-preview-c-list.icon-menu-align-right,
.icon-preview-d-box__list.icon-menu-align-right  { justify-content: flex-end; }

/* Icon colour override */
[style*="--icon-menu-icon-color"] .fa-icon,
[style*="--icon-menu-icon-color"] .feature__icon,
[style*="--icon-menu-icon-color"] .link-with-icon__icon,
[style*="--icon-menu-icon-color"] .icon-preview-a__icon,
[style*="--icon-menu-icon-color"] .icon-preview-b__icon,
[style*="--icon-menu-icon-color"] .icon-preview-c__icon,
[style*="--icon-menu-icon-color"] .icon-preview-d-box__icon {
    color: var(--icon-menu-icon-color);
}

/* Hover colour override (feature + link-with-icon) */
[style*="--icon-menu-hover-color"] .feature:hover .feature__icon,
[style*="--icon-menu-hover-color"] .feature:focus .feature__icon,
[style*="--icon-menu-hover-color"] .link-with-icon__inner:hover .link-with-icon__icon,
[style*="--icon-menu-hover-color"] .link-with-icon__inner:focus .link-with-icon__icon {
    color: var(--icon-menu-hover-color);
}

/* Background colour override */
[style*="--icon-menu-bg-color"] .icon-preview-c,
[style*="--icon-menu-bg-color"] .icon-preview-d-box__item:nth-child(odd) {
    background-color: var(--icon-menu-bg-color);
}
[style*="--icon-menu-bg-color-alt"] .icon-preview-d-box__item:nth-child(even) {
    background-color: var(--icon-menu-bg-color-alt);
}

/* ---------------------------------------------------------
   Items without a Link URL: render static — no pointer cursor
   and no hover feedback. (.icon-menu-no-link added by the block
   when the item's Link URL field is empty.)
   --------------------------------------------------------- */
.feature.icon-menu-no-link,
.icon-preview-d-box__item.icon-menu-no-link,
.link-with-icon.icon-menu-no-link .link-with-icon__inner {
    cursor: default;
}

/* Neutralise the compiled hover effects */
.feature.icon-menu-no-link:hover {
    background: var(--feature-bg-color);
}
.link-with-icon.icon-menu-no-link .link-with-icon__inner:hover {
    color: inherit;
}
.link-with-icon.icon-menu-no-link:hover .link-with-icon__icon path {
    fill: currentColor;
}
.icon-preview-a.icon-menu-no-link .icon-preview-a__heading:hover,
.icon-preview-b.icon-menu-no-link .icon-preview-b__heading:hover,
.icon-preview-c.icon-menu-no-link .icon-preview-c__heading:hover {
    color: inherit;
}
.icon-preview-d-box__item.icon-menu-no-link .icon-preview-d-box__inner:hover {
    opacity: 1;
    transform: none;
}

/* Neutralise the block's own hover-colour variable on static items */
[style*="--icon-menu-hover-color"] .feature.icon-menu-no-link:hover .feature__icon,
[style*="--icon-menu-hover-color"] .link-with-icon.icon-menu-no-link .link-with-icon__inner:hover .link-with-icon__icon {
    color: var(--icon-menu-icon-color, inherit);
}

/* ---------------------------------------------------------
   Configurable icons-per-row (Icon buttons + solid background)
   Driven by --icon-menu-cols / --icon-menu-cols-mobile set on the
   list wrapper from the block editor. When a value is unset the
   compiled responsive defaults apply unchanged.
   --------------------------------------------------------- */

/* Desktop / large tablet (>= 768px) */
@media (min-width: 768px) {
    .feature-list[style*="--icon-menu-cols:"] > * {
        width: calc((100% - (var(--icon-menu-cols) - 1) * 24px) / var(--icon-menu-cols)) !important;
        max-width: none !important;
        min-width: 0 !important;
    }
    .icon-preview-d-box__list[style*="--icon-menu-cols:"] > * {
        width: calc(100% / var(--icon-menu-cols)) !important;
    }
}

/* Mobile / tablet (< 768px) */
@media (max-width: 767px) {
    /* Force a wrapping row so items sit side by side (d-box is column-stacked by default here) */
    .feature-list[style*="--icon-menu-cols-mobile:"],
    .icon-preview-d-box__list[style*="--icon-menu-cols-mobile:"] {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    .feature-list[style*="--icon-menu-cols-mobile:"] > * {
        width: calc((100% - (var(--icon-menu-cols-mobile) - 1) * 10px) / var(--icon-menu-cols-mobile)) !important;
        max-width: none !important;
        min-width: 0 !important;
    }
    .icon-preview-d-box__list[style*="--icon-menu-cols-mobile:"] > * {
        width: calc(100% / var(--icon-menu-cols-mobile)) !important;
    }
}

/* =========================================================
   Hero media block — new CSS classes
   ========================================================= */

/* Full-height variant (100vh) */
.media-box.is-full-height {
    min-height: 100svh;
}
.media-box.is-full-height .media-box__media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.media-box.is-full-height .media-box__inner {
    position: relative;
    min-height: 100svh;
}
.media-box.is-full-height .media-box__media-wrapper {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/*
 * Sub-pixel rendering fix: at certain viewport widths the browser rounds the
 * ::before overlay dimensions, leaving a hairline gap. Extending by 2px on
 * every side (clipped by the wrapper's existing overflow:hidden) eliminates
 * this for all gradient alignments.
 */
@media (min-width: 1000px) {
    .media-box.is-wide.has-gradient .media-box__media-wrapper {
        overflow: hidden;
    }
    .media-box.is-wide.has-gradient .media-box__media-wrapper::before {
        top:    -2px !important;
        left:   -2px !important;
        width:  calc(100% + 4px) !important;
        height: calc(100% + 4px) !important;
    }
}

/*
 * Gradient overrides — all variants start from 0% (no flat "transparent 14%"
 * hard stop). A hard percentage stop causes a 1-2px sub-pixel banding artifact
 * at widths like 1520-2080px where 14% falls on a fractional pixel boundary.
 * Starting smoothly from 0% eliminates the artifact on all alignments.
 */
@media (min-width: 1000px) {
    /* Default / left: right → left — override new-styles.min.css base gradient */
    .media-box.is-wide.has-gradient .media-box__media-wrapper::before {
        background: linear-gradient(270deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, .4) 50%,
            rgba(0, 0, 0, .9) 100%);
    }
    .media-box.is-wide.has-gradient[style*="--hero-gradient-color"] .media-box__media-wrapper::before {
        background: linear-gradient(270deg,
            transparent 0%,
            color-mix(in srgb, var(--hero-gradient-color) 40%, transparent) 50%,
            color-mix(in srgb, var(--hero-gradient-color) 90%, transparent) 100%);
    }

    /* Right: left → right */
    .media-box.is-wide.has-gradient.has-content-right .media-box__media-wrapper::before {
        background: linear-gradient(90deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, .4) 50%,
            rgba(0, 0, 0, .9) 100%);
    }
    .media-box.is-wide.has-gradient.has-content-right[style*="--hero-gradient-color"] .media-box__media-wrapper::before {
        background: linear-gradient(90deg,
            transparent 0%,
            color-mix(in srgb, var(--hero-gradient-color) 40%, transparent) 50%,
            color-mix(in srgb, var(--hero-gradient-color) 90%, transparent) 100%);
    }

    /* Center: transparent both sides, darkest at centre */
    .media-box.is-wide.has-gradient.has-content-center .media-box__media-wrapper::before {
        background: linear-gradient(90deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, .4) 25%,
            rgba(0, 0, 0, .9) 50%,
            rgba(0, 0, 0, .4) 75%,
            rgba(0, 0, 0, 0) 100%);
    }
    .media-box.is-wide.has-gradient.has-content-center[style*="--hero-gradient-color"] .media-box__media-wrapper::before {
        background: linear-gradient(90deg,
            transparent 0%,
            color-mix(in srgb, var(--hero-gradient-color) 40%, transparent) 25%,
            color-mix(in srgb, var(--hero-gradient-color) 90%, transparent) 50%,
            color-mix(in srgb, var(--hero-gradient-color) 40%, transparent) 75%,
            transparent 100%);
    }
}

/* Banner: optional colour mask */
.media-box.has-mask .media-box__media-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--hero-bg-mask, rgb(0 0 0 / 20%));
    z-index: 2;
    pointer-events: none;
}

/* Large-beside: overlay textbox on image */
@container wrapper (min-width: 1200px) {
    /* Placeholder stays in its own column, becomes a positioning context */
    .media-box-b.is-wide.has-overlay-textbox .media-box-b__placeholder {
        grid-row: 1;
        position: relative;
    }
    /* Content box is absolutely positioned within the placeholder column:
       - left: 50px  → 50px gap from the far (non-image) edge
       - right: -50px → extends 50px past the column boundary into the image
       This works for any container width without fixed pixel widths.           */
    .media-box-b.is-wide.has-overlay-textbox .media-box-b__content {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 50px;
        right: -50px;
        width: auto;
        margin: 0;
        z-index: 2;
    }
    /* image-left (image on left, text on right): mirror the offsets */
    .media-box-b.is-wide.image-left.has-overlay-textbox .media-box-b__content {
        left: -50px;
        right: 50px;
    }
}

/* image-left: image in column 1 (left), text in column 2 (right).
   Default layout (no class) is text LEFT, image RIGHT.
   Old saved blocks may have class image-right — with no CSS for it they fall
   back to the default (image RIGHT), which is correct for "right" alignment. */
@container wrapper (min-width: 1200px) {
    .media-box-b.image-left .media-box-b__media {
        grid-column: 1;
        grid-row: 1;
    }
    .media-box-b.image-left .media-box-b__placeholder {
        grid-column: 2;
        justify-content: flex-start;
    }
}

/* Medium-beside (is-short): flat style — text on block background, no white card */
@container wrapper (min-width: 1200px) {
    .media-box-b.is-short .media-box-b__placeholder {
        justify-content: flex-start;
        padding: 50px;
    }
    .media-box-b.is-short .media-box-b__content {
        background: transparent;
        border-radius: 0;
        margin-right: 0;
        padding: 0;
        width: auto;
        max-width: 514px;
    }
}

/* Large-beside (is-wide) without overlay: same beside layout as is-short, taller image */
@container wrapper (min-width: 1200px) {
    .media-box-b.is-wide:not(.has-overlay-textbox) .media-box-b__placeholder {
        justify-content: flex-start;
        padding: 50px;
    }
    .media-box-b.is-wide:not(.has-overlay-textbox) .media-box-b__content {
        background: transparent;
        border-radius: 0;
        margin-right: 0;
        padding: 0;
        width: auto;
        max-width: 514px;
    }
    /* Default / Medium height (~375px at typical column widths) */
    .media-box-b.is-wide .media-box-b__media {
        aspect-ratio: 1.6;
    }
    /* Small height (~280px at typical column widths) */
    .media-box-b.is-wide.has-height-small .media-box-b__media {
        aspect-ratio: 2.2;
    }
    /* Tall height (~545px at typical column widths) */
    .media-box-b.is-wide.has-height-tall .media-box-b__media {
        aspect-ratio: 1.1;
    }
}

/* Media box (beside image): remove the fixed 320px scroll cap so the block
   grows to fit its text instead of scrolling inside a fixed-height area.
   The compiled rule .media-box-b__scrollable{max-height:320px;overflow-y:auto}
   is not inside a media query, so it applies on desktop, tablet and mobile —
   this override lifts it on all of them. */
.media-box-b__scrollable {
    max-height: none;
    overflow-y: visible;
}

/* =========================================================
   Two-columns block (tco-blocks/two-column-preview-block)
   Ports the responsive layout that lives in OJEN's stylesheet but was missing
   here, plus per-block colours, arrow spacing and static (no-link) items.
   Scoped to .tco-two-col-preview so it never collides with OJEN's own
   .about-us rules when this theme is merged back into OJEN.
   ========================================================= */

/* Responsive grid: single column on mobile, two columns from tablet up.
   The two children are the .preview-list columns. */
.tco-two-col-preview {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 768px) {
    .tco-two-col-preview {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

/* Per-block card background (overrides the compiled .preview__inner{background:#fff};
   falls back to #fff when no colour is chosen). Heading/text colours are driven
   by the existing --preview-heading-color / --preview-desc-color variables set
   inline on the wrapper, so they need no extra rules here. */
.tco-two-col-preview .preview__inner {
    background: var(--preview-bg-color, #fff);
}

/* Hover / focus background for linked cards only. This rule must out-specify
   the base rule above — same specificity + later source order would otherwise
   keep the base colour on hover and cancel the effect. Falls back to any
   global hover colour, then to the base background. */
@media (any-hover: hover) {
    .tco-two-col-preview .preview__inner:not(.is-static):hover {
        background: var(--preview-bg-color-hover, var(--preview-bg-color, #fff));
    }
}
.tco-two-col-preview .preview__inner:not(.is-static):focus-visible {
    background: var(--preview-bg-color-hover, var(--preview-bg-color, #fff));
}

/* Arrow link: keep the label and arrow on one line, vertically aligned, and
   give it breathing room from the text above (was too tight). */
.tco-two-col-preview .icon-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

/* Items with no Link URL: static, no pointer. (The base .preview__inner rule
   above already keeps their background unchanged on hover.) */
.tco-two-col-preview .preview__inner.is-static {
    cursor: default;
}

@media (min-width: 1200px) {
    .layout__container .media-box.is-wide .media-box__container {
        padding-left: 30px;
        padding-right: 30px;
        position: absolute;
    }
}

/* Header divider — border-bottom already exists in compiled CSS on .header-b__nav-container;
   only suppress it when the admin explicitly disables the setting. */
@media (min-width: 1200px) {
    .header-b.no-bottom-divider .header-b__nav-container {
        border-bottom: none;
    }
}


.footer-e, .footer-d  {
    color : var(--footer-text-color);
}

.media-box__gradient-content>:is(p,ul,ol) {
    max-width: 100%;
}

.text-box.theme-bg-secondary {
    background: #7f3f970f;
    border-color: #7f3f970f;
}

.footer__logo {
    max-height: 100%;
    max-width: 100%;
}

.header__desktop-logo {
    max-height:100%;
}

.footer-e__logos {
    flex-wrap: wrap;
}

.footer-e__logos-label {
    font-size: var(--footer-font-size, inherit);
    margin: 0 0 6px;
}

/* hero-media block: content background colour on mobile/tablet only */
@media (max-width: 999px) {
    .media-box__container.layout__container {
        background-color: var(--content-bg-mobile, transparent);
        padding-top: 25px;
    }

    .media-box__container.layout__container .media-box__gradient-content  {
        gap: 0px;
    }
}

@media (min-width: 768px) {
    .media-box__container.layout__container {
        padding-top:50px;
    }
}
/* hero-media "text beside" (large-beside): content background colour on the
   .media-box-b wrapper — separate desktop and mobile/tablet colours, each
   falling back to the default grey when not set. The variables are injected on
   the wrapper by the hero-media render_block filter (functions-blocks.php). */
@media (min-width: 1000px) {
    .media-box-b {
        background-color: var(--content-bg-desktop, var(--color-grey-249));
    }
}
@media (max-width: 999px) {
    .media-box-b {
        background-color: var(--content-bg-mobile, var(--color-grey-249));
    }
    /* .media-box-b__content has a hardcoded white background in the framework
       CSS, which would otherwise cover the content area on mobile/tablet. Let it
       take the chosen mobile colour too (defaults to white when none is set). */
    .media-box-b__content {
        background: var(--content-bg-mobile, #fff);
    }
}

/* "No colour" selected on the content background fields: make the wrapper and the
   white content card see-through so the parent (e.g. a Page section) background
   shows through. Classes are added by the hero-media render_block filter. Desktop
   keeps its white card for real colours (only the wrapper is coloured there); the
   card only goes transparent when "No colour" is chosen. */
@media (min-width: 1000px) {
    .media-box-b.has-no-content-bg-desktop,
    .media-box-b.has-no-content-bg-desktop .media-box-b__content {
        background: transparent;
    }
}
@media (max-width: 999px) {
    .media-box-b.has-no-content-bg-mobile,
    .media-box-b.has-no-content-bg-mobile .media-box-b__content {
        background: transparent;
    }
}

/* hero-media block: vertical position of the content area inside .media-box__container.
   Default (no class) keeps justify-content:center. Top/bottom add padding so content
   isn't flush to the edge — including desktop, where the base padding-bottom is 0. */
.media-box__container.valign-top {
    justify-content: flex-start;
    padding-top: 25px;
}
.media-box__container.valign-bottom {
    justify-content: flex-end;
}
@media (min-width: 768px) {
    .media-box__container.valign-top {
        padding-top: 50px;
    }
}
@media (min-width: 1200px) {
    .media-box__container.valign-top {
        padding-top: 50px;
    }
    .media-box__container.valign-bottom {
        padding-bottom: 50px;
    }
}

/* Remove bullet dots inside WPForms */
.wpforms-container ul:not([class]) > li:before {
    content: none;
}

/* wp-block-table: reset Gutenberg defaults, then apply our theme table styles */
.wp-block-table {
    margin: 25px 0;
    overflow-x: visible !important;
    width: auto;
}
/* Reset Gutenberg's thick thead/tfoot borders (more specific than Gutenberg's selectors) */
.wp-block-table > table thead { border-bottom: none; }
.wp-block-table > table tfoot { border-top: none; }

/* Tables inside .table-wrap / .table-wrapper / .wp-block-table get same styles as table:not([class]) */
div.table-wrap > table,
div.table-wrapper > table,
.wp-block-table > table {
    border: 1px solid var(--color-grey-231);
    border-collapse: collapse;
    width: min(720px, 100%);
}
div.table-wrap > table :is(th, td),
div.table-wrapper > table :is(th, td),
.wp-block-table > table :is(th, td) {
    border-top: none;
    border-left: none;
    border-bottom: 1px solid var(--color-grey-231);
    border-right: 1px solid var(--color-grey-231);
    width: 360px;
}
div.table-wrap > table :is(th, td):last-child,
div.table-wrapper > table :is(th, td):last-child,
.wp-block-table > table :is(th, td):last-child {
    border-right: none;
}
div.table-wrap > table th,
div.table-wrapper > table th,
.wp-block-table > table th {
    background: var(--table-heading-bg-color);
    color: var(--table-heading-text-color);
    font-weight: 600;
    padding: 13px 23px;
    text-align: left;
}
div.table-wrap > table td,
div.table-wrapper > table td,
.wp-block-table > table td {
    border-bottom: 1px solid var(--color-grey-231);
    padding: 12.5px 20px;
    vertical-align: top;
}
div.table-wrap > table tr:last-child td,
div.table-wrapper > table tr:last-child td,
.wp-block-table > table tr:last-child td {
    border-bottom: none;
}
div.table-wrap > table tr:hover,
div.table-wrapper > table tr:hover,
.wp-block-table > table tr:hover {
    background: var(--table-selection-bg-color);
}

/* Service directory: larger pagination link font (overrides the global --pagination-font-size of 14px) */
.directory-pagination {
    --pagination-font-size: 18px;
}

/* =========================================================
   Service Directory cleanup
   ========================================================= */

/* vi. Page titles use the site heading colour instead of inheriting black.
   Applies site-wide (directory, blog, resources, category, single pages…). */
.title-box__title {
    color: var(--heading-accent-color);
}

/* i. Tighten the directory layout (less padding below title / between rows). */
.directory-page .title-box {
    margin-bottom: 16px;
}
.directory-page .resource-control {
    margin-bottom: 20px;
}
.directory-page .result-control {
    margin-bottom: 12px;
}
.directory-page .preview-list.has-large-gap {
    gap: 12px;
}

/* iii. Keyword input is full width on its own row (default layout). */
.directory-page .directory-filter__keywords,
.directory-page .directory-filter__keywords .wpforms-field-medium {
    width: 100%;
    max-width: 100%;
}
/* When buttons share the keywords row (inverted layout), lay them out inline
   with the input growing to fill the remaining space. */
.directory-page .resource-control__top-group.keyword-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}
.directory-page .keyword-row .directory-filter__keywords {
    flex: 0 1 540px;
    width: auto;
    max-width: 540px;
}
.directory-page .keyword-row .resource-control__buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

/* iv. Sort control lives in the result bar, above the results (OJEN-style). */
.directory-page .result-control {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.directory-page .result-control__sort {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
/* Count on the left, sort on the right in the below-map bar. */
.directory-page .result-control--below-map .result-control__sort {
    margin-left: auto;
}
.directory-page .result-control__output {
    margin: 0;
}
.directory-page .service-directory__view-toggle {
    margin-left: auto;
}

/* vii. Each result tile: whole box clickable + hover, no title hover, clamped description. */
.directory-page .directory-card {
    position: relative;
    border-radius: var(--border-radius-medium);
    transition: background-color .15s ease;
}
.directory-page .directory-card:hover {
    background-color: var(--feature-bg-color-hover, #ebf1f8);
}
/* Stretched link: the title's <a> covers the whole card. */
.directory-page .directory-card .resource-preview__heading a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
}
/* No hover treatment on the title itself (the box is the click target now). */
.directory-page .directory-card .resource-preview__heading a:hover {
    text-decoration: none;
    color: inherit;
}
/* Keep the real phone/website links clickable above the stretched link. */
.directory-page .directory-card .directory-card__phone-link,
.directory-page .directory-card .directory-card__website-link {
    position: relative;
    z-index: 1;
}
/* Description limited to 3 lines. */
.directory-page .directory-card .resource-preview__text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/*
@media (max-width: 1200px) {
    .nav-menu__link {
        color: white;
    }
    .nav-menu__link:hover {
        color: #0885f8;
    }
}
*/
h1, h2, h3, h4, h5, h6 {
    color: #7c4399;
}

h2 {
    font-size: 28px;
}

.footer__link {
    word-break: normal;
    overflow-wrap: normal;
}
/* Mobile: force the nav arrows dark (mobile menu panel has a light background).
   Matches the :not(.is-fixed) specificity of the transparent icon rule above so this
   still wins here by source order (sticky/.is-fixed never applies below 1200px). */
@media (max-width: 1200px) {
.js-header.is-transparent:not(.is-fixed) .nav-box-b__button-icon-path {
    fill: black;
    stroke: black;
}
}
/*
.nav-toggle[aria-expanded=true] .nav-toggle__bar {
    background: white;
}
*/
/*
.slide-box-section::before {
    content: "";
    display: block;
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
    background-image: url('/wp-content/themes/tco2025/images/bonnefield/working-together-bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.15;
    z-index: 0;
}

.slide-box-section::after {
    background-color: rgba(124, 164, 47, 0.19);
    z-index: 10;
}
*/
/*.slide-box-section::after, *//*.slide-box-section::before {
    content: "";
    display: block;
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
}

.subscribe-newsletter .media-box__media-wrapper::before {
    content: "";
    display: block;
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 2;
    background: rgba(124, 164, 47, 0.2);
}

.subscribe-newsletter.media-box.has-mask .media-box__media-wrapper::after {
    content: none;
    background: none !important;
}
    */

/* Match a.footer__link: same colors, hover/focus and text-decoration.
   Note links are unclassed, so scope with :not([class]) to out-specify the
   theme's a:not([class]) defaults (equal specificity otherwise). */
.footer__note a:not([class]) {
    color: inherit;
    text-decoration-line: none;
}

.footer__note a:not([class]):hover,
.footer__note a:not([class]):focus-visible {
    color: var(--footer-link-color-hover);
    text-decoration: var(--footer-link-decoration-line-hover);
}