/* ==========================================================================
   Header styles
   Tokens and global reset → main.css
   ========================================================================== */

/* ==========================================================================
   Override .elementor-kit-XXXXX a (specificity 0-1-1)
   .site-header .class = (0-2-0) wins over (0-1-1)
   ========================================================================== */
.site-header .nav-link,
.site-header .nav-trigger {
	color: var(--nav-secondary);
	text-decoration: none;
}
.site-header .mega-col__link,
.site-header .simple-dropdown__link {
	color: var(--nav-secondary);
	text-decoration: none;
}
.site-header .mega-featured {
	text-decoration: none;
	color: inherit;
}
.site-header .btn-cta {
	color: #ffffff;
	text-decoration: none;
}
.site-header .btn-signin {
	color: var(--nav-dark);
	text-decoration: none;
}
.site-header .mobile-auth-link {
	color: var(--nav-dark);
	text-decoration: none;
}
.site-header .mobile-nav__link,
.site-header .mobile-sub-link {
	color: var(--nav-secondary);
	text-decoration: none;
}
.site-header .mobile-back {
	color: var(--nav-secondary);
	text-decoration: none;
	transition: color 300ms ease;
}
.site-header .mobile-back:hover,
.site-header .mobile-back:focus {
	color: var(--nav-dark);
	background: none;
	border: none;
	outline: none;
}

/* Gradient underline animation for mobile links */
.mobile-nav__link .nav-label,
.mobile-nav__trigger .nav-label,
.mobile-sub-link .nav-label,
.mobile-auth-link .nav-label {
	position: relative;
}
.mobile-nav__link .nav-label::after,
.mobile-nav__trigger .nav-label::after,
.mobile-sub-link .nav-label::after,
.mobile-auth-link .nav-label::after {
	content: '';
	position: absolute;
	bottom: -3px;
	left: 0;
	width: 100%;
	height: var(--nav-active-h);
	background: var(--nav-active-gradient);
	border-radius: 14px;
	opacity: 0;
	clip-path: inset(0 100% 0 0%);
	pointer-events: none;
	transition: opacity 40ms ease, clip-path 400ms ease-in-out;
}
.mobile-nav__link:hover .nav-label::after,
.mobile-nav__trigger:hover .nav-label::after,
.mobile-sub-link:hover .nav-label::after,
.mobile-auth-link:hover .nav-label::after {
	opacity: 1;
	clip-path: inset(0 0% 0 0%);
}
.site-header .user-dd__link {
	color: var(--nav-secondary);
	text-decoration: none;
}
.site-header .user-dd__logout {
	color: var(--nav-secondary);
	text-decoration: none;
}
.site-header .header-logo {
	text-decoration: none;
}
.site-header .btn-signin--full {
	color: var(--nav-blue);
	text-decoration: none;
}
/* ========================================================================== */
   .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);
	max-width: none!important;
    padding: 0;
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--hdr-height);
	padding: 25px var(--hdr-px) 18px var(--hdr-px);
	position: relative;
	padding-inline: 20px!important;
	max-height: 72px;
}
.site-header .header-inner {
	padding: 0;
}

/* ==========================================================================
   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;
}

.header-nav li button:hover,
.header-nav li button:focus {
	background: none!important;
	background-color: transparent!important;
	color: inherit!important;
}

.mobile-sub-group__list {
	display: flex;
	flex-direction: column;
	/* gap: 4px; */
}

.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-secondary);
	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;
}

.header-btns .btn-main.btn-outline {
	border-color: transparent!important;
}

.btn-signin {
	font-family: var(--font-figtree, 'Figtree', sans-serif);
	font-size: var(--nav-fsize);
	font-weight: var(--nav-fw-bold);
	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: var(--nav-fw-bold);
	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);
}

.header-btns .btn-main.btn-outline, 
.header-btns a.btn-main.btn-outline {
	color: #2D4059;
}
.header-btns .btn-main.btn-outline:hover, 
.header-btns a.btn-main.btn-outline:hover,
.header-btns .btn-main.btn-outline:active, 
.header-btns a.btn-main.btn-outline:active,
.header-btns .btn-main.btn-outline:focus, 
.header-btns a.btn-main.btn-outline:focus {
	color: #fff;
}

