/* ==========================================================================
   Primary navigation, mega menus, mobile drawer
   ========================================================================== */

.hp-nav { display: none; border-top: var(--hp-rule); }
@media (min-width: 1024px) { .hp-nav { display: block; } }

.hp-nav__list { display: flex; align-items: stretch; gap: 0; list-style: none; margin: 0; padding: 0; }
.hp-nav__item { position: relative; }
.hp-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	height: 48px;
	padding-inline: 0.85rem;
	font-size: var(--hp-text-sm);
	font-weight: 650;
	color: var(--hp-color-text);
	text-decoration: none;
	border-bottom: 3px solid transparent;
}
.hp-nav__item:first-child .hp-nav__link { padding-left: 0; }
.hp-nav__link:hover,
.hp-nav__item.is-open > .hp-nav__link,
.hp-nav__item.current-menu-item > .hp-nav__link { color: var(--hp-color-primary-dark); border-bottom-color: var(--hp-color-accent); }
.hp-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 48px;
	color: var(--hp-color-text-muted);
}
.hp-nav__item.is-open .hp-nav__toggle svg { transform: rotate(180deg); }

/* Mega panel */
.hp-mega {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 40;
	display: none;
	width: min(920px, calc(100vw - 4rem));
	padding: var(--hp-space-lg);
	background-color: var(--hp-color-surface);
	border: var(--hp-rule);
	border-top: 3px solid var(--hp-color-primary);
	border-radius: 0 0 var(--hp-radius-md) var(--hp-radius-md);
	box-shadow: var(--hp-shadow-lg);
}
.hp-nav__item.is-open .hp-mega { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: var(--hp-space-lg); }
.hp-mega__col-title {
	font-family: var(--hp-font-body);
	font-size: var(--hp-text-2xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hp-color-text-muted);
	margin-bottom: var(--hp-space-2xs);
	padding-bottom: var(--hp-space-3xs);
	border-bottom: var(--hp-rule);
}
.hp-mega__links { display: grid; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.hp-mega__links a { font-size: var(--hp-text-sm); text-decoration: none; color: var(--hp-color-text); }
.hp-mega__links a:hover { color: var(--hp-color-primary-dark); text-decoration: underline; }
.hp-mega__features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hp-space-sm); }
.hp-mega__foot { grid-column: 1 / -1; padding-top: var(--hp-space-sm); border-top: var(--hp-rule); font-size: var(--hp-text-sm); }

/* Mobile drawer */
.hp-drawer {
	position: fixed;
	inset: 0 0 0 auto;
	z-index: 90;
	width: min(420px, 100%);
	background-color: var(--hp-color-surface);
	transform: translateX(100%);
	transition: transform 220ms ease;
	display: flex;
	flex-direction: column;
	visibility: hidden;
}
.hp-drawer.is-open { transform: none; visibility: visible; }
.hp-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hp-space-sm);
	padding: var(--hp-space-sm) var(--hp-gutter);
	border-bottom: var(--hp-rule);
}
.hp-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: var(--hp-space-sm) var(--hp-gutter) var(--hp-space-xl); }
.hp-drawer__foot { padding: var(--hp-space-sm) var(--hp-gutter); border-top: var(--hp-rule); display: grid; gap: var(--hp-space-2xs); }
.hp-scrim {
	position: fixed;
	inset: 0;
	z-index: 80;
	background-color: rgba(14, 30, 35, 0.55);
	opacity: 0;
	visibility: hidden;
	transition: opacity 220ms ease;
}
.hp-scrim.is-open { opacity: 1; visibility: visible; }
@media (min-width: 1024px) { .hp-drawer, .hp-scrim { display: none; } }

.hp-accordion { list-style: none; margin: 0; padding: 0; }
.hp-accordion__item { border-bottom: var(--hp-rule); }
.hp-accordion__head { display: flex; align-items: center; }
.hp-accordion__link {
	flex: 1 1 auto;
	padding: 0.9rem 0;
	font-size: var(--hp-text-md);
	font-weight: 650;
	text-decoration: none;
	color: var(--hp-color-text);
}
.hp-accordion__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--hp-color-text-muted);
}
.hp-accordion__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.hp-accordion__panel { padding-bottom: var(--hp-space-sm); display: grid; gap: 0.15rem; }
.hp-accordion__panel[hidden] { display: none; }
.hp-accordion__panel a { padding: 0.5rem 0 0.5rem var(--hp-space-sm); font-size: var(--hp-text-sm); text-decoration: none; border-left: 2px solid var(--hp-color-border); }
.hp-accordion__panel a:hover { border-left-color: var(--hp-color-accent); color: var(--hp-color-primary-dark); }