/* ==========================================================================
   Theme CSS Overrides
   Additions and modifications layered on top of the compiled frontend bundle.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Accordion – Side by Side layout
   Two independent mc-accordion instances rendered inside .accordion-columns
   so each column expands without affecting the other.
   -------------------------------------------------------------------------- */
.accordion-columns {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.accordion-columns > mc-accordion {
    flex: 1 1 50%;
    min-width: 0;
}


@media (max-width: 991.98px) {
    .accordion-columns {
        flex-direction: column;
        gap: 0;
    }
}

/* --------------------------------------------------------------------------
   Accordion – "Style like a CTA" toggle
   -------------------------------------------------------------------------- */
.accordion--cta-style .accordion-item:first-child {
    border-top: 1px solid var(--mid-grey);
}

.accordion--cta-style .accordion-item__button .cta-link__icon {
    color: var(--grey);
    transition: color 0.3s ease, transform 0.3s ease;
}

.accordion--cta-style .accordion-item__button:hover .cta-link__icon,
.accordion--cta-style .accordion-item__button:focus-visible .cta-link__icon {
    color: var(--mid-grey);

}

@media (max-width: 991.98px) {
    .accordion--cta-style-sibling .accordion-item:first-child {
        border-top: 0;
    }
}

.card--hero .card__cta {
    transition: 0.2s ease;
}

.site-footer {
  padding-bottom: 1rem;
}

.facetwp-facet.mb-0 {
  margin-bottom: 0;
}

@media (min-width: 1400px) {
    .tab-panel__body--clipped {
        padding: 4.5rem 3.75rem;
        width: 75%;
    }
}

article.card.card--small .card__content .card__heading,
.clamp-3 {
    line-clamp: 3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.clamp-6 {
    line-clamp: 6;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
}

.clamp-1 {
    line-clamp: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.facetwp-facet .field {
    overflow: clip;
}

/* When the CC form lands inside an .editorial container, undo editorial typography spacing */
.editorial .ctct-form-wrapper {
    font-size: 1rem;
    line-height: 1.5;
}

.editorial .ctct-form-wrapper ul,
.editorial .ctct-form-wrapper ol {
    margin: 0;
    padding: 0;
}

/* --------------------------------------------------------------------------
   Constant Contact Forms
   Integrates the ctct-form-wrapper output with the theme's form system.
   -------------------------------------------------------------------------- */

.ctct-form-wrapper {
    max-width: 48rem;
}

.ctct-form-wrapper h3 {
    margin-bottom: 1.5rem;
}

/* Field rows – match .field spacing */
.ctct-form-field,
.ctct-form-fields {
    margin-bottom: 2rem;
    margin-top: 0;
    position: relative;
}

/* Strip the <p> default margin that WP/browser adds */
p.ctct-form-field {
    margin-bottom: 2rem;
}

/* Labels – the plugin wraps them in a <span>, pull it out visually */
.ctct-label-top {
    display: block;
    margin-bottom: 0.375rem;
}

.ctct-label-top label,
.ctct-form-wrapper label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.375rem;
}

/* Required indicator */
.ctct-required-indicatior {
    color: var(--red);
    margin-left: 0.2em;
}

/* Address fieldset */
fieldset.ctct-address {
    border: none;
    margin: 0 0 2rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

fieldset.ctct-address legend {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    width: 100%;
}

.ctct-field-full {
    flex: 1 1 100%;
    min-width: 0;
}

.ctct-field-third {
    flex: 1 1 calc(33.333% - 0.75rem);
    min-width: 10rem;
}

/* Sub-field wrappers inside address – add label margin */
fieldset.ctct-address .ctct-form-field {
    margin-bottom: 0;
}

/* Birthday inline fields */
.ctct-birthday-fields {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ctct-birthday-fields .ctct-form-field {
    flex: 0 0 5rem;
    margin-bottom: 0;
}

.ctct-date-field-separator {
    margin-top: 1.5rem;
    font-weight: 600;
}

/* Textarea character warning */
.ctct-textarea-warning-label {
    display: block;
    font-size: 0.75rem;
    margin-top: 0.25rem;
    color: var(--mid-grey, #888);
}

/* Opt CC checkboxes out of the theme's custom checkbox pseudo-element system */
input[type="checkbox"].ctct-checkbox + label {
    min-height: 0;
    padding-right: 0;
    padding-top: 0;
    position: static;
}

input[type="checkbox"].ctct-checkbox + label::before,
input[type="checkbox"].ctct-checkbox + label::after {
    display: none;
}

/* Checkbox opt-in row */
p.ctct-form-field-checkbox .ctct-input-container {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

p.ctct-form-field-checkbox .ctct-input-container input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 0.2em;
    width: auto;
}

p.ctct-form-field-checkbox .ctct-input-container label {
    margin-bottom: 0;
    font-weight: 400;
}

/* Submit button – match .btn primary style */
input.ctct-submit {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--red);
    border: 2px solid var(--red);
    border-radius: 0;
    color: var(--white);
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    padding: 0.75rem 1.75rem;
    text-align: center;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    width: auto;
}

input.ctct-submit:hover,
input.ctct-submit:focus-visible {
    background-color: var(--light-red);
    border-color: var(--light-red);
    color: var(--white);
    outline: none;
}

/* Response / error messages */
.ctct-form-errorMessage,
.ctct_success_text {
    border-left: 3px solid var(--red);
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
}

.ctct_success_text {
    border-color: var(--teal, #2a9d8f);
}

@media (max-width: 575.98px) {
    .ctct-field-third {
        flex: 1 1 100%;
    }
}

@supports (appearance: base-select) {
    .custom-select{
        padding-right: 1.6rem;
    }
    select.facetwp-dropdown.custom-select > button {
        appearance: none;
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        width: 100%;
        min-width: 0;
        display: block;
        text-align: left;
        font: inherit;
        color: inherit;
        cursor: pointer;
    }

    select.facetwp-dropdown.custom-select selectedcontent {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        /* max-width: calc(100% - 2.5rem); */
    }
}

@media (min-width: 1200px) {
    .card-carousel--large .card-carousel__cell {
        width: 33.3%;
    }
}

.breadcrumb li:not(:last-child)::after{
    padding-left: 0.25rem;
}

.bio-hero .link-list--2-col{
    display: grid;
    grid-template-columns: max-content max-content;
    gap: 0 3rem;
}

.accordion-item__button:hover {
  color: inherit;
}

.accordion-item__button:hover .accordion-item__icon {
  color: inherit;
}

.accordion-item__button::before, .accordion-item__button:after {
  display: none;
}

.accordion-item:focus-within{
    border-bottom-color: var(--mid-grey);
}

section:not([data-component="featured-links"]):not([data-component="tabs"]) .cta-link:hover {
  color: inherit;
}

section:not([data-component="featured-links"]):not([data-component="tabs"]) .cta-link::before,
section:not([data-component="featured-links"]):not([data-component="tabs"]) .cta-link::after {
  display: none;
}

section:not([data-component="featured-links"]):not([data-component="tabs"]) .cta-link:focus-within {
    border-bottom-color: var(--mid-grey);
}

section:not([data-component="featured-links"]):not([data-component="tabs"]) .cta-link:hover .cta-link__icon {
    color: var(--mid-grey);
}

.hero.hero.hero.hero .card--hero {
    backdrop-filter: blur(1rem) !important;
    -webkit-backdrop-filter: blur(1rem) !important;
    transition: none !important;
}

.hero__graphic--large {
  right: -7%;
}

.location-card__map-link {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}
.location-card__map-link:focus, .location-card__map-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25rem;
}

/* --------------------------------------------------------------------------
   Core "Buttons" block (core/button)
   Maps the native Gutenberg button markup to the theme's .btn component so
   editor-authored buttons match the design system without requiring the
   custom `c('button', ...)` macro. Block Styles registered in functions.php
   ("Outline", "Outline Light Red", "Secondary") let editors pick a variant
   from the block sidebar; the default (no is-style-* class) renders as the
   primary/solid button.
   -------------------------------------------------------------------------- */
.wp-block-button__link {
    --bg-color: var(--red);
    --bg-color-hover: var(--light-red);
    --border-color: var(--red);
    --border-color-hover: var(--light-red);
    --text-color: var(--white);
    --text-color-hover: var(--white);

    --shape-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='74' fill='none' viewBox='0 0 8 74'%3E%3Cpath fill='%23aa1834' d='M5.98 18.59C5.26 15.507 3.265 6.41 0 0v74c3.264-6.427 5.26-15.549 5.98-18.64.7-2.996 2.038-12.75 1.963-18.41.075-5.643-1.263-15.372-1.962-18.36'/%3E%3C/svg%3E");
    --shape-outline: url("data:image/svg+xml,%3Csvg width='8' height='74' viewBox='0 0 8 74' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.000156879 -3.16282e-07C2.9723 6.40958 4.7896 15.5073 5.44635 18.5903C6.08281 21.5781 7.3018 31.3073 7.23305 36.9508C7.30179 42.6093 6.08281 52.3644 5.44635 55.3601C4.7896 58.4513 2.9723 67.5734 0.000153645 74' stroke='%23AA1834' stroke-width='1.5'/%3E%3C/svg%3E");

    align-items: center;
    appearance: none;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-width: 1px 0 1px 1px;
    border-radius: 0;
    color: var(--text-color);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.1;
    min-height: 2.75rem;
    padding: 0.625rem 1rem;
    position: relative;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    user-select: none;
    vertical-align: middle;
    z-index: 1;
}

.wp-block-button__link::before,
.wp-block-button__link::after {
    bottom: -1px;
    content: '';
    display: block;
    left: 100%;
    mask-position: left;
    mask-repeat: no-repeat;
    mask-size: auto 100%;
    position: absolute;
    top: -1px;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    width: 1rem;
}

.wp-block-button__link::before {
    background-color: var(--bg-color);
    -webkit-mask-image: var(--shape-solid);
    mask-image: var(--shape-solid);
}

.wp-block-button__link::after {
    display: none;
    background-color: var(--border-color);
    -webkit-mask-image: var(--shape-outline);
    mask-image: var(--shape-outline);
}

.wp-block-button__link:focus-visible,
.wp-block-button__link:hover {
    color: var(--text-color-hover);
    background-color: var(--bg-color-hover);
    border-color: var(--border-color-hover);
    outline: none;
}

.wp-block-button__link:focus-visible::before,
.wp-block-button__link:hover::before,
.wp-block-button__link:focus-visible::after,
.wp-block-button__link:hover::after {
    background-color: var(--bg-color-hover);
}

/* Variant - outline (core's built-in "Outline" style)
   Core applies the is-style-* class either to the .wp-block-button wrapper
   or directly to the .wp-block-button__link, depending on the block's saved
   markup (editor version / patterns / copy-pasted content). Both selector
   shapes are covered here — mirroring core's own CSS — so the variant
   renders consistently regardless of which shape a given button uses.

   IMPORTANT: "outline" collides with a real style variation WordPress core
   ships by default (see wp-includes/theme.json, styles.blocks["core/button"]
   .variations.outline). Whenever a button gets the is-style-outline class,
   WP's block-style-variations support (wp-includes/block-supports/
   block-style-variations.php) ALSO generates its own scoped stylesheet from
   that default theme.json data (2px currentColor border, em-based padding)
   and enqueues it via wp_enqueue_scripts at priority 1 — before our theme's
   own styles. Our custom-property reassignments below only change the
   --border-color/--bg-color variables consumed by the low-specificity base
   .wp-block-button__link rule; WP's competing rule sets the actual
   border/background/padding properties directly on a higher-specificity
   scoped selector, so it was winning that fight regardless of source order.
   Declaring the literal properties here too (with !important as a
   deliberate, narrowly-scoped override against that framework-injected
   stylesheet) makes this variant render consistently. */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline {
    --bg-color: transparent;
    --bg-color-hover: var(--red);
    --border-color: var(--red);
    --border-color-hover: var(--red);
    --text-color: inherit;
    --text-color-hover: var(--white);

    background-color: var(--bg-color) !important;
    border: 1px solid var(--border-color) !important;
    border-width: 1px 0 1px 1px !important;
    color: var(--text-color) !important;
    padding: 0.625rem 1rem !important;
}

/* Hover/focus needs its own !important pair — otherwise the base rule's
   !important above would also suppress the (non-!important) hover state
   from the shared .wp-block-button__link:hover rule further up. */
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
.wp-block-button .wp-block-button__link.is-style-outline:focus-visible,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link.is-style-outline:hover {
    background-color: var(--bg-color-hover) !important;
    border-color: var(--border-color-hover) !important;
    color: var(--text-color-hover) !important;
}

/* Variant - outline light red */
.wp-block-button.is-style-outline-light-red .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline-light-red {
    --bg-color: transparent;
    --bg-color-hover: var(--light-red);
    --border-color: var(--light-red);
    --border-color-hover: var(--light-red);
    --text-color: inherit;
    --text-color-hover: var(--white);
}

.wp-block-button.is-style-outline .wp-block-button__link::after,
.wp-block-button .wp-block-button__link.is-style-outline::after,
.wp-block-button.is-style-outline-light-red .wp-block-button__link::after,
.wp-block-button .wp-block-button__link.is-style-outline-light-red::after {
    display: block;
}

/* Variant - secondary (underlined link style, no torn-edge shapes) */
.wp-block-button.is-style-secondary .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-secondary {
    --bg-color: transparent;
    --bg-color-hover: transparent;
    --text-color: inherit;
    --text-color-hover: inherit;
    border-color: rgba(15, 20, 36, 0.40);
    border-style: solid;
    border-width: 0 0 1px 0;
    padding-inline: 0;
}

.wp-block-button.is-style-secondary .wp-block-button__link:focus-visible,
.wp-block-button .wp-block-button__link.is-style-secondary:focus-visible,
.wp-block-button.is-style-secondary .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link.is-style-secondary:hover {
    border-bottom-color: currentColor;
}

.wp-block-button.is-style-secondary .wp-block-button__link::before,
.wp-block-button .wp-block-button__link.is-style-secondary::before,
.wp-block-button.is-style-secondary .wp-block-button__link::after,
.wp-block-button .wp-block-button__link.is-style-secondary::after {
    content: none;
}

/* --------------------------------------------------------------------------
   Core "Columns" block (core/columns)
   the_content() renders with no page-level wrapper (ACF section blocks each
   provide their own full-bleed <section><div class="container-xxl">, so
   page.php/home.php/cpt-auto-template.php intentionally call the_content()
   bare — wrapping it would squeeze those ACF blocks). Because of that, a
   Columns block typed directly into the editor needs to simulate the site's
   .container-xxl box model itself so it lines up with the ACF blocks around
   it, rather than rendering edge-to-edge. Values mirror the compiled
   Bootstrap .container-xxl rules (see assets/css/style.css).

   This is applied unconditionally (no opt-in style needed) — Columns is the
   recommended block for adding constrained-width default content to a page,
   even for a single column (add a Columns block with just one column). The
   core "Group" block is intentionally left plain/unconstrained so it still
   works for full-bleed background-color sections, a common Group use case.

   Columns keeps its own flex/gap layout engine for the columns themselves
   (mixing it with Bootstrap's .row/.col negative-margin grid would conflict
   with WP's per-column flex-basis widths and blockGap variable) — only the
   default gap is tuned to visually match the site's grid gutter; editors can
   still override it per-instance via the block's own spacing controls.
   -------------------------------------------------------------------------- */
.wp-block-columns {
    box-sizing: border-box;
    gap: 1.25rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%;
}

@media (min-width: 576px) {
    .wp-block-columns {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .wp-block-columns {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .wp-block-columns {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .wp-block-columns {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .wp-block-columns {
        max-width: 1400px;
    }
}

@media (max-width: 991px) {
    .fwp-clear-btn {
        margin-top: 1rem;
    }
}

ul.nav.nav--level-3 {
    display: grid;
    grid-template-rows: repeat(7, auto);
    grid-auto-flow: column;
    height: 100%;
}

/* People A-Z filter: restore alphabet-only styling */
.filter-alphabet input[type="radio"].alphabet-field + label {
    min-height: 0 !important;
    padding: 0.25rem 0.5rem !important;
}

.filter-alphabet input[type="radio"].alphabet-field + label::before,
.filter-alphabet input[type="radio"].alphabet-field + label::after {
    display: none !important;
    content: none !important;
}