/*
Theme Name: PTBO DBIA
Theme URI: https://example.com/ptbo-dbia
Author: WCKD Marketing
Author URI: https://wckd.marketing
Description: Theme for the Peterborough Downtown Business Improvement Area (PTBO DBIA).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ptbo-dbia
*/

/* ------------------------------------------------------------------ *
 * PTBO DBIA brand palette (from the logo) — overrides WCKD UI tokens.
 * Targets :root and [data-theme="light"] because WCKD redefines some
 * palette tokens inside its light block; style.css loads after WCKD.
 * ------------------------------------------------------------------ */
:root,
[data-theme="light"] {
	--blue: #2699cd;
	--green: #16b1a9;
	--yellow: #fbb040;
	--orange: #f15a29;
	--black: #282f39;
	--red: #e5484d;
	--purple: #7c5cbf;
	--pink: #e0568a;
	--gray: #8a94a6;
	--beige: #cdb9a6;
	--brown: #8a5a44;

	--primary-color: var(--blue);
	--secondary-color: var(--orange);
	--tertiary-color: var(--green);
	--neutral-color: var(--black);

	--text-color: #4b5563;
	--text-color-header: #1c222b;
	--text-color-secondary: rgba(40, 47, 57, 0.72);
	--background-color: #f6f8fb;
	--background-color-dark: #e9eef3;
	--background-color-fade: rgba(40, 47, 57, 0.05);
	--line-color: rgb(40 47 57 / 0.15);
	--link-color: #1c7fb0;
	--link-hover-color: #145d82;

	/* Brand type (Strategic Plan + Annual Report): Poppins everywhere,
	 * Red Hat Display reserved for knockout stat/display moments. */
	--font-stack: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-display: "Red Hat Display", var(--font-stack);
}
.site-header{position: relative}
.site-logo{
		position: absolute;
		left: var(--size-l);
		height: 100%;
		max-height: 140px;
		top: 10px
	}

.aligned-center .button{justify-self: center;margin-inline: auto !important;}
/* Button groups: .flex-group is fit-content — centre it in centred heads. */
section .head.text-center .buttons{margin-inline: auto}

/* Partner brand cards — the common logo-card pattern: a fixed-height logo
 * band with the mark contained inside it, so every brand sits on the same
 * baseline and the copy starts at a consistent height. Content is centered
 * and the full-width Visit site button pins to the card's bottom edge so
 * buttons align across the row. */
.card-partner{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--size-s);
}
.card-partner > img{
	height: 72px;
	width: auto;
	max-width: min(220px, 100%);
	object-fit: contain;
	object-position: center;
	margin-bottom: var(--size-s);
	flex: none;
}
.card-partner .button{margin-top: auto}
/* The logo carries the identity — the name is a quiet caption under it. */
.card-partner h3{
	font-size: var(--text-l);
	font-weight: var(--text-semibold);
	letter-spacing: 0;
}

/* WCKD's .button sets width:fit-content later in the sheet than .max-width,
 * so the utility loses the tie on buttons — restore it. */
.button.max-width, a.button.max-width{width: 100%}

a.card{color: var(--text-color);padding: var(--size-xl);justify-content: space-between;}
a.card:hover{text-decoration: none;color: var(--text-color)}


section .head{margin-bottom: var(--size-xl)}
.wckd-kicker{	gap: var(--size-s);	display:inline-flex;}

/* Hover polish — the pointer and lift belong to clickable cards only. */
.card {
	box-shadow: 0 2px 4px rgba(0,0,0,0.04);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
a.card, button.card {
	cursor: pointer;
}
a.card:hover, button.card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}

/* Hero breadcrumbs (WCKD .breadcrumbs component) */
.type-hero .breadcrumbs{margin-bottom: var(--size-m)}
.type-hero .breadcrumbs a{color: inherit}

/* Hero copy measure — the Content width column inside the site gutter.
 * The overlay stays full-bleed (its ::before is the tint); the inner div is
 * the standard site column, so placement happens here via margins. */
.type-hero-center .hero_copy{margin-inline: auto}
.type-hero-right .hero_copy{margin-left: auto}

/* Stats — big value stacked over its label; theme.js counts numeric values
 * up from 0 when wckd-ui.js marks the .stats-count grid .in-view. */
