/* ef-core.css */
/* base.css */
/* Auto-capitalize first letter of all text elements */
.ef-ih-heading::first-letter,
.ef-media-caption::first-letter,
.ef-hc-description::first-letter {
	text-transform: uppercase;
}

/* Prose — rich text link treatment */
.ef-prose a {
	color: var(--ef-color-primary);
	text-decoration: underline;
	text-decoration-color: var(--ef-color-secondary);
	text-underline-offset: var(--ef-radius-s);
}

/* Prose — table styling */
.ef-prose table {
	width: 100%;
	border-collapse: collapse;
	margin-block: var(--ef-pad-s);
	font-size: 0.9em;
}

.ef-prose th,
.ef-prose td {
	padding: var(--ef-pad-xs) var(--ef-pad-s);
	border-bottom: 1px solid var(--ef-color-border);
	text-align: left;
}

.ef-prose th {
	font-weight: 600;
}

.ef-prose thead th {
	border-bottom-width: 2px;
}

/* Shared icon SVG sizing */
.ef-ih-icon svg,
.ef-label-icon svg,
.ef-card-logo-icon svg,
.ts-action-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}
/* Semantic tags — content centering for wrapper, card, navbar */
:is(.ef-wrapper, .ef-card):is(section, header, footer, aside, nav) {
	max-width: none;
	padding-inline: max(var(--ef-pad-l), calc(50% - var(--ef-container-width) / 2));
}

/* Shared placeholder for empty media slots */
.ef-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: var(--ef-color-border);
	color: var(--ef-color-text);
	opacity: 0.3;
}

/* buttons.css */
/* Holy Albatross — binary inline/stack layout */
.ef-buttons {
	display: flex;
	flex-wrap: wrap;
	--btn-gap: var(--ef-gap-m);
	--btn-min-w: 150px;
	--btn-accent: var(--ef-color-primary);
	--btn-on-accent: var(--ef-color-white);
	--btn-accent-light: var(--ef-color-primary_light);
	--ts-icon-size: 1em;
	--ts-icon-color: currentColor;
	gap: var(--btn-gap);
	--threshold: calc(var(--count) * var(--btn-min-w) + (var(--count) - 1) * var(--btn-gap));
}

/* Shared button base — native items + Voxel action containers */
.ef-buttons-item,
.ef-buttons .ts-action-con {
	flex-grow: 1;
	flex-basis: calc((var(--threshold) - 100%) * 999);
	min-width: min-content;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ef-gap-s);
	white-space: nowrap;
	padding: var(--ef-pad-m) var(--ef-pad-l);
	border: var(--ef-border-s) solid transparent;
	border-radius: var(--ef-radius-m);
	font-size: 1rem;
	font-weight: var(--ef-weight-m);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--ef-transition), color var(--ef-transition), border-color var(--ef-transition);
	box-sizing: border-box;
}

.ef-buttons-item:focus-visible {
	outline: var(--ef-border-m) solid var(--btn-accent);
	outline-offset: var(--ef-border-m);
}

/* Primary — filled with accent */
.ef-buttons-item--primary,
.ef-buttons .ef-btn--primary > .ts-action-con {
	background-color: var(--btn-accent);
	color: var(--btn-on-accent);
}
a.ef-buttons-item--primary { color: var(--btn-on-accent); }

/* Secondary — outlined with accent */
.ef-buttons-item--secondary,
.ef-buttons .ef-btn--secondary > .ts-action-con {
	border-color: var(--btn-accent);
	color: var(--btn-accent);
}

/* Ghost — text only */
.ef-buttons-item--ghost,
.ef-buttons .ef-btn--ghost > .ts-action-con {
	color: var(--btn-accent);
}

.ef-buttons-item--ghost:hover,
.ef-buttons .ef-btn--ghost > .ts-action-con:hover {
	background-color: var(--btn-accent-light);
}

/* Reset native button appearance */
button.ef-buttons-item {
	appearance: none;
	background: none;
	font: inherit;
}

/* Voxel actions inside button mode — display:contents flattens ul/li,
   ts-action-con becomes direct flex child of .ef-buttons */
.ef-buttons .ts-advanced-list,
.ef-buttons .ts-action {
	display: contents;
}

@media (prefers-reduced-motion: reduce) {
	.ef-buttons-item,
	.ef-buttons .ts-action-con {
		transition: none;
	}
}

