/* =========================================================
   0.  CUSTOM FONTS
   ========================================================= */
   @font-face {
    font-family: 'Proxima Nova';
    src:
        url('../fonts/ProximaNova/proximanova_light.woff2') format('woff2'),
        url('../fonts/ProximaNova/proximanova_light.woff')  format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova';
    src:
        url('../fonts/ProximaNova/proximanova_regular.woff2') format('woff2'),
        url('../fonts/ProximaNova/proximanova_regular.woff')  format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova';
    src:
        url('../fonts/ProximaNova/proximanova_bold.woff2') format('woff2'),
        url('../fonts/ProximaNova/proximanova_bold.woff')  format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova';
    src:
        url('../fonts/ProximaNova/proximanova_boldit.woff2') format('woff2'),
        url('../fonts/ProximaNova/proximanova_boldit.woff')  format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

/* =========================================================
   1.  GLOBAL RESET & TOKENS
   ========================================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Typography */
    --font-body: 'Proxima Nova', system-ui, sans-serif;
    --font-weight-regular: 400;
    --font-weight-bold: 700;

    /* Colours */
    --clr-primary: #00706e;
    --clr-primary-light: #16897E;
    --clr-secondary: #081E36;
    --clr-secondary-light: #153252;
    --clr-black: #11210D;
    --clr-gray-100: #f9f9f9;
    --clr-gray-200: #ececec;
    --clr-gray-400: #999999;
    --clr-gray-800: #11210db2;

    /* Spacing scale */
    --space-2xs: 0.25rem;
    --space-xs:  0.5rem;
    --space-sm:  0.75rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2rem;
    --space-2xl: 3rem;

    /* Breakpoints */
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
    color: var(--clr-gray-800);
    background: #ffffff;
}

main {
    max-width: 1240px;
    padding: var(--space-md);
    margin: auto;
    overflow: clip;
}
/* ──────────────────────────────────────────────────────────
   Base list styles
   (works for <ul> and <ol> generated by Gutenberg)
   ────────────────────────────────────────────────────────── */
ul,
ol {
	margin: 0 0 1rem 1.25rem;   /* initial indent + bottom space */
	padding: 0;                 /* remove default UA padding */
	list-style-position: outside;
}

/* Extra indent for every nested level */
ul ul,
ol ul,
ul ol,
ol ol {
	margin-left: 1.25rem;       /* add another step of indent */
	margin-top: 0.5rem;         /* small gap before the child list */
}

p {
  margin-block-end: var(--space-md);
}

a {
  color: var(--clr-primary-light);
}

.wp-block-buttons {
  margin: 15px 0px 50px;
}

.wp-block-accordion {
  border-top: 1px solid rgba(26, 26, 26, .15);
}

.wp-block-separator  {
  border-style: none;
  border-width: 0;
  margin: 32px 0;
  color: rgba(26, 26, 26, .15);
  background-color: rgba(26, 26, 26, .15);
  border: none;
  height: 1px;
}

.wp-block-accordion-item {
  border-bottom: 1px solid rgba(26, 26, 26, .15);
}

.wp-block-accordion-item h3 {
  margin: 10px 0px;
}

/* ──────────────────────────────────────────────────────────
   Space after any list item that contains a nested list
   Modern browsers (Chrome 105+, Safari 15.4+, Edge 105+) support :has()
   ────────────────────────────────────────────────────────── */
li:has(> ul),
li:has(> ol) {
	margin-bottom: 0.75rem;     /* breathing room after parent bullet */
}

/* Fallback for older browsers without :has() support
   (adds spacing to ALL list items, then removes it for last items)
   Remove this block if you’re fine targeting only modern browsers. */
@supports not selector(li:has(> ul)) {
	li {
		margin-bottom: 0.75rem;
	}
	li:last-child {
		margin-bottom: 0;        /* avoid excess space at list end */
	}
}

/* =========================================================
   1a.  HEADINGS TYPOGRAPHY
   ========================================================= */

/* Base heading reset */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-body);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    margin-block-end: var(--space-md);
    color:  var(--clr-black);
}

/* Fluid modular scale
   (sizes grow modestly on larger screens) */
h1 { font-size: clamp(1.75rem, 3vw + 0.75rem, 2.5rem); }
h2 { font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem); }
h3 { font-size: clamp(1.25rem, 1vw + 0.25rem, 1.5rem); }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.75rem; font-weight: var(--font-weight-regular); }

/* Optional: extra spacing above major headings for clarity */
h1:not(:first-child),
h2:not(:first-child) {
    margin-block-start: var(--space-xl);
}

/* Helpers */
.container      { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--space-md); }
@media (max-width: 768px) { .container { padding-inline: 0; } }
.text-center    { text-align: center; }
.visually-hidden{ position: absolute; width: 1px; height: 1px; overflow: hidden; }

/* Fix for migrated content */
.container img { width: 100%; height: auto; }
.container div.wp-caption.alignnone { width: 100% !important; }

/* ---------------------------------------------------------
   PAGE LAYOUT  (mobile-first, then row ≥ 1024 px)
   --------------------------------------------------------- */

/* 1. mobile / narrow: stack, sidebar first  */
.page-two-col {                           /* flex wrapper */
    display:flex;
    flex-direction:column;                /* vertical */
    gap:var(--space-2xl);
}

.page-sidebar {                           /* sidebar above */
    order:1;
    margin-block-end:var(--space-2xl);
}
.page-main    { order:2; }                /* content below */

/* .page-main is a <main>, so it picks up the global main{padding} — drop it on
   mobile so the column runs the full width of its wrapper. */
@media (max-width: 768px) { .page-main { padding: 0; } }

/* 1a. below the two-column breakpoint the section nav would stack on top of the
   content and swallow the fold, so hide it — and collapse the sidebar entirely
   when the nav was the only thing in it. */
@media (max-width: 1023px) {
    .section-nav { display:none; }
    .page-sidebar:not(:has(> *:not(.section-nav))) { display:none; }
}

/* 2. desktop ≥ 1024 px: two columns, sidebar right */
@media (min-width: 1024px) {

    .page-two-col { flex-direction:row; align-items:flex-start; }

    .page-main    { order:1; flex:1 1 0; }       /* fills remaining width */

    .page-sidebar { order:2; flex:0 0 260px;     /* fixed width on right */
                    margin-block-end:0;          /* reset mobile gap  */
                    padding-left:var(--space-lg); }
}

/* simple vertical list styling */
/* two-column wrapper already present … */
.section-nav__title {
  color: #11210db5;
  margin-bottom: var(--space-xs);
  padding-bottom: var(--space-sm);
  font-weight: 800;
  font-size: 16px;
  background-image: linear-gradient(to right, var(--clr-black) 40%, rgba(255, 255, 255, 0) 20%);
  background-position: bottom;
  background-size: 4px 1px;
  background-repeat: repeat-x;
}

.section-nav__list {
	list-style: none;
	margin: 15px 0px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
  text-transform: uppercase;
}

.section-nav__link {
	text-decoration: none;
	color: var(--clr-gray-800);
	font-weight: var(--font-weight-bold);
	font-size: 0.9375rem; /* 15 px */
}

.section-nav__link:hover,
.section-nav__link:focus,
.section-nav__link.is-current {
	color: var(--clr-primary);
}

.section-nav__list--tertiary{
  list-style:none;
  margin: .5rem 0 0 .9rem;
  padding: 0;
  display:flex;
  flex-direction:column;
  gap: .35rem;
}

.section-nav__link--tertiary{
  font-weight: 600;
  text-transform: none; /* keeps these from being ALL CAPS if your parent is */
  font-size: .92rem;
  opacity: .9;
}

/* ==== Page hero header ==== */
.page-hero {
	position: relative;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: left;
  padding: 50px 0px;
}

.page-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);  /* dark overlay for readability */
}

.page-hero__inner {
	position: relative;      /* keeps title above overlay */
    margin-inline: auto;
    padding-inline: var(--space-lg);
    width: 100%;
	max-width: 1240px;
}