.stat{
	display: flex;
	flex-direction: column;
	gap: var(--size-s);
	align-items: center;
	justify-content: center;
	text-align: center;
}
.stat_value{
	font-size: var(--text-6xl);
	font-weight: var(--text-bold);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--primary-color);
	font-variant-numeric: tabular-nums;
}
.stat_label{
	color: var(--text-color-secondary);
	font-size: var(--text-s);
	font-weight: var(--text-semibold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	max-width: 22ch;
}
/* Full-page slide panels — give the slide word its display scale. */
.wckd-slides > .column h3{font-size: var(--text-5xl); letter-spacing: -0.02em}

/* Word stats ("Walkable") — the numeral scale breaks the cells, so words get
 * a calmer headline treatment; the count-up JS already skips them. */
.stat_value.stat_value-text{
	font-size: clamp(var(--text-l), 1rem + 0.5vw, var(--text-xl));
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.15;
	overflow-wrap: break-word;
	max-width: 100%;
}
.stat_label{text-wrap: balance;}

/* Numbered cells — grid eyebrow as a large outlined numeral (Cell eyebrow:
 * Number). Stroke matches the heading colour. */
.cell-numbered{align-items: center; gap: var(--size-l)}
.cell-numbered .group{min-width: 0}
.cell_number{
	flex: none;
	font-size: clamp(3.5rem, 6vw, 5rem);
	font-weight: var(--text-bold);
	line-height: 0.8;
	/* Narrow glyphs ("1") get the same footprint as wide ones, so the
	 * panel overlap is identical on every card; two digits expand past it. */
	min-width: 0.72em;
	text-align: center;
}

/* On cards, Netflix-style overlap inside the cell: the copy panel rides over
 * the numeral's right side (background inherited from the card fill so it
 * occludes the digit) and casts a soft vertical shadow across it. */
.cards .cell-numbered{gap: 0}
.cards .cell-numbered .cell_number{
	font-size: clamp(5rem, 9vw, 7.5rem);
	margin-right: -0.2em; /* tuck the digit's right side under the copy panel */
}
.cards .cell-numbered .group{
	position: relative; /* paint above the numeral's text */
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: inherit;
	padding-left: var(--size-l);
	box-shadow: -18px 0 22px -10px rgba(28, 34, 43, 0.18);
	clip-path: inset(0 0 0 -40px); /* show the shadow on the left edge only */
}

/* Section sub-nav — automatic sidebar layout on child pages (Overview +
 * siblings, current page highlighted). Sections after the hero render in
 * the 3/4 content column with trimmed side gutters. */
.subnav{display: flex; flex-direction: column; gap: var(--size-s)}
/* Sticky rides the column itself; align-self keeps the grid item from
 * stretching (a stretched item has nowhere to stick). */
.type-subnav .column.sticky{
	top: calc(var(--header-height, 80px) + var(--size-m));
	z-index: 10;
	align-self: start;
}
.subnav ul{list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px}
.subnav li{margin: 0; padding: 0}
.subnav a{
	display: block;
	padding: var(--size-s) var(--size-m);
	color: var(--text-color);
	font-weight: var(--text-semibold);
	font-size: var(--text-s);
	text-decoration: none;
	border-radius: var(--size-xs);
}
.subnav a:hover{background: var(--background-color-fade)}
.subnav a.active{background: var(--text-color-header); color: var(--white)}
.subnav_content section > div{padding-inline: 0}
.subnav_content section[class*="fill-"] > div,
.subnav_content section[class*="surface-"] > div{padding-inline: var(--size-l)}

/* People section — board / staff cards. Photo cards run the portrait full
 * card height, bled to the card edge (the card's rounded overflow crops it). */
.person_card.flex{align-items: stretch; gap: var(--size-l); padding: 0; overflow: hidden}
.person_card .person_photo{
	width: clamp(110px, 34%, 160px);
	height: auto;
	min-height: 100%;
	border-radius: 0;
	object-fit: cover;
	flex: none;
}
.person_card.flex .person_meta{
	padding: var(--size-l) var(--size-l) var(--size-l) 0;
	justify-content: center;
}
.person_meta{display: flex; flex-direction: column; gap: 2px; min-width: 0}

/* Card headings: cap the measure so long titles wrap early (ch-based, so it
 * tracks the type size — steadier than a percentage width). */
.cards .card h3{max-width: var(--width-m)}
.person_role{
	font-size: var(--text-xs);
	font-weight: var(--text-bold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--primary-color);
}
.person_business{color: var(--text-color-secondary); font-size: var(--text-s)}
.person_bio_open{
	align-self: flex-start;
	margin-top: var(--size-xs);
	padding: 0;
	background: none;
	border: 0;
	min-height: 0;
	font-size: var(--text-s);
	font-weight: var(--text-semibold);
	color: var(--primary-color);
	text-decoration: underline;
	cursor: pointer;
}
.person_bio.wckd-overlay-content{padding: var(--size-xl)}
.person_bio .person_photo{width: 80px; height: 80px; object-fit: cover; margin-bottom: var(--size-s)}
.person_bio .person_role{display: block; margin-bottom: var(--size-m)}

/* FAQ accordion — long questions must wrap (WCKD buttons default to nowrap). */
.accordion-toggle{white-space: normal; text-align: left}

/* Screen-reader-only text (e.g. "opens in a new tab" on external links). */
.sr-only{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Priority related rail — icon-led links, no per-item borders (the aside's
 * own border-left is the single divider). */
.priority-related li{display: flex; align-items: baseline; gap: var(--size-xs); padding: 2px 0}
.priority-related li a{display: inline-flex; align-items: center; gap: var(--size-xs)}
.priority-related .wckd-icon{flex: none; display: inline-flex; align-items: center}
.priority-related .wckd-icon svg{height: 0.9em; width: 0.9em}

/* Project cards (grid Cell pattern: Projects) — flat editorial "case files":
 * square corners, hairline outline with a heavy top rule, header band with
 * index / category / status chip, two-column body. Deliberately distinct
 * from the rounded numbered cards. */
.project-list .project-card{
	border: 2px solid var(--text-color);
	padding: var(--size-xl);
	clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.05));
	/* ink triangle fills the clipped notch so the cut edge reads as drawn */
	background:
		linear-gradient(to bottom left, var(--text-color) 0 50%, transparent 50%) top right / 26px 26px no-repeat,
		var(--background-color-light);
}
.project_head{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--size-s);
	padding-bottom: var(--size-s);
	margin-bottom: var(--size-m);
}
/* Wave divider under the card head — the logo's wave-under-wordmark move. */
.project_head::after{
	content: '';
	order: 99;
	width: 100%;
	height: 8px;
	background-color: var(--text-color);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cpath d='M0 4 Q6 0 12 4 T24 4' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") repeat-x left center / 24px 8px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cpath d='M0 4 Q6 0 12 4 T24 4' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") repeat-x left center / 24px 8px;
}
.project_id{
	font-weight: var(--text-bold);
	font-size: var(--text-s);
	letter-spacing: 0.08em;
	color: var(--text-color-secondary);
}
.project_head .wckd-kicker{margin: 0}
.project_status{
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--text-xs);
	font-weight: var(--text-bold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 2px 10px;
	background: var(--background-color-fade);
	color: var(--text-color-secondary);
	white-space: nowrap;
}
.project_status::before{content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor}
.project_status.status-success{background: var(--surface-success); color: var(--surface-success-text)}
.project_status.status-info{background: var(--surface-info); color: var(--blue)}
.project_status.status-warning{background: var(--surface-warning); color: var(--surface-warning-text)}
.project_body{columns: 2; column-gap: var(--size-xxl); margin-top: var(--size-s)}
.project_body p, .project_body li{break-inside: avoid}
@media (max-width: 900px){
	.project_body{columns: 1}
}

