/*
Theme Name: WINGS
Theme URI: https://wingsweb.org
Author: Theme Tailor
Author URI: https://themetailor.co.za
Description: WINGS — Elevating Philanthropy. A standalone WordPress theme with the WINGS design system: branded header/footer, animated hero, and the members / blog / events directories as a shared card-grid layout.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wings
*/

/* ===============================================================
   WINGS — shared stylesheet
   Used by every page (mapping-philanthropy-support-ecosystems.html,
   our-work.html, ...). Page-specific blocks are grouped and labelled.
   =============================================================== */
:root { 
  /* --plum:#46152C; /* single brand plum */ 
  --plum:#0F9EBD; 
  --cyan:#0F9EBD; 
  --ink:#000; 
  --grey:#000;
  --white: #FFF; 

   --yellow:#EFB935; 
   --green:#57B08E; 
   --red:#DB5D65; 
  --line:#d9d2d4; 
  --serif:"EB Garamond", Georgia, serif; 
  --sans:"Helvetica Neue", Helvetica, Arial, sans-serif; 
  --wrap:1180px; 
  --wrap-header:80rem; /* header/nav width from Figma (80rem = 1280px) */ 
  --pad:clamp(20px, 5vw, 64px); 
  --hero-img:url("img/wings-header.png"); 
  --hero-blur:url("img/blur.png"); 
  --hero-grid:url("img/grid.png"); 
  --band-related:url("img/bg-explore.png");
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }

/* Scroll-snap #page's direct children (header, hero, entry/dir-page,
   etc. -- whatever a given template puts there) as the page scrolls.
   scroll-snap-type has to live on the actual scrolling box, which here
   is the document (html), not #page itself -- #page is a plain block
   with no overflow/height of its own, so setting it there wouldn't
   snap anything. "proximity" (not "mandatory") only snaps when a
   scroll comes to rest near a boundary, so normal free scrolling and
   reading long content isn't fought at every section edge; switch to
   "mandatory" for a firmer, home-page-style snap if you'd rather. */
html { scroll-snap-type: y proximity; }
#page > * { scroll-snap-align: start; }