/* heading-content.css */
.ef-heading-content {
	display: flex;
	flex-direction: column;
	gap: var(--ef-gap-l);
}

.ef-hc-label .ef-icon-heading {
	background-color: var(--ef-color-accent);
}

.ef-hc-description > *:last-child {
	margin-bottom: 0;
}

/* icon-heading.css */
.ef-ih-heading {
	display: flex;
	align-items: flex-start;
	gap: var(--ef-gap-s);
	margin: 0;
	font: inherit;
}

.ef-ih-heading a {
	color: inherit;
	text-decoration: none;
	transition: color var(--ef-transition);
}

.ef-ih-heading a:hover {
	color: var(--ef-color-secondary);
}

.ef-ih-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	height: 1lh;
	font-size: 1em;
	color: inherit;
	fill: inherit;
	transition: color var(--ef-transition);
}

.ef-ih-icon img {
	display: block;
	width: 1lh;
	height: 1lh;
	object-fit: contain;
	border-radius: var(--ef-radius-s);
}

/* Stacked layout — icon above heading */
.ef-icon-heading--stacked .ef-ih-heading {
	flex-direction: column;
}

/* Label variant */
.ef-icon-heading--label {
	--label-color: var(--ef-color-secondary);
	display: inline-flex;
	align-self: flex-start;
	background-color: color-mix(in srgb, var(--label-color) 15%, white);
	color: color-mix(in srgb, var(--label-color) 60%, black);
	padding: var(--ef-pad-xs) var(--ef-pad-m);
	border-radius: var(--ef-radius-m);
	text-decoration: none;
	margin-bottom: var(--ef-gap-xs, 0.25em);
}

/* Labels flow inline within lists; other items take full width. */
.ef-list:has(.ef-icon-heading--label) {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: var(--ef-gap-s);
}

.ef-list:has(.ef-icon-heading--label) > :has(.ef-icon-heading--label) {
	margin-top: 0 !important;
}

.ef-list:has(.ef-icon-heading--label) > :not(:has(.ef-icon-heading--label)) {
	width: 100%;
}

/* Heading + Content wrapper (for repeater items) */
.ef-ih-wrap {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
}

/* Content (optional) */
.ef-ih-content > *:last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ef-ih-heading a,
	.ef-ih-icon {
		transition: none;
	}
}

/* label.css */
.ef-labels {
	position: absolute;
	top: var(--ef-gap-l);
	left: var(--ef-gap-l);
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ef-gap-s);
}

.ef-label {
	display: inline-flex;
	align-items: center;
	gap: var(--ef-gap-s);
	background-color: var(--ef-color-accent);
	color: var(--ef-color-secondary) !important;
	font-weight: var(--ef-weight-m);
	padding: var(--ef-pad-xs) var(--ef-pad-m);
	border-radius: var(--ef-radius-m);
	text-decoration: none;
	transition: opacity var(--ef-transition);
}

.ef-label-icon {
	display: inline-flex;
	font-size: var(--ef-size-icon);
}

a.ef-label:hover,
a.ef-label:focus-visible {
	opacity: 0.8;
}

.ef-card:not(:has(> .ef-media-frame)) > .ef-labels {
	position: static;
	align-self: flex-start;
	margin-bottom: calc(var(--ef-gap-s) - var(--ef-gap-l));
}

/* list.css */
/* Stack (default) — vertical column */
.ef-list {
	--ef-list-gap: var(--ef-gap-m);
	display: flex;
	flex-direction: column;
	gap: var(--ef-list-gap);
}

/* Inline — equal-width columns */
.ef-list--inline {
	flex-direction: row;
}

.ef-list--inline > * {
	flex: 1 1 0%;
}

/* First item — no gap above */
.ef-list > :first-child {
	margin-top: 0 !important;
}

/* media.css */
.ef-media-frame {
	position: relative;
	margin: 0;
}

.ef-media-frame a {
	display: block;
}

.ef-media-frame img,
.ef-media-frame video,
.ef-media-frame iframe {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--ef-radius-m);
}


/* card.css */
.ef-card {
	--card-inset: var(--ef-pad-l);
	--card-border-color: var(--ef-color-border);
	--logo-size: var(--ef-size-logo, 48px);
	--footer-h: 0px;
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: clip;
	background-color: var(--ef-color-white);
	border: var(--ef-border-m) solid var(--card-border-color);
	border-radius: var(--ef-radius-m);
	content-visibility: auto;
	contain-intrinsic-size: auto 300px;
}