/* Sponsorship tiers — fixed page-type template. */
.sponsor_status{color: var(--tertiary-color)}
.sponsor_tier{position: relative}
/* Featured tier: the badge overhangs the card's top edge, so this card
 * skips the clipped-corner clip-path (which would slice the badge) —
 * its outline already differentiates it. */
.sponsor_tier-featured{outline: 2px solid var(--primary-color); outline-offset: -2px}
.cards .card.sponsor_tier-featured{clip-path: none; filter: none; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);}
.sponsor_tier_tag{
	position: absolute;
	top: calc(-1 * var(--size-s));
	left: var(--size-l);
	background: var(--primary-color);
	color: var(--white);
	font-size: var(--text-xs);
	font-weight: var(--text-bold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 2px var(--size-s);
}
.sponsor_tier_price{
	font-size: var(--text-3xl);
	font-weight: var(--text-bold);
	color: var(--text-color-header);
	line-height: 1.1;
}
.sponsor_tier .button{margin-top: auto}

/* Showcase panels — content anchors to the panel foot. */
.wckd-showcase .overlay{justify-content: flex-end; padding: var(--size-l)}

/* Documents section — year-grouped rows of downloadable records. */
.doc-year{margin-top: var(--size-xl)}
.doc-groups .doc-year:first-child{margin-top: 0}
.doc-list{margin-top: var(--size-m)}
.doc-row{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--size-m);
	flex-wrap: wrap;
	padding: var(--size-m) var(--size-l);
}
.doc-row + .doc-row{border-top: 1px solid var(--line-color)}
.doc-row:hover{background: var(--background-color-fade)}
.doc-meta{display: flex; flex-direction: column; gap: 2px; min-width: 0}
.doc-meta span{color: var(--text-color-secondary); font-size: var(--text-s)}
.doc-meta .doc-file{font-size: var(--text-xs); overflow-wrap: anywhere}
.doc-actions{display: flex; gap: var(--size-s); flex: none}

/* Solid brand fills on heroes — dark surfaces default to light text.
 * Light fills (yellow) already get dark text from WCKD UI. The hero
 * Text colour field (.white-text / .black-text on the inner) still wins. */
.type-hero.blue, .type-hero.green, .type-hero.orange, .type-hero.black{color: var(--white)}
.type-hero.blue :where(h1,h2,h3,h4,h5,h6,p,small,figcaption),
.type-hero.green :where(h1,h2,h3,h4,h5,h6,p,small,figcaption),
.type-hero.orange :where(h1,h2,h3,h4,h5,h6,p,small,figcaption),
.type-hero.black :where(h1,h2,h3,h4,h5,h6,p,small,figcaption){color: inherit}
/* ------------------------------------------------------------------
 * Brand geometry — the DBIA logo is hard-edged, flat-colour, clipped
 * shapes; the UI follows. Radii zeroed site-wide, and cards echo the
 * logo's clipped-corner motif. Journey markers stay circles (they're
 * wayfinding dots on a line, not container chrome).
 * ------------------------------------------------------------------ */
:root,
[data-theme="light"] {
	--border-radius: 0;
}
.round,
.button, button,
.subnav a,
.wckd-tag,
.wckd-overlay-content,
.wckd-menu > ul:not(.horizontal) > li > ul,
.accordion-toolbar .open-all,
.sponsor_tier_tag,
.project_status,
.person_bio .person_photo{border-radius: 0}

/* Cards: clipped top-right corner, logo-style. The shadow must follow
 * the clipped outline, so drop-shadow (a filter) replaces box-shadow. */
.cards .card, a.card{
	clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
	box-shadow: none;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.05));
}
a.card:hover, button.card:hover{
	box-shadow: none;
	filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.10));
}

/* Buttons — logo language: thick ink outline, flat fill, hard offset
 * shadow (no blur, like the illustrated mark), press-down interaction.
 * Text buttons stay plain links. */
