/* ==========================================================================
   Alert Bar — Banner de Alerta Superior
   ========================================================================== */

.alert-bar {
	background: linear-gradient(90deg, #0216EF 0%, #2139CF 25%, #2625C8 54%, #457DDA 77%, #0798F9 95%);
	color: var(--white);
	padding: var(--space-3) 0;
	position: relative;
	z-index: 100;
}

.alert-bar__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
}

.alert-bar__content {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex: 1;
	justify-content: center;
}

.alert-bar__icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.alert-bar__text {
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.18;
	margin: 0;
}

.alert-bar__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--white);
	font-size: 0.875rem;
	font-weight: 500;
	white-space: nowrap;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: opacity 0.2s ease;
}

.alert-bar__link:hover {
	color: var(--white);
}

.alert-bar__link-icon {
	display: flex;
	align-items: center;
}

.alert-bar__close {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white);
	padding: var(--space-1);
	flex-shrink: 0;
	transition: opacity 0.2s ease;
}

.alert-bar__close:hover {
	opacity: 0.7;
}

/* Hidden state */
.alert-bar.is-hidden {
	display: none;
}

/* Mobile */
@media (max-width: 767px) {
	.alert-bar {
		padding: var(--space-3) 0;
	}

	.alert-bar__inner {
		gap: var(--space-3);
	}

	.alert-bar__content {
		gap: var(--space-2);
		justify-content: flex-start;
	}

	.alert-bar__icon {
		flex-shrink: 0;
	}

	.alert-bar__text {
		font-size: 0.8125rem;
		font-weight: 600;
		line-height: 1.18;
	}

	.alert-bar__link {
		font-size: 0.8125rem;
		white-space: nowrap;
	}
}

/* ==========================================================================
   Site Header — Logo + Nav + CTA
   ========================================================================== */

.site-header {
	background: var(--white);
	position: sticky;
	top: 0;
	z-index: 90;
	border-bottom: 1px solid var(--gray-50);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	height: 80px;
}

/* Logo */
.site-header__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.site-header__logo img,
.site-header__logo svg {
	height: 48px;
	width: auto;
}

/* ==========================================================================
   Site Nav — Navegación principal desktop
   ========================================================================== */

.site-nav__list {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.site-nav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-2) var(--space-2);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--dark-blue-500);
	transition: color 0.2s ease;
	white-space: nowrap;
}

@media (min-width: 1200px) {
	.site-nav__link {
		padding: var(--space-2) var(--space-3);
		font-size: 0.9375rem;
	}
}

button.site-nav__link {
	cursor: pointer;
}

.site-nav__link:hover {
	color: var(--blue-500);
}

.site-nav__arrow {
	display: flex;
	align-items: center;
	transition: transform 0.2s ease;
}

.site-nav__arrow svg {
	width: 10px;
	height: 6px;
}

/* Arrow rotate when open */
.site-nav__item--has-mega.is-open .site-nav__arrow {
	transform: rotate(180deg);
}

/* Active state for nav item */
.site-nav__link[aria-expanded="true"] {
	color: var(--dark-blue-500);
}

/* ==========================================================================
   CTA Button
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: var(--space-3) var(--space-6);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
	border-radius: 20px;
	transition: background-color 0.2s ease, transform 0.1s ease;
	white-space: nowrap;
}

.btn--primary {
	background-color: var(--orange-500);
	color: var(--white);
}

.btn--primary:hover {
	background-color: var(--orange-600);
	color: var(--white);
}

.btn--primary:active {
	transform: scale(0.98);
}

/* CTA: texto completo en desktop, primera palabra en mobile */
.site-header__cta-short {
	display: none;
}

/* CTA mobile nav — oculto en desktop */
.site-nav__cta-mobile {
	display: none;
	width: 100%;
	text-align: center;
}

/* ==========================================================================
   Hamburger — Mobile menu toggle
   ========================================================================== */

.site-header__hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px;
	height: 32px;
	padding: 4px;
}

.site-header__hamburger span {
	display: block;
	width: 100%;
	height: 2px;
	background-color: var(--dark-blue-500);
	border-radius: 2px;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hamburger animation when open */
.site-header__hamburger[aria-expanded="true"] span:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}

.site-header__hamburger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.site-header__hamburger[aria-expanded="true"] span:nth-child(3) {
	transform: rotate(-45deg) translate(5px, -5px);
}