.page-hero__title {
	margin: 0;
	font-size: clamp(2rem, 5vw + 1rem, 4rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
  color: #ffffff;
}

.page-hero__subtitle {
    margin: var(--space-sm) 0 0;
    font-size: clamp(1rem, 1vw + .75rem, 1.375rem);
    line-height: 1.4;
    max-width: 60ch;
    color: #fff;
    opacity: .9;        /* subtle contrast vs. title */
}

/* If you echoed a subtitle below the hero on pages without thumbnails */
.section-subtitle {
    margin-block-start: var(--space-sm);
    font-size: 1.125rem;
    line-height: 1.4;
    color: var(--clr-gray-400);
}

/* =========================================================
   2.  NAVIGATION
   ========================================================= */
.site-header {
    background: #ffffff;
    border-bottom: 1px solid var(--clr-gray-200);
    padding-bottom: 0;                 /* was 20px */
    background-color: var(--clr-primary-light);
}

.logo {
    max-width: 200px;
    min-width: 100px;
    grid-row:1 / span 2; 
    align-self:center;
}
.logo img { width: 100%; }

.nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-md) 0px var(--space-md);
    position: relative;
}

/* --- desktop menu --- */
.nav-row { 
    grid-column:2; 
    grid-row:2;
    display:flex;
    align-items:center;
    justify-content:flex-end; 
    gap:var(--space-lg); 
    align-items: center;
}

.nav-menu {
    display: flex;
    gap: var(--space-sm);
    list-style: none;
    margin: 0px;
}

.nav-menu a {
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    color: #ffffff;
    padding-right: 1.25rem; /* room for the chevron */
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-transform: UPPERCASE;
}

.nav-menu > li.menu-item > a {
  padding: 30px 5px 25px;              /* same as old header padding-bottom */
}

.nav-menu > li.menu-item-has-children > a {
  pointer-events: none;   /* makes it unclickable */
  cursor: default;        /* removes hand cursor */
}

.nav-menu > li.menu-item-has-children > a::after {
    content: "";
    width: .5rem;
    height: .5rem;
    border-right: 2px solid #fff;   /* create the L shape */
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);       /* points down */
    display: inline-block;
    transition: transform .18s ease;
    position: relative;
    top: -3px; /* move up */
}
/* Rotate up on hover/focus (and when "expanded" by JS/ARIA if you add it) */
.nav-menu > li.menu-item-has-children:hover > a::after,
.nav-menu > li.menu-item-has-children:focus-within > a::after,
.nav-menu > li.menu-item-has-children[aria-expanded="true"] > a::after {
    position: relative;
    top: 1px; /* move up */
    transform: rotate(-135deg);     /* points up */
}

/* hamburger button hidden on desktop */
.nav-toggle {
    display: none;
    font-size: 1.75rem;
    background: none;
    border: 0;
    color: #ffffff;
}

/* 4. Reset the extra padding on mobile so the accordion doesn’t get weird */
@media (max-width: 768px) {
    .nav-menu > li.menu-item-has-children > a {
      padding: 0 0 20px 0;              /* same as old header padding-bottom */
    }

    .nav-menu > li.menu-item-has-children {
        padding-bottom: 0;
    }
}

/* ===========================
   2a. DESKTOP DROPDOWNS
   =========================== */
.nav-menu li               { position: relative; margin-bottom: 0px;}            /* positioning context */
.nav-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;               /* hide by default */
    flex-direction: column;
    gap: var(--space-xs);
    background: var(--clr-primary);
    padding: var(--space-sm) 0;
    min-width: 220px;
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
    z-index: 10000;
    list-style: none;
    margin: 0px;
}
.nav-menu li:hover   > .sub-menu,
.nav-menu li:focus-within > .sub-menu { display: flex; }

.sub-menu a {
    padding: var(--space-xs) var(--space-lg);
    font-weight: 400;
    white-space: nowrap;
}

/* ===========================
   2b. MOBILE ACCORDION
   =========================== */
@media (max-width: 768px) {

    /* keep nested lists in the flow */
    .nav-menu .sub-menu {
        position: static;
        border: 0;
        border-left: 3px solid var(--clr-gray-200);
        box-shadow: none;
        padding-left: var(--space-md);
    }

    /* accordion: collapsed by default … */
    .nav-menu .sub-menu          { display: none; }
    .nav-menu .open > .sub-menu  { display: flex; }

    /* rotate the caret when open */
    .nav-menu .open > a::after   { transform: rotate(180deg); }
}

/* ===== HEADER EXTRAS (social, search, login) ========================== */
.header-social               { display:flex; gap:var(--space-sm); margin: 0px; filter: brightness(0) invert(1); }
.header-social li            { list-style:none; }
.header-social a             { background:none; border-radius:0;
                               display:inline-flex; align-items:center; }
.header-social a svg,
.header-social a img         { width:20px; height:20px; }
.header-social a:hover,
.header-social a:focus       { color:var(--clr-primary); }

/* ===  SEARCH FIELD  ============================================== */
.header-extras{
    display:flex;               /* one row */
    align-items:center;         /* vertical centring */
    justify-content:flex-end;   /* flush-right */
    gap:var(--space-md);        /* spacing between icons ▸ search */
}