.ef-card:only-child {
	align-self: stretch;
}

.ef-card:not(:has(.ef-card-body)),
.ef-card--compact.ef-card:not(:has(> .ef-media-frame--map)) {
	height: auto;
}

.ef-card--compact.ef-card:not(:has(> .ef-media-frame--map)) {
	align-self: start;
}

.ef-card:has(.ef-card-footer) {
	--footer-h: calc(var(--ef-border-m) + 2 * var(--ef-pad-xs) + 1lh);
}

.ef-card > *:not(.ef-media-frame):not(.ef-card-body):not(.ef-card-footer) {
	margin-inline: var(--card-inset);
}

.ef-card > :first-child:not(.ef-media-frame):not(.ef-card-body):not(.ef-card-logo):not(.ef-card-footer) {
	margin-top: var(--card-inset);
}

.ef-card > :last-child:not(.ef-card-body):not(.ef-card-footer) {
	margin-bottom: var(--card-inset);
}

/* Variants */
.ef-card--primary.ef-card {
	--card-border-color: var(--ef-color-primary);
	background-color: var(--ef-color-primary_light);
}

.ef-card--secondary.ef-card {
	--card-border-color: var(--ef-color-secondary);
	background-color: var(--ef-color-secondary_light);
}

.ef-card--ghost.ef-card {
	--card-inset: 0px;
	--card-border-color: transparent;
	background-color: var(--ef-color-transparent);
}

[class*="ef-bg--"] .ef-card--ghost .ef-icon-heading--label,
.ef-card--ghost[class*="ef-bg--"] .ef-icon-heading--label {
	background-color: var(--ef-color-white);
}

/* Frame background — overrides card default bg */
.ef-card.ef-bg--white {
	background-color: var(--ef-color-white);
}

.ef-card.ef-bg--primary {
	--card-border-color: var(--ef-color-primary);
	background-color: var(--ef-color-primary_light);
}

.ef-card.ef-bg--secondary {
	--card-border-color: var(--ef-color-secondary);
	background-color: var(--ef-color-secondary_light);
}

.ef-card--ghost.ef-card .ef-media-frame img,
.ef-card--ghost.ef-card .ef-media-frame video,
.ef-card--ghost.ef-card .ef-media-frame iframe {
	border-radius: var(--ef-radius-m);
}

.ef-card--ghost.ef-card:has(> .ef-card-footer) .ef-media-frame img,
.ef-card--ghost.ef-card:has(> .ef-card-footer) .ef-media-frame video,
.ef-card--ghost.ef-card:has(> .ef-card-footer) .ef-media-frame iframe {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.ef-card .ef-media-frame {
	position: relative;
	overflow: hidden;
}

.ef-card > .ef-media-frame:first-child {
	border-radius: var(--ef-radius-m) var(--ef-radius-m) 0 0;
}

.ef-card-layout--horizontal.ef-card .ef-media-frame {
	flex: 0 0 25%;
	width: 25%;
}

.ef-card-layout--horizontal.ef-card > .ef-media-frame:first-child {
	border-radius: var(--ef-radius-m) 0 0 var(--ef-radius-m);
}

.ef-media-fit--contain.ef-card .ef-media-frame {
	background-color: var(--ef-color-primary_light);
}

.ef-card .ef-media-frame img,
.ef-card .ef-media-frame video,
.ef-card .ef-media-frame iframe {
	border-radius: 0;
}

.ef-card .ef-media-frame--map {
	flex: 1 0 auto;
}

.ef-card .ef-media-frame--map iframe {
	height: 100%;
}

.ef-card:has(> .ef-media-frame--map) > .ef-card-body {
	flex: 0 0 auto;
}

.ef-card-caption {
	position: absolute;
	bottom: var(--ef-gap-s);
	left: 50%;
	transform: translateX(-50%);
	font-size: var(--ef-font-s);
	background: var(--ef-color-white);
	padding: var(--ef-pad-xs) var(--ef-pad-l);
	border-radius: var(--ef-radius-s);
	white-space: nowrap;
}

/* Logo — absolute on card's top border */
.ef-card:has(> .ef-card-logo) {
	overflow: visible;
	content-visibility: visible;
	padding-top: calc(var(--logo-size) / 2);
}

.ef-card > .ef-card-logo {
	position: absolute;
	top: calc(var(--logo-size) / -2);
	left: var(--card-inset);
	z-index: 1;
}

.ef-card-logo img,
.ef-card-logo-icon {
	width: var(--logo-size);
	height: var(--logo-size);
	border: var(--ef-border-m) solid var(--card-border-color);
	border-radius: var(--ef-radius-m);
	background-color: var(--ef-color-white);
}

.ef-card-logo img {
	object-fit: contain;
}

.ef-card-logo-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: calc(var(--logo-size) * 0.45);
	color: var(--ef-color-primary);
}