.button:where(:not(.text):not(.icon-button):not(.carousel-dot):not(:disabled):not(.disabled)),
button:where(:not(.text):not(.icon-button):not(.carousel-dot):not(:disabled):not(.disabled)){
	box-shadow: 3px 3px 0 var(--text-color);
	transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.2s ease, color 0.2s ease;
}
.button:hover:not(:disabled):not(.disabled):not(.text):where(:not(.icon-button)),
button:hover:not(:disabled):not(.disabled):not(.text):where(:not(.icon-button):not(.accordion-toggle):not(.tabs-toggle):not(.hamburger-btn):not(.carousel-dot):not(.close-overlay):not(.open-all):not(.wckd-menu-submenu-toggle)),
a.button:hover:not(:disabled):not(.disabled):not(.text):where(:not(.icon-button)){
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 var(--text-color);
}
.button:active:not(:disabled):not(.disabled):not(.text):where(:not(.icon-button)),
button:active:not(:disabled):not(.disabled):not(.text):where(:not(.icon-button):not(.accordion-toggle):not(.tabs-toggle):not(.hamburger-btn):not(.carousel-dot):not(.close-overlay):not(.open-all):not(.wckd-menu-submenu-toggle)),
a.button:active:not(:disabled):not(.disabled):not(.text):where(:not(.icon-button)){
	transform: translate(3px, 3px);
	box-shadow: 0 0 0 var(--neutral-color);
}
/* Outline buttons keep the ink frame on a transparent fill. */
.button.outline:where(:not(:disabled):not(.disabled)), button.outline:where(:not(:disabled):not(.disabled)){
	border-color: var(--neutral-color);
	color: var(--neutral-color);
}

/* Component toggles are rows/controls, not CTAs — no button chrome. */
.accordion-toggle, .tabs-toggle, .hamburger-btn,
.accordion-toolbar .open-all, .wckd-menu button,
button.close-overlay{
	box-shadow: none;
}
.accordion-toggle:hover, .accordion-toggle:active,
.tabs-toggle:hover, .tabs-toggle:active,
.hamburger-btn:hover, .hamburger-btn:active{
	transform: none;
	box-shadow: none;
}

/* FAQ toggles: flat list rows in the brand voice — bold question, ink on
 * hover, the WCKD chevron carries the state. */
.accordion-toggle{
	font-weight: var(--text-semibold);
	color: var(--text-color-header);
}
.accordion-toggle:hover{
	background: var(--background-color-fade);
	color: var(--neutral-color);
}

/* WCKD list filter — chip radios + keyword input in the brand voice.
 * Behaviour lives in wckd-ui.js; only the controls are styled here. */
.wckd-filter .filter-bar{
	display: flex;
	flex-wrap: wrap;
	gap: var(--size-s);
	align-items: center;
	margin-bottom: var(--size-xl);
}
.wckd-filter .filter-bar label{cursor: pointer}
.wckd-filter .filter-bar input[type="radio"]{
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.wckd-filter .filter-bar span{
	display: inline-block;
	padding: var(--size-xs) var(--size-m);
	border: 2px solid var(--neutral-color);
	background: var(--background-color);
	color: var(--neutral-color);
	font-size: var(--text-s);
	font-weight: var(--text-semibold);
}
.wckd-filter .filter-bar input[type="radio"]:checked + span{
	background: var(--neutral-color);
	color: var(--white);
}
.wckd-filter .filter-bar input[type="radio"]:focus-visible + span{
	outline: 2px solid var(--primary-color);
	outline-offset: 2px;
}
.wckd-filter .filter-bar input[type="search"]{
	flex: 1;
	border-radius: var(--border-radius, 0);
	min-width: 200px;
	padding: var(--size-xs) var(--size-m);
	border: 2px solid var(--neutral-color);
	background: var(--background-color);
	font-size: var(--text-s);
}

/* Stats — logo language: flat colour tiles like the mark's buildings.
 * Rotation blue → green → yellow → orange; yellow flips to ink text. */
/* Outline alone = illustrative; the offset shadow is reserved for
 * interactive elements (buttons), so tiles must not carry it. */
.stats-count > .stat{
	border: 2px solid var(--neutral-color);
	padding: var(--size-l);
	background: var(--blue);
}
.stats-count > .stat:nth-child(4n+2){background: var(--green)}
.stats-count > .stat:nth-child(4n+3){background: var(--yellow)}
.stats-count > .stat:nth-child(4n+4){background: var(--orange)}
.stats-count > .stat .stat_value{color: var(--white)}
.stats-count > .stat .stat_label{color: rgba(255, 255, 255, 0.9)}
.stats-count > .stat:nth-child(4n+3) .stat_value{color: var(--neutral-color)}
.stats-count > .stat:nth-child(4n+3) .stat_label{color: var(--text-color-secondary)}


/* Footer: wavy top edge. Two layers so it survives photos and dark
 * bands behind it — ::before is the footer ground itself, masked to a
 * FILLED wave that bites into whatever sits above (no straight seam);
 * ::after is the ink stroke riding that same edge. */
.site-footer{
	position: relative;
	/* Opaque stand-in for .fill-fade (5% ink over the page ground) — the
	 * bite layer must match exactly, and a translucent fill can't. */
	background-color: color-mix(in srgb, var(--black) 5%, var(--background-color));
	padding-top: var(--size-l);
}
.site-footer::before,
.site-footer::after{
	content: '';
	position: absolute;
	top: -9px;
	left: 0;
	right: 0;
	height: 10px;
	pointer-events: none;
}
.site-footer::before{
	background-color: color-mix(in srgb, var(--black) 5%, var(--background-color));
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath d='M0 5 Q6 1 12 5 T24 5 L24 10 L0 10 Z'/%3E%3C/svg%3E") repeat-x bottom / 24px 10px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath d='M0 5 Q6 1 12 5 T24 5 L24 10 L0 10 Z'/%3E%3C/svg%3E") repeat-x bottom / 24px 10px;
}
.site-footer::after{
	background-color: var(--neutral-color);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath d='M0 5 Q6 1 12 5 T24 5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") repeat-x bottom / 24px 10px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath d='M0 5 Q6 1 12 5 T24 5' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") repeat-x bottom / 24px 10px;
}