/* fine-tune the search form so it doesn’t break the line */
.header-extras .search-form{
    display:inline-block;       /* prevents line-wrap quirks */
}
.header-extras input[type=search]{ padding:var(--space-xs) var(--space-md);
                                   border:1px solid #ffffff75;
                                   border-radius:999px;
                                   width:180px; max-width:100%;
                                   color: #ffffff;
                                   background-color: #ffffff30; }

.header-extras input[type=search]::placeholder { color: #ffffff; }


/* ===  LOGIN BUTTON  ============================================== */
.login-btn{
    padding:var(--space-xs) var(--space-md);
    border-radius:999px;
    font-size:0.875rem;
    white-space:nowrap;
}

/* CTA appended to the primary menu – mobile panel only */
.nav-cta-item{ display:none; }

/* --- mobile adjustments --- */
@media (max-width:768px){

    /* keep the header + nav pinned while the page scrolls */
    .site-header{
        position:sticky;
        top:0;
        z-index:10050;   /* above the carousel arrows (10000) */
    }

    /* stop in-page anchors landing underneath the pinned header */
    html{ scroll-padding-top:6rem; }

    /* show hamburger, hide desktop row-1 extras */
    .nav-toggle     { display:block; margin-left:auto; }
    .header-extras  { display:none; }
    /* stack contents in row 2 */
    .nav-row{
        position:relative;              /* positioning context */
        flex-direction:column;
        align-items:flex-start;
        gap:0;
    }

    /* slide-down menu */
    .nav-menu{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        width:100%;
        flex-direction:column;
        gap:var(--space-sm);
        padding:var(--space-lg);
        background: var(--clr-primary-light);
        border-top:1px solid var(--clr-gray-200);
        display:none;                   /* closed by default */
        z-index:9999;

        /* header is sticky, so a tall menu must scroll on its own */
        max-height:calc(100dvh - 6rem);
        overflow-y:auto;
        overscroll-behavior:contain;
    }
    .nav-menu.open{ display:flex; }
    .nav-menu > li{ flex-shrink:0; }     /* scroll the panel, don't squash items */

    /* mobile extras – hidden until menu opens */
    .nav-mobile-extras{ display:none; }
    .nav-menu.open + .nav-mobile-extras{
        display:flex;
        flex-direction:column;
        gap:var(--space-sm);
        width:100%;
        padding:var(--space-lg);
        background:#ffffff;
        border-top:1px solid var(--clr-gray-200);
    }

        /* internal styling */
        .nav-mobile-extras .search-form{ width:100%; }
        .nav-mobile-extras input[type="search"]{ width:100%; max-width:none; }

        .mobile-social{ display:flex; gap:var(--space-sm); }
        .mobile-social img,
        .mobile-social svg{ width:20px; height:20px; }

        .nav-row .login-btn { display: none; }

        /* "Become a Member" below the menu items in the hamburger panel */
        .nav-menu .nav-cta-item{
            display:block;
            width:100%;
            margin-top:var(--space-xs);
            padding-top:var(--space-md);
            border-top:1px solid #ffffff40;
        }
        .nav-menu .nav-cta-item > a{
            display:block;
            width:100%;
            text-align:center;
            padding:var(--space-sm) var(--space-lg);
            color:var(--clr-primary);
            text-transform:none;
        }
        .nav-menu .nav-cta-item > a:hover,
        .nav-menu .nav-cta-item > a:focus{ color:#ffffff; }
}

/* Logged-in users: the WP admin bar is fixed at 46px in this range
   (below 601px it scrolls away, so top:0 is correct there). */
@media (min-width:601px) and (max-width:768px){
    body.admin-bar .site-header{ top:46px; }
}

/* =========================================================
   3.  HERO
   ========================================================= */
.hero {
    position:relative; 
    overflow:hidden;
    padding-block: var(--space-2xl);
    background: var(--clr-gray-100);
    text-align: left;
    color: #ffffff;
    min-height: 310px;
}

.hero .container.flow {
    position: relative;
}

/* .container drops its inline padding on mobile, but hero text sitting on the
   background image still needs to be held off the screen edge. */
@media (max-width: 768px) {
    .hero .container.flow { padding-inline: 20px; }
}

/* hero-visual.css */
#gaHeroCanvas {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    /* z-index:-1; */
    filter: brightness(0.5);
}

.hero h1 {
    font-size: clamp(1.875rem, 4vw + 1rem, 2.75rem);
    font-weight: var(--font-weight-bold);
    margin-block-end: var(--space-md);
    color: #ffffff;
}

.hero h3 {
    max-width: 48ch;
    margin-block-end: var(--space-lg);
    line-height: 1.6;
    font-size: 1.25em;
    color: #ffffff;
}

/* Buttons */
.button-group { display: inline-flex; gap: var(--space-md); }

.btn, .wp-block-button__link {
    display: inline-block;
    padding: var(--space-sm) var(--space-lg);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    border: 2px solid var(--clr-primary);
    border-radius: 40px;
    transition: background 0.2s, color 0.2s;
}

.btn-primary, .wp-block-button__link { 
    background: var(--clr-primary);
    color: #ffffff; 
}
.btn-outline { 
    background: #ffffff;
    border-color: transparent;
    color: var(--clr-primary); 
}
.btn:hover, .btn:focus, 
.wp-block-button__link:hover, .wp-block-button__link:focus { 
    background: var(--clr-primary-light); 
    border-color: #ffffff; 
    color: #ffffff; 
}

/* =========================================================
   Gutenberg Quote → "Success Stories" / testimonial style
   ========================================================= */

.wp-block-quote {
  /* layout */
  max-width: 900px;              /* keeps it centered & narrow */
  margin: 4rem auto;             /* big vertical spacing between quotes */
  padding: 0;
  border: 0;

  /* typography */
  text-align: center;
  font-style: normal;
}

/* The quote text */
.wp-block-quote p {
  margin: 0;
  font-size: clamp(1.05rem, 1.2vw + 0.9rem, 1.35rem);
  line-height: 1.9;
  color: rgba(17, 33, 13, 0.75); /* matches your gray/black token vibe */
}

/* Author line */
.wp-block-quote cite,
.wp-block-quote footer,
.wp-block-quote .wp-block-quote__citation {
  display: block;
  margin-top: 1.75rem;
  font-style: normal;
  font-size: 0.95rem;
  color: rgba(17, 33, 13, 0.45);
}

/* Em dash before citation */
.wp-block-quote cite::before,
.wp-block-quote footer::before,
.wp-block-quote .wp-block-quote__citation::before {
  content: "— ";
}

/* Decorative curly quotes above + below */
.wp-block-quote::before {
  content: "“";
  display: block;
  font-size: 6rem;
  line-height: 0.5;
  margin: 0 auto;
  color: rgba(17, 33, 13, 0.18);
}

/* If your theme adds left border / padding in some contexts, override */
.wp-block-quote.is-style-default {
  border-left: 0 !important;
  padding-left: 0 !important;
}

/* =========================================================
   4.  CONTENT SECTIONS
   ========================================================= */
.section               { padding-block: var(--space-2xl); }

.section-title {
    /* font-size: 1.375rem; */
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.02em;
    margin-block-end: var(--space-lg);
    text-transform: uppercase;
}

/* --- card grid --- */
.card-grid { display: grid; gap: var(--space-lg); }
@media (min-width: var(--bp-sm)) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: var(--bp-md)) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: var(--bp-lg)) { .card-grid { grid-template-columns: repeat(4, 1fr); } }

.card {
    background: #ffffff;
    border: 1px solid var(--clr-gray-200);
    border-radius: 6px;
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    transition: box-shadow 0.2s;
}
.card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07); }

.card img   { width: 100%; height: auto; border-radius: 4px; }
.card h3    { font-size: 1rem; font-weight: var(--font-weight-bold); }
.card p     { font-size: 0.875rem; color: var(--clr-gray-400); flex-grow: 1; }
.card .btn  { align-self: flex-start; font-size: 0.875rem; }

/* --- two‑column helper (split) --- */
.split {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    align-items: center;
}
.split > *          { flex: 1; }
@media (min-width: var(--bp-md)) {
    .split           { flex-direction: row; }
    .split.reverse   { flex-direction: row-reverse; }
}
.split img          { width: 100%; height: auto; border-radius: 6px; }

/* --- events list --- */
.events-list { display: flex; flex-direction: column; gap: var(--space-md); }

.event-item {
    border: 1px solid var(--clr-gray-200);
    border-radius: 6px;
    padding: var(--space-lg);
    display: flex;
    gap: var(--space-lg);
    align-items: flex-start;
}
.event-date {
    min-width: 80px;
    text-align: center;
    background: var(--clr-primary);
    color: #ffffff;
    padding: var(--space-xs) var(--space-sm);
    border-radius: 4px;
    font-weight: var(--font-weight-bold);
}
.event-body h4 { font-weight: var(--font-weight-bold); margin-block-end: var(--space-xs); }
.event-body p  { font-size: 0.875rem; color: var(--clr-gray-400); margin-block-end: var(--space-sm); }
.event-body .btn { font-size: 0.75rem; }

/* --- newsletter band --- */
.footer-cta .newsletter {
    background: var(--clr-gray-100);
    padding: var(--space-xl) var(--space-lg);
    text-align: center;
    border-block: 1px solid var(--clr-gray-200);
    align-items: center;
}
.footer-cta .newsletter form {
    margin-block-start: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-width: 460px;
    margin-inline: auto;
}
.footer-cta .newsletter input[type="email"] {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--clr-gray-200);
    border-radius: 4px;
    font-size: 1rem;
}
@media (min-width: var(--bp-sm)) {
    .footer-cta .newsletter form  { flex-direction: row; }
    .footer-cta .newsletter input { flex: 1; }
}

/* =========================================================
   Homepage news and events section
   ========================================================= */

/* OUTER LAYOUT: main column + sidebar */
.home-news__grid {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

/* Left column: featured + second article */
.home-news__main {
  flex: 1.25 0.75 0;
}

/* Right side: newsletter on top, two columns below */
.home-news__side {
  flex: 1 1 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "newsletter newsletter"
    "more       events";
  column-gap: 2rem;
  row-gap: 2.5rem;   /* tweak to control vertical spacing */
}

/* Place cards into sidebar grid */
.card--newsletter { 
  grid-area: newsletter;
  align-self: start;
}

.card--more-news  { grid-area: more; }
.card--events     { grid-area: events; }

/* ---------- existing styles you had (kept) ---------- */

.home-news__featured {
  padding: 12px 0 12px 0;
}

.home-news__featured:first-of-type {
  background-image: linear-gradient(
    to right,
    var(--clr-black) 40%,
    rgba(255, 255, 255, 0) 20%
  );
  background-position: bottom;
  background-size: 4px 1px;
  background-repeat: repeat-x;
}

.home-news__featured .readmore {
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--clr-gray-800);
  font-weight: 700;
}

.home-news__excerpt {
  margin-bottom: 10px;
}

.home-news__title a { color: inherit; }

.home-news__grid a { text-decoration: none; }
.home-news__grid a:hover { text-decoration: underline; }
/* .home-news__grid a:visited { color: inherit; } */

.home-news__main p.eyebrow {
  color: var(--clr-gray);
  font-weight: 800;
  background-image: linear-gradient(
    to right,
    var(--clr-black) 40%,
    rgba(255, 255, 255, 0) 20%
  );
  background-position: bottom;
  background-size: 4px 1px;
  background-repeat: repeat-x;
}