/* Card lists — uniform tight gap between heading items. */
.ef-card .ef-list {
	row-gap: var(--ef-gap-s);
}

.ef-card .ef-icon-heading--label {
	margin-bottom: 0;
}

.ef-card-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ef-gap-l);
}

.ef-card > .ef-card-body {
	padding: var(--card-inset);
	padding-bottom: calc(var(--card-inset) + var(--footer-h));
}

.ef-card-content > *:last-child {
	margin-bottom: 0;
}

/* Byline variant — inline avatar + text */
.ef-icon-heading--byline {
	--_lh: 1.3;
	display: flex;
	align-items: center;
	gap: var(--ef-gap-s);
}

.ef-icon-heading--byline .ef-ih-avatar {
	flex: 0 0 auto;
	overflow: hidden;
	border-radius: var(--ef-radius-m);
	height: auto;
}

/* Avatar spans exactly 2 text lines. */
.ef-icon-heading--byline .ef-ih-avatar img {
	display: block;
	width: calc(2em * var(--_lh));
	height: calc(2em * var(--_lh));
	object-fit: cover;
}

.ef-icon-heading--byline .ef-ih-byline-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
	line-height: var(--_lh);
}

a.ef-ih-byline-primary {
	text-decoration: none;
	color: inherit;
}

a.ef-ih-byline-primary:hover {
	text-decoration: underline;
}

.ef-ih-byline-secondary {
	opacity: 0.7;
}

/* Footer — card-specific positioning (base styles in footer.css) */
.ef-card .ef-card-footer {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	border-radius: 0 0 var(--ef-radius-m) var(--ef-radius-m);
}

/* Footer as direct card child — flush against media, no body wrapper */
.ef-card > .ef-card-footer {
	position: static;
	border-top: none;
	margin: 0;
}

/* Footer overlay when card has only an image (media frame + footer, no body) */
.ef-card:has(> .ef-media-frame):not(:has(.ef-card-body)) > .ef-card-footer {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	border-radius: 0 0 var(--ef-radius-m) var(--ef-radius-m);
	background-color: color-mix(in srgb, var(--ef-color-primary) 85%, transparent);
	color: var(--ef-color-white);
	--footer-bg: color-mix(in srgb, var(--ef-color-primary) 85%, transparent);
	--footer-color: var(--ef-color-white);
	border-top: none;
	backdrop-filter: blur(4px);
}

.ef-card:has(> .ef-media-frame):not(:has(.ef-card-body)):has(> .ef-card-footer) {
	--footer-h: 0px;
}

/* Button-mode actions — .ef-buttons provides flex, vars, and base styles */
.ef-card-actions {
	gap: var(--ef-gap-m);
	margin-top: auto;
}

.ef-card-actions .ef-buttons-item {
	flex-grow: 0;
	flex-basis: auto;
}

/* Voxel actions as secondary buttons */
.ef-card-actions .ts-action-con {
	border-color: var(--btn-accent);
	color: var(--btn-accent);
}

.ef-card-actions .ts-action-con:hover {
	background-color: var(--btn-accent-light);
}

.ef-card--embedded .ef-card-avatar {
	flex: 0 0 auto;
	overflow: hidden;
	border-radius: var(--ef-radius-m);
}

.ef-card--embedded .ef-card-avatar img {
	display: block;
	width: calc(2em * 1.3);
	height: calc(2em * 1.3);
	object-fit: cover;
}

/* ── Accordion variant ──────────────────────── */

.ef-card-layout--accordion.ef-card {
	interpolate-size: allow-keywords;
	height: auto;
	overflow: visible;
}

.ef-card-toggle {
	display: flex;
	align-items: center;
	gap: var(--ef-gap-m);
	padding: var(--ef-pad-m) 0;
	cursor: pointer;
	list-style: none;
}

