/**
 * FocalX — Frontpage-specifik CSS.
 *
 * Matcher Elementor kit post-2194 typografi og layout:
 *   max-content 1140px · Ubuntu font · H1 48 / H2 40 / H3 32
 *   body 18px · text #2D2F31CC · headlines #2D2F31 · primary blue #163B6B
 */

/* ============================================================
 * Shared primitives
 * ============================================================ */

.fx-main--frontpage {
	font-family: var(--fx-font-body);
	font-size: var(--fx-text-base);
	color: var(--fx-text-body);
}

.fx-main--frontpage section {
	scroll-margin-top: calc(var(--fx-header-h, 84px) + 24px);
}

/* Alle H1-H3 bruger Ubuntu + primary text color fra tokens */
.fx-main--frontpage h1,
.fx-main--frontpage h2,
.fx-main--frontpage h3,
.fx-main--frontpage h4,
.fx-main--frontpage h5,
.fx-main--frontpage h6 {
	font-family: var(--fx-font-heading);
	color: var(--fx-text);
	font-weight: 700;
	line-height: 1.2;
	/* margin-bottom kommer fra global typography.css; komponenter overrider frit */
}

.fx-main--frontpage h1 { font-size: var(--fx-h1); }
.fx-main--frontpage h2 { font-size: var(--fx-h2); }
.fx-main--frontpage h3 { font-size: var(--fx-h3); }
.fx-main--frontpage h4 { font-size: var(--fx-h4); }
.fx-main--frontpage h5 { font-size: var(--fx-h5); }
.fx-main--frontpage h6 { font-size: var(--fx-h6); }

/* Hero (.fx-hero) base-styles ligger i css/hero.css — reusable sektion.
 * Her overstyrer vi billede-containeren for frontpage-variantens promo-
 * billede (telefon-mockup + bil med AI-dent-annotationer). Default-heroen
 * tvinger 1:1 crop + object-fit:cover + rounded corners, hvilket skærer
 * kanterne af mockup'en. Samme pattern som .fx-hero--product — se
 * css/page-product.css. */
.fx-hero--frontpage .fx-hero__image-wrap {
	aspect-ratio:  auto;
	border-radius: 0;
	overflow:      visible;
	max-width:     none;
	margin-left:   0;
	background:    transparent;
}

.fx-hero--frontpage .fx-hero__image {
	width:           auto;
	height:          420px;
	max-width:       100%;
	object-fit:      contain;
	object-position: left bottom;
	display:         block;
}

/* Tablet + PC: rækken strækkes; venstresøjle får CTA+ToC i bund (hero.css
 * space-between mellem .content-top / .content-bottom), promo stadig
 * nederst til højre. */
@media (min-width: 768px) {
	.fx-hero--frontpage .fx-hero__container {
		align-items: stretch;
	}

	.fx-hero--frontpage .fx-hero__content {
		align-self: stretch;
	}

	.fx-hero--frontpage .fx-hero__media {
		justify-self: end;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-end;
		min-width: 0;
	}

	.fx-hero--frontpage .fx-hero__image-wrap {
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
	}
}

/* Tablet (768–1023px): større promo-billede der må stikke lidt udenfor
 * grid-kolonnen mod højre. hero.css sætter ellers overflow-x: clip på
 * .fx-hero — vi løfter clip her så mockup'en kan "lægge ud" uden at
 * påvirke mobil.
 *
 * PC (1024px+): samme hero nulstilles — billedet må ikke skubbes ud
 * forbi max-content (1140px); se næste media query. */
@media (min-width: 768px) and (max-width: 1023px) {
	.fx-main--frontpage {
		overflow-x: visible;
	}

	.fx-hero--frontpage {
		overflow-x: visible;
		overflow: visible;
	}

	.fx-hero--frontpage .fx-hero__container,
	.fx-hero--frontpage .fx-hero__media {
		overflow: visible;
	}

	/* Skub hele medie-kolonnen mod venstre — tablet bruger mindre offset end PC. */
	.fx-hero--frontpage .fx-hero__media {
		position: relative;
		left: -92px;
		z-index: 1;
	}

	.fx-hero--frontpage .fx-hero__image-wrap {
		/* Bredere end grid-cellen (~140% af kolonne) + træk mod højre så
		 * mockup'en føles større og må croppe/overflowe elegant. */
		width: min(720px, 142%);
		max-width: none;
		margin-left: 0;
		margin-right: clamp(-80px, -8vw, -24px);
		justify-content: flex-start;
		align-items: flex-end;
	}

	.fx-hero--frontpage .fx-hero__image {
		height: 360px;
		max-width: none;
		object-position: left bottom;
	}
}