/* ==========================================================================
   Responsive — Mobile
   ========================================================================== */

@media (max-width: 1023px) {
	.site-header__inner {
		height: 64px;
		gap: 8px;
	}

	.site-header__logo img,
	.site-header__logo svg {
		height: 40px;
	}

	/* Hide desktop nav, show hamburger */
	.site-nav {
		display: none;
	}

	.site-header__cta {
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 48px !important;
		padding: 8px 16px !important;
		min-height: auto !important;
		height: 36px;
		flex-shrink: 0;
		font-family: 'TT Norms Pro', sans-serif;
		font-size: 14px;
		font-weight: 700;
		line-height: 20px;
		letter-spacing: 0;
		margin-left: auto;
		margin-right: 0;
		order: 2;
	}

	.site-header__hamburger {
		order: 3;
		margin-left: 4px;
		flex-shrink: 0;
	}

	.site-header__cta-full {
		display: none;
	}

	.site-header__cta-short {
		display: inline;
	}

	.site-header__hamburger {
		display: flex;
	}

	/* Mobile nav open — fullscreen overlay */
	.site-nav.is-open {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--white);
		z-index: 1100;
		padding: 20px;
		padding-top: 80px;
		overflow-y: auto;
	}


	.site-nav.is-open .site-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.site-nav.is-open .site-nav__link {
		padding: 14px 16px;
		background-color: #F8F9FA;
		border-radius: 8px;
		border-bottom: none;
		width: 100%;
		justify-content: space-between;
		font-family: 'TT Norms Pro', sans-serif;
		font-size: 16px;
		font-weight: 600;
		line-height: 24px;
		letter-spacing: 0;
		color: var(--dark-blue-500);
	}

	.site-nav.is-open .site-nav__arrow {
		transform: rotate(-90deg);
	}

	.site-nav.is-open .site-nav__arrow svg {
		width: 12px;
		height: 8px;
	}

	/* Show CTA inside mobile nav */
	.site-nav.is-open .site-nav__cta-mobile {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 22px;
		border-radius: 48px;
		padding: 10px 20px;
		font-family: 'TT Norms Pro', sans-serif;
		font-size: 14px;
		font-weight: 700;
		line-height: 20px;
		letter-spacing: 0;
		color: var(--white);
		text-align: center;
	}

	/* Logo visible over mobile nav */
	.site-nav.is-open ~ .site-header__hamburger,
	.site-header__hamburger {
		z-index: 1102;
	}

	/* Header above alert-bar, floating contact, and backdrop when nav is open */
	.site-header.mobile-nav-open {
		z-index: 1200;
	}

	/* Fixed bar with logo and close — white bg */
	.site-header.mobile-nav-open .site-header__inner {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: var(--white);
		z-index: 1201;
		padding: 16px 20px;
	}

	.site-header.mobile-nav-open .site-header__hamburger {
		z-index: 1202;
	}

	.site-header.mobile-nav-open .site-header__logo {
		position: relative;
		z-index: 1202;
	}

	.site-header.mobile-nav-open .site-header__cta {
		display: none;
	}
}

/* ==========================================================================
   Mega Menú — Panel principal
   ========================================================================== */

.mega-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - var(--container-padding) * 2);
	max-width: 1220px;
	z-index: 80;
}

.mega-menu[hidden] {
	display: none;
}

/* Pointer / Triángulo */
.mega-menu__pointer {
	position: absolute;
	top: -14px;
	z-index: 2;
	pointer-events: none;
	transition: left 0.2s ease;
}

.mega-menu__pointer svg {
	display: block;
	filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.06));
}

/* Panel */
.mega-menu__panel {
	background: var(--white);
	border-radius: 22px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.04);
	position: relative;
	z-index: 1;
	overflow: hidden;
}

/* Círculo decorativo esquina inferior izquierda — solo drilldown */
.mega-menu--drilldown .mega-menu__panel {
	--circle-display: block;
}

.mega-menu--drilldown .mega-menu__panel::before {
	display: var(--circle-display);
	content: '';
	position: absolute;
	left: -34px;
	bottom: -34px;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: #73BFFD;
	opacity: 0.25;
	filter: blur(40px);
	pointer-events: none;
}

.mega-menu__inner {
	padding: 10px;
}

/* Headings — con ícono inline */
.mega-menu__heading {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-family: 'TT Norms Pro', sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.18;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--dark-blue-500);
	margin-bottom: var(--space-3);
}