.ef-card-toggle::-webkit-details-marker {
	display: none;
}

.ef-card-toggle .ef-icon-heading {
	flex: 1;
	min-width: 0;
}

.ef-card-chevron {
	flex-shrink: 0;
	margin-left: auto;
	transition: transform var(--ef-transition) ease;
}

.ef-card-accordion-item[open] > .ef-card-toggle > .ef-card-chevron {
	transform: rotate(180deg);
}

.ef-card-accordion-content {
	height: 0;
	overflow: hidden;
	transition: height var(--ef-transition) ease;
}

.ef-card-accordion-item[open] > .ef-card-accordion-content {
	height: auto;
}

.ef-card-accordion-content > * {
	padding-bottom: var(--ef-pad-m);
}

.ef-card-accordion-item + .ef-card-accordion-item {
	border-top: var(--ef-border-m) solid var(--card-border-color);
}

/* ── Sticky (desktop only) ─────────────────── */

@media (min-width: 1025px) {
	.ef-sticky-yes {
		position: sticky;
		top: var(--sticky-offset, 0px);
		align-self: start;
		height: auto;
		content-visibility: visible;
	}
}

/* ── Responsive ─────────────────────────────── */

@media (max-width: 1024px) {
	.ef-card {
		--card-inset: var(--ef-pad-m);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ef-card-chevron,
	.ef-card-accordion-content {
		transition: none;
	}
}

/* navbar.css */
/* === Navbar Layout === */
.ef-navbar {
	display: flex;
	align-items: center;
	gap: var(--ef-gap-m);
	padding: var(--ef-pad-m) max(var(--ef-pad-m), calc(50% - var(--ef-container-width) / 2));
}

.ef-navbar-logo {
	flex: 0 0 auto;
	align-self: center;
}

.ef-navbar-logo-link {
	display: inline-flex;
}

.ef-navbar-logo img {
	height: auto;
	max-height: var(--ef-size-touch-target);
	width: auto;
	object-fit: contain;
}

.ef-navbar-menu {
	display: flex;
	align-items: center;
	align-self: center;
	gap: var(--ef-gap-s);
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
	justify-content: center;
}

.ef-navbar-cta {
	flex: 0 0 auto;
	align-self: center;
}
.ef-navbar-cta .ef-buttons { flex-wrap: nowrap; align-items: center; }
.ef-navbar-cta .ef-buttons-item { flex-basis: 0; flex-grow: 1; }


/* === Nav Items === */
.ef-navbar-item {
	position: relative;
	display: flex;
	align-items: center;
}

.ef-navbar-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--ef-size-touch-target);
	padding: var(--ef-pad-xs) var(--ef-pad-m);
	text-decoration: none;
	color: inherit;
	white-space: nowrap;
	transition: color var(--ef-transition) ease;
}

.ef-navbar-link:hover {
	text-decoration: none;
}

.ef-navbar-toggle-mega {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ef-size-touch-target);
	min-width: 28px;
	padding: 0 var(--ef-radius-s);
	border: none;
	background: none;
	color: inherit;
	cursor: pointer;
	transition: transform var(--ef-transition) ease;
}

.ef-navbar-toggle-mega[aria-expanded="true"] {
	transform: rotate(180deg);
}

.ef-navbar-chevron {
	flex-shrink: 0;
}

/* === Mega Menu (Desktop) === */
.ef-navbar-mega {
	--ef-mega-offset: var(--ef-gap-m);
	position: absolute;
	top: calc(100% + var(--ef-mega-offset));
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: var(--ef-gap-l);
	padding: var(--ef-pad-m) var(--ef-pad-l);
	background: var(--ef-color-white);
	border: var(--ef-border-s) solid var(--ef-color-border);
	border-radius: var(--ef-radius-m);
	box-shadow: 0 2px 8px 0 rgba(99, 99, 99, 0.2);
	opacity: 0;
	visibility: hidden;
	z-index: 100;
	white-space: nowrap;
	transition:
		opacity 120ms ease-in,
		visibility 0s linear 120ms;
}

/* Hover gap bridge — must cover the full offset so hover doesn't break */
.ef-navbar-mega::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 0;
	width: 100%;
	height: var(--ef-mega-offset);
}

/* Show on hover + keyboard focus (CSS transition-delay handles hover intent) */
.ef-navbar-item:hover > .ef-navbar-mega:not([hidden]),
.ef-navbar-item:focus-within > .ef-navbar-mega:not([hidden]) {
	opacity: 1;
	visibility: visible;
	transition:
		opacity 120ms ease-out,
		visibility 0s linear 0s;
}

