/*
Theme Name: Ochre
Theme URI: https://ochrecharity.org.uk
Author: Digital Footprints
Author URI: https://digital-footprints.co.uk
Description: Block theme for Ochre, the oesophageal cancer charity. Rebuilt in 2026 from the previous Elementor site: same navy, coral, Outfit and Poppins, photo heroes and cards, without the page builder.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ochre
*/

/* Tokens live in theme.json. This file holds layout and interaction that theme.json can't express. */

:root {
	--oc-radius: 14px;
	--oc-radius-sm: 10px;
	--oc-shadow: 0 10px 40px rgba(30, 60, 142, 0.08);
	--oc-shadow-hover: 0 18px 50px rgba(30, 60, 142, 0.14);
	--oc-header-h: 96px;
	--oc-ease: cubic-bezier(.2, .7, .2, 1);
	--oc-icon-arrow: url("assets/icons/arrow.svg");
	--oc-icon-check: url("assets/icons/check.svg");
	--oc-icon-heart: url("assets/icons/heart.svg");
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
:target { scroll-margin-top: calc(var(--oc-header-h) + 20px); }
img { height: auto; }
body { -webkit-font-smoothing: antialiased; }
.wp-site-blocks { padding-top: 0; }
.wp-site-blocks > * { margin-block-start: 0; }
.wp-site-blocks > main { margin-block-start: 0; }

/* Headings inside dark panels follow the panel's text colour (theme.json gives every heading navy). */
.has-white-color :is(h1, h2, h3, h4, h5, h6):not(.has-text-color),
.wp-block-cover :is(h1, h2, h3, h4, h5, h6):not(.has-text-color) { color: inherit; }
.has-white-color a:not(.wp-element-button):not(.has-text-color),
.wp-block-cover a:not(.wp-element-button):not(.has-text-color) { color: inherit; text-decoration-color: rgba(255, 255, 255, .5); }

.screen-reader-text:focus { clip: auto !important; }
a:focus-visible, .wp-element-button:focus-visible, summary:focus-visible { outline: 3px solid var(--wp--preset--color--peach); outline-offset: 3px; }

/* ---------- buttons ---------- */

.wp-element-button, .wp-block-button__link {
	display: inline-flex; align-items: center; gap: .55em;
	transition: background-color .25s var(--oc-ease), color .25s var(--oc-ease), transform .25s var(--oc-ease);
}
.wp-block-button__link::after, .oc-read-more::after {
	content: ""; width: .8em; height: .8em; flex: none;
	background: currentColor; -webkit-mask: var(--oc-icon-arrow) center / contain no-repeat; mask: var(--oc-icon-arrow) center / contain no-repeat;
	transition: transform .25s var(--oc-ease);
}
.wp-block-button__link:hover::after, .oc-read-more:hover::after { transform: translate(2px, -2px); }
.wp-block-button__link:hover { transform: translateY(-1px); }
.wp-block-button__link.has-white-background-color:hover { background-color: var(--wp--preset--color--navy) !important; color: #fff !important; }
.wp-block-button__link.has-blue-background-color:hover { background-color: var(--wp--preset--color--navy) !important; }
.has-coral-background-color .wp-block-button__link:not(.has-background) { background: #fff; color: var(--wp--preset--color--coral); }
.has-coral-background-color .wp-block-button__link:not(.has-background):hover { background: var(--wp--preset--color--navy); color: #fff; }

/* ---------- header ---------- */

.oc-site-header {
	position: absolute; inset: 0 0 auto 0; z-index: 50;
	color: #fff; transition: background-color .3s var(--oc-ease), box-shadow .3s var(--oc-ease);
}
.admin-bar .oc-site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .oc-site-header { top: 46px; } }
.oc-site-header.is-stuck {
	position: fixed; background: rgba(30, 60, 142, .97); box-shadow: 0 6px 30px rgba(0, 0, 0, .15);
	animation: oc-drop .35s var(--oc-ease);
}
@keyframes oc-drop { from { transform: translateY(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .oc-site-header.is-stuck { animation: none; } }
.oc-header { border-bottom: 1px solid rgba(255, 255, 255, .18); }
.oc-site-header.is-stuck .oc-header { border-bottom-color: transparent; }
.oc-header__bar { min-height: var(--oc-header-h); gap: 24px; }
.oc-site-header.is-stuck .oc-header__bar { min-height: 76px; }
.oc-header .wp-block-site-logo img { width: 150px; }
.oc-header .wp-block-navigation { color: #fff; }
.oc-header .wp-block-navigation-item__content { padding: 8px 4px; }
.oc-header .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--peach); }
.oc-header .wp-block-navigation__submenu-container {
	color: var(--wp--preset--color--navy) !important; background: #fff !important; border: 0 !important;
	border-radius: var(--oc-radius-sm); box-shadow: var(--oc-shadow-hover); padding: 10px 0; min-width: 260px !important;
}
.oc-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 9px 20px; font-size: 14px; }
.oc-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--coral); background: var(--wp--preset--color--mist); }
/* menu button: a round button at the right, next to Donate (matches the close button inside the menu) */
.oc-header .wp-block-navigation__responsive-container-open {
	width: 46px; height: 46px; border-radius: 50%; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, .14); color: #fff; transition: background-color .2s;
}
.oc-header .wp-block-navigation__responsive-container-open:hover { background: var(--wp--preset--color--coral); }
.oc-header .wp-block-navigation__responsive-container-open svg { width: 24px; height: 24px; }
@media (max-width: 1023px) {
	.oc-header__bar { gap: 12px !important; }
	.oc-header__bar > .wp-block-navigation { order: 3; }
	.oc-header__bar > .oc-header__donate { margin-left: auto; }
}

