/* =============================================================================
   ELN Template — page-level stylesheet
   -----------------------------------------------------------------------------
   Loads in the parent WP theme context (NOT inside the iframe). Owns every
   section that sits outside the iframe preview: marketing header, intro
   section, etc. All selectors namespaced under .eln-marketing / .eln-intro /
   .eln-cta to avoid leaking into the rest of the site.
   ============================================================================= */

/* Brand tokens hoisted to :root so .eln-cta (used in both the marketing
   header AND the Final CTA card inside .eln-loads) can always resolve
   them regardless of section scope. page.css only loads on Templates
   pages, so this is contained to that route. */
:root {
	/* Font Awesome Duotone — primary navy, secondary orange, both at full
	   opacity per design. Applied via higher-specificity rules further down
	   so our brand colors override the SVG's embedded `.fa-secondary{opacity:.4}`. */
	--fa-primary-color:     rgba(6, 22, 52, 1);
	--fa-primary-opacity:   1;
	--fa-secondary-color:   rgba(234, 125, 31, 1);
	--fa-secondary-opacity: 1;

	--eln-brand-orange:  #f48220;
	--eln-brand-green:   #1f7a4a;
	--eln-navy:          rgb(6, 22, 52);
}

.eln-marketing,
.eln-intro {
	box-sizing: border-box;
}

.eln-marketing *,
.eln-marketing *::before,
.eln-marketing *::after,
.eln-intro *,
.eln-intro *::before,
.eln-intro *::after {
	box-sizing: border-box;
}

/* =============================================================================
   Marketing header (navy, sits at the top above the iframe)
   ============================================================================= */

.eln-marketing {
	background: var(--eln-navy);
	padding: 60px 0;
	color: white;
}

.eln-marketing__inner {
	width: 88%;
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

/* -----------------------------------------------------------------------------
   Left column: headline + paragraph + CTAs
   ----------------------------------------------------------------------------- */

.eln-marketing__headline {
	font-family: inherit;
	font-size: 48px;
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 20px;
	color: white;
	letter-spacing: -0.01em;
}

.eln-marketing__headline .eln-accent,
.eln-accent {
	color: var(--eln-brand-orange);
	font-style: italic;
	font-weight: inherit;
}

.eln-marketing__paragraph {
	font-size: 19px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 30px;
	max-width: 580px;
}

.eln-marketing__ctas {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* -----------------------------------------------------------------------------
   CTA buttons — matches the elabeln site's primary (orange) + secondary (green)
   ----------------------------------------------------------------------------- */

.eln-cta {
	display: inline-flex;
	align-items: center;
	padding: 0.45em 0.8em;
	border: 2px solid transparent;
	border-radius: 5px;
	font-size: 1.1em;
	font-family: inherit;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.eln-cta__label {
	display: inline-block;
	margin: 5px;
	font-size: 0.9em;
}

.eln-cta__icon {
	display: inline-flex;
	align-items: center;
	margin: 5px;
}

.eln-cta__icon svg {
	width: 0.95em;
	height: 0.95em;
	stroke: currentColor;
}

.eln-cta--primary {
	background: var(--eln-brand-orange);
	border-color: var(--eln-brand-orange);
	color: white;
	flex-direction: row-reverse;
}

.eln-cta--primary:hover,
.eln-cta--primary:focus {
	background: white;
	color: var(--eln-brand-orange);
}

.eln-cta--secondary {
	background: white;
	border-color: var(--eln-brand-green);
	color: var(--eln-brand-green);
}

.eln-cta--secondary:hover,
.eln-cta--secondary:focus {
	background: var(--eln-brand-green);
	color: white;
}

/* -----------------------------------------------------------------------------
   Right column: mini ELN preview
   The iframe always renders at desktop width (1200px) and is CSS-scaled
   via JS to fit the container width. Aspect-ratio keeps the container
   slightly taller than the left content.
   ----------------------------------------------------------------------------- */

.eln-marketing__preview {
	width: 100%;
	aspect-ratio: 5 / 4;
	overflow: hidden;
	border-radius: 12px;
	box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.45);
	background: white;
	position: relative;
}

.eln-marketing__preview-iframe {
	width: 1025px;
	height: 820px;
	border: 0;
	background: transparent;
	pointer-events: none;
	transform-origin: top left;
	/* transform: scale(...) applied at runtime by the inline JS in single-template.php */
}

/* -----------------------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.eln-marketing {
		padding: 52px 0;
	}
	.eln-marketing__inner {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.eln-marketing__headline {
		font-size: 38px;
	}
	.eln-marketing__paragraph {
		font-size: 17px;
	}
	.eln-marketing__preview {
		max-width: 540px;
		margin: 0 auto;
	}
}

@media (max-width: 480px) {
	.eln-marketing {
		padding: 40px 0;
	}
	.eln-marketing__headline {
		font-size: 30px;
	}
	.eln-marketing__paragraph {
		font-size: 16px;
		margin-bottom: 24px;
	}
}

/* =============================================================================
   Intro section (white, sits between marketing header and iframe preview)
   ============================================================================= */

.eln-intro {
	background: white;
	padding: 60px 0;
	color: rgb(6, 22, 52);
}

.eln-intro__inner {
	width: 88%;
	max-width: 1200px;
	margin: 0 auto;
}

.eln-intro__inner > * {
	max-width: 800px;
}

.eln-intro__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--eln-brand-green);
	margin-bottom: 26px;
}

