/*
 * Dagvelgeren.
 *
 * Ikke en blokk-stil, av samme grunn som `kort.css` ikke er det: markupen er `ft_day_picker()` i
 * `inc/reader-state.php`, og den kalles av heroen i dag og kan kalles av et kort i morgen. Lagt her og
 * ikke i den første blokka som tilfeldigvis tegner den, siden den ikke er den siste.
 *
 * ADR-0003: bare tokens, ingen media queries. Velgeren har ingen strukturell bryter — den er én
 * kolonne i hver bredde, fordi ni dagnavn under hverandre er lista, ikke et rutenett.
 */

.ft-piller__velgerfelt {
	/* Velgeren legger seg under pilla, og trenger noe å være absolutt i forhold til. */
	position: relative;
	display: inline-flex;
}

.ft-dagvelger {
	position: absolute;
	top: calc(100% + var(--wp--preset--spacing--xxs));
	left: 50%;
	transform: translateX(-50%);
	z-index: var(--wp--custom--lag--panel);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xxs);

	/*
	 * px: en fast bredde og ikke `min-content`. Dagnavnene er ni ulike lengder, og en velger som
	 * skifter bredde etter hvilken dag som er markert, flytter seg under fingeren.
	 *
	 * 240 og ikke 220: merket under dagsnavnet er en oppskriftstittel, og 220 ga 186px innhold å
	 * lese den på.
	 */
	min-width: 240px;

	padding: var(--wp--preset--spacing--xs);
	text-align: start;
	background: var(--wp--preset--color--hvit);
	border: var(--wp--custom--linje);
	border-radius: var(--wp--custom--radius--kant);
	box-shadow: var(--wp--custom--skygge--heving);
}

/*
 * Målt på den kjørende siden 2026-08-26: velgeren sto åpen på hver oppskriftsside for hver leser,
 * 220×388px, og lå i tabulatorrekka — stikk i strid med `ft_day_picker()`s egen begrunnelse for at
 * åpningen er `hidden` som fjernes. Samme feil som vognmerket i `cart-button` hadde.
 *
 * `[hidden]` bor i **nettleserens egen** stilark, og opphav slår spesifisitet: en `display` fra
 * forfatteren vinner over `[hidden] { display: none }` uansett hvor lett selektoren veier. Regelen
 * over er derfor nok til å gjøre attributtet virkningsløst, og den som skrev markupen ser ingenting
 * — verken en feil, en advarsel eller en linje i en logg.
 */
.ft-dagvelger[hidden] {
	display: none;
}

.ft-dagvelger__tittel {
	margin: 0;
	font-family: var(--wp--preset--font-family--detalj);
	font-size: var(--wp--preset--font-size--kicker);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--tekst-svak);
}

.ft-dagvelger__dager {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ft-dagvelger__dag,
.ft-dagvelger__fjern {
	width: 100%;
	padding: 0.5em 0.6em;
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	line-height: 1.2;
	text-align: start;
	color: var(--wp--preset--color--tekst);
	background: none;
	border: 0;
	border-radius: var(--wp--custom--radius--kant);
	cursor: pointer;
	transition: background var(--wp--custom--overgang--rask) ease;
}

/*
 * «Ta ut av ukemenyen» sto derfor også framme på en oppskrift som ikke er i uka i det hele tatt.
 * `malDager()` setter `knapp.hidden`, og det var det eneste som skjedde.
 *
 * `[hidden]` bor i **nettleserens egen** stilark, og opphav slår spesifisitet: en `display` fra
 * forfatteren vinner over `[hidden] { display: none }` uansett hvor lett selektoren veier. Regelen
 * over er derfor nok til å gjøre attributtet virkningsløst, og den som skrev markupen ser ingenting
 * — verken en feil, en advarsel eller en linje i en logg.
 */
.ft-dagvelger__fjern[hidden] {
	display: none;
}

.ft-dagvelger__dag:hover,
.ft-dagvelger__dag:focus-visible,
.ft-dagvelger__fjern:hover,
.ft-dagvelger__fjern:focus-visible {
	background: var(--wp--preset--color--lys-blaa);
}

.ft-dagvelger__dag {
	/*
	 * Rutenett og ikke en rad: merket er en oppskriftstittel, og en tittel ved siden av «Ukens
	 * gjærbakst» har ingen bredde å stå på uansett hvor bred velgeren er. Egen linje under navnet.
	 */
	display: grid;
}

.ft-dagvelger__fjern {
	display: block;
}

/*
 * Hullet malen klones inn i. Tomt på en ledig dag, og en tom linje er ingen linje.
 *
 * `min-width: 0` er det som lar avkortingen under virke: et rutenettbarn har `min-width: auto`, altså
 * bredden på innholdet sitt, så en lang tittel ville dratt kolonnen og dermed knappen utenfor velgeren.
 */
.ft-dagvelger__hull {
	min-width: 0;
}

.ft-dagvelger__hull:empty {
	display: none;
}

/*
 * Hvilken oppskrift som står på dagen, eller «I bruk» når vi ikke vet. Merket alene og ingen dempet
 * knapp: dagen er fortsatt trykkbar, og en grå knapp leses som avslått.
 *
 * Én linje med `ellipsis` og ikke ombrekking: en dagknapp som blir tre linjer høy av en lang tittel
 * er en knapp som flytter de åtte andre. Avkortingen er visuell — hele tittelen står i
 * tilgjengelighetstreet, så en skjermleser leser den ut.
 */
.ft-dagvelger__opptatt {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: var(--wp--preset--font-family--detalj);
	font-size: var(--wp--preset--font-size--kicker);
	color: var(--wp--preset--color--tekst-svak);
}

/* Dagen oppskriften står på. Fylt, fordi de ni *er* et valg der bare én kan være på. */
.ft-dagvelger__dag[aria-pressed="true"] {
	color: var(--wp--preset--color--hvit);
	background: var(--wp--preset--color--roed);
}

.ft-dagvelger__fjern {
	color: var(--wp--preset--color--roed);
	border-top: var(--wp--custom--linje);
	border-radius: 0;
}