body { margin:0; font-family:var(--sans); color:var(--ink); font-size:16px; line-height:1.6; background:#fff; -webkit-font-smoothing:antialiased; }
h1,h2,h3 { font-family:var(--serif); font-weight:600; margin:0; line-height:1.08; }
h1, h2 { font-size:clamp(2.6rem,6.2vw,68px); line-height:0.94; }
p { margin:0 0 1em; }
a { color:inherit; }
.wp-block-table thead { border: 1px solid #FFF; background: var(--white); color: var(--cyan); }
.wp-block-table thead th { border: 1px solid #FFF; border-bottom: 0; }
.wp-block-table thead th:first-child { border-right: 1px solid var(--cyan); }
.wrap { max-width:var(--wrap); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
:root :where(.wp-block-button.is-style-outline--1 .wp-block-button__link),
:root :where(.wp-block-button.is-style-outline--2 .wp-block-button__link),
:root :where(.wp-block-button.is-style-outline--3 .wp-block-button__link),
:root :where(.wp-block-button.is-style-outline--4 .wp-block-button__link),
:root :where(.wp-block-button.is-style-outline--5 .wp-block-button__link),
:root :where(.wp-block-button.is-style-outline--6 .wp-block-button__link),
:root :where(.wp-block-button.is-style-outline--7 .wp-block-button__link),
:root :where(.wp-block-button.is-style-outline--8 .wp-block-button__link),
:root :where(.wp-block-button.is-style-outline--9 .wp-block-button__link),
:root :where(.wp-block-button.is-style-outline--10 .wp-block-button__link)  { border-width: 1px!important; }

.wp-block-column.is-vertically-aligned-stretch { display:flex; flex-direction:column; }
.wp-block-column.is-vertically-aligned-stretch > .wp-block-buttons { margin-top:auto; }

.hide { display: none!important; }

.editor-styles-wrapper .hide {
    display: block !important;
}

/* placeholders (icons) ------------------------------------------- */
.icon-ph { width:48px; height:48px; border:1.5px solid currentColor; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:.5rem; letter-spacing:.05em; opacity:.8; margin:0 auto; text-transform:uppercase; }

/* logo ----------------------------------------------------------- */
.brand-logo { width: 230px; height: auto; display:block; }

/* header + footer sit on dark backgrounds, so render the logo white.
   If your PNG is already white, delete these two filter rules. */
.site-header .brand-logo { filter:brightness(0) invert(1); }
.site-footer .brand-logo { filter:brightness(0) invert(1); }

/* header --------------------------------------------------------- */
.site-header { position:absolute; top:0; left:0; right:0; z-index:40; padding:24px 0; color:#fff; }

/* WordPress admin bar (logged-in view only) — the header is
   position:absolute off the top of the page, so explicitly drop it
   below the admin bar's height instead of relying on the browser to
   shift it, so nothing overlaps while you're logged in. */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar .site-header { top: 46px; }
}
.site-header .wrap { max-width:var(--wrap-header); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav { display:flex; align-items:center; gap: 24px; font-size:12px; font-weight:500; letter-spacing:.05em; text-transform:capitalize; list-style: none; }
.nav a { text-decoration:none; opacity:.92; white-space:nowrap; position:relative; }
.nav a:hover { opacity:1; }
.nav a.is-active { opacity:1; }
.nav a.is-active::after { content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:currentColor; }
.nav .search { width:16px; height:16px; padding:0; background:none; border:1.5px solid currentColor; border-radius:50%; position:relative; display:inline-block; color:inherit; cursor:pointer; }
.nav .search::after { content:""; position:absolute; right:-4px; bottom:-3px; width:7px; height:1.5px; background:currentColor; transform:rotate(45deg); }
.nav .search:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.menu-toggle { display:none; background:none; border:0; color:#fff; font-size:1.6rem; line-height:1; cursor:pointer; }

/* nav dropdown -- 2nd + 3rd level --------------------------------
   wp_nav_menu() renders 'depth' => 3 (header.php /
   template-home-slides.php) through Wings_Walker_Nav_Menu, which
   adds a .submenu-toggle button to top-level items only, so the
   2nd-level list opens on touch/keyboard as well as hover -- kept
   for that, but drawn invisible (no chevron) per the no-background,
   white-text, fade-in-only treatment below. The 2nd-level list has
   no panel/box of its own -- just white text fading in over the
   page. The 3rd level always shows alongside its 2nd-level parent
   (no toggle of its own) -- indented, in-flow, below the parent item. */
.screen-reader-text { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.nav .menu-item-has-children { position:relative; }

/* The toggle button is taken out of flow entirely (position:absolute)
   instead of sitting in a CSS-grid column next to the link. A grid
   column -- even an empty, zero-width one -- still gets measured and
   can shift on state changes (e.g. once the submenu becomes
   measurable on hover), which is what was nudging these items out of
   line with their plain siblings and making them jump on hover. An
   absolutely-positioned button can never affect the size of the item
   that contains it, so the <a> alone sizes the <li>, exactly like
   every item without a dropdown. */
.nav .submenu-toggle { appearance:none; -webkit-appearance:none; background:none; border:0; color:inherit; cursor:pointer; position:absolute; right:0; top:50%; transform:translateY(-50%); width:0; height:18px; padding:0; }

.nav .sub-menu { list-style:none; margin:0; padding: 10px 0px 10px; position:absolute; top:100%; left:0; min-width:200px; background:none; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s ease, visibility 0s linear .25s; z-index:60; }
.nav .menu-item-has-children:hover > .sub-menu,
.nav .menu-item-has-children:focus-within > .sub-menu,
.nav .menu-item-has-children.submenu-open > .sub-menu { opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }

.nav .sub-menu li { position:relative; }
.nav .sub-menu a { display:block; padding: 0 0 8px 0; font-size:11px; text-transform:capitalize; white-space:nowrap; color:#fff; text-shadow:0 1px 5px rgba(0,0,0,.45); opacity:.86; transition:opacity .2s ease; }
.nav .sub-menu a:hover, .nav .sub-menu a:focus-visible { opacity:1; text-decoration:underline; text-underline-offset:3px; }

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

/* Only the TOP-level item's own dropdown ("the first sub menu") gets the
   staggered fade-in -- scoped with the > combinator so a 2nd-level item's
   :hover never re-triggers it for the (already-open, always-shown) 3rd
   level nested inside it. The explicit resting opacity:0 here is required:
   once this animation is removed (mouse leaves), a <li> with no other
   opacity rule reverts to the CSS default of 1 -- i.e. permanently stuck
   fully visible after the very first hover, so every hover after that
   flashed the items straight in at full brightness instead of fading. */
.nav > .menu-item-has-children > .sub-menu > li { opacity:0; }
.nav > .menu-item-has-children:hover > .sub-menu > li,
.nav > .menu-item-has-children:focus-within > .sub-menu > li,
.nav > .menu-item-has-children.submenu-open > .sub-menu > li { animation:navDropIn .25s ease both; }
.nav .sub-menu li:nth-child(1) { animation-delay:.02s; }
.nav .sub-menu li:nth-child(2) { animation-delay:.06s; }
.nav .sub-menu li:nth-child(3) { animation-delay:.10s; }
.nav .sub-menu li:nth-child(4) { animation-delay:.14s; }
.nav .sub-menu li:nth-child(n+5) { animation-delay:.18s; }
@keyframes navDropIn { from { opacity:0; } to { opacity:1; } }

/* 3rd level drops below its 2nd-level parent item, indented -- in-flow
   (not absolutely positioned), so it pushes the items below it down
   as it expands rather than flying out to the side. */
.nav .sub-menu .sub-menu { position:static; top:auto; left:auto; margin:4px 0 0; padding:0 0 0 16px; min-width:0; opacity:1; visibility:visible; pointer-events:auto; max-height:none; overflow:visible; }




/* search overlay ------------------------------------------------- */
.search-overlay { position:fixed; inset:0; z-index:60; background:rgba(15, 158, 189,.97); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .3s ease,visibility .3s ease; }
.search-overlay.open { opacity:1; visibility:visible; }
.search-box { width:min(680px,88vw); }
.search-box label { display:block; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:14px; }
.search-box input { width:100%; background:transparent; border:0; border-bottom:2px solid rgba(255,255,255,.5); color:#fff; font-family:var(--serif); font-size:clamp(1.8rem,5vw,2.6rem); font-weight:500; padding:12px 0; outline:none; }
.search-box input::placeholder { color:rgba(255,255,255,.45); }
.search-box input:focus { border-bottom-color:var(--cyan); }
.search-hint { color:rgba(255,255,255,.55); margin:16px 0 0; font-size:.85rem; }
.search-close { position:absolute; top:26px; right:32px; background:none; border:0; color:#fff; font-size:2.2rem; line-height:1; cursor:pointer; opacity:.8; }
.search-close:hover { opacity:1; }

.search .site-header { background: var(--plum); }
.search #page { padding-top: 8rem; color: var(--plum); }
.search .dir-page { max-width: 1100px; margin: 0 auto; }
.search h6 { color: var(--plum); font-size: .75rem; }a
.search h2 { padding-bottom: 3rem; color: var(--plum); }
.search h3 { font-size: 1.8rem; }
.search a { text-decoration: none; }
.search .dir-meta { text-transform: uppercase; font-size: .75rem; letter-spacing: .05em; padding-bottom: 10px; display: block; }
.search .search-card { max-width: 75%; display: block; margin-bottom: 25px; }
.search .search-card .end { border-bottom: 1px solid var(--plum); display: block; width: 220px;  padding-top: 25px; }


/* hero ----------------------------------------------------------- */
.hero { position:relative; color:#fff; padding:148px 0 76px; min-height: 800px; overflow:hidden; display:flex; align-items:center; height: 100vh; }
.hero__bg { position:absolute; inset:0; z-index:0; background:var(--hero-img) center right/cover no-repeat; background-color:#2a3138; }
.hero__blur { position:absolute; inset:0; z-index:2; /* background: radial-gradient(50% 50% at 50% 50%, rgba(70, 21, 44, 0.40) 24.04%, rgba(70, 21, 44, 0.90) 100%); */   background: radial-gradient(50% 50% at 50% 50%, rgba(2, 124, 151, 0.30) 24.04%, rgba(2, 124, 151, 1) 100%); mix-blend-mode: multiply; }
.hero::after { content:""; position:absolute; inset:0; z-index:2; /* background:linear-gradient(90deg,rgba(15, 158, 189,.94) 0%,rgba(15, 158, 189,.78) 42%,rgba(15, 158, 189,.42) 68%,rgba(15, 158, 189,.12) 100%); */ }

/* grid.png overlay — starts scrunched on the right, expands to full width */
.hero__grid { position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.1; background:var(--hero-grid) center/cover no-repeat; transform-origin:right center; transform:scaleX(.12); animation:heroGridExpand 1.4s cubic-bezier(.19,1,.22,1) .25s both; }

/* World map accent — Our Global Network hero only (see hero/render.php,
   is_page('our-global-network')). Plain map.svg, sized larger than the
   visible frame and pushed off the hero's right edge, so — like the
   homepage slide 7's HALF state — only part of the map itself is
   actually showing (the rest is clipped by .hero's own
   overflow:hidden), rather than the whole map scaled down to fit.
   It only slides in on the visitor's first scroll attempt, which
   also pins the page until the reveal finishes (see wings-theme.js).
   aspect-ratio matches map.svg's own viewBox (5088x2292) so this box
   has a real height immediately, before the image has even loaded —
   without it the browser never resolves a size for the (non-lazy)
   image and things can end up stuck invisible. Deliberately NOT the
   homepage's interactive HALF/FULL region map, just the slide-in. */
.hero__map {
    position: absolute;
    top: 56%;
    right: -15%;
    width: 76%;
    aspect-ratio: 5088 / 2292;
    transform: translate(30%,-50%);
    opacity: 0;
    z-index: 3;
    pointer-events: none;
    transition: transform 1.1s cubic-bezier(.19,1,.22,1), opacity 1.1s ease;
}
.hero__map.in-view { transform: translate(0,-50%); opacity: 1; }
.hero__map img { width:100%; height:auto; display:block; }

#reset_filters,
#apply_filters { background: var(--white); color: var(--plum); }

@media (max-width: 860px) {
    .hero__map { display:none; }
}
@keyframes heroGridExpand { from { transform:scaleX(.12); opacity:.4; } to { transform:scaleX(1); opacity:1; } }
.hero .wrap { position:relative; z-index:4; width:100%; max-width:var(--wrap-header); }
.breadcrumb,.eyebrow { font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; opacity:1; margin-bottom: 26px; max-width: fit-content; display:block; padding-right: 50px; }
h6, .eyebrow { font-size: 0.75rem; padding-right: 50px; font-weight: 400; padding-bottom: 4px; border-bottom: 1px solid; width: fit-content; }
h6 a, .eyebrow a { text-decoration: none; }

/* Pre-header: small kicker label shown above a block's main heading
   (Band, Explore Related, Testimonial Carousel, Video blocks). Same
   look as .eyebrow, kept separate so it isn't tied to the hero's
   breadcrumb-specific rules. */
.pre-header { background: var(--white); color: var(--plum)!important; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:400; margin-bottom:16px; max-width:fit-content; padding: 0px 10px; }

.hero h1 { font-size:clamp(2.6rem,6.2vw,68px); line-height:0.94; font-weight:600; letter-spacing:0;   -webkit-line-clamp: 2; margin-bottom:30px; }
.hero__lead { max-width: 770px; }
.hero__lead .kicker { font-weight:700; font-size:1.02rem; margin-bottom:1em; display:block; }
.hero__lead p { font-size:16px; line-height:1.31; font-weight:400; opacity:.94; }

/* hero entrance — staggered fade-up on load */
@keyframes wingsUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
.hero .breadcrumb, .hero .eyebrow { animation:wingsUp .75s ease .15s both; }
.hero h1 { animation:wingsUp .9s cubic-bezier(.19,1,.22,1) .3s both; }
.hero__lead p { animation:wingsUp .8s ease both; }
.hero__lead p:nth-of-type(1) { animation-delay:.5s; }
.hero__lead p:nth-of-type(2) { animation-delay:.66s; }
.hero__lead p:nth-of-type(3) { animation-delay:.82s; }

/* generic band spacing ------------------------------------------ */
.band { padding:clamp( 40px, 8vw, 40px) 0; }

/* SPLIT / ARROW sections (mapping page) -------------------------- */
.split { position:relative; overflow:hidden; }
.split__media { position:absolute; inset:0; z-index:0;  }
.split__media::before { content:""; position:absolute; inset:0;  }
.split__media::after { content:""; position:absolute; inset:0; background:var(--hero-grid) center/cover no-repeat; opacity:1; transform-origin:right center; transform:scaleX(1); }
.split.in-view .split__media::after { animation:heroGridExpand 1.4s cubic-bezier(.19,1,.22,1) .25s both; }
/* The arrow shape used to be a CSS clip-path polygon; it's now the
   actual arrow.png / arrow-plum.png artwork (930x691) supplied by the
   client. Using it as a background-image (previous attempt) was wrong:
   a background-image paints OVER a background-color, so the artwork's
   transparent "cut" just revealed the solid colour sitting behind it,
   not the .split__media photo behind the whole panel -- which is why
   it looked like one solid white block with no point.
   mask-image is the fix: it works like clip-path did, using the PNG's
   alpha channel to decide where the *element itself* (its background
   AND its content) renders at all. Wherever the artwork is transparent
   the panel becomes see-through there too, correctly showing the photo
   through the point -- the colour still comes from background-color,
   same as before. mask-size:auto 100% keeps the artwork's own
   proportions (never stretched/distorted) and locks it -- and so the
   panel -- to a fixed 691px height, anchored to the right where the
   point sits. */
.split__panel {
    position:relative; z-index:1; width: 78.5%; min-height:691px;
    display:flex; align-items:center;
    background-color:#fff;
    -webkit-mask-image:url('img/arrow.png'); mask-image:url('img/arrow.png');
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:right center; mask-position:right center;
    -webkit-mask-size:auto 100%; mask-size:auto 100%;
    padding: clamp(80px,7vw,80px) 0;
    transform:translateX(-67%);
    transition:transform 1.5s cubic-bezier(.19,1,.22,1);
    will-change:transform;
}
.split.in-view .split__panel { transform:translateX(0); }
.split__content { padding-left:var(--pad); padding-right: 195px; /* clear of the arrow tip */ opacity:0; transform:translateX(-24px); transition:opacity .8s ease .7s, transform .8s ease .7s; }
.split.in-view .split__content { opacity:1; transform:none; }
.split h2 { color:var(--plum); margin-bottom:26px; }
.split p { color:var(--plum); font-family: Helvetica Neue; font-weight: 400; font-size: 17px; line-height: 22px; }
.split ul.chev li { color:var(--plum); font-family: Helvetica Neue; font-weight: 400; font-size: 17px; line-height: 22px; margin-bottom: 0; }

/* Plum background / white text variant (toggle on the WINGS Split block) */
.split--plum .split__panel {
    background-color:var(--plum);
    -webkit-mask-image:url('img/arrow-plum.png'); mask-image:url('img/arrow-plum.png');
}
.split--plum h2 { color:var(--white); }
.split--plum p { color:var(--white); }
.split--plum ul.chev li { color:var(--white); }

.cover-arrow { padding: 0!important; }


@media(min-width:1180px) {
  .split__content { padding-left:calc((100vw - var(--wrap))/2 + var(--pad)); }
}

/* chevron bullet list ------------------------------------------- */
ul.chev { list-style:none; margin:0 0 1.2em; padding:0; }
ul.chev li { position:relative; padding-left:22px;  color:var(--plum); }
ul.chev li::before { content:"\25B8"; position:absolute; left:0; top:0; color:currentColor; }
.split__content ul li { font-family:var(--sans); font-weight:400; font-size:17px; line-height:22px; letter-spacing:0; }
.sub { font-weight:600; color:var(--ink); margin-bottom:.4em; }

/* Centered chevron lists -- the default bullet above is an absolutely
   positioned ::before pinned to the *li's own left edge*, which is
   what breaks center-alignment: text-align:center only re-centers the
   text inside the (still full-width) li, so the bullet stays stuck on
   the far left instead of following it.
   The List block has no built-in "align text center" toolbar button
   (only Paragraph/Heading get that), so this is triggered by a class
   you add yourself: select the list, open Block settings > Advanced >
   "Additional CSS class(es)", and type "is-centered-list" (also
   supports .has-text-align-center, in case a future/alternate editor
   path ever does add it that way). That switches the bullet from
   absolute positioning to a real flex item sitting right next to its
   own text, and stacks/centers each bullet+text pair as its own line
   -- so centering finally works without losing the chevron styling. */
ul.chev.is-centered-list, ul.chev.has-text-align-center,
.split__content ul.is-centered-list, .split__content ul.has-text-align-center {
    display:flex;
    flex-direction:column;
    align-items:center;
}
ul.chev.is-centered-list li, ul.chev.has-text-align-center li,
.split__content ul.is-centered-list li, .split__content ul.has-text-align-center li {
    display:inline-flex;
    align-items:flex-start;
    gap:8px;
    padding-left:0;
    text-align:left;
}
ul.chev.is-centered-list li::before, ul.chev.has-text-align-center li::before,
.split__content ul.is-centered-list li::before, .split__content ul.has-text-align-center li::before {
    position:static;
    flex:0 0 auto;
    margin-top:.15em;
}

/* CYAN band ------------------------------------------------------ */
.band--cyan { background:var(--cyan); color:#fff; text-align:center; }
.band--cyan h2 { margin-bottom:26px; }
.band--cyan p { max-width: 1100px; margin:0 auto .8em; font-size:1.02rem; }
.band--cyan .accent { font-weight:700; }

/* PLUM band ---------------------------------------------------- */
.band--plum { background:var(--plum); color:#efe4e7; text-align:center; }
.band--plum h2 { color:#fff; margin-bottom:28px; }
.band--plum p { max-width:760px; margin:0 auto 1em; color:#e4d5d9; }
.feature-row { display:flex; gap:36px; justify-content:center; flex-wrap:wrap; max-width:820px; margin:40px auto 44px; }
.feature { flex:1 1 150px; max-width:190px; color:#fff; }
.feature .icon-ph { color:#e9c9d2; margin-bottom:16px; }
.feature h3 { font-family:var(--sans); font-weight:700; font-size:.95rem; margin-bottom:8px; }
.feature p { font-size:.85rem; color:#dcc8ce; margin:0; }
.includes { max-width:560px; margin:6px auto 0; text-align:left; }
.includes ul.chev li { color:#e4d5d9; }
.btn { display:inline-block; margin-top:14px; border:1px solid #FFF; color:#fff; text-decoration:none; padding:13px 26px; font-size:.82rem; letter-spacing:.06em; background:transparent; transition:background-color .35s ease, color .35s ease, transform .35s ease, box-shadow .35s ease; cursor:pointer; }
.btn:hover { background:#fff; color:var(--plum); transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.18); }

/* bottom icon row in "what this looks like" --------------------- */
.initiative-row { display:flex; gap:40px; flex-wrap:wrap; margin-top:34px; }
.initiative { flex:1 1 150px; max-width:210px; }
.initiative .icon-ph { margin:0 0 14px; color:var(--plum); }
.initiative h3 { font-family:var(--sans); font-weight:700; font-size:.92rem; color:var(--plum); margin-bottom:4px; }
.initiative p { font-size:.82rem; color:var(--grey); margin:0; }

/* ===============================================================
   CARDS — shared layout for Our Work (.work-card) + mapping (.card / .rel-card)
   Identical structure & behaviour; only the colour context differs.
   =============================================================== */
.work-card, .card, .rel-card { display:flex; flex-direction:column; text-align:center; text-decoration:none; color:inherit; cursor:pointer; border:1px solid; transition:background-color .25s ease, border-color .25s ease; }
.card-head { display:flex; flex-direction:column; align-items: center; justify-content:center; }                 /* heading zone — equal height per row set in wings.js */
.card-head .pre-header { margin-bottom:8px; }
.card-head h3 { margin:0; font-size:27px; font-weight:500; line-height:1.055; margin-bottom: 16px; }
.work-card > p, .card > p, .rel-card > p { font-size:13px; font-weight:400; line-height:1.4; margin:16px 0; }
.card-foot { margin-top:auto; padding-top:15px; border-top:1px solid; }                     /* line + link pinned to the bottom */
.card-link { display:block; font-size:13px; font-weight:400; line-height:1.15; letter-spacing:.05em; text-transform:uppercase; text-decoration:none; }
.card-head h3, .work-card > p, .card > p, .rel-card > p, .card-link, .card-foot { transition:color .25s ease, border-color .25s ease; }

/* CONNECT + RELATED cards (mapping page) — white ink, hover fills white */
.card-row { display:flex; gap: 50px; justify-content:center; flex-wrap:wrap;  margin:40px auto 0; }
.card { flex:1 1 280px; max-width:280px; border-color:#fff; padding:34px 34px 28px; }
.rel-card { flex:0 0 256px; width:256px; border-color:#fff; padding:40px 25px 15px; }
/* Related cards always stay on one line, centered, even past however many
   fit the row's width -- scoped with :has() so the shared .card-row/.card
   (Connect cards) styling elsewhere is untouched. */
.card-row:has(.rel-card) { flex-wrap:nowrap; overflow-x:auto; gap:45px; justify-content:safe center; }
/* ...except once there are 5 or more: instead of scrolling off-screen on
   one line, wrap so the first line always holds exactly 3, remainder
   (2, 3, 4...) falling to line two+. Capping max-width at exactly 3
   cards' width is what forces the wrap after 3 -- and staying flex
   (not grid) is what keeps a short last line (e.g. 2 cards) centered
   under the line above it rather than stuck left under columns 1-2.
   :nth-child(5) detects "a 5th card exists" without needing to know
   the total count. */
.card-row:has(.rel-card:nth-child(5)) {
    flex-wrap:wrap;
    overflow-x:visible;
    justify-content:center;
    max-width:858px; /* 3 x 256px cards + 2 x 45px gaps */
}
@media(max-width:900px) {
    .card-row:has(.rel-card:nth-child(5)) { max-width:557px; } /* 2 per line */
}
@media(max-width:600px) {
    .card-row:has(.rel-card:nth-child(5)) { max-width:256px; } /* 1 per line */
}
.card .card-head h3, .rel-card .card-head h3, .card .card-head .pre-header, .rel-card .card-head .pre-header, .card > p, .rel-card > p, .card .card-link, .rel-card .card-link { color:#fff; }
.card .card-foot, .rel-card .card-foot { border-top-color:#fff; }
.card:hover, .rel-card:hover { background:#fff; border-color:#fff; }
.card:hover .card-head h3, .rel-card:hover .card-head h3, .card:hover .card-head .pre-header, .rel-card:hover .card-head .pre-header, .card:hover > p, .rel-card:hover > p, .card:hover .card-link, .rel-card:hover .card-link { color:var(--plum); }
.card:hover .card-foot, .rel-card:hover .card-foot { border-top-color:rgba(15, 158, 189,.3); }

/* RELATED initiatives band (mapping page) ----------------------- */
.band--related { position:relative; text-align:center; color:#fff; overflow:hidden; }
.band--related .rel-bg { position:absolute; inset:0; z-index:0; background:var(--band-related) center/cover no-repeat; background-color: var(--plum); }
.band--related .wrap { position:relative; z-index: 2; max-width: none; }
.band--related h2 { color:#fff; margin-bottom:40px; }
/* WINGS Page Cards reuses .band--related/.wrap/.card-row/.rel-card for layout
   (same sizing, spacing, wrap/scroll behaviour) but recolours the cards for a
   white page background -- plum ink, hover fills plum (same treatment as the
   Our Work cards, .work-card, above). */
.band--page-cards .rel-card { border-color:var(--plum); background:#fff; position:relative; }
/* The shared .card-head h3 rule carries a trailing margin-bottom (needed
   for spacing before Explore Related's always-present excerpt). Inside
   .card-head's own centered flex box that trailing margin isn't visible
   weight, so once wings.js equalises .card-head heights across a row of
   Page Cards (whose titles vary a lot more per item), the heading reads
   off-centre in the taller boxes. Removing it here centres the heading
   correctly; .rel-card__excerpt's own top margin (or .card-foot's
   margin-top:auto when there's no excerpt) still supplies the gap below. */
.band--page-cards .rel-card .card-head h3 { margin-bottom:0; }
.band--page-cards .rel-card .card-head h3,
.band--page-cards .rel-card > p,
.band--page-cards .rel-card__excerpt,
.band--page-cards .rel-card .card-link { color:var(--plum); }
.band--page-cards .rel-card .card-foot { border-top-color:var(--plum); margin-top:25px; }
.band--page-cards .rel-card:hover { background:var(--plum); border-color:var(--plum); }
.band--page-cards .rel-card:hover .card-head h3,
.band--page-cards .rel-card:hover > p,
.band--page-cards .rel-card:hover .rel-card__excerpt,
.band--page-cards .rel-card:hover .card-link { color:#fff; }
.band--page-cards .rel-card:hover .card-foot { border-top-color:#fff; }

/* Page Cards -- optional image on top (falls back to the linked page's
   featured image), reusing the same image treatment as .wings-card. */
.rel-card--has-image { padding:0; overflow:hidden; }
.rel-card__content { display:flex; flex-direction:column; flex:1; }
.rel-card--has-image .rel-card__content { padding:25px 20px 15px; }

/* Page Cards -- the excerpt/text is always visible, sitting between the
   title and the link. Carries its own copy of the shared .rel-card > p
   text treatment since it's nested in .rel-card__content, not a direct
   child of .rel-card. */
.rel-card__excerpt { font-size:13px; font-weight:400; line-height:1.4; margin:16px 0; transition:color .25s ease; }

/* Page Cards -- optional "Hover text": when set for an item, hovering (or
   keyboard-focusing) the card covers the WHOLE card -- image included --
   with a solid plum overlay showing only that text. Same full-cover
   mechanism as .wings-card__hover elsewhere in this file. Cards with no
   hover text just get the normal .rel-card:hover colour-change above,
   with everything staying visible. */
.rel-card__hover {
    position:absolute; inset:0; z-index:2;
    display:flex; align-items:center; justify-content:center;
    padding:40px 25px; background:var(--plum);
    opacity:0; pointer-events:none; transition:opacity .3s ease;
    text-align:center;
}
.rel-card__hover p { color:#fff; margin:0; font-size:14px; line-height:1.5; }
.rel-card:hover .rel-card__hover,
.rel-card:focus-within .rel-card__hover { opacity:1; }

/* OUTLINE BUTTON — plum border/text, for use on light backgrounds
   (mirrors .btn's white-on-dark, inverted for white sections) ---- */
.btn-outline { display:inline-block; border:1px solid var(--plum); color:var(--plum); text-decoration:none; padding:13px 26px; font-size:.82rem; letter-spacing:.06em; background:transparent; transition:background-color .35s ease, color .35s ease, transform .35s ease, box-shadow .35s ease; cursor:pointer; }
.btn-outline:hover { background:var(--plum); color:#fff; transform:translateY(-2px); box-shadow:0 8px 20px rgba(15, 158, 189,.2); }
.btn-row { display:flex; gap:14px; flex-wrap:wrap; margin-top:24px; }
.btn-row--center { justify-content:center; }

/* Gutenberg core Button block — had no hover at all. Same gentle
   lift as the theme's own buttons; a solid-fill button darkens
   slightly (works with any editor-chosen colour), an Outline-style
   button fills plum + white text on hover, matching .btn-outline. */
.wp-block-button__link {
    transition:background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease, filter .3s ease; box-sizing: border-box;
}
.wp-block-button__link:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,.15);
    filter:brightness(.92);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    /* !important: WordPress core marks its own palette utility classes
       (.has-<slug>-color / .has-<slug>-background-color) !important so an
       editor's chosen block colour always wins over theme/container CSS.
       A real outline-style Button using a theme palette colour/border
       (the normal case here) would otherwise never show this hover. */
    background-color:var(--white) !important;
    color: var(--plum)!important;
    border-color:var(--white) !important;
    filter:none;
}

/* LEFT-ALIGNED band variant (e.g. "Why the WEBAs exist") -------- */
.band--left { text-align:left; }
.band--left .wrap { margin-left:0; }
.band--left p { margin-left:0; max-width:760px; }

/* JURY cards (WEBAs page) — photo + name + role, on a plum band - */
.jury-row { display:flex; gap:24px; justify-content:center; flex-wrap:wrap; max-width:1180px; margin:40px auto 0; }
.jury-card { flex:1 1 220px; max-width:268px; background:#fff; text-align:center; }
.jury-card .card-media { width:100%; aspect-ratio:266/285; background:#a38a96; }
.jury-card .jury-name { font-family:var(--serif); font-weight:600; font-size:20px; color:var(--plum); margin:18px 0 6px; }
.jury-card .jury-role { font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--plum); opacity:.7; padding:0 16px 20px; }

/* TESTIMONIAL carousel (membership page) --------------------------- */
.testimonial-carousel { max-width:720px; margin:0 auto; }
.testimonial-track {
    display:grid;
    position:relative;
    align-items:stretch;
}
/* Keep every slide in the same grid cell so the row takes the height of the tallest slide. */
.testimonial {
    grid-area:1 / 1;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    max-width:720px;
    width:100%;
    min-width:0;
    margin:0 auto;
    padding:0 0 50px 0;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:relative;
}
.testimonial.is-active { visibility:visible; opacity:1; pointer-events:auto; animation:wingsFadeIn .45s ease; }
.testimonial p { color:var(--plum); font-size:17px; line-height:23px; margin-bottom: 0; }
.testimonial .org { position:absolute; left:0; right:0; bottom:0; margin:0; font-weight:700; }
.testimonial-dots { display:flex; gap:4px; justify-content:center; margin-top:20px; }
.testimonial-dots button { display:block; width:32px; height:8px; padding:0; border:1px solid var(--plum); background:#fff; cursor:pointer; }
.testimonial-dots button.is-active { background:var(--plum); }
@keyframes wingsFadeIn { from { opacity:0; } to { opacity:1; } }

/* NOMINEE cards (WEBAs page) — logo + org + blurb, plum-on-white  */
.nominee-row { display:flex; gap:24px; justify-content:center; flex-wrap:wrap; max-width:1180px; margin:40px auto 0; }
.nominee-card { flex:1 1 220px; max-width:268px; border:1px solid var(--plum); background:#fff; padding:16px 16px 22px; text-align:center; }
.nominee-card .card-media { width:100%; height:110px; background:#c9b7a6; margin-bottom:16px; }
.nominee-card h3 { font-family:var(--serif); font-weight:500; font-size:20px; color:var(--plum); margin-bottom:12px; line-height:1.2; }
.nominee-card p { font-size:13px; color:var(--plum); line-height:1.3; margin:0; }

/* ===============================================================
   OUR WORK page
   =============================================================== */
.areas { background:#fff; text-align:center; padding: clamp(64px,9vw,64px) 0  ; }
.areas h2 { color:var(--plum); line-height:0.94; font-weight:600; text-align:center; max-width: 90%; margin:0 auto; }
.areas-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:1080px; margin:clamp(40px,6vw,72px) auto 0; }
/* Our Work cards (.work-card) — plum ink on white, hover fills plum */
.work-card { border-color:var(--plum); background:#fff; padding: 44px 32px 18px; }
.work-card .card-head h3, .work-card > p, .work-card .card-link { color:var(--plum); }
.work-card .card-foot { border-top-color:var(--plum); }
.work-card:hover { background:var(--plum); border-color:var(--plum); }
.work-card:hover .card-head h3, .work-card:hover > p, .work-card:hover .card-link { color:#fff; }
.work-card:hover .card-foot { border-top-color:#fff; }
.work-card > p { margin-bottom: 15px; }

/* ===============================================================
   FOOTER (shared)
   =============================================================== */
.site-footer { background:var(--plum); color:#FFF; padding:56px 0 40px; font-size:.82rem; }
.footer-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:36px; align-items:start; }
.footer-grid h4 { font-family:var(--sans); font-size:13px; font-weight:400; line-height:1.21; letter-spacing:.05em; text-transform:uppercase; color:#fff; margin:0 0 16px; padding-bottom:8px; border-bottom:1px solid #FFF; }
.footer-grid p { font-size:13px; font-weight:400; line-height:1.21; letter-spacing:.013em; }
.footer-grid ul { list-style:none; margin:0; padding:0; }
.footer-grid ul li { margin-bottom:8px; position:relative; padding-left:16px; font-size:13px; line-height:20px; letter-spacing:.013em; }
.footer-grid ul li::before { content:"\25B8"; position:absolute; left:0; color:#c79aa8; font-size:.7em; top:3px; }
.footer-grid a { text-decoration:none; color:#FFF; }
.footer-grid a:hover { opacity: .7; }
.footer-logo { margin-bottom:8px; }

.social { display:flex; gap:16px; margin-top:6px; }
.social a { display:flex; align-items:center; justify-content:center; background:#fff; color: var(--plum); text-decoration:none; transition:opacity .2s; width: 28px; height: 28px; border-radius: 4px; }
.social a svg { width:22px; height:22px; fill:currentColor; display:block; }
.social a:hover { background: var(--plum); }
.social a:hover svg { fill:  #FFF; }
.foot-btns { display:flex; flex-direction:column; gap:10px; }
.foot-btns a { border:1px solid #FFF; padding:10px 14px; text-align:center; text-decoration:none; color:#fff; font-size:.8rem; }
.foot-btns a:hover { background: #FFF; color: var(--plum); }

/* ===============================================================
   ENTRANCE / SCROLL REVEAL
   =============================================================== */
html.js .reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .8s cubic-bezier(.19,1,.22,1), background-color .25s ease, border-color .25s ease, color .25s ease; }
html.js .reveal.is-in { opacity:1; transform:none; }

/* ===============================================================
   RESPONSIVE
   =============================================================== */
@media(max-width:940px) {
  .areas-grid { grid-template-columns:1fr; max-width:520px; gap:20px; }
}
@media(max-width:860px) {
  .nav { position:absolute; top:100%; right:var(--pad); left:var(--pad); flex-direction:column; align-items:flex-start; gap:18px; background:var(--plum); padding:22px; border-radius:4px; display:none; box-shadow:0 20px 40px rgba(0,0,0,.3); }
  .nav.open { display:flex; }
  .nav .search { display:none; }
  .menu-toggle { display:block; }
  .nav > .menu-item-has-children { width:100%; }
  .nav .sub-menu { position:static; opacity:1; visibility:visible; pointer-events:auto; background:none; min-width:0; margin:8px 0 0; padding:0 0 0 14px; max-height:0; overflow:hidden; transition:max-height .35s cubic-bezier(.19,1,.22,1), padding .35s ease; }
  .nav .menu-item-has-children.submenu-open > .sub-menu { max-height:1000px; padding-top:8px; padding-bottom:4px; }
  .nav .sub-menu .sub-menu { max-height:none; overflow:visible; }
  .nav .sub-menu a { padding:8px 6px; }
  .split { display:flex; flex-direction:column; }
  .split__media { position:relative; height:240px; order:2; }
  .split__panel { width:100%; height:auto; -webkit-mask-image:none; mask-image:none; transform:translateY(30px); opacity:0; order:1; padding:48px 0; transition:transform .8s ease, opacity .8s ease; }
  .split.in-view .split__panel { transform:none; opacity:1; }
  .split__content { padding-right:var(--pad); padding-left:var(--pad); transition-delay:.15s; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:28px; }
}
@media(max-width:520px) {
  .footer-grid { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) {
  .nav .sub-menu, .nav .sub-menu li { transition:none !important; animation:none !important; }
  .split__panel,.split__content { transition:none !important; transform:none !important; opacity:1 !important; }
  .hero__grid { animation:none; transform:none; opacity:.22; }
  .split__media::after { animation:none !important; transform:none !important; }
  .hero .breadcrumb,.hero .eyebrow,.hero h1,.hero__lead p { animation:none !important; opacity:1 !important; transform:none !important; }
  .hero__map { transition:none !important; transform:translate(0,-50%) !important; opacity:1 !important; }
  html.js .reveal { opacity:1 !important; transform:none !important; }
  html { scroll-behavior:auto; }
}

/* ===============================================================
   WORDPRESS NAV MENU (wp_nav_menu output in the header)
   =============================================================== */
.site-header .main-navigation .menu { list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:28px; }
.site-header .main-navigation .menu li { margin:0; padding:0; position:relative; }
.site-header .main-navigation .menu a { color:#fff; text-decoration:none; font-size:12px; font-weight:500; letter-spacing:.05em; text-transform:capitalize; opacity:.92; white-space:nowrap; }
.site-header .main-navigation .menu a:hover { opacity:1; }
.site-header .main-navigation .menu .current-menu-item > a,
.site-header .main-navigation .menu .current-page-ancestor > a,
.site-header .main-navigation .menu .current_page_item > a { opacity:1; }
.site-header .main-navigation .menu .current-menu-item > a::after,
.site-header .main-navigation .menu .current-page-ancestor > a::after { content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:currentColor; }
.header-search { width:16px; height:16px; padding:0; background:none; border:1.5px solid #fff; border-radius:50%; position:relative; cursor:pointer; flex:0 0 auto; }
.header-search::after { content:""; position:absolute; right:-4px; bottom:-3px; width:7px; height:1.5px; background:#fff; transform:rotate(45deg); }
#showmobi { display:none; color:#fff; font-size:1.5rem; cursor:pointer; }

/* ===============================================================
   ARCHIVE HERO (no featured image -> solid plum fallback)
   =============================================================== */
.hero--plum .hero__bg { background-color:var(--plum); }
.hero__stats { margin-top:6px; }
.hero__stats .stat { display:block; font-family:var(--serif); font-weight:600; font-size:clamp(2.1rem,5vw,58px); line-height:1.08; letter-spacing:0; }

/* ===============================================================
   LISTING / DIRECTORY  (members · blog · events archives)
   =============================================================== */
.dir-page { background:#fff; padding-bottom:clamp(56px,8vw,100px); }

/* centred section intro ("Connect with the global community") */
.dir-intro { text-align:center; padding:clamp(48px,7vw,90px) var(--pad) 0; }
.dir-intro h2 { color:var(--plum); max-width:18ch; margin:0 auto; }
.dir-note { color:#c0392b; font-size:.85rem; margin:12px auto 0; max-width:64ch; } /* designer note — delete for production */

/* filter toolbar — restyles the Search & Filter plugin output into a row */
.dir-toolbar { max-width:var(--wrap); margin:32px auto 0; padding:0; }
.dir-toolbar .searchandfilter > ul { list-style:none; margin:0; padding:0; display:flex; gap:16px; flex-wrap:wrap; align-items:stretch; }
.dir-toolbar .searchandfilter > ul > li { flex:1 1 180px; margin:0; padding:0; }
.dir-toolbar .searchandfilter h4 { display:none; }
.dir-toolbar .searchandfilter label { display:block; margin:0; }
.dir-toolbar .sf-input-select,
.dir-toolbar .sf-input-text { width:100%; box-sizing:border-box; border:1px solid var(--plum); background:#fff; color:var(--plum); font-family:var(--sans); font-size:14px; line-height:1; padding:15px 40px 15px 18px; border-radius:2px; -webkit-appearance:none; appearance:none; }
.dir-toolbar .sf-input-text { padding-right:18px; }
.dir-toolbar .sf-input-text::placeholder { color:var(--plum); opacity:.7; }
.dir-toolbar .sf-input-select { cursor:pointer; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%2346152C' stroke-width='1.6' d='M1 1.5l5 5 5-5'/></svg>"); background-repeat:no-repeat; background-position:right 16px center; }
.dir-toolbar .sf-field-submit { flex:0 0 auto; }
.dir-toolbar .sf-field-submit input { height:100%; border:1px solid var(--plum); background:var(--plum); color:#fff; padding:0 26px; font-size:13px; letter-spacing:.05em; text-transform:uppercase; cursor:pointer; border-radius:2px; transition:background-color .3s ease, color .3s ease, transform .3s ease; }
.dir-toolbar .sf-field-submit input:hover { background:#fff; color:var(--plum); transform:translateY(-1px); }
.dir-toolbar .sf-field-reset { flex:0 0 auto; display:flex; align-items:center; }
.dir-toolbar .sf-field-reset a { color:var(--plum); font-size:12px; letter-spacing:.05em; text-transform:uppercase; text-decoration:none; opacity:.75; }
.dir-toolbar .sf-field-reset a:hover { opacity:1; }
.dir-count { max-width:var(--wrap); margin:18px auto 0; padding:0 var(--pad); font-size:13px; color:var(--plum); opacity:.75; }

.page-id-8870 .map-filters { max-width: auto; display: flex; }
.page-id-8870 .dir-toolbar--map { display: flex; gap: 30px; }
.page-id-8870 .dir-toolbar--map .map-filter { flex: 1; }

.wpgmza_infowindow_link { display: none!important; }

/* card grid */
.dir-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; max-width:var(--wrap); margin:26px auto 0;  }
@media(max-width:1024px){ .dir-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .dir-grid { grid-template-columns:1fr; } }

/* base card */
.dir-card { display:flex; flex-direction:column; border:1px solid var(--plum); background:#fff; text-decoration:none; color:inherit; transition:box-shadow .25s ease, transform .25s ease; }
.dir-card:hover { box-shadow:0 14px 30px rgba(15, 158, 189,.16); transform:translateY(-3px); }

/* MEMBER card — logo + name + blurb (Our Global Network) */
.dir-card--member .dir-media { display:flex; align-items:center; justify-content:center; padding:28px 26px 6px; min-height:132px; }
.dir-card--member .dir-media img { max-width:72%; max-height:90px; width:auto; height:auto; object-fit:contain; }
.dir-card--member .dir-body { padding:6px 22px 26px; text-align:center; }
.dir-card--member h3 { font-family:var(--serif); font-weight:600; font-size:20px; line-height:1.15; color:var(--plum); margin:0 0 12px; }
.dir-card--member p { font-size:13px; line-height:1.35; color:var(--plum); margin:0; }

/* POST card — blog + events (image-led) */
.dir-card--post .dir-media { aspect-ratio:16/10; overflow:hidden; background:#e8e2e4; }
.dir-card--post .dir-media img { width:100%; height:100%; object-fit:cover; display:block; }
.dir-card--post .dir-body { display:flex; flex-direction:column; flex:1; padding: 15px; text-align: center; }
.dir-card--post h3 { color: var(--plum); text-align: center; font-family: "EB Garamond"; font-size: 1.6875rem; font-style: normal; font-weight: 600; line-height: 1.8125rem; /* 107.407% */ padding-bottom: 15px;}
.dir-card--post .dir-meta { font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--plum); opacity:.7; margin:0 0 10px; }
.dir-card--post .read-more { color: var(--plum); font-family: "Helvetica Neue"; font-size: 0.8125rem; font-style: normal; font-weight: 400; line-height: 0.9375rem; /* 115.385% */ letter-spacing: 0.04469rem; text-transform: uppercase; display: block; text-align: center; margin-top: auto; border-top: 1px solid var(--plum); padding-top: 15px; }

/* CARD hover — full-card plum overlay with the excerpt (or a 2-line
   fallback from the content, see wings_card_hover_text()) and a "Learn
   more" button, centered. Only present when there's text to show. Uses
   a <span class="btn"> rather than a link, since the whole card is
   already the clickable element. Shared by any .dir-card that includes
   a .dir-card__hover child — currently events (.event-item) and
   publications (.pub-item). */
/* EVENT card body — Date/Venue/Location/Email as labeled lines,
   left-aligned (overriding .dir-card--post's centered text, which the
   Blog listing still uses). No "read more" link in the rest state —
   the whole card is a link, and the hover overlay below has its own
   "Learn more" button. */
.event-item .dir-body { text-align: left; }
.event-item h3 { text-align: left; }
.event-item .event-field {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.4;
    color: var(--plum);
    margin: 0 0 10px;
}
.event-item .event-field strong { font-weight: 700; }
.event-item .event-field--local-time { opacity: .75; }

.dir-card { position: relative; }
.dir-card .dir-card__hover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 32px;
    background: var(--plum);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    text-align: center;
    z-index: 2;
}
.dir-card .dir-card__hover p {
    color: #fff;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}
.dir-card:hover .dir-card__hover,
.dir-card:focus-within .dir-card__hover {
    opacity: 1;
}

/* PUBLICATION card — image only at rest (no title/read-more underneath);
   the excerpt sits near the top of the hover overlay and the "Read PDF"
   button is pinned to the bottom of it, rather than the pair being
   centered together like the event cards. */
/* PDF covers are portrait documents, not 16:10 landscape photos -- give
   publication cards a taller crop than the inherited .dir-card--post
   ratio so both the cover image and the hover overlay's extra content
   (excerpt, published date, divider) have room to breathe. */
.pub-item .dir-media {
    aspect-ratio: 3/4;
}
.pub-item .dir-card__hover {
    justify-content: flex-start;
    overflow: hidden; /* safety net if an unusually long excerpt still overflows */
}
/* Excerpt + published date are centered within the space above the
   bottom-pinned "Read PDF" divider/link, rather than sitting at the
   top of the overlay -- .pub-read-pdf stays a sibling so it's still
   the last flex child pinned to the bottom via margin-top:auto. */
.pub-item .dir-card__hover .pub-hover-text {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.pub-item .dir-card__hover .pub-date {
    color: #fff;
    margin: 0;
    font-size: 13px;
    opacity: .85;
}
.pub-item .dir-card__hover .pub-read-pdf {
    margin-top: auto;
    width: 100%;
    display: block;
    color: #fff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.8125rem;
    letter-spacing: 0.04469rem;
    text-transform: uppercase;
    border-top: 1px solid rgba(255,255,255,.5);
    padding-top: 15px;
}

/* events quick-filter buttons */
.event-filters { max-width:var(--wrap); margin:32px auto 0; padding:0 var(--pad); }
.event-filters .filter-buttons { display:flex; gap:12px; flex-wrap:wrap; }
.event-filters .filter-btn { border:1px solid var(--plum); background:#fff; color:var(--plum); padding:12px 20px; font-size:13px; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; border-radius:2px; transition:background-color .3s ease, color .3s ease, transform .3s ease; }
.event-filters .filter-btn.active, .event-filters .filter-btn:hover { background:var(--plum); color:#fff; }
.event-filters .filter-btn:hover { transform:translateY(-1px); }
.loading-indicator { text-align:center; color:var(--plum); padding:20px; }

/* pagination */
.blog-pagination, .pagination-container .nav-links, .dir-page .nav-links { display:flex; gap:8px; justify-content:center; align-items:center; margin:48px auto 0; flex-wrap:wrap; }
.dir-page .page-numbers { display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 10px; border:1px solid var(--plum); color:var(--plum); text-decoration:none; font-size:14px; transition:background-color .3s ease, color .3s ease, transform .3s ease; }
.dir-page .page-numbers.current, .dir-page .page-numbers:hover { background:var(--plum); color:#fff; }
.dir-page .page-numbers:hover { transform:translateY(-1px); }
.dir-page .page-numbers.dots { border:0; }

/* ============================================================
   WINGS Members directory — Search & Filter Pro v3 (Query Loop)
   S&F v3 renders the toolbar as its own web-component-style markup
   and the results as native Query Loop / Post Template blocks, not
   the old .searchandfilter / .dir-card--member markup. These rules
   re-skin that block output to match the original dir-card design.
   Everything here is scoped under .dir-page / .dir-grid / .dir-toolbar
   so it only affects this directory, not other Query Loop blocks.
   ============================================================ */

/* ---- results grid: ul.wp-block-post-template.dir-grid ---- */
ul.wp-block-post-template.dir-grid {
    display:grid;
    grid-template-columns:repeat(4,260px);
    justify-content:center;
    gap:42px;
    max-width:var(--wrap);
    margin:26px auto 0;
    list-style:none;
    padding:0;
}
@media(max-width:1024px){ ul.wp-block-post-template.dir-grid { grid-template-columns:repeat(2,260px); } }
@media(max-width:600px){ ul.wp-block-post-template.dir-grid { grid-template-columns:260px; } }

/* ---- each card: li.wp-block-post (the old .dir-card.dir-card--member) ---- */
.dir-grid > li.wp-block-post {
    display:flex;
    flex-direction:column;
    width:260px;
    margin:0;
    padding:0;
    list-style:none;
    border:1px solid var(--plum);
    background:#fff;
    text-decoration:none;
    color:inherit;
    transition:box-shadow .25s ease, transform .25s ease;
}
.dir-grid > li.wp-block-post:hover {
    box-shadow:0 14px 30px rgba(15, 158, 189,.16);
    transform:translateY(-3px);
}

.dir-grid .wp-block-post-featured-image {
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 0;
    min-height:132px;
    margin:0;
}
.dir-grid .wp-block-post-featured-image img {
    max-width:90%;
    max-height:90px;
    width:auto;
    height:auto;
    object-fit:contain !important; /* the block writes object-fit:cover inline — override it */
}

.dir-grid .wp-block-post-title {
    font-family:var(--serif);
    font-weight:600;
    font-size:22px;
    line-height:1.15;
    color:var(--plum);
    margin:6px 22px 12px;
    text-align:center;
}
.dir-grid .wp-block-post-title a { color:inherit; text-decoration:none; }

.dir-grid .wp-block-post-excerpt { margin:0 22px 26px; text-align:center; }
.dir-grid .wp-block-post-excerpt__excerpt,
.dir-grid .wp-block-post-excerpt p {
    font-size:13px;
    line-height:1.35;
    color:var(--plum);
    margin:0;
}

/* ============================================================
   Blog listing (knowledge-insights/blog — page 4044) reuses the
   same .dir-grid / li.wp-block-post markup as the Member
   directory above, but its cards need the old .dir-card--post
   treatment instead: a full-bleed photo (not a small centered
   logo) and a "read more" link (which the Member cards don't
   have). Scoped to this page so the Member grid is untouched.
   ============================================================ */
body.page-id-4044 .dir-grid .wp-block-post-featured-image {
    display:block;
    min-height:0;
    aspect-ratio:16/10;
    overflow:hidden;
    background:#e8e2e4;
}
body.page-id-4044 .dir-grid .wp-block-post-featured-image img {
    max-width:none;
    max-height:none;
    width:100%;
    height:100%;
    object-fit:cover !important; /* the block writes object-fit:cover inline already, but the shared .dir-grid rule above forces contain — override it back */
}
body.page-id-4044 .dir-grid > li.wp-block-post { padding-bottom:15px; }
body.page-id-4044 .dir-grid .wp-block-read-more {
    display:block;
    margin: auto 10px 0; width: 90%;
    padding-top:15px;
    border-top:1px solid var(--plum);
    text-align:center;
    text-transform:uppercase;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:13px;
    letter-spacing:.045em;
    color:var(--plum);
    text-decoration:none;
}

/* Heading: centred in the space between the image and the read-more
   footer, not just top-anchored under the image (that footer already
   uses margin-top:auto to sit at the bottom, so the title is what
   should grow to fill — and centre itself within — the space above it). */
body.page-id-4044 .dir-grid .wp-block-post-title {
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Whole card clickable: the title link is stretched to cover the full
   card (image + whitespace included) via a ::after overlay, so clicking
   anywhere on the card follows it — not just the title text itself.
   The Read More link sits on top (z-index) so it stays independently
   clickable/hoverable; both links go to the same post anyway. */
body.page-id-4044 .dir-grid > li.wp-block-post { position:relative; }
body.page-id-4044 .dir-grid .wp-block-post-title a::after {
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
}
body.page-id-4044 .dir-grid .wp-block-read-more {
    position:relative;
    z-index:2;
}

/* Hover overlay: shows the excerpt (or first-paragraph fallback --
   see wings_card_hover_text() in functions.php, which also injects
   this markup since the listing is a core Query Loop block) over the
   whole card on hover/focus. Same look as the .dir-card__hover overlay
   used for events/publications, re-scoped to this block's own markup.
   pointer-events:none + a lower z-index than nothing above it keeps
   the card's existing click/read-more behaviour working underneath. */
body.page-id-4044 .dir-grid > li.wp-block-post .dir-card__hover {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: var(--plum);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    text-align: center;
}
body.page-id-4044 .dir-grid > li.wp-block-post .dir-card__hover p {
    color: #fff;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}
body.page-id-4044 .dir-grid > li.wp-block-post:hover .dir-card__hover,
body.page-id-4044 .dir-grid > li.wp-block-post:focus-within .dir-card__hover {
    opacity: 1;
}

/* ---- pagination: Query Pagination block ---- */
.wp-block-query-pagination {
    display:flex;
    gap:8px;
    justify-content:center;
    align-items:center;
    margin:48px auto 0;
    flex-wrap:wrap;
}
.wp-block-query-pagination-numbers { display:flex; gap:8px; align-items:center; }
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-next,
.wp-block-query-pagination-previous {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:40px;
    height:40px;
    padding:0 14px;
    border:1px solid var(--plum);
    color:var(--plum);
    text-decoration:none;
    font-size:14px;
    transition:background-color .3s ease, color .3s ease, transform .3s ease;
}
.wp-block-query-pagination .page-numbers.current,
.wp-block-query-pagination .page-numbers:hover,
.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-previous:hover {
    background:var(--plum);
    color:#fff;
}
.wp-block-query-pagination .page-numbers:hover,
.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-previous:hover {
    transform:translateY(-1px);
}
.wp-block-query-pagination .page-numbers.dots { border:0; min-width:auto; padding:0 4px; }

/* ---- toolbar: Search & Filter v3 field components ---- */
/* .dir-toolbar--inline lays the fields out in a single row (used on
   the Publications toolbar). Left un-scoped, .search-filter-field
   defaulted to width:100% with no flex on the parent, so the four
   fields (Topic/Region/Year/Search) stacked one per row instead of
   sitting in a line -- fixed by making the toolbar a flex row and
   giving each field a flexible basis instead of a forced full width.
   The .search-filter-field__input override undoes the plugin's own
   ".search-filter-field--width-25 .search-filter-field__input {
   width:25% }" rule, which otherwise shrinks the visible input to a
   quarter of the (now much narrower) field box. Scoped to the bare
   .dir-toolbar ancestor -- not gated on --inline -- is still safe:
   the only other .dir-toolbar user (.dir-toolbar--map, the member
   map filters) uses plain <select> markup with none of these
   classes, so it never matches. */
.dir-toolbar--inline { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; }
.dir-toolbar .search-filter-field { width:auto; flex:1 1 220px; box-sizing:border-box; }
.dir-toolbar .search-filter-field__input { width:100% !important; }
.dir-toolbar .search-filter-component-combobox,
.dir-toolbar .search-filter-input-text {
    border:1px solid var(--plum) !important;
    background:#fff !important;
    border-radius:0;
    min-height:35px; line-height: 35px
}


.dir-toolbar .search-filter-component-combobox__selection,
.dir-toolbar .search-filter-input-text__input,
.dir-toolbar .dir-toolbar .search-filter-input-text__input {
    color:var(--plum) !important;
    font-family:var(--sans);
   line-height: 35px!important; font-size: 1rem!important;    padding: 0!important;
}
.dir-toolbar .search-filter-component-combobox__selection-placeholder { color:var(--plum); opacity:.7; }
.dir-toolbar .search-filter-input-text__input::placeholder { color:var(--plum); opacity:.7; }
.dir-toolbar .search-filter-icon__svg { fill:var(--plum); color:var(--plum); }
.dir-toolbar .search-filter-component-combobox__listbox-toggle,
.dir-toolbar .search-filter-input-text__icon { color:var(--plum); }
.dir-toolbar .search-filter-input-text__input { padding: 2px 0!important; font-size: 1rem!important; }

.dir-toolbar input::placeholder,
.dir-toolbar textarea::placeholder,
.dir-toolbar .search-filter-component-combobox__selection-placeholder { color: var(--plum)!important; font-size: 1rem!important; opacity: 1!important; }

/* The Topic/Region/Year dropdown popup renders as its own panel appended
   to <body> (search-filter-field__popup), not inside .dir-toolbar -- so
   everything above never reached it, leaving the open list in the
   plugin's default grey/blue instead of the site's plum. Unscoped on
   purpose since these classnames are specific to this component. */
.search-filter-component-combobox-base__listbox-list { color: var(--plum)!important; font-size: 1rem!important; }
.search-filter-component-combobox-base__listbox-option--selected { background-color: var(--plum)!important; color: var(--white)!important; }
.search-filter-component-combobox-base__listbox-option:not(.search-filter-component-combobox-base__listbox-option--selected):hover {
    background-color: rgba(15, 158, 189,.08);
}

/* search overlay (theme markup uses .search-overlay / .search-overlay-*) */
.search-overlay { position:fixed; inset:0; z-index:70; background:rgba(15, 158, 189,.97); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; }
.search-overlay.active { opacity:1; visibility:visible; }
.search-overlay-close { position:absolute; top:26px; right:32px; background:none; border:0; color:#fff; font-size:1.8rem; cursor:pointer; }
.search-overlay-form { display:flex; width:min(680px,88vw); border-bottom:2px solid rgba(255,255,255,.5); }
.search-overlay-input { flex:1; background:transparent; border:0; color:#fff; font-family:var(--serif); font-size:clamp(1.6rem,5vw,2.4rem); padding:12px 0; outline:none; }
.search-overlay-input::placeholder { color:rgba(255,255,255,.5); }
.search-overlay-submit { background:none; border:0; color:#fff; font-size:1.4rem; cursor:pointer; }
.search-overlay-text { position:absolute; bottom:40px; color:rgba(255,255,255,.6); font-size:.85rem; }

@media(max-width:860px){
  #showmobi { display:block; }
  .site-header .main-navigation { position:absolute; top:100%; left:0; right:0; display:none; background:var(--plum); }
  .site-header .main-navigation .menu { flex-direction:column; align-items:flex-start; gap:18px; padding:22px var(--pad); }
  .header-search { display:none; }
}

/* ===============================================================
   ARTICLE / PAGE (single, page, 404) — readable content column
   =============================================================== */
.entry { max-width: 760px; margin: 0 auto; padding: clamp(48px,7vw,90px) var(--pad); color: var(--plum); }
.entry h1, .entry h2, .entry h3 { color:var(--plum); margin: 0 0 .5em; }
.entry h2 { font-size:clamp(1.8rem,3.6vw,2.4rem); margin:1.6em 0 .5em; }
.entry h3 { font-size:1.4rem; margin:1.4em 0 .4em; }
.entry p, .entry li { font-size:17px; line-height:1.6; }
.entry img { max-width:100%; height:auto; }
.entry a { color:var(--plum); }
.entry .back-link { display:inline-block; margin-bottom:24px; font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--plum); text-decoration:none; }
.entry .back-link::before { content:"\2190  "; }
.event-meta { display:flex; flex-wrap:wrap; gap:24px; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:0 0 28px; }
.event-meta .label { display:block; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--plum); opacity:.7; margin-bottom:4px; }
.event-meta .value { font-family:var(--serif); font-size:19px; color:var(--plum); }
.event-meta .wings-local-time { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; opacity: .75; }
.no-results { max-width:760px; margin:0 auto; padding:clamp(48px,8vw,110px) var(--pad); text-align:center; }

.single-post .site-header { background: var(--plum); }
.single-post #page { padding-top: 6rem; }
.single-post .entry { max-width: 1080px; margin: 0 auto; padding: 64px 300px 64px 0; color: var(--plum); }
.related-posts { max-width: 1080px; margin: 0 auto; padding: 0 0 64px 0; color: var(--plum); }
.related-posts h2 { color: var(--plum); font-size: 2.0625rem; margin: 0 0 16px 0; }
.related-posts h3 { color: var(--plum); font-size: 1.6875rem; margin: 0 .4em; }
.related-posts .dir-grid  { }

.page-template-template-nav .site-header { background: var(--plum); }
.page-template-template-nav #page { padding-top: 6rem; }
.page-template-template-nav .entry { max-width: 1080px; margin: 0 auto; padding: 64px 300px 64px 0; color: var(--plum); }
.page-template-template-nav {  }
.page-template-template-nav h2 {  }
.page-template-template-nav .dir-grid  { }

/* ===============================================================
   GUTENBERG BLOCKS  (WINGS Hero · WINGS Cards)
   =============================================================== */
.wings-cards { padding:clamp(40px,7vw,40px) 0; }
.wings-cards--plum { background:var(--plum); }
.wings-cards__grid { display:grid; gap:45px; justify-content:center; max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); }
.wings-cards--3 .wings-cards__grid { grid-template-columns:repeat(3,256px); }
.wings-cards--4 .wings-cards__grid { grid-template-columns:repeat(4,256px); }
.wings-cards--5 .wings-cards__grid { grid-template-columns:repeat(5,256px); }



.parent-pageid-8844 .wings-card__hover { background-color: var(--cyan); border: 1px solid var(--white); }


@media(max-width:1024px){ .wings-cards__grid { grid-template-columns:repeat(2,256px) !important; } }
@media(max-width:600px){ .wings-cards__grid { grid-template-columns:256px !important; } }

.wings-card { display:flex; flex-direction:column; text-align:center; text-decoration:none; color:inherit; cursor:pointer; border:1px solid; padding:44px 32px 24px; transition:background-color .25s ease, border-color .25s ease; }
.wings-card .card-head h3, .wings-card > p, .wings-card .card-link, .wings-card .card-foot { transition:color .25s ease, border-color .25s ease; }

/* WHITE style — plum ink on white, hover fills plum */
.wings-cards--white .wings-card { border-color:var(--plum); background:#fff; }
.wings-cards--white .wings-card .card-head h3, .wings-cards--white .wings-card > p, .wings-cards--white .wings-card .card-link { color:var(--plum); }
.wings-cards--white .wings-card .card-foot { border-top-color:var(--plum); }
.wings-cards--white .wings-card:hover { background:var(--plum); border-color:var(--plum); }
.wings-cards--white .wings-card:hover .card-head h3, .wings-cards--white .wings-card:hover > p, .wings-cards--white .wings-card:hover .card-link { color:#fff; }
.wings-cards--white .wings-card:hover p { color: #FFF; }
.wings-cards--white .wings-card:hover .card-foot { border-top-color:#fff; }

/* PLUM style — white ink on plum band, hover fills white */
.wings-cards--plum .wings-card { border-color:#fff; }
.wings-cards--plum .wings-card .card-head h3, .wings-cards--plum .wings-card > p, .wings-cards--plum .wings-card .card-link { color:#fff; }
.wings-cards--plum .wings-card .card-foot { border-top-color:#fff; }
.wings-cards--plum .wings-card:hover { background:#fff; border-color:#fff; }
.wings-cards--plum .wings-card:hover .card-head h3, .wings-cards--plum .wings-card:hover > p, .wings-cards--plum .wings-card:hover .card-link { color:var(--plum); }
.wings-cards--plum .wings-card:hover .card-foot { border-top-color:rgba(15, 158, 189,.3); }



.wings-card {
    display: flex;
    flex-direction: column;
    text-align: center;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border: 1px solid; padding: 0; overflow: hidden; transition: background-color .25s ease, border-color .25s ease; width: 256px; }

/* Full-width image at the top */
.wings-card__image {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.wings-card__image-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Padded card content */
.wings-card__content { display: flex; flex-direction: column; flex: 1; padding: 40px 25px 15px; }

/* Existing paragraph styling now targets the content wrapper */
.wings-card__content > .wings-card__body { font-size: 13px; font-weight: 400; line-height: 1.4; margin: 16px 0; color: var(--plum); }
.has-white-color.has-plum-background-color .wings-card__content > .wings-card__body { color: var(--white); }
.has-white-color.has-plum-background-color .wings-card__content:hover > .wings-card__body { color: var(--cyan); }
.wings-card__content > .wings-card__body ul,
.wings-card__content > .wings-card__body ol { margin: 0; padding-left: 1.1em; }
.wings-card__content > .wings-card__body a { text-decoration: underline; }


/* Keep the footer pinned to the bottom */
.wings-card__content .card-foot {
    margin-top: auto;
}

.wings-cards--whiteblocks a.wings-card:hover { background-color: white; color: var(--cyan); }

/* Hover-text overlay — full card, plum background, white text.
   Only present when the "Hover Text" ACF field is filled in. The link
   text stays pinned to the bottom with a border above it (re-using the
   existing .card-foot/.card-link styling); everything else is centered
   in the space above it. */
.wings-card { position: relative; }
.wings-card__hover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 45px 25px 15px;
    background: var(--plum);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    text-align: center;
    z-index: 2;
}
.wings-card__hover-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wings-card__hover-body p {
    color: #fff;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}
/* Force white regardless of the card's own style variant (white/plum/
   whiteblocks) — the overlay is always plum bg + white text/border. */
.wings-card__hover .card-foot { border-top-color: #fff !important; }
.wings-card__hover .card-link { color: #fff !important; }
.wings-card:hover .wings-card__hover,
.wings-card:focus-within .wings-card__hover {
    opacity: 1;
}


/* =========================================================
   WINGS VIDEO (click-to-play YouTube facade)
========================================================= */

.wings-video--narrow .wrap { max-width:var(--wrap-narrow); }
.wings-video h2 { text-align:center; color:var(--plum); margin:0 0 clamp(24px,4vw,36px); }

.wings-video__frame {
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    background:var(--plum);
    cursor:pointer;
    outline-offset:4px;
}
.wings-video__poster {
    position:absolute; inset:0;
    background-image:var(--wv-poster);
    background-size:cover;
    background-position:center;
    transition:transform .4s ease;
}
.wings-video__frame:hover .wings-video__poster { transform:scale(1.03); }
.wings-video__scrim {
    position:absolute; inset:0;
    background:rgba(15, 158, 189,.25);
    transition:background-color .3s ease;
}
.wings-video__frame:hover .wings-video__scrim,
.wings-video__frame:focus-visible .wings-video__scrim { background:rgba(15, 158, 189,.55); }

/* Play button — transparent, just a white triangle (no circle chrome).
   Purely decorative (aria-hidden; the whole frame is the real button),
   so it can disappear on hover without affecting click-to-play: the
   frame itself still catches the click either way. */
.wings-video__play {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:76px; height:76px;
    background:transparent;
    display:flex; align-items:center; justify-content:center;
    pointer-events:none;
    transition:opacity .25s ease;
    z-index:2;
}
.wings-video__play svg { width:36px; height:36px; margin-left:4px; fill:#fff; filter:drop-shadow(0 2px 8px rgba(0,0,0,.4)); }
.wings-video__frame:hover .wings-video__play { opacity:0; }
.wings-video__frame:focus-visible .wings-video__play { opacity:1; }

/* Hover-text overlay — same plum-bg / white-text treatment as the WINGS
   Cards hover overlay, only present when the "Hover text" field is set.
   Structured to exactly match .wings-card__hover below: flex-direction
   column, the text centered in a flex:1 body, and "Learn more" left in
   normal flow using the shared .card-foot (margin-top:auto pins it to
   the bottom once the body above it has claimed all the leftover space)
   -- same mechanism as every other card rollover on the site, not a
   separate absolute-positioning scheme. */
.wings-video__hover {
    position:absolute; inset:0;
    display:flex;
    flex-direction:column;
    padding:32px 32px 15px;
    background:rgba(15, 158, 189,.82);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;
    text-align:center;
    z-index:1;
}
.wings-video__hover-body {
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
}
.wings-video__hover-body p { color:#fff; margin:0; font-size:15px; line-height:1.5; max-width:480px; }
/* Force white regardless of context, same override as .wings-card__hover. */
.wings-video__hover .card-foot { border-top-color:#fff !important; }
.wings-video__hover .card-link { color:#fff !important; }
.wings-video__frame:hover .wings-video__hover,
.wings-video__frame:focus-visible .wings-video__hover { opacity:1; }

/* Once playing, the real <iframe> (appended by js/video-block.js) covers
   the poster/play button/hover text — no need to hide them explicitly. */
.wings-video__frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; z-index:3; }

.wings-video__frame--empty {
    display:flex; align-items:center; justify-content:center;
    background:var(--line); cursor:default;
}
.wings-video__frame--empty p { color:var(--plum); opacity:.7; font-size:14px; margin:0; padding:0 24px; text-align:center; }


/* =========================================================
   PERSON CARDS
========================================================= */
.person-cards { width: 100%; padding: clamp(48px,7vw,90px) var(--pad); }
.person-cards--standard .person-cards__grid { max-width: 1440px; margin: 0 auto; }
.person-cards--narrow .person-cards__grid { max-width: 1100px; margin: 0 auto; }

/* Colours */
.person-cards--plum { --person-card-colour: var(--plum); --person-card-hover-text: var(--white); }
.person-cards--white { --person-card-colour: var(--white); --person-card-hover-text: var(--ink); }
.person-cards--blue { --person-card-colour: var(--cyan); --person-card-hover-text: var(--white); }

/* Grid */
.person-cards__grid { display: grid; gap: clamp(16px,2vw,28px); }
.person-cards--2 .person-cards__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.person-cards--3 .person-cards__grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.person-cards--4 .person-cards__grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.person-cards--5 .person-cards__grid { grid-template-columns: repeat(5,minmax(0,1fr)); }

/* Card */
.person-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; color: var(--person-card-colour); text-decoration: none; background: var(--white); border: 1px solid var(--person-card-colour); }
a.person-card,
a.person-card:hover,
a.person-card:focus,
a.person-card:visited { color: var(--person-card-colour); text-decoration: none; }

/* Image */
.person-card__image { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; }
.person-card__image-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .4s ease, opacity .4s ease; }

/* Hover */
.person-card__overlay { cursor: pointer; position: absolute; z-index: 2; inset: 0; display: flex; align-items: center; justify-content: center; padding: clamp(20px,7%,42px); color: var(--plum); background: var(--white); opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.person-card__hover-content { width: 100%; max-width: 36ch; text-align: center; opacity: 0; transform: translateY(12px); transition: opacity .35s ease, transform .35s ease; }
.person-card__hover-content p { color: var(--plum); text-align: center; font-family: "Helvetica Neue"; font-size: .8125rem; font-style: normal; font-weight: 500; line-height: 1rem; }
.person-card__hover-content p:last-child { margin-bottom: 0; }

/* Hover only when hover text exists */
.person-card--has-hover:hover .person-card__overlay,
.person-card--has-hover:focus-within .person-card__overlay { opacity: .94; }
.person-card--has-hover:hover .person-card__hover-content,
.person-card--has-hover:focus-within .person-card__hover-content { opacity: 1; transform: translateY(0); }
.person-card--has-hover:hover .person-card__image-img,
.person-card--has-hover:focus-within .person-card__image-img { transform: scale(1.04); }

/* Content */
.person-card__content { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 24px 20px 26px; text-align: center; color: var(--person-card-colour); }
.person-card__name { color: var(--plum); text-align: center; font-family: "EB Garamond"; font-size: 1.625rem; font-style: normal; font-weight: 600; line-height: 1.8125rem; /* 111.538% */ margin-bottom: 4px; }
.person-card__title { color: var(--plum); text-align: center; font-family: "Helvetica Neue"; font-size: 0.8125rem; font-style: normal; font-weight: 400; line-height: 0.9375rem; /* 115.385% */ letter-spacing: 0.04469rem; text-transform: uppercase; }

/* Focus */
a.person-card:focus-visible { outline: 3px solid var(--person-card-colour); outline-offset: 4px; }
/* Responsive */
@media (max-width:1100px) {
    .person-cards--4 .person-cards__grid,
    .person-cards--5 .person-cards__grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width:900px) {
    .person-cards--3 .person-cards__grid,
    .person-cards--4 .person-cards__grid,
    .person-cards--5 .person-cards__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px) {
    .person-cards--2 .person-cards__grid,
    .person-cards--3 .person-cards__grid,
    .person-cards--4 .person-cards__grid,
    .person-cards--5 .person-cards__grid { grid-template-columns: 1fr; }
    .person-card__content { min-height: 130px; padding: 20px; }
}
@media (hover:none) {
    .person-card--has-hover .person-card__overlay { display: none; }
}

/* =========================================================
   STAFF CARDS
   Matches the WINGS Board & Staff card design: front face shows
   image + name + title; hover reveals bio + company/country + a
   plain LinkedIn glyph on a dark plum overlay.
========================================================= */
.staff-cards { width: 100%; }
.staff-cards--standard .staff-cards__grid { max-width: 1440px; margin: 0 auto; }
.staff-cards--narrow .staff-cards__grid { max-width: 1100px; margin: 0 auto; }

/* Grid */
.staff-cards__grid { display: grid; gap: 42px; justify-content: center; }
.staff-cards--2 .staff-cards__grid { grid-template-columns: repeat(2,268px); }
.staff-cards--3 .staff-cards__grid { grid-template-columns: repeat(3,268px); }
.staff-cards--4 .staff-cards__grid { grid-template-columns: repeat(4,268px); }
.staff-cards--5 .staff-cards__grid { grid-template-columns: repeat(5,268px); }

/* Card */
.staff-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--white); border: 1px solid var(--plum); }

/* Front face: image + name + title */
.staff-card__bio { position: relative; display: flex; flex: 1; flex-direction: column; }
.staff-card__image { position: relative; width: 100%; aspect-ratio: 266 / 285; overflow: hidden; }
.staff-card__image-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .4s ease; }
.staff-card__content { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 18px 16px 20px; text-align: center; }
.staff-card__name { color: var(--plum); text-align: center; font-family: "EB Garamond"; font-size: 1.625rem; font-style: normal; font-weight: 600; line-height: 1.8125rem; margin-bottom: 4px; }
.staff-card__title { color: var(--plum); text-align: center; font-family: "Helvetica Neue"; font-size: 0.8125rem; font-style: normal; font-weight: 400; line-height: 0.9375rem; letter-spacing: 0.04469rem; text-transform: uppercase; }

/* Hover overlay: dark plum, white text, revealed on hover/focus */
.staff-card__overlay { cursor: default; position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 20px 18px 18px; background: var(--plum); opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.staff-card__hover-content { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; }
.staff-card__hover-content p { color: var(--white); text-align: center; font-family: "Helvetica Neue"; font-size: .8125rem; font-style: normal; font-weight: 500; line-height: 1rem; margin: 0; }
.staff-card__hover-content p + p { margin-top: .75em; }

/* Bottom meta row: Company / Country stack (left) + LinkedIn glyph (right) */
.staff-card__meta-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.staff-card__meta-text { text-align: left; }
.staff-card__company { color: var(--white); font-family: "Helvetica Neue"; font-size: 0.8125rem; font-style: normal; font-weight: 700; line-height: 0.9375rem; letter-spacing: 0.04469rem; }
.staff-card__country { color: var(--white); font-family: "Helvetica Neue"; font-size: 0.8125rem; font-style: normal; font-weight: 700; line-height: 0.9375rem; letter-spacing: 0.04469rem; text-transform: uppercase; }
.staff-card__linkedin { flex-shrink: 0; display: flex; align-items: flex-end; justify-content: center; pointer-events: auto; }
.staff-card__linkedin svg { width: 22px; height: 22px; fill: var(--white); }

/* Reveal on hover only when there's hover content */
.staff-card--has-hover:hover .staff-card__overlay,
.staff-card--has-hover:focus-within .staff-card__overlay { opacity: .94; pointer-events: auto; }
.staff-card--has-hover:hover .staff-card__image-img,
.staff-card--has-hover:focus-within .staff-card__image-img { transform: scale(1.04); }

/* Focus */
.staff-card__linkedin:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

/* Responsive */
@media (max-width:1100px) {
    .staff-cards--4 .staff-cards__grid,
    .staff-cards--5 .staff-cards__grid { grid-template-columns: repeat(3,268px); }
}
@media (max-width:900px) {
    .staff-cards--3 .staff-cards__grid,
    .staff-cards--4 .staff-cards__grid,
    .staff-cards--5 .staff-cards__grid { grid-template-columns: repeat(2,268px); }
}
@media (max-width:600px) {
    .staff-cards--2 .staff-cards__grid,
    .staff-cards--3 .staff-cards__grid,
    .staff-cards--4 .staff-cards__grid,
    .staff-cards--5 .staff-cards__grid { grid-template-columns: 268px; }
    .staff-card__content { min-height: 130px; padding: 20px; }
}
@media (hover:none) {
    .staff-card--has-hover .staff-card__overlay { display: none; }
}

/* =========================================================
   ORGANISATION CARDS
========================================================= */
.organisation-cards { width: 100%;  }
.organisation-cards--standard .organisation-cards__grid { max-width: 1440px; margin: 0 auto; }
.organisation-cards--narrow .organisation-cards__grid { max-width: 1100px; margin: 0 auto; }
/* Colours */
.organisation-cards--plum { --organisation-card-colour: var(--plum); }
.organisation-cards--white { --organisation-card-colour: var(--white); }
.organisation-cards--blue { --organisation-card-colour: var(--cyan); }
/* Grid */
.organisation-cards__grid { display: grid; gap: clamp(16px,2vw,28px); }
.organisation-cards--2 .organisation-cards__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.organisation-cards--3 .organisation-cards__grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.organisation-cards--4 .organisation-cards__grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.organisation-cards--5 .organisation-cards__grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
/* Card */
.organisation-card { display: flex; flex-direction: column; min-width: 0; height: 100%; overflow: hidden; color: var(--organisation-card-colour); text-decoration: none; background: var(--white); border: 1px solid var(--organisation-card-colour); }
a.organisation-card,
a.organisation-card:hover,
a.organisation-card:focus,
a.organisation-card:visited { color: var(--organisation-card-colour); text-decoration: none; }
/* Image */
.organisation-card__image { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1.8 / 1; padding: 10px; }
.organisation-card__image-img { display: block; width: 100%; height: 100%; max-height: 120px; object-fit: contain; object-position: center; }
/* Content */
.organisation-card__content { display: flex; flex: 1; flex-direction: column; align-items: center; padding: 0 10px 10px; text-align: center; }
.organisation-card__title { margin: 0 0 12px; color: var(--organisation-card-colour); font-family: "EB Garamond"; font-size: clamp(1.375rem,1.7vw,1.625rem); font-style: normal; font-weight: 500; line-height: 1.25; }
.organisation-card__body { color: var(--organisation-card-colour); font-family: "Helvetica Neue"; font-size: .8125rem; font-style: normal; font-weight: 400; line-height: 1rem; }
.organisation-card__body p { margin: 0; color: inherit; }
.organisation-card__foot { margin-top: auto; padding-top: 20px; }
.organisation-card__link { display: inline-flex; align-items: center; justify-content: center; color: var(--organisation-card-colour); font-family: "Helvetica Neue"; font-size: .8125rem; font-weight: 500; line-height: 1; text-transform: uppercase; letter-spacing: .04em; }
/* Focus */
a.organisation-card:focus-visible { outline: 3px solid var(--organisation-card-colour); outline-offset: 4px; }
/* Responsive */
@media (max-width:1100px) {
    .organisation-cards--4 .organisation-cards__grid,
    .organisation-cards--5 .organisation-cards__grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width:900px) {
    .organisation-cards--3 .organisation-cards__grid,
    .organisation-cards--4 .organisation-cards__grid,
    .organisation-cards--5 .organisation-cards__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px) {
    .organisation-cards--2 .organisation-cards__grid,
    .organisation-cards--3 .organisation-cards__grid,
    .organisation-cards--4 .organisation-cards__grid,
    .organisation-cards--5 .organisation-cards__grid { grid-template-columns: 1fr; }
    .organisation-card__image { aspect-ratio: 2 / 1; }
}

/* ===============================================================
   MORE BLOCKS  (WINGS Split · WINGS Band · WINGS Icon Features)
   =============================================================== */

/* Split block: per-block image via --split-img (falls back to --hero-img) */
.split__media { background-image:var(--split-img, var(--hero-img)); }
/* WYSIWYG lists inside a split render as chevron bullets */
.split__content ul { list-style:none; margin:0 0 1.2em; padding:0; }
.split__content ul li { position:relative; padding-left:22px; }
.split__content ul li::before { content:"\25B8"; position:absolute; left:0; top:0; color:currentColor; }
.split__content .btn, .split__content .btn-outline { margin-top:22px; }

/* Cards block: 2-column option (for Connect / Related style rows) */
.wings-cards--2 .wings-cards__grid { grid-template-columns:repeat(2,256px); max-width:820px; }

/* Band block (centred content, colour options) */
.wings-band { text-align:center; }
.wings-band .wrap { }
.wings-band--white { background:#fff; }
.wings-band--white h2 { color:var(--plum); }
.wings-band--white p { color:var(--ink); max-width:820px; margin:0 auto 1em; }
.wings-band--cyan { background:var(--cyan); color:#fff; }
.wings-band--cyan h2 { color:#fff; margin-bottom:26px; }
.wings-band--cyan p { max-width:1100px; margin:0 auto .8em; }
.wings-band--plum { background:var(--plum); color:#efe4e7; }
.wings-band--plum h2 { color:#fff; margin-bottom:26px; }
.wings-band--plum p { color:#e4d5d9; max-width:820px; margin:0 auto 1em; }
.wings-band h2 { margin-bottom:22px; }
.wings-band .accent { font-weight:700; }
.wings-band__body p:last-child { margin-bottom:0; }

/* Icon Features block (icon + title + text row) — no background, no
   section padding; alignment and icon colour are both set via ACF fields
   (icon colour arrives as the --wf-icon-color custom property). */
.wings-features { padding:0; }
.wings-features__row { display:flex; gap:40px; justify-content:center; flex-wrap:wrap; max-width:var(--wrap); margin:0 auto; }
.wings-feature { flex:0 1 160px; max-width:220px; text-align:center; }
.wings-feature__icon { height:52px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; color:var(--wf-icon-color, var(--cyan)); }
.wings-feature__icon svg { height:52px; width:auto; max-width:68px; display:block; }
.wings-feature h3 { font-family:var(--sans); font-weight:700; font-size:.98rem; margin-bottom:8px; color:var(--cyan); }
.wings-feature p { font-size:.86rem; margin:0; color:var(--grey); }

.wings-features__title { text-align:center; margin:0 auto clamp(28px,4vw,44px); max-width:18ch; color:var(--cyan); }

/* Row alignment — left / center / right (ACF "alignment" field) */
.wings-features--align-left .wings-features__row { justify-content:flex-start; }
.wings-features--align-left .wings-feature { text-align:left; }
.wings-features--align-left .wings-feature__icon { justify-content:flex-start; }
.wings-features--align-right .wings-features__row { justify-content:flex-end; }
.wings-features--align-right .wings-feature { text-align:right; }
.wings-features--align-right .wings-feature__icon { justify-content:flex-end; }

/* Cards — Standard / Narrow content width */
:root { --wrap-narrow:1080px; }
.wings-cards--narrow .wings-cards__grid { max-width:var(--wrap-narrow); }

/* Standard / Narrow content width — Band, Features, Split */
.wings-band--narrow .wrap { max-width:var(--wrap-narrow); }
.wings-features--narrow .wings-features__row { max-width:var(--wrap-narrow); }
@media(min-width:1180px){
  .split--narrow .split__content { padding-left:calc((100vw - var(--wrap-narrow))/2 + var(--pad)); }
}

/* Narrow width option for core Columns / Group blocks */
.wp-block-columns.is-style-wings-narrow,
.wp-block-group.is-style-wings-narrow { max-width:var(--wrap-narrow); margin-left:auto; margin-right:auto; gap: 80px!important; }

/* "Narrow (fit content)" -- same narrow container + 80px gap, but the
   columns shrink to their content's width (e.g. two 268px images)
   instead of stretching to fill the row, and the whole shrunk row
   centers as a unit. The !important pair overrides core's own
   per-instance generated rule (.wp-container-core-columns-is-layout-...
   > .wp-block-column { flex-grow:1 ... }) that would otherwise still
   stretch each column to fill an equal share of the row.
   Scoped to min-width:782px (WP core's own columns breakpoint) so
   mobile stacking -- where core forces each column to flex-basis:100%
   -- is left completely alone. */
.wp-block-columns.is-style-wings-tight { max-width:var(--wrap-narrow); margin-left:auto; margin-right:auto; gap: 80px!important; }
@media(min-width:782px) {
    .wp-block-columns.is-style-wings-tight { justify-content:center; }
    .wp-block-columns.is-style-wings-tight > .wp-block-column { flex:0 0 auto!important; width:auto!important; }
}