/**
 * Full-bleed breakouts (100vw / alignfull) and rotated bands can still paint
 * a hair past the viewport — never let that create a horizontal scrollbar.
 */
:root {
	--wp--preset--spacing--0: 0;
}

html {
	overflow-x: clip;
}

body {
	overflow-x: clip;
}

/**
 * Overlay header (transparent over hero).
 *
 * Sticky on a Group inside <header class="wp-block-template-part"> cannot work:
 * position:sticky is constrained to its parent. Promote positioning to <header>.
 *
 * Use fixed (not sticky): sticky stays in document flow and pushes the hero
 * down; fixed takes the bar out of flow so the first section can sit underneath
 * — the usual transparent-header pattern. It still remains pinned on scroll.
 */
header.wp-block-template-part:has(.is-position-sticky) {
	position: fixed;
	/* WP sets --wp-admin--admin-bar--height when logged in; 0 when not. */
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	width: 100%;
	z-index: 100;
}

header.wp-block-template-part:has(.is-position-sticky) .is-position-sticky {
	position: static;
	top: auto;
	z-index: auto;
}

/**
 * Interpolatable header tokens.
 *
 * Scroll-down was snapping because the top state comes from inline block styles
 * and the scrolled state used a different !important rule — browsers won’t
 * transition that cascade jump. Both states share the same declarations; only
 * these registered custom properties change.
 */
@property --sohk-header-bg {
	syntax: "<color>";
	inherits: true;
	initial-value: transparent;
}

@property --sohk-header-fg {
	syntax: "<color>";
	inherits: true;
	initial-value: #ffffff;
}

@property --sohk-header-logo {
	syntax: "<number>";
	inherits: true;
	initial-value: 1;
}

header.wp-block-template-part:has(.is-position-sticky) {
	--sohk-header-bg: var(--sohk-header-bg-top, #1f1f1f66);
	--sohk-header-fg: var(--sohk-header-fg-top, #ffffff);
	--sohk-header-logo: 1;
	transition:
		--sohk-header-bg 180ms ease,
		--sohk-header-fg 180ms ease,
		--sohk-header-logo 180ms ease;
}

header.wp-block-template-part.is-scrolled {
	--sohk-header-bg: var(--wp--preset--color--white, #ffffff);
	--sohk-header-fg: var(--wp--preset--color--black, #1e1e1e);
	--sohk-header-logo: 0;
}

/*
 * Same !important winners in both states — values come from the tokens above.
 * --sohk-header-bg-top / --sohk-header-fg-top are set from the editor styles in JS.
 */
header.wp-block-template-part:has(.is-position-sticky) > .wp-block-group.has-background {
	background-color: var(--sohk-header-bg) !important;
	color: var(--sohk-header-fg);
}

header.wp-block-template-part:has(.is-position-sticky) .wp-block-site-title a,
header.wp-block-template-part:has(.is-position-sticky) .wp-block-site-tagline,
header.wp-block-template-part:has(.is-position-sticky) .wp-block-navigation,
header.wp-block-template-part:has(.is-position-sticky) .wp-block-navigation .wp-block-navigation-item__content,
header.wp-block-template-part:has(.is-position-sticky) .has-white-color {
	color: var(--sohk-header-fg) !important;
}

/* menus — desktop dropdowns only (not overlay nav) */
header .wp-block-navigation.items-justified-right .wp-block-navigation__responsive-container-content > .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container {
	left: calc(var(--wp--preset--spacing--lg) * -1);
	right: auto;
	z-index: 100;
}

/* Submenus track sticky header bg/fg tokens (top + scrolled). */
header.wp-block-template-part:has(.is-position-sticky) .wp-block-navigation__responsive-container-content > .wp-block-navigation__container .wp-block-navigation__submenu-container {
	background-color: var(--sohk-header-bg) !important;
	color: var(--sohk-header-fg);
}

/* Hover + current: yellow on transparent header, blue when scrolled. Desktop bar only. */
header.wp-block-template-part:has(.is-position-sticky):not(.is-scrolled) .wp-block-navigation__responsive-container-content > .wp-block-navigation__container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
header.wp-block-template-part:has(.is-position-sticky):not(.is-scrolled) .wp-block-navigation__responsive-container-content > .wp-block-navigation__container .wp-block-navigation-item:hover > .wp-block-navigation__submenu-icon,
header.wp-block-template-part:has(.is-position-sticky):not(.is-scrolled) .wp-block-navigation__responsive-container-content > .wp-block-navigation__container .current-menu-item > .wp-block-navigation-item__content,
header.wp-block-template-part:has(.is-position-sticky):not(.is-scrolled) .wp-block-navigation__responsive-container-content > .wp-block-navigation__container .current-menu-item > .wp-block-navigation__submenu-icon,
header.wp-block-template-part:has(.is-position-sticky):not(.is-scrolled) .wp-block-navigation__responsive-container-content > .wp-block-navigation__container .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--yellow) !important;
}

header.wp-block-template-part.is-scrolled .wp-block-navigation__responsive-container-content > .wp-block-navigation__container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
header.wp-block-template-part.is-scrolled .wp-block-navigation__responsive-container-content > .wp-block-navigation__container .wp-block-navigation-item:hover > .wp-block-navigation__submenu-icon,
header.wp-block-template-part.is-scrolled .wp-block-navigation__responsive-container-content > .wp-block-navigation__container .current-menu-item > .wp-block-navigation-item__content,
header.wp-block-template-part.is-scrolled .wp-block-navigation__responsive-container-content > .wp-block-navigation__container .current-menu-item > .wp-block-navigation__submenu-icon,
header.wp-block-template-part.is-scrolled .wp-block-navigation__responsive-container-content > .wp-block-navigation__container .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--blue) !important;
}