.mega-menu__heading-icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.mega-menu__heading-icon svg,
.mega-menu__heading-icon img {
	width: 18px;
	height: 18px;
}

/* Badge "Nuevo" */
.mega-menu__badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 35px;
	font-size: 0.6875rem;
	font-weight: 600;
	background: linear-gradient(90deg, #50A4B1 16%, #4086FF 100%);
	color: var(--white);
	margin-left: auto;
	flex-shrink: 0;
	line-height: 1.4;
}

/* Links genéricos */
.mega-menu__link-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.mega-menu__link {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) 0;
	font-family: 'TT Norms Pro', sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.18;
	letter-spacing: 0;
	color: #444444;
	border-bottom: 1px solid #BEC8D6;
	width: 100%;
	transition: color 0.2s ease;
}

.mega-menu__link:hover {
	color: var(--blue-500);
}

.mega-menu__external-icon {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.mega-menu__external-icon svg {
	width: 14px;
	height: 14px;
}

/* ==========================================================================
   Layout: Drilldown 3 niveles — Nuestros Cursos
   Col 1 (Nivel 1): ~200px — Público con íconos
   Col 2 (Nivel 2): ~1fr   — Idiomas
   Col 3 (Nivel 3): ~2fr   — Categorías + enlaces (2 sub-columnas)
   ========================================================================== */

.mega-drill {
	display: grid;
	grid-template-columns: 1fr 1fr 673px;
	min-height: 340px;
}

/* Columnas compartidas */
.mega-drill__col {
	padding: 0 4px;
}

.mega-drill__col--l1 {
	padding: 0 10px 0 0;
	padding-right: 4px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mega-drill__col--l2 {
	padding: 0 10px;
	padding-left: 4px;
	display: flex;
	flex-direction: column;
}

.mega-drill__col--l3 {
	padding: 10px;
	background-color: #F8F9FA;
	border-radius: 20px;
}

/* Items genéricos de drill */
.mega-drill__item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	cursor: pointer;
	text-align: left;
	width: 100%;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Links directos (sin hijos) */
a.mega-drill__item--link {
	text-decoration: none;
}

/* ---- Nivel 1 items ---- */
.mega-drill__item--l1 {
	padding: 16px 16px 16px 14px;
	border-radius: 8px;
	background-color: #F8F9FA;
	border-left: 3px solid transparent;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--dark-blue-500);
	min-height: 56px;
}

.mega-drill__item--l1:hover {
	background-color: #DBEDFF;
	border-left-color: #016FDF;
	border-radius: 2px 8px 8px 2px;
}

.mega-drill__item--l1.is-active {
	background-color: #DBEDFF;
	border-left-color: #016FDF;
	border-radius: 2px 8px 8px 2px;
}

/* Ícono */
.mega-drill__icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.mega-drill__icon svg,
.mega-drill__icon img {
	width: 24px;
	height: 24px;
}

/* Label */
.mega-drill__label {
	flex: 1;
}

/* Flecha > */
.mega-drill__arrow {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.mega-drill__arrow svg {
	width: 20px;
	height: 20px;
}

/* Flecha circular ↗ para enlaces directos */
.mega-drill__arrow--ext svg {
	width: 20px;
	height: 20px;
}

/* Nivel 2: grupos (uno visible por cada L1 activo) */
.mega-drill__l2-group {
	display: none;
	flex-direction: column;
	gap: 8px;
}

.mega-drill__l2-group.is-active {
	display: flex;
}

/* Nivel 2 items */
.mega-drill__item--l2 {
	gap: var(--space-3);
	font-family: 'TT Norms Pro', sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.18;
	letter-spacing: 0;
	color: #444444;
	background-color: #F8F9FA;
	padding: 16px 16px 16px 14px;
	border-radius: 8px;
	border-left: 3px solid transparent;
	min-height: 56px;
}

.mega-drill__item--l2:hover {
	background-color: #D5DAFF;
	border-left-color: #5064F7;
	border-radius: 2px 8px 8px 2px;
	color: #5064F7;
	font-weight: 700;
}

.mega-drill__item--l2.is-active {
	background-color: #D5DAFF;
	border-left-color: #5064F7;
	border-radius: 2px 8px 8px 2px;
	color: #5064F7;
	font-weight: 700;
}

/* Nivel 3: grupos (uno visible por cada L2 activo) */
.mega-drill__l3-group {
	display: none;
}

.mega-drill__l3-group.is-active {
	display: block;
}

/* Nivel 3: 2 sub-columnas de categorías */
.mega-drill__l3-columns {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.mega-drill__l3-col {
	min-width: 0;
	padding: 10px;
}

/* Promo link — Descuentos Especiales */
.mega-menu__promo {
	margin-top: auto;
	margin-bottom: 40px;
}

.mega-menu__promo-link {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	position: relative;
	overflow: hidden;
	background: var(--white);
	border-radius: 8px;
	padding: 16px;
	font-family: 'TT Norms Pro', sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--dark-blue-500);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.mega-menu__promo-link:hover {
	opacity: 0.85;
}

/* Círculo decorativo con layer blur */
.mega-menu__promo-link::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: #4279F1;
	filter: blur(30px);
	opacity: 0.25;
	pointer-events: none;
}

.mega-menu__promo-icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.mega-menu__promo-icon svg,
.mega-menu__promo-icon img {
	width: 24px;
	height: 24px;
}

.mega-menu__promo-arrow {
	display: flex;
	align-items: center;
	margin-left: auto;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

.mega-menu__promo-arrow svg {
	width: 20px;
	height: 20px;
}

/* ==========================================================================
   Layout: Two Sections — Zona Alumnos
   ========================================================================== */

.mega-two {
	display: grid;
	grid-template-columns: 283px 1fr;
	gap: 10px;
}

.mega-two__section--links {
	padding: 20px;
	background-color: #F8F9FA;
	border-radius: 20px;
}

.mega-two__section--cards {
	background-color: var(--white);
	border-radius: 20px;
	padding: 20px;
}

/* Cards grid */
.mega-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}

.mega-card {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: 16px 16px 16px 14px;
	border-radius: 8px;
	background-color: #F8F9FA;
	border-left: 3px solid transparent;
	color: #444444;
	font-family: 'TT Norms Pro', sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.18;
	text-decoration: none;
	min-height: 56px;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mega-card:hover {
	background-color: #DBEDFF;
	border-left-color: #016FDF;
	color: #016FDF;
	font-weight: 700;
}

.mega-card__icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.mega-card__icon svg {
	width: 24px;
	height: 24px;
}

.mega-card__label {
	flex: 1;
}

.mega-card__arrow {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.mega-card__arrow svg {
	width: 24px;
	height: 24px;
}

/* ==========================================================================
   Layout: Sidebar + Content — Exámenes
   ========================================================================== */

.mega-sidebar {
	display: grid;
	grid-template-columns: 268px 1fr;
	gap: 10px;
}

.mega-sidebar__nav {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mega-sidebar__link {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: 16px 16px 16px 14px;
	border-radius: 8px;
	background-color: #F8F9FA;
	border-left: 3px solid transparent;
	font-family: 'TT Norms Pro', sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.18;
	color: #444444;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	cursor: pointer;
	text-align: left;
	width: 100%;
	min-height: 56px;
	text-decoration: none;
}

.mega-sidebar__label {
	flex: 1;
}

.mega-sidebar__link:hover {
	background-color: #DBEDFF;
	border-left-color: #016FDF;
	color: #016FDF;
	font-weight: 700;
}

.mega-sidebar__link.is-active {
	background-color: #DBEDFF;
	border-left-color: #016FDF;
	color: #016FDF;
	font-weight: 700;
}

.mega-sidebar__link-arrow {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.mega-sidebar__link-arrow svg {
	width: 20px;
	height: 20px;
}

.mega-sidebar__content {
	min-width: 0;
	background-color: #F8F9FA;
	border-radius: 20px;
	padding: 10px;
}

/* ==========================================================================
   Layout: Simple — Acreditación
   ========================================================================== */

.mega-simple {
	padding: 20px;
	background-color: #F8F9FA;
	border-radius: 20px;
}

.mega-menu--simple {
	max-width: 392px;
	width: 392px;
}

/* ==========================================================================
   Backdrop / Overlay
   ========================================================================== */

.mega-menu-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.20);
	z-index: 79;
}

.mega-menu-backdrop[hidden] {
	display: none;
}

/* ==========================================================================
   Mega Menu — Mobile
   ========================================================================== */

@media (max-width: 1023px) {
	/* Hide floating mega menus on mobile */
	.mega-menu {
		display: none !important;
	}

	.mega-menu-backdrop {
		display: none !important;
	}

	/* Mobile drilldown nav levels */
	.mobile-nav-level {
		display: none;
		flex-direction: column;
		gap: 12px;
		width: 100%;
	}

	.mobile-nav-level.is-active {
		display: flex;
	}

	/* Back button */
	.mobile-nav-back {
		display: flex;
		align-items: center;
		gap: 8px;
		background: none;
		border: none;
		cursor: pointer;
		font-family: 'TT Norms Pro', sans-serif;
		font-size: 14px;
		font-weight: 700;
		line-height: 14px;
		letter-spacing: 0;
		color: #016FDF;
		padding: 0 0 8px;
		margin-bottom: 4px;
	}

	.mobile-nav-back svg {
		width: 16px;
		height: 16px;
		transform: rotate(180deg);
	}

	/* Mobile nav items (same style as main menu items) */
	.mobile-nav-item {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		padding: 14px 16px;
		background-color: #F8F9FA;
		border-radius: 8px;
		font-family: 'TT Norms Pro', sans-serif;
		font-size: 16px;
		font-weight: 500;
		line-height: 118%;
		letter-spacing: 0;
		color: #444444;
		text-decoration: none;
		cursor: pointer;
		border: none;
		width: 100%;
		text-align: left;
	}

	.mobile-nav-item__icon {
		display: flex;
		align-items: center;
		flex-shrink: 0;
	}

	.mobile-nav-item__icon svg,
	.mobile-nav-item__icon img {
		width: 24px;
		height: 24px;
	}

	.mobile-nav-item__label {
		flex: 1;
	}

	.mobile-nav-item__arrow {
		display: flex;
		align-items: center;
		flex-shrink: 0;
	}

	.mobile-nav-item__arrow svg {
		width: 7.4px;
		height: 12px;
	}

	.mobile-nav-item__arrow--ext {
		transform: none;
	}

	.mobile-nav-item__arrow--ext svg {
		width: 20px;
		height: 20px;
	}

	/* Mobile L3 content */
	.mobile-nav-l3 {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.mobile-nav-l3 .mega-menu__heading {
		margin-top: 8px;
		letter-spacing: 0;
		color: #03336A;
	}

	.mobile-nav-l3 .mega-menu__heading:first-child {
		margin-top: 0;
	}

	.mobile-nav-l3 .mega-drill__l3-columns {
		grid-template-columns: 1fr;
	}

	.mobile-nav-l3 .mega-drill__l3-group {
		display: block;
	}

	.mobile-nav-l3 .mega-drill__col--l3 {
		background: none;
		padding: 0;
	}

	/* Force 1 column for all mega menu grids in mobile */
	.mobile-nav-level .mega-two,
	.mobile-nav-level .mega-sidebar,
	.mobile-nav-level .mega-cards {
		grid-template-columns: 1fr;
	}

	.mobile-nav-level .mega-two {
		gap: 16px;
	}

	.mobile-nav-level .mega-two__section--cards {
		padding-left: 0;
		padding-right: 0;
	}

	.mobile-nav-level .mega-card {
		font-size: 15px;
		font-weight: 400;
	}

	/* Hide main nav list and CTA when showing a sublevel */
	.site-nav.is-open .site-nav__list.is-hidden {
		display: none;
	}

	.site-nav.is-open .site-nav__list.is-hidden ~ .site-nav__cta-mobile {
		display: none;
	}

	.mobile-nav-level .mega-menu__promo--mobile {
		margin-top: 16px;
		margin-bottom: 0;
	}

	.mobile-nav-level .mega-menu__promo-link span {
		max-width: 120px;
	}

	.mobile-nav-level .site-nav__cta-mobile--clone {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 22px;
		border-radius: 48px;
		padding: 10px 20px;
		font-family: 'TT Norms Pro', sans-serif;
		font-size: 14px;
		font-weight: 700;
		line-height: 20px;
		letter-spacing: 0;
		color: var(--white);
		text-align: center;
	}
}

.mobile-nav-backdrop {
	display: none;
}

/* ==========================================================================
   Tablet sidebar nav — 768px to 1023px
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {

	.site-nav.is-open {
		right: auto;
		width: 420px;
		box-shadow: 8px 0 32px rgba(0, 0, 0, 0.1);
	}

	.site-header.mobile-nav-open .site-header__hamburger span {
		background-color: #fff;
	}

	.site-nav.is-open::after {
		content: '';
		position: fixed;
		top: 0;
		left: 420px;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
	}
}