header.main-header {
	margin-bottom: 48px;
	width: 100%;
	z-index: 1000;
}

/* ── Sticky header (JS adds .xclean-sticky-header-wrap on the Elementor section wrapper) ── */
.xclean-sticky-header-wrap {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	width: 100% !important;
}
/* Account for WP admin bar when logged in */
.admin-bar .xclean-sticky-header-wrap {
	top: var(--wp-admin--admin-bar--height, 32px) !important;
}
.xclean-sticky-header-wrap header.main-header {
	margin-bottom: 0;
}

/* ── Transparent header ── */
header.main-header.main-header--transparent .nav-mega-menu .mega-nav-bar {
	background: transparent;
}
header.main-header.main-header--transparent.is-scrolled.xclean-has-scroll-bg .nav-mega-menu .mega-nav-bar {
	background: var(--xclean-scroll-bg);
}
header.main-header.is-scrolled.xclean-has-scroll-bg .nav-mega-menu .mega-nav-bar {
	background: var(--xclean-scroll-bg);
}

/* ── Scroll state (all sticky headers) ── */
/* Smooth transition on the nav bar background + shadow */
.xclean-sticky-header-wrap .mega-nav-bar {
	transition: background 0.25s ease, box-shadow 0.25s ease;
}
/* Transparent → solid background once scrolled */
.xclean-sticky-header-wrap.is-scrolled .main-header--transparent .nav-mega-menu .mega-nav-bar {
	background: var(--xclean-scroll-bg, var(--mystic-bg-light));
}
/* Custom scroll bg for non-transparent sticky (JS adds .xclean-has-scroll-bg) */
.xclean-sticky-header-wrap.is-scrolled.xclean-has-scroll-bg .mega-nav-bar {
	/* background: var(--xclean-scroll-bg) !important; */
}
/* Drop shadow on scroll (JS adds .xclean-has-scroll-shadow) */
.xclean-sticky-header-wrap.is-scrolled.xclean-has-scroll-shadow .mega-nav-bar {
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.10);
}

/* Mega menu open: apply the same nav-bar background as scrolled (transparent + custom scroll bg) */
body.mega-menu-open .xclean-sticky-header-wrap .main-header--transparent .nav-mega-menu .mega-nav-bar {
	background: var(--xclean-scroll-bg, var(--mystic-bg-light));
}
body.mega-menu-open .xclean-sticky-header-wrap.xclean-has-scroll-bg .mega-nav-bar {
	background: var(--xclean-scroll-bg) !important;
}
body.mega-menu-open .xclean-sticky-header-wrap.xclean-has-scroll-shadow .mega-nav-bar {
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.10);
}
body.mega-menu-open header.main-header.main-header--transparent.is-scrolled.xclean-has-scroll-bg .nav-mega-menu .mega-nav-bar,
body.mega-menu-open header.main-header.main-header--transparent .nav-mega-menu .mega-nav-bar {
	background: var(--xclean-scroll-bg, var(--mystic-bg-light));
}
body.mega-menu-open header.main-header.is-scrolled.xclean-has-scroll-bg .nav-mega-menu .mega-nav-bar,
body.mega-menu-open header.main-header.xclean-has-scroll-bg .nav-mega-menu .mega-nav-bar {
	background: var(--xclean-scroll-bg);
}

/* Transparent header: solid nav bar while hovering a top-level item with no mega (plain link/label), same as mega-open */
header.main-header.main-header--transparent .nav-mega-menu .mega-nav-bar:has(.mega-nav-lv1 > .mega-lv1-item:not(.has-panel):hover) {
	background: var(--xclean-scroll-bg, var(--mystic-bg-light));
}
.xclean-sticky-header-wrap header.main-header.main-header--transparent .nav-mega-menu .mega-nav-bar:has(.mega-nav-lv1 > .mega-lv1-item:not(.has-panel):hover) {
	background: var(--xclean-scroll-bg, var(--mystic-bg-light));
}
header.main-header.main-header--transparent.xclean-has-scroll-bg .nav-mega-menu .mega-nav-bar:has(.mega-nav-lv1 > .mega-lv1-item:not(.has-panel):hover),
.xclean-sticky-header-wrap header.main-header.main-header--transparent.xclean-has-scroll-bg .nav-mega-menu .mega-nav-bar:has(.mega-nav-lv1 > .mega-lv1-item:not(.has-panel):hover) {
	background: var(--xclean-scroll-bg);
}

