/* =========================================================
   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: #149993;
    --clr-secondary: #f1c40f;
    --clr-gray-100: #f9f9f9;
    --clr-gray-200: #ececec;
    --clr-gray-400: #999999;
    --clr-gray-800: #222222;

    /* 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;
}

/* ──────────────────────────────────────────────────────────
   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 */
}

/* ──────────────────────────────────────────────────────────
   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);
}

/* Fluid modular scale
   (sizes grow modestly on larger screens) */
h1 { font-size: clamp(2rem, 4vw + 1rem, 3rem); }
h2 { font-size: clamp(1.75rem, 3vw + 0.75rem, 2.5rem); }
h3 { font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; 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-lg); }
.text-center    { text-align: center; }
.visually-hidden{ position: absolute; width: 1px; height: 1px; overflow: hidden; }

/* Fix for migrated content */
.container img { width: 100%; }
.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 */

/* 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  */
                    border-left:1px solid var(--clr-gray-200);
                    padding-left:var(--space-lg); }
}

/* simple vertical list styling */
/* two-column wrapper already present … */

.section-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.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);
}

/* ==== Page hero header ==== */
.page-hero {
	position: relative;
	min-height: 45vh;        /* adjust height as needed */
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: left;
}

.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;
}

.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: 20px;
}

.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-block: 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); 
}

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

.nav-menu a {
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    color: var(--clr-gray-800);
}
.nav-menu a:hover,
.nav-menu a:focus { color: var(--clr-primary); }

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

/* ===========================
   2a. DESKTOP DROPDOWNS
   =========================== */
.nav-menu li               { position: relative; margin-bottom: 0px;}            /* positioning context */
.nav-menu .sub-menu {
    position: absolute;
    /* top: calc(100% + .5rem); */
    left: 0;
    display: none;               /* hide by default */
    flex-direction: column;
    gap: var(--space-xs);
    background: #fff;
    border: 1px solid var(--clr-gray-200);
    border-radius: 6px;
    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; }
.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 var(--clr-gray-200);
                                   border-radius:999px;
                                   width:180px; max-width:100% }

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

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

    /* 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:#ffffff;
        border-top:1px solid var(--clr-gray-200);
        display:none;                   /* closed by default */
        z-index:9999;
    }
    .nav-menu.open{ display:flex; }

    /* 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; }
}

/* =========================================================
   3.  HERO
   ========================================================= */
.hero {
    padding-block: var(--space-2xl);
    background: var(--clr-gray-100);
    text-align: left;
    color: #ffffff;
    /* background-image: url('../images/header-graphic.png');
	background-size: cover; */
    height: calc(100vh - 115px);
}

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

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

.hero { position:relative; overflow:hidden; height:480px; }

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

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

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

.btn {
    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 { 
    background: var(--clr-primary);
    color: #ffffff; 
}
.btn-outline { 
    background: transparent;
    color: var(--clr-primary); 
}
.btn:hover, .btn:focus   { 
    background: var(--clr-primary-light); 
    border-color: var(--clr-primary-light); 
    color: #ffffff; 
}

/* =========================================================
   4.  CONTENT SECTIONS
   ========================================================= */
.section               { padding-block: var(--space-2xl); }
.section:nth-of-type(even) { background: var(--clr-gray-100); }

.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-md);
    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 --- */
.newsletter {
    background: var(--clr-gray-100);
    padding: var(--space-xl) var(--space-lg);
    text-align: center;
    border-block: 1px solid var(--clr-gray-200);
}
.newsletter form {
    margin-block-start: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-width: 460px;
    margin-inline: auto;
}
.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)) {
    .newsletter form  { flex-direction: row; }
    .newsletter input { flex: 1; }
}

/* =========================================================
   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: #ffffff;
    color: var(--clr-gray-800);
    border-top: 1px solid var(--clr-gray-200);
}

/* ───────── 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);
}

/* 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-gray-200);
    padding: var(--space-xl) var(--space-lg);
    border-radius: 6px;
}

.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;
}

/* 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 {
    border-top: 1px solid var(--clr-gray-200);
    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: var(--clr-gray-800);
    text-decoration: none;
    font-weight: var(--font-weight-bold);
    font-size: 0.875rem;
}

.footer-nav a:hover,
.footer-nav a:focus {
    color: var(--clr-primary);
    text-decoration: underline;
}

/* ───────── Responsive tweaks ───────── */
@media (min-width: var(--bp-md)) {
    .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;
}

/* 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); }
.social-links li { margin: 0; }

/* copyright */
.footer-meta .copyright {
	font-size: 0.75rem;
	color: var(--clr-gray-400);
	white-space: nowrap;
}

/* legal links */
.legal-nav { display: flex; gap: var(--space-2xs); font-size: 0.75rem; color: var(--clr-gray-400); }
.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 {
	list-style: none;                    /* kill bullets */
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	/* gap: var(--space-lg); */
    flex-direction: column;
    align-items: flex-start;
}

/* keep menu text aligned right on wrap */
.footer-menu li { margin: 0; }

/* =========================================================
   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 */
}

/* 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); }

/* =========================================================
   PAGINATION
   ========================================================= */
.pagination{ display:flex; gap:var(--space-xs); flex-wrap:wrap; }

.pagination .page-numbers{
	padding:var(--space-xs) var(--space-sm);
	border:1px solid var(--clr-gray-200);
	border-radius:4px;
	text-decoration:none;
	color:var(--clr-gray-800);
	font-size:0.875rem;
}

.pagination .page-numbers:hover,
.pagination .page-numbers:focus{
	background:var(--clr-primary-light);
	border-color:var(--clr-primary-light);
	color:#fff;
}

.pagination .current{
	background:var(--clr-primary);
	border-color:var(--clr-primary);
	color:#fff;
	font-weight:700;
	pointer-events:none;
}