/* Mega columns — gap on parent handles spacing */
.ef-navbar-mega-col {
	min-width: 0;
}

.ef-navbar-mega-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ef-navbar-mega-heading ~ ul {
	padding-inline-start: var(--ef-gap-l);
}

.ef-navbar-mega-heading {
	display: block;
	margin: 0 0 var(--ef-gap-s);
	white-space: nowrap;
	text-decoration: none;
	color: inherit;
}

.ef-navbar-mega-col ul a {
	display: block;
	padding: var(--ef-radius-s) 0;
	text-decoration: none;
	color: inherit;
	white-space: nowrap;
	border-radius: var(--ef-radius-s);
	transition: color var(--ef-transition) ease;
}


/* === Breadcrumb Row === */
.ef-navbar-breadcrumb {
	padding: var(--ef-pad-xs) max(var(--ef-pad-m), calc(50% - var(--ef-container-width) / 2));
}

/* === Focus Visible === */
.ef-navbar a:focus-visible,
.ef-navbar button:focus-visible {
	outline: var(--ef-focus-ring) solid var(--ef-color-primary);
	outline-offset: var(--ef-focus-ring);
}

/* === Mobile Toggle === */
.ef-navbar-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	min-height: var(--ef-size-touch-target);
	min-width: var(--ef-size-touch-target);
	padding: 0;
	border: none;
	background: none;
	color: inherit;
	cursor: pointer;
	margin-inline-start: auto;
}

/* === Mobile Drawer === */
.ef-navbar-drawer {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: none;
	background: var(--ef-color-white);
	overflow-y: auto;
	overscroll-behavior: contain;
	display: flex;
	flex-direction: column;
	z-index: 9999;
	transform: translateY(100%);
	transition:
		transform 300ms ease-out,
		overlay 300ms ease-out allow-discrete,
		display 300ms ease-out allow-discrete;
}

.ef-navbar-drawer[open] {
	transform: translateY(0);
}

@starting-style {
	.ef-navbar-drawer[open] {
		transform: translateY(100%);
	}
}

.ef-navbar-drawer::backdrop {
	background: transparent;
	transition:
		background 300ms ease-out,
		overlay 300ms ease-out allow-discrete,
		display 300ms ease-out allow-discrete;
}

.ef-navbar-drawer[open]::backdrop {
	background: var(--ef-overlay);
}

@starting-style {
	.ef-navbar-drawer[open]::backdrop {
		background: transparent;
	}
}

.ef-navbar-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--ef-pad-m) var(--ef-pad-l);
	border-bottom: var(--ef-border-s) solid var(--ef-color-border);
	flex: 0 0 auto;
}

.ef-navbar-drawer-title {
	font-weight: var(--ef-weight-m);
}

.ef-navbar-drawer-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ef-size-touch-target);
	min-width: var(--ef-size-touch-target);
	padding: 0;
	border: none;
	background: none;
	color: inherit;
	cursor: pointer;
}

.ef-navbar-drawer-body {
	flex: 1 1 auto;
	padding: var(--ef-pad-m) var(--ef-pad-l);
	overflow-y: auto;
}

.ef-navbar-drawer-body > ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ef-navbar-drawer-item a,
.ef-navbar-drawer-item button {
	display: flex;
	align-items: center;
	width: 100%;
	padding: var(--ef-gap-m) 0;
	border: none;
	background: none;
	color: inherit;
	text-decoration: none;
	font: inherit;
	cursor: pointer;
	text-align: start;
}

.ef-navbar-drawer-item-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ef-navbar-drawer-item-row > button {
	flex: 0 0 auto;
	width: var(--ef-size-touch-target);
	justify-content: center;
	transition: transform var(--ef-transition) ease;
}

.ef-navbar-drawer-item-row > button[aria-expanded="true"] {
	transform: rotate(180deg);
}

/* Accordion sub-list */
.ef-navbar-drawer-item > ul {
	list-style: none;
	margin: 0;
	padding-inline-start: var(--ef-pad-l);
}

.ef-navbar-drawer-item > ul[hidden] {
	display: none;
}

.ef-navbar-drawer-heading {
	font-weight: var(--ef-weight-l);
	padding: var(--ef-gap-s) 0 var(--ef-radius-s);
}