.nav-main-menu {
	color: var(--brand-blue);
	position: relative;
	z-index: 9;
}
.menu-main-lv1 {
	background: var(--mystic-bg-light);
	padding-top: 8px;
	border-bottom: 1px solid var(--mystic-border-light);
	padding-left: 24px;
	padding-right: 24px;
}
.menu-main-lv1 .logo {
	padding-right: 15px;
}
.nav-main-menu a{
  color: inherit;
}
.nav-main-menu .menu_link {
	font-weight: 600;
}
.menu-main-lv1 ul.menu-main .menu_link {
	display: block;
	padding: 16px 16px 18px 16px;
	transition: 0.2s all ease-in-out;
	font-size: var(--p1-medium-size);
	height: 100%;
	cursor: pointer;
}
.menu-main-lv1 ul.menu-main .menu-item-current .menu_link, .menu-main-lv1 ul.menu-main .menu_link:hover {
	background: var(--mystic-bg-white);
	border-radius: 8px 8px 0 0;
}
.header-wrapper .button-menu {
	display: flex;
	gap: 15px;
	padding-bottom: 8px;
	
}
.nav-main-menu .container {
	padding: 0;
}
.menu-main-child-lv2 .logo {
	width: 52px;
	height: 52px;
}
.menu-main-child-lv2 .logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.menu-main-child-lv2 .menu-child-level-2 .child-inner{
	gap: 15px;
	padding: 20px 0;
}
.menu-main-child-lv2 .menu-child-level-2 .menu-lv2 {
	gap: 10px;
	flex: 1;
}
.menu-main-child-lv2 .menu-child-level-2 {
	display: none;
}
.menu-main-child-lv2 .menu-child-level-2.menu-item-current {
	display: block;
}