/* ---------- mobile menu (the navigation block's overlay) ----------
   Grouped and left-aligned: section names as small peach labels, pages as big tappable rows with an arrow,
   then a full-width Donate button and the email address (two menu items that only show here). */
.oc-nav-cta, .oc-nav-mail { display: none !important; }
.oc-header .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	padding: 0 !important; overflow-y: auto;
	background: radial-gradient(140% 70% at 100% 0%, #4871e5 0%, #1e3c8e 48%, #172f70 100%) !important;
}
.oc-header .is-menu-open .wp-block-navigation__responsive-close,
.oc-header .is-menu-open .wp-block-navigation__responsive-dialog { max-width: none; min-height: 100%; }
.oc-header .is-menu-open .wp-block-navigation__responsive-dialog { padding: 26px clamp(22px, 6vw, 40px) 40px; }
.oc-header .is-menu-open .wp-block-navigation__responsive-container-close {
	top: 20px; right: clamp(16px, 5vw, 34px); width: 46px; height: 46px; border-radius: 50%;
	display: grid; place-items: center; background: rgba(255, 255, 255, .12); color: #fff; transition: background-color .2s, transform .3s var(--oc-ease);
}
.oc-header .is-menu-open .wp-block-navigation__responsive-container-close:hover { background: var(--wp--preset--color--coral); transform: rotate(90deg); }
.oc-header .is-menu-open .wp-block-navigation__responsive-container-close svg { width: 22px; height: 22px; }
.oc-header .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 58px !important; align-items: stretch !important; }
.oc-header .is-menu-open .wp-block-navigation__responsive-container-content::before {
	content: "Menu"; position: absolute; top: 34px; left: clamp(22px, 6vw, 40px);
	font: 600 13px/1 var(--wp--preset--font-family--poppins); letter-spacing: 3px; text-transform: uppercase; color: rgba(255, 255, 255, .6);
}
.oc-header .is-menu-open .wp-block-navigation__container { width: 100%; align-items: stretch !important; gap: 0 !important; }

/* every top-level entry is a row with a hairline under it */
.oc-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%; align-items: stretch !important; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .14);
	animation: oc-menu-in .5s var(--oc-ease) both;
}
.oc-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) { animation-delay: .04s; }
.oc-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) { animation-delay: .08s; }
.oc-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) { animation-delay: .12s; }
.oc-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) { animation-delay: .16s; }
.oc-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(n+6) { animation-delay: .2s; }
@keyframes oc-menu-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .oc-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { animation: none; } }