.home-news__side h5 {
  color: var(--clr-gray);
  font-weight: 800;
}

/* Mini list styles (unchanged) */
.mini-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.mini-list__item {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.75rem;
  align-items: center;
  padding: 0 0 12px;
  background-image: linear-gradient(
    to right,
    var(--clr-black) 40%,
    rgba(255, 255, 255, 0) 20%
  );
  background-position: bottom;
  background-size: 4px 1px;
  background-repeat: repeat-x;
}

.mini-list__thumb img {
  width: 100%;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.mini-list__title {
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.25rem;
  color: var(--clr-black);
}

.mini-list__date {
  font-size: 0.85rem;
  color: var(--clr-gray-800);
  display: block;
  margin: 10px 0 0 0;
}

/* ------------------------------
   Buttons
   ------------------------------ */
.btn.block {
  width: 100%;
  text-align: center;
  margin-top: 0.75rem;
}

@media (max-width: 800px) {
  .home-news__grid {
    display: flex;              /* switch from grid to flexbox for simplicity */
    flex-direction: column;     /* stack everything vertically */
    gap: 1.5rem;                /* space between sections */
  }

  /* Reset explicit grid placement */
  .home-news__main,
  .card--newsletter,
  .card--more-news,
  .card--events {
    width: 100%;
  }

  /* Optional: adjust side cards spacing for smaller screens */
  .card--newsletter,
  .card--more-news,
  .card--events {
    margin: 0;                  /* remove any top/bottom gaps added earlier */
  }
}

@media (max-width: 450px) {
  /* Optional: make whole section single-column */
  .home-news__grid {
    display: block;
  }

  /* Stack sidebar contents */
  .home-news__side {
    display: block;           /* disables the grid layout */
  }

  .card--newsletter,
  .card--more-news,
  .card--events {
    display: block;
    width: 100%;
    margin-bottom: 1.5rem;    /* space between each card */
    /* reset any grid-area so normal flow applies */
    grid-area: auto;
  }
}

/* ===== Newsletter card layout ===== */

.card--newsletter {
  /* optional: flatten card styles if your generic .card adds shadow, etc. */
  border: none;
  box-shadow: none;
  padding: 0;
}

.newsletter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

@media (max-width: 1000px) {
    .newsletter {
        flex-wrap: wrap;
    }
    .newsletter-form {
        width: 100%;
    }
}

/* Left side: icon + copy */
.newsletter__copy-block {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex: 1 0 0;
}

.newsletter__icon {
  width: 60px;
  height: 60px;
  position: relative;
}

/* Two overlapping triangles (rough match to your example) */
.newsletter__icon::before,
.newsletter__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #3aaea0;              /* teal foreground */
  clip-path: polygon(0 100%, 30% 0, 100% 70%);
  border-radius: 2px;
}

.newsletter__icon::after {
  background: rgba(58, 174, 160, 0.35); /* lighter, behind */
  transform: translateX(-12px) translateY(6px);
  z-index: -1;
}

.newsletter__eyebrow {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-gray-900, #20241f);
  margin: 0 0 0.25rem;
}

.newsletter__body {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--clr-gray-900, #20241f);
}

/* Right side: pill form */
.newsletter-form {
  display: flex;
  align-items: center;
  background: #f9faf9;
  border-radius: 999px;
  border: 1px solid #d3d8d3;
  padding: 0.25rem 0.35rem 0.25rem 1rem;

  max-width: 100%;              /* ← never wider than container */
  min-width: 0;                 /* ← important for flex children */
  /* remove the old min-width: 260px; if you still have it */
}

