/*
Theme Name: CFAR
Version: 1.1
*/

/* Self-hosted Inter (the same open-source variable font file WordPress core's
   own twentytwentyfour theme ships) - this theme no longer depends on
   Elementor's Google Fonts enqueue for its own typography, which matters
   once Elementor is deactivated at cutover, and avoids relying on the
   browser being able to reach fonts.googleapis.com at all. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/Inter-Variable.woff2') format('woff2-variations'),
         url('fonts/Inter-Variable.woff2') format('woff2');
}

/* Sitewide font fallback. The7 core's own base CSS (not this file) used to
   set a default font-family on body that everything without its own
   explicit font-family silently inherited - e.g. .cfar-core-card__about in
   archive-core.php, a plain <div> with no font-family of its own, matched
   by none of the generic h1-h6/p/li rules below. That baseline disappeared
   along with The7. This replaces it; anything with a more specific
   font-family rule is unaffected. */
body {
    font-family: 'Inter', 'Roboto', sans-serif;
}
/* Sticky footer: keeps .cfar-footer pinned to the bottom of the viewport on
   short pages, instead of riding up under the content. */
html {
    height: 100%;
}
body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.cfar-site-content {
    flex: 1 0 auto;
}
.cfar-footer {
    flex-shrink: 0;
}

/* ============================================================
   STYLESHEET TABLE OF CONTENTS
   ============================================================
   1.  ACCESSIBILITY — Skip Link / Screen Reader Text
   2.  GLOBAL HEADING NORMALIZATION (h1–h6)
   3.  CONTAINER PADDING (.e-con)
   4.  HEADER SHELL + TOP NAVIGATION
   5.  SUB-NAVIGATION DROPDOWNS
   6.  BANNER HEADINGS
   7.  SIDEBAR / GRANTS LAYOUT
   8.  GENERIC CARDS (.card)
   9.  ELEMENTOR E-CON CARDS
   10. CFAR PEOPLE WIDGET
   11. CFAR AFFILIATES
   12. STATS STRIP
   13. KICKER TEXT + SECTION HEADLINES
   14. HERO BUTTONS + IMAGE TRIO
   15. MID-PAGE SLIDERS
   16. UNIFIED BLUE BUTTONS
   17. WP BLOCK EMBED / SEPARATOR / HR
   18. ACCORDIONS — WP BLOCK
   19. ACCORDIONS — ELEMENTOR CLASSIC
   20. ACCORDIONS — ELEMENTOR NESTED
   21. ACCORDIONS — UNIFIED +/- ICONS
   22. FOOTER
   23. KEYBOARD ACCESSIBILITY (Focus Mirrors)
   24. GENERAL MOBILE RESPONSIVE
   25. UNIFIED HYPERLINK STYLES
   26. SITEWIDE HEADING + ELEMENTOR DIVIDER NORMALIZATION
   27. CFAR STANDALONE SHELL (header / nav / footer / page layouts)
   28. CFAR FEATURE CARD BLOCK (cfar/feature-card)
   29. FRONT PAGE (front-page.php)
   ============================================================ */


/* ============================================================
   1. ACCESSIBILITY
   ============================================================ */

.screen-reader-text,
.assistive-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  clip: auto !important;
  clip-path: none;
  background-color: #f1f1f1;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-weight: 700;
  height: auto;
  width: auto;
  left: 5px;
  top: 5px;
  padding: 15px 23px 14px;
  text-decoration: none;
  z-index: 100000;
}
.skip-link.screen-reader-text:focus,
.skip-link.screen-reader-text:focus-visible {
  clip: auto !important;
  clip-path: none !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  padding: 12px 20px !important;
  background-color: #000 !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: bold !important;
  text-decoration: underline !important;
  z-index: 100000 !important;
  display: block !important;
}


/* ============================================================
   2. GLOBAL HEADING NORMALIZATION (h1-h6)
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', 'Roboto', sans-serif !important;
    color: #111 !important;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin: 0 0 0.75rem 0;
}
h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: -0.025em;
    line-height: 1.15;
}
h2 {
    font-size: 1.5rem;
    letter-spacing: -0.01em;
    line-height: 1.3;
}
h3 {
    font-size: 1.2rem;
    letter-spacing: -0.01em;
    line-height: 1.3;
}
h4 {
    font-size: 1.15rem;
    font-weight: 600;
}
h5 {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
}
h6 {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #555 !important;
}
/* A <strong>/<b> wrapping an already-bold heading's text (a common WYSIWYG
   authoring pattern - e.g. <h3><strong>...</strong></h3>) stacks the
   browser's default "bolder" weight on top of the heading's own 700,
   which resolves to 900. Same font file, but 900 vs 700 reads as a
   visibly different/heavier typeface next to a plain heading of the same
   level - not an actual font-family difference, just doubled boldness. */
h1 strong, h1 b,
h2 strong, h2 b,
h3 strong, h3 b,
h4 strong, h4 b,
h5 strong, h5 b,
h6 strong, h6 b {
    font-weight: inherit;
}

p:not(.breadcrumbs p):not(.rcrumbs p):not(.core-breadcrumbs p):not(.grant-breadcrumbs p):not(.grant-archive-breadcrumbs p):not(.cfar-footer__address),
li:not(.breadcrumbs li):not(.rcrumbs li):not(.core-breadcrumbs li):not(.grant-breadcrumbs li):not(.grant-archive-breadcrumbs li),
td,
th,
label,
.content,
.elementor-widget-text-editor,
.core-about-section,
.core-drawer-content,
.wp-block-paragraph {
  font-family: "Inter", sans-serif !important;
  color: rgba(8, 15, 26, 0.76) !important;
  font-size: 16px !important;
  line-height: 1.75em !important;
  font-weight: 400 !important;
}


/* ============================================================
   3. CONTAINER PADDING (.e-con)
   ============================================================ */

