/**
 * BilListe Frontend — foundation.css
 *
 * Frontend M2 (§8/§9): et LILLE, neutralt fundament — designtokens +
 * layout-primitiver + header/footer/nav/UI-state-styles. Mobile
 * first: al base-CSS er mobil, brede skærme tilføjes UDELUKKENDE via
 * `min-width`-media queries (aldrig `max-width`-baserede
 * "desktop-first"-overstyringer).
 *
 * **1.7.0 (redesign - markedsklar visuel identitet):** §9's
 * oprindelige, bevidst midlertidige/neutrale palette erstattes nu af
 * en rigtig brandpalette (rød accent + mørk marineblå sekundærfarve),
 * efter eksplicit, godkendt beslutning fra projektejeren (jf.
 * CHANGELOG.md's [1.7.0]-afsnit for den fulde begrundelse/afgrænsning).
 * TOKEN-NAVNENE er UÆNDREDE (kun deres VÆRDIER er opdateret) - hver
 * fil, der allerede genbruger `var(--billiste-color-accent)` osv.
 * (homepage.css, dealer-*.css, search-page.css, heart-button.css m.fl.)
 * re-themes derfor AUTOMATISK, uden selv at skulle ændres - samme
 * "definér én gang, genbrug alle steder"-disciplin denne fil altid har
 * håndhævet.
 */

/* -------------------------------------------------------------------
 * Designtokens
 * ---------------------------------------------------------------- */

:root {
	/* Typografi */
	--billiste-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--billiste-font-size-base: 1rem;
	--billiste-line-height-base: 1.5;

	/* Farver — 1.7.0-redesign: rød/marineblå brandpalette. */
	--billiste-color-text: #1a1a1a;
	--billiste-color-text-muted: #555555;
	--billiste-color-background: #ffffff;
	--billiste-color-surface: #f5f5f5;
	--billiste-color-border: #dddddd;
	--billiste-color-accent: #d81f2e;
	--billiste-color-accent-dark: #b0121f;
	--billiste-color-error: #a3242a;
	--billiste-color-focus: #d81f2e;

	/* **1.7.0:** mørk marineblå sekundærfarve - bruges til footeren og
	 * "premium"-panelerne (fx forhandler-CTA'en), ALDRIG som erstatning
	 * for `--billiste-color-accent` (rød forbliver DEN ene, konsekvente
	 * handlings-/CTA-farve i hele pluginet). */
	--billiste-color-navy: #101c2e;
	--billiste-color-navy-soft: #1b2a42;
	--billiste-color-on-navy: #f4f6fa;
	--billiste-color-on-navy-muted: #aab4c6;

	/* Spacing-skala (rem, base 8px) */
	--billiste-space-1: 0.25rem;
	--billiste-space-2: 0.5rem;
	--billiste-space-3: 1rem;
	--billiste-space-4: 1.5rem;
	--billiste-space-5: 2rem;
	--billiste-space-6: 3rem;

	/* Radius/skygger — **1.7.0:** lidt større radius (mere "markedsklar"
	 * kort-/knap-look), samme tokens/steder genbruges fortsat overalt. */
	--billiste-radius: 0.5rem;
	--billiste-radius-lg: 1rem;
	--billiste-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
	--billiste-shadow-md: 0 8px 24px rgba(16, 28, 46, 0.12);

	/* Container-bredder */
	--billiste-container-width: 100%;
	--billiste-container-max-width: 1200px;
	--billiste-container-padding: var(--billiste-space-3);

	/* Breakpoints (dokumentation - CSS understøtter ikke var() i media queries) */
	--billiste-bp-sm: 640px;
	--billiste-bp-md: 960px;
	--billiste-bp-lg: 1200px;

	/* Overgange */
	--billiste-transition-fast: 150ms ease;

	/* Touch targets (§15: minimum 44x44px) */
	--billiste-touch-target-min: 44px;
}

