/*
 * Header and navigation at every screen size.
 * - The full menu shows from 68.75em (1100px at the default text size, more
 *   with larger text), where it fits on one line; below that the
 *   menu button opens a full-screen panel (core only switches at 600px, which
 *   left tablets and small laptops with a menu wrapping onto two rows).
 * - Each section opens as a full-width panel on wide screens, and folds open
 *   in place inside the full-screen menu.
 * - The main bar stays in view while scrolling; the utility links above it
 *   scroll away (the header sticks at minus their height).
 */

.oak-utility p {
	line-height: 1.25rem;
	padding-block: 0.5rem;
}

header.wp-block-template-part:has(> .oak-header) {
	background: var(--wp--preset--color--white);
	position: sticky;
	top: -2.25rem;
	z-index: 50;
}

@media (min-width: 783px) {
	.admin-bar header.wp-block-template-part:has(> .oak-header) {
		top: calc(32px - 2.25rem);
	}
}

.oak-header {
	background: var(--wp--preset--color--white);
}

/* The menu button matches the square search button beside it. */
.oak-header .wp-block-navigation__responsive-container-open {
	align-items: center;
	border: 2px solid var(--wp--preset--color--ink);
	height: 44px;
	justify-content: center;
	width: 44px;
}

@media (min-width: 600px) and (max-width: 68.7499em) {
	.oak-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

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

/* The open menu: a full-screen panel with large, left-aligned links. */
.oak-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--white);
	padding: 1.25rem clamp(1.25rem, 6vw, 4rem) 3rem;
}

.oak-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	padding-top: 4.5rem;
}

.oak-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	align-items: stretch;
	gap: 0;
	max-width: 40rem;
	width: 100%;
}

.oak-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
}

.oak-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.oak-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.5rem, 1.1rem + 2vw, 2.25rem);
	font-weight: 900;
	line-height: 1.1;
	padding: 1rem 0;
	width: 100%;
}

.oak-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--teal);
}

/* Donate sits in the header bar, and again as the open menu's last item. */
.oak-header .wp-block-navigation-item.oak-menu-donate {
	display: none;
}

.oak-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.oak-menu-donate {
	align-self: flex-start;
	border: 0;
	display: block;
	margin-top: 1.5rem;
	width: auto;
}

.oak-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .oak-menu-donate > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--gold);
	font-size: var(--wp--preset--font-size--large);
	padding: 1rem 1.5rem;
	text-align: center;
}

/* Search sits in the header bar, and inside the open menu on small phones,
 * where the bar keeps only the logo, Donate and the menu button. */
.oak-header .oak-menu-search {
	display: none;
}

.oak-header .is-menu-open .oak-menu-search {
	display: block;
	margin-top: 2rem;
	max-width: 40rem;
	width: 100%;
}

.oak-header .is-menu-open .oak-menu-search .wp-block-search__inside-wrapper {
	gap: 0.5rem;
}

.oak-header .is-menu-open .oak-menu-search .wp-block-search__input {
	border: 2px solid var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
	padding: 0.75rem 1rem;
}

.oak-header .is-menu-open .oak-menu-search .wp-block-search__button {
	background: var(--wp--preset--color--ink);
	border: 2px solid var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	font-weight: 700;
	margin: 0;
	padding: 0.75rem 1.25rem;
	width: auto;
}

@media (max-width: 29.9375em) {
	.oak-header .wp-block-group > .wp-block-search {
		display: none;
	}
}

.oak-header .wp-block-navigation__responsive-container-close {
	align-items: center;
	border: 2px solid var(--wp--preset--color--ink);
	display: flex;
	height: 44px;
	justify-content: center;
	right: clamp(1.25rem, 6vw, 4rem);
	top: 1.25rem;
	width: 44px;
}

/* Menu sections ------------------------------------------------------------
 * UK, Nigeria, Get involved and About us each hold an introduction link
 * (oak-nav-lead) and three columns, each a heading link over its pages.
 * The arrow beside a section opens it; the columns never need their own.
 * In the full-screen menu the arrow is the fold button from inc/navigation.php. */

.oak-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon,
.oak-header .oak-nav-fold {
	display: none;
}

/* Wide screens: a full-width panel under the bar, the introduction on the
 * left and the columns beside it. It opens on hover or with the arrow, and
 * each item reaches down to the panel so the pointer can cross into it. */
