/* ==========================================================================
   Header styles
   Tokens and global reset → main.css
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: var(--hdr-bg);
	width: 100%;
	border-bottom: 1px solid rgba(45, 64, 89, 0.10);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--hdr-height);
	padding: 0 var(--hdr-px);
	position: relative;
}

/* ==========================================================================
   Logo
   ========================================================================== */

.header-logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
}

.header-logo img {
	display: block;
	width: 140px;
	height: auto;
}

/* ==========================================================================
   Desktop navigation
   ========================================================================== */

.header-nav {
	display: flex;
	align-items: center;
}

/* List reset — shared */
.nav-list,
.mega-col__list,
.simple-dropdown__list,
.mobile-nav__list,
.mobile-sub-group__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-list {
	display: flex;
	align-items: center;
	gap: 30px;
}

.nav-item {
	position: static;
}

/* Simple dropdown needs relative so its panel anchors to the trigger */
.nav-item.has-simple {
	position: relative;
}

/* Nav link / trigger shared styles */
.nav-link,
.nav-trigger {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-figtree, 'Figtree', sans-serif);
	font-size: var(--nav-fsize);
	font-weight: var(--nav-fw-medium);
	line-height: var(--nav-lh);
	letter-spacing: var(--nav-ls);
	color: var(--nav-text);
	text-decoration: none;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	white-space: nowrap;
	position: relative;
}

.nav-link:hover,
.nav-trigger:hover,
.nav-item.is-current > .nav-link,
.nav-item.is-current > .nav-trigger {
	color: var(--nav-dark);
}

/* Text-only label — positioning context for the underline */
.nav-label {
	position: relative;
}

/* Active underline indicator — spans only the text (.nav-label width) */
.nav-active-line {
	position: absolute;
	bottom: -6px;
	left: 0;
	width: 100%;
	height: var(--nav-active-h);
	border-radius: 14px;
	background: var(--nav-active-gradient);
	opacity: 0;
	clip-path: inset(0 100% 0 0%); /* base = 0 width, matches animation frame 0 → no snap */
	pointer-events: none;
}

/*
 * clip-path inset(top right bottom left):
 *   inset(0 100% 0 0%) = 0% width
 *   inset(0 60%  0 0%) = 40% width
 *   inset(0 0%   0 0%) = 100% width
 *
 * Forward:  0% → 40% at midpoint → 100%
 * Backward: 100% → 40% at midpoint → 0%
 *
 * Snap-free trick: line-out does NOT remove line-in first —
 * .line-in.line-out overrides .line-in, element never reverts to opacity:0 between frames.
 */
@keyframes nav-underline-in {
	0%   { opacity: 0; clip-path: inset(0 100% 0 0%); }
	10%  { opacity: 1; clip-path: inset(0 100% 0 0%); }
	50%  { opacity: 1; clip-path: inset(0 60%  0 0%); }
	100% { opacity: 1; clip-path: inset(0 0%   0 0%); }
}

@keyframes nav-underline-out {
	0%   { opacity: 1; clip-path: inset(0 0%   0 0%); }
	50%  { opacity: 1; clip-path: inset(0 60%  0 0%); }
	90%  { opacity: 0; clip-path: inset(0 100% 0 0%); }
	100% { opacity: 0; clip-path: inset(0 100% 0 0%); }
}

.nav-active-line.line-in                { animation: nav-underline-in  400ms ease-in-out forwards; }
.nav-active-line.line-in.line-out       { animation: nav-underline-out 350ms ease-in-out forwards; }

/* Arrow icon */
.nav-arrow {
	flex-shrink: 0;
	transition: transform 200ms ease;
}

.nav-item.dropdown-open > .nav-trigger .nav-arrow {
	transform: rotate(180deg);
}

/* ==========================================================================
   CTA buttons (desktop)
   ========================================================================== */

.header-btns {
	display: flex;
	align-items: center;
	gap: var(--dropdown-gap);
	flex-shrink: 0;
}