/* -------------------------------------------------------------------
 * Reset/base — minimal, ikke en fuld normalize
 * ---------------------------------------------------------------- */

.billiste-header,
.billiste-footer,
.billiste-state {
	font-family: var(--billiste-font-family);
	font-size: var(--billiste-font-size-base);
	line-height: var(--billiste-line-height-base);
	color: var(--billiste-color-text);
	box-sizing: border-box;
}

.billiste-header *,
.billiste-footer *,
.billiste-state * {
	box-sizing: inherit;
}

/* -------------------------------------------------------------------
 * Layout-primitiver (§8)
 * ---------------------------------------------------------------- */

.billiste-container {
	/**
	 * **Slutmilepæl/1.6.1-rettelse:** UDEN `border-box` her lægger
	 * `width: 100%` (content-boks-bredden) og `padding-left`/
	 * `-right` sig OVEN I hinanden (content-box er CSS' standard
	 * boks-model) - resultatet er en boks, der reelt altid er
	 * `2 × var(--billiste-container-padding)` BREDERE end sin
	 * forælder, på ethvert viewport hvor `max-width` ikke i forvejen
	 * er den begrænsende faktor (dvs. praktisk talt alle mobil-/
	 * tablet-bredder) - en stille, vandret overflow, der ikke var
	 * synlig i tidligere fuld-sides skærmbilleder (som fanger HELE
	 * det rullende indhold, ikke kun den faktiske viewport), men som
	 * blev opdaget under denne rettelses egen Playwright-baserede
	 * scrollWidth/clientWidth-verifikation. `border-box` retter
	 * boks-modellen til den, der allerede var TILSIGTET ("100% af
	 * forælderens bredde, punktum") - ÆNDRER INTET ved selve
	 * designet/den synlige bredde på desktop (hvor `max-width` er den
	 * begrænsende faktor).
	 */
	box-sizing: border-box;
	width: var(--billiste-container-width);
	max-width: var(--billiste-container-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--billiste-container-padding);
	padding-right: var(--billiste-container-padding);
}

.billiste-section {
	padding-top: var(--billiste-space-5);
	padding-bottom: var(--billiste-space-5);
}

/* Tilgængelighedshjælper: skjuler visuelt, men bevarer for
 * skærmlæsere - bruges af "(kommer snart)"-teksten på
 * placeholder-navigationselementer m.fl. */
.billiste-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Synligt, konsistent fokus-udtryk (§15) - ALDRIG `outline: none`
 * nogetsteds i denne foundation uden en lige så synlig erstatning. */
.billiste-header a:focus-visible,
.billiste-header button:focus-visible,
.billiste-footer a:focus-visible,
.billiste-footer button:focus-visible {
	outline: 2px solid var(--billiste-color-focus);
	outline-offset: 2px;
}

/* Frontend M3: "Spring til indhold"-skip-link (HeaderRenderer's egen
 * PHPDoc uddyber hvorfor) - visuelt skjult (samme teknik som
 * .billiste-visually-hidden ovenfor), men INDTIL fokus, ikke altid -
 * en tastaturbruger, der tabber ind på siden, skal kunne SE og bruge
 * linket. Positioneres derfor synligt, øverst i venstre hjørne, kun
 * når den får fokus. */
.billiste-skip-link {
	position: absolute;
	top: -100%;
	left: var(--billiste-space-2);
	z-index: 100;
	padding: var(--billiste-space-2) var(--billiste-space-3);
	background: var(--billiste-color-background);
	color: var(--billiste-color-text);
	border: 2px solid var(--billiste-color-focus);
	border-radius: var(--billiste-radius);
	text-decoration: none;
}

.billiste-skip-link:focus {
	top: var(--billiste-space-2);
}

/* -------------------------------------------------------------------
 * Header (§5)
 * ---------------------------------------------------------------- */

