:root {
	--ccma-navbar-green: #6a855a;
	--ccma-navbar-cream: #f7f1e1;
	--ccma-mega-menu-z-index: 999999;
	--ccma-mega-menu-radius: 15px;
	--ccma-mega-menu-open-width: 69px;
	--ccma-mega-menu-control-size: 45px;
}

/* ==========================================================
   FULLSCREEN OVERLAY — WORDPRESS NAVIGATION BLOCK
   ========================================================== */

/*
 * DOM WordPress réellement généré :
 *
 * .wp-block-navigation__responsive-container
 *   > .wp-block-navigation__responsive-close
 *     > .wp-block-navigation__responsive-dialog
 *       > .wp-block-navigation__responsive-container-content
 *         > .wp-block-navigation__container
 *         > .wp-block-navigation__overlay-container
 *           > .ccma-mega-menu-content
 *
 * Chaque maillon doit recevoir min-height: 0.
 * Le scroll est porté par .wp-block-navigation__overlay-container.
 */

/* Overlay plein écran. */
.wp-block-navigation__responsive-container.is-menu-open {
	position: fixed !important;
	inset: 0 !important;
	z-index: var(--ccma-mega-menu-z-index) !important;

	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;

	width: 100% !important;
	max-width: none !important;

	height: 100vh !important;
	height: 100svh !important;
	height: 100dvh !important;

	min-width: 0 !important;
	min-height: 0 !important;
	max-height: 100dvh !important;

	margin: 0 !important;
	padding: 0 !important;

	overflow: hidden !important;
	overscroll-behavior: none;

	background:
		var(--wp--preset--color--vert, var(--ccma-navbar-green))
		!important;

	box-sizing: border-box;
}

/*
 * Wrapper ajouté par WordPress entre le conteneur responsive
 * et le dialogue. Il manquait dans les versions précédentes.
 */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-close {
	position: relative !important;

	display: flex !important;
	flex: 1 1 auto !important;
	flex-direction: column !important;
	align-items: stretch !important;

	width: 100% !important;
	height: 100% !important;

	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	overflow: hidden !important;
	box-sizing: border-box;
}

/* Dialogue WordPress. */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-dialog {
	position: relative !important;
	z-index: 1;

	display: flex !important;
	flex: 1 1 auto !important;
	flex-direction: column !important;
	align-items: stretch !important;

	width: 100% !important;
	height: 100% !important;

	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	overflow: hidden !important;
	box-sizing: border-box;
}

/* Conteneur principal du contenu responsive. */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
	position: relative !important;
	z-index: 2;

	display: flex !important;
	flex: 1 1 auto !important;
	flex-direction: column !important;
	align-items: stretch !important;
	justify-content: flex-start !important;

	width: 100% !important;
	height: 100% !important;

	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: 100% !important;

	gap: 0 !important;
	margin: 0 !important;
	padding: 0 !important;

	overflow: hidden !important;
	box-sizing: border-box;
}

/*
 * WordPress conserve une liste Navigation factice ("Menu") avant
 * le template overlay. Elle n'est pas utilisée par le mega-menu CCMA.
 */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content
> .wp-block-navigation__container {
	display: none !important;
}

/*
 * Wrapper réel entourant le template de mega-menu.
 *
 * C'est lui qui doit défiler : il est directement contraint par la chaîne
 * flex WordPress et son contenu peut conserver sa hauteur naturelle.
 */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__overlay-container {
	position: relative !important;
	z-index: 3;

	display: block !important;
	flex: 1 1 auto !important;

	width: 100% !important;
	height: auto !important;

	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	overflow-x: hidden !important;
	overflow-y: auto !important;

	-webkit-overflow-scrolling: touch;
	overscroll-behavior-y: contain;
	touch-action: pan-y;

	box-sizing: border-box;
}

/*
 * Le template CCMA retrouve une hauteur naturelle.
 * Ne pas placer overflow-y:auto ici : un seul élément doit posséder
 * le scroll vertical, à savoir .wp-block-navigation__overlay-container.
 */