.eln-intro__eyebrow::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 2px;
	background: var(--eln-brand-green);
}

.eln-intro__headline {
	font-family: inherit;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	color: rgb(6, 22, 52);
	margin: 0 0 24px;
}

.eln-intro__headline .eln-accent,
.eln-intro .eln-accent {
	color: var(--eln-brand-orange);
	font-style: italic;
	font-weight: inherit;
}

.eln-intro__body {
	font-size: 1.1rem;
	line-height: 1.65;
	color: #333;
}

.eln-intro__body p {
	margin: 0 0 1em;
}

.eln-intro__body p:last-child {
	margin-bottom: 0;
}

@media (max-width: 900px) {
	.eln-intro {
		padding: 52px 0;
	}
	.eln-intro__headline {
		font-size: 32px;
	}
	.eln-intro__body {
		font-size: 1rem;
	}
}

@media (max-width: 480px) {
	.eln-intro {
		padding: 40px 0;
	}
	.eln-intro__headline {
		font-size: 26px;
	}
	.eln-intro__eyebrow {
		font-size: 12px;
		margin-bottom: 20px;
	}
}

/* =============================================================================
   What's Included section (light gray, sits AFTER the iframe preview)
   ============================================================================= */

.eln-loads {
	background: #F1F3F8;
	padding: 60px 0;
	color: rgb(6, 22, 52);
	box-sizing: border-box;
}

.eln-loads *,
.eln-loads *::before,
.eln-loads *::after {
	box-sizing: border-box;
}

.eln-loads__inner {
	width: 88%;
	max-width: 1200px;
	margin: 0 auto;
}

.eln-loads__inner > .eln-loads__eyebrow,
.eln-loads__inner > .eln-loads__headline,
.eln-loads__inner > .eln-loads__body {
	max-width: 800px;
}

.eln-loads__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--eln-brand-green, #1f7a4a);
	margin-bottom: 26px;
}

.eln-loads__eyebrow::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 2px;
	background: var(--eln-brand-green, #1f7a4a);
}

.eln-loads__headline {
	font-family: inherit;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
	color: rgb(6, 22, 52);
	margin: 0 0 24px;
}

.eln-loads__headline .eln-accent,
.eln-loads .eln-accent {
	color: var(--eln-brand-orange, #f48220);
	font-style: italic;
	font-weight: inherit;
}

.eln-loads__body {
	font-size: 1.1rem;
	line-height: 1.65;
	color: #333;
	margin-bottom: 40px;
}

.eln-loads__body p {
	margin: 0 0 1em;
}

.eln-loads__body p:last-child {
	margin-bottom: 0;
}

/* Card grid */
.eln-loads__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 8px;
}

.eln-loads-card {
	background: white;
	border: 1px solid #E3E5EA;
	border-radius: 12px;
	padding: 28px;
}