/* Chevron rests on header fg; hover/current colours come from the rules above. */
header.wp-block-template-part:has(.is-position-sticky) .wp-block-navigation__responsive-container-content > .wp-block-navigation__container .wp-block-navigation__submenu-icon {
	color: var(--sohk-header-fg) !important;
}

header .wp-block-navigation .wp-block-navigation-item {
	background-color: transparent;
}
header .wp-block-navigation__responsive-container-content > .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding-left: 0;
	padding-right: 0;
}

header .wp-block-navigation .wp-block-navigation__submenu-icon {
	width: 16px;
	height: 16px;
	margin-left: 10px;
}
header .wp-block-navigation .wp-block-navigation__submenu-icon svg {
	margin-top: -2px;
}
header .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
	top: calc(100% + 44px); /* visual gap */
	gap: 22px;
	border: none;
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
}

header .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 48px; /* same as the gap — keeps hover alive */
}

/* Submenu chevron: custom icon, colour via currentColor (mask). */
.wp-block-navigation .wp-block-navigation__submenu-icon svg {
	stroke: none;
	fill: none;
	background-color: currentColor;
	-webkit-mask: url("../icons/chevron-down.svg") center / contain no-repeat;
	mask: url("../icons/chevron-down.svg") center / contain no-repeat;
}

.wp-block-navigation .wp-block-navigation__submenu-icon svg path {
	opacity: 0;
}

/*
 * Hamburger: brand bars via mask (core SVG is thinner / differently spaced fill paths).
 * Colour tracks header fg through currentColor.
 */
header .wp-block-navigation__responsive-container-open svg {
	width: 21px;
	height: 15px;
	fill: none;
	background-color: currentColor;
	-webkit-mask: url("../icons/hamburger.svg") center / contain no-repeat;
	mask: url("../icons/hamburger.svg") center / contain no-repeat;
}

header .wp-block-navigation__responsive-container-open svg path {
	opacity: 0;
}

/*
 * Overlay close: brand X via mask (core + custom .wp-block-navigation-overlay-close).
 * Colour via currentColor (slate on white sheet).
 */
.wp-block-navigation__responsive-container-close svg,
.wp-block-navigation-overlay-close svg {
	width: 15px;
	height: 15px;
	fill: none;
	background-color: currentColor;
	-webkit-mask: url("../icons/close.svg") center / contain no-repeat;
	mask: url("../icons/close.svg") center / contain no-repeat;
}

.wp-block-navigation__responsive-container-close svg path,
.wp-block-navigation-overlay-close svg path {
	opacity: 0;
}