.wp-block-navigation__responsive-container.is-menu-open
.ccma-mega-menu-content {
	position: relative !important;
	z-index: 1;

	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;

	width: 100% !important;
	height: auto !important;
	min-height: 100% !important;
	max-height: none !important;

	margin: 0 !important;

	overflow: visible !important;

	background:
		var(--wp--preset--color--vert, var(--ccma-navbar-green));

	box-sizing: border-box;
}

/*
 * Le template CCMA possède son propre bouton de fermeture.
 * Le bouton natif reste dans le DOM mais ne doit jamais apparaître.
 */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;

	position: absolute !important;

	width: 0 !important;
	height: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;

	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;

	overflow: hidden !important;
}

/* Rendu éventuel du template hors de l'overlay natif. */
.ccma-navigation-overlay {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

/* Barre supérieure fixe pendant le défilement du mega-menu. */
.ccma-navigation-overlay__top {
	position: sticky;
	top: 0;
	z-index: 30;

	flex: 0 0 auto;
	width: 100%;

	background:
		var(--wp--preset--color--vert, var(--ccma-navbar-green));

	box-sizing: border-box;
}

/* Empêche la page située derrière le menu de défiler. */
body.ccma-mega-menu-open,
body:has(.wp-block-navigation__responsive-container.is-menu-open) {
	overflow: hidden !important;
	overscroll-behavior: none;
}

/* Décalage de la barre d’administration WordPress. */
body.admin-bar .wp-block-navigation__responsive-container.is-menu-open {
	top: 32px !important;

	height: calc(100vh - 32px) !important;
	height: calc(100svh - 32px) !important;
	height: calc(100dvh - 32px) !important;

	max-height: calc(100dvh - 32px) !important;
}

@media (max-width: 782px) {
	body.admin-bar .wp-block-navigation__responsive-container.is-menu-open {
		top: 46px !important;

		height: calc(100vh - 46px) !important;
		height: calc(100svh - 46px) !important;
		height: calc(100dvh - 46px) !important;

		max-height: calc(100dvh - 46px) !important;
	}
}

@supports (-webkit-touch-callout: none) {
	.wp-block-navigation__responsive-container.is-menu-open {
		height: -webkit-fill-available !important;
		max-height: -webkit-fill-available !important;
	}
}

/* ==========================================================
   COMPATIBILITY WITH THE OLD CUSTOM OVERLAY
   ========================================================== */

/*
 * These selectors are retained for older markup/JavaScript, but now use the
 * same height and scrolling model as the native WordPress overlay.
 */
section.ccma-mega-menu,
.ccma-mega-menu-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--ccma-mega-menu-z-index);

	width: 100vw;
	height: 100vh;
	height: 100dvh;
	min-height: 0;
	max-height: 100dvh;

	margin: 0 !important;
	overflow: hidden;
	background: var(--wp--preset--color--vert, var(--ccma-navbar-green));
	box-sizing: border-box;
}

section.ccma-mega-menu {
	display: block;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-0.5rem);
	transition:
		opacity 0.25s ease,
		transform 0.25s ease,
		visibility 0s linear 0.25s;
}

section.ccma-mega-menu.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	transition:
		opacity 0.25s ease,
		transform 0.25s ease,
		visibility 0s linear 0s;
}

.ccma-mega-menu__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	min-height: 0;
	max-height: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--vert, var(--ccma-navbar-green));
	box-sizing: border-box;
}