/* PC: hold promo-billedet inde i .fx-hero__container (max-width 1140px).
 * Fjerner negativ offset + breakout-bredde fra tablet-reglen ovenfor. */
@media (min-width: 1024px) {
	.fx-hero--frontpage {
		overflow-x: clip;
	}

	.fx-hero--frontpage .fx-hero__media {
		left: 0;
		/* Venstre kant af promo-kolonnen (ved gap) — bedre til bil bagende. */
		justify-self: start;
	}

	.fx-hero--frontpage .fx-hero__image-wrap {
		width: 100%;
		max-width: 100%;
		margin-right: 0;
		margin-left: 0;
		justify-content: flex-start;
		align-items: flex-end;
	}

	.fx-hero--frontpage .fx-hero__image {
		height: 420px;
		max-width: 100%;
		object-position: left bottom;
		margin-bottom: -68px;
		margin-left: 0;
	}
}

/* Mobil: reusable hero.css kan tvinge aspect-ratio — sørg for at
 * frontpage-heroen beholder sit naturlige format på alle breakpoints. */
@media (max-width: 767px) {
	.fx-hero--frontpage .fx-hero__image-wrap {
		aspect-ratio: auto;
	}

	.fx-hero--frontpage .fx-hero__image {
		object-position: center bottom;
	}
}

/* How it works (.fx-hiw) styles er flyttet til css/how-it-works.css — reusable sektion. */

/* ============================================================
 * SYSTEM OF RECORD
 *
 * Header (centreret):  mint-pill ("PLATFORM") + H2 + intro
 * Body (2 kolonner):   accordion (venstre) + illustration-card (højre)
 * ============================================================ */

.fx-sor {
	padding: var(--fx-section-py) var(--fx-gutter);
	background: var(--fx-bg);
}

.fx-sor__container {
	max-width: var(--fx-max-content);
	margin: 0 auto;
}

/* ---------- Header (centered) ---------- */

.fx-sor__header {
	max-width: 760px;
	margin: 0 auto clamp(40px, 5vw, 64px);
	text-align: center;
}

/* Pill-styles arves fra .fx-eyebrow i tokens.css. Her sætter vi kun
   margin-bottom så eyebrow'en står i korrekt afstand til H2'en under. */
.fx-sor__eyebrow {
	margin-bottom: 20px;
}

.fx-sor__title {
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0;
}

.fx-sor__intro {
	font-size: var(--fx-text-base);
	line-height: 1.65;
	color: var(--fx-text-body);
	margin: 16px auto 0;
	max-width: 620px;
}

/* ---------- Body: 2 columns ---------- */

.fx-sor__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--fx-col-gap);
	align-items: center;
}

/* ---------- Accordion (left) ---------- */

.fx-sor__accordion {
	display: flex;
	flex-direction: column;
}

.fx-sor__item {
	border-top: 1px solid var(--fx-border);
}

.fx-sor__item:last-child {
	border-bottom: 1px solid var(--fx-border);
}

.fx-sor__summary {
	display: grid;
	grid-template-columns: 36px 1fr auto;
	align-items: center;
	gap: 16px;
	padding: 18px 4px;
	cursor: pointer;
	list-style: none;
	transition: color 0.15s ease;
}

.fx-sor__summary::-webkit-details-marker { display: none; }
.fx-sor__summary::marker                 { display: none; content: ''; }

.fx-sor .fx-sor__summary:hover .fx-sor__item-title { color: var(--fx-blue); }

.fx-sor__summary:focus-visible {
	outline: 2px solid var(--fx-blue);
	outline-offset: 2px;
	border-radius: var(--fx-radius-sm);
}

.fx-sor__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	flex-shrink: 0;
}

.fx-sor__icon img {
	width: 20px;
	height: 20px;
	display: block;
}

.fx-sor__icon--yellow { background: var(--fx-yellow); }
.fx-sor__icon--sky    { background: var(--fx-sky); }
.fx-sor__icon--pink   { background: var(--fx-pink); }

/* Matcher .fx-int .fx-int__item-title (18px + højere specificitet). */
.fx-sor .fx-sor__item-title {
	margin: 0;
	font-family: var(--fx-font-heading);
	font-size: 18px;
	font-weight: 600;
	color: var(--fx-text);
	line-height: 1.3;
	transition: color 0.15s ease;
}

.fx-sor__chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: var(--fx-text-muted);
	transition: transform 300ms ease-in-out, color 0.15s ease;
}