.btn-signin {
	font-family: var(--font-figtree, 'Figtree', sans-serif);
	font-size: var(--nav-fsize);
	font-weight: 600;
	line-height: var(--nav-lh);
	letter-spacing: var(--nav-ls);
	color: var(--nav-dark);
	text-decoration: none;
	white-space: nowrap;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

.btn-signin:hover {
	opacity: 0.8;
}

.btn-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--btn-h);
	padding: 0 var(--btn-px);
	background: var(--nav-blue);
	color: #ffffff;
	font-family: var(--font-figtree, 'Figtree', sans-serif);
	font-size: var(--nav-fsize);
	font-weight: 500;
	line-height: var(--nav-lh);
	letter-spacing: var(--nav-ls);
	text-decoration: none;
	border-radius: var(--btn-radius);
	white-space: nowrap;
	transition: background 150ms ease, box-shadow 150ms ease;
}

.btn-cta:hover {
	background: var(--nav-blue-hover);
	box-shadow: 0 4px 16px rgba(57, 120, 242, 0.32);
}

/* Burger (hidden on desktop, styles below) */

/* ==========================================================================
   Dropdown — shared
   ========================================================================== */

.nav-dropdown {
	position: absolute;
	top: calc(100% - 8px);
	background: var(--dropdown-bg);
	border-radius: var(--dropdown-radius);
	box-shadow: var(--dropdown-shadow);
	z-index: var(--z-dropdown);
	opacity: 0;
	pointer-events: none;
	transform: translateY(-6px);
	transition: opacity 180ms ease, transform 180ms ease;
}
/* .nav-dropdown--simple overrides merged below */

.nav-item.dropdown-open > .nav-dropdown {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

/* ==========================================================================
   Mega menu
   ========================================================================== */

/*
 * Mega menu spans the full width of .header-inner (positioned ancestor).
 * The visual card (.mega-inner) is fit-content and centred with margin: auto.
 */
.nav-dropdown--mega {
	left: 0;
	right: 0;
	padding: 0;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	transform: translateY(-6px);
}

.nav-item.dropdown-open > .nav-dropdown--mega {
	transform: translateY(0);
}

.mega-inner {
	display: flex;
	gap: var(--mega-col-gap);
	width: fit-content;
	max-width: 1236px;
	margin: 0 auto;
	padding: 32px 40px;
	background: var(--dropdown-bg);
	border-radius: var(--dropdown-radius);
	box-shadow: var(--mega-inner-shadow);
}

.mega-columns {
	display: flex;
	gap: var(--mega-col-gap);
	flex: 1;
	align-self: flex-start;
}

.mega-col {
	flex: 1;
	min-width: 206px;
	display: flex;
    flex-direction: column;
    gap: 20px;
	justify-content: flex-start;
}

.mega-col__title {
	font-family: 'Nunito', sans-serif;
	font-size: var(--mega-col-title-fz);
	font-weight: 500;
	letter-spacing: var(--mega-col-title-ls);
	color: var(--mega-col-title-c);
	padding: 0;
	margin: 0;
    display: flex;
    align-items: center;
}

.mega-col__list {
	display: flex;
	flex-direction: column;
}
.mega-col__list li,
.simple-dropdown__list li {
	padding: 0 0 12px;
	margin: 12px 0 0;
	border-bottom: 1px solid var(--color-border-light);
}
.mega-col__link,
.simple-dropdown__link {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-figtree, 'Figtree', sans-serif);
	font-size: var(--nav-fsize);
	font-weight: 500;
	line-height: 1;
	color: var(--nav-text);
	text-decoration: none;
	transition: color 0.13s ease-in-out, -webkit-text-fill-color 0.13s ease-in-out;
}