/* links: big Outfit rows with an arrow that nudges on tap/hover */
.oc-header .is-menu-open .wp-block-navigation-item__content {
	display: flex !important; align-items: center; justify-content: space-between; gap: 16px; width: 100%; box-sizing: border-box;
	font: 600 clamp(21px, 5.6vw, 24px)/1.25 var(--wp--preset--font-family--outfit); padding: 8px 0 !important; color: #fff;
	text-decoration: none; text-align: left;
}
.oc-header .is-menu-open a.wp-block-navigation-item__content[href]::after {
	content: ""; flex: none; width: 18px; height: 18px; background: var(--wp--preset--color--peach);
	-webkit-mask: var(--oc-icon-arrow) center / contain no-repeat; mask: var(--oc-icon-arrow) center / contain no-repeat;
	transition: transform .25s var(--oc-ease);
}
.oc-header .is-menu-open a.wp-block-navigation-item__content[href]:hover { color: var(--wp--preset--color--peach); }
.oc-header .is-menu-open a.wp-block-navigation-item__content[href]:hover::after { transform: translate(3px, -3px); }
.oc-header .is-menu-open .wp-block-navigation-item__content:focus-visible { outline: 2px solid rgba(255, 255, 255, .5); outline-offset: 4px; border-radius: 6px; }

/* a section with pages under it: its name becomes a small label (still a link where it has a page: About Us) */
.oc-header .is-menu-open .has-child > .wp-block-navigation-item__content {
	font: 500 12.5px/1.2 var(--wp--preset--font-family--poppins); letter-spacing: 2.4px; text-transform: uppercase;
	color: var(--wp--preset--color--peach); padding: 4px 0 6px !important; justify-content: flex-start;
}
.oc-header .is-menu-open .has-child > a.wp-block-navigation-item__content[href]::after { width: 12px; height: 12px; }
.oc-header .is-menu-open .wp-block-navigation__submenu-icon { display: none !important; }
.oc-header .is-menu-open .wp-block-navigation__submenu-container {
	background: none !important; color: #fff !important; box-shadow: none !important; border: 0 !important;
	padding: 0 !important; min-width: 0 !important; width: 100% !important; gap: 0 !important; position: static !important;
}
.oc-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { width: 100%; }
.oc-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: clamp(19px, 5vw, 21px); font-weight: 500; padding: 9px 0 !important; color: #fff !important;
}
.oc-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: none; color: var(--wp--preset--color--peach) !important; }