.eln-loads-card__icon {
	width: 48px;
	height: 48px;
	border-radius: 10px;
	background: rgba(244, 130, 32, 0.12);
	color: var(--eln-brand-orange);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}

.eln-loads-card__icon img,
.eln-loads-card__icon svg {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

/* FA Duotone paint — beats the SVG's embedded `<style>.fa-secondary{opacity:.4}`
   via higher specificity (container class + .fa-* > bare .fa-* selector). */
.eln-loads-card__icon svg .fa-primary,
.eln-final-cta__feature-icon svg .fa-primary {
	fill: var(--fa-primary-color);
	opacity: var(--fa-primary-opacity);
}
.eln-loads-card__icon svg .fa-secondary,
.eln-final-cta__feature-icon svg .fa-secondary {
	fill: var(--fa-secondary-color);
	opacity: var(--fa-secondary-opacity);
}

.eln-loads-card__title {
	font-family: inherit;
	font-size: 20px;
	font-weight: 600;
	color: rgb(6, 22, 52);
	margin: 0 0 10px;
	line-height: 1.3;
}

.eln-loads-card__desc {
	font-size: 15px;
	line-height: 1.5;
	color: #333;
	margin: 0 0 18px;
}

.eln-loads-card__checks {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 8px;
}

.eln-loads-card__checks li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	color: rgb(6, 22, 52);
	line-height: 1.4;
}

.eln-loads-card__checks svg {
	width: 16px;
	height: 16px;
	stroke: #1F8A5B;
	flex-shrink: 0;
	margin-top: 2px;
}

@media (max-width: 900px) {
	.eln-loads {
		padding: 52px 0;
	}
	.eln-loads__headline {
		font-size: 32px;
	}
	.eln-loads__body {
		font-size: 1rem;
	}
	.eln-loads__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.eln-loads__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.eln-loads {
		padding: 40px 0;
	}
	.eln-loads__headline {
		font-size: 26px;
	}
	.eln-loads__eyebrow {
		font-size: 12px;
		margin-bottom: 20px;
	}
}

/* =============================================================================
   Shared utility — solid-orange highlight (used by CTA headline, etc.)
   ============================================================================= */

.eln-highlight {
	color: #f48220;
}

/* =============================================================================
   Final CTA card  (rendered INSIDE the loads section, 50px below the cards)
   ============================================================================= */

.eln-loads .eln-final-cta__card {
	margin-top: 50px;
}

.eln-final-cta__card *,
.eln-final-cta__card *::before,
.eln-final-cta__card *::after {
	box-sizing: border-box;
}

.eln-final-cta__card {
	background: rgb(6, 22, 52);
	color: white;
	border-radius: 24px;
	padding: 60px 64px;
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 48px;
	align-items: center;
	position: relative;
	overflow: hidden;
}

.eln-final-cta__main {
	position: relative;
}

.eln-final-cta__headline {
	font-family: inherit;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 14px;
	color: white;
}

.eln-final-cta__headline .eln-highlight {
	color: #f48220;
}

.eln-final-cta__headline .eln-accent {
	color: #f48220;
	font-style: italic;
}

.eln-final-cta__paragraph {
	font-size: 16px;
	color: rgba(255, 255, 255, 0.78);
	margin: 0 0 26px;
	max-width: 520px;
	line-height: 1.55;
}