.fx-sor__item[open] .fx-sor__chevron {
	transform: rotate(180deg);
	color: var(--fx-blue);
}

/* CSS-only open/close animation via ::details-content + interpolate-size.
   Graceful fallback: ældre browsere snapper bare. */
.fx-sor__item::details-content {
	block-size: 0;
	overflow: clip;
	opacity: 0;
	transition:
		block-size 300ms ease-in-out,
		opacity 200ms ease-in-out,
		content-visibility 300ms;
	transition-behavior: allow-discrete;
}

.fx-sor__item[open]::details-content {
	block-size: auto;
	opacity: 1;
}

.fx-sor__panel {
	box-sizing: border-box;
	padding: 0 4px 18px 56px;
}

.fx-sor__desc {
	font-size: 16px;
	line-height: 1.6;
	color: var(--fx-text-body);
	margin: 0;
}

/* ---------- Media (right) ---------- */

.fx-sor__media {
	display: flex;
	align-items: center;
	justify-content: center;
}

.fx-sor__illustration {
	display: block;
	width: 100%;
	height: auto;
	max-width: 520px;
}

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

@media (max-width: 960px) {
	.fx-sor__body {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
 * INTEGRATIONS ("Simple integrations")
 *
 * Venstre: mørk rundet container med bil + tablet mockup
 * Højre:   H2 + intro + accordion (3 items)
 * ============================================================ */

.fx-int {
	padding: var(--fx-section-py) var(--fx-gutter);
	background: var(--fx-bg);
	display: grid;
	justify-items: center;
}

.fx-int__container {
	box-sizing: border-box;
	width: min(100%, var(--fx-max-content));
	margin: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--fx-col-gap);
	align-items: center;
}

/* ---------- Showcase (left) ---------- */

.fx-int__showcase {
	position: relative;
	background: #2d2f31;
	border-radius: 24px;
	aspect-ratio: 5 / 6;
	width: 100%;
	max-width: none;
	min-width: 0;
	justify-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px;
	overflow: hidden;
}

.fx-int__showcase-image {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	object-fit: contain;
}

/* ---------- Content (right) ---------- */

.fx-int__content {
	max-width: 520px;
}

.fx-int__title {
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 14px;
}

.fx-int__intro {
	font-size: var(--fx-text-base);
	line-height: 1.6;
	color: var(--fx-text-body);
	margin: 0 0 clamp(24px, 3vw, 36px);
	max-width: 460px;
}

/* ---------- Accordion ---------- */

.fx-int__accordion {
	display: flex;
	flex-direction: column;
}

.fx-int__item {
	border-top: 1px solid var(--fx-border);
}

.fx-int__item:last-child {
	border-bottom: 1px solid var(--fx-border);
}

.fx-int__summary {
	display: grid;
	grid-template-columns: 36px 1fr auto;
	align-items: center;
	gap: 16px;
	padding: 18px 4px;
	cursor: pointer;
	list-style: none;
	transition: color 0.15s ease;
}

.fx-int__summary::-webkit-details-marker { display: none; }
.fx-int__summary::marker                   { display: none; content: ''; }

.fx-int .fx-int__summary:hover .fx-int__item-title { color: var(--fx-blue); }

.fx-int__summary:focus-visible {
	outline: 2px solid var(--fx-blue);
	outline-offset: 2px;
	border-radius: var(--fx-radius-sm);
}

.fx-int__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	flex-shrink: 0;
}

.fx-int__icon img {
	width: 20px;
	height: 20px;
	display: block;
}

.fx-int__icon--yellow { background: var(--fx-yellow); }
.fx-int__icon--sky    { background: var(--fx-sky); }
.fx-int__icon--pink   { background: var(--fx-pink); }

/* Dobbel selector (.fx-int .fx-int__…) — højere specificitet end én klasse,
 * typisk nok til at slå globale/Elementor-heading-styles uden !important. */
.fx-int .fx-int__item-title {
	margin: 0;
	font-family: var(--fx-font-heading);
	font-size: 18px;
	font-weight: 600;
	color: var(--fx-text);
	line-height: 1.3;
	transition: color 0.15s ease;
}

.fx-int__chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: var(--fx-text-muted);
	transition: transform 300ms ease-in-out, color 0.15s ease;
}

.fx-int__item[open] .fx-int__chevron {
	transform: rotate(180deg);
	color: var(--fx-blue);
}