.newsletter-form input[type="email"] {
  border: none;
  background: transparent;
  outline: none;
  flex: 1 1 auto;
  min-width: 0;                 /* ← allow the input to shrink */
  font-size: 0.95rem;
  color: var(--clr-gray-900, #20241f);
  padding: 0.35rem 0.75rem 0.35rem 0;
}

.newsletter-form input::placeholder {
  color: #9ca3af;
}

/* Circular mail button */
.newsletter-form__button {
  border: none;
  border-radius: 999px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #3aaea0;              /* same teal as icon */
  color: #ffffff;
  cursor: pointer;
  padding: 0;
}

.newsletter-form__button:hover,
.newsletter-form__button:focus-visible {
  filter: brightness(1.05);
}

.newsletter-form__icon {
  width: 15px;
  height: 15px;
}

/* ===== Responsive tweaks ===== */

/* Narrow screens: stack text above form */
@media (max-width: 600px) {
  .newsletter {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .newsletter-form {
    width: 100%;
    min-width: 0;
  }
}


/* =========================================================
   LATEST-NEWS CAROUSEL (Swiper)
   ========================================================= */
.swiper {
    overflow: visible;
    width: calc(100% - 100px);
}
/* 1. Container padding so arrows sit outside cards */
.news-carousel {
    padding-block: var(--space-lg);
    overflow: hidden;
}

/* 2. Make each slide auto-height and inherit the card look-&-feel */
.news-carousel .swiper-slide {
    height: auto;               /* let the card determine height */
}
.news-carousel .card {
    height: 100%;               /* card stretches to fill slide */
    display: flex;
    flex-direction: column;
}

/* 3. Navigation arrows – round pills that match brand colours */
.swiper .swiper-button-prev,
.swiper .swiper-button-next {
    --size: 48px;               /* arrow button size on desktop */

    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    border: 2px solid var(--clr-gray-200);
    background: #ffffff;
    color: var(--clr-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    transition: background .2s, border-color .2s, color .2s;

    top: calc(50% - var(--size) / 2);  /* centre vertically */
    z-index: 10000;
}
.swiper .swiper-button-prev { left: -50px;  }
.swiper .swiper-button-next { right: -50px; }

.swiper .swiper-button-prev:hover,
.swiper .swiper-button-next:hover,
.swiper .swiper-button-prev:focus,
.swiper .swiper-button-next:focus {
    background: var(--clr-primary);
    border-color: var(--clr-primary);
    color: #ffffff;
}

/* Swiper injects the arrow icons via the `::after` pseudo */
.swiper .swiper-button-prev::after,
.swiper .swiper-button-next::after {
    font-size: 1.125rem;        /* tweak arrow glyph size */
    font-weight: 700;
}

/* Fix for Jetpack photo slider */
/* Apply globally, but only to Jetpack Slideshow containers */
.wp-block-jetpack-slideshow_container { 
  position: relative;            /* make the container the positioning context */
  box-sizing: border-box;
}

/* Base arrow positioning within the container only */
.wp-block-jetpack-slideshow_container .swiper-button-prev,
.wp-block-jetpack-slideshow_container [class*="button-prev"],
.wp-block-jetpack-slideshow_container .swiper-button-next,
.wp-block-jetpack-slideshow_container [class*="button-next"] {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  margin: 0;
}

/* Keep arrows a bit inside the edges */
.wp-block-jetpack-slideshow_container .swiper-button-prev,
.wp-block-jetpack-slideshow_container [class*="button-prev"] {
  left: clamp(8px, 2vw, 20px);
  right: auto;
}

.wp-block-jetpack-slideshow_container .swiper-button-next,
.wp-block-jetpack-slideshow_container [class*="button-next"] {
  right: clamp(8px, 2vw, 20px);
  left: auto;
}

/* Optional: tighter on small screens */
@media (max-width: 600px) {
  .wp-block-jetpack-slideshow_container .swiper-button-prev,
  .wp-block-jetpack-slideshow_container [class*="button-prev"] { left: 8px; }
  .wp-block-jetpack-slideshow_container .swiper-button-next,
  .wp-block-jetpack-slideshow_container [class*="button-next"] { right: 8px; }
}

/* If alignfull/alignwide layouts cause edge overflow, add inner padding */
.wp-block-jetpack-slideshow_container.alignfull,
.wp-block-jetpack-slideshow_container.alignwide {
  padding-inline: min(4vw, 24px);
}

/* 4. Responsive adjustments */
@media (max-width: 768px) {

}

/* 5. Optional – hide arrows on very small screens if you prefer */
@media (max-width: 480px) {
    .swiper .swiper-button-prev,
    .swiper .swiper-button-next { display: none; }
    .swiper {
        width: 100%;
    }
}


/* =========================================================
   5.  FOOTER  (light variant, matches new wireframe)
   ========================================================= */

/* ───────── Root container ───────── */
.site-footer {
    background: var(--clr-secondary);
    position: relative;
    color:#fff;
    margin-top: 140px;
    overflow-x: clip;
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6 {
  color: #ffffff;          /* example: white text */
}
/* Put real content above the decorative layers */
.site-footer > * { position: relative; z-index: 1; }

/* Angled top edge (same color as footer) */
.site-footer::after{
  content:"";
  position:absolute;
  left:-12vw; right:-12vw;        /* widen so edges don't show */
  top:0vw;                        /* how high the angle starts */
  height:14vw;                     /* thickness of the slanted piece */
  background: var(--clr-secondary);             /* same as footer bg */
  transform:skewY(3deg);         /* angle */
  transform-origin:100% 0;
  z-index:0;
}

/* Teal strip above */
.site-footer::before{
  content:"";
  position:absolute;
  left:-20vw; right:-20vw;
  top:-12vw;                       /* higher than ::after */
  height:14vw;
  background:var(--clr-primary-light);              /* teal */
  transform:skewY(-4deg);
  transform-origin:100% 0;
  z-index:-1;
}

/* ───────── CTA banner ───────── */
.footer-cta {
    padding: var(--space-2xl) var(--space-lg);
    text-align: center;
}

/* Headline “Help Shape the Future …” */
.footer-cta .cta-headline {
    font-size: clamp(1.75rem, 2vw + 1rem, 2.25rem);
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
    margin-block-end: var(--space-xl);
    text-align: left;
}

/* two-up JOIN / DONATE cards */
.footer-cta .cta-grid {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-block-end: var(--space-lg);
}

.footer-cta .cta-card {
    background: var(--clr-secondary-light);
    border: none;
    padding: var(--space-xl) var(--space-lg);
    border-radius: 2px;
}

.footer-cta .cta-card h3 {
    text-transform: uppercase;
    font-size: 1.25rem;
    margin-block-end: var(--space-sm);
}

.footer-cta .cta-card p {
    margin-block-end: var(--space-lg);
    line-height: 1.6;
    color: #ffffff;
}

/* Buttons re-use your existing .btn pattern for consistency */
.footer-cta .cta-card .btn {
    font-size: 0.875rem;
    margin: 0 auto;
}

/* Newsletter block reused from section styles,
   but scoped so it doesn’t clash with the site-wide band */
.footer-cta .newsletter {
    /* background: transparent; */
    /* border-block: 0; */
    /* padding: 0; */
}

.footer-cta .newsletter h3 {
    font-size: 1.25rem;
    font-weight: var(--font-weight-bold);
    margin-block-end: var(--space-xs);
}

.footer-cta .newsletter form {
    margin-block-start: var(--space-md);
}

.footer-cta .newsletter input[type="email"] {
    border-radius: 999px;
}

/* ───────── Bottom bar (icons + menu) ───────── */
.footer-bottom {
    background: var(--clr-secondary-light);
    color: #ffffff;
    padding: var(--space-xl) var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    align-items: center;
    text-align: center;
}

/* Social icons (re-uses your .social-icons class) */
.social-links               { display:flex; gap:var(--space-sm); }
.social-links li            { list-style:none; }
.social-links a             { background:none; border-radius:0;
                               display:inline-flex; align-items:center; }
.social-links a svg,
.social-links a img         { width:20px; height:20px; }
.social-links a:hover,
.social-links a:focus       { color:var(--clr-primary); }


/* Footer menu (location “secondary”) */
.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    justify-content: center;
}

.footer-nav a {
    color: #ffffff;
    text-decoration: none;
    font-weight: var(--font-weight-bold);
    font-size: 0.875rem;
}

.footer-nav a:hover,
.footer-nav a:focus {
    text-decoration: underline;
}

/* ───────── Responsive tweaks ───────── */
@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

/* -----------------------------------------------------------------
   Footer layout tweaks
   ----------------------------------------------------------------- */

/* Main flex wrapper */
.footer-inner {
    display: flex;
    flex-direction: row;
    /* gap: var(--space-lg); */
    justify-content: space-between;
}

@media (max-width: 768px) {
    .footer-inner {
      flex-direction: column-reverse;
    }
    /* .footer-nav {
      justify-content: flex-start;
      margin-bottom: 1.5rem;
    } */
}


/* Left block (icons + text) */
.footer-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Legal nav inline on larger screens */
/* FOOTER LEGAL MENU
   ----------------- */
.legal-nav {
    /* kill bullets / indentation */
    list-style: none;
    margin: 0;
    padding: 0;

    /* lay links out in a row */
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;        /* space around the divider */
}

.legal-nav li { display: flex; align-items: center; }

/* tasteful | divider */
.legal-nav li:not(:last-child)::after {
    content: "|";
    margin-left: .5rem;
}

/* Medium-and-up: two columns */
@media (min-width: var(--bp-md)) {
    .footer-inner  { flex-direction: row; justify-content: space-between; align-items: flex-start; }

    .footer-meta   { flex-direction: row; align-items: center; gap: var(--space-lg); }

    /* keep footer menu tight right */
    /* .footer-nav    { text-align: right; } */
}

/* -----------------------------------------------------------------
   FINAL footer alignment – icons + copy left, menu right
   ----------------------------------------------------------------- */

/* All footer content in one flex row ≥ md  ------------------------- */
@media (min-width: var(--bp-md)) {
	.footer-inner {
		display: flex;
		justify-content: space-between;   /* ← pushes nav to the right */
		align-items: center;
		gap: var(--space-lg);
	}
}

/* ----- LEFT SIDE  (icons + copyright + legal) -------------------- */
.footer-meta {
	display: flex;
	/* align-items: center; */
	flex-wrap: wrap;                      /* lets it break nicely ↓768 px */
	/* gap: var(--space-lg); */
}

/* social icon strip  */
.social-links { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--space-sm); filter: brightness(0) invert(1); }
.social-links li { margin: 0; }

/* copyright */
.footer-meta .copyright {
	font-size: 0.75rem;
}

/* legal links */
.legal-nav { display: flex; gap: var(--space-2xs); font-size: 0.75rem; }
.legal-nav a       { color: inherit; text-decoration: none; }
.legal-nav a:hover { text-decoration: underline; }
.legal-nav .divider { margin-inline: var(--space-2xs); }

/* ----- RIGHT SIDE  (footer nav) ---------------------------------- */
.footer-nav { text-align: right; }

/* Footer menu: 1 column on mobile, 2 columns on larger screens */
.footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;

  /* mobile default */
  column-count: 2;
  column-gap: 4rem;
}

/* keep items from splitting between columns */
.footer-menu li {
  break-inside: avoid;
  margin: 0 0 .5rem 0; /* optional spacing between links */
}

/* 2 columns on tablet/desktop */
@media (max-width: 768px) {
  .footer-nav { text-align: left; margin-bottom: 25px; } 
  .footer-menu { flex: auto; }
}

/* =========================================================
   6.  GLOBAL HELPERS
   ========================================================= */
.flow > * + *        { margin-block-start: var(--space-md); }
.btn-group > .btn + .btn { margin-inline-start: var(--space-sm); }

/* =========================================================
   CHALLENGES AND SUBMISSIONS
   ========================================================= */
.submission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-lg, 2rem);
}
.submission-card {
    background: #fff;
    /* border: 1px solid var(--clr-gray-200, #e5e5e5); */
    border-radius: 8px;
    overflow: hidden;
    transition: transform .15s;
}
.submission-card a {
    text-decoration: none;
}
/* .submission-card:hover { transform: translateY(-4px); } */
.card-thumb img { width: 100%; height: auto; display: block; }
.card-title   { margin: 0 0 .5rem; font-size: 1.25rem; }
.award-level  { font-weight: 600; color: var(--clr-accent, #b00); margin-bottom: .25rem; }
.award-badge {
	display:inline-block;padding:.2em .5em;border-radius:4px;font-size:.75rem;
	background:#e5e5e5;color:#000;font-weight:600;margin-bottom:.5rem
}
.award-1st {background:#ffd700;}   /* gold */
.award-2nd {background:#c0c0c0;}   /* silver */
.award-3rd {background:#cd7f32;}   /* bronze */
.dvs-challenges .challenge-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:var(--space-lg,2rem);
    margin-block:2rem;
}

/* =========================================================
   SEARCH RESULTS – two fixed-width columns
   ========================================================= */
.search-wrapper{
    display:flex;              /* side-by-side */
    flex-direction:row;        /* left to right */
    gap:var(--space-xl);
    align-items:flex-start;    /* tops align */
}

/* left column  */
.search-sidebar{
    flex:0 0 280px;            /* 280 px wide, never grows */
    border:1px solid var(--clr-gray-200);
    border-radius:6px;
    padding:var(--space-lg);
    background:#fff;
    position:sticky;
    top:var(--space-xl);
}

/* right column (results) */
.search-results{
    flex:1 1 0%;               /* take all remaining width */
    padding: 0;
}

/* If an item has no thumbnail, let content use full width */
.search-card .news-card__content {
  flex: 1 1 100%;
}

.search-card:has(.news-card__media) .news-card__content {
  flex: 1 1 50%;
}

/* Make thumbs consistent and not overly tall */
.search-card .news-card__img {
  max-width: 520px;       /* matches news */
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.news-card__media > a{
  display: block;
  width: 100%;
}

/* Search header spacing */
.search-total {
  margin-top: 6px;
  opacity: 0.6;
}

/* mobile fallback: stack */
@media(max-width:600px){
    .search-wrapper{ flex-direction:column; }
    .search-sidebar{ position:static; }
}

/* ----- tidy the form layout ------------------------------------------- */
.search-sidebar form{ display:flex; flex-direction:column; gap:var(--space-md); }
.search-sidebar input[type="search"]{ width:100%; }
.search-sidebar fieldset{ display:flex; flex-direction:column; gap:var(--space-xs); }
.search-sidebar label{ display:flex; align-items:center; gap:var(--space-xs); }

/* ----- results -------------------------------------------------------- */
.search-results article{ margin-block-end:var(--space-xl); }

/* =========================================================
   SEARCH FILTER FORM (sidebar)
   ========================================================= */

.search-sidebar .searchform{
	display:flex;
	flex-direction:column;
	gap:var(--space-md);
}

/* Search input — pill */
.search-sidebar .searchform input[type="search"]{
	width:100%;
	padding: 0.75rem 1rem;
	border:1px solid var(--clr-gray-200);
	border-radius:999px;
	font-size:0.95rem;
	color: var(--clr-gray-800);
	background:#fff;
}

.search-sidebar .searchform input[type="search"]::placeholder{
	color: var(--clr-gray-400);
}

.search-sidebar .searchform input[type="search"]:focus{
	outline:none;
	border-color: var(--clr-primary-light);
	box-shadow: 0 0 0 3px rgba(0,112,110,0.12);
}

/* Filters block */
.search-sidebar .search-filters{
	border:0;
	padding:0;
	margin: 0;
	display:flex;
	flex-direction:column;
	gap: var(--space-xs);
}

/* Give the filter section a visible heading without changing markup */
.search-sidebar .search-filters::before{
	content:"FILTERS";
	display:block;
	font-weight:800;
	letter-spacing:0.08em;
	text-transform:uppercase;
	font-size:0.85rem;
	color: var(--clr-black);
	margin-top: var(--space-sm);
	margin-bottom: var(--space-xs);

	/* subtle dotted underline like your section-nav title */
	padding-bottom: var(--space-sm);
	background-image: linear-gradient(to right, var(--clr-black) 40%, rgba(255, 255, 255, 0) 20%);
	background-position: bottom;
	background-size: 4px 1px;
	background-repeat: repeat-x;
}

/* Each checkbox row */
.search-sidebar .search-filters label{
	display:flex;
	align-items:center;
	gap: var(--space-sm);
	padding: 0.35rem 0.25rem;
	border-radius:6px;
	cursor:pointer;
	user-select:none;
	text-transform:uppercase;
	font-weight:700;
	font-size:0.9rem;
	color: var(--clr-gray-800);
}

/* Hover row */
.search-sidebar .search-filters label:hover{
	background: rgba(0,0,0,0.03);
}

/* Checkbox styling (modern browsers) */
.search-sidebar .search-filters input[type="checkbox"]{
	appearance:none;
	-webkit-appearance:none;
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--clr-gray-400);
	border-radius: 4px;
	display:inline-grid;
	place-content:center;
	background:#fff;
	flex: 0 0 18px;
}

/* Check indicator */
.search-sidebar .search-filters input[type="checkbox"]::before{
	content:"";
	width: 10px;
	height: 10px;
	transform: scale(0);
	transition: transform 0.12s ease-in-out;
	clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 22%, 80% 0, 38% 62%);
	background: #fff;
}

/* Checked state */
.search-sidebar .search-filters input[type="checkbox"]:checked{
	background: var(--clr-primary);
	border-color: var(--clr-primary);
}
.search-sidebar .search-filters input[type="checkbox"]:checked::before{
	transform: scale(1);
}

/* Keyboard focus */
.search-sidebar .search-filters input[type="checkbox"]:focus-visible{
	outline:none;
	box-shadow: 0 0 0 3px rgba(0,112,110,0.12);
	border-color: var(--clr-primary-light);
}

/* Submit button — use your brand button language */
.search-sidebar .searchform button[type="submit"]{
	width:100%;
	padding: 0.75rem 1rem;
	border-radius: 999px;
	border: 2px solid var(--clr-primary);
	background: var(--clr-primary);
	color:#fff;
	font-weight:800;
	text-transform:uppercase;
	letter-spacing:0.04em;
	cursor:pointer;
	transition: background .2s, border-color .2s, color .2s;
}

.search-sidebar .searchform button[type="submit"]:hover,
.search-sidebar .searchform button[type="submit"]:focus{
	background: var(--clr-primary-light);
	border-color: var(--clr-primary-light);
}

/* Small screens: keep spacing tight */
@media (max-width: 600px){
	.search-sidebar{
		padding: var(--space-md);
	}
}

/* =========================================================
   PAGINATION (global minimalist)
   ========================================================= */
.pagination, .nav-links {
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	gap:18px;              /* spacing like screenshot */
  margin: 80px 0px;
}

/* base link/label */
.pagination .page-numbers{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:0;             /* remove button padding */
	border:0;              /* remove boxes */
	border-radius:0;
	text-decoration:none;
	color:var(--clr-gray-800);
	font-size:0.95rem;
	font-weight:500;
	opacity:0.75;
}

/* hover */
.pagination a.page-numbers:hover,
.pagination a.page-numbers:focus{
	background:transparent;
	color:var(--clr-gray-800);
	opacity:1;
	outline:none;
}

/* current page */
.pagination .page-numbers.current{
	background:transparent;
	border:0;
	color:var(--clr-gray-800);
	font-weight:700;
	opacity:1;
	pointer-events:none;
}

/* dots */
.pagination .page-numbers.dots{
	opacity:0.6;
	pointer-events:none;
}

/* chevrons */
.pagination .page-numbers.prev,
.pagination .page-numbers.next{
	font-size:22px;
	line-height:1;
	opacity:0.7;
	transform:translateY(-1px);
}

.pagination .page-numbers.single-prev,
.pagination .page-numbers.single-next{
	line-height:1;
	opacity:0.7;
	transform:translateY(-1px);
}

.pagination a.page-numbers.prev:hover,
.pagination a.page-numbers.next:hover, 
.pagination a.page-numbers.single-prev:hover,
.pagination a.page-numbers.single-next:hover{
	opacity:1;
}

.pagination .page-numbers.disabled{
  pointer-events: none;
  opacity: .4;
}

/* optional: tighten on small screens */
@media (max-width: 480px){
	.pagination{ gap:14px; }
}

/* =========================================================
   News Archive Styles
   ========================================================= */

.news-archive__header {
  margin-bottom: 24px;
}

.news-archive__kicker {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.news-archive__subkicker {
  margin: 8px 0 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}

.news-archive__rule {
  margin: 24px 0 0;
  border: 0;
  border-top: 1px solid rgba(0,0,0,0.12);
}

.news-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 24px 0;
}

.news-filter__btn {
  display: inline-block;
  padding: 6px 16px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 40px;
  color: var(--clr-secondary);
  background: var(--clr-gray-200);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.news-filter__btn:hover,
.news-filter__btn:focus {
  background: #555;
  color: #fff;
}

.news-filter__btn--active {
  background: #555;
  color: #fff;
}

.news-filter__btn--dvs.news-filter__btn--active,
.news-filter__btn--dvs:hover,
.news-filter__btn--dvs:focus {
  background: var(--clr-primary);
  color: #fff;
}

.news-filter__btn--nightingale.news-filter__btn--active,
.news-filter__btn--nightingale:hover,
.news-filter__btn--nightingale:focus {
  background: var(--clr-secondary);
  color: #fff;
}

.news-card {
  padding: 0;
  margin: 0;
}

.news-card__inner {
  display: flex;
  gap: 40px;
  padding: 36px 0;
  align-items: flex-start;
}

.news-card__content {
  flex: 1 1 50%;
  min-width: 280px;
}

.news-card__title {
  margin: 0 0 12px;
  line-height: 1.05;
}

.news-card__title a {
  text-decoration: none;
  color: inherit;
}

.news-card__date {
  margin: 0 0 12px;
  opacity: 0.6;
  font-weight: 600;
}

.news-card__excerpt {
  opacity: 0.75;
  max-width: 56ch;
}

.news-card__media {
  flex: 1 1 50%;
  display: flex;
  justify-content: flex-end;
}

.news-card__img {
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
}

.news-card__rule {
  margin: 0;
  border: 0;
  border-top: 1px solid rgba(0,0,0,0.12);
}

.news-card__type {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
}

.news-card__type--dvs {
  background-color: var(--clr-primary);
  color: #fff;
}

.news-card__type--nightingale {
  background-color: var(--clr-secondary);
  color: #fff;
}

/* Responsive */
@media (max-width: 900px) {
  .news-card__inner {
    flex-direction: column;
    gap: 20px;
  }

  .news-card__media {
    justify-content: flex-start;
  }

  .news-card__img {
    max-width: 100%;
  }
}

:is(.single-news, .single-member_spotlight, .single-affiliated_group, .single-resource, .single-job_listing):not(:has(.page-sidebar)) > main {
  max-width: 840px;
  margin-left: auto;  /* Optional: Centers the narrower content */
  margin-right: auto; /* Optional: Centers the narrower content */
}

/* pages using Template: Narrow (840px) */
.page-template-page-narrow main {
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
}

body.dvs-plus-width--840 > main {
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
}

body.dvs-plus-width--1240 > main {
  max-width: 1240px;
}

.wp-block-image {
  margin: 15px 0px;
}

.ext-link-icon{
  display:inline-flex;
  margin-left:.35em;
  vertical-align:text-bottom;
}
.ext-link-icon svg{
  width:.9em;
  height:.9em;
  fill:currentColor;
  display:block;
}

.team-profiles {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.team-profile--has-media {
  display: grid;
  grid-template-columns: 33% 1fr;
  gap: 25px;
  align-items: start;
}

.team-profile--no-media {
  display: block; /* single column */
}

.team-profile__img {
  width: 100%;
  height: auto;
  display: block;
}

.team-profile__title {
  margin: 0 0 1rem 0;
}

.team-profile__bio {
  margin-bottom: 1.25rem;
}

.team-profile__socials {
  margin: 0.5rem 0 1.25rem 0;
}

.team-profile__contact {
  margin-top: 0.75rem;
}

@media (max-width: 900px) {
  .team-profile--has-media {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}

/* Force inactive-board images to be square */
.team-grid-card__media {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* Ensure <img> fills the square and crops nicely */
.team-grid-card__media img,
.team-grid-card__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.team-grid-card__content {
  padding-top: 0.75rem;
}

.team-grid-card__role {
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.team-grid-card__name a {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 1100px) {
  .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* 1. Force the panel to stay "visible" so we can animate it */
.wp-block-accordion-panel {
    display: block !important; /* Overrides WP default hiding */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transition: all 0.3s ease-in-out; /* Smooths the animation */
}

/* 2. Expand the panel when the parent has the 'is-open' class */
.wp-block-accordion-item.is-open .wp-block-accordion-panel {
    max-height: 1000px; /* A safe limit large enough for your content */
    opacity: 1;
    margin-top: 1rem !important; /* Adjust this to match your desired spacing */
}

/* Optional: Rotate the '+' icon when open */
.wp-block-accordion-heading__toggle-icon {
    transition: transform 0.3s ease;
}

.wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon {
    transform: rotate(45deg); /* Turns the + into an X */
}

/* =========================================================
   WP JOB MANAGER – FORM SKIN (matches DVS site)
   ========================================================= */

/* --- shared tokens (use yours) --- */
:root{
  --form-radius: 999px;
  --form-radius-sm: 10px;
  --form-border: 1px solid var(--clr-gray-200);
  --form-bg: #fff;
  --form-shadow-focus: 0 0 0 3px rgba(0,112,110,0.12);
}

/* ---------- Job Listings FILTER BAR (front-end) ---------- */
/* wrapper the plugin outputs */
.job_listings,
.job_listings .job_filters{
  font-family: var(--font-body);
}

/* the whole filter "card" */
.job_listings .job_filters{
  background: var(--form-bg);
  border: var(--form-border);
  border-radius: var(--form-radius-sm);
  padding: var(--space-lg);
  margin: var(--space-lg) 0;
}

/* inputs */
.job_listings .job_filters input[type="text"],
.job_listings .job_filters input[type="search"],
.job_listings .job_filters input[type="email"],
.job_listings .job_filters input[type="url"],
.job_listings .job_filters select{
  width: 100%;
  padding: 0.75rem 1rem;
  border: var(--form-border);
  border-radius: var(--form-radius);
  background: #fff;
  color: var(--clr-gray-800);
  font-size: 0.95rem;
  line-height: 1.2;
}

/* focus */
.job_listings .job_filters input:focus,
.job_listings .job_filters select:focus{
  outline: none;
  border-color: var(--clr-primary-light);
  box-shadow: var(--form-shadow-focus);
}

/* placeholders */
.job_listings .job_filters input::placeholder{
  color: var(--clr-gray-400);
}

/* the “Remote positions only” row */
.job_listings .job_filters .search_jobs label{
  display: inline-flex;
  gap: var(--space-xs);
  align-items: center;
  margin: 0;
  font-weight: 600;
  color: var(--clr-gray-800);
}

/* Make checkboxes/radios match site (modern browsers) */
.job_listings .job_filters input[type="checkbox"],
.job_listings .job_filters input[type="radio"]{
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--clr-gray-400);
  border-radius: 4px;
  display: inline-grid;
  place-content: center;
  background: #fff;
}

.job_filters .search_jobs div.search_remote_position input {
  width: 18px;
}

/* check mark */
.job_listings .job_filters input[type="checkbox"]::before{
  content:"";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: transform 0.12s ease-in-out;
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 22%, 80% 0, 38% 62%);
  background: #fff;
}
.job_listings .job_filters input[type="checkbox"]:checked{
  background: var(--clr-primary);
  border-color: var(--clr-primary);
}
.job_listings .job_filters input[type="checkbox"]:checked::before{
  transform: scale(1);
}

/* job types row (Contract/Freelance/etc) */
.job_listings .job_filters .job_types{
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  /* border-top: 1px solid rgba(0,0,0,0.08); */
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* remove the plugin’s default list styling */
.job_listings .job_filters .job_types,
.job_listings .job_filters .job_types li{
  list-style: none;
  margin: 10px;
  padding: 0;
}

/* “Search Jobs” button */
.job_listings .job_filters input[type="submit"],
.job_listings .job_filters button,
.job_listings .job_filters .search_jobs input[type="submit"]{
  width: 100%;
  margin-top: var(--space-md);
  padding: 0.75rem 1rem;
  border-radius: var(--form-radius);
  border: 2px solid var(--clr-primary);
  background: var(--clr-primary);
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.job_listings .job_filters input[type="submit"]:hover,
.job_listings .job_filters button:hover{
  background: var(--clr-primary-light);
  border-color: var(--clr-primary-light);
}

.job_filters .showing_jobs {
  background: none;
}

.job_filters .job_types {
  background: none;
  border: none;
}

/* ---------- Job Manager FORMS (submit/edit job, dashboard) ---------- */
.job-manager-form,
#job-manager-job-dashboard,
#job-manager-alerts,
.job-manager-message,
.job-manager-info{
  font-family: var(--font-body);
}

/* Make the main form feel like your “card” */
.job-manager-form{
  background: #fff;
  border: var(--form-border);
  border-radius: var(--form-radius-sm);
  padding: var(--space-lg);
  margin: var(--space-lg) 0;
}

/* WPJM uses <fieldset> heavily */
.job-manager-form fieldset{
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-md);
}

/* Label */
.job-manager-form label{
  font-weight: 700;
  color: var(--clr-black);
  margin-bottom: .35rem;
  display: inline-block;
}

/* Help text / description */
.job-manager-form small,
.job-manager-form .description{
  color: var(--clr-gray-800);
  opacity: .7;
}

/* Inputs / selects / textarea */
.job-manager-form input[type="text"],
.job-manager-form input[type="search"],
.job-manager-form input[type="email"],
.job-manager-form input[type="url"],
.job-manager-form input[type="tel"],
.job-manager-form input[type="number"],
.job-manager-form input[type="password"],
.job-manager-form select,
.job-manager-form textarea{
  width: 100%;
  padding: 0.75rem 1rem;
  border: var(--form-border);
  border-radius: var(--form-radius);
  background: #fff;
  color: var(--clr-gray-800);
  font-size: 0.95rem;
}

/* Textarea should not be pill */
.job-manager-form textarea{
  border-radius: var(--form-radius-sm);
  min-height: 160px;
  resize: vertical;
}

/* Focus states */
.job-manager-form input:focus,
.job-manager-form select:focus,
.job-manager-form textarea:focus{
  outline: none;
  border-color: var(--clr-primary-light);
  box-shadow: var(--form-shadow-focus);
}

/* Buttons in the form */
.job-manager-form input[type="submit"],
.job-manager-form button,
#job-manager-job-dashboard .button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  border-radius: var(--form-radius);
  border: 2px solid var(--clr-primary);
  background: var(--clr-primary);
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
  text-decoration: none;
}
.job-manager-form input[type="submit"]:hover,
.job-manager-form button:hover,
#job-manager-job-dashboard .button:hover{
  background: var(--clr-primary-light);
  border-color: var(--clr-primary-light);
}

/* Secondary buttons (often "Cancel"/"Preview") */
.job-manager-form .button.secondary,
#job-manager-job-dashboard .button.secondary{
  background: #fff;
  color: var(--clr-primary);
  border-color: var(--clr-primary);
}
.job-manager-form .button.secondary:hover,
#job-manager-job-dashboard .button.secondary:hover{
  background: rgba(0,112,110,0.08);
}

/* Dashboard table cleanup (optional but helps) */
#job-manager-job-dashboard table{
  width: 100%;
  border-collapse: collapse;
  border: var(--form-border);
  border-radius: var(--form-radius-sm);
  overflow: hidden;
}
#job-manager-job-dashboard th,
#job-manager-job-dashboard td{
  padding: 0.85rem 0.75rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  text-align: left;
}
#job-manager-job-dashboard th{
  background: var(--clr-gray-100);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
}
#job-manager-job-dashboard tr:last-child td{
  border-bottom: 0;
}