.eln-final-cta__buttons {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
/* Buttons inside the final CTA card use the shared .eln-cta utility
   (same orange primary + green secondary as the marketing header). */

.eln-final-cta__features {
	position: relative;
	display: grid;
	gap: 10px;
}

.eln-final-cta__feature {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
}

.eln-final-cta__feature-icon {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: #ffffff;
	color: #f48220;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.eln-final-cta__feature-icon img,
.eln-final-cta__feature-icon svg {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.eln-final-cta__feature-text {
	font-size: 13px;
	font-weight: 500;
	color: white;
	line-height: 1.3;
}

@media (max-width: 900px) {
	.eln-final-cta__card {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 44px 36px;
	}
	.eln-final-cta__headline {
		font-size: 32px;
	}
}

@media (max-width: 480px) {
	.eln-final-cta__card {
		padding: 36px 24px;
		border-radius: 18px;
	}
	.eln-final-cta__headline {
		font-size: 26px;
	}
	.eln-final-cta__buttons {
		flex-direction: column;
		align-items: stretch;
	}
	.eln-final-cta__buttons .eln-cta {
		justify-content: center;
	}
}

/* =============================================================================
   FAQ section
   ============================================================================= */

.eln-faq {
	background: white;
	padding: 60px 0;
	box-sizing: border-box;
}

.eln-faq *,
.eln-faq *::before,
.eln-faq *::after {
	box-sizing: border-box;
}

.eln-faq__inner {
	width: 88%;
	max-width: 1200px;
	margin: 0 auto;
}

/* Constrain content to 800px and let it sit flush-left within the
   centered site container (matches the intro section's pattern). */
.eln-faq__inner > * {
	max-width: 800px;
}

.eln-faq__intro {
	margin-bottom: 32px;
}

.eln-faq__eyebrow {
	font-size: 14px;
	font-weight: 700;
	color: #1f7a4a;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 22px;
	display: inline-flex;
	align-items: center;
	gap: 14px;
}

.eln-faq__eyebrow-line {
	width: 18px;
	height: 2px;
	background: #1f7a4a;
	display: inline-block;
}

.eln-faq__headline {
	font-family: inherit;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 18px;
	color: rgb(6, 22, 52);
}

.eln-faq__headline .eln-accent {
	color: #f48220;
	font-style: italic;
}

.eln-faq__paragraph {
	font-size: 1.1rem;
	line-height: 1.6;
	color: #333;
}

.eln-faq__paragraph p {
	margin: 0 0 1em;
}

.eln-faq__paragraph p:last-child {
	margin-bottom: 0;
}

.eln-faq__list {
	display: grid;
	gap: 8px;
}

.eln-faq__item {
	background: white;
	border: 1px solid #E3E5EA;
	border-radius: 8px;
	overflow: hidden;
}

.eln-faq__question {
	width: 100%;
	padding: 16px 20px;
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: inherit;
	text-align: left;
	list-style: none;
}

.eln-faq__question::-webkit-details-marker {
	display: none;
}

.eln-faq__indicator {
	color: #f48220;
	font-size: 12px;
	line-height: 1;
	flex-shrink: 0;
	transition: transform 0.2s ease;
	display: inline-block;
}

.eln-faq__item[open] .eln-faq__indicator {
	transform: rotate(90deg);
}

.eln-faq__question-text {
	flex: 1;
	font-family: inherit;
	font-size: 1em;
	font-weight: 600;
	color: rgb(6, 22, 52);
	line-height: 1.4;
	margin: 0;
}

.eln-faq__answer {
	padding: 0 20px 18px 38px;
	font-size: 1em;
	color: #333;
	line-height: 1.65;
}

.eln-faq__answer p {
	margin: 0 0 1em;
}

.eln-faq__answer p:last-child {
	margin-bottom: 0;
}

@media (max-width: 900px) {
	.eln-faq__headline {
		font-size: 32px;
	}
}

@media (max-width: 480px) {
	.eln-faq {
		padding: 56px 0;
	}
	.eln-faq__headline {
		font-size: 26px;
	}
	.eln-faq__question {
		padding: 14px 16px;
	}
	.eln-faq__answer {
		padding: 0 16px 14px 32px;
	}
}

/* =============================================================================
   Template Summary section (white, sits between iframe and What's Included)
   The iframe content is not crawlable; this prose carries the SEO + AIO weight.
   ============================================================================= */

.eln-summary {
	background: white;
	padding: 0 0 60px;
	color: rgb(6, 22, 52);
	box-sizing: border-box;
}

.eln-summary *,
.eln-summary *::before,
.eln-summary *::after {
	box-sizing: inherit;
}

.eln-summary__inner {
	width: 88%;
	max-width: 1200px;
	margin: 0 auto;
}

.eln-summary__inner > * {
	max-width: 800px;
}

.eln-summary__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--eln-brand-green);
	margin-bottom: 26px;
}

.eln-summary__eyebrow::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 2px;
	background: var(--eln-brand-green);
}