.fx-int__item::details-content {
	block-size: 0;
	overflow: clip;
	opacity: 0;
	transition:
		block-size 300ms ease-in-out,
		opacity 200ms ease-in-out,
		content-visibility 300ms;
	transition-behavior: allow-discrete;
}

.fx-int__item[open]::details-content {
	block-size: auto;
	opacity: 1;
}

.fx-int__panel {
	box-sizing: border-box;
	padding: 0 4px 18px 56px;
}

@media (prefers-reduced-motion: reduce) {
	.fx-int__chevron,
	.fx-int__item::details-content,
	.fx-sor__chevron,
	.fx-sor__item::details-content {
		transition: none;
	}
}

.fx-int__desc {
	font-size: 15px;
	line-height: 1.65;
	color: var(--fx-text-body);
	margin: 0;
}

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

/* Tablet: behold 2 kolonner — gap kommer fra --fx-col-gap-token. */
@media (max-width: 960px) and (min-width: 768px) {
	.fx-int__showcase {
		aspect-ratio: 4 / 5;
	}
	.fx-int__content {
		max-width: 100%;
	}
}

/* Mobil: stack — content først, showcase i bunden. Gap fra --fx-col-gap. */
@media (max-width: 767px) {
	.fx-int__container {
		grid-template-columns: 1fr;
	}
	.fx-int__content {
		order: 1;
		max-width: 100%;
	}
	.fx-int__showcase {
		order: 2;
		width: 100%;
		max-width: none;
		margin: 0;
		aspect-ratio: 4 / 3;
	}
	.fx-int__intro {
		max-width: 100%;
	}
}

@media (max-width: 560px) {
	.fx-int__showcase {
		padding: 20px;
		border-radius: 24px;
	}
	.fx-int__panel {
		padding-left: 0;
	}
}

/* ============================================================
 * TESTIMONIALS
 *
 * Mørk sektion (#2d2f31) med hvidt featured citat + portræt,
 * efterfulgt af [review_carousel] shortcode (hvide kort).
 * ============================================================ */

.fx-testimonials {
	padding: var(--fx-section-py) var(--fx-gutter);
	background: #2d2f31;
	/* Bevidst: sætter IKKE color: #fff globalt her — det ville arve ned i de hvide kort. 
	   Hvide tekstfarver er sat eksplicit på de enkelte elementer i stedet. */
}

.fx-testimonials__container {
	max-width: var(--fx-max-content);
	margin: 0 auto;
}

/* ---------- Wrapper-header (fallback heading for delt operations-template) ----------
   .fx-testimonials__header bruges KUN af category-operations.php (rail / yard /
   haulaway / FVL) hvor der ikke er en featured quote. Heading vises som fallback
   når term-ACF `customer_reviews_heading` er tom — så reviews-sektionen aldrig
   står uden H2. På frontpage er headeren ikke til stede (featured quote'en
   leverer h2 i stedet). */
.fx-testimonials__header {
	text-align: center;
	margin: 0 0 clamp(32px, 4vw, 48px);
}

.fx-testimonials__title {
	color: #fff;
	margin: 0;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/* ---------- Featured quote (Christina Carpens) ---------- */

.fx-featured-quote {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
	margin: 0 0 clamp(56px, 7vw, 88px);
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.fx-featured-quote__body {
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 3vw, 40px);
}

.fx-featured-quote__text { margin: 0; padding: 0; border: 0; }

/* Bemærk: scoped under .fx-testimonials for at beate .fx-main--frontpage h2 { color: var(--fx-text) } */
.fx-testimonials .fx-featured-quote__title {
	color: #fff;
	font-family: var(--fx-font-heading);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0;
}

@media (max-width: 1024px) {
	.fx-testimonials .fx-featured-quote__title { font-size: 28px; }
}

@media (max-width: 767px) {
	.fx-testimonials .fx-featured-quote__title { font-size: 24px; }
}

.fx-featured-quote__attribution {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2.5vw, 20px);
	min-width: 0;
}

.fx-featured-quote__mark {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 56px;
	height: 56px;
	background: #509bb4;
	color: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.fx-featured-quote__mark svg {
	display: block;
	width: 26px;
	height: 26px;
	opacity: 0.98;
}

.fx-featured-quote__meta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	min-width: 0;
	flex: 1;
	line-height: 1.35;
}