/* 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: 1160px;
	margin: 0 auto;
	padding: 24px;
	background: var(--dropdown-bg);
	border-radius: var(--dropdown-radius);
	box-shadow: var(--mega-inner-shadow);
}

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

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

.mega-col__title {
	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);
	padding: 6px 16px;
	margin: 0;
	display: flex;
	align-items: center;
}

.mega-col__list {
	display: flex;
	flex-direction: column;
}
.simple-dropdown__list li {
	padding: 12px 0;
	margin: 0;
	border-bottom: 1px solid var(--color-border-light);
}
.mega-col__list li {
	/* padding-inline: 16px; */
}
.mega-col__list li a {
	padding: 12px 16px;
}
.mega-col__link,
.simple-dropdown__link {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-figtree, 'Figtree', sans-serif);
	font-size: var(--nav-fsize);
	font-weight: 500;
	line-height: 1;
	color: var(--nav-secondary);
	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: 436px;
	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: 32px;
}

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

.mega-featured__title {
	font-family: var(--font-figtree, 'Figtree', sans-serif);
	font-size: var(--nav-fsize);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: var(--nav-ls);
	color: var(--nav-dark);
	margin: 0 0 8px;
}

.mega-featured__desc {
	font-family: var(--font-figtree, 'Figtree', sans-serif);
	font-size: var(--nav-fsize-sm);
	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: 238px;
	padding: 8px 16px;
}

.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,
.mega-col__list li:last-of-type {
	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: 24px;
    height: 24px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	position: relative;
	top: -3px;
	background-color: unset!important;
}

.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: rgba(0, 0, 0, 0.14);
	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: 340px;
	height: 100dvh;
	z-index: var(--z-mobile-menu);
	overflow: hidden;
	pointer-events: none;
	transform: translateX(-100%);
	transition: transform var(--mobile-panel-slide);
	border-radius: 0 30px 30px 0;
	box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25);
}

.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: 24px var(--hdr-px-mob);
	flex-shrink: 0;
}

/* Back-navigation row below the auth/close head in sub-panels */
.mobile-panel__back-row {
	padding: 0 var(--hdr-px-mob) 32px;
}

.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 auth link (panel head — Sign In / Log out) */
.mobile-auth-link,
.mobile-auth-link .nav-label {
	text-transform: capitalize;
}

.mobile-auth-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-figtree, 'Figtree', sans-serif);
	font-size: var(--nav-fsize);
	font-weight: 600;
	color: var(--nav-dark);
	text-decoration: none;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

/* Auth state — toggled by is-logged-in on <html> */
.js-signed-in { display: none; }
.is-logged-in .js-signed-in { display: flex; }
.is-logged-in .js-signed-out { display: none; }

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

.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);
	font-weight: 700;
	color: var(--nav-secondary);
	padding: 0 var(--hdr-px-mob);
	margin: 0 0 24px;
}

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

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

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

.mobile-nav__list {
	display: flex;
	flex-direction: column;
	/* gap: 32px; */
}

.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);
	font-weight: 700;
	line-height: 1.3;
	color: var(--nav-dark);
	background: none;
	border: none;
	text-decoration: none;
	text-align: left;
	cursor: pointer;
}
button.mobile-nav__trigger,
button.mobile-nav__trigger:hover {
	color: var(--nav-secondary);
}

.mobile-nav__link {
	color: var(--nav-secondary);
}

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

.mobile-panel .mobile-nav__item button,
.mobile-panel .mobile-back {
	background-color: unset!important;
}
/* ==========================================================================
   Mobile sub-panel content
   ========================================================================== */

.mobile-sub-content {
	padding: 0 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: 8px;
	padding: 12px 0;
	font-family: var(--font-figtree, 'Figtree', sans-serif);
	font-size: var(--nav-fsize);
	font-weight: 500;
	color: var(--nav-secondary);
	text-decoration: none;
}

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

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

.mobile-panel__footer {
	padding: 18px var(--hdr-px-mob) 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex-shrink: 0;
}

