/* Mobile menu
 *
 * Full-screen phone/tablet menu (Figma "Mobile", node 539-194). Markup comes from Divi's
 * Menu module plus inc/mobile-menu.php; open/close state from assets/js/mobile-menu.js,
 * which toggles `opened` on Divi's .mobile_nav and `cna-mm-open` on <html>.
 *
 * Divi shows the hamburger at ≤980px, so that is the breakpoint here too. Colours come
 * from Divi's global palette so they follow the builder. Icons are Divi's own ETmodules
 * glyphs (hamburger "a", close "M", chevron "5", the same arrow the buttons use) with
 * CSS alt text so they stay out of accessible names; the globe and external-link marks
 * are the Figma assets inlined.
 *
 * Written with CSS nesting. Rules nested under Divi's long menu prefix keep the same
 * specificity the flat versions had, which is what lets them beat Divi's generated CSS.
 */

/* Items that only belong in the mobile menu stay out of the desktop menu. */
.et_pb_menu__menu > nav > ul > li:is(.mm-btn, .cna-mm__lang, .cna-mm__util) {
	display: none;
}

/* Toggle button, in the spot Divi's span used to be. */
.et_pb_menu .cna-mm__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--gcid-heading-color, #28465b);
	cursor: pointer;

	.cna-mm__toggle-icon::before {
		content: "a" / "";
		font-family: ETmodules, sans-serif;
		font-size: 32px;
		line-height: 1;
		font-weight: 400;
		font-style: normal;
		speak: never;
	}

	&[aria-expanded="true"] .cna-mm__toggle-icon::before {
		content: "M" / "";
	}
}