.ef-navbar-drawer-heading a {
	text-decoration: none;
	color: inherit;
}

.ef-navbar-drawer-footer {
	flex: 0 0 auto;
	padding: var(--ef-pad-m) var(--ef-pad-l);
	border-top: var(--ef-border-s) solid var(--ef-color-border);
}

/* === Scroll Lock Compensation === */
html {
	scrollbar-gutter: stable;
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
	.ef-navbar-mega,
	.ef-navbar-drawer,
	.ef-navbar-drawer::backdrop {
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
		animation: none !important;
	}
}

/* === Editor: show mega menu on hover (JS events unreliable behind Elementor overlay) === */
.elementor-editor-active .ef-navbar-item--has-mega:hover > .ef-navbar-mega[hidden] {
	display: flex !important;
	opacity: 1;
	visibility: visible;
}

/* === Responsive (mobile breakpoint) === */
@media (max-width: 1024px) {
	.ef-navbar-menu {
		display: none;
	}
	.ef-navbar-cta {
		display: none;
	}
	.ef-navbar-toggle {
		display: flex;
	}
}

/* wrapper.css */
/* Wrapper — minimal root-level container with optional card surface. */
.e-con.ef-wrapper {
	position: relative;
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--gap: 0px;
}

.ef-wrapper:has(.ef-navbar) {
	z-index: 100;
}

.ef-wrapper.ef-bg--white {
	background-color: var(--ef-color-white);
}

.ef-wrapper.ef-bg--primary {
	background-color: var(--ef-color-primary_light);
	color: var(--ef-color-text, #333);
}

.ef-wrapper.ef-bg--secondary {
	background-color: var(--ef-color-secondary_light);
	color: var(--ef-color-text, #333);
}

/* Media background — real element for img/video/iframe */
.ef-bg-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.ef-wrapper:has(.ef-bg-media) > *:not(.ef-bg-media) {
	position: relative;
	z-index: 1;
}

.ef-bg-media img,
.ef-bg-media iframe,
.ef-bg-media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Mobile — single-column grid: reset children col-span so tablet values don't cascade */
@media (max-width: 767px) {
	.ef-wrapper > * {
		grid-column: auto !important;
	}

	.ef-reverse-mobile-yes.ef-wrapper {
		display: flex;
		flex-direction: column-reverse;
	}
}

/* Modal variant — native <dialog> */
.ef-modal:not([open]) {
	display: none !important;
}

.ef-modal[open] {
	border: none !important;
	border-radius: var(--ef-radius-l) !important;
	padding: var(--ef-pad-xl) !important;
	max-width: min(var(--ef-container-width, 1200px), 90vw) !important;
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
	background: var(--ef-color-white, #fff);
}

.ef-modal::backdrop {
	background: var(--ef-overlay);
}

.ef-modal-close {
	position: absolute;
	top: var(--ef-pad-m);
	right: var(--ef-pad-m);
	appearance: none;
	background: none;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	padding: var(--ef-pad-s);
	color: var(--ef-color-text, inherit);
	opacity: 0.6;
	z-index: 2;
}

.ef-modal-close:hover {
	opacity: 1;
}

.ef-modal.ef-bg--primary[open] {
	background-color: var(--ef-color-primary_light);
	color: var(--ef-color-text, #333);
}

.ef-modal.ef-bg--secondary[open] {
	background-color: var(--ef-color-secondary_light);
	color: var(--ef-color-text, #333);
}

/* breadcrumb.css */
.ef-breadcrumb ol {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ef-breadcrumb li {
	display: flex;
	align-items: center;
	min-width: 0;
	flex-shrink: 1;
	max-width: 100%;
	transition: max-width 0.25s ease, flex-shrink 0.25s ease;
}

.ef-breadcrumb li > a,
.ef-breadcrumb li:last-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ef-breadcrumb li:last-child {
	flex-shrink: 0;
	max-width: 60%;
}

.ef-breadcrumb li:hover,
.ef-breadcrumb li:focus-within {
	flex-shrink: 0;
	max-width: 100%;
}

.ef-breadcrumb li + li::before {
	content: "\2192";
	padding: 0 0.35em;
	flex-shrink: 0;
	opacity: 0.5;
}

.ef-breadcrumb a {
	text-decoration: none;
}

.ef-breadcrumb a:hover {
	text-decoration: underline;
}