/* btn-main inside mobile panel — full width */
.mobile-panel__footer .btn-main {
	width: 100%;
	height: 52px;
	border-radius: 10px;
	justify-content: center;
}
.mobile-panel__footer .btn-main.js-signed-out {
	width: fit-content;
}

.mobile-tagline {
	font-family: var(--font-figtree, 'Figtree', sans-serif);
	font-size: 14px;
	line-height: 21px;
	font-weight: 400;
	color: var(--nav-secondary);
	margin: 0;
	text-align: left;
	max-width: 188px;
}

.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 (min-width: 1200px) {
	.site-header .header-inner {
		max-width: 1200px;
	}
}
@media (max-width: 1200px) {
	.nav-list {
		gap: 20px;
	}
	.header-inner {
		padding: 0 35px;
/* 		height: var(--hdr-height-mob); */
		height: 64px;
		/* flex-direction: row-reverse; */
	}

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

	.header-burger {
		display: flex;
		justify-content: center;
	}
	.site-header .header-inner {
		max-width: unset;
		/* padding: 0 24px; */
	}
}
@media (max-width: 768px) {
	.site-header .header-inner {
		padding-top: 21px;
		padding-bottom: 15px;
	}
}

@media (max-width: 575px) {
	.site-header {
		padding-inline: unset!important;
	}
}

/* ==========================================================================
   User avatar button (desktop, logged-in)
   ========================================================================== */

.user-avatar-wrap {
	position: relative;
}

.site-header .user-avatar-btn,
.site-header .user-avatar-btn:hover {
	color: inherit;
	background: none;
	text-decoration: none;
}

.user-avatar-btn {
	display: flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

.user-avatar-btn:hover .user-avatar-circle {
	opacity: 0.88;
}

.user-avatar-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #0B7B6B;
	font-family: var(--font-figtree, 'Figtree', sans-serif);
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	flex-shrink: 0;
	transition: opacity 150ms ease;
}

.user-avatar-circle--lg {
	width: 40px;
	height: 40px;
	font-size: 17px;
}

.user-avatar-wrap .nav-arrow {
	transition: transform 200ms ease;
}

.user-avatar-wrap.dropdown-open .nav-arrow {
	transform: rotate(180deg);
}

/* ==========================================================================
   User dropdown panel
   ========================================================================== */

.nav-dropdown--user {
	right: 0;
	left: auto;
	top: calc(100% + 12px);
	min-width: 220px;
	padding: 0;
	overflow: hidden;
}

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

.user-dd__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	border-bottom: 1px solid var(--color-border-light, #eaecee);
}

.user-dd__head-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.user-dd__name {
	font-family: var(--font-figtree, 'Figtree', sans-serif);
	font-size: 16px;
	font-weight: 600;
	color: var(--nav-dark, #2d4059);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.user-dd__email {
	font-family: var(--font-figtree, 'Figtree', sans-serif);
	font-size: 12px;
	font-weight: 400;
	color: #64748b;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.user-dd__list {
	list-style: none;
	margin: 0;
	padding: 8px 0;
	border-bottom: 1px solid var(--color-border-light, #eaecee);
}

.user-dd__item:nth-child(5n) {
	border-bottom: 1px solid var(--color-border-light, #eaecee);
	margin-bottom: 8px;
	padding-bottom: 8px;
}

.user-dd__link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	font-family: var(--font-figtree, 'Figtree', sans-serif);
	font-size: 16px;
	font-weight: 500;
	color: var(--nav-secondary);
	text-decoration: none;
	transition: color 130ms ease;
}

.user-dd__link:hover {
	color: var(--nav-dark, #2d4059);
}

.user-dd__link .nav-icon {
	color: var(--nav-secondary);
}

.user-dd__link:hover .nav-icon {
	color: var(--nav-dark, #2d4059);
}

.user-dd__logout {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	width: 100%;
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--font-figtree, 'Figtree', sans-serif);
	font-size: 16px;
	font-weight: 500;
	color: var(--nav-secondary);
	text-decoration: none;
	transition: color 130ms ease;
}

.user-dd__logout:hover {
	color: var(--nav-dark, #2d4059);
}