.fx-featured-quote__name {
	color: #fff;
	font-family: var(--fx-font-heading);
	font-size: clamp(17px, 1.35vw, 20px);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

.fx-featured-quote__role {
	color: rgba(255, 255, 255, 0.62);
	font-size: clamp(13px, 1.1vw, 15px);
	font-weight: 500;
	line-height: 1.45;
	max-width: 36em;
}

.fx-featured-quote__media {
	display: flex;
	justify-content: flex-end;
}

.fx-featured-quote__portrait {
	display: block;
	width: 100%;
	max-width: 360px;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center top;
	border-radius: var(--fx-radius);
}

@media (max-width: 780px) {
	.fx-featured-quote {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.fx-featured-quote__media {
		justify-content: center;
		order: -1;
	}
	.fx-featured-quote__portrait {
		max-width: 260px;
	}

	.fx-featured-quote__attribution {
		align-items: flex-start;
	}

	.fx-featured-quote__meta {
		padding-top: 2px;
	}
}

/* ---------- Carousel overrides (dark section) ---------- */

.fx-testimonials .review-section { padding-top: 0; padding-bottom: 0; }

/* Reset text-farve inden for de hvide kort (ellers arver de #fff fra section og bliver usynlige) */
.fx-testimonials .review-section .review-card {
	color: var(--fx-text-body);
}

.fx-testimonials .review-section .review-card .review-text {
	color: var(--fx-text-body);
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}

.fx-testimonials .review-section .review-card .name-text {
	color: var(--fx-text);
	font-weight: 600;
	font-size: 15px;
	display: block;
}

.fx-testimonials .review-section .review-card .job-text {
	color: var(--fx-text-muted);
	font-size: 13px;
	margin: 2px 0 0;
}

.fx-testimonials .review-section .carousel-header h2,
.fx-testimonials .review-section .carousel-header > h2 {
	color: #fff;
}

/* Inactive/disabled nav button = dark grey circle on dark bg */
.fx-testimonials .review-section .carousel-nav button {
	background: #4a4c4f;
	border-radius: 50%;
	border: 0;
}

.fx-testimonials .review-section .carousel-nav button .carousel-nav__icon {
	color: #fff;
}

.fx-testimonials .review-section .carousel-nav button[disabled],
.fx-testimonials .review-section .carousel-nav button[aria-disabled="true"] {
	background: #4a4c4f;
	opacity: 1;
}

.fx-testimonials .review-section .carousel-nav button[disabled] .carousel-nav__icon,
.fx-testimonials .review-section .carousel-nav button[aria-disabled="true"] .carousel-nav__icon {
	color: rgba(255, 255, 255, 0.45);
}

/* Active nav button = white circle with dark icon */
.fx-testimonials .review-section .carousel-nav button:not([disabled]):not([aria-disabled="true"]) {
	background: #fff;
}

.fx-testimonials .review-section .carousel-nav button:not([disabled]):not([aria-disabled="true"]) .carousel-nav__icon {
	color: #2d2f31;
}

.fx-testimonials .review-section .carousel-nav button:hover:not([disabled]):not([aria-disabled="true"]) {
	background: rgba(255, 255, 255, 0.9);
}

/* CTA section (.fx-cta) styles er flyttet til css/cta.css — genbrugt på landing pages. */

/* ============================================================
 * SHORTCODE SECTION WRAPPERS
 * ============================================================ */

.fx-industries,
.fx-big-numbers-wrap,
.fx-faq-wrap {
	padding: var(--fx-section-py) var(--fx-gutter);
}

.fx-industries       { background: var(--fx-bg); }
.fx-big-numbers-wrap { background: var(--fx-bg); }
.fx-faq-wrap         { background: var(--fx-bg-soft); }

/* Sørg for at shortcodes holder deres egen max-width men aldrig stækker sig videre end main container */
.fx-industries > *,
.fx-big-numbers-wrap > * {
	max-width: var(--fx-max-content);
	margin-left: auto;
	margin-right: auto;
}

/* ---------- FAQ header + container ---------- */

.fx-faq-wrap__inner {
	max-width: var(--fx-max-content);
	margin: 0 auto;
}

.fx-faq-wrap__header {
	max-width: 640px;
	margin: 0 auto clamp(32px, 4vw, 48px);
	text-align: center;
}

.fx-faq-wrap__title {
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0;
}

.fx-faq-wrap__intro {
	font-size: var(--fx-text-base);
	line-height: 1.6;
	color: var(--fx-text-body);
	margin: 14px 0 0;
}

/* Logo carousel styles er flyttet til css/logo-carousel.css — reusable sektion. */

/* Override !important-reglerne i big-numbers.css så sektionen alignes med resten af layoutet (1140px) */
.fx-big-numbers-wrap > .fx-big-numbers {
	max-width: var(--fx-max-content) !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}