/* A filtered/clipped ancestor becomes the containing block for fixed
 * positioning, trapping the bio modal inside the card. Release both while
 * a modal inside the card is open — the card is behind the backdrop then. */
.card:has(.wckd-overlay-content.open-overlay){
	filter: none;
	clip-path: none;
	overflow: visible;
}

/* ------------------------------------------------------------------ *
 * Brand identity layer — motifs from the 2023–2026 Strategic Plan and
 * 2025 Annual Report. See design.md for the system these implement.
 * ------------------------------------------------------------------ */

/* Poppins runs wider than the system stack; keep headings a notch tighter. */
h1, .h1, h2, .h2{letter-spacing: -0.025em; text-wrap: balance;}

/* Quad strip: the four-colour signature bar (blue → teal → yellow → orange).
 * Use as its own block, or lead a kicker with it. */
.brand-strip{
	display: block;
	width: 72px;
	height: 6px;
	border-radius: 3px;
	background: linear-gradient(90deg,
		var(--blue) 0 25%, var(--green) 25% 50%,
		var(--yellow) 50% 75%, var(--orange) 75% 100%);
}
.wckd-kicker .brand-strip{width: 40px; height: 5px;}

/* Impact bands: black sections with knockout type, per the print system.
 * Follows the WCKD fill/filled convention (see .fill-dark etc). */
.fill-ink{background-color: var(--text-color-header);}
.fill-ink, .fill-ink .head{color: #fff;}
.fill-ink :is(h1,h2,h3,h4){color: #fff;}
.fill-ink p{color: rgba(255, 255, 255, 0.82);}


/* Accent words: one coloured word inside a headline, authored as <em>.
 * Default accent is orange; modifiers swap it. Yellow only on ink. */
h1 em, h2 em, h3 em, .h1 em, .h2 em, .h3 em{
	font-style: normal;
	color: var(--em-color, var(--secondary-color));
}
.em-blue{--em-color: var(--primary-color);}
.em-teal{--em-color: var(--tertiary-color);}
.fill-ink .em-yellow{--em-color: var(--yellow);}
/* Accent words over dark photo tints: orange reads muddy against busy
   imagery; yellow is the brand's accent for dark grounds. */
.type-image .overlay.tint-dark{--em-color: var(--yellow);}

/* Stats pick up the display face — the Annual Report's "By the Numbers"
 * treatment, applied to the existing .stat component above. */
.stat_value{font-family: var(--font-display);}
.fill-ink .stat_value{color: #fff;}
.fill-ink .stat_label{color: rgba(255, 255, 255, 0.72);}

/* ------------------------------------------------------------------ *
 * Brand guidelines page (/brand, page-brand.php) — specimen furniture.
 * ------------------------------------------------------------------ */
.brand-guide .brand-logo-tile{
	display: grid;
	place-items: center;
	align-content: center;
	gap: var(--size-m);
	min-height: 220px;
	padding: var(--size-xl);
	background: #fff;
	border: 1px solid var(--line-color);
	border-radius: var(--size-s);
	text-align: center;
}
.brand-guide .brand-logo-tile small{color: var(--text-color-secondary);}
.brand-guide .brand-logo-tile-ink small{color: rgba(255, 255, 255, 0.72);}
.brand-guide .brand-logo-panel{
	display: inline-grid;
	place-items: center;
	background: #fff;
	border-radius: var(--size-s);
	padding: var(--size-m) var(--size-l);
}
/* Inside the panel the svg has no intrinsic size — give it one.
 * (Extra specificity: the .brand-logo-tile svg rule below would win on order.) */
.brand-guide .brand-logo-tile .brand-logo-panel svg,
.brand-guide .brand-logo-tile .brand-logo-panel img{width: 96px; height: 96px; max-width: none;}
.brand-guide .brand-logo-tile-ink{background: var(--text-color-header);}
.brand-guide .brand-logo,
.brand-guide .brand-logo-tile svg{max-height: 120px; width: auto; max-width: 60%;}

.brand-swatches{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--size-m);
}
.brand-swatch{
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--size-m);
	background: #fff;
	border: 1px solid var(--line-color);
	border-radius: var(--size-s);
}
.brand-swatch_chip{
	height: 72px;
	border-radius: calc(var(--size-s) - 4px);
	margin-bottom: var(--size-s);
}
.brand-swatch strong{color: var(--text-color-header);}
.brand-swatch small{color: var(--text-color-secondary); line-height: 1.4;}

.brand-specimen_row{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--size-m);
	margin: 0;
	padding: var(--size-m) 0;
	border-top: 1px solid var(--line-color);
	font-size: var(--text-xl);
	color: var(--text-color-header);
}
.brand-specimen_row span{
	font-size: var(--text-s);
	font-weight: 400;
	color: var(--text-color-secondary);
	font-variant-numeric: tabular-nums;
}
.brand-specimen_display{font-family: var(--font-display); font-weight: 700;}

/* 404 — quick-links list. */
.subnav-404{list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--size-m);}
.subnav-404 a{font-weight: var(--text-semibold);}

/* The quad strip inside kickers sits on the text's optical centre. */
.wckd-kicker .brand-strip{align-self: center; flex: none;}

/* Section rhythm — sections breathe more than the pad-* utilities allow.
 * Scoped to the builder's inner column so cards/components keep their pad.
 * Covers every standard tier the section_pad field offers; pad-0/xs/s stay
 * utility-sized for deliberately tight sections. */