.billiste-header {
	background: var(--billiste-color-background);
	border-bottom: 1px solid var(--billiste-color-border);
	/* **1.7.0:** en meget let skygge under headeren - samme visuelle
	 * "hæver sig let over indholdet"-signal, moderne markedspladser
	 * bruger, uden at kræve en solid baggrundsfarveændring. */
	box-shadow: 0 1px 0 rgba(16, 28, 46, 0.04);
}

.billiste-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	padding-top: var(--billiste-space-3);
	padding-bottom: var(--billiste-space-3);
	gap: var(--billiste-space-3);
}

.billiste-header__brand {
	display: inline-flex;
	align-items: center;
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--billiste-color-text);
	text-decoration: none;
}

/**
 * Slutmilepæl (logo): fast max-højde, bredden skalerer proportionalt
 * (`height: auto`) - samme værdi på mobil og desktop (headeren er i
 * forvejen `flex-wrap`), ingen separat mobil-brydning nødvendig.
 * `max-width: 100%` er et robusthedsnet mod en meget lille viewport.
 * **1.7.0:** lidt højere maks-højde (mere fremtrædende brand-mærke i
 * det redesignede, mere "markedsklare" header-look).
 */
.billiste-header__logo {
	display: block;
	height: auto;
	max-height: 44px;
	max-width: 100%;
	width: auto;
}

/**
 * **1.7.0:** "Opret annonce"-CTA'en ({@see \BilListeFrontend\Frontend\Layout\HeaderRenderer::renderCta()}).
 * Samme rød accentfarve som resten af pluginets primære handlinger
 * (`.billiste-hero__submit` m.fl.) - ÉN konsekvent CTA-farve, ikke en
 * ny, selvstændig knapfarve.
 */
.billiste-header__cta {
	display: inline-flex;
	align-items: center;
	min-height: var(--billiste-touch-target-min);
	padding: var(--billiste-space-2) var(--billiste-space-4);
	margin-left: auto;
	order: 2;
	font-weight: 700;
	font-size: 0.9375rem;
	color: #ffffff;
	background: var(--billiste-color-accent);
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--billiste-transition-fast);
}

.billiste-header__cta:hover {
	background: var(--billiste-color-accent-dark);
}

@media (min-width: 960px) {
	.billiste-header__cta {
		order: 3;
		margin-left: var(--billiste-space-2);
	}
}

.billiste-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--billiste-touch-target-min);
	min-height: var(--billiste-touch-target-min);
	background: transparent;
	border: 1px solid var(--billiste-color-border);
	border-radius: var(--billiste-radius);
	cursor: pointer;
}

.billiste-header__toggle-icon,
.billiste-header__toggle-icon::before,
.billiste-header__toggle-icon::after {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--billiste-color-text);
}

.billiste-header__toggle-icon {
	position: relative;
}

.billiste-header__toggle-icon::before,
.billiste-header__toggle-icon::after {
	content: "";
	position: absolute;
	left: 0;
}

.billiste-header__toggle-icon::before {
	top: -6px;
}

.billiste-header__toggle-icon::after {
	top: 6px;
}

/* Mobil: navigationen er skjult, indtil togglen åbner den (JS
 * tilføjer/fjerner ".is-open" og opdaterer aria-expanded). Uden
 * JavaScript forbliver navigationen ALTID synlig, jf.
 * HeaderRenderer's egen PHPDoc ("progressiv forbedring") og
 * <noscript>-reglen dér. */
.billiste-header__nav {
	display: none;
	width: 100%;
	order: 3;
}

.billiste-header__nav.is-open {
	display: block;
}

.billiste-header__nav-list {
	list-style: none;
	margin: var(--billiste-space-2) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--billiste-space-1);
}

.billiste-header__nav-link {
	display: flex;
	align-items: center;
	min-height: var(--billiste-touch-target-min);
	padding: var(--billiste-space-2) var(--billiste-space-1);
	color: var(--billiste-color-text);
	font-weight: 600;
	text-decoration: none;
	transition: color var(--billiste-transition-fast);
}