.ccma-mega-menu__inner > .ccma-mega-menu-content {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.ccma-mega-menu-block {
	display: none;
}

/* ==========================================================
   NAVIGATION BAR
   ========================================================== */

.ccma-navbar {
	width: 100%;
	box-sizing: border-box;
}

.ccma-mega-header__inner {
	width: 100%;
	box-sizing: border-box;
	padding-right: var(--wp--preset--spacing--60);
	padding-left: var(--wp--preset--spacing--60);
}

.ccma-mega-header__branding img {
	display: block;
	width: auto;
	max-height: 90px;
}

.ccma-mega-header__tools {
	gap: var(--wp--preset--spacing--30);
}

.ccma-mega-menu-navigation {
	position: relative;
	z-index: 10;
}

/* Native WordPress opening button. */
.ccma-mega-menu-navigation
.wp-block-navigation__responsive-container-open {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;

	width: var(--ccma-mega-menu-open-width);
	height: var(--ccma-mega-menu-control-size);
	padding: 0;

	border: 0;
	border-radius: var(--ccma-mega-menu-radius);
	background: var(--wp--preset--color--vert-100, #d2dccc);
	color: var(--wp--preset--color--vert, var(--ccma-navbar-green));
	cursor: pointer;
}

.ccma-mega-menu-navigation
.wp-block-navigation__responsive-container-open svg {
	display: none;
}

.ccma-mega-menu-navigation
.wp-block-navigation__responsive-container-open::before {
	content: "";
	display: block;
	width: 34px;
	height: 20px;
	background:
		linear-gradient(currentColor, currentColor) 0 0 / 34px 2px no-repeat,
		linear-gradient(currentColor, currentColor) 0 9px / 34px 2px no-repeat,
		linear-gradient(currentColor, currentColor) 0 18px / 34px 2px no-repeat;
}

.ccma-mega-menu-navigation
.wp-block-navigation__responsive-container-open:hover,
.ccma-mega-menu-navigation
.wp-block-navigation__responsive-container-open:focus-visible {
	background: var(--wp--preset--color--vert-800, #3a4932);
	color: var(--wp--preset--color--beige, var(--ccma-navbar-cream));
}

.ccma-mega-menu-navigation
.wp-block-navigation__responsive-container-open:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Legacy custom opening button. */
.ccma-mega-menu-toggle {
	height: var(--ccma-mega-menu-control-size) !important;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.ccma-mega-menu-toggle__svg {
	display: block;
	width: var(--ccma-mega-menu-open-width) !important;
	height: auto;
}

/* ==========================================================
   CLOSE CONTROLS
   ========================================================== */

.ccma-overlay-close,
.ccma-overlay-close button,
.ccma-overlay-close .wp-block-navigation-overlay-close {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;

	width: var(--ccma-mega-menu-control-size);
	height: var(--ccma-mega-menu-control-size);
	padding: 0;
	margin: 0;

	border: 0;
	background: transparent;
	color: transparent;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
}

.ccma-overlay-close::before,
.ccma-overlay-close button::before,
.ccma-overlay-close .wp-block-navigation-overlay-close::before {
	content: "";
	display: block;
	width: var(--ccma-mega-menu-control-size);
	height: var(--ccma-mega-menu-control-size);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg width='45' height='45' viewBox='0 0 45 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='44.0417' height='45' rx='15' fill='%23D2DCCC'/%3E%3Cline y1='-1' x2='34' y2='-1' transform='matrix(-0.707107 -0.707107 -0.707107 0.707107 34.0417 35.0416)' stroke='%236A855A' stroke-width='2'/%3E%3Cline y1='-1' x2='34' y2='-1' transform='matrix(0.707107 -0.707107 -0.707107 -0.707107 10 34)' stroke='%236A855A' stroke-width='2'/%3E%3C/svg%3E");
}

.ccma-overlay-close svg {
	display: none;
}

.ccma-mega-menu-close-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: var(--ccma-mega-menu-control-size);
	height: var(--ccma-mega-menu-control-size);
	padding: 0;
	margin: 0;

	border: 0;
	border-radius: var(--ccma-mega-menu-radius);
	background-color: var(--wp--preset--color--vert-100, #d2dccc);
	color: var(--wp--preset--color--vert, var(--ccma-navbar-green));
	cursor: pointer;
}

.ccma-mega-menu-close-toggle__icon {
	display: grid;
	place-items: center;
	width: var(--ccma-mega-menu-control-size);
	height: var(--ccma-mega-menu-control-size);
	line-height: 0;
	color: inherit;
}

.ccma-mega-menu-close-toggle__icon svg {
	display: block;
	width: 26px;
	height: 26px;
	color: currentColor;
	stroke: currentColor;
	stroke-width: 2px;
}

.ccma-mega-menu-close-toggle:hover,
.ccma-mega-menu-close-toggle:focus-visible {
	background-color: var(--wp--preset--color--vert-800, #3a4932);
	color: var(--wp--preset--color--beige, var(--ccma-navbar-cream));
}

.ccma-mega-menu-close-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.ccma-mega-menu-close {
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 2rem;
	cursor: pointer;
}

/* ==========================================================
   TOP BAR ICON INTERACTIONS
   ========================================================== */

.ccma-navigation-overlay__top a.ccma-simple-svg-link svg rect,
.ccma-navigation-overlay__top a.ccma-simple-svg-link svg path,
.ccma-navigation-overlay__top button,
.ccma-navigation-overlay__top button svg line {
	transition:
		fill 0.2s ease,
		stroke 0.2s ease,
		background-color 0.2s ease,
		color 0.2s ease;
}

.ccma-navigation-overlay__top a.ccma-simple-svg-link:hover svg rect {
	fill: var(--wp--preset--color--vert-800, #3a4932);
}

.ccma-navigation-overlay__top a.ccma-simple-svg-link:hover svg path {
	fill: var(--wp--preset--color--beige, var(--ccma-navbar-cream));
}

.ccma-navigation-overlay__top button:hover {
	background-color: var(--wp--preset--color--vert-800, #3a4932);
}

.ccma-navigation-overlay__top button:hover svg line {
	stroke: var(--wp--preset--color--beige, var(--ccma-navbar-cream));
}

/* ==========================================================
   MENU CONTENT AND COLUMNS
   ========================================================== */

.ccma-mega-menu-columns {
	flex: 0 0 auto;
	align-content: start;

	width: 100%;
	box-sizing: border-box;
	margin-block-start: 0 !important;
	padding:
		var(--wp--preset--spacing--50)
		var(--wp--preset--spacing--60);
	gap: var(--wp--preset--spacing--50);
}

.ccma-mega-menu-columns h2:hover a {
	text-decoration: none !important;
}

.ccma-mega-menu-columns .wp-block-page-list,
ul.wp-block-page-list,
ul.wp-block-navigation__submenu-container {
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.ccma-mega-menu-columns
.wp-block-page-list
.wp-block-pages-list__item {
	padding-bottom: 0.2em;
	transition:
		padding-left 0.2s ease-out,
		color 0.2s ease-out;
}

.ccma-mega-menu-columns
.wp-block-page-list
.wp-block-pages-list__item:hover {
	padding-left: 1.25em;
	color: var(--wp--preset--color--vert-900, #2a3524);
	font-weight: 400 !important;
}

.ccma-mega-menu-content h2,
.ccma-mega-menu-content h3 {
	margin-block-start: 0;
}

.ccma-mega-menu-content h2 {
	padding-bottom: 1em;
	font-family: var(--wp--preset--font-family--sagace);
}

.ccma-mega-menu-content h3 {
	padding-bottom: 0.4em;
}

.ccma-mega-menu-content h2 a {
	font-family: var(--wp--preset--font-family--sagace);
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 23px;
	letter-spacing: 0;
	vertical-align: middle;
}

.ccma-mega-menu-content h3 a {
	font-family: var(--wp--preset--font-family--sagace);
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: 0;
	vertical-align: middle;
}

.ccma-mega-menu-content h2 + ul,
.ccma-mega-menu-content h3 + ul {
	font-family: var(--wp--preset--font-family--sagace);
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 15px;
	letter-spacing: 0;
	vertical-align: middle;
}

.ccma-mega-menu-content a {
	text-decoration: none !important;
}

.ccma-mega-menu-content a:hover {
	text-decoration: underline !important;
}

.ccma-mega-menu-content h4 a {
	display: inline;
	background-image: linear-gradient(
		var(--wp--preset--color--vert-900, #2a3524),
		var(--wp--preset--color--vert-900, #2a3524)
	);
	background-repeat: no-repeat;
	background-position: 0 88%;
	background-size: 100% 0.35em;
	text-decoration: none !important;
}

.ccma-mega-menu-content h4 a:hover {
	text-decoration: none !important;
}

.ccma-mega-menu-content
.ccma-mega-menu-columns
ul li a {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	text-decoration: none;
	text-decoration-thickness: auto;
}

.ccma-page-list-parent {
	margin-bottom: 15px;
}

.ccma-page-list-parent-title {
	margin: 0;
}

.ccma-page-list-parent-title a {
	font-family: var(--wp--preset--font-family--sagace) !important;
	font-size: var(--wp--preset--font-size--small) !important;
	font-weight: 800 !important;
	line-height: 1;
	color: var(--wp--preset--color--beige, var(--ccma-navbar-cream)) !important;
	text-decoration: none;
}

.ccma-page-list-parent-title a:hover {
	color: var(--wp--preset--color--beige, var(--ccma-navbar-cream)) !important;
	text-decoration: underline 2px !important;
}

.wp-block-pages-list__item.has-child {
	padding-bottom: 21px !important;
	font-size: var(--wp--preset--font-size--small) !important;
	font-weight: 500 !important;
}

a.wp-block-pages-list__item__link {
	color: inherit;
	text-decoration: none;
}

/* ==========================================================
   SMARTPHONE MENU
   ========================================================== */

.ccma-mega-menu-smartphone {
	width: 100%;
	box-sizing: border-box;
}

.ccma-mega-menu-smartphone h2 {
	text-decoration-thickness: 60%;
	text-underline-offset: -15%;
}

.ccma-mega-menu-smartphone .wp-block-pages-list__item {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0.25em !important;

	font-family: var(--wp--preset--font-family--sagace) !important;
	font-size: var(--wp--preset--font-size--body-small) !important;
	font-style: normal;
	font-weight: 300;
	line-height: 1.25;
	letter-spacing: 0;
}

/* ==========================================================
   SEARCH BLOCK OVERRIDES
   ========================================================== */

header nav
.ccma-mega-menu-content
.wp-block-search__button-inside
.wp-block-search__inside-wrapper {
	height: var(--ccma-mega-menu-control-size) !important;
	border: 0;
	border-radius: var(--ccma-mega-menu-radius) !important;
	background-color: var(--wp--preset--color--beige, var(--ccma-navbar-cream)) !important;
}

header nav .ccma-mega-menu-content .wp-block-search__input {
	min-width: 0;
	font-weight: 400;
}

header nav
.ccma-mega-menu-content
.wp-block-search__button-inside
.wp-block-search__inside-wrapper button {
	border: 0;
	background: var(--wp--preset--color--beige, var(--ccma-navbar-cream)) !important;
	color: var(--wp--preset--color--vert, var(--ccma-navbar-green)) !important;
}

header nav
.ccma-mega-menu-content
.wp-block-search__button-inside.wp-block-search__icon-button.wp-block-search {
	width: min(34.653vw, 100%);
	max-width: 100%;
}

/* ==========================================================
   RESPONSIVE LAYOUT
   ========================================================== */

@media (min-width: 981px) {
	.ccma-mega-menu .wp-block-group-is-layout-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ccma-query-children-of-current-page.grand-childs ul {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media (max-width: 980px) {
	.ccma-mega-menu .wp-block-group-is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ccma-query-children-of-current-page.grand-childs ul {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.ccma-mega-header__inner {
		padding-right: var(--wp--preset--spacing--40);
		padding-left: var(--wp--preset--spacing--40);
	}

	.ccma-mega-header__tools {
		gap: var(--wp--preset--spacing--20);
	}

	.ccma-mega-header__tools .wp-block-search {
		width: min(220px, 100%);
		max-width: 220px;
	}

	.ccma-mega-menu-columns {
		flex-direction: column;
		padding-right: var(--wp--preset--spacing--40);
		padding-left: var(--wp--preset--spacing--40);
	}

	.ccma-mega-menu-columns > .wp-block-column,
	.ccma-mega-menu-column-large .wp-block-column {
		flex-basis: 100% !important;
		width: 100%;
	}

	.ccma-mega-menu-column-large .wp-block-columns {
		flex-direction: column;
		gap: 0;
	}
}

@media (max-width: 600px) {
	.wp-block-navigation__responsive-container.is-menu-open
	.ccma-mega-menu-content {
		/* Retain the Gutenberg padding while respecting iOS safe areas. */
		padding-top: max(
			var(--wp--preset--spacing--40),
			env(safe-area-inset-top)
		) !important;
		padding-right: env(safe-area-inset-right) !important;
		padding-bottom: max(
			var(--wp--preset--spacing--40),
			env(safe-area-inset-bottom)
		) !important;
		padding-left: env(safe-area-inset-left) !important;
	}

	header nav
	.ccma-mega-menu-content
	.wp-block-search__button-inside.wp-block-search__icon-button.wp-block-search {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.ccma-mega-menu .wp-block-group-is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ccma-query-children-of-current-page.grand-childs ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}





/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
	section.ccma-mega-menu,
	.ccma-navigation-overlay__top *,
	.ccma-mega-menu-columns .wp-block-pages-list__item {
		transition: none !important;
	}
}

/* ==========================================================
   MEGA-MENU H2 LINKS — NO DECORATION ON ANY PAGE
   ========================================================== */

/*
 * Do not scope this rule through .ccma-mega-menu-toggle:
 * that class is present on the homepage Navigation block but absent from
 * the Navigation block used by regular page headers.
 */
.wp-block-navigation__responsive-container
.wp-block-navigation__overlay-container
.ccma-mega-menu-content h2.wp-block-heading > a,
.wp-block-navigation__responsive-container
.wp-block-navigation__overlay-container
.ccma-mega-menu-content h2.wp-block-heading > a:link,
.wp-block-navigation__responsive-container
.wp-block-navigation__overlay-container
.ccma-mega-menu-content h2.wp-block-heading > a:visited,
.wp-block-navigation__responsive-container
.wp-block-navigation__overlay-container
.ccma-mega-menu-content h2.wp-block-heading > a:hover,
.wp-block-navigation__responsive-container
.wp-block-navigation__overlay-container
.ccma-mega-menu-content h2.wp-block-heading > a:focus,
.wp-block-navigation__responsive-container
.wp-block-navigation__overlay-container
.ccma-mega-menu-content h2.wp-block-heading > a:focus-visible,
.wp-block-navigation__responsive-container
.wp-block-navigation__overlay-container
.ccma-mega-menu-content h2.wp-block-heading > a:active {
	text-decoration: none !important;
	text-decoration-line: none !important;
	-webkit-text-decoration-line: none !important;

	background-image: none !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
}

/* ==========================================================
   NATIVE TOP LAYER — ESCAPE HEADER/COVER CLIPPING
   ========================================================== */

/*
 * The JavaScript companion adds popover="manual" to the native WordPress
 * responsive container. When open, the element is promoted to the browser's
 * top layer. It therefore cannot be clipped by .wp-block-cover, the header,
 * overflow, transforms or stacking contexts.
 */
.ccma-mega-menu-navigation
.wp-block-navigation__responsive-container[popover] {
	margin: 0;
	padding: 0;
	border: 0;

	width: auto;
	height: auto;
	max-width: none;
	max-height: none;

	background:
		var(--wp--preset--color--vert, var(--ccma-navbar-green));
}

/*
 * Final viewport geometry of the top-layer element.
 */
.ccma-mega-menu-navigation
.wp-block-navigation__responsive-container[popover]:popover-open {
	position: fixed !important;
	inset: 0 !important;

	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;

	width: 100vw !important;
	min-width: 100vw !important;
	max-width: 100vw !important;

	height: 100vh !important;
	height: 100svh !important;
	height: 100dvh !important;
	min-height: 100dvh !important;
	max-height: 100dvh !important;

	margin: 0 !important;
	padding: 0 !important;

	overflow: hidden !important;
	overscroll-behavior: none;

	box-sizing: border-box !important;
}

/*
 * Do not let browser popover defaults create an additional backdrop color.
 */
.ccma-mega-menu-navigation
.wp-block-navigation__responsive-container[popover]::backdrop {
	background: transparent;
}

/*
 * Full flex-height chain inside the top-layer element.
 */
.ccma-mega-menu-navigation
.wp-block-navigation__responsive-container[popover]:popover-open
.wp-block-navigation__responsive-close,
.ccma-mega-menu-navigation
.wp-block-navigation__responsive-container[popover]:popover-open
.wp-block-navigation__responsive-dialog,
.ccma-mega-menu-navigation
.wp-block-navigation__responsive-container[popover]:popover-open
.wp-block-navigation__responsive-container-content {
	display: flex !important;
	flex: 1 1 auto !important;
	flex-direction: column !important;
	align-items: stretch !important;

	width: 100% !important;
	height: 100% !important;

	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	overflow: hidden !important;
	box-sizing: border-box !important;
}

/*
 * The real scrolling viewport.
 */
.ccma-mega-menu-navigation
.wp-block-navigation__responsive-container[popover]:popover-open
.wp-block-navigation__overlay-container {
	display: block !important;
	flex: 1 1 auto !important;

	width: 100% !important;
	height: auto !important;

	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	overflow-x: hidden !important;
	overflow-y: auto !important;

	-webkit-overflow-scrolling: touch;
	overscroll-behavior-y: contain;
	touch-action: pan-y;

	box-sizing: border-box !important;
}

/*
 * The menu template keeps its natural content height inside the scrolling
 * overlay container.
 */
.ccma-mega-menu-navigation
.wp-block-navigation__responsive-container[popover]:popover-open
.ccma-mega-menu-content {
	width: 100% !important;
	height: auto !important;
	min-height: 100% !important;
	max-height: none !important;

	margin: 0 !important;
	overflow: visible !important;
}

/*
 * Native WordPress close button remains unused because the CCMA template
 * supplies its own close control.
 */
.ccma-mega-menu-navigation
.wp-block-navigation__responsive-container[popover]
.wp-block-navigation__responsive-container-close {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/*
 * The dummy native Navigation list is not part of the mega-menu interface.
 */
.ccma-mega-menu-navigation
.wp-block-navigation__responsive-container[popover]
.wp-block-navigation__responsive-container-content
> .wp-block-navigation__container {
	display: none !important;
}

/*
 * Lock the page behind the top-layer menu.
 */
html.ccma-mega-menu-top-layer-open,
html.ccma-mega-menu-top-layer-open body {
	overflow: hidden !important;
	overscroll-behavior: none;
}

/*
 * Safari fallback for the dynamic viewport when the browser UI changes size.
 */
@supports (-webkit-touch-callout: none) {
	.ccma-mega-menu-navigation
	.wp-block-navigation__responsive-container[popover]:popover-open {
		height: -webkit-fill-available !important;
		min-height: -webkit-fill-available !important;
		max-height: -webkit-fill-available !important;
	}
}

.ccma-mega-menu-content h2 {
	text-decoration: underline;
	text-decoration-color: currentcolor;
	text-decoration-thickness: auto;
	text-decoration-color: currentcolor;
	text-decoration-thickness: auto;
	text-decoration-color: var(--wp--preset--color--vert-800);
	text-decoration-thickness: auto;
	text-decoration-thickness: 40%;
	text-underline-offset: -10%;
	-webkit-text-decoration-skip-ink: none;
	text-decoration-skip-ink: none;
}