/* The full menu needs ~1000px: below that (WordPress only collapses it under 600px) use the menu button + overlay. */
@media (min-width: 600px) and (max-width: 1023px) {
	.oc-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.oc-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
@media (min-width: 600px) {
	.oc-header .is-menu-open .wp-block-navigation__responsive-container-content { max-width: 560px; margin-inline: auto; }
	.oc-header .is-menu-open .wp-block-navigation__responsive-container-content::before { left: 0; }
	.oc-header .is-menu-open .wp-block-navigation__responsive-container-content { position: relative; }
}

/* Donate button + email, at the foot of the menu */
.oc-header .is-menu-open .oc-nav-cta, .oc-header .is-menu-open .oc-nav-mail { display: flex !important; border-bottom: 0 !important; }
.oc-header .is-menu-open .oc-nav-cta { padding: 30px 0 0 !important; }
.oc-header .is-menu-open .oc-nav-cta .wp-block-navigation-item__content {
	justify-content: center; gap: 10px; background: var(--wp--preset--color--coral); border-radius: 50px; padding: 17px 24px !important;
	font: 500 17px/1.2 var(--wp--preset--font-family--poppins); box-shadow: 0 12px 30px rgba(239, 90, 111, .35);
}
.oc-header .is-menu-open .oc-nav-cta .wp-block-navigation-item__content::after { background: #fff !important; width: 14px !important; height: 14px !important; }
.oc-header .is-menu-open .oc-nav-cta .wp-block-navigation-item__content:hover { background: #fff; color: var(--wp--preset--color--coral); }
.oc-header .is-menu-open .oc-nav-cta .wp-block-navigation-item__content:hover::after { background: var(--wp--preset--color--coral) !important; }
.oc-header .is-menu-open .oc-nav-mail { padding: 18px 0 0 !important; }
.oc-header .is-menu-open .oc-nav-mail .wp-block-navigation-item__content {
	justify-content: center; gap: 10px; font: 400 15px/1.4 var(--wp--preset--font-family--poppins); color: rgba(255, 255, 255, .85);
}
.oc-header .is-menu-open .oc-nav-mail .wp-block-navigation-item__content::after { display: none; }
.oc-header .is-menu-open .oc-nav-mail .wp-block-navigation-item__content::before {
	content: ""; width: 18px; height: 18px; background: currentColor;
	-webkit-mask: url("assets/icons/mail.svg") center / contain no-repeat; mask: url("assets/icons/mail.svg") center / contain no-repeat;
}
.oc-header__donate .wp-block-button__link { padding: 12px 24px; }
@media (max-width: 600px) {
	.oc-header .wp-block-site-logo img { width: 120px; }
	.oc-header__donate .wp-block-button__link { padding: 10px 16px; font-size: 14px; }
}

/* Pages open with a dark hero or banner; the header sits over it. */
.oc-hero, .oc-page-hero { padding-top: calc(var(--oc-header-h) + 60px) !important; }

/* ---------- heroes and banners ---------- */

.oc-hero { min-height: min(92vh, 860px) !important; padding-bottom: 60px !important; }
.oc-hero h1 { font-size: var(--wp--preset--font-size--hero); max-width: 14ch; margin-inline: auto !important; }
.oc-hero h1 + p { font-size: var(--wp--preset--font-size--lead); max-width: 62ch; margin-inline: auto !important; opacity: .95; }
.oc-hero .wp-block-buttons { margin-top: 30px; }
.oc-hero .oc-grid { margin-top: clamp(40px, 6vw, 80px); max-width: 1000px; margin-inline: auto; text-align: left; }
.oc-hero .oc-card { color: var(--wp--preset--color--ink); }
.oc-hero .oc-card--blue { color: #fff; }
.oc-hero .oc-iconbox { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 6px 20px; }
.oc-hero .oc-iconbox__icon { grid-column: 2; grid-row: 1 / span 2; }
.oc-hero .oc-iconbox__title { grid-column: 1; grid-row: 1; font-size: var(--wp--preset--font-size--large); }
.oc-hero .oc-iconbox > p { grid-column: 1; margin: 0; font-size: 14px; }
.oc-hero .oc-iconbox .oc-iconbox__icon { background: none; border: 2px solid currentColor; opacity: .9; }

.oc-page-hero { min-height: 380px; text-align: center; padding-bottom: 70px !important; }
.oc-page-hero h1 { font-size: var(--wp--preset--font-size--huge); margin: 0 auto; }
.oc-page-hero--plain, .oc-page-hero.has-navy-background-color {
	background: radial-gradient(120% 140% at 85% 0%, #4871e5 0%, #1e3c8e 55%, #172f70 100%) !important;
	min-height: 0; display: flex; flex-direction: column; justify-content: center;
}
.oc-page-hero .oc-crumbs { font-size: 14px; opacity: .85; margin-bottom: 0; }
.oc-page-hero .oc-crumbs a { color: inherit; }
.oc-page-hero .oc-meta { opacity: .9; font-size: 14px; }

/* ---------- sections ---------- */

.oc-section { padding-block: var(--wp--preset--spacing--70); }
.oc-section + .oc-section { padding-top: 0; }
.oc-section.has-background + .oc-section, .oc-section + .oc-section.has-background { padding-top: var(--wp--preset--spacing--70); }
.oc-section > .wp-block-columns { gap: clamp(24px, 4vw, 60px); }
.oc-section > .wp-block-columns:not(.oc-grid) + * { margin-top: 40px; }
/* the "eyebrow / heading / intro | View all" row */
.oc-section > .wp-block-columns:has(> .wp-block-column.is-vertically-aligned-center > .wp-block-buttons:only-child) {
	align-items: flex-end !important; border-bottom: 1px solid var(--wp--preset--color--border); padding-bottom: 30px; margin-bottom: 40px;
}
.oc-section > .wp-block-columns > .wp-block-column.is-vertically-aligned-center:has(> .wp-block-buttons:only-child) { align-self: flex-end; }
.oc-section > .wp-block-columns > .wp-block-column.is-vertically-aligned-center > .wp-block-buttons:only-child { justify-content: flex-end; }
@media (max-width: 781px) {
	.oc-section > .wp-block-columns > .wp-block-column.is-vertically-aligned-center > .wp-block-buttons:only-child { justify-content: flex-start; }
}

.oc-eyebrow {
	display: flex; align-items: center; gap: 10px;
	color: var(--wp--preset--color--coral); font-size: 14px; font-weight: 500; letter-spacing: 2.4px; text-transform: uppercase;
	margin-bottom: 4px !important;
}
.oc-eyebrow::before {
	content: ""; width: 16px; height: 16px; background: currentColor;
	-webkit-mask: var(--oc-icon-heart) center / contain no-repeat; mask: var(--oc-icon-heart) center / contain no-repeat;
}
.has-white-color .oc-eyebrow, .wp-block-cover .oc-eyebrow { color: var(--wp--preset--color--peach); }
.oc-eyebrow + :is(h1, h2, h3) { margin-top: 6px !important; }

/* ---------- grids and cards ---------- */

.oc-grid { gap: clamp(20px, 2.4vw, 30px) !important; }
.oc-grid > .wp-block-column { display: flex; flex-direction: column; }
.oc-grid > .wp-block-column > .oc-card { flex: 1; }

.oc-card {
	background: #fff; border-radius: var(--oc-radius); box-shadow: var(--oc-shadow);
	padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 14px;
	transition: transform .35s var(--oc-ease), box-shadow .35s var(--oc-ease);
}
.oc-card > * { margin-block: 0 !important; }
.oc-card > .wp-block-buttons:last-child { margin-top: auto !important; padding-top: 8px; }
.oc-grid .oc-card:hover { transform: translateY(-4px); box-shadow: var(--oc-shadow-hover); }
.oc-card.has-background:not(.has-white-background-color) { box-shadow: none; }
.oc-card--coral .oc-icon-list li::before, .has-coral-background-color .oc-icon-list li::before { background-color: var(--wp--preset--color--navy); }
.oc-card .wp-block-separator { margin-block: 4px !important; opacity: .5; }
.oc-card :is(h3, h4) { margin: 0; }

.oc-panel { border-radius: var(--oc-radius); padding: clamp(24px, 3vw, 36px); }

.oc-iconbox > * { margin-block: 0 0 10px; }
.oc-iconbox > *:last-child { margin-bottom: 0; }
.oc-iconbox__icon {
	width: 64px; height: 64px; border-radius: 50%; background: var(--wp--preset--color--coral);
	display: grid; place-items: center; margin: 0 0 18px !important;
}
.oc-iconbox__icon img { width: 60% !important; height: 60% !important; object-fit: contain; }
.oc-iconbox__title { font-size: var(--wp--preset--font-size--large); margin-bottom: 10px !important; }
.oc-iconbox__title a { color: inherit; text-decoration: none; }
.oc-iconbox__title a:hover { color: var(--wp--preset--color--coral); }

/* content pages: a big card per topic (icon + title, then text) */
.oc-section .wp-block-column > .oc-card + .oc-card, .oc-section .wp-block-column > .oc-card + .wp-block-group { margin-top: 30px; }
.oc-card > .oc-iconbox:first-child:not(:has(> p)):has(+ *) { display: flex; align-items: center; gap: 18px; }
.oc-card > .oc-iconbox:first-child:not(:has(> p)):has(+ *) .oc-iconbox__icon { margin: 0 !important; flex: none; }
.oc-card > .oc-iconbox:first-child:not(:has(> p)):has(+ *) .oc-iconbox__title { margin: 0 !important; }
.oc-card h4.wp-block-heading { font-size: var(--wp--preset--font-size--medium); margin-top: 10px !important; }

/* stats */
.oc-stat { background: var(--wp--preset--color--blue); color: #fff; border-radius: var(--oc-radius); padding: 26px 30px; text-align: center; }
.oc-stat__num { font-family: var(--wp--preset--font-family--outfit); font-weight: 600; font-size: var(--wp--preset--font-size--huge); line-height: 1; margin: 0 !important; }
.oc-stat__label { margin: 8px 0 0 !important; font-size: 14px; opacity: .9; }

/* photos */
.oc-photo { margin: 0; }
.oc-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--oc-radius); }
.oc-photo-card { --oc-photo-radius: var(--oc-radius) 240px 240px var(--oc-radius); overflow: visible !important; margin-bottom: 40px; }
.oc-photo-card > .wp-block-cover__image-background, .oc-photo-card > .wp-block-cover__background { border-radius: var(--oc-photo-radius); }
.oc-photo-card > .wp-block-cover__image-background { object-position: 0% 50% !important; }
.oc-photo-card > .wp-block-cover__inner-container { position: static; }   /* so the badge is placed against the photo itself */
@media (max-width: 781px) { .oc-photo-card { --oc-photo-radius: var(--oc-radius); } }
/* the "15+ Years of Support" badge hangs off the photo's bottom-right corner, as on the old site */
.oc-badge {
	position: absolute; right: -4px; bottom: -22px; z-index: 2; width: 68%; max-width: 280px;
	border-radius: var(--oc-radius-sm); padding: 34px 24px; text-align: center; box-shadow: 0 12px 30px rgba(30, 60, 142, .12);
}
.oc-badge > * { margin: 0 !important; }
.oc-badge .oc-stat__num { font-family: var(--wp--preset--font-family--outfit); font-weight: 600; font-size: var(--wp--preset--font-size--huge); line-height: 1; }
.oc-badge .oc-stat__label { margin-top: 8px !important; font-size: 14px; opacity: .9; }
.oc-badge--edge-coral { border-top: 10px solid var(--wp--preset--color--coral); }
@media (max-width: 781px) { .oc-badge { right: 16px; bottom: -30px; width: 220px; padding: 24px 20px; } }
.wp-block-column > .oc-photo + .oc-photo { margin-top: 20px; }
/* photo collage (Home, About): two stacked photos exactly as tall as the portrait photo card beside them */
@media (min-width: 782px) {
	.wp-block-columns:has(> .wp-block-column > .oc-photo-card) { align-items: stretch !important; margin-bottom: 22px; }
	.wp-block-columns:has(> .wp-block-column > .oc-photo-card) .oc-photo-card { min-height: 0 !important; aspect-ratio: 19 / 26 !important; margin-bottom: 0; }
	.wp-block-columns:has(> .wp-block-column > .oc-photo-card) > .wp-block-column:has(> .oc-photo) { display: flex; flex-direction: column; gap: 20px; }
	.wp-block-columns:has(> .wp-block-column > .oc-photo-card) > .wp-block-column > .oc-photo { flex: 1 1 0; min-height: 0; margin: 0 !important; }
	.wp-block-columns:has(> .wp-block-column > .oc-photo-card) > .wp-block-column > .oc-photo img { height: 100%; aspect-ratio: auto; }
}
@media (max-width: 781px) {
	.wp-block-columns:has(> .wp-block-column > .oc-photo-card) > .wp-block-column:has(> .oc-photo) { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
	.wp-block-columns:has(> .wp-block-column > .oc-photo-card) > .wp-block-column > .oc-photo + .oc-photo { margin-top: 0; }
	.wp-block-columns:has(> .wp-block-column > .oc-photo-card) .oc-photo-card { margin-bottom: 60px; }
}

/* dark photo band ("The Foundation of Our Work") */
.oc-band { padding-block: var(--wp--preset--spacing--100) !important; }
.oc-band .wp-block-columns { align-items: center; }
.oc-band figure.wp-block-image img { max-width: 360px; margin-inline: auto; display: block; }

/* lists */
.oc-icon-list, .oc-jump-list { list-style: none; padding-left: 0; }
.oc-icon-list li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.oc-icon-list li::before {
	content: ""; position: absolute; left: 0; top: .3em; width: 18px; height: 18px; border-radius: 50%;
	background: var(--wp--preset--color--coral) var(--oc-icon-check) center / 70% no-repeat;
}
.oc-icon-list a { color: inherit; }
.oc-icon-list a:hover { color: var(--wp--preset--color--coral); }
.oc-card--coral .oc-icon-list a:hover, .has-white-color .oc-icon-list a:hover { color: var(--wp--preset--color--cream); }
.oc-jump-list { display: grid; gap: 8px; margin-block: 20px !important; }
.oc-jump-list a {
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
	padding: 14px 20px; border-radius: var(--oc-radius-sm); background: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--navy); text-decoration: none; font-weight: 500;
	transition: background-color .2s, color .2s;
}
.oc-jump-list a::after { content: "→"; color: var(--wp--preset--color--coral); }
.oc-jump-list a:hover { background: var(--wp--preset--color--navy); color: #fff; }

/* content-page sidebar: the cards scroll with the page; the last one ("Support Our Work") then stays in view
   (sticking the whole column trapped its lower cards on long pages) */
.oc-section > .wp-block-columns > .wp-block-column:last-child > .oc-card + .oc-card { margin-top: 24px; }
@media (min-width: 1024px) {
	.oc-section > .wp-block-columns > .wp-block-column:last-child:has(> .oc-card:nth-child(3)) > .oc-card:last-child { position: sticky; top: 110px; }
}
.oc-section .wp-block-column > .oc-card:not(.has-background) .wp-block-separator { opacity: 1; }

/* tabs -> details */
.oc-tab { border-bottom: 1px solid var(--wp--preset--color--border); padding: 16px 0; }
.oc-tab summary { cursor: pointer; font-family: var(--wp--preset--font-family--outfit); font-weight: 600; font-size: var(--wp--preset--font-size--medium); color: var(--wp--preset--color--navy); list-style: none; display: flex; justify-content: space-between; }
.oc-tab summary::-webkit-details-marker { display: none; }
.oc-tab summary::after { content: "+"; color: var(--wp--preset--color--coral); font-size: 1.3em; line-height: 1; }
.oc-tab[open] summary::after { content: "–"; }
.oc-tab > :not(summary) { margin-top: 12px; }

/* partner logos */
.oc-logos { align-items: center; }
.oc-logos .wp-block-image img { object-fit: contain !important; aspect-ratio: 3 / 2; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s; background: #fff; padding: 10px; }
.oc-logos .wp-block-image img:hover { filter: none; opacity: 1; }

/* social */
.oc-social.wp-block-social-links .wp-social-link { background: rgba(255, 255, 255, .12) !important; color: #fff !important; }
.oc-social.wp-block-social-links .wp-social-link:hover { background: var(--wp--preset--color--coral) !important; transform: none; }
.oc-section .oc-social.wp-block-social-links .wp-social-link { background: var(--wp--preset--color--navy) !important; }
.oc-section .oc-social.wp-block-social-links .wp-social-link:hover { background: var(--wp--preset--color--coral) !important; }

/* ---------- post cards (query loops) ---------- */

.oc-posts .wp-block-post-template { gap: clamp(20px, 2.4vw, 30px); }
.oc-post-card {
	background: #fff; border-radius: var(--oc-radius); box-shadow: var(--oc-shadow); overflow: hidden; height: 100%;
	display: flex; flex-direction: column; transition: transform .35s var(--oc-ease), box-shadow .35s var(--oc-ease);
}
.oc-post-card:hover { transform: translateY(-4px); box-shadow: var(--oc-shadow-hover); }
.oc-post-card .wp-block-post-featured-image { margin: 0; overflow: hidden; background: var(--wp--preset--color--mist); }
.oc-post-card .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--oc-ease); }
.oc-post-card:hover .wp-block-post-featured-image img { transform: scale(1.04); }
.oc-post-card__body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.oc-post-card__body > * { margin: 0 !important; }
.oc-post-card__date { color: var(--wp--preset--color--muted); text-transform: uppercase; letter-spacing: 1px; }
.oc-post-card .wp-block-post-title a { color: var(--wp--preset--color--navy); text-decoration: none; }
.oc-post-card .wp-block-post-title a:hover { color: var(--wp--preset--color--coral); }
.oc-post-card .wp-block-post-excerpt__excerpt { margin: 0; color: var(--wp--preset--color--ink); }
.oc-read-more.wp-block-read-more {
	margin-top: auto !important; align-self: flex-start; display: inline-flex; align-items: center; gap: .5em;
	color: var(--wp--preset--color--coral); font-weight: 500; text-decoration: none; padding-top: 6px;
}
.oc-read-more.wp-block-read-more:hover { color: var(--wp--preset--color--navy); }
@media (max-width: 1023px) { .oc-posts .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .oc-posts .wp-block-post-template.is-layout-grid { grid-template-columns: 1fr; } }
.wp-block-query-pagination { margin-top: 50px; gap: 8px; font-weight: 500; }
.wp-block-query-pagination a, .wp-block-query-pagination .current { padding: 8px 14px; border-radius: 50px; text-decoration: none; }
.wp-block-query-pagination .current { background: var(--wp--preset--color--navy); color: #fff; }

/* ---------- single post ---------- */

.oc-article { max-width: 760px; margin-inline: auto; }
.oc-article .wp-block-post-featured-image { margin-top: -110px !important; position: relative; z-index: 2; }
.oc-article .wp-block-post-featured-image img { border-radius: var(--oc-radius); box-shadow: var(--oc-shadow-hover); }
.oc-article .wp-block-post-content { font-size: 17px; line-height: 1.75; }
.oc-article .wp-block-post-content > * + * { margin-top: 1.1em; }
.oc-article .wp-block-post-content :is(h2, h3) { margin-top: 1.6em; }
.oc-article .wp-block-post-content img { border-radius: var(--oc-radius-sm); }
.oc-article .wp-block-post-content a { text-underline-offset: 3px; }
.oc-single-hero { padding-bottom: 150px !important; }
.oc-single-hero:not(:has(~ * .wp-block-post-featured-image img)) { padding-bottom: 70px !important; }
.oc-post-terms a { color: var(--wp--preset--color--peach); text-decoration: none; text-transform: uppercase; letter-spacing: 2px; font-size: 13px; font-weight: 500; }

/* ---------- CTA band + footer ---------- */

.oc-cta { gap: 0 !important; margin: 0 !important; }
.oc-cta > .wp-block-column { margin: 0 !important; }
.oc-cta .wp-block-cover, .oc-cta__connect { min-height: 320px; height: 100%; padding: clamp(40px, 6vw, 80px) clamp(24px, 6vw, 90px) !important; display: flex; flex-direction: column; justify-content: center; }
.oc-cta .wp-block-cover__inner-container, .oc-cta__connect > * { max-width: 560px; }
.oc-cta h2 { font-size: var(--wp--preset--font-size--x-large); margin-bottom: 12px; }

.oc-footer { font-size: 15px; }
.oc-footer .wp-block-cover__inner-container > .wp-block-columns { gap: clamp(30px, 5vw, 80px); padding-top: var(--wp--preset--spacing--70); }
.oc-footer h2 { font-size: var(--wp--preset--font-size--medium); margin-bottom: 18px; }
.oc-footer .wp-block-site-logo img { width: 170px; }
.oc-footer ul { list-style: none; padding: 0; margin: 0; }
.oc-footer li { margin-bottom: 10px; }
.oc-footer li a { text-decoration: none; opacity: .9; }
.oc-footer li a:hover { opacity: 1; color: var(--wp--preset--color--peach) !important; }
.oc-footer__legal { border-top: 1px solid rgba(255, 255, 255, .2); margin-top: var(--wp--preset--spacing--50) !important; padding-block: 24px; font-size: 13px; opacity: .85; }
.oc-footer__legal p { margin: 0; }

/* ---------- forms (WPForms) ---------- */

.wpforms-container .wpforms-field input, .wpforms-container .wpforms-field textarea, .wpforms-container .wpforms-field select {
	border: 1px solid var(--wp--preset--color--border) !important; border-radius: var(--oc-radius-sm) !important;
	padding: 12px 16px !important; font: inherit !important; max-width: 100% !important;
}
.wpforms-container .wpforms-field input:focus, .wpforms-container .wpforms-field textarea:focus { border-color: var(--wp--preset--color--blue) !important; box-shadow: 0 0 0 3px rgba(72, 113, 229, .15) !important; outline: 0; }
.wpforms-container .wpforms-field-label { font-weight: 500 !important; color: var(--wp--preset--color--navy) !important; }
.wpforms-container button[type=submit] {
	background: var(--wp--preset--color--coral) !important; color: #fff !important; border: 0 !important; border-radius: 50px !important;
	padding: 14px 34px !important; font: 500 15px/1.2 var(--wp--preset--font-family--poppins) !important; height: auto !important; cursor: pointer;
}
.wpforms-container button[type=submit]:hover { background: var(--wp--preset--color--navy) !important; }

/* ---------- 404 / misc ---------- */

.oc-404 { text-align: center; }
.wp-block-search__input { border-radius: 50px 0 0 50px; padding: 12px 18px; border-color: var(--wp--preset--color--border); }
.wp-block-search__button { margin-left: 0; border-radius: 0 50px 50px 0; }

/* full-width covers keep the site's side padding for their content */
.wp-block-cover.alignfull { padding-left: var(--wp--style--root--padding-left); padding-right: var(--wp--style--root--padding-right); }

/* forms inside cards fill the card; on a coloured card the labels go white and the button inverts */
.oc-card .wpforms-container, .oc-card .wpforms-form { width: 100%; margin: 0 !important; }
.wpforms-container .wpforms-field { padding: 8px 0 !important; }
.wpforms-container .wpforms-field input, .wpforms-container .wpforms-field textarea { width: 100% !important; background: #fff !important; }
.has-background:not(.has-white-background-color) .wpforms-field-label { color: #fff !important; }
.has-background:not(.has-white-background-color) .wpforms-required-label { color: var(--wp--preset--color--cream) !important; }
.has-background:not(.has-white-background-color) .wpforms-container button[type=submit] { background: #fff !important; color: var(--wp--preset--color--navy) !important; }
.has-background:not(.has-white-background-color) .wpforms-container button[type=submit]:hover { background: var(--wp--preset--color--navy) !important; color: #fff !important; }
.wpforms-container .wpforms-submit-container { padding-top: 12px !important; }