.eln-summary__headline {
	font-family: inherit;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.25;
	color: rgb(6, 22, 52);
	margin: 0 0 24px;
}

.eln-summary__headline .eln-accent,
.eln-summary .eln-accent {
	color: var(--eln-brand-orange);
	font-style: italic;
	font-weight: inherit;
}

.eln-summary__body {
	font-size: 1.1rem;
	line-height: 1.65;
	color: #333;
}

.eln-summary__body p {
	margin: 0 0 1em;
}

.eln-summary__body p:last-child {
	margin-bottom: 0;
}

@media (max-width: 900px) {
	.eln-summary {
		padding: 0 0 52px;
	}
	.eln-summary__headline {
		font-size: 26px;
	}
}

/* =============================================================================
   Templates Archive (/resources/templates/) — hero + responsive card grid
   ============================================================================= */

.eln-archive {
	background: white;
	padding: 60px 0;
	color: rgb(6, 22, 52);
	box-sizing: border-box;
}

.eln-archive *,
.eln-archive *::before,
.eln-archive *::after {
	box-sizing: inherit;
}

.eln-archive__inner {
	width: 88%;
	max-width: 1200px;
	margin: 0 auto;
}

.eln-archive__hero {
	max-width: 800px;
	margin-bottom: 56px;
}

.eln-archive__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--eln-brand-green);
	margin-bottom: 26px;
}

.eln-archive__eyebrow::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 2px;
	background: var(--eln-brand-green);
}

.eln-archive__headline {
	font-family: inherit;
	font-size: 44px;
	font-weight: 700;
	line-height: 1.2;
	color: rgb(6, 22, 52);
	margin: 0 0 22px;
}

.eln-archive__headline .eln-accent {
	color: var(--eln-brand-orange);
	font-style: italic;
	font-weight: inherit;
}

.eln-archive__intro {
	font-size: 1.1rem;
	line-height: 1.65;
	color: #333;
	margin: 0;
}

.eln-archive__empty {
	color: #6B7280;
	font-size: 1rem;
}

/* Card grid: 3 cols desktop, 2 tablet, 1 mobile */
.eln-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.eln-archive-card {
	background: white;
	border: 1px solid #E3E5EA;
	border-radius: 14px;
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.eln-archive-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
	border-color: rgba(244, 130, 32, 0.4);
}

.eln-archive-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.eln-archive-card__image {
	background: #FAF7F2;
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-bottom: 1px solid #ECE9E1;
}

.eln-archive-card__img,
.eln-archive-card__image img,
.eln-archive-card__image svg {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.eln-archive-card__body {
	padding: 24px 24px 26px;
}

.eln-archive-card__title {
	font-family: inherit;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	color: rgb(6, 22, 52);
	margin: 0 0 12px;
}

.eln-archive-card__excerpt {
	font-size: 15px;
	line-height: 1.55;
	color: #333;
	margin: 0 0 18px;
}

.eln-archive-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--eln-brand-orange);
	letter-spacing: 0.01em;
}

.eln-archive-card__cta svg {
	width: 16px;
	height: 16px;
	transition: transform 0.18s ease;
}

.eln-archive-card:hover .eln-archive-card__cta svg {
	transform: translateX(3px);
}

@media (max-width: 1024px) {
	.eln-archive__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px;
	}
}

@media (max-width: 900px) {
	.eln-archive {
		padding: 60px 0;
	}
	.eln-archive__headline {
		font-size: 32px;
	}
	.eln-archive__hero {
		margin-bottom: 40px;
	}
}