@media (max-width: 980px) {
	:is(html.cna-mm-open, .cna-mm-open body) {
		overflow: hidden;
	}

	/* The header pins to the top while the menu is open so the logo and close button stay
	 * where the design puts them even if the page was scrolled. Fixed, not sticky: Divi's
	 * page wrappers clip overflow, which defeats sticky. The page under it is covered and
	 * inert, so the reflow is invisible and undone on close. */
	.cna-mm-open {
		.et-l--header {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 10000;
			background: #fff;
		}

		&.admin-bar .et-l--header {
			top: var(--wp-admin--admin-bar-height, 46px);
		}

		/* Keep the page where it was: the fixed header leaves the flow, so the content after
		 * it gets that height back and nothing jumps while the sheet is revealing. */
		.et-l--header + * {
			padding-block-start: var(--cna-mm-header-h, 0px);
		}
	}

	.et_pb_menu .et_mobile_nav_menu .mobile_nav {
		/* The panel. Divi's rule is display:none until .opened; ours replaces its dropdown
		 * geometry (absolute, border-top, shadow) with a fixed sheet under the header. */
		&.opened .et_mobile_menu {
			display: flex;
			flex-direction: column;
			position: fixed;
			inset: var(--cna-mm-top, 96px) 0 0 0;
			inline-size: auto;
			block-size: auto;
			margin: 0;
			padding: 8px 26px 0;
			border-top: 0;
			box-shadow: none;
			background: #fff;
			overflow-y: auto;
			overscroll-behavior: contain;
			visibility: visible;
			opacity: 1;
			transition: none;
		}

		/* Slide-down reveal in place of Divi's jQuery slideDown, and the reverse on close
		 * (mobile-menu.js keeps `opened` on until the closing animation ends). */
		@media (prefers-reduced-motion: no-preference) {
			&.opened .et_mobile_menu {
				animation: cna-mm-in 0.4s ease-out both;
			}

			&.opened.cna-mm-closing .et_mobile_menu {
				animation: cna-mm-out 0.3s ease-in both;
			}
		}

		.et_mobile_menu > li {
			margin: 0;
			padding: 0;
			border: 0;

			> a {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 12px;
				padding: 30px 0;
				border: 0;
				background: none;
				color: var(--gcid-heading-color, #28465b);
				font-family: Arial, Helvetica, sans-serif;
				font-size: 14px;
				font-weight: 700;
				line-height: 20px;
			}

			/* Page links: dashed rule above each, and below the last one; chevron on the right. */
			&:not(.mm-btn, .cna-mm__lang, .cna-mm__util) {
				border-top: 2px dashed var(--gcid-secondary-color, #ff9933);

				&:is(:has(+ .cna-mm__util), :last-child) {
					border-bottom: 2px dashed var(--gcid-secondary-color, #ff9933);
				}

				> a::after {
					content: "5" / "";
					flex: 0 0 auto;
					font-family: ETmodules, sans-serif;
					font-size: 18px;
					line-height: 1;
					font-weight: 400;
				}
			}

			/* Buttons: "Find Training" (menu item with class mm-btn) filled, language outlined. */
			&:is(.mm-btn, .cna-mm__lang) > a {
				justify-content: center;
				gap: 8px;
				min-block-size: 40px;
				padding: 10px 20px;
				border: 1px solid var(--gcid-primary-color, #007cad);
				border-radius: 999px;
				background: var(--gcid-primary-color, #007cad);
				/* !important: Divi paints the current page's link with its active-link colour
				 * using !important, which turned this button blue-on-blue on its own page. */
				color: #fff !important;
				font-family: Nunito, Helvetica, Arial, sans-serif;
				font-weight: 700;
			}

			&.mm-btn {
				padding-block: 12px 8px;

				> a::after {
					content: "5" / "";
					font-family: ETmodules, sans-serif;
					font-size: 14px;
					line-height: 1;
					font-weight: 400;
				}
			}

			&.cna-mm__lang {
				padding-block: 8px 36px;

				> a {
					background: #fff;
					color: var(--gcid-heading-color, #28465b) !important;
					font-weight: 600;

					&.gt-current-lang {
						display: none;
					}

					&::before {
						content: "";
						flex: 0 0 auto;
						inline-size: 14px;
						block-size: 14px;
						background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%2328465B' stroke-width='1.1667' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='5.8333'/%3E%3Cpath d='M4.6667 7A8.75 8.75 0 0 1 7 1.1667 8.75 8.75 0 0 1 9.3333 7 8.75 8.75 0 0 1 7 12.8333 8.75 8.75 0 0 1 4.6667 7Z'/%3E%3Cpath d='M1.1667 7h11.6666'/%3E%3C/svg%3E") center / contain no-repeat;
					}
				}
			}

			/* Footer links: light band that fills whatever is left below the page links. */
			&.cna-mm__util {
				margin-inline: -26px;
				padding-inline: 29px;
				background: #edf6fb;

				&:last-child {
					flex: 1 0 auto;
					padding-block-end: 35px;
				}

				> a {
					justify-content: flex-start;
					gap: 4px;
					padding: 12px 0;
					font-size: 12px;
					line-height: 16px;
				}

				&.cna-mm__util--external > a::before {
					content: "";
					flex: 0 0 auto;
					inline-size: 10px;
					block-size: 10px;
					background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%2320465D' stroke-width='.8333' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.25 1.25h2.5v2.5M4.1667 5.8333 8.75 1.25M7.5 5.4167v2.5a.8333.8333 0 0 1-.8333.8333H2.0833A.8333.8333 0 0 1 1.25 7.9167V3.3333A.8333.8333 0 0 1 2.0833 2.5h2.5'/%3E%3C/svg%3E") center / contain no-repeat;
				}
			}

			&:not(.cna-mm__util) + li.cna-mm__util {
				margin-block-start: 37px;
				padding-block-start: 35px;
			}
		}
	}
}

@keyframes cna-mm-in {
	from {
		clip-path: inset(0 0 100% 0);
	}

	to {
		clip-path: inset(0);
	}
}

@keyframes cna-mm-out {
	from {
		clip-path: inset(0);
	}

	to {
		clip-path: inset(0 0 100% 0);
	}
}