/* ================================================
   DVS Event Submission Form
   ================================================ */

/* New — only hides <br> tags inside the actual form fields */
.dvs-event-submit .wpcf7-form br {
    display: none;
}

.dvs-event-submit {
    margin: 0;
    font-family: inherit;
    color: var(--clr-black);
}

/* Section headings — override theme h3 defaults */
.dvs-event-submit h3 {
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-primary);
    margin: 2rem 0 1rem !important;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
}

.dvs-event-submit h3::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--clr-gray-200);
}

/* Labels — flex column so label text sits above input */
.dvs-event-submit label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--clr-gray-800);
    margin-bottom: 1.25rem;
    font-weight: 400;
}

/* CF7 control wrap — ensure full width */
.dvs-event-submit .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* All inputs and textarea */
.dvs-event-submit input[type="text"],
.dvs-event-submit input[type="email"],
.dvs-event-submit input[type="url"],
.dvs-event-submit input[type="date"],
.dvs-event-submit textarea {
    width: 100%;
    background: #ffffff;
    border: 1px solid var(--clr-gray-200);
    border-radius: 6px;
    color: var(--clr-black);
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.dvs-event-submit input[type="text"]:focus,
.dvs-event-submit input[type="email"]:focus,
.dvs-event-submit input[type="url"]:focus,
.dvs-event-submit input[type="date"]:focus,
.dvs-event-submit textarea:focus {
    border-color: var(--clr-primary-light);
    box-shadow: 0 0 0 3px rgba(0, 112, 110, 0.12);
}

.dvs-event-submit input::placeholder,
.dvs-event-submit textarea::placeholder {
    color: var(--clr-gray-400);
}

.dvs-event-submit input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.4;
    cursor: pointer;
}