@media (max-width: 600px) {
	.eln-archive__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* =============================================================================
   Archive filter bar (top of /resources/templates/) — clean, lightweight
   ============================================================================= */

.eln-archive__filters {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	margin-bottom: 28px;
	padding: 0;
	border: none;
	background: transparent;
}

.eln-archive__filter {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.eln-archive__filter-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgb(6, 22, 52);
	margin: 0;
}

.eln-archive__filter-select {
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: rgb(6, 22, 52);
	padding: 12px 38px 12px 14px;
	min-height: 48px;
	border: 1px solid #E3E5EA;
	border-radius: 8px;
	background: white;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='none' stroke='%23061634' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 14px center;
	box-sizing: border-box;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.eln-archive__filter-select:hover,
.eln-archive__filter-select:focus {
	border-color: var(--eln-brand-orange);
	outline: none;
	box-shadow: 0 0 0 3px rgba(244, 130, 32, 0.15);
}

.eln-archive__filter-submit {
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 18px;
	background: var(--eln-brand-orange);
	color: white;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}

/* Active filter chips + count + clear */
.eln-archive__active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-bottom: 28px;
	font-size: 14px;
	color: #6B7280;
}

.eln-archive__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px 5px 10px;
	background: rgba(244, 130, 32, 0.12);
	color: rgb(6, 22, 52);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease;
}

.eln-archive__chip:hover {
	background: rgba(244, 130, 32, 0.22);
}

.eln-archive__chip-x {
	color: var(--eln-brand-orange);
	font-size: 16px;
	line-height: 1;
	font-weight: 700;
}

.eln-archive__count {
	color: #6B7280;
	font-size: 14px;
}

.eln-archive__clear {
	color: var(--eln-brand-orange);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
}

.eln-archive__clear:hover {
	text-decoration: underline;
}

/* Empty state for filtered results */
.eln-archive__empty {
	padding: 40px 0;
	color: #6B7280;
	font-size: 1rem;
	text-align: center;
}

.eln-archive__clear-link {
	display: inline-block;
	margin-top: 12px;
	color: var(--eln-brand-orange);
	font-weight: 600;
	text-decoration: none;
}

.eln-archive__clear-link:hover {
	text-decoration: underline;
}

/* Taxonomy term archive page extensions */
.eln-archive__breadcrumb {
	font-size: 13px;
	color: #6B7280;
	margin-bottom: 22px;
}

.eln-archive__breadcrumb a {
	color: var(--eln-brand-orange);
	text-decoration: none;
}

.eln-archive__breadcrumb a:hover {
	text-decoration: underline;
}

.eln-archive__breadcrumb-sep {
	margin: 0 8px;
	color: #C0C4CC;
}

.eln-archive__back {
	margin-top: 32px;
	font-size: 14px;
}

.eln-archive__back a {
	color: var(--eln-brand-orange);
	text-decoration: none;
	font-weight: 600;
}

.eln-archive__back a:hover {
	text-decoration: underline;
}