/*
 * Core Navigation swaps at 600px. Keep hamburger until 1290px (Overlay Menu = Mobile).
 */
@media ( min-width: 600px ) and ( max-width: 1289px ) {
	header .wp-block-navigation__responsive-container-open:not( .always-shown ) {
		display: flex;
	}

	header .wp-block-navigation__responsive-container:not( .hidden-by-default ):not( .is-menu-open ) {
		display: none;
	}
}

/**
 * Mobile overlay menu (Navigation → Overlay Menu / disable-default-overlay).
 * Resets desktop sticky/dropdown leakage and matches the full-sheet mockup.
 */
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open {
	background-color: var(--wp--preset--color--white, #fff) !important;
	color: var(--wp--preset--color--slate, #1e1e1e) !important;
	padding: 0 !important;
}

/* Keep sheet clear of the admin bar when logged in. */
.admin-bar .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open {
	top: var(--wp-admin--admin-bar--height, 0px);
}

.wp-block-navigation:has(> .wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-open {
	visibility: hidden;
	pointer-events: none;
}

/* Custom close lives in the overlay header row. */
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 28px;
	right: 24px;
	color: var(--wp--preset--color--slate, #1e1e1e);
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: transparent;
	border: 0;
}

.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-close svg {
	width: 15px;
	height: 15px;
}

.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-dialog,
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
}

.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex;
	flex-direction: column;
	padding: 0 !important;
	overflow: auto;
}

.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	min-height: 100%;
	box-sizing: border-box;
	position: relative;
}