@media (min-width: 68.75em) {
	.oak-header {
		--oak-nav-reach: 2.125rem;
		position: relative;
	}

	.oak-header .wp-block-navigation,
	.oak-header .wp-block-navigation__responsive-container:not(.is-menu-open),
	.oak-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog,
	.oak-header .wp-block-navigation__container > .has-child {
		position: static;
	}

	.oak-header .wp-block-navigation__container > .has-child {
		margin-block: calc(-1 * var(--oak-nav-reach));
		padding-block: var(--oak-nav-reach);
	}

	.oak-header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon {
		align-items: center;
		display: inline-flex;
		height: 1.5rem;
		justify-content: center;
		margin-left: 0.125rem;
		width: 1.5rem;
	}

	.oak-header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon svg {
		height: 0.75rem;
		margin: 0;
		transition: transform 0.2s ease;
		width: 0.75rem;
	}

	.oak-header .wp-block-navigation__container > .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

	/* The open section's name stays underlined while its panel shows. */
	.oak-header .wp-block-navigation__container > .has-child:is(:hover, :has(> .wp-block-navigation-submenu__toggle[aria-expanded="true"])) > .wp-block-navigation-item__content {
		text-decoration: underline;
		text-decoration-color: var(--wp--preset--color--gold);
		text-decoration-thickness: 3px;
		text-underline-offset: 0.5em;
	}

	.oak-header .wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
		align-items: start;
		background: var(--wp--preset--color--white);
		border: 0;
		border-top: 1px solid var(--wp--preset--color--line);
		box-shadow: 0 1.5rem 2rem -1.5rem rgb(15 42 45 / 0.35);
		display: grid;
		gap: 2rem 2.5rem;
		grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
		height: auto;
		left: 0;
		min-width: 0;
		overflow: visible;
		padding: 2.5rem max(var(--wp--style--root--padding-left, 1.25rem), calc((100% - 80rem) / 2)) 3rem;
		right: 0;
		top: 100%;
		transition: opacity 0.12s ease 0.1s, visibility 0s linear 0.22s;
		width: auto;
		z-index: 2;
	}

	.oak-header .wp-block-navigation .wp-block-navigation__container > .has-child:hover > .wp-block-navigation__submenu-container,
	.oak-header .wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		opacity: 1;
		transition: opacity 0.12s ease, visibility 0s;
		visibility: visible;
		z-index: 3;
	}

	.oak-header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		align-items: stretch;
		display: flex;
		flex-direction: column;
		position: static;
	}

	/* Columns sit open inside the panel and hide with it. */
	.oak-header .wp-block-navigation .wp-block-navigation__container > .has-child .has-child > .wp-block-navigation__submenu-container {
		background: none;
		border: 0;
		display: flex;
		flex-direction: column;
		gap: 0;
		height: auto;
		min-width: 0;
		opacity: 1;
		overflow: visible;
		padding: 0;
		position: static;
		visibility: inherit;
		width: auto;
	}

	.oak-header .wp-block-navigation .wp-block-navigation__container > .has-child .has-child > .wp-block-navigation__submenu-container::before {
		display: none;
	}

	.oak-header .wp-block-navigation__submenu-container > .has-child > .wp-block-navigation-item__content {
		border-bottom: 1px solid var(--wp--preset--color--line);
		color: var(--wp--preset--color--ink);
		font-family: var(--wp--preset--font-family--heading);
		font-size: 1.125rem;
		font-weight: 900;
		line-height: 1.25;
		margin-bottom: 0.5rem;
		padding: 0 0 0.75rem;
	}

	.oak-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		color: var(--wp--preset--color--ink);
		font-size: 1rem;
		line-height: 1.35;
		padding: 0.4rem 0;
	}

	.oak-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		text-underline-offset: 0.3em;
	}

	/* The introduction: a teal block with the leaf curve. */
	.oak-header .wp-block-navigation__submenu-container > .oak-nav-lead > .wp-block-navigation-item__content {
		background: var(--wp--preset--color--teal-dark);
		border-bottom-right-radius: 2rem;
		color: var(--wp--preset--color--white);
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		padding: 1.75rem 1.75rem 2rem;
	}

	.oak-header .wp-block-navigation__submenu-container > .oak-nav-lead .wp-block-navigation-item__label {
		font-family: var(--wp--preset--font-family--heading);
		font-size: 1.5rem;
		font-weight: 900;
		line-height: 1.15;
	}

	.oak-header .wp-block-navigation__submenu-container > .oak-nav-lead .wp-block-navigation-item__description {
		color: var(--oak-on-dark-soft, rgb(255 255 255 / 0.85));
		display: block;
		font-size: 0.95rem;
		line-height: 1.5;
	}

	.oak-header .wp-block-navigation__submenu-container > .oak-nav-lead > .wp-block-navigation-item__content:hover {
		text-decoration: none;
	}

	.oak-header .wp-block-navigation__submenu-container > .oak-nav-lead > .wp-block-navigation-item__content:hover .wp-block-navigation-item__label {
		text-decoration: underline;
		text-decoration-color: var(--wp--preset--color--gold);
		text-decoration-thickness: 3px;
		text-underline-offset: 0.3em;
	}

	.oak-header .wp-block-navigation__submenu-container > .oak-nav-lead > .wp-block-navigation-item__content:focus-visible {
		outline-color: var(--wp--preset--color--gold);
	}
}

/* The open menu: sections fold, and the arrow beside each opens it in place. */
.oak-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child {
	align-items: center;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
}

.oak-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child > .oak-nav-fold {
	align-items: center;
	background: none;
	border: 0;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	display: flex;
	height: 44px;
	justify-content: center;
	margin: 0;
	padding: 0;
	width: 44px;
}

.oak-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child > .oak-nav-fold svg {
	height: 1.125rem;
	margin: 0;
	transition: transform 0.2s ease;
	width: 1.125rem;
}

.oak-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child > .oak-nav-fold[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.oak-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
	display: none;
	gap: 0;
	grid-column: 1 / -1;
	padding: 0 0 1.5rem;
}

.oak-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .has-child > .oak-nav-fold[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	display: flex;
	flex-direction: column;
}

.oak-header .wp-block-navigation__responsive-container.is-menu-open .has-child .has-child > .wp-block-navigation__submenu-container {
	gap: 0;
	padding: 0;
}

.oak-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	align-items: stretch;
}

.oak-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
	display: block;
	font-size: 1rem;
	line-height: 1.5;
	padding: 0.625rem 0;
}

.oak-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .has-child > .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.125rem;
	font-weight: 900;
	padding-top: 1rem;
}

.oak-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .oak-nav-lead > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--teal-dark);
	font-weight: 700;
}