.mega-col__list li:hover .mega-col__link {
	background: linear-gradient(180deg, #ff1005 0, #ff4815 47.92%, #fda22f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.mega-col__list li:hover .nav-icon {
	background-color: #ff4815;
}

/* Featured panel */
.mega-featured {
	flex-shrink: 0;
	position: relative;
	align-self: flex-start;
    width: 418px;
	text-decoration: none;
	padding: 16px;
}
.mega-featured__bg {
	background: linear-gradient(92deg, #fc60761a -16.74%, #ff9a441a 105.33%);
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: .5rem;
}
.mega-featured:hover .mega-featured__bg {
	opacity: 1;
}

.mega-featured__image-wrap,
.mega-featured__image-placeholder {
	display: block;
	width: 100%;
	height: var(--featured-img-h);
	border-radius: 8px;
	overflow: hidden;
	background: var(--placeholder-bg);
	margin-bottom: 12px;
}

.mega-featured__image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mega-featured__title {
	font-family: 'Nunito', sans-serif;
	font-size: var(--nav-fsize);
	font-weight: 700;
	color: var(--nav-text);
	line-height: 1.25;
	margin: 0 0 8px;
}

.mega-featured__desc {
	font-family: 'Nunito', sans-serif;
	font-size: .875rem;
	font-weight: 400;
	color: var(--nav-text);
	line-height: 1.5;
	margin: 0;
}

/* ==========================================================================
   Simple dropdown (Resources)
   ========================================================================== */

.nav-dropdown--simple {
	top: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%) translateY(-6px);
	min-width: 220px;
	padding: 20px;
}

.nav-item.dropdown-open > .nav-dropdown--simple {
	transform: translateX(-50%) translateY(0);
}

/* .simple-dropdown__list reset moved to shared block above */

/* .simple-dropdown__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	font-family: var(--font-figtree, 'Figtree', sans-serif);
	font-size: var(--nav-fsize-sm);
	font-weight: 400;
	color: var(--nav-dark);
	text-decoration: none;
	transition: background 130ms ease;
	border-bottom: 1px solid var(--color-border-light);
} */
.simple-dropdown__list li:last-of-type .simple-dropdown__link {
	border-bottom: none;
}
.simple-dropdown__list li:hover .simple-dropdown__link {
	color: var(--color-orange-hover);
}
.simple-dropdown__list li:hover .nav-icon {
	background-color: var(--color-orange-hover);
}

.simple-dropdown__link.is-current {
	font-weight: 600;
	color: var(--nav-blue);
}

/* ==========================================================================
   Nav icons — mask-image approach (color controlled via CSS `color`)
   ========================================================================== */

.nav-icon {
	display: inline-block;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask-image: var(--nav-icon);
	        mask-image: var(--nav-icon);
	-webkit-mask-size: contain;
	        mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	vertical-align: middle;
	transition: opacity 0.13s ease-in-out;
}

/* ==========================================================================
   Mobile: burger
   ========================================================================== */

.header-burger {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 32px;
	height: 44px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

.burger-line {
	display: block;
	width: 100%;
	height: 4px;
	border-radius: 29px;
	background: var(--nav-dark);
	transition: transform var(--mobile-panel-slide), opacity 200ms ease;
}

.burger-line--blue {
	background: var(--nav-blue);
}

/* Burger → X when open */
.header-burger[aria-expanded="true"] .burger-line:nth-child(1) {
	transform: translateY(9px) rotate(45deg);
}
.header-burger[aria-expanded="true"] .burger-line:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}
.header-burger[aria-expanded="true"] .burger-line:nth-child(3) {
	transform: translateY(-9px) rotate(-45deg);
	background: var(--nav-dark);
}

/* ==========================================================================
   Mobile overlay
   ========================================================================== */

.mobile-overlay {
	position: fixed;
	inset: 0;
	background: var(--overlay-bg);
	z-index: var(--z-overlay);
	opacity: 0;
	pointer-events: none;
	transition: opacity 250ms ease;
}

.mobile-overlay.is-visible {
	opacity: 1;
	pointer-events: auto;
}

/* ==========================================================================
   Mobile menu container
   ========================================================================== */

.mobile-menu {
	position: fixed;
	top: 0;
	left: 0;
	width: var(--mobile-menu-w);
	max-width: 390px;
	height: 100dvh;
	z-index: var(--z-mobile-menu);
	overflow: hidden;
	pointer-events: none;
	transform: translateX(-100%);
	transition: transform var(--mobile-panel-slide);
}

.mobile-menu.is-open {
	transform: translateX(0);
	pointer-events: auto;
}

/* ==========================================================================
   Mobile panels — slide behaviour
   ========================================================================== */

.mobile-panel {
	position: absolute;
	inset: 0;
	background: var(--mobile-menu-bg);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(100%);
	transition: transform var(--mobile-panel-slide);
	will-change: transform;
}

/* Active (visible) panel */
.mobile-panel--active {
	transform: translateX(0);
}

/* Panel sliding out to the left (when going deeper) */
.mobile-panel--slide-left {
	transform: translateX(-30%);
}

/* ==========================================================================
   Mobile panel: head
   ========================================================================== */

.mobile-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px var(--hdr-px-mob);
	flex-shrink: 0;
}

.mobile-panel__head--sub {
	border-bottom: 1px solid var(--nav-border);
	margin-bottom: 4px;
}