/* Mobile: stack filters vertically */
@media (max-width: 700px) {
	.eln-archive__filters {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* =============================================================================
   Marketing-header category badges (Industry / Technique / Compliance)
   Render between H1 and paragraph on individual template pages.
   ============================================================================= */

/* =============================================================================
   Search bar (top of archive filter form)
   ============================================================================= */

.eln-archive__filters-wrap {
	margin-bottom: 28px;
}

.eln-archive__search {
	margin-bottom: 22px;
}

.eln-archive__search-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgb(6, 22, 52);
	margin-bottom: 8px;
}

.eln-archive__search-input-wrap {
	position: relative;
}

.eln-archive__search-input {
	font-family: inherit;
	width: 100%;
	font-size: 16px;
	font-weight: 500;
	color: rgb(6, 22, 52);
	padding: 14px 44px 14px 16px;
	border: 1px solid #E3E5EA;
	border-radius: 10px;
	background: white;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	box-sizing: border-box;
}

.eln-archive__search-input::placeholder {
	color: #9CA3AF;
	font-weight: 400;
}

.eln-archive__search-input:hover,
.eln-archive__search-input:focus {
	border-color: var(--eln-brand-orange);
	outline: none;
	box-shadow: 0 0 0 3px rgba(244, 130, 32, 0.15);
}

.eln-archive__search-clear {
	position: absolute;
	right: 16px;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #E3E5EA;
	color: #6B7280;
	border-radius: 50%;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	font-weight: 700;
	transition: background 0.15s ease;
}

.eln-archive__search-clear:hover {
	background: var(--eln-brand-orange);
	color: white;
}

/* =============================================================================
   Full-row alternating listings (replaces the 3-col card grid)
   ============================================================================= */

.eln-archive__list {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* Each listing is its own self-contained card. Image BLEEDS to the card's
   top, left, and bottom edges (no padding around it on those sides) so the
   doodle reads as large and prominent. Body content lives on the right
   with its own breathing room. */
.eln-archive-listing {
	display: grid;
	grid-template-columns: 5fr 7fr;
	align-items: stretch;
	background: white;
	border: 1px solid #E3E5EA;
	border-radius: 16px;
	overflow: hidden;
	transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.eln-archive-listing:hover {
	box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
	border-color: rgba(244, 130, 32, 0.4);
}

.eln-archive-listing__image {
	display: block;
	background: #FAF7F2;
	overflow: hidden;
	border-right: 1px solid #ECE9E1;
	text-decoration: none;
	min-height: 100%;
	position: relative;
}

.eln-archive-listing__image img,
.eln-archive-listing__img {
	width: 100%;
	height: 100%;
	min-height: 100%;
	object-fit: cover;
	display: block;
}

.eln-archive-listing__img,
.eln-archive-listing__image img,
.eln-archive-listing__image svg {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.eln-archive-listing__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px 32px;
	min-width: 0;
}

/* Badges: refined uniform treatment (no pill-color differentiation) — looks
   less "tagged blog post" and more "premium product card". Single hierarchy. */
.eln-archive-listing__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 0;
}

.eln-archive-listing__badge {
	display: inline-block;
	padding: 3px 9px;
	border: 1px solid #DDDFE3;
	border-radius: 4px;
	background: transparent;
	color: #6B7280;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.eln-archive-listing__badge:hover {
	border-color: var(--eln-brand-orange);
	color: var(--eln-brand-orange);
}

.eln-archive-listing__title {
	font-family: inherit;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	color: rgb(6, 22, 52);
	margin: 4px 0 0;
	letter-spacing: -0.005em;
}

.eln-archive-listing__title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.eln-archive-listing__title a:hover {
	color: var(--eln-brand-orange);
}

.eln-archive-listing__excerpt {
	font-size: 0.95rem;
	line-height: 1.6;
	color: #4B5563;
	margin: 0;
}

/* Tags: smaller, lighter, separated by bullet dots — reads like fine
   metadata, not like clickable chips. */
.eln-archive-listing__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin-top: 2px;
	font-size: 11.5px;
	color: #9CA3AF;
	line-height: 1.6;
}

.eln-archive-listing__tag {
	display: inline-block;
	background: transparent;
	color: #9CA3AF;
	padding: 0 8px 0 0;
	font-size: inherit;
	font-weight: 500;
}

.eln-archive-listing__tag:not(:last-child)::after {
	content: '·';
	margin-left: 8px;
	color: #D1D5DB;
}

.eln-archive-listing__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	font-size: 13px;
	font-weight: 700;
	color: var(--eln-brand-orange);
	text-decoration: none;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.eln-archive-listing__cta svg {
	width: 14px;
	height: 14px;
	transition: transform 0.18s ease;
}

.eln-archive-listing__cta:hover svg {
	transform: translateX(3px);
}

@media (max-width: 900px) {
	.eln-archive-listing {
		grid-template-columns: 1fr;
	}
	.eln-archive-listing__image {
		border-right: 0;
		border-bottom: 1px solid #ECE9E1;
		aspect-ratio: 4 / 3;
	}
	.eln-archive-listing__body {
		padding: 24px;
	}
	.eln-archive-listing__title {
		font-size: 22px;
	}
	.eln-archive__list {
		gap: 20px;
	}
}

/* =============================================================================
   Marketing-header right-column metadata: badges + tags above the iframe
   Lives on the navy background — uses light text styling for contrast.
   ============================================================================= */

.eln-marketing__right {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.eln-marketing__meta {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.eln-marketing__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.eln-marketing__badge {
	display: inline-block;
	padding: 4px 10px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.95);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.eln-marketing__badge:hover {
	background: rgba(244, 130, 32, 0.22);
	border-color: rgba(244, 130, 32, 0.6);
	color: white;
}

.eln-marketing__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.eln-marketing__tag {
	display: inline-block;
	padding: 2px 8px;
	background: rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.7);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 500;
}