.e-con {
    --container-default-padding-left: 0px;
    --container-default-padding-right: 0px;
}
@media (max-width: 1370px) {
    .e-con {
        --container-default-padding-left: 30px;
        --container-default-padding-right: 30px;
    }
}
@media (max-width: 1100px) {
    .e-con {
        --container-default-padding-left: 10px;
        --container-default-padding-right: 10px;
    }
}
@media (max-width: 768px) {
    .e-con {
        --container-default-padding-left: 10px;
        --container-default-padding-right: 10px;
    }
}
.elementor-location-single .e-con-boxed.e-child {
    --margin-top: 0px !important;
    --margin-bottom: 0px !important;
}
.cfar_layout-single-banner .elementor-element-13b5eed8 > .e-con-inner {
    padding-left: 80px !important;
    padding-right: 80px !important;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
.cfar_layout-single-banner-overlay .elementor-element-de956b7 {
    --padding-left: 80px !important;
    --padding-right: 80px !important;
    box-sizing: border-box;
}
@media (max-width: 1370px) {
    .cfar_layout-single-banner .elementor-element-13b5eed8 > .e-con-inner {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
    .cfar_layout-single-banner-overlay .elementor-element-de956b7 {
        --padding-left: 30px !important;
        --padding-right: 30px !important;
    }
}
@media (max-width: 1000px) {
    .cfar_layout-single-banner .elementor-element-13b5eed8 > .e-con-inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .cfar_layout-single-banner-overlay .elementor-element-de956b7 {
        --padding-left: 20px !important;
        --padding-right: 20px !important;
    }
}
@media (max-width: 768px) {
    .cfar_layout-single-banner .elementor-element-13b5eed8 > .e-con-inner {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .cfar_layout-single-banner-overlay .elementor-element-de956b7 {
        --padding-left: 16px !important;
        --padding-right: 16px !important;
    }
}
/* ============================================================
   SINGLE BANNER OVERLAY - content width constraint
   ============================================================ */
.cfar_layout-single-banner-overlay .elementor-element-de956b7 > .elementor-element-2084ca19 {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 80px;
    padding-right: 80px;
    box-sizing: border-box;
    width: 100%;
}
@media (max-width: 1370px) {
    .cfar_layout-single-banner-overlay .elementor-element-de956b7 > .elementor-element-2084ca19 {
        padding-left: 30px;
        padding-right: 30px;
    }
}
@media (max-width: 1000px) {
    .cfar_layout-single-banner-overlay .elementor-element-de956b7 > .elementor-element-2084ca19 {
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media (max-width: 768px) {
    .cfar_layout-single-banner-overlay .elementor-element-de956b7 > .elementor-element-2084ca19 {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ============================================================
   4. HEADER SHELL + TOP NAVIGATION
   ============================================================ */
header img.the7-svg-image,
.elementor-widget-the7-logo-widget img,
img.the7-svg-image.preload-me {
  object-fit: contain !important;
  height: auto !important;
  width: 210px !important;
}

header.elementor-location-header,
.cfar-header {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 8px 24px -12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}
.dt-nav-menu-horizontal > li > a,
.cfar-menu > li > a {
    font-family: 'Inter', 'Roboto', sans-serif !important;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px 14px !important;
    position: relative;
    transition: color 0.25s ease;
}
.cfar-menu > li > a {
    color: #ffffff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.dt-nav-menu-horizontal > li > a .menu-text {
    position: relative;
}
.cfar-menu > li > a {
    position: relative;
}
.dt-nav-menu-horizontal > li > a .menu-text::after,
.cfar-menu > li > a::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 14px;
    right: 14px;
    height: 2px;
    background: #b7a57a;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.dt-nav-menu-horizontal > li:hover > a .menu-text::after,
.dt-nav-menu-horizontal > li.act > a .menu-text::after,
.dt-nav-menu-horizontal > li.current-menu-item > a .menu-text::after,
.dt-nav-menu-horizontal > li.current-page-ancestor > a .menu-text::after,
.cfar-menu > li:hover > a::after,
.cfar-menu > li.current-menu-item > a::after,
.cfar-menu > li.current-menu-ancestor > a::after {
    transform: scaleX(1);
    transform-origin: left center;
}
.dt-nav-menu-horizontal > li > a .submenu-indicator svg {
    width: 10px;
    height: 10px;
    transition: transform 0.3s ease;
}
.dt-nav-menu-horizontal > li:hover > a .submenu-indicator svg {
    transform: rotate(180deg);
}
/* Top-level items only - no arrow icon on 2nd/3rd-level dropdown items. */
.cfar-menu > li.menu-item-has-children > a::before {
    content: "";
    order: 2;
    display: inline-block;
    width: 6px; height: 6px;
    margin-left: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.3s ease;
}
.cfar-menu > li.menu-item-has-children:hover > a::before {
    transform: rotate(-135deg) translateY(1px);
}
.elementor-sticky--effects,
.cfar-header.is-stuck {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.elementor-sticky--effects .the7-logo-wrap img,
.cfar-header.is-stuck .cfar-logo__img,
.cfar-header.is-stuck .cfar-logo .custom-logo {
    transform: scale(0.85);
    transform-origin: left center;
    transition: transform 0.3s ease;
}


/* ============================================================
   5. SUB-NAVIGATION DROPDOWNS
   ============================================================ */

body .elementor-2900 .the7-e-sub-nav.horizontal-sub-nav,
body .elementor-2900 .the7-e-sub-nav.horizontal-sub-nav *,
body .elementor-2900 .the7-e-sub-nav.horizontal-sub-nav .menu-item,
body .elementor-2900 .the7-e-sub-nav.horizontal-sub-nav .menu-item > a,
body .elementor-2900 .the7-e-sub-nav.horizontal-sub-nav .item-content,
body .elementor-2900 .the7-e-sub-nav.horizontal-sub-nav .menu-item-text,
body .elementor-2900 .the7-e-sub-nav.horizontal-sub-nav .menu-text {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}
body .elementor-2900 .the7-e-sub-nav.horizontal-sub-nav {
    background-color: #ffffff !important;
    border-top: 2px solid #b7a57a !important;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    padding: 6px 0 !important;
    min-width: 240px;
    overflow: visible !important;
}
body .elementor-2900 .the7-e-sub-nav.horizontal-sub-nav,
body .elementor-2900 .the7-e-sub-nav.horizontal-sub-nav a,
body .elementor-2900 .the7-e-sub-nav.horizontal-sub-nav a:visited,
body .elementor-2900 .the7-e-sub-nav.horizontal-sub-nav .menu-text,
body .elementor-2900 .the7-e-sub-nav.horizontal-sub-nav .menu-item-text {
    color: #111111 !important;
}
body .elementor-2900 .the7-e-sub-nav.horizontal-sub-nav .submenu-indicator svg {
    fill: #111111 !important;
}
body .elementor-2900 .the7-e-sub-nav.horizontal-sub-nav .menu-item > a {
    font-family: 'Inter', 'Roboto', sans-serif !important;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.02em;
    padding: 11px 20px !important;
    position: relative;
    transition: padding-left 0.25s ease, background 0.25s ease, color 0.25s ease;
}
body .elementor-2900 .the7-e-sub-nav.horizontal-sub-nav .menu-item > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 70%;
    background: #b7a57a;
    transition: transform 0.25s ease;
}
body .elementor-2900 .the7-e-sub-nav.horizontal-sub-nav .menu-item > a:hover {
    background-color: rgba(47, 111, 140, 0.08) !important;
    padding-left: 28px !important;
}
body .elementor-2900 .the7-e-sub-nav.horizontal-sub-nav .menu-item > a:hover,
body .elementor-2900 .the7-e-sub-nav.horizontal-sub-nav .menu-item > a:hover .menu-text,
body .elementor-2900 .the7-e-sub-nav.horizontal-sub-nav .menu-item > a:hover .menu-item-text {
    color: #2F6F8C !important;
}
body .elementor-2900 .the7-e-sub-nav.horizontal-sub-nav .menu-item > a:hover::before {
    transform: translateY(-50%) scaleY(1);
}
body .elementor-2900 .the7-e-sub-nav.horizontal-sub-nav .menu-item.has-children {
    position: relative;
}
body .elementor-2900 .the7-e-sub-nav.horizontal-sub-nav .the7-e-sub-nav.horizontal-sub-nav {
    top: 0 !important;
    left: 100% !important;
    margin: 0 !important;
}
body .elementor-2900 .the7-e-sub-nav.horizontal-sub-nav .menu-item.has-children > a::after {
    content: "";
    position: absolute;
    top: 0;
    right: -16px;
    width: 16px;
    height: 100%;
    background: transparent;
    pointer-events: auto;
}
body .elementor-2900 .the7-e-sub-nav.horizontal-sub-nav .the7-e-sub-nav.horizontal-sub-nav::before {
    content: "";
    position: absolute;
    top: 0;
    left: -16px;
    width: 16px;
    height: 100%;
    background: transparent;
}
body .elementor-2900 .dt-nav-menu-horizontal > li.last > .the7-e-sub-nav.horizontal-sub-nav {
    left: auto !important;
    right: 0 !important;
}
body .elementor-2900 .dt-nav-menu-horizontal > li.last .the7-e-sub-nav.horizontal-sub-nav .the7-e-sub-nav.horizontal-sub-nav {
    left: auto !important;
    right: 100% !important;
    top: 0 !important;
}
body .elementor-2900 .dt-nav-menu-horizontal > li.last .the7-e-sub-nav.horizontal-sub-nav .menu-item.has-children > a::after {
    right: auto !important;
    left: -16px !important;
}
body .elementor-2900 .dt-nav-menu-horizontal > li.last .the7-e-sub-nav.horizontal-sub-nav .the7-e-sub-nav.horizontal-sub-nav::before {
    left: auto !important;
    right: -16px !important;
}




/* ============================================================
   7. SIDEBAR / GRANTS LAYOUT
   ============================================================ */

.sidebar-grants {
    gap: 0 !important;
    --e-con-gap: 0 !important;
}
.sidebar-grants h6 {
    margin: 0 !important;
}
.sidebar-grants .udub-slant-divider {
    display: inline-block;
    line-height: 0;
    margin: 0 !important;
}
.sidebar-grants .udub-slant-divider span {
    display: block;
    width: 170px;
    height: 6px;
    background: #b7a57a;
    border-radius: 100px;
    margin: 0 !important;
}
.sidebar-grants .elementor-widget {
    margin: 0 !important;
}
.sidebar-grants .elementor-widget-shortcode {
    margin-bottom: 2rem !important;
}
.elementor .grant-content {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
    width: fit-content !important;
    padding-right: 20%;
    box-sizing: content-box;
}


/* ============================================================
   8. GENERIC CARDS (.card)
   ============================================================ */

.card {
    border: none !important;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 8px 24px -12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(47, 111, 140, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
}
.card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: #b7a57a;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}
.card:hover::before { transform: scaleX(1); }
.card-body { padding: 1.75rem; }
.card-title {
    font-family: 'Inter', 'Roboto', sans-serif !important;
    font-weight: 600;
    font-size: 1.1rem;
    color: #111;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}
.card-text { color: #555; font-size: 0.95rem; line-height: 1.55; }
.card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(47, 111, 140, 0.1);
    color: #2F6F8C;
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.card:hover .card-icon {
    background: #2F6F8C;
    color: #ffffff;
    transform: scale(1.05) rotate(-4deg);
}
.card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #2F6F8C;
    text-decoration: none;
    margin-top: 1rem;
    transition: color 0.25s ease, gap 0.25s ease;
}
.card-link::after { content: "->"; transition: transform 0.25s ease; }
.card-link:hover { color: #24566d; gap: 12px; }
.card-link:hover::after { transform: translateX(2px); }
.card-img-top {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover .card-img-top { transform: scale(1.04); }
.card.card-featured {
    background: linear-gradient(135deg, #2F6F8C 0%, #24566d 100%);
    color: #ffffff;
}
.card.card-featured .card-title,
.card.card-featured .card-text,
.card.card-featured .card-link { color: #ffffff; }
.card.card-featured .card-icon {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}
.card.card-featured:hover .card-icon { background: #b7a57a; color: #ffffff; }
.card.card-featured .card-link:hover { color: #b7a57a; }


/* ============================================================
   9. ELEMENTOR E-CON CARDS
   ============================================================ */

.e-con.e-child:not(.e-grid):not(:has(.e-grid)):has(.the7-icon-wrapper):has(.the7-heading-title):has(.box-button) {
    background: #ffffff !important;
    border-radius: 8px;
    padding: 2rem !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 8px 24px -12px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    display: flex !important;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.e-con.e-child:not(.e-grid):not(:has(.e-grid)):has(.the7-icon-wrapper):has(.the7-heading-title):has(.box-button):hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(47, 111, 140, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
}
.e-con.e-child:not(.e-grid):not(:has(.e-grid)):has(.the7-icon-wrapper):has(.the7-heading-title):has(.box-button)::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: #b7a57a;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}
.e-con.e-child:not(.e-grid):not(:has(.e-grid)):has(.the7-icon-wrapper):has(.the7-heading-title):has(.box-button):hover::before {
    transform: scaleX(1);
}
.e-con.e-child:not(.e-grid):not(:has(.e-grid)):has(.the7-icon-wrapper):has(.the7-heading-title) .the7-icon-wrapper .elementor-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(47, 111, 140, 0.1);
    margin-bottom: 1.25rem;
    transition: background 0.3s ease, transform 0.3s ease;
}
.e-con.e-child:not(.e-grid):not(:has(.e-grid)):has(.the7-icon-wrapper):has(.the7-heading-title) .the7-icon-wrapper .elementor-icon svg {
    width: 32px !important; height: 32px !important;
    fill: #2F6F8C;
    transition: fill 0.3s ease;
}
.e-con.e-child:not(.e-grid):not(:has(.e-grid)):has(.the7-icon-wrapper):has(.the7-heading-title):has(.box-button):hover .the7-icon-wrapper .elementor-icon {
    background: #2F6F8C;
    transform: scale(1.05) rotate(-4deg);
}
.e-con.e-child:not(.e-grid):not(:has(.e-grid)):has(.the7-icon-wrapper):has(.the7-heading-title):has(.box-button):hover .the7-icon-wrapper .elementor-icon svg {
    fill: #ffffff;
}
.e-con.e-child:not(.e-grid):not(:has(.e-grid)):has(.the7-icon-wrapper):has(.the7-heading-title) .the7-heading-title {
    font-family: 'Inter', 'Roboto', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.15rem !important;
    color: #111 !important;
    margin: 0 0 0.5rem 0 !important;
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.e-con.e-child:not(.e-grid):not(:has(.e-grid)):has(.the7-icon-wrapper):has(.the7-heading-title) .elementor-widget-text-editor p,
.e-con.e-child:not(.e-grid):not(:has(.e-grid)):has(.the7-icon-wrapper):has(.the7-heading-title) .elementor-widget-text-editor span {
    font-family: 'Inter', 'Roboto', sans-serif !important;
    color: #555 !important;
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
}
.e-con.e-child:not(.e-grid):not(:has(.e-grid)):has(.the7-icon-wrapper):has(.the7-heading-title) .elementor-widget-text-editor a {
    color: #2F6F8C !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}
.e-con.e-child:not(.e-grid):not(:has(.e-grid)):has(.the7-icon-wrapper):has(.the7-heading-title) .elementor-widget-text-editor a:hover {
    color: #24566d !important;
}
.e-con.e-child:not(.e-grid):not(:has(.e-grid)):has(.the7-icon-wrapper):has(.the7-heading-title) .elementor-widget-the7_button_widget {
    margin-top: auto !important;
}
.e-con.e-child:not(.e-grid):not(:has(.e-grid)):has(.the7-icon-wrapper):has(.the7-heading-title) .box-button.elementor-button {
    background: transparent !important;
    color: #2F6F8C !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    font-family: 'Inter', 'Roboto', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    transition: color 0.25s ease, gap 0.25s ease;
    width: auto !important;
}
.e-con.e-child:not(.e-grid):not(:has(.e-grid)):has(.the7-icon-wrapper):has(.the7-heading-title) .box-button.elementor-button::after {
    content: "->";
    transition: transform 0.25s ease;
}
.e-con.e-child:not(.e-grid):not(:has(.e-grid)):has(.the7-icon-wrapper):has(.the7-heading-title) .box-button.elementor-button:hover {
    color: #24566d !important;
    gap: 12px;
    background: transparent !important;
}
.e-con.e-child:not(.e-grid):not(:has(.e-grid)):has(.the7-icon-wrapper):has(.the7-heading-title) .box-button.elementor-button:hover::after {
    transform: translateX(2px);
}
@media (max-width: 768px) {
    .e-con.e-child:not(.e-grid):not(:has(.e-grid)):has(.the7-icon-wrapper):has(.the7-heading-title):has(.box-button) {
        padding: 1.5rem !important;
    }
    .e-con.e-child:not(.e-grid):not(:has(.e-grid)):has(.the7-icon-wrapper):has(.the7-heading-title) .the7-icon-wrapper .elementor-icon {
        width: 56px; height: 56px;
    }
    .e-con.e-child:not(.e-grid):not(:has(.e-grid)):has(.the7-icon-wrapper):has(.the7-heading-title) .the7-icon-wrapper .elementor-icon svg {
        width: 28px !important; height: 28px !important;
    }
}


/* ============================================================
   10. CFAR PEOPLE WIDGET
   ============================================================ */

.cfar-people-widget {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
}
.cfar-people-widget .cfar-directory {
    display: grid !important;
    width: 100%;
    gap: 48px 60px;
}
.cfar-people-widget .cfar-directory.columns-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.cfar-people-widget .cfar-directory.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.cfar-people-widget .cfar-directory.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.cfar-person {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 8px 24px -12px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.cfar-person:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(47, 111, 140, 0.10), 0 4px 12px rgba(0, 0, 0, 0.05);
    border-color: rgba(47, 111, 140, 0.15);
}
.cfar-person::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: #b7a57a;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.cfar-person:hover::before { transform: scaleX(1); }
.cfar-person:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.cfar-person-left {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}
.cfar-person-photo {
    flex: 0 0 120px;
    width: 120px; height: 150px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 4px 16px -4px rgba(47, 111, 140, 0.08);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
    background: #f5f5f5;
}
.cfar-person-photo:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 8px 24px -4px rgba(47, 111, 140, 0.15);
}
.cfar-person img,
.cfar-person-photo img {
    width: 120px !important; height: 150px !important;
    max-width: 120px !important; max-height: 150px !important;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.cfar-person-photo:hover img { transform: scale(1.04); }
.cfar-person-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 2px;
}
.cfar-person-name {
    font-family: 'Inter', 'Roboto', sans-serif !important;
    font-weight: 600;
    font-size: 1.0625rem;
    color: #111;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin-bottom: 2px;
}
.cfar-person-name a {
    text-decoration: none;
    color: inherit;
    background-image: linear-gradient(to right, #2F6F8C, #2F6F8C);
    background-size: 0 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 0.3s ease, color 0.25s ease;
}
.cfar-person-name a:hover {
    color: #2F6F8C;
    background-size: 100% 1px;
    text-decoration: none;
}
.cfar-person-role {
    font-family: 'Inter', 'Roboto', sans-serif !important;
    font-size: 0.875rem;
    font-weight: 500;
    color: #2F6F8C;
    letter-spacing: 0.01em;
    line-height: 1.4;
    margin-bottom: 2px;
}
.cfar-person-core,
.cfar-person-field-1,
.cfar-person-field-2,
.cfar-person-field-3 {
    font-family: 'Inter', 'Roboto', sans-serif !important;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #555;
}
.cfar-person-email { margin-top: 4px; }
.cfar-person-email a {
    font-family: 'Inter', 'Roboto', sans-serif;
    font-size: 0.8125rem;
    color: #555 !important;
    text-decoration: none;
    word-break: break-word;
    overflow-wrap: anywhere;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
}
.cfar-person-email a::before {
    content: "✉";
    font-size: 0.85rem;
    color: #2F6F8C;
    transition: transform 0.2s ease;
}
.cfar-person-email a:hover { color: #2F6F8C !important; text-decoration: none; }
.cfar-person-email a:hover::before { transform: translateX(-1px); }
.cfar-person-right {
    white-space: nowrap;
    font-family: 'Inter', 'Roboto', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    color: #2F6F8C;
    background: rgba(47, 111, 140, 0.08);
    padding: 5px 12px;
    border-radius: 100px;
    margin-left: 20px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    align-self: flex-start;
    margin-top: 4px;
}


/* ============================================================
   11. CFAR AFFILIATES
   ============================================================ */

.cfar-affiliates { padding: 0; margin: 0; width: 100%; }
.cfar-affiliates h6 {
    font-family: 'Inter', 'Roboto', sans-serif !important;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #b7a57a;
    margin: 0 0 0.75rem 0;
    line-height: 1.2;
}
.cfar-affiliates ul { list-style: none; margin: 0; padding: 0; }
.cfar-affiliates-list { display: flex; flex-wrap: wrap; gap: 0.5rem 0.5rem; }
.cfar-affiliates-list li { margin: 0; }
.cfar-affiliates-list a {
    font-family: 'Inter', 'Roboto', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #ffffff;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    display: inline-block;
}
.cfar-affiliates-list a:hover {
    background: rgba(183, 165, 122, 0.25);
    border-color: #b7a57a;
    text-decoration: none;
    transform: translateY(-1px);
}


/* ============================================================
   12. STATS STRIP
   ============================================================ */

.stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, #2F6F8C 0%, #24566d 100%);
    border-radius: 8px;
    margin: 2rem 0;
    color: #fff;
}
.stats-strip .stat {
    text-align: center;
    padding: 0 1rem;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.stats-strip .stat:last-child { border-right: none; }
.stats-strip .stat-number {
    font-family: 'Inter', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: #b7a57a;
    margin-bottom: 0.5rem;
}
.stats-strip .stat-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.9;
}
@media (max-width: 768px) {
    .stats-strip { grid-template-columns: repeat(2, 1fr); padding: 2rem 1rem; }
    .stats-strip .stat:nth-child(2) { border-right: none; }
}


/* ============================================================
   13. KICKER TEXT + SECTION HEADLINES
   Hero heading variant only; general h2 normalised in section 26
   ============================================================ */

h2.the7-heading-title.hero-heading {
    font-family: 'Inter', 'Roboto', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em;
    color: #111 !important;
    padding-top: 1.5rem;
    margin-bottom: 1rem !important;
    position: relative;
}
h2.the7-heading-title.hero-heading::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 48px; height: 3px;
    background: #b7a57a;
}
.kicker-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #b7a57a;
    margin-bottom: 0.5rem;
    display: block;
}


/* ============================================================
   14. HERO BUTTONS + IMAGE TRIO
   ============================================================ */

.elementor-element-c3b8f82 .box-button {
    background: #b7a57a !important;
    color: #111 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 16px 36px !important;
    border-radius: 4px !important;
    border: none !important;
    transition: all 0.25s ease !important;
}
.elementor-element-c3b8f82 .box-button:hover {
    background: #a08e62 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
.elementor-element-3ce6e9b .box-button {
    background: transparent !important;
    color: #fff !important;
    border: 2px solid #fff !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 14px 34px !important;
    border-radius: 4px !important;
    transition: all 0.25s ease !important;
}
.elementor-element-3ce6e9b .box-button:hover { background: #fff !important; color: #2F6F8C !important; }
.elementor-element-77bce31 .the7-image-wrapper,
.elementor-element-d38f16f .the7-image-wrapper,
.elementor-element-dcbb388 .the7-image-wrapper,
.elementor-element-2f83744 .the7-image-wrapper,
.elementor-element-f525181 .the7-image-wrapper {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.elementor-element-77bce31 .the7-image-wrapper:hover,
.elementor-element-d38f16f .the7-image-wrapper:hover,
.elementor-element-dcbb388 .the7-image-wrapper:hover,
.elementor-element-2f83744 .the7-image-wrapper:hover,
.elementor-element-f525181 .the7-image-wrapper:hover { transform: translateY(-4px) scale(1.01); }
.elementor-element-77bce31 img,
.elementor-element-d38f16f img,
.elementor-element-dcbb388 img,
.elementor-element-2f83744 img,
.elementor-element-f525181 img { transition: transform 0.5s ease; }
.elementor-element-77bce31 .the7-image-wrapper:hover img,
.elementor-element-d38f16f .the7-image-wrapper:hover img,
.elementor-element-dcbb388 .the7-image-wrapper:hover img,
.elementor-element-2f83744 .the7-image-wrapper:hover img,
.elementor-element-f525181 .the7-image-wrapper:hover img { transform: scale(1.05); }
.elementor-element-8ec5bbf {
    height: clamp(200px, 20vw, 400px) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}


/* ============================================================
   15. MID-PAGE SLIDERS
   ============================================================ */

.elementor-element-077b22e .box-button {
    background: #b7a57a !important;
    color: #111 !important;
    border: 2px solid #b7a57a !important;
    font-family: 'Inter', 'Roboto', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 14px 36px !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    transition: all 0.25s ease !important;
}
.elementor-element-077b22e .box-button:hover {
    background: #a08e62 !important;
    border-color: #a08e62 !important;
    color: #111 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.elementor-element-d7791de .swiper-slide,
.elementor-element-768ee56 .swiper-slide { position: relative; }
.elementor-element-d7791de .swiper-slide::before,
.elementor-element-768ee56 .swiper-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.55) 100%);
    z-index: 1;
    pointer-events: none;
}
.elementor-element-d7791de .the7-swiper-slide-inner,
.elementor-element-768ee56 .the7-swiper-slide-inner { position: relative; z-index: 2; }
.elementor-element-d7791de h3,
.elementor-element-d7791de p,
.elementor-element-768ee56 p {
    font-family: 'Inter', 'Roboto', sans-serif !important;
    font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em;
    color: #fff !important;
    margin-bottom: 1.5rem !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}


/* ============================================================
   16. UNIFIED BLUE BUTTONS
   ============================================================ */

.elementor-button.elementor-button-link,
a.elementor-button.elementor-button-link,
.wp-block-button .wp-block-button__link:not(.gold-btn),
.wp-block-file__button,
a.wp-block-file__button {
    background: #2F6F8C !important;
    background-color: #2F6F8C !important;
    color: #ffffff !important;
    border: 2px solid #2F6F8C !important;
    border-radius: 4px !important;
    font-family: 'Inter', 'Roboto', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 12px 28px !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    width: auto !important;
    text-align: center;
    transition: all 0.25s ease !important;
}
.elementor-button.elementor-button-link:hover,
a.elementor-button.elementor-button-link:hover,
.wp-block-button .wp-block-button__link:not(.gold-btn):hover,
.wp-block-file__button:hover,
a.wp-block-file__button:hover {
    background: #24566d !important;
    background-color: #24566d !important;
    border-color: #24566d !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(47, 111, 140, 0.25);
    text-decoration: none !important;
}
.elementor-button.elementor-button-link .elementor-button-content-wrapper,
.elementor-button.elementor-button-link .elementor-button-text {
    color: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    text-transform: inherit !important;
    letter-spacing: inherit !important;
}
.elementor-button.elementor-button-link.elementor-size-sm,
.wp-block-button.is-style-small .wp-block-button__link {
    padding: 10px 22px !important;
    font-size: 0.875rem !important;
}
html body .wp-block-file__button,
html body a.wp-block-file__button,
html body .wp-block-file__button:visited,
html body a.wp-block-file__button:visited {
    color: #ffffff !important;
    text-decoration: none !important;
    background-color: #2F6F8C !important;
}
.wp-block-file { padding-bottom: 8px; }


/* ============================================================
   17. WP BLOCK EMBED / SEPARATOR / HR
   ============================================================ */

.wp-block-embed { max-width: 800px; margin: 0 auto; }
.wp-block-embed__wrapper { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; }
.wp-block-embed__wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.wp-block-separator,
.wp-block-separator.has-alpha-channel-opacity {
    opacity: 1 !important;
    border: none !important;
    border-top: 2px solid #2F6F8C !important;
    margin: 8px 0 16px 0 !important;
    width: 100% !important;
}
.elementor hr,
.elementor .elementor-divider-separator {
    background-color: #2F6F8C !important;
    border-color: #2F6F8C !important;
    margin: 20px 0;
    height: 2px !important;
    border: none !important;
}
.elementor hr {
    background-color: #2F6F8C !important;
    height: 2px !important;
    border: none !important;
    margin: 20px 0;
}


/* ============================================================
   18. ACCORDIONS — WP BLOCK
   ============================================================ */

.wp-block-accordion-item {
    border: none;
    background: transparent;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}
/* Border between items - matches .grant-drawer + .grant-drawer exactly
   (a plain 1px rule; the previous extra white-line overlay was a mismatch
   with the grants page and has been removed). */
.wp-block-accordion-item + .wp-block-accordion-item { border-top: 1px solid #D8D7D7; }
/* Content is often authored as several separate Accordion blocks in a row
   (one item each) rather than one block with multiple items - make those
   stack exactly like items within a single block (no gap, same divider),
   matching the grants page regardless of how the content was authored. */
.wp-block-accordion + .wp-block-accordion {
    margin-top: 0 !important;
    border-top: 1px solid #D8D7D7;
}
.wp-block-accordion {
    gap: 0 !important;
    --wp--style--block-gap: 0 !important;
    /* Matches .grant-drawers { margin-top: 32px } in single-grant.php. No
       !important - single-core.php already has its own higher-specificity
       `body.single-core .wp-block-accordion { margin: 0 }` override for its
       own context, and this should be overridable the same way elsewhere
       without needing a specificity war. */
    margin-top: 32px;
}
/* ...except when a parent container already owns the top spacing itself -
   e.g. single-core.php's .core-drawers + .core-wp-content already sets its
   own margin-top:0/border-top so a hardcoded .core-drawer list and a
   Gutenberg accordion group read as one continuous flush list. Forcing 32px
   on the accordion too broke that intentional transition. */
.wp-block-accordion:first-child {
    margin-top: 0 !important;
}
.wp-block-accordion-heading {
    margin: 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    color: inherit !important;
}
/* Matches .grant-drawer-summary in single-grant.php exactly. */
.wp-block-accordion-heading__toggle {
    width: 100%;
    background-color: #2F6F8C !important;
    color: #fff !important;
    border: none;
    padding: 14px 16px !important;
    margin: 0 !important;
    text-align: left;
    font-family: 'Libre Franklin', Helvetica, Arial, Lucida, sans-serif;
    font-size: 1em !important;
    font-weight: 700;
    line-height: 1.3 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.wp-block-accordion-heading__toggle:hover,
.wp-block-accordion-heading__toggle[aria-expanded="true"] { background-color: #24566d !important; }
.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.wp-block-accordion-heading__toggle:focus-visible {
    outline: 2px solid #b7a57a;
    outline-offset: -2px;
}
.wp-block-accordion-heading__toggle-title {
    color: #fff;
    font-family: 'Libre Franklin', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
}
/* The +/- icon itself is already handled by the existing "21. ACCORDIONS —
   UNIFIED +/- ICONS" section below (.wp-block-accordion-heading__toggle-icon,
   flex-positioned, !important) - no separate rule needed here. */
/* Matches .grant-drawer-content in single-grant.php exactly. Padding lives
   on the content children, not the panel itself - this block uses a
   grid-template-rows collapse animation (wp-includes/blocks/accordion),
   and padding directly on the collapsing element can prevent it from
   reaching true zero height, leaving stray space when closed. */
.wp-block-accordion-panel {
    background: #fff;
    font-family: 'Libre Franklin', Helvetica, Arial, Lucida, sans-serif;
    font-size: 16px;
    line-height: 1.6em;
    color: #666666;
    overflow: hidden;
}
.wp-block-accordion-panel > * {
    padding-left: 24px;
    padding-right: 24px;
}
.wp-block-accordion-panel > *:first-child { padding-top: 16px; }
.wp-block-accordion-panel > *:last-child { padding-bottom: 16px; }
.wp-block-accordion-panel p {
    font-family: 'Libre Franklin', Helvetica, Arial, Lucida, sans-serif !important;
    margin-bottom: 0.75em;
}
.wp-block-accordion-panel p:first-child { margin-top: 0; }
.wp-block-accordion-panel p:last-child { margin-bottom: 0; }
.wp-block-accordion-panel a { color: #2F6F8C; text-decoration: underline; }


/* ============================================================
   19. ACCORDIONS — ELEMENTOR CLASSIC
   ============================================================ */

.elementor-accordion .elementor-accordion-icon,
.elementor-accordion .elementor-accordion-icon svg { display: none !important; }
.elementor-accordion h4.elementor-tab-title { margin: 0 !important; }
.elementor-accordion .elementor-accordion-item {
    --widgets-spacing: 0px !important;
    border: none;
    margin: 0;
    background: transparent;
}
.elementor-accordion .elementor-tab-title {
    background-color: #2F6F8C !important;
    color: #fff !important;
    border: none;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 14px 16px !important;
    text-align: left;
    font-family: 'Roboto', sans-serif;
    font-size: 1em !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.elementor-accordion .elementor-tab-title a {
    color: #fff !important;
    text-decoration: none;
    flex-grow: 1;
    display: block;
    font-family: 'Roboto', sans-serif !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    text-transform: inherit !important;
    letter-spacing: inherit !important;
}
.elementor-accordion .elementor-tab-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.elementor-accordion .elementor-tab-title:hover,
.elementor-accordion .elementor-tab-title.elementor-active { background-color: #24566d !important; }
.elementor-accordion .elementor-tab-content { padding: 16px; background: #fff; }
.elementor-accordion .elementor-tab-content > *:last-child { margin-bottom: 0; }
.elementor-accordion .elementor-accordion-item + .elementor-accordion-item { border-top: 1px solid #D8D7D7; }


/* ============================================================
   20. ACCORDIONS — ELEMENTOR NESTED
   ============================================================ */

.e-n-accordion {
    border: none;
    margin: 0;
    padding: 0;
    --widgets-spacing: 0 !important;
    gap: 0 !important;
}
.e-n-accordion .e-n-accordion-item {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.e-n-accordion .e-n-accordion-item + .e-n-accordion-item { border-top: 1px solid #D8D7D7 !important; }
.e-n-accordion .e-n-accordion-item-title,
.e-n-accordion summary.e-n-accordion-item-title,
.elementor-widget-n-accordion .e-n-accordion-item-title {
    background-color: #2F6F8C !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 14px 50px 14px 16px !important;
    text-align: left !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 1em !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1.3 !important;
    cursor: pointer;
    display: block !important;
    position: relative !important;
    width: 100% !important;
    list-style: none !important;
    transition: background-color 0.2s ease;
}
.e-n-accordion .e-n-accordion-item-title::-webkit-details-marker,
.e-n-accordion .e-n-accordion-item-title::marker { display: none !important; content: "" !important; }
.e-n-accordion .e-n-accordion-item-title:hover,
.e-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title { background-color: #24566d !important; }
.e-n-accordion .e-n-accordion-item-title-header,
.e-n-accordion .e-n-accordion-item-title-text {
    color: #fff !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: inherit !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    flex-grow: 1;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
    text-align: left !important;
    width: auto !important;
}
.e-n-accordion .e-n-accordion-item > .e-con,
.e-n-accordion .e-n-accordion-item [role="region"] {
    padding: 16px !important;
    background: #fff !important;
    border: none !important;
    border-radius: 0 !important;
}
.e-n-accordion .e-n-accordion-item [role="region"] > *:last-child { margin-bottom: 0 !important; }
.e-n-accordion .e-n-accordion-item-title:focus-visible { outline: 2px solid #b7a57a; outline-offset: -2px; }


/* ============================================================
   21. ACCORDIONS — UNIFIED +/- ICONS
   ============================================================ */

.wp-block-accordion-heading__toggle-icon {
    font-size: 0 !important;
    width: 20px; height: 20px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.wp-block-accordion-heading__toggle-icon::before {
    content: "+";
    font-size: 20px !important;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}
.wp-block-accordion-heading__toggle[aria-expanded="true"] .wp-block-accordion-heading__toggle-icon::before { content: "-"; }
.wp-block-accordion-heading__toggle[aria-expanded="true"] .wp-block-accordion-heading__toggle-icon {
    transform: none !important;
    rotate: 0deg !important;
}
.elementor-accordion .elementor-tab-title::after {
    content: "+" !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    margin-left: auto !important;
    color: #fff !important;
}
.elementor-accordion .elementor-tab-title.elementor-active::after { content: "-" !important; }
.e-n-accordion .e-n-accordion-item-title-icon svg,
.e-n-accordion .e-n-accordion-item-title-icon .e-opened,
.e-n-accordion .e-n-accordion-item-title-icon .e-closed { display: none !important; }
.e-n-accordion .e-n-accordion-item-title-icon {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    width: 20px; height: 20px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #fff !important;
}
.e-n-accordion .e-n-accordion-item-title-icon::before {
    content: "+";
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}
.e-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon::before { content: "-"; }
.sub-drawer .wp-block-accordion-heading__toggle {
  background-color: #f0f4f6 !important;
  color: #000 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
}

.sub-drawer .wp-block-accordion-heading__toggle-icon {
  color: #000 !important;
}

.sub-drawer .wp-block-accordion-heading__toggle-icon::before {
  color: #000 !important;
}
.sub-drawer .wp-block-accordion-heading__toggle,
.sub-drawer .wp-block-accordion-heading__toggle * {
  color: #000 !important;
}
.wp-block-accordion-item.sub-drawer .wp-block-accordion-heading__toggle,
.wp-block-accordion .sub-drawer .wp-block-accordion-heading__toggle {
  background-color: #f0f4f6 !important;
  color: #000 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
}

.wp-block-accordion-item.sub-drawer .wp-block-accordion-heading__toggle *,
.wp-block-accordion .sub-drawer .wp-block-accordion-heading__toggle * {
  color: #000 !important;
}
/* ============================================================
   22. FOOTER
   ============================================================ */

footer#footer {
    padding: 4rem 0 2rem 0 !important;
    position: relative;
    border-top: 3px solid #b7a57a;
}
/* .cfar-footer has its own two-band structure (see __top-strip below) instead
   of the old single-band padding - the gold pill still marks the very top. */
.cfar-footer {
    position: relative;
    border-top: 3px solid #b7a57a;
}
footer#footer::before,
.cfar-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px; height: 2px;
    background: #b7a57a;
}
/* First (empty, decorative) black band, then a thin light divider, then the
   second band holding the actual footer content - matches the reference
   screenshot's two-band footer exactly. */
.cfar-footer__top-strip {
    height: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
footer#footer .elementor-container { gap: 3rem; align-items: flex-start !important; }
footer#footer .elementor-column { padding: 0 !important; }
footer#footer #footer-ucsd-logo img,
.cfar-footer__logo--ucsd {
    height: 45px !important; width: auto !important; max-width: 100% !important;
    margin-bottom: 0.5rem !important; display: block;
}
footer#footer .elementor-element-16b80a3 img,
.cfar-footer__logo--cfar {
    height: 80px !important; width: auto !important; max-width: 100% !important;
    margin-bottom: 0.5rem !important; display: block;
    margin-left: auto !important; margin-right: 0 !important;
}
footer#footer #footer-ucsd-logo { margin-bottom: 0 !important; }
footer#footer .elementor-element-16b80a3 {
    margin-left: auto !important; margin-right: 0 !important;
    margin-bottom: 0 !important; text-align: right;
}
footer#footer #footer-ucsd-logo .elementor-widget-container,
footer#footer .elementor-element-16b80a3 .elementor-widget-container {
    margin-bottom: 0 !important; padding-bottom: 0 !important;
}
footer#footer .elementor-element-e3de2f3 .elementor-widget-wrap,
footer#footer .elementor-element-f70b195 .elementor-widget-wrap {
    gap: 0.5rem !important; --widgets-spacing: 0.5rem !important;
}
footer#footer .cfar-footer-text-cr p,
footer#footer .elementor-element-1ef4e9a p,
.cfar-footer__address {
    font-family: 'Inter', 'Roboto', sans-serif !important;
    font-size: 0.85rem !important;
    line-height: 1.8 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    letter-spacing: 0.01em;
    margin: 0 !important; padding: 0 !important; border: none !important;
    max-width: 420px;
}
footer#footer .cfar-footer-text-cr p .footer-copyright-year { font-weight: 500; }
footer#footer .elementor-element-d0aa3f1 .box-button,
footer#footer .elementor-element-5eb07fa .box-button,
footer#footer .elementor-element-c4081f6 .box-button,
.cfar-footer__links a {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.75) !important;
    padding: 0 !important; border: none !important;
    box-shadow: none !important; border-radius: 0 !important;
    font-family: 'Inter', 'Roboto', sans-serif !important;
    font-size: 0.8125rem !important; font-weight: 500 !important;
    text-transform: uppercase !important; letter-spacing: 0.1em !important;
    text-align: left !important; width: auto !important;
    position: relative;
    transition: color 0.25s ease !important;
    margin: 0 !important;
    text-decoration: none !important;
    display: inline-block;
}
footer#footer .elementor-element-d0aa3f1 .box-button::after,
footer#footer .elementor-element-5eb07fa .box-button::after,
footer#footer .elementor-element-c4081f6 .box-button::after,
.cfar-footer__links a::after {
    content: "";
    position: absolute;
    bottom: -3px; left: 0;
    width: 100%; height: 1px;
    background: #b7a57a;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s ease;
}
footer#footer .elementor-element-d0aa3f1 .box-button:hover,
footer#footer .elementor-element-5eb07fa .box-button:hover,
footer#footer .elementor-element-c4081f6 .box-button:hover,
.cfar-footer__links a:hover {
    color: #ffffff !important; background: transparent !important;
}
footer#footer .elementor-element-d0aa3f1 .box-button:hover::after,
footer#footer .elementor-element-5eb07fa .box-button:hover::after,
footer#footer .elementor-element-c4081f6 .box-button:hover::after,
.cfar-footer__links a:hover::after { transform: scaleX(1); }
footer#footer .elementor-element-d0aa3f1,
footer#footer .elementor-element-5eb07fa,
footer#footer .elementor-element-c4081f6 {
    display: inline-block !important;
    margin: 1.5rem 0 0 0 !important; padding: 0 !important;
    width: auto !important; vertical-align: middle;
}
footer#footer .elementor-element-5eb07fa,
footer#footer .elementor-element-c4081f6 { position: relative; padding-left: 2rem !important; }
footer#footer .elementor-element-5eb07fa::before,
footer#footer .elementor-element-c4081f6::before {
    content: "";
    position: absolute;
    left: 1rem; top: 50%; transform: translateY(-50%);
    width: 3px; height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
}
html body footer#footer.solid-bg,
html body footer#footer.footer.solid-bg,
html body footer#footer.footer.solid-bg.empty-footer,
html body .cfar-footer {
    background: #000000 !important;
    background-color: #000000 !important;
    background-image: none !important;
}

/* Tablet landscape + portrait: fix col2 widget stacking up to 1100px */
@media (max-width: 1100px) {
    footer#footer { padding: 3rem 40px 2rem 40px !important; }
    footer#footer .elementor-container { gap: 2rem; }

    /* Stack col2 (CFAR side) widgets vertically at all tablet sizes */
    footer#footer .elementor-element-f70b195 .elementor-widget-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 0.5rem !important;
    }
    footer#footer .elementor-element-16b80a3 { order: 1 !important; }
    footer#footer .elementor-element-d0aa3f1 { order: 2 !important; }
    footer#footer .elementor-element-5eb07fa { order: 3 !important; }
    footer#footer .elementor-element-c4081f6 { order: 4 !important; }

    /* Buttons: block so they stack, not inline beside logo */
    footer#footer .elementor-element-d0aa3f1,
    footer#footer .elementor-element-5eb07fa,
    footer#footer .elementor-element-c4081f6 {
        display: block !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* Restore dot separators between links */
    footer#footer .elementor-element-5eb07fa,
    footer#footer .elementor-element-c4081f6 {
        position: relative;
        padding-left: 2rem !important;
    }
}

/* Tablet portrait: reorder columns so CFAR is on right, UCSD on left */
@media (max-width: 900px) {
    footer#footer .elementor-element-f70b195 { order: 1 !important; }
    footer#footer .elementor-element-e3de2f3 { order: 2 !important; }
}

/* Mobile: stack columns */
@media (max-width: 768px) {
    footer#footer { padding: 3rem 1.5rem 2rem 1.5rem !important; text-align: center; }

    /* Reset order values inherited from 900px block, then apply explicit order */
    footer#footer .elementor-container {
        flex-direction: column !important;
        gap: 2.5rem !important;
        align-items: stretch !important;
    }
    footer#footer .elementor-column {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Explicit column order: CFAR col first, UCSD/address col second */
    footer#footer .elementor-element-f70b195 { order: 1 !important; }
    footer#footer .elementor-element-e3de2f3 { order: 2 !important; }

    /* col2 (f70b195): force column direction AND explicit widget order
       so CFAR logo (16b80a3) always renders above buttons regardless
       of any inherited elementor-reverse-mobile on the widget-wrap */
    footer#footer .elementor-element-f70b195 > .elementor-widget-wrap,
    footer#footer .elementor-element-f70b195 .elementor-widget-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 0 !important;
        --widgets-spacing: 0 !important;
    }
    footer#footer .elementor-element-16b80a3 { order: 1 !important; }
    footer#footer .elementor-element-d0aa3f1 { order: 2 !important; }
    footer#footer .elementor-element-5eb07fa { order: 3 !important; }
    footer#footer .elementor-element-c4081f6 { order: 4 !important; }

    /* col1 (e3de2f3): source order = UCSD logo first, address text second — correct as-is */
    footer#footer .elementor-element-e3de2f3 .elementor-widget-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 0.75rem !important;
    }

    footer#footer .elementor-widget-wrap { text-align: center !important; }

    /* CFAR logo */
    footer#footer .elementor-element-16b80a3 img {
        height: 65px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block;
    }
    footer#footer .elementor-element-16b80a3 {
        text-align: center !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    /* UCSD logo */
    footer#footer #footer-ucsd-logo img {
        height: 38px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block;
    }
    footer#footer #footer-ucsd-logo {
        text-align: center !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    /* Address text */
    footer#footer .cfar-footer-text-cr,
    footer#footer .elementor-element-1ef4e9a {
        text-align: center !important;
        width: 100% !important;
    }
    footer#footer .cfar-footer-text-cr p,
    footer#footer .elementor-element-1ef4e9a p {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center;
        max-width: 100% !important;
    }

    /* Buttons: stack centered below CFAR logo */
    footer#footer .elementor-element-d0aa3f1,
    footer#footer .elementor-element-5eb07fa,
    footer#footer .elementor-element-c4081f6 {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        float: none !important;
    }
    footer#footer .elementor-element-d0aa3f1 { margin-top: 1.5rem !important; }
    footer#footer .elementor-element-5eb07fa,
    footer#footer .elementor-element-c4081f6 { margin-top: 0.75rem !important; }
    footer#footer .elementor-element-5eb07fa::before,
    footer#footer .elementor-element-c4081f6::before { display: none !important; }
    footer#footer .elementor-element-d0aa3f1 .elementor-widget-container,
    footer#footer .elementor-element-5eb07fa .elementor-widget-container,
    footer#footer .elementor-element-c4081f6 .elementor-widget-container,
    footer#footer .elementor-element-d0aa3f1 .elementor-button-wrapper,
    footer#footer .elementor-element-5eb07fa .elementor-button-wrapper,
    footer#footer .elementor-element-c4081f6 .elementor-button-wrapper {
        text-align: center !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    footer#footer .elementor-element-d0aa3f1 .box-button,
    footer#footer .elementor-element-5eb07fa .box-button,
    footer#footer .elementor-element-c4081f6 .box-button {
        text-align: center !important;
        display: inline-block !important;
        width: auto !important;
        margin: 0 auto !important;
    }
}


/* ============================================================
   23. KEYBOARD ACCESSIBILITY (Focus Mirrors)
   ============================================================ */

.card:focus-within { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(47, 111, 140, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06); }
.card:focus-within::before { transform: scaleX(1); }
.card:focus-within .card-icon { background: #2F6F8C; color: #ffffff; transform: scale(1.05) rotate(-4deg); }
.card:focus-within .card-img-top { transform: scale(1.04); }
.card-link:focus-visible { color: #24566d; gap: 12px; outline: 2px solid #2F6F8C; outline-offset: 4px; border-radius: 2px; }
.card-link:focus-visible::after { transform: translateX(2px); }
.cfar-person:focus-within { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(47, 111, 140, 0.10), 0 4px 12px rgba(0, 0, 0, 0.05); border-color: rgba(47, 111, 140, 0.15); }
.cfar-person:focus-within::before { transform: scaleX(1); }
.cfar-person-photo:focus-within { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 8px 24px -4px rgba(47, 111, 140, 0.15); }
.cfar-person-photo:focus-within img { transform: scale(1.04); }
.cfar-person-name a:focus-visible { color: #2F6F8C; background-size: 100% 1px; outline: 2px solid #2F6F8C; outline-offset: 3px; border-radius: 2px; }
.cfar-person-email a:focus-visible { color: #2F6F8C !important; outline: 2px solid #2F6F8C; outline-offset: 3px; border-radius: 2px; }
.e-con.e-child:not(.e-grid):not(:has(.e-grid)):has(.the7-icon-wrapper):has(.the7-heading-title):has(.box-button):focus-within { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(47, 111, 140, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06); }
.e-con.e-child:not(.e-grid):not(:has(.e-grid)):has(.the7-icon-wrapper):has(.the7-heading-title):has(.box-button):focus-within::before { transform: scaleX(1); }
.e-con.e-child:not(.e-grid):not(:has(.e-grid)):has(.the7-icon-wrapper):has(.the7-heading-title):has(.box-button):focus-within .the7-icon-wrapper .elementor-icon { background: #2F6F8C; transform: scale(1.05) rotate(-4deg); }
.e-con.e-child:not(.e-grid):not(:has(.e-grid)):has(.the7-icon-wrapper):has(.the7-heading-title):has(.box-button):focus-within .the7-icon-wrapper .elementor-icon svg { fill: #ffffff; }
.e-con.e-child:not(.e-grid):not(:has(.e-grid)):has(.the7-icon-wrapper):has(.the7-heading-title) .box-button.elementor-button:focus-visible { color: #24566d !important; gap: 12px; outline: 2px solid #2F6F8C; outline-offset: 4px; border-radius: 2px; }
.e-con.e-child:not(.e-grid):not(:has(.e-grid)):has(.the7-icon-wrapper):has(.the7-heading-title) .box-button.elementor-button:focus-visible::after { transform: translateX(2px); }
.elementor-element-77bce31 .the7-image-wrapper:focus-within,
.elementor-element-d38f16f .the7-image-wrapper:focus-within,
.elementor-element-dcbb388 .the7-image-wrapper:focus-within,
.elementor-element-2f83744 .the7-image-wrapper:focus-within,
.elementor-element-f525181 .the7-image-wrapper:focus-within { transform: translateY(-4px) scale(1.01); }
.elementor-element-77bce31 .the7-image-wrapper:focus-within img,
.elementor-element-d38f16f .the7-image-wrapper:focus-within img,
.elementor-element-dcbb388 .the7-image-wrapper:focus-within img,
.elementor-element-2f83744 .the7-image-wrapper:focus-within img,
.elementor-element-f525181 .the7-image-wrapper:focus-within img { transform: scale(1.05); }
.elementor-button.elementor-button-link:focus-visible,
a.elementor-button.elementor-button-link:focus-visible,
.wp-block-button .wp-block-button__link:focus-visible,
.wp-block-file__button:focus-visible,
a.wp-block-file__button:focus-visible {
    background: #24566d !important;
    border-color: #24566d !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(47, 111, 140, 0.25), 0 0 0 3px rgba(183, 165, 122, 0.5);
}
.elementor-element-c3b8f82 .box-button:focus-visible { background: #a08e62 !important; transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15), 0 0 0 3px rgba(255, 255, 255, 0.5); }
.elementor-element-3ce6e9b .box-button:focus-visible { background: #fff !important; color: #2F6F8C !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4); }
.elementor-element-077b22e .box-button:focus-visible { background: #a08e62 !important; border-color: #a08e62 !important; transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(255, 255, 255, 0.5); }
.dt-nav-menu-horizontal > li > a:focus-visible .menu-text::after { transform: scaleX(1); transform-origin: left center; }
.dt-nav-menu-horizontal > li > a:focus-visible { outline: 2px solid #b7a57a; outline-offset: 2px; }
body .elementor-2900 .the7-e-sub-nav.horizontal-sub-nav .menu-item > a:focus-visible { background-color: rgba(47, 111, 140, 0.08) !important; padding-left: 28px !important; color: #2F6F8C !important; outline: 2px solid #2F6F8C; outline-offset: -2px; }
body .elementor-2900 .the7-e-sub-nav.horizontal-sub-nav .menu-item > a:focus-visible::before { transform: translateY(-50%) scaleY(1); }
.cfar-affiliates-list a:focus-visible { background: rgba(183, 165, 122, 0.25); border-color: #b7a57a; transform: translateY(-1px); outline: 2px solid #b7a57a; outline-offset: 2px; }
footer#footer .elementor-element-d0aa3f1 .box-button:focus-visible,
footer#footer .elementor-element-5eb07fa .box-button:focus-visible,
footer#footer .elementor-element-c4081f6 .box-button:focus-visible { color: #ffffff !important; outline: 2px solid #b7a57a; outline-offset: 4px; }
footer#footer .elementor-element-d0aa3f1 .box-button:focus-visible::after,
footer#footer .elementor-element-5eb07fa .box-button:focus-visible::after,
footer#footer .elementor-element-c4081f6 .box-button:focus-visible::after { transform: scaleX(1); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible { outline: 2px solid #2F6F8C; outline-offset: 2px; }


/* ============================================================
   24. GENERAL MOBILE RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
    .cfar-people-widget .cfar-directory.columns-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 768px) {
    p:not(.breadcrumbs p):not(.rcrumbs p):not(.core-breadcrumbs p):not(.grant-breadcrumbs p):not(.grant-archive-breadcrumbs p):not(.cfar-footer__address),
    li:not(.breadcrumbs li):not(.rcrumbs li):not(.core-breadcrumbs li):not(.grant-breadcrumbs li):not(.grant-archive-breadcrumbs li),
    td,
    .content,
    .elementor-widget-text-editor,
    .core-about-section,
    .core-drawer-content {
        font-size: 15px !important;
        line-height: 1.7em !important;
    }
    .sidebar-grants,
    .grant-content {
        flex: 0 0 100% !important; width: 100% !important;
        max-width: 100% !important; padding-right: 0 !important;
        box-sizing: border-box;
    }
    .cfar-people-widget .cfar-directory,
    .cfar-people-widget .cfar-directory.columns-1,
    .cfar-people-widget .cfar-directory.columns-2,
    .cfar-people-widget .cfar-directory.columns-3 { grid-template-columns: 1fr !important; }
    .cfar-person { flex-direction: column; gap: 16px; padding: 20px !important; }
    .cfar-person-left { flex-direction: row; gap: 16px; }
    .cfar-person-photo { flex: 0 0 100px; width: 100px; height: 130px; }
    .cfar-person img,
    .cfar-person-photo img { width: 100px !important; height: 130px !important; max-width: 100px !important; max-height: 130px !important; }
    .cfar-person-right { margin-left: 0; margin-top: 8px; white-space: normal; align-self: flex-start; }
    .cfar-affiliates-list { flex-direction: column; flex-wrap: nowrap; gap: 6px; }
    .cfar-affiliates-list li { width: 100%; }
    .cfar-affiliates-list a { display: block; word-break: break-word; overflow-wrap: anywhere; }
}


/* ============================================================
   25. UNIFIED HYPERLINK STYLES — WordPress + Elementor
   ============================================================ */

.elementor-widget-text-editor a,
.elementor-widget-text-editor a:visited,
.wp-block-paragraph a,
.wp-block-paragraph a:visited,
.wp-block-list a,
.wp-block-list a:visited,
.wp-block-heading a,
.wp-block-heading a:visited,
.content a,
.content a:visited,
.e-n-accordion [role="region"] a,
.e-n-accordion [role="region"] a:visited,
.elementor-tab-content a,
.elementor-tab-content a:visited,
.wp-block-accordion-panel a,
.wp-block-accordion-panel a:visited,
.elementor-19875 a,
.elementor-20598 a {
    color: #2F6F8C !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    text-decoration-thickness: 1px !important;
    transition: color 0.2s ease, text-decoration-color 0.2s ease !important;
}
.elementor-widget-text-editor a:hover,
.wp-block-paragraph a:hover,
.wp-block-list a:hover,
.wp-block-heading a:hover,
.content a:hover,
.e-n-accordion [role="region"] a:hover,
.elementor-tab-content a:hover,
.wp-block-accordion-panel a:hover {
    color: #24566d !important;
    text-decoration-color: #24566d !important;
}
.elementor-button,
.box-button,
.wp-block-button__link,
.wp-block-file__button,
.dt-nav-menu-horizontal a,
.the7-e-sub-nav a,
.dt-nav-menu a,
.cfar-affiliates-list a,
footer#footer a,
.breadcrumbs a,
.rcrumbs a { text-decoration: none !important; }

.cfar-person-name a,
.cfar-person-name a:visited,
.elementor-19875 .cfar-person-name a,
.elementor-19875 .cfar-person-name a:visited,
.elementor-20598 .cfar-person-name a,
.elementor-20598 .cfar-person-name a:visited { color: #111 !important; text-decoration: none !important; }
.cfar-person-name a:hover,
.elementor-19875 .cfar-person-name a:hover,
.elementor-20598 .cfar-person-name a:hover { color: #2F6F8C !important; text-decoration: none !important; }
.core-breadcrumbs a,
.core-breadcrumbs a:visited { color: #2F6F8C !important; font-weight: 600 !important; text-decoration: none !important; }
.core-breadcrumbs a:hover { color: #24566d !important; font-weight: 600 !important; text-decoration: none !important; }

/* CFAR standalone-page breadcrumb (cfar_breadcrumbs()) — teal, semibold per design tokens */
.breadcrumbs a,
.breadcrumbs a:visited,
.rcrumbs a,
.rcrumbs a:visited { color: #2F6F8C !important; font-weight: 600 !important; text-decoration: none !important; }
.breadcrumbs a:hover,
.rcrumbs a:hover { color: #24566d !important; font-weight: 600 !important; text-decoration: none !important; }

/* Base list layout for the .breadcrumbs.rcrumbs widget markup - this used to
   come from The7's own core CSS (not this file), which is no longer loaded
   now that The7 isn't the active theme. Without it the <ol> falls back to a
   plain numbered list. Separator style matches this site's existing
   .core-breadcrumbs/.grant-breadcrumbs convention used elsewhere. */
ol.breadcrumbs.rcrumbs {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-family: 'Inter', 'Roboto', sans-serif;
}
.breadcrumbs.rcrumbs li {
    margin: 0;
    padding: 0;
}
.breadcrumbs.rcrumbs li + li::before {
    content: "/";
    margin: 0 8px;
    color: #999;
}
.breadcrumbs.rcrumbs li.current {
    color: #333;
}

ol { margin-left: 2em; padding-left: 2em; list-style-position: outside; }
ul { margin-left: 2em; padding-left: 2em; list-style-position: outside; }
ul.grant-archive-grid { margin-left: 0; padding-left: 0; }


/* ============================================================
   26. SITEWIDE HEADING + ELEMENTOR DIVIDER NORMALIZATION
   Ensures h2/h3 scale matches core pages across all templates.
   Elementor heading and divider widgets brought in line.
   ============================================================ */

/* --- h2 / h3 size lock ------------------------------------ */
h2,
h2.wp-block-heading {
    font-size: 1.5rem !important;
    letter-spacing: -0.01em !important;
    line-height: 1.3 !important;
}
h3,
h3.wp-block-heading {
    font-size: 1.2rem !important;
    letter-spacing: -0.01em !important;
    line-height: 1.3 !important;
}

/* --- WP block heading spacing ----------------------------- */
.wp-block-heading {
    margin-bottom: 0 !important;
}


/* --- Elementor heading widget ----------------------------- */
.elementor-widget-heading .elementor-heading-title {
    font-family: 'Inter', 'Roboto', sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #111 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
}

/* --- Elementor divider widget ----------------------------- */
.elementor-widget-divider {
    padding: 0 !important;
    margin: 8px 0 16px 0 !important;
}
.elementor-widget-divider .elementor-divider-separator {
    border-top: 2px solid #2F6F8C !important;
    background-color: transparent !important;
    height: 0 !important;
}

/* --- Banner template h1 (elementor-11263) size fix -------- */
.elementor-11263 .elementor-heading-title {
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 1.3em !important;
    letter-spacing: normal !important;
}

/* --- Core hero h1 white color override -------------------- */
.core-hero h1 {
    color: #ffffff !important;
}

/* --- Banner heading white color override ------------------ */
.banner-h2 .elementor-heading-title,
.banner-h2 h1,
.banner-h2 h2,
.banner-h2 h3 {
    font-size: 2.4rem !important;
    color: #ffffff !important;
}


.cfar_layout-single-banner .elementor-20625 .e-con {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.elementor-20625 .elementor-element-e0d2254 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: auto !important;
}
.elementor-20625 .elementor-element-52ac7c6 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* Leadership page - remove boxed container on page content layer */
.elementor-19319 .elementor-element-f8d403a.e-con-boxed {
    --content-width: 100% !important;
}
.elementor-19319 .elementor-element-f8d403a > .e-con-inner {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.cfar_layout-single .elementor-element-203c048 {
    --container-default-padding-left: 0px !important;
    --container-default-padding-right: 0px !important;
    --padding-left: 0px !important;
    --padding-right: 0px !important;
}
.cfar_layout-single .elementor-element-203c048 > .e-con-inner {
    --container-default-padding-left: 0px !important;
    --container-default-padding-right: 0px !important;
    --padding-left: 0px !important;
    --padding-right: 0px !important;
    max-width: 1300px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
/* Title bar template - fix alignment on no-banner pages */
.cfar_layout-single .elementor-11263 .elementor-element-52ac7c6,
.cfar_layout-single-banner .elementor-11263 .elementor-element-52ac7c6 {
    --container-default-padding-left: 0px !important;
    --container-default-padding-right: 0px !important;
    --padding-left: 165px !important;
    --padding-right: 165px !important;
}

@media (max-width: 1100px) {
    .cfar_layout-single .elementor-11263 .elementor-element-52ac7c6,
    .cfar_layout-single-banner .elementor-11263 .elementor-element-52ac7c6 {
        --padding-left: 80px !important;
        --padding-right: 80px !important;
    }
}

@media (max-width: 768px) {
    .cfar_layout-single .elementor-11263 .elementor-element-52ac7c6,
    .cfar_layout-single-banner .elementor-11263 .elementor-element-52ac7c6 {
        --padding-left: 20px !important;
        --padding-right: 20px !important;
    }
}
.cfar_layout-single-banner-overlay .elementor-20625 .elementor-element-52ac7c6 > .e-con-inner {
    padding-left: 165px !important;
    padding-right: 165px !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

@media (max-width: 1100px) {
    .cfar_layout-single-banner-overlay .elementor-20625 .elementor-element-52ac7c6 > .e-con-inner {
        padding-left: 80px !important;
        padding-right: 80px !important;
    }
}

@media (max-width: 768px) {
    .cfar_layout-single-banner-overlay .elementor-20625 .elementor-element-52ac7c6 > .e-con-inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}
.wp-block-separator.gold,
.wp-block-separator.has-alpha-channel-opacity.gold {
    border-top-color: #B7A57A !important;
    border-top: 2px solid #B7A57A !important;
}
.wp-block-button .wp-block-button__link.gold-btn,
.wp-block-button .wp-element-button.gold-btn {
    background: #B7A57A !important;
    background-color: #B7A57A !important;
    color: #111 !important;
    border: 2px solid #B7A57A !important;
    font-family: 'Inter', 'Roboto', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 12px 24px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.2s ease !important;
}

.wp-block-button .wp-block-button__link.gold-btn:hover,
.wp-block-button .wp-element-button.gold-btn:hover {
    background: #9C8C68 !important;
    background-color: #9C8C68 !important;
    border-color: #9C8C68 !important;
    color: #111 !important;
}
.wp-block-button .wp-block-button__link.gold-btn {
    background: #B7A57A !important;
    background-color: #B7A57A !important;
    color: #111 !important;
    border: 2px solid #B7A57A !important;
}

.wp-block-button .wp-block-button__link.gold-btn:hover {
    background: #9C8C68 !important;
    background-color: #9C8C68 !important;
    border-color: #9C8C68 !important;
    color: #111 !important;
}


/* ============================================================
   27. CFAR STANDALONE SHELL (header / nav / footer / page layouts)
   New markup introduced by the standalone `cfar` theme (Phases 2-5)
   has no Elementor/The7 equivalent to splice onto, since it replaces
   Elementor's own container/flex system entirely. Every value below
   is copied from the live site's actual computed styles (confirmed
   against The7's own generated --the7-header and --the7-footer CSS vars
   and this file's own footer#footer.solid-bg override), not invented.
   ============================================================ */

/* --- Header shell ------------------------------------------- */
.cfar-header {
    position: sticky;
    top: 0;
    z-index: 500;
    background: #2F6F8C;
}
.cfar-header__inner {
    /* No max-width/margin:auto, and the same 165px desktop side padding
       as .cfar-page__inner/.cfar-page-header-row - so the logo's left
       edge lines up exactly with the page title / breadcrumb text
       (present or, on the banner-overlay layout, where it would be).
       Responsive padding below matches .cfar-page__inner's own
       165/40/20px schedule for the same reason. */
    width: 100%;
    box-sizing: border-box;
    height: 90px;
    padding: 0 165px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.cfar-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.cfar-logo__img,
.cfar-logo .custom-logo {
    width: 210px;
    height: auto;
    object-fit: contain;
}
.cfar-logo .custom-logo-link {
    display: inline-flex;
    align-items: center;
}

/* --- Desktop nav ---------------------------------------------- */
.cfar-nav {
    display: none;
}
.cfar-menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.cfar-menu li {
    position: relative;
}

/* Dropdown panels (any nesting depth — wp_nav_menu emits .sub-menu
   at every level). Values match the existing .the7-e-sub-nav dropdown
   box in section 5 above (white bg, gold top border, same shadow/padding). */
.cfar-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background-color: #ffffff;
    border-top: 2px solid #b7a57a;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    z-index: 10;
}
.cfar-menu .sub-menu .sub-menu {
    top: 0;
    left: 100%;
}
/* Last top-level item sits at the right edge of the nav - open its
   dropdown (and any deeper nested submenus under it) toward the left
   instead, so it doesn't hang off the edge of the page. */
.cfar-menu > li:last-child > .sub-menu {
    left: auto;
    right: 0;
}
.cfar-menu > li:last-child .sub-menu .sub-menu {
    left: auto;
    right: 100%;
}
.cfar-menu li:hover > .sub-menu,
.cfar-menu li:focus-within > .sub-menu {
    display: block;
}
.cfar-menu .sub-menu a {
    display: block;
    font-family: 'Inter', 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.02em;
    color: #111111;
    text-decoration: none;
    padding: 11px 20px;
    position: relative;
    transition: padding-left 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.cfar-menu .sub-menu a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 70%;
    background: #b7a57a;
    transition: transform 0.25s ease;
}
.cfar-menu .sub-menu a:hover {
    background-color: rgba(47, 111, 140, 0.08);
    padding-left: 28px;
    color: #2F6F8C;
}
.cfar-menu .sub-menu a:hover::before {
    transform: translateY(-50%) scaleY(1);
}

/* --- Mobile menu toggle + slide-in panel (<=1100px) ----------- */
.cfar-menu-toggle {
    display: none;
    background: none;
    border: 0;
    padding: 10px;
    cursor: pointer;
    flex-shrink: 0;
}
.cfar-menu-toggle__bars,
.cfar-menu-toggle__bars::before,
.cfar-menu-toggle__bars::after {
    display: block;
    width: 24px;
    height: 2px;
    background: #ffffff;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.cfar-menu-toggle__bars {
    position: relative;
}
.cfar-menu-toggle__bars::before,
.cfar-menu-toggle__bars::after {
    content: "";
    position: absolute;
    left: 0;
}
.cfar-menu-toggle__bars::before { top: -8px; }
.cfar-menu-toggle__bars::after { top: 8px; }
.cfar-menu-toggle[aria-expanded="true"] .cfar-menu-toggle__bars {
    background: transparent;
}
.cfar-menu-toggle[aria-expanded="true"] .cfar-menu-toggle__bars::before {
    transform: translateY(8px) rotate(45deg);
}
.cfar-menu-toggle[aria-expanded="true"] .cfar-menu-toggle__bars::after {
    transform: translateY(-8px) rotate(-45deg);
}

.cfar-mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 15, 26, 0.5);
    z-index: 998;
}
.cfar-mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    background: #ffffff;
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    z-index: 999;
    padding-bottom: 40px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}
.cfar-mobile-nav.is-open {
    transform: translateX(0);
}
.cfar-mobile-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 90px;
    padding: 0 24px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background: #ffffff;
}
.cfar-mobile-nav__label {
    font-family: 'Inter', 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #111;
}
.cfar-mobile-nav__close {
    background: none;
    border: 0;
    padding: 8px;
    margin: -8px;
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
    color: #111;
    transition: color 0.2s ease;
}
.cfar-mobile-nav__close:hover {
    color: #2F6F8C;
}
body.cfar-nav-open {
    overflow: hidden;
}
.cfar-mobile-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cfar-mobile-menu a {
    display: block;
    font-family: 'Inter', 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #111;
    text-decoration: none;
    padding: 14px 24px;
    border-bottom: 1px solid #eee;
}
.cfar-mobile-menu a:hover {
    color: #2F6F8C;
}
.cfar-mobile-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #f7f7f7;
}
.cfar-mobile-menu .sub-menu a {
    padding-left: 40px;
    text-transform: none;
    letter-spacing: 0.01em;
    font-weight: 400;
}
.cfar-mobile-menu .sub-menu .sub-menu a {
    padding-left: 56px;
}

@media (max-width: 1100px) {
    .cfar-nav { display: none; }
    .cfar-menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .cfar-header__inner { position: relative; justify-content: flex-end; padding: 0 40px; }
    .cfar-logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}
@media (max-width: 600px) {
    .cfar-header__inner { padding: 0 20px; }
}
@media (min-width: 1101px) {
    .cfar-nav { display: block; }
    .cfar-mobile-nav,
    .cfar-mobile-nav-backdrop { display: none; }
}

/* --- Footer layout --------------------------------------------- */
.cfar-footer__inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 4rem 40px 2rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 3rem;
}
.cfar-footer__col--right {
    text-align: right;
}
.cfar-footer__links {
    display: flex;
    align-items: center;
    margin: 1.5rem 0 0 0;
    padding: 0;
    list-style: none;
    justify-content: flex-end;
}
.cfar-footer__links li {
    margin: 0;
    padding: 0;
    position: relative;
}
/* Single spacing source (margin-left only - no flex `gap` stacked on top
   of it) so the space before and after the dot is provably identical: the
   dot sits at the exact midpoint of that margin via left:-1rem +
   translate(-50%,-50%), not just eyeballed close to centered. */
.cfar-footer__links li + li {
    margin-left: 2rem;
}
.cfar-footer__links li + li::before {
    content: "";
    position: absolute;
    left: -1rem; top: 50%; transform: translate(-50%, -50%);
    width: 3px; height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
}
@media (max-width: 1100px) {
    .cfar-footer__inner { padding: 4rem 40px 2rem; flex-direction: column; gap: 2rem; align-items: center; }
    .cfar-footer__col {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .cfar-footer__col--right { text-align: center; }
    .cfar-footer__logo--cfar { margin-left: auto !important; margin-right: auto !important; }
    .cfar-footer__links { justify-content: center; flex-wrap: wrap; row-gap: 0.75rem; }
}
@media (max-width: 600px) {
    .cfar-footer__inner { padding: 4rem 20px 2rem; }
}

/* --- Page shell (page.php layouts + 404) ------------------------ */
.cfar-site-content {
    display: block;
}
/* No max-width/margin:auto - matches the core/grant templates' own
   .inner convention exactly (e.g. .core-header-bar .inner,
   .grant-archive-title-bar .inner): width:100% with fixed side padding
   only, so content keeps the same side gutter and grows with the
   viewport on wide monitors instead of getting boxed into a fixed-width
   column centered in the middle of the screen. */
.cfar-page__inner {
    width: 100%;
    box-sizing: border-box;
    padding: 48px 165px;
}
.cfar-page-title {
    margin-bottom: 0.5rem;
}
.cfar-page__content {
    margin-top: 1.5rem;
}
/* Title left / breadcrumb right on the same row - matches the existing
   .core-header-bar .inner convention in single-core.php. */
/* Full-width grey bar wrapping the title+breadcrumb row - matches
   .core-header-bar in single-core.php exactly (background #f0f0f0, same
   165px/40px/20px responsive padding as .cfar-page__inner). */
.cfar-page-header-bar {
    background: #f0f0f0;
    width: 100%;
    box-sizing: border-box;
}
.cfar-page-header-bar .cfar-page__inner {
    padding-top: 28px;
    padding-bottom: 28px;
}
.cfar-page-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
}
.cfar-page-header-row .cfar-page-title {
    margin-bottom: 0;
    /* Matches .grant-header-bar h1 / .core-header-bar h1 exactly (28px). */
    font-size: 28px;
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1.3em;
    color: #111111;
}
@media (max-width: 1100px) {
    .cfar-page__inner { padding: 48px 40px; }
}
@media (max-width: 600px) {
    .cfar-page__inner { padding: 32px 20px; }
}

/* --- Breadcrumb bar (banner / banner-overlay layouts) ----------- */
/* Matches .core-hero-breadcrumb-bar in single-core.php exactly (verified via
   devtools-inspected computed styles against a live example). */
.cfar-breadcrumb-bar {
    background: #F3F4F6;
    min-height: 100px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
.cfar-breadcrumb-bar .cfar-page__inner {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

/* --- Banners ----------------------------------------------------- */
.cfar-banner-strip {
    width: 100%;
    height: 320px;
    background-size: cover;
    background-position: center;
}
.cfar-banner--overlay {
    position: relative;
    width: 100%;
    min-height: 360px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cfar-banner__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}
.cfar-banner__title {
    position: relative;
    z-index: 1;
    color: #ffffff !important;
    text-align: center;
    padding: 0 40px;
}
@media (max-width: 600px) {
    .cfar-banner-strip { height: 200px; }
    .cfar-banner--overlay { min-height: 240px; }
}


/* ============================================================
   28. CFAR FEATURE CARD BLOCK (cfar/feature-card)
   ------------------------------------------------------------
   Horizontal image+text+button layout composed on top of the
   existing ".card" component (section 8) so it inherits the same
   radius/shadow/hover/gold-accent language already used sitewide,
   rather than inventing a new visual style.
   ============================================================ */
.cfar-feature-card {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1.75rem;
    box-sizing: border-box;
    /* Stretches to match a sibling's height - e.g. two feature-cards
       side by side in a WP Columns block, which is display:flex with
       default align-items:stretch, so both columns are already forced
       to the same height and this just lets the card fill that. */
    height: 100%;
}
.cfar-feature-card--valign-top { align-items: flex-start; }
.cfar-feature-card--valign-center { align-items: center; }
.cfar-feature-card--valign-bottom { align-items: flex-end; }
.cfar-feature-card--width-boxed { max-width: 600px; margin-left: auto; margin-right: auto; }
.cfar-feature-card__media {
    flex: 0 0 220px;
    max-width: 220px;
}
.cfar-feature-card__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
}
.cfar-feature-card__replace-btn { margin-top: 0.5rem; }
.cfar-feature-card__body {
    flex: 1 1 auto;
    min-width: 0;
}
.cfar-feature-card__icon { display: inline-flex; }
.cfar-feature-card__text {
    margin: 0 0 1rem;
}
.cfar-feature-card__text:last-child { margin-bottom: 0; }

/* Photo-only layout ("just a photo" card): no text column, so the image
   itself is the card's content and stretches to fill the card's full
   height instead of being capped at the 220px media-column width used
   when there's text alongside it. */
.cfar-feature-card--layout-photo {
    padding: 0;
    align-items: stretch;
}
/* No heading/button -> no .cfar-feature-card__body is rendered at all
   (see render.php) - center the lone image instead of leaving it flush
   against whichever side flex-start defaults to. */
.cfar-feature-card--layout-photo:not(:has(.cfar-feature-card__body)) {
    justify-content: center;
}
.cfar-feature-card--layout-photo .cfar-feature-card__media--photo {
    flex: 1 1 auto;
    max-width: 100%;
    align-self: stretch;
}
.cfar-feature-card--layout-photo .cfar-feature-card__media--photo .cfar-feature-card__img {
    width: 100%;
    height: 100%;
    min-height: 220px;
}
.cfar-feature-card--layout-photo .cfar-feature-card__body {
    padding: 1.25rem 1.75rem;
    flex: 0 0 auto;
}

@media (max-width: 782px) {
    .cfar-feature-card {
        flex-direction: column;
        align-items: stretch !important;
        height: auto;
    }
    .cfar-feature-card__media {
        max-width: 100%;
        flex-basis: auto;
    }
    .cfar-feature-card--layout-photo .cfar-feature-card__media--photo .cfar-feature-card__img {
        height: auto;
        min-height: 0;
    }
}


/* ============================================================
   29. FRONT PAGE (front-page.php)
   ------------------------------------------------------------
   Standalone rebuild of the live Elementor homepage (post 9728).
   Colors/shadows/overlay values below are copied from that page's
   own Elementor settings and from the pre-existing polish CSS in
   sections 14-16 above (written against Elementor's own auto-
   generated .elementor-element-{id} selectors for that exact
   page) - translated to stable semantic classes here, not
   redesigned. Sections 14-16 are left in place; they still apply
   to the live Elementor editor view of post 9728 until cutover.
   ============================================================ */

/* --- Buttons (hero + photo banners) ------------------------ */
.cfar-btn {
    display: inline-block;
    font-family: 'Inter', 'Roboto', sans-serif;
    text-decoration: none;
    text-align: center;
    border-radius: 4px;
    transition: all 0.25s ease;
}
.cfar-btn--gold {
    background: #b7a57a;
    color: #111;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 16px 36px;
    border: none;
}
.cfar-btn--gold:hover {
    background: #a08e62;
    color: #111;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
.cfar-btn--outline-white {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 14px 34px;
}
.cfar-btn--outline-white:hover { background: #fff; color: #2F6F8C; }
.cfar-btn--gold-outline {
    background: #b7a57a;
    color: #111;
    border: 2px solid #b7a57a;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 14px 36px;
}
.cfar-btn--gold-outline:hover {
    background: #a08e62;
    border-color: #a08e62;
    color: #111;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* --- Hero slider --------------------------------------------- */
.cfar-hero {
    position: relative;
    min-height: 620px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cfar-hero__slides {
    position: absolute;
    inset: 0;
}
.cfar-hero__slide {
    position: absolute;
    inset: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    transition: opacity 1s ease;
}
.cfar-hero__slide.is-active { opacity: 1; }
.cfar-hero__slide-overlay { position: absolute; inset: 0; }
.cfar-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 30px;
    width: 600px;
    max-width: 100%;
    padding: 80px 0;
    animation: cfar-hero-fade-up 0.6s ease both;
}
@keyframes cfar-hero-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Real text instead of the old madbig.png image - two-layer shadow (a
   tight dark edge + a soft wider falloff) rather than the single soft
   shadow used on the plain photo banners, since this sits directly on an
   uncontrolled, rotating photo (not one already dimmed specifically for
   text) and needs to stay legible regardless of which of the 3 photos is
   showing or how bright/busy that particular photo is. */
.cfar-hero__tagline {
    margin: 0;
    text-align: center;
}
.cfar-hero__tagline-main {
    display: block;
    font-family: 'Inter', 'Roboto', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: #fff;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.15;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), 0 6px 24px rgba(0, 0, 0, 0.4);
}
.cfar-hero__tagline-sub {
    display: block;
    font-family: 'Inter', 'Roboto', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    font-size: clamp(0.85rem, 1.8vw, 1.05rem);
    margin-top: 10px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), 0 6px 24px rgba(0, 0, 0, 0.4);
}
.cfar-hero__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}
.cfar-hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.25s ease, background 0.25s ease;
}
.cfar-hero:hover .cfar-hero__arrow,
.cfar-hero__arrow:focus-visible { opacity: 1; }
.cfar-hero__arrow:hover { background: rgba(0, 0, 0, 0.55); }
.cfar-hero__arrow--prev { left: 24px; }
.cfar-hero__arrow--next { right: 24px; }
@media (max-width: 1100px) {
    .cfar-hero { padding: 0 40px; }
    .cfar-hero__content { padding: 0px; }
}
@media (max-width: 900px) {
    .cfar-hero { min-height: 60vh; }
}
@media (max-width: 600px) {
    .cfar-hero { min-height: 45vh; padding: 0 20px; }
    .cfar-hero__buttons { gap: 12px; }
}

/* --- Intro text + 3-photo layout ----------------------------- */
.cfar-section { padding: 4rem 0; }
.cfar-section--tint { background: #f8f8f6; }
.cfar-intro {
    display: flex;
    align-items: center;
    gap: 80px;
}
.cfar-intro__text {
    flex: 1 1 0;
    min-width: 0;
    color: #555;
    font-size: 1.2rem;
    line-height: 1.7;
}
.cfar-intro__text p:last-child { margin-bottom: 0; }

/* Staggered photo trio - values (widths, aspect ratios, shadow, radius,
   left/right offsets) copied from the live Elementor "images" container
   (front page post 9728, element ids 77bce31 / d38f16f / dcbb388 / 2f83744
   / f525181) rather than redesigned. */
.cfar-intro__photos {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}
.cfar-intro__photo-col--big {
    /* 1/5 smaller again on top of the previous 42.4% (42.4 * 0.8 =
       33.92%), keeping the same centered composition within
       .cfar-intro__photos - just a smaller version of it, not a
       different layout. Original was 53%. */
    width: 33.92%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.cfar-intro__photo-col--stack {
    /* Still 75% of the big column's width (so photo 2 stays sized
       relative to photo 1 the same way), also scaled down another 1/5:
       31.8% * 0.8 = 25.44%. Original was 39.75%. */
    width: 25.44%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
}
.cfar-intro__photo {
    display: block;
    border-radius: 10px;
    /* Shadow cast to the right (not just below). */
    box-shadow: 20px 12px 40px rgba(0, 0, 0, 0.5);
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.cfar-intro__photo:hover { transform: translateY(-4px) scale(1.01); }
.cfar-intro__photo--big,
.cfar-intro__photo--top {
    align-self: flex-end;
    width: 100%;
    aspect-ratio: 3 / 4;
}
.cfar-intro__photo--small {
    /* Smaller than photo 2: 75% of the (already-75%-sized) stack column. */
    align-self: flex-start;
    width: 75%;
    aspect-ratio: 1 / 1;
}
@media (max-width: 900px) {
    .cfar-intro { flex-direction: column; }
}
/* Below 600px, keep the same staggered row layout (big photo + offset
   2-photo stack) rather than re-stacking into a vertical column - just
   shrink the gaps/shadow proportionally so it stays intact at mobile
   widths instead of restructuring. */
@media (max-width: 600px) {
    .cfar-intro__photos { gap: 16px; }
    .cfar-intro__photo-col--stack { gap: 16px; }
    .cfar-intro__photo { box-shadow: 10px 6px 20px rgba(0, 0, 0, 0.45); }
}

/* --- Section heading/intro + card grids ----------------------- */
.cfar-section__intro { max-width: 760px; margin: 0 auto 3rem; text-align: center; }
.cfar-section__intro p { color: #555; }
.cfar-section__heading {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
}
.cfar-cards-grid {
    display: grid;
    gap: 2rem;
}
.cfar-cards-grid--4 { grid-template-columns: repeat(4, 1fr); }
.cfar-cards-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) {
    .cfar-cards-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .cfar-cards-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .cfar-cards-grid--4,
    .cfar-cards-grid--3 { grid-template-columns: 1fr; }
}

/* --- Photo banners (full-width bg photo + text + button) ------ */
.cfar-photo-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
}
.cfar-photo-banner__overlay { position: absolute; inset: 0; }
.cfar-photo-banner__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
.cfar-photo-banner--left .cfar-photo-banner__inner {
    align-items: flex-start;
    text-align: left;
    margin-left: 0;
    padding-left: 100px;
}
@media (max-width: 600px) {
    .cfar-photo-banner--left .cfar-photo-banner__inner { padding-left: 40px; }
}
.cfar-photo-banner__text {
    font-family: 'Inter', 'Roboto', sans-serif !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 0 0.75rem 0 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
h3.cfar-photo-banner__text {
    font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em;
    max-width: 800px;
}
h6.cfar-photo-banner__text {
    font-size: 0.8125rem !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.5 !important;
    max-width: 480px;
}
@media (max-width: 600px) {
    h6.cfar-photo-banner__text { max-width: 100%; }
}
.cfar-photo-banner__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}
/* --- Logo ticker (verbatim from the Elementor "html" widget) -- */
.cfar-logo-ticker {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 30px 0 45px;
    margin: 0;
    background: #ffffff;
}
.cfar-logo-ticker-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
}
.cfar-logo-ticker::before,
.cfar-logo-ticker::after {
    content: "";
    position: absolute;
    top: 0;
    width: 80px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}
.cfar-logo-ticker::before { left: 0; background: linear-gradient(to right, #fff, transparent); }
.cfar-logo-ticker::after { right: 0; background: linear-gradient(to left, #fff, transparent); }
.cfar-logo-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: cfar-scroll 52s linear infinite;
}
.cfar-logo-ticker:hover .cfar-logo-track,
.cfar-logo-ticker:focus-within .cfar-logo-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .cfar-logo-track { animation: none; }
}
.cfar-logo-item {
    flex: 0 0 auto;
    padding: 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cfar-logo-item.dark-bg {
    background: #182B49;
    padding: 14px 28px;
    border-radius: 10px;
}
.cfar-logo-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 4px;
}
.cfar-logo-item a:focus-visible { outline: 2px solid #2F6F8C; outline-offset: 4px; }
.cfar-logo-item img {
    max-height: 80px;
    max-width: 220px;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.85;
    filter: grayscale(60%);
    transition: transform 0.25s ease, opacity 0.25s ease, filter 0.25s ease;
}
.cfar-logo-item a:hover img,
.cfar-logo-item a:focus-visible img,
.cfar-logo-item[aria-hidden="true"]:hover img {
    transform: scale(1.06);
    opacity: 1;
    filter: grayscale(0%);
}
@keyframes cfar-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (max-width: 768px) {
    .cfar-logo-ticker { padding: 20px 0 30px; }
    .cfar-logo-ticker-inner { padding: 0 20px; }
    .cfar-logo-item { padding: 0 20px; }
    .cfar-logo-item img { max-height: 55px; max-width: 140px; }
    .cfar-logo-ticker::before,
    .cfar-logo-ticker::after { width: 30px; }
}


/* ============================================================
   30. IMAGE CAROUSEL (cfar/image-carousel)
   ------------------------------------------------------------
   Height matches .cfar-banner-strip exactly (section 27's Banners
   block, used by template-parts/layout-banner.php) - 320px desktop /
   200px mobile - so this block reads as "the same banner size" on
   whatever page it's dropped into, same as the plain non-homepage
   page banner image.
   ============================================================ */
.cfar-image-carousel {
    position: relative;
    /* Full-bleed regardless of the surrounding content column's padding
       (.cfar-page__inner etc). This theme has no add_theme_support(
       'align-wide'), so WordPress's own .alignfull breakout CSS is never
       generated - this is the classic manual equivalent, and applies
       unconditionally rather than only when "full width" is picked in
       the editor, since this block should always span edge to edge. */
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    height: 320px;
    overflow: hidden;
}
.cfar-image-carousel__slides {
    position: absolute;
    inset: 0;
}
.cfar-image-carousel__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease;
}
.cfar-image-carousel__slide.is-active { opacity: 1; }
.cfar-image-carousel__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.cfar-image-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.25s ease, background 0.25s ease;
}
.cfar-image-carousel:hover .cfar-image-carousel__arrow,
.cfar-image-carousel__arrow:focus-visible { opacity: 1; }
.cfar-image-carousel__arrow:hover { background: rgba(0, 0, 0, 0.55); }
.cfar-image-carousel__arrow--prev { left: 24px; }
.cfar-image-carousel__arrow--next { right: 24px; }

/* Sits flush under the page header bar, matching .cfar-banner-strip's own
   zero-gap placement, when it's the first thing in the page content -
   .cfar-page__content (layout-single/-banner/-banner-overlay's content
   wrapper) otherwise adds margin-top: 1.5rem ahead of it. */
.cfar-page__content:has(> .cfar-image-carousel:first-child) {
    margin-top: 0;
}
/* The real source of the remaining gap: the carousel still sits inside
   .cfar-page__inner's own padding-top (48px desktop/tablet, 32px at
   <=600px) - unlike .cfar-banner-strip, which is a sibling placed
   entirely outside that padded wrapper. Pull it up by that exact
   padding to sit flush under the header bar the same way. */
.cfar-image-carousel:first-child {
    margin-top: -48px;
}

/* Touch devices never trigger :hover, so the arrows would otherwise be
   permanently invisible (and unreachable) on mobile - show them always
   on any device that doesn't support hover, instead of only on hover. */
@media (hover: none) {
    .cfar-image-carousel__arrow { opacity: 1; }
}
@media (max-width: 600px) {
    .cfar-image-carousel { height: 200px; }
    .cfar-image-carousel:first-child { margin-top: -32px; }
    .cfar-image-carousel__arrow { width: 36px; height: 36px; font-size: 1.4rem; }
    .cfar-image-carousel__arrow--prev { left: 12px; }
    .cfar-image-carousel__arrow--next { right: 12px; }
}