section > .pad{padding-block: clamp(3.5rem, 2.25rem + 4vw, 6rem);}
section > .pad-l{padding-block: clamp(4rem, 2.5rem + 4.5vw, 6.75rem);}
section > .pad-xl{padding-block: clamp(4.5rem, 2.75rem + 5vw, 7.5rem);}
section > .pad-xxl{padding-block: clamp(5.5rem, 3rem + 6vw, 9rem);}

/* Buttons breathe: a button (or button row) directly after copy gets air. */
section :is(p, ul, ol) + :is(.button, .buttons){margin-top: var(--size-l);}

/* Slide panels: the slide word is a display moment — uppercase, tight copy. */
.wckd-slides > .column h3{text-transform: uppercase;}
.wckd-slides > .column p{margin: 0;}

/* Section foot mirrors the head's rhythm — air above the fine print. */
section .foot{margin-top: var(--size-xl);}

/* Slide deck: cap each card below the viewport so a stuck slide keeps a
 * gap at the bottom edge, and give each slide air before the next covers it. */
.wckd-slides > .column{
	max-height: calc(100dvh - var(--wckd-slides-sticky-top) - var(--size-xl));
	margin-bottom: var(--size-l);
}
.wckd-slides > .column:last-child{margin-bottom: 0;}

/* Schedule section — dated rows; past dates step back. */
ol.schedule{list-style: none; margin: 0; padding: 0;}
.schedule_item{
	display: flex;
	gap: var(--size-l);
	align-items: baseline;
	padding: var(--size-m) 0;
	border-top: 1px solid var(--line-color);
}
.schedule_item:last-child{border-bottom: 1px solid var(--line-color);}
.schedule_date{flex: none; width: 5.5em; display: flex; flex-direction: column;}
.schedule_date b{
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--text-color-header);
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}
.schedule_date small{font-size: var(--text-xs); color: var(--text-color-secondary); text-transform: uppercase; letter-spacing: 0.06em;}
.schedule_body{min-width: 0;}
.schedule_meta{font-size: var(--text-s); color: var(--text-color-secondary);}
.schedule_note{font-size: var(--text-s); margin-top: 2px;}
.schedule_tag{margin-left: auto; align-self: center;}
.schedule_item.is-past{opacity: 0.55;}
.content-notice .button{font-weight: var(--text-semibold);}

/* Project cards — the case-file photo rides beside the copy. */
.project_row{display: flex; gap: var(--size-xl); align-items: flex-start;}
.project_content{flex: 1 1 60%; min-width: 0;}
.project_media{flex: 1 1 40%; max-width: 420px; margin: 0;}
.project_media img{width: 100%; height: 100%; min-height: 220px; object-fit: cover; border-radius: var(--size-s); display: block;}
@media (max-width: 768px){
	.project_row{flex-direction: column;}
	.project_media{max-width: none; width: 100%;}
}

/* ------------------------------------------------------------------ *
 * Motion layer — entrances driven by WCKD's .animate / .in-view
 * observer (wckd-ui.js). Two moves only, used consistently:
 *   .animate.fade-in        — one block rises into place
 *   .animate.fade-in-group  — children rise in sequence
 * ------------------------------------------------------------------ */