.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container > .wp-block-group {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex: 1 1 auto;
	width: 100% !important;
	max-width: none !important;
	min-height: 100%;
	box-sizing: border-box;
	padding-top: 0 !important;
	padding-right: 24px !important;
	padding-bottom: 40px !important;
	padding-left: 24px !important;
	background-color: var(--wp--preset--color--white, #fff) !important;
	color: var(--wp--preset--color--slate, #1e1e1e) !important;
}

/* Full-bleed logo / close row (editor border handles the hairline). */
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container > .wp-block-group > .wp-block-group.is-layout-flex {
	width: calc(100% + 48px) !important;
	max-width: none !important;
	margin-left: -24px !important;
	margin-right: -24px !important;
	box-sizing: border-box;
}

/* Nav + Donate stretch; don't force 100% on the header row children. */
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container > .wp-block-group > .wp-block-navigation,
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container > .wp-block-group > .wp-block-buttons {
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Custom overlay close — hide core default X. */
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open:has(.wp-block-navigation-overlay-close) .wp-block-navigation__responsive-container-close {
	display: none !important;
}

.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation-overlay-close {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--slate, #1e1e1e);
	cursor: pointer;
	flex: 0 0 auto;
}

.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation-overlay-close svg {
	display: block;
	width: 15px;
	height: 15px;
}

/* Site logo in overlay header row (asset is white SVG → force slate on white sheet). */
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .wp-block-site-logo {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: 135px !important;
	max-width: calc(100% - 64px) !important;
	height: auto !important;
	margin: 0 !important;
	flex: 0 1 auto;
	/* White logo art → black; also beats sticky-header brightness filter. */
	filter: brightness(0) !important;
	-webkit-filter: brightness(0) !important;
}

.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .wp-block-site-logo a {
	display: block !important;
	width: 135px !important;
	max-width: 100% !important;
	height: auto !important;
	line-height: 0;
}

.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .wp-block-site-logo img,
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .wp-block-site-logo svg {
	display: block !important;
	width: 135px !important;
	max-width: 100% !important;
	height: auto !important;
}

/* Beat sticky white / desktop inheritance inside the sheet. */
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container,
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .wp-block-navigation,
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .wp-block-navigation__submenu-icon,
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .has-white-color {
	color: var(--wp--preset--color--slate, #1e1e1e) !important;
}

.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .wp-block-navigation {
	width: 100% !important;
	max-width: none !important;
}

.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100% !important;
	max-width: none !important;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .wp-block-navigation-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	margin: 0;
}

/* Inner navigation */

.sohk-category-nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap:16px;
}

.sohk-category-nav ul li {
	margin: 0;
	padding: 0;
}

.sohk-category-nav p.sohk-category-home a,
.sohk-category-nav ul li a {
	font-size: var(--wp--preset--font-size--button);
	font-weight: 900;
	text-transform: uppercase;
	text-decoration: none;
	background: #fff;
	border: 0;
	text-align: left !important;
	cursor: pointer;
	color: var(--wp--preset--color--slate, #1e1e1e);
	border: 1px solid var(--wp--preset--color--light-grey);
	padding: 12px 24px;
	border-radius: 9999px;
	transition: all 0.3s ease;
}
.sohk-category-nav ul li.current-cat a,
.page-id-354 .sohk-category-nav p.sohk-category-home a,
.sohk-category-nav p.sohk-category-home a:hover,
.sohk-category-nav ul li a:hover {
	background: var(--wp--preset--color--yellow);
	border-color: var(--wp--preset--color--yellow);
}

@media (max-width: 767px) {
	.sohk-category-nav p.sohk-category-home {
		margin-bottom: 28px;
		text-align: center;
		width: 100%;
	}
	.sohk-category-nav ul {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 42px;
		width: 100%;
	}
}

/*
 * Parent rows: 2-col grid so the chevron stays on the label row when the
 * submenu opens (absolute top/bottom on the <li> was centering it mid-stack).
 */
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .wp-block-navigation-item.has-child {
	display: grid;
	grid-template-columns: 1fr 44px;
	align-items: center;
}

.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: flex !important;
	align-items: center;
	justify-content: flex-start !important;
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	padding: 18px 0 !important;
	font-weight: 900;
	text-transform: uppercase;
	text-decoration: none;
	background: transparent !important;
	border: 0;
	text-align: left !important;
	cursor: pointer;
}

/* Label toggle: col 1, row 1 — stretch under the chevron for a full-row tap. */
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .has-child > .wp-block-navigation-submenu__toggle.wp-block-navigation-item__content {
	grid-column: 1 / -1;
	grid-row: 1;
	z-index: 1;
	width: 100% !important;
	max-width: none !important;
	padding-right: 44px !important;
	box-sizing: border-box;
}

/* Chevron: col 2, row 1 only (does not move when submenu expands). */
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .has-child > .wp-block-navigation__submenu-icon {
	grid-column: 2;
	grid-row: 1;
	z-index: 2;
	display: inline-flex !important;
	align-items: center;
	justify-content: flex-end;
	align-self: stretch;
	width: 40px;
	height: auto;
	margin: 0;
	padding: 0;
	color: var(--wp--preset--color--slate, #1e1e1e) !important;
	pointer-events: none;
}

.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .wp-block-navigation__submenu-icon svg {
	width: 16px;
	height: 16px;
}

/* Accordion: hide nested menus until toggled open. */
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .wp-block-navigation__submenu-container {
	display: none;
	grid-column: 1 / -1;
	flex: 0 0 100%;
	position: static !important;
	width: 100% !important;
	min-width: 0 !important;
	height: auto !important;
	opacity: 1 !important;
	visibility: visible !important;
	overflow: visible !important;
	inset: auto !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	margin: 0 !important;
	padding: 0 0 8px 20px !important;
	border: 0 !important;
	gap: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .wp-block-navigation__submenu-container::before {
	display: none !important;
}

.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .has-child:has(> [aria-expanded="true"]) > .wp-block-navigation__submenu-container {
	display: flex;
	flex-direction: column;
}

.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 12px 0 !important;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate, #1e1e1e) !important;
	opacity: 0.72;
}

/* Open / current / hover — brand blue (incl. chevron). */
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .wp-block-navigation-item:hover > .wp-block-navigation__submenu-icon,
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .current-menu-item > .wp-block-navigation__submenu-icon,
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .current-menu-ancestor > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .current-menu-ancestor > .wp-block-navigation__submenu-icon,
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .wp-block-navigation-submenu__toggle[aria-expanded="true"],
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-icon,
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--blue) !important;
	opacity: 1;
}

.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-icon > svg,
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-icon > svg {
	transform: rotate(180deg);
}

/* Donate sits at the bottom of the sheet — full width on mobile overlay. */
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .wp-block-buttons {
	margin-top: auto;
	padding-top: 32px;
	justify-content: stretch;
	width: 100%;
}

.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .wp-block-buttons > .wp-block-button {
	width: 100%;
}

.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container .wp-block-button .wp-block-button__link {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	justify-content: center;
}

/*
 * Logo filter on the HTML wrapper (SVG Support inlines <svg>; filter on <svg>
 * doesn’t animate). brightness() tracks --sohk-header-logo (1 → 0).
 * Overlay logo overrides this with brightness(0) (white SVG on white sheet).
 */
header.wp-block-template-part:has(.is-position-sticky) .wp-block-site-logo {
	filter: brightness(var(--sohk-header-logo)) saturate(100%);
	-webkit-filter: brightness(var(--sohk-header-logo)) saturate(100%);
}
@media (max-width: 767px) {
	header.wp-block-template-part .sohk-header-row {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	header.wp-block-template-part .wp-block-site-logo,
	header.wp-block-template-part .wp-block-site-logo svg {
		width: 135px;
	}
}

/* inline marks 
body.page h1.wp-block-post-title,
h1 mark.has-inline-color {
	padding: 16px;
	display: flex;
	width: fit-content;
	text-transform: uppercase;
	justify-content: flex-start;
	margin-left: 0!important;
} */

h1 mark[style*="background-color:"],
h2 mark[style*="background-color:"],
h3 mark[style*="background-color:"] {
	padding: var(--wp--preset--spacing--md);
	line-height: 1.5;
}

h1 mark[style="background-color:rgba(0, 0, 0, 0)"],
h2 mark[style="background-color:rgba(0, 0, 0, 0)"],
h3 mark[style="background-color:rgba(0, 0, 0, 0)"] {
	padding: var(--wp--preset--spacing--md) 0;
	line-height: 1.5;
}

.entry-content > .wp-block-cover h1.wp-block-heading {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 0;
	margin-left: 0!important;
}
.entry-content > .wp-block-cover h1.wp-block-heading br {
	display: none!important;
}

h1.wp-block-heading mark[style="background-color:#1F5CED"] {
	color: #fff !important;
}

h4 mark.has-inline-color {
	/* Forward parallelogram (/___/): 12° on left & right. */
	--sohk-mark-slant: 12deg;
	--sohk-mark-slant-inset: calc((1lh + 12px) * tan(var(--sohk-mark-slant)));
	display: inline-block;
	width: fit-content;
	padding: 6px calc(6px + var(--sohk-mark-slant-inset));
	clip-path: polygon(
		0 0,
		calc(100% - var(--sohk-mark-slant-inset)) 0,
		100% 100%,
		var(--sohk-mark-slant-inset) 100%
	);
}

/**
 * Section spacing — top-level Groups only (direct children of post content
 * or FSE template <main>). Nested Groups stay unpadded unless set in the editor.
 * Margin 0 so sections rely on Section padding, not block-gap.
 */
.wp-block-post-content > .wp-block-group,
main.wp-block-group > .wp-block-group {
	margin-block: 0;
	padding-top: var(--wp--preset--spacing--section);
	padding-bottom: var(--wp--preset--spacing--section);
}

.wp-block-post-content > .wp-block-sohk-hero-carousel-sohk,
main.wp-block-group > .wp-block-sohk-hero-carousel-sohk {
	margin-block: 0;
	/* Reinforce full-bleed when nested under root padding. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/**
 * Grid layout (Group → Grid variation) — same Figma gutter as Columns.
 * 36px mobile → 24px desktop via --wp--preset--spacing--gutter.
 */
.wp-block-group.is-layout-grid,
.wp-block-group-is-layout-grid {
	gap: var(--wp--preset--spacing--gutter);
}

.sohk-spaced-grid {
	gap: 64px 24px !important;
}

/**
 * Cover + “Inner blocks use content width”.
 *
 * Core puts has-global-padding on .wp-block-cover__inner-container, then the
 * nested has-global-padding reset zeroes it (unlike Group, which keeps padding
 * on the alignfull wrapper). Restore root padding and drop Cover’s default
 * horizontal 1em so content lines up with constrained Groups.
 */
.wp-block-cover:has(> .wp-block-cover__inner-container.has-global-padding) {
	padding-left: 0;
	padding-right: 0;
}

.wp-block-cover > .wp-block-cover__inner-container.has-global-padding {
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
	box-sizing: border-box;
}

/* single posts */
.single-post .entry-content .wp-block-group.alignfull.has-full-width-mobile {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/*
 * News article hero — Figma is taller than the 520px baked into Cover markup.
 * Override inline min-height so every story picks this up without re-saving.
 */
.single-post .wp-block-post-content > .wp-block-cover:first-child,
.single-post .wp-block-post-content > .sohk-featured-hero {
	min-height: clamp(640px, 72svh, 820px) !important;
}

@media ( max-width: 920px ) {
	/* Figma mobile hero is near-square, not near full-viewport. */
	.single-post .wp-block-post-content > .wp-block-cover:first-child,
	.single-post .wp-block-post-content > .sohk-featured-hero {
		min-height: clamp(300px, 45svh, 400px) !important;
	}
}

/* Category / tag archive hero title uses News-style <mark> via PHP;
 * no extra box styling here (avoids fit-content + auto margins centering). */

/* Term description rendered as News-style H3 — keep block-gap (do not zero margins). */
.sohk-archive-standfirst {
	text-transform: uppercase;
}

/* cards */
.sohk-news-card {
	overflow: hidden;
	position: relative;
	height: 100%;
	background: var(--wp--preset--color--white);
	display: flex;
	flex-direction: column;
}
.sohk-news-card > .wp-block-group + .wp-block-group {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
}
.sohk-news-card .sohk-date {
	position: absolute;
	top: var(--wp--preset--spacing--md);
	left: var(--wp--preset--spacing--md);
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--black);
	padding: 10px;
	font-size: var(--wp--preset--font-size--medium);
	text-transform: uppercase;
	border-radius: 8px;
	text-align: center;
	gap: 0;
	line-height: 1;
}
.sohk-news-card .sohk-date .wp-block-post-date:first-child {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 900;
}
.sohk-news-card .sohk-date .wp-block-post-date:nth-child(2) {
	margin-top: 0;
}
.sohk-news-card .wp-block-post-featured-image {
	margin: 0;
	line-height: 0;
	aspect-ratio: 57 / 32;
	background: var(--wp--preset--color--off-white, #f4f5f7);
	max-width: 100%;
}
.sohk-news-card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: middle;
}

/* Core omits the featured-image block when empty — keep card chrome. */
.sohk-news-card:not(:has(.wp-block-post-featured-image))::before {
	content: "";
	display: block;
	width: 100%;
	aspect-ratio: 57 / 32;
	background: var(--wp--preset--color--off-white, #f4f5f7);
}
.sohk-news-card h3,
.sohk-news-card h3 a {
	color: var(--wp--preset--color--black);
	text-transform: uppercase;
	text-decoration: none;
}
.sohk-news-card .wp-block-post-excerpt {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--md);
}
.sohk-news-card .wp-block-read-more {
	margin-top: auto;
}

.sohk-news-card-featured {
	flex-direction: row;
}
.sohk-news-card-featured .wp-block-group:first-child {
	overflow: hidden;
}
.sohk-news-card-featured-img {
	height: 100% !important;
}

/* blockquotes — Default style (no is-style-default class on front; skip Plain) */
blockquote.wp-block-quote:not(.is-style-plain) .wp-block-paragraph {
	border-left: 5px solid var(--wp--preset--color--blue);
	padding-left: var(--wp--preset--spacing--lg);
	font-size: var(--wp--preset--font-size--quote-block);
	margin-top: 0;
	padding-top: var(--wp--preset--spacing--lg);
}
blockquote.wp-block-quote:not(.is-style-plain) .wp-block-paragraph:first-child {
	margin-top: 0;
	padding-top: 0;
}
blockquote.wp-block-quote:not(.is-style-plain) cite {
	font-size: var(--wp--preset--font-size--h-6);
	text-transform: uppercase;
	font-style: normal;
	color: var(--wp--preset--color--blue);
	font-weight: 900;
	margin-top: var(--wp--preset--spacing--lg);
}
.is-style-mode-dark blockquote.wp-block-quote:not(.is-style-plain) .wp-block-paragraph,
.is-style-mode-blue blockquote.wp-block-quote:not(.is-style-plain) .wp-block-paragraph {
	border-left-color: var(--wp--preset--color--yellow);
}
.is-style-mode-dark blockquote.wp-block-quote:not(.is-style-plain) cite,
.is-style-mode-blue blockquote.wp-block-quote:not(.is-style-plain) cite {
	color: var(--wp--preset--color--yellow);
}

/* grids */
.sohk-cards-grid.wp-block-group > .wp-block-group {
	transition: background-color 0.3s ease;
}
.sohk-cards-grid.wp-block-group > .wp-block-group:hover {
	background-color: var(--wp--preset--color--yellow);
}

/* Image / Cover → optional mobile aspect ratio */
@media (max-width: 767px) {
	.wp-block-image.has-sohk-aspect-mobile img,
	.wp-block-image.has-sohk-aspect-mobile .components-resizable-box__container {
		aspect-ratio: var(--sohk-aspect-ratio-mobile) !important;
		width: 100% !important;
		height: auto !important;
		max-width: 100%;
		object-fit: cover;
	}

	/* Cover uses min-height — clear it so aspect-ratio can size the block. */
	.wp-block-cover.has-sohk-aspect-mobile {
		aspect-ratio: var(--sohk-aspect-ratio-mobile) !important;
		min-height: 0 !important;
		height: auto !important;
	}

	.wp-block-cover.has-sohk-aspect-mobile .wp-block-cover__image-background,
	.wp-block-cover.has-sohk-aspect-mobile .wp-block-cover__video-background {
		object-fit: cover;
	}
}

/* List → Grid */
.wp-block-list.is-style-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--wp--preset--spacing--xl, 2rem);
	row-gap: var(--wp--preset--spacing--md, 1rem);
	padding-inline-start: 1.25em;
	list-style-position: outside;
}

.wp-block-list.is-style-grid > li {
	margin: 0;
}

@media (max-width: 767px) {
	.wp-block-list.is-style-grid {
		grid-template-columns: 1fr;
	}
}

/* Paragraph → Justify (core omits this from the alignment toolbar) */
.wp-block-paragraph.is-style-justify {
	text-align: justify;
}

/* Accordion → SOHK FAQs */
.wp-block-accordion.is-style-sohk-faqs .wp-block-accordion-heading__toggle-title {
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 900;
	line-height: 1.2;
	text-transform: uppercase;
}
.wp-block-accordion.is-style-sohk-faqs .wp-block-accordion-item {
	padding: 14px 16px;
	margin: 0;
	border: 1px solid #e0e0e0;
}
.wp-block-accordion.is-style-sohk-faqs .wp-block-accordion-item:not(:last-child) {
	border-bottom: none;
}
.wp-block-accordion.is-style-sohk-faqs .wp-block-accordion-item.is-open {
	background-color: var(--wp--preset--color--off-white);
}
.wp-block-accordion.is-style-sohk-faqs .wp-block-accordion-heading__toggle-icon {
	position: relative;
	width: 13px;
	height: 15px;
	flex-shrink: 0;
	color: transparent;
	font-size: 0;
	line-height: 0;
	overflow: hidden;
}

.wp-block-accordion.is-style-sohk-faqs .wp-block-accordion-heading__toggle-icon::before {
	content: "";
	display: block;
	width: 13px;
	height: 15px;
	background-color: var(--wp--preset--color--blue);
	-webkit-mask: url("../icons/accordion-caret.svg") center / contain no-repeat;
	mask: url("../icons/accordion-caret.svg") center / contain no-repeat;
}

/* Core rotates + by 45° when open — use 180° for the caret instead. */
.wp-block-accordion.is-style-sohk-faqs
	> .wp-block-accordion-item.is-open
	> .wp-block-accordion-heading
	.wp-block-accordion-heading__toggle-icon {
	transform: rotate(180deg);
}

@media ( prefers-reduced-motion: no-preference ) {
	.wp-block-accordion.is-style-sohk-faqs
		> .wp-block-accordion-item
		> .wp-block-accordion-heading
		.wp-block-accordion-heading__toggle-icon {
		transition: transform 0.2s ease-in-out;
	}
}

/* Footer */
footer.wp-block-template-part {
	margin-top: calc(-1 * var(--sohk-slant-offset) - 2px) !important;
}
footer .sohk-footer-columns {
	justify-content: space-between;
	gap:var(--wp--preset--spacing--xl);
}
@media (max-width: 767px) {
	footer .sohk-footer-grid {
		grid-template-columns: 1fr;
		gap:22px !important;
	}
	footer .sohk-footer-columns + .wp-block-group {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}
	footer.wp-block-template-part .wp-block-group nav {
		margin-top: 20px !important;
	}
}

/**
 * Query Loop load more (class: sohk-load-more).
 */
.wp-block-query.sohk-load-more .wp-block-query-pagination {
	display: none !important;
}

.wp-block-query.sohk-load-more .sohk-load-more__actions {
	margin-top: var(--wp--preset--spacing--50, 2rem);
	width: 100%;
}

.wp-block-query.sohk-load-more .sohk-load-more__button.is-loading {
	pointer-events: none;
	opacity: 0.72;
}

/**
 * Group → Mobile inspector toggles.
 * - Fill content width: expand to content column (not viewport bleed).
 * - Collapse: stack flex / grid children vertically.
 * - Reverse: flip child order (flex direction / grid column order).
 */
@media (max-width: 767px) {
	.wp-block-group.has-full-width-mobile {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.wp-block-group.has-full-width-mobile * {
		max-width: 100% !important;
	}

	.wp-block-group.has-collapse-mobile,
	.wp-block-group.has-collapse-mobile.is-layout-flex,
	.wp-block-group-is-layout-flex.has-collapse-mobile {
		flex-direction: column !important;
		justify-content: flex-start !important;
		align-items: flex-start !important;
	}

	/* Group → Grid: force one column (beats inline repeat(N, …)). */
	.wp-block-group.has-collapse-mobile.is-layout-grid,
	.wp-block-group-is-layout-grid.has-collapse-mobile {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.wp-block-group.has-collapse-mobile.is-layout-grid > *,
	.wp-block-group-is-layout-grid.has-collapse-mobile > * {
		grid-column: auto !important;
	}

	/* Reverse order — flex. */
	.wp-block-group.has-reverse-mobile.is-layout-flex.is-horizontal,
	.wp-block-group-is-layout-flex.has-reverse-mobile.is-horizontal,
	.wp-block-group.has-reverse-mobile.is-layout-flex:not(.is-vertical):not(.has-collapse-mobile) {
		flex-direction: row-reverse !important;
	}

	.wp-block-group.has-reverse-mobile.is-layout-flex.is-vertical,
	.wp-block-group-is-layout-flex.has-reverse-mobile.is-vertical,
	.wp-block-group.has-collapse-mobile.has-reverse-mobile,
	.wp-block-group.has-collapse-mobile.has-reverse-mobile.is-layout-flex,
	.wp-block-group-is-layout-flex.has-collapse-mobile.has-reverse-mobile {
		flex-direction: column-reverse !important;
	}

	/* Reverse order — grid (multi-col): flip columns without flipping text. */
	.wp-block-group.has-reverse-mobile.is-layout-grid:not(.has-collapse-mobile),
	.wp-block-group-is-layout-grid.has-reverse-mobile:not(.has-collapse-mobile) {
		direction: rtl;
	}

	.wp-block-group.has-reverse-mobile.is-layout-grid:not(.has-collapse-mobile) > *,
	.wp-block-group-is-layout-grid.has-reverse-mobile:not(.has-collapse-mobile) > * {
		direction: ltr;
	}

	/* Reverse order — grid collapsed to one column. */
	.wp-block-group.has-collapse-mobile.has-reverse-mobile.is-layout-grid,
	.wp-block-group-is-layout-grid.has-collapse-mobile.has-reverse-mobile {
		display: flex !important;
		flex-direction: column-reverse !important;
	}

	/* Reverse order — Columns (stacked by default; row if not stacked). */
	.wp-block-columns.has-reverse-mobile:not(.is-not-stacked-on-mobile) {
		flex-direction: column-reverse !important;
	}

	.wp-block-columns.has-reverse-mobile.is-not-stacked-on-mobile {
		flex-direction: row-reverse !important;
	}
}