.dvs-event-submit textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.6;
}

.dvs-event-submit select {
    width: 100%;
    background: #ffffff;
    border: 1px solid var(--clr-gray-200);
    border-radius: 6px;
    color: var(--clr-black);
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.dvs-event-submit select:focus {
    border-color: var(--clr-primary-light);
    box-shadow: 0 0 0 3px rgba(0, 112, 110, 0.12);
}

/* Featured image upload */
.dvs-event-submit input[type="file"] {
    width: 100%;
    background: #ffffff;
    border: 1px dashed var(--clr-gray-200);
    border-radius: 6px;
    color: var(--clr-gray-800);
    padding: 12px 14px;
    font-size: 13px;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dvs-event-submit input[type="file"]:focus {
    border-color: var(--clr-primary-light);
    box-shadow: 0 0 0 3px rgba(0, 112, 110, 0.12);
}

.dvs-event-submit input[type="file"]::file-selector-button {
    background: var(--clr-gray-100, #f2f2f2);
    border: 1px solid var(--clr-gray-200);
    border-radius: 40px;
    color: var(--clr-black);
    padding: 6px 16px;
    margin-right: 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: inherit;
    cursor: pointer;
}

.dvs-event-submit input[type="file"]::file-selector-button:hover {
    background: #ffffff;
    border-color: var(--clr-primary-light);
}

/* Field hint text under an input */
.dvs-event-submit .dvs-field-hint {
    font-size: 12px;
    color: var(--clr-gray-400);
    margin: 6px 0 0;
}

/* Side-by-side pairs */
.dvs-event-submit .dvs-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.dvs-event-submit .dvs-row label {
    margin-bottom: 1.25rem;
}

/* Validation errors */
.dvs-event-submit .wpcf7-not-valid-tip {
    font-size: 12px;
    color: #c0392b;
    margin-top: 4px;
    display: block;
}

.dvs-event-submit .wpcf7-not-valid {
    border-color: #c0392b !important;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1) !important;
}

/* Submit button — matches DVS .btn style */
.dvs-event-submit input[type="submit"],
.dvs-event-submit .wpcf7-submit {
    width: 100%;
    background: var(--clr-primary);
    color: #ffffff;
    border: 2px solid var(--clr-primary);
    border-radius: 40px;
    padding: 14px 24px;
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    font-family: inherit;
    margin-top: 2rem;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.dvs-event-submit input[type="submit"]:hover,
.dvs-event-submit .wpcf7-submit:hover {
    background: var(--clr-primary-light);
    border-color: var(--clr-primary-light);
}

/* Response messages */
.dvs-event-submit .wpcf7-response-output {
    margin-top: 1.25rem;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 13px;
    border: none;
}

.dvs-event-submit .wpcf7-mail-sent-ok {
    background: rgba(0, 112, 110, 0.08);
    color: var(--clr-primary);
}

.dvs-event-submit .wpcf7-mail-sent-ng,
.dvs-event-submit .wpcf7-aborted {
    background: rgba(192, 57, 43, 0.08);
    color: #c0392b;
}

html.pum-open.pum-open-overlay.pum-open-scrollable body > .site-header {
	padding-right: 0px !important;
}

.page-two-col  { flex-wrap: nowrap; }
.page-main     { min-width: 0; }
.page-sidebar  { flex: 0 0 260px; min-width: 0; }
.page-main { overflow-x: clip; width: 100%; min-width: 0; }