.has-motion .animate.fade-in{
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.animate.fade-in.in-view{opacity: 1; transform: none;}

.has-motion .animate.fade-in-group > *{
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.animate.fade-in-group.in-view > *{opacity: 1; transform: none;}
.animate.fade-in-group.in-view > :nth-child(2){transition-delay: 0.07s;}
.animate.fade-in-group.in-view > :nth-child(3){transition-delay: 0.14s;}
.animate.fade-in-group.in-view > :nth-child(4){transition-delay: 0.21s;}
.animate.fade-in-group.in-view > :nth-child(5){transition-delay: 0.28s;}
.animate.fade-in-group.in-view > :nth-child(6){transition-delay: 0.35s;}
.animate.fade-in-group.in-view > :nth-child(n+7){transition-delay: 0.4s;}

/* The kicker's quad strip draws in with its section head. */
.has-motion .animate.fade-in .wckd-kicker .brand-strip{
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.5s 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}
.animate.fade-in.in-view .wckd-kicker .brand-strip{transform: scaleX(1);}

@media (prefers-reduced-motion: reduce){
	.animate.fade-in,
	.animate.fade-in-group > *,
	.animate.fade-in .wckd-kicker .brand-strip{
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Seams: when two sections share the default page ground there is no
 * visual boundary between them, so their block pads stack into a double
 * gap. Trim the second section's top pad at those seams. Fills, photo
 * heroes, and image bands keep full rhythm — their boundary is visible. */
/* Both halves of the seam shrink, so the total gap equals roughly one
 * rhythm unit instead of two stacked pads. */
section:not([class*="fill"]):not(.type-hero-bg):not(.type-image):has(+ section:not([class*="fill"]):not(.type-image))
	> :is(.pad, .pad-l, .pad-xl, .pad-xxl){
	padding-bottom: clamp(1.75rem, 1.25rem + 1.75vw, 3.625rem);
}
section:not([class*="fill"]):not(.type-hero-bg):not(.type-image)
	+ section:not([class*="fill"]):not(.type-image)
	> :is(.pad, .pad-l, .pad-xl, .pad-xxl){
	padding-top: clamp(1.75rem, 1.25rem + 1.75vw, 3.625rem);
}

/* Subnav pages: the hero and the subnav wrapper form the same seam. */
section.type-hero:not(.type-hero-bg):not([class*="fill"]):has(+ .type-subnav) > .pad-xl{
	padding-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.75rem);
}
.subnav_content > section:first-child:not([class*="fill"]) > :is(.pad, .pad-l, .pad-xl, .pad-xxl){
	padding-top: 0;
}

/* Sections print a .foot container even when its pattern renders nothing —
 * hide empty foots so they can't add phantom margin to the rhythm. */
section .foot:empty{display: none;}

/* Sitemap tree — directory-style connector lines. The rail is the line
 * colour; each row's tick picks up the brand blue on hover. */
.sitemap-tree{list-style: none; margin: var(--size-m) 0 0; padding: 0;}
.sitemap-tree ul{list-style: none; margin: 0; padding: 0;}
.sitemap-tree li{
	position: relative;
	margin: 0;
	padding: 5px 0 5px calc(var(--size-l) + 6px);
}
.sitemap-tree li::before,
.sitemap-tree li::after{content: ''; position: absolute; left: 8px;}
/* Vertical rail… */
.sitemap-tree li::before{top: 0; bottom: 0; border-left: 1px solid var(--line-color);}
.sitemap-tree li:last-child::before{bottom: auto; height: 1.15em;}
/* …and the horizontal tick to the label. */
.sitemap-tree li::after{
	top: 1.15em;
	width: var(--size-m);
	border-top: 1px solid var(--line-color);
}
.sitemap-tree li:hover > a{color: var(--link-hover-color);}
.sitemap-tree li:hover::after{border-top-color: var(--primary-color);}
.sitemap-tree a{color: var(--text-color); font-weight: var(--text-semibold); text-decoration: none;}
.sitemap-tree a:hover{text-decoration: underline;}
/* Nested branches indent and continue the rail. */
.sitemap-tree .children{margin-left: calc(var(--size-l) + 6px);}

/* Clickable grid cells (plain pattern): the whole cell is an <a>, so
 * copy must stay ink — only the action link reads as a link. */
.type-grid a.column{color: var(--text-color);}
.type-grid a.column:hover{text-decoration: none; color: var(--text-color);}
.type-grid a.column :is(h3, h4){color: var(--text-color-header);}

/* Card & cell action links use the site's real button chrome (.outline
 * size-s in the markup). Air above, and white on dark photo tints. */
.card .button.outline, a.card .button.outline, .type-grid a.column .button.outline{margin-top: var(--size-m);}


/* CTA bands are closing moments — everything centers, whatever the
 * row's head-align says. */
.type-cta .head{text-align: center; margin-inline: auto; max-width: 48rem;}
.type-cta .head .buttons,
.type-cta .buttons{justify-content: center; margin-inline: auto;}

/* Outline buttons: the frame follows the text, so the same button reads
 * ink-on-light and white-on-dark (via WCKD's .white-text context) with
 * no per-context overrides. */
.button.outline, button.outline, a.button.outline{border-color: currentColor;}

/* Footer legal nav: five items now — wrap on narrow screens instead of
 * pushing past the viewport. The flex container is the menu UL (WCKD's
 * ul.horizontal is inline-flex nowrap), so the wrap must live there —
 * on the nav it never engages. */
.site-footer nav ul.horizontal{flex-wrap: wrap; max-width: 100%; row-gap: var(--size-xs);}

/* Mobile carousel: a single right peek — double peek squeezes slides. */
@media (max-width: 590px){
	.wckd-carousel.peek-left{--peek: var(--size-xxl); padding-left: 0; scroll-padding-left: 0;}
}

/* Media-above cards: the photo bleeds to the card's edges on a uniform
 * 3:2 crop, so side-by-side cards align regardless of source ratios —
 * text below keeps its padded inset. */
.cards .card:not(.card-partner) > img:not(.person_photo):not(.icon){
	padding: 0;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

/* Cards pack from the top; only the action button pins to the base.
 * (space-between distributed match-height slack into the text gaps,
 * making siblings' spacing drift apart.) */
a.card{justify-content: flex-start;}
.cards .card > .button:last-child,
.cards .card > a.button:last-child,
.cards .card > span.button:last-child{margin-top: auto;}
.cards .card > :nth-last-child(2){margin-bottom: var(--size-m);}
.cards .card > img + .wckd-kicker{margin-top: var(--size-m);}

/* Full-bleed focal point: which part of the photo survives the crop.
 * Set per-section via the Image focus field (heroes and image bands). */

/* A head with nothing visible after it (empty foot) drops its bottom
 * margin — otherwise head-only sections (CTAs) sit bottom-heavy. */
section .head:has(+ .foot:empty){margin-bottom: 0;}

/* Program lifecycle notice — a quiet band under the header on closed
 * and archived program pages. */
.program-status-notice{background: var(--yellow); color: var(--text-color-header); font-size: var(--text-s);}
.program-status-notice > div{display: flex; gap: var(--size-xs) var(--size-m); align-items: baseline; padding: var(--size-s) var(--size-xl); flex-wrap: wrap;}
.program-status-notice .wckd-kicker{font-weight: var(--text-bold); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--text-xs);}

/* The record — past initiatives list on Our Impact. */
ul.past-initiatives{list-style: none; margin: var(--size-m) 0 0; padding: 0;}
.past-initiatives li{padding: var(--size-s) 0; border-top: 1px solid var(--line-color);}
.past-initiatives li:last-child{border-bottom: 1px solid var(--line-color);}
.past-initiatives a{font-weight: var(--text-semibold);}
.past-initiatives small{display: block; font-size: var(--text-xs); color: var(--text-color-secondary);}

/* ------------------------------------------------------------------ *
 * Mobile layout fixes
 * ------------------------------------------------------------------ */

/* Social buttons ([dbia_socials] — Contact page): five labelled buttons
 * outgrow a phone row — wrap instead of pushing past the viewport. */
.social-links{flex-wrap: wrap; row-gap: var(--size-s);}

/* Compact header: the hamburger is the row's last child and otherwise
 * sits flush against the screen edge. */
nav.wckd-menu-compact{padding-right: var(--size-s);}

/* Utility bar: the full org name wraps to four lines on phones, and the
 * header logo directly below already carries the identity — keep just
 * the switch-to-Boro link. */
@media (max-width: 590px){
	.utility-bar > span{display: none;}
	.utility-bar{justify-content: center;}
}

/* Sticky columns are a side-by-side pattern (heading or subnav riding
 * beside the body). Once the grid collapses and the column stacks ABOVE
 * the body, sticky makes it scroll over the text — unstick it. count-3
 * collapses the split at 768px, so that is the boundary. */
@media (max-width: 768px){
	.type-content-split .column.sticky,
	.type-subnav .column.sticky{position: static;}
}

/* Journey timeline: the marker is a fixed-size circle but also a flex
 * item, so on phones it gets crushed to the number's own width — ovals,
 * ragged indents (a "10" squashes less than a "1"), and the rail line
 * left running through the text instead of hiding behind the markers. */
.wckd-journey .journey-marker{flex: 0 0 auto;}

/* The centered variant's alternating h3 push (margin-left: auto on even
 * steps) sits outside the kit's min-width gate, so on phones every second
 * heading drifts right — pin it back. The 75% heading measure is also a
 * side-by-side nicety; on a phone column it just forces early wraps. */
@media (max-width: 767px){
	.wckd-journey.centered > .column:nth-child(even) .group h3{margin-left: 0;}
	.wckd-journey .group h3{max-width: none;}
}

/* WCKD's a.button.text colour outranks .white-text, so text-style buttons
 * on dark bands (the utility bar) inherit their band's white explicitly. */
.white-text .button.text, .white-text a.button.text{color: inherit;}


/* ---------------------------------------------------------------------
 * Accessibility: WCAG 2.2 AA text contrast (AODA audit, 2026-10-09).
 * The brand colours stay as they are for strips, fills and decoration;
 * wherever a brand colour carries or sits behind TEXT it uses the
 * deeper "-ink" step below, the smallest shift that passes 4.5:1.
 * ------------------------------------------------------------------- */
:root,
[data-theme="light"] {
	--blue-ink: #1f7eaa;      /* white text on it: 4.5:1 */
	--blue-text: #1d759d;     /* as text on white/page grounds: 4.6:1+ */
	--teal-ink: #10847e;      /* white text on it: 4.5:1 */
	--teal-text: #0f7b76;
	--orange-ink: #cc4c22;    /* white text on it: 4.5:1 */
	--amber-text: #946725;
	--link-color: var(--blue-text);
	--button-bg: var(--blue-ink);
	--text-color-secondary: rgba(40, 47, 57, 0.8);
}
/* Solid blue surfaces that carry white text. */
.sponsor_tier_tag{background: var(--blue-ink);}
/* Blue used as text. */
.person_role{color: var(--blue-text);}
.project_status.status-info{color: var(--blue-text);}
.project_status.status-success{color: var(--teal-text);}
.project_status.status-warning{color: var(--amber-text);}
.em-teal{--em-color: var(--teal-text);}
.fill-ink .em-teal{--em-color: var(--tertiary-color);}
/* Status tiles: deeper fills so white labels read; yellow keeps ink text. */
.stats-count > .stat{background: var(--blue-ink);}
.stats-count > .stat:nth-child(4n+2){background: var(--teal-ink);}
.stats-count > .stat:nth-child(4n+4){background: var(--orange-ink);}
.stats-count > .stat .stat_label{color: var(--white);}
.stats-count > .stat:nth-child(4n+3) .stat_label{color: var(--neutral-color);}
/* WCKD's .fade (opacity 0.7) drops body-size grey text below 4.5:1 —
 * secondary text uses its own token at full opacity instead. */
.priority-related li.fade, .cards .card p.fade{opacity: 1; color: var(--text-color-secondary);}
.content-notice .button{color: var(--link-color);}
/* Small print (12px) needs full-strength secondary text, not opacity. */
.fine-print, .brand-swatch small, .brand-guide .brand-logo-tile small{opacity: 1; color: var(--text-color-secondary);}
.fine-print a{color: var(--link-color); opacity: 1;}
.brand-guide .brand-logo-tile-ink > small{color: rgba(255, 255, 255, 0.85);}

/* WCKD overlays sit at z-index 1002 over a body-level backdrop (1000), but
 * a dialog inside a layered ancestor (hero .overlay z:2, animated grids'
 * transforms) is capped by that ancestor's stacking context and lands
 * under the backdrop. While a dialog is open, its ancestors drop the
 * properties that create those contexts; the page behind is dimmed then. */
:has(.wckd-overlay-content.open-overlay):not(html){z-index: auto !important; transform: none !important; filter: none !important;}
/* Skip link: a solid, high-contrast box so it is unmistakable on focus. */
.skip-link:focus-visible{background: var(--neutral-color); color: var(--white); outline: 2px solid var(--blue-text); outline-offset: 2px;}