.mobile-logo img {
	display: block;
	width: 112px;
	height: auto;
}

.mobile-close {
	background: none;
	border: none;
	padding: 4px;
	cursor: pointer;
	display: flex;
	align-items: center;
}

.mobile-back {
	display: flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	padding: 4px 0;
	cursor: pointer;
	font-family: var(--font-figtree, 'Figtree', sans-serif);
	font-size: var(--nav-fsize-sm);
	font-weight: 500;
	color: var(--nav-secondary);
}

.mobile-back svg {
	flex-shrink: 0;
}

/* ==========================================================================
   Mobile section label
   ========================================================================== */

.mobile-section-label {
	font-family: var(--font-figtree, 'Figtree', sans-serif);
	font-size: var(--nav-fsize-sm);
	font-weight: 700;
	color: var(--nav-dark);
	padding: 8px var(--hdr-px-mob) 4px;
	margin: 0;
	position: relative;
}

/* Orange underline under section label */
.mobile-section-label::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: var(--hdr-px-mob);
	width: 32px;
	height: 2px;
	border-radius: 2px;
	background: var(--nav-active-gradient);
}

/* ==========================================================================
   Mobile nav list (main panel)
   ========================================================================== */

.mobile-nav {
	flex: 1;
	padding: 8px 0;
}

/* .mobile-nav__list reset moved to shared block above */

.mobile-nav__trigger,
.mobile-nav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 16px var(--hdr-px-mob);
	font-family: var(--font-figtree, 'Figtree', sans-serif);
	font-size: var(--nav-fsize-lg);
	font-weight: 600;
	line-height: 1.3;
	color: var(--nav-dark);
	background: none;
	border: none;
	text-decoration: none;
	text-align: left;
	cursor: pointer;
}

.mobile-nav__chevron {
	flex-shrink: 0;
}

/* ==========================================================================
   Mobile sub-panel content
   ========================================================================== */

.mobile-sub-content {
	padding: 16px var(--hdr-px-mob) 32px;
	overflow-y: auto;
}

.mobile-sub-group {
	margin-bottom: 24px;
}

.mobile-sub-group__title {
	font-family: var(--font-figtree, 'Figtree', sans-serif);
	font-size: var(--nav-fsize-xs);
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--mega-col-title-c);
	margin: 0 0 8px;
}

/* .mobile-sub-group__list reset moved to shared block above */

.mobile-sub-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 0;
	font-family: var(--font-figtree, 'Figtree', sans-serif);
	font-size: var(--nav-fsize-md);
	font-weight: 500;
	color: var(--nav-dark);
	text-decoration: none;
	border-bottom: 1px solid var(--nav-border-faint);
}

.mobile-sub-link:last-child {
	border-bottom: none;
}

.mobile-sub-link.is-current {
	color: var(--nav-blue);
	font-weight: 600;
}

/* ==========================================================================
   Mobile panel footer (CTA buttons)
   ========================================================================== */

.mobile-panel__footer {
	padding: 16px var(--hdr-px-mob) 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	border-top: 1px solid var(--nav-border);
	flex-shrink: 0;
}

.mobile-tagline {
	font-family: var(--font-figtree, 'Figtree', sans-serif);
	font-size: var(--nav-fsize-xs);
	font-weight: 400;
	color: var(--nav-secondary);
	margin: 0 0 4px;
	text-align: center;
}

.btn-cta--full {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	border-radius: 10px;
	font-size: var(--nav-fsize);
	padding: 0 var(--btn-px);
}

.btn-signin--full {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	border-radius: 10px;
	font-family: var(--font-figtree, 'Figtree', sans-serif);
	font-size: var(--nav-fsize);
	font-weight: 600;
	color: var(--nav-blue);
	text-decoration: none;
	border: 1.5px solid var(--nav-blue);
}

.btn-signin--full:hover {
	background: rgba(57, 120, 242, 0.05);
}

/* ==========================================================================
   Responsive breakpoints
   ========================================================================== */

@media (max-width: 1200px) {
	.nav-list {
		gap: 20px;
	}
	.header-inner {
		padding: 0 var(--hdr-px-mob);
		height: var(--hdr-height-mob);
		flex-direction: row-reverse;
	}

	.header-nav,
	.header-btns {
		display: none;
	}

	.header-burger {
		display: flex;
	}
}