.billiste-header__nav-link:hover {
	color: var(--billiste-color-accent);
}

.billiste-header__nav-link--placeholder {
	color: var(--billiste-color-text-muted);
	cursor: default;
}

.billiste-header__nav-link--placeholder:hover {
	color: var(--billiste-color-text-muted);
}

@media (min-width: 960px) {
	.billiste-header__toggle {
		display: none;
	}

	.billiste-header__nav {
		display: block;
		width: auto;
		order: 2;
	}

	.billiste-header__nav-list {
		flex-direction: row;
		gap: var(--billiste-space-4);
	}
}

/* -------------------------------------------------------------------
 * Footer (§7)
 * ---------------------------------------------------------------- */

/**
 * **1.7.0 (redesign):** footeren er nu den mørke, marineblå
 * `--billiste-color-navy`-flade (jf. `foundation.css`s designtokens) -
 * SAMME tokens som forhandler-CTA-panelet på forsiden genbruger, ÉN
 * konsekvent "mørk premium-flade"-farve på tværs af pluginet, ikke to
 * uafhængige mørke farver.
 */
.billiste-footer {
	background: var(--billiste-color-navy);
	color: var(--billiste-color-on-navy-muted);
	margin-top: var(--billiste-space-6);
}

.billiste-footer__inner {
	padding-top: var(--billiste-space-5);
	padding-bottom: var(--billiste-space-5);
}

.billiste-footer__brand {
	margin-bottom: var(--billiste-space-4);
	padding-bottom: var(--billiste-space-4);
	border-bottom: 1px solid rgba(244, 246, 250, 0.12);
}

.billiste-footer__brand-name {
	margin: 0 0 var(--billiste-space-1);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--billiste-color-on-navy);
}

.billiste-footer__tagline {
	margin: 0;
	max-width: 32em;
	color: var(--billiste-color-on-navy-muted);
}

.billiste-footer__nav-list {
	list-style: none;
	margin: 0 0 var(--billiste-space-3);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--billiste-space-2);
}

.billiste-footer__nav-link {
	color: var(--billiste-color-on-navy-muted);
	text-decoration: none;
	transition: color var(--billiste-transition-fast);
}

.billiste-footer__nav-link:hover {
	color: var(--billiste-color-on-navy);
}

.billiste-footer__nav-link--placeholder {
	color: rgba(170, 180, 198, 0.5);
	cursor: default;
}

.billiste-footer__nav-link--placeholder:hover {
	color: rgba(170, 180, 198, 0.5);
}

.billiste-footer__copyright {
	color: rgba(170, 180, 198, 0.7);
	font-size: 0.875rem;
	margin: 0;
	padding-top: var(--billiste-space-3);
	border-top: 1px solid rgba(244, 246, 250, 0.12);
}

@media (min-width: 640px) {
	.billiste-footer__nav-list {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--billiste-space-4);
	}
}

/* -------------------------------------------------------------------
 * UI-state (§12) — SAMME klassenavne som
 * `Frontend\UiState\UiStateRenderer` (PHP) og `ui-state.js`, så en
 * server-renderet og en klient-indsat tilstand ser identiske ud.
 * ---------------------------------------------------------------- */

.billiste-state {
	padding: var(--billiste-space-4);
	text-align: center;
}

.billiste-state__message {
	margin: 0;
	color: var(--billiste-color-text-muted);
}

/* **Milepæl M18:** ny "success"-modifier - se `account-listings.js`s
 * egen M18-PHPDoc for hvorfor den bevidst bygges lokalt af filen selv
 * (`buildStatusBannerHtml()`) i stedet for en ny metode på det delte,
 * domæneagnostiske `ui-state.js`/`UiStateRenderer` (som eksplicit
 * dokumenterer, siden M2, hvorfor de INGEN "success"-metode har).
 * SAMME `.billiste-state`/`.billiste-state__message`-grundklasser,
 * kun farven adskiller den fra loading/empty (neutral tekstfarve). */