.menu-main-child-lv2 {
	border-bottom: 2px solid var(--brand-blue);
	background: var(--mystic-bg-white);
	padding: 0 100px;
}
.menu-main-child-lv3 {
	position: absolute;
	left: 0;
	width: 100%;
	background: var(--mystic-bg-white);
	transition: 0.2s all ease-in-out;
	transform: scaleY(0);
	transform-origin: top;
	border-bottom: 1px solid var(--mystic-border-light);
}
.menu-main-child-lv3 .container {
	padding: 32px;
}
.menu-main-child-lv3 .items-menu-level3 {
	gap: 20px;
}
.menu-main-child-lv3.active {
	transform: scaleY(1);
}
.items-menu-level3 {	
	grid-template-columns: repeat(2, 1fr);
}
.menu-child-lv3-item {
	display: none;
}
.menu-child-lv3-item.active {
	display: block;
}
.items-menu-level3 .label {
	font-size: 14px;
	line-height: 18px;
	margin-bottom: 10px;
	color: var(--brand-blue);
	font-weight: 500;
}
.items-menu-level3 .col-item-menu .menu_link {
	font-size: 16px;
	padding: 8px 0;
	display: block;
	color: var(--brand-blue);
	font-weight: 600;
}
.items-menu-level3 .col-item-menu a:hover {
	color: var(--brand-blue);
}
.menu-item-level2 .menu_link {
	padding: 15px 12px;
	border-radius: 8px;
	cursor: pointer;
}
.menu-child-lv3-item-inner{
  display: flex;
}
.items-menu-level3{
  flex: 1 auto;
}
.menu-item-level2.active .menu_link, .menu-item-level2:hover .menu_link {
	background: var(--mystic-bg-light);
}
.nav-feature-post .post-item .thumb {
	max-width: 160px;
	aspect-ratio: 1.7;
	border-radius: 8px;
	overflow: hidden;
}
.nav-feature-post .post-item .thumb a{
	display: block;
	width: 100%;
	height: 100%;
}
.nav-feature-post .post-item .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.nav-feature-post .post-item {
	display: flex;
	gap: 24px;
	align-items: center;
	padding: 10px 0;
}
.nav-feature-post .post-item .cat, .feature-post-menu .news-card-new-tag {
	background: var(--blue-900);
	color: var(--yellow-300);
	font-size: 12px;
	padding: 4px 10px;
	display: inline-block;
	line-height: 15px;
	border-radius: 100px;
	margin-bottom: 5px;
}
.nav-feature-post .heading {
	font-size: 14px;
	line-height: 18px;
	margin: 0 0 10px;
	text-transform: uppercase;
	font-weight: 600;
}
.nav-feature-post .post-item .title a {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════
   DESKTOP MEGA-MENU
   Only active above 1024 px. Mobile styles are not touched.
   ════════════════════════════════════════════════════════════ */

/* Raise nav z-index so it sits above the body dimming overlay */
.nav-mega-menu {
	position: relative;
	z-index: 100;
	color: var(--brand-blue);
	overflow: visible;
}

/* ── Level-1 top bar ── */
.nav-mega-menu .mega-nav-bar {
	background: var(--mystic-bg-light);
	/* border-bottom: 1px solid var(--mystic-border-light); */
	padding: 8px 16px;
	position: relative;
	z-index: 100;
	overflow: visible;
}
.nav-mega-menu .mega-nav-bar .container {
	padding: 0;
}
.nav-mega-menu .mega-nav-lv1 {
	align-items: stretch;
	gap: 0;
	flex-wrap: nowrap;
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav-mega-menu .mega-nav-lv1 .logo {
	padding-right: 15px;
	display: flex;
	align-items: center;
}
.nav-mega-menu .mega-nav-bar .button-menu {
	display: flex;
	gap: 15px;
	align-items: center;
	padding: 0;
}

/* Level 1 — trigger buttons & plain links */
.nav-mega-menu .mega-lv1-trigger,
.nav-mega-menu .mega-lv1-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 16px;
	font-family: var(--font-public-sans, "Public Sans", sans-serif);
	font-size: var(--desktop-lv1-size, var(--p1-medium-size, 16px));
	font-weight: 600;
	line-height: 160%;
	letter-spacing: 0;
	color: var(--desktop-lv1-color, var(--brand-blue, #13496A));
	background: none;
	border: none;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	height: 100%;
	transition: background 0.18s ease, color 0.18s ease;
}
.nav-mega-menu .mega-lv1-item.is-open > .mega-lv1-trigger,
.nav-mega-menu .mega-lv1-trigger:hover,
.nav-mega-menu .mega-lv1-link:hover {
	background: var(--mystic-bg-white);
	border-radius: 8px 8px 0 0;
	color: var(--desktop-lv1-active-color, var(--brand-blue, #13496A));
}
.nav-mega-menu .mega-chevron {
	transition: transform 0.2s ease;
	flex-shrink: 0;
}
.nav-mega-menu .mega-lv1-item.is-open .mega-chevron {
	transform: rotate(180deg);
}

/* ── Panels wrapper ── */
/* Anchored inside .mega-nav-bar (position:relative) so panels always open
   flush below the nav bar, spanning its full width regardless of column count. */
.nav-mega-menu .mega-panels-wrap {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 10;
}
.container-megamenu{
	max-width: 1220px;
	width: fit-content;
	margin-left: calc(var(--mega-panel-offset, 44px) + 25px)
	/* margin-left: calc(var(--mega-panel-offset, 44px) - 100px) */
}
/* ── Individual panel — spans full nav-bar width ── */
.nav-mega-menu .mega-panel {
	display: none;
	flex-direction: row;
	width: 100%;
	background: var(--desktop-panel-bg, #ffffff);
	/* border: 1px solid var(--mystic-border-light, #E8E8E8); */
	box-shadow: 0 8px 24px rgba(20, 20, 20, 0.06);
	min-height: auto;
	max-height: 72vh;
	overflow: hidden;
	border-radius: 0 0 8px 8px;
}
.nav-mega-menu .mega-panel.is-open {
	display: flex;
}
/* No L3 / no recent-posts config — only sidebar; drop min-height stretch */
.nav-mega-menu .mega-panel.mega-panel--sidebar-only {
	min-height: 0;
}
/* Sidebar-only (no L3 / mega-content): breathing room before chevrons — aligns with Figma ~8–24px inset */
.nav-mega-menu .mega-panel.mega-panel--sidebar-only .mega-sidebar {
	border-right: none;
	padding-right: 24px;
	padding-bottom: 16px;
}

/* ── Level 2 — Left sidebar ── */
.nav-mega-menu .mega-sidebar {
	width: var(--desktop-sidebar-width, 290px);
	flex-shrink: 0;
	/* background: var(--desktop-sidebar-bg, #fff); */
	background: transparent;
	border-right: none;
	overflow-y: auto;
	padding: 16px 0 16px 16px;
	position: relative;
	z-index: 10;
	left: 1px;
}
.nav-mega-menu .mega-sidebar-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav-mega-menu .mega-sidebar-item {
	display: block;
	position: relative;
	z-index: 99;
}
/* Level 2 items — Figma: Public Sans 500, p1 size, 160% lh, 0% ls */
.nav-mega-menu .mega-sidebar-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 16px ;
	border-radius: 8px 0 0 8px;
	font-family: var(--font-public-sans, "Public Sans", sans-serif);
	font-size: var(--desktop-sidebar-size, var(--p1-medium-size, 16px));
	font-weight: 500;
	line-height: 160%;
	letter-spacing: 0;
	color: var(--desktop-sidebar-color, rgba(20, 20, 20, 0.6));
	background: none;
	border-color: transparent;
	border-style: solid;
	border-width: 1px;
	cursor: pointer;
	text-align: left;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
/* Chevron right indicator — uses CSS mask so colour follows currentColor */
.nav-mega-menu .mega-sidebar-link::after {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 4L10 8L6 12' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 4L10 8L6 12' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	background-color: currentColor;
	opacity: 1;
	transition: opacity 0.15s ease;
}
/* No right-panel content for this L2 row: hide chevron indicator */
.nav-mega-menu .mega-sidebar-item.is-no-content > .mega-sidebar-link::after {
	display: none;
}
/* ── Active state (selected sidebar item) ── */
.nav-mega-menu .mega-sidebar-item.is-active > .mega-sidebar-link {
	background: var(--desktop-sidebar-active-bg, #F7F7F8);
	color: var(--desktop-sidebar-active-color, #0E6496);
	border-color: var(--desktop-sidebar-active-border, transparent);
	border-right-color: transparent;
	font-weight: 600;
}
.nav-mega-menu .mega-sidebar-item.is-active > .mega-sidebar-link::after {
	opacity: 1;
}
/* Active L2: no browser focus ring — background/colour already show selection */
.nav-mega-menu .mega-sidebar-item.is-active > .mega-sidebar-link:focus,
.nav-mega-menu .mega-sidebar-item.is-active > .mega-sidebar-link:focus-visible {
	outline: none;
	box-shadow: none;
}
/* Active item gets right border back when a sibling is hovered (JS adds .is-hovered) */
.nav-mega-menu .mega-sidebar:has(.is-hovered) .mega-sidebar-item.is-active > .mega-sidebar-link {
	border-right-color: var(--desktop-sidebar-active-border, transparent);
	padding-right: 14px;
}
/* While hovering a non-active sibling, nudge current active item left */
.nav-mega-menu .mega-sidebar:has(.mega-sidebar-item:not(.is-active):hover) .mega-sidebar-item.is-active > .mega-sidebar-link,
.nav-mega-menu .mega-sidebar:has(.mega-sidebar-item.is-hovered:not(.is-active)) .mega-sidebar-item.is-active > .mega-sidebar-link {
	margin-left: -2px;
	padding-left: 18px;
}
/* Sidebar-only panels: active item keeps rounded corners */
.nav-mega-menu .mega-panel--sidebar-only .mega-sidebar-item.is-active > .mega-sidebar-link {
	border-radius: 8px 8px 8px 8px;
}

/* ── Hover state (non-active sidebar item on mouse over, or JS .is-hovered while pointer is on content area) ── */
.nav-mega-menu .mega-sidebar-item:not(.is-active):hover > .mega-sidebar-link,
.nav-mega-menu .mega-sidebar-item.is-hovered:not(.is-active) > .mega-sidebar-link {
	background: var(--desktop-sidebar-hover-bg, #F1F9FE);
	color: var(--desktop-sidebar-hover-color, #0E6496);
	border-color: var(--desktop-sidebar-hover-border, #0F7EBA);
	border-right-color: transparent;
	border-right-width: 0px !important;
	padding-right: 17px;
	/* font-weight: 600; */
}
.nav-mega-menu .mega-sidebar-item.is-hovered:not(.is-active).is-no-content > .mega-sidebar-link {
	border-right-color: var(--desktop-sidebar-hover-border, #0F7EBA);
	border-radius: 8px !important;
	border-right-width: 1px !important;
}
.nav-mega-menu .mega-sidebar-item:not(.is-active):hover > .mega-sidebar-link::after,
.nav-mega-menu .mega-sidebar-item.is-hovered:not(.is-active) > .mega-sidebar-link::after {
	opacity: 1;
}

/* ── Right content area (contains stacked active + hovered panels) ── */
.nav-mega-menu .mega-content-area {
	flex: 1;
	overflow-y: auto;
	position: relative;
	z-index: 8;
	/* min-width: 900px; */
	padding: 16px 24px;
	padding-left: 0;
	width: 100%;
}
.nav-mega-menu .mega-content-panel {
	display: none;
	flex-direction: row;
	gap: 30px;
	padding: 24px;
	padding-right: 16px;
	min-height: 100%;
	align-items: flex-start;
	background: var(--desktop-content-bg, #F7F7F8);
	border: 1px solid var(--desktop-panel-border, #0F7EBA);
	border-radius: 8px;
	/* border-top-left-radius: 4px; */
	/* Allow active + hovered panels to stack in the same content area */
	/* position: absolute; */
	/* top: 0; */
	/* left: 0;
	right: 0; */
	/* bottom: 0; */
}
/* Hover preview — shown on top of the active panel */
.nav-mega-menu .mega-content-panel.is-hovered {
	display: flex;
	z-index: 2;
	background: var(--desktop-content-hover-bg, var(--desktop-sidebar-hover-bg, #F1F9FE));
	border-color: var(--desktop-content-hover-border, var(--desktop-sidebar-hover-border, #0F7EBA));
}
/* If the first Level-2 row is hovered, remove top-left rounding on content area */
.nav-mega-menu .mega-panel:has(.mega-sidebar-item.is-hovered:first-child) .mega-content-panel.is-hovered {
	border-top-left-radius: 0;
}
/* If the first Level-2 row is hovered, remove top-left rounding on content area */
.nav-mega-menu .mega-panel:has(.mega-sidebar-item.is-hovered:last-child) .mega-content-panel.is-hovered {
	border-bottom-left-radius: 0;
}
.nav-mega-menu .mega-content-panel.is-active {
	display: flex;
	z-index: 1;
	background: var(--desktop-content-active-bg, var(--desktop-sidebar-active-bg, #F7F7F8));
	border-color: var(--desktop-content-active-border, var(--desktop-sidebar-active-border, transparent));
}
/* Hide active panel only when a different (non-active) panel is hovered */
.nav-mega-menu .mega-content-area:has(.mega-content-panel.is-hovered:not(.is-active)) .mega-content-panel.is-active {
	opacity: 0;
	height: 0;
	display: none;
	background: var(--desktop-content-active-bg, var(--desktop-sidebar-active-bg, #F7F7F8));
	border-color: var(--desktop-content-active-border, var(--desktop-sidebar-active-border, transparent));
}

/* ── Level 3 — Column headers (Figma: 600, Caption/c1, 120% lh, 2% ls, uppercase) ── */
.nav-mega-menu .mega-columns {
	flex: 1;
	display: flex;
	flex-wrap: nowrap;
	gap: 24px 32px;
	align-content: flex-start;
	justify-content: flex-start;
	/* min-width: 450px; */
}
.nav-mega-menu .mega-column {
	/* min-width: 230px; */
	min-width: 180px;
	flex: 1 1 180px;
	max-width: fit-content;
}
.nav-mega-menu .mega-col-header {
	font-family: var(--font-public-sans, "Public Sans", sans-serif);
	font-size: var(--desktop-col-header-size, 12px);
	font-weight: 600;
	line-height: 120%;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--desktop-col-header-color, var(--black-500, #14141480));
	/* margin-bottom: 10px; */
	padding-bottom: 10px;
	/* border-bottom: 1px solid var(--mystic-border-light, #E8E8E8); */
}
.nav-mega-menu .mega-col-header span {
	color: var(--desktop-col-header-color, rgba(20, 20, 20, 0.7));
	text-decoration: none;
	cursor: default;
	pointer-events: none;
}
.nav-mega-menu .mega-col-header a {
	color: var(--desktop-col-header-color, rgba(20, 20, 20, 0.7));
	text-decoration: none;
	cursor: default;
	pointer-events: none;
}
.nav-mega-menu .mega-col-header a:hover {
	text-decoration: underline;
}

/* ── Level 4 — Column links (Figma: 500, p1 size, 160% lh, 0% ls) ── */
.nav-mega-menu .mega-col-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.nav-mega-menu .mega-col-links .menu_link {
	display: block;
	padding: 13px 0;
	font-family: var(--font-public-sans, "Public Sans", sans-serif);
	font-size: var(--desktop-link-size, var(--p1-medium-size, 16px));
	font-weight: 500;
	line-height: 160%;
	letter-spacing: 0;
	color: var(--desktop-link-color, rgba(20, 20, 20, 0.6));
	text-decoration: none;
	transition: color 0.15s ease, font-weight 0.1s ease;
}
/* Level 4 active/hover — Figma: font-weight 600 */
.nav-mega-menu .mega-col-links .menu_link:hover,
.nav-mega-menu .mega-col-links .menu_link.is-active-item,
.nav-mega-menu .mega-col-links .menu_link.xclean-news-tab-active {
	color: var(--desktop-link-hover-color, var(--brand-blue, #13496A));
	/* font-weight: 600; */
}

/* ── Recent posts panel — max 365px (design cap); width slider sets target up to that cap ── */
.nav-mega-menu .mega-content-panel .nav-feature-post {
	box-sizing: border-box;
	max-width: min(345px, var(--desktop-posts-max-width, 365px));
	width: 100%;
	min-width: 0;
	flex-shrink: 0;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.nav-mega-menu .mega-content-panel .nav-feature-post .heading {
	font-family: var(--font-public-sans, "Public Sans", sans-serif);
	font-size: 12px;
	font-weight: 600;
	line-height: 120%;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--desktop-col-header-color, rgba(20, 20, 20, 0.7));
	text-align: left;
	margin-bottom: 8px;
	padding-bottom: 0;
}

/* Post card */
.nav-mega-menu .nav-feature-post .post-item {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--mystic-border-light, #E8E8E8);
}
.nav-mega-menu .nav-feature-post .post-item:first-of-type {
	padding-top: 0;
}
.nav-mega-menu .nav-feature-post .post-item:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

/* Thumbnail */
.nav-mega-menu .nav-feature-post .post-item .thumb {
	max-width: 160px;
	width: 100%;
	min-width: 140px;
	min-height: 123px;
	overflow: hidden;
	border-radius: 16px;
	flex-shrink: 0;
}
.nav-mega-menu .nav-feature-post .post-item .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Content area — Figma: date → title → excerpt → CTA, 8px vertical rhythm */
.nav-mega-menu .nav-feature-post .post-item .info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}
/* Date/time — Figma Caption/c1: Public Sans 600, 120% line-height, 2% letter-spacing, uppercase */
.nav-mega-menu .nav-feature-post .post-date {
	font-family: var(--font-public-sans, "Public Sans", sans-serif);
	font-size: 11px;
	font-weight: 600;
	font-style: normal;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--mystic-text-secondary, #141414B2);
	order: 0;
	min-width: 0;
	max-width: 100%;
}

/* Title — Figma Paragraph/p1: Public Sans 600, 160% line-height; max 2 lines + ellipsis */
.nav-mega-menu .nav-feature-post .title.mega-nav-post-title {
	font-family: var(--font-public-sans, "Public Sans", sans-serif);
	font-size: 14px;
	font-weight: 600;
	font-style: normal;
	line-height: 1.6;
	letter-spacing: 0;
	color: var(--desktop-post-title-color, #141414);
	order: 1;
	min-width: 0;
	max-width: 100%;
}
.nav-mega-menu .nav-feature-post .mega-nav-post-title a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	word-break: break-word;
	overflow-wrap: anywhere;
	color: inherit;
	text-decoration: none;	
}
.nav-mega-menu .nav-feature-post .mega-nav-post-title a:hover {
	text-decoration: underline;
}

/* Description — Figma Paragraph/p2: 400, 150% line-height; single line + ellipsis */
.nav-mega-menu .nav-feature-post .post-excerpt {
	font-family: var(--font-public-sans, "Public Sans", sans-serif);
	font-size: 12px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--desktop-post-excerpt-color, #141414B2);
	margin: 0;
	order: 2;
	min-width: 0;
	max-width: 100%;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* CTA pill — Figma sizing; label/colors: dynamic tag + ACF when present, else theme defaults below */
.nav-mega-menu .nav-feature-post .post-cta-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	align-self: flex-start;
	margin-top: 0;
	order: 3;
	min-width: 125px;
	max-width: 100%;
	min-height: 25px;
	padding: 6px 12px;
	border-radius: 100px;
	font-family: var(--font-public-sans, "Public Sans", sans-serif);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: opacity 0.15s ease;
	/* Defaults when ACF does not set inline colors */
	background-color: var(--mega-nav-tag-pill-bg, #FCE9FA);
	color: var(--mega-nav-tag-pill-color, #141414CC);
}
.nav-mega-menu .nav-feature-post .post-cta-btn span{
	overflow: hidden;
    text-overflow: ellipsis;
}
.nav-mega-menu .nav-feature-post .post-cta-btn:hover {
	opacity: 0.85;
}

/* ── Body dimming when a panel is open (enabled via widget setting) ── */
body.mega-menu-open:has(header.main-header.main-header--mega-backdrop)::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 99;
	background: rgba(0, 0, 0, 0.28);
	pointer-events: none;
}

/* ── Hide mega-menu on mobile / tablet ── */
@media (max-width: 1024px) {
	.nav-mega-menu .mega-nav-bar,
	.nav-mega-menu .mega-panels-wrap {
		display: none !important;
	}
}