.billiste-state--success .billiste-state__message {
	color: var(--billiste-color-accent);
	font-weight: 600;
}

.billiste-state--error .billiste-state__message {
	color: var(--billiste-color-error);
	font-weight: 600;
}

/* -------------------------------------------------------------------
 * Slutmilepæl (produktionsdrift): tema-uafhængig fuld bredde
 * ---------------------------------------------------------------- */

/**
 * Mange WordPress-temaer — særligt blok-/FSE-temaer med deres egen
 * `theme.json`-`settings.layout.contentSize` (fx Twenty Twenty-Five:
 * 645px) — pakker automatisk sidens indhold ind i EN CENTRERET
 * container med temaets EGEN, ofte langt smallere max-width. Frontends
 * sider styrer allerede selv deres fulde bredde via
 * `.billiste-container` (1200px, se layout-primitiverne ovenfor) -
 * uden denne regel ville et sådant tema-lag i praksis klemme HELE
 * BilListe-designet sammen til temaets egen, smallere bredde (ujævn
 * whitespace, søgeboks/sektioner der ikke længere flugter med
 * headeren/resten af sitet) - IKKE fordi noget er forkert i selve
 * `.billiste-container`/sektionernes egen CSS, men fordi en YDRE,
 * fremmed container allerede har begrænset pladsen, disse elementer
 * overhovedet har at arbejde med. Dette gælder ethvert tema med en
 * tilsvarende "constrained layout"-mekanik, ikke kun Twenty
 * Twenty-Five - derfor løses det HER, i selve pluginet, i stedet for
 * med en tema-specifik wp-admin-indstilling.
 *
 * Løsningen er den velkendte, ikke-hackede "full-bleed break-out"-
 * teknik: hvert af Frontends øverste side-"skal"-elementer (header,
 * footer, og hver sides `<main>`-landmark) gøres lige så bredt som
 * selve viewporten (`100vw`) og trækkes tilbage til at starte ved
 * viewportens venstre kant. `margin-left/right: calc(50% - 50vw)`
 * virker matematisk UANSET bredden på en evt. centreret
 * tema-forælder-container (fordi `50%` her altid regnes af selve
 * ELEMENTETS egen, allerede 100vw-brede boks, ikke af forælderens
 * bredde) - elementet "bryder derfor altid helt ud", uanset hvilket
 * tema eller hvilken contentSize-værdi, det er pakket ind i.
 *
 * **Ændrer INTET ved selve designet:** den faktiske, synlige
 * indholdsbredde bestemmes fortsat 100% af BilListes egen, uændrede
 * `.billiste-container` (max-width 1200px, centreret) LÆNGERE INDE i
 * hvert af disse elementer - denne regel afgør udelukkende, hvilket
 * lag der har "sidste ord" om selve den YDRE bredde, ikke hvordan
 * indholdet indeni ser ud.
 */
.billiste-header,
.billiste-footer,
.billiste-home,
.billiste-search-page,
.billiste-dealers-page,
.billiste-dealer-account-page,
.billiste-dealer-registration-page,
.billiste-account-page,
.billiste-favorites-page,
.billiste-dealer-profile-page {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/**
 * `100vw` kan på nogle browsere/styresystemer være en anelse bredere
 * end den faktisk SYNLIGE viewport, når en lodret scrollbar er til
 * stede (`100vw` inkluderer scrollbarens egen bredde) - uden denne
 * regel kan det i sjældne tilfælde vise sig som en meget svag,
 * vandret overflow/scroll. `overflow-x: hidden` på `html` er den
 * velkendte, sikre afbødning (påvirker ikke normal, lodret scroll,
 * og ingen eksisterende Frontend-side afhænger af vandret scroll).
 */
html {
	overflow-x: hidden;
}