/* ═══════════════════════════════════════════════════════════════════════════
   INNLOGGINGSDIALOGEN

   Markupen er `inc/innlogging.php`, oppførselen `src/blocks/lib/innlogging.js`.
   Arket er globalt og ikke en blokks: dialogen står i sidefoten på hver
   visning, og portene som åpner den bor i fem ulike blokker.

   **Ingen regel her setter `display` på `.ft-innlogging`.** Dialogen er
   `hidden` i markupen, `[hidden]` bor i UA-stilarket, og kaskadens *opphav*
   avgjøres før spesifisitet — så en hvilken som helst `display` på den
   klassen ville stått dialogen åpen på hver sidevisning, midt i tabulator-
   rekka, uten en feil noe sted. Modulen fjerner attributtet rett før
   `showModal()`. Se `tests/php/unit/test-theme-css.php`.

   Kortet er `lys-blaa`: det er flata hver kontoside alt åpner på, så dialogen
   leser som leserens egen del av nettstedet framfor et generisk slør. Gul er
   dermed ledig til den ene handlingen, som er temaets ene knapp (theme.json).
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * Rammeløs: boksen — grunnen, hjørnene, skyggen — er `.ft-innlogging__kort`s egen, slik at kortet
 * ser likt ut om en nettleser en dag skulle tegne det utenfor en dialog. Bredden står her, fordi den
 * er dialogens plass på skjermen og ikke kortets form.
 *
 * Containeren erklæres her og spørres av kortet: en modal dialog tegnes i nettleserens topplag, så
 * ingen forelder kan svare på hvor bred den ble.
 */
.ft-innlogging {
	container-type: inline-size;
	container-name: ft-innlogging;
	width: min(28rem, calc(100% - 2 * var(--wp--custom--sideinnrykk)));
	padding: 0;
	border: none;
	background: none;
	color: var(--wp--preset--color--tekst);
}

/*
 * Sløret, uskarpt som krem.no sitt: siden bak skal leses som noe leseren kommer tilbake til, ikke
 * som noe som er borte.
 */
.ft-innlogging::backdrop {
	background: rgb(0 0 0 / 45%);
	/* 4px: en optisk uskarphet, ikke et mål på skalaen — nok til at teksten bak slutter å lese seg. */
	backdrop-filter: blur(4px);
}

/*
 * Reserven for nettlesere uten `showModal()`: modulen setter `open`-attributtet i stedet, og uten
 * denne regelen ville dialogen stått i dokumentflyten nederst på `<body>`.
 */
.ft-innlogging[open] {
	position: fixed;
	z-index: var(--wp--custom--lag--modal);
	inset: 0;
	margin: auto;
	height: fit-content;
}

.ft-innlogging__kort {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--l) var(--wp--preset--spacing--m);
	border-radius: var(--wp--custom--radius--pille);
	background: var(--wp--preset--color--lys-blaa);
	box-shadow: var(--wp--custom--skygge--heving);
	text-align: center;
}

.ft-innlogging__merke {
	inline-size: 8.5rem;
	block-size: auto;
}

/* Reserven når temafila mangler: ordmerket som tekst, i samme plass som bildet. */
.ft-innlogging__ordmerke {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--tittel-m);
	font-weight: 700;
}

.ft-innlogging__tittel {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-s);
	font-weight: 700;
	line-height: 1.1;
}

.ft-innlogging__brodtekst {
	margin: var(--wp--preset--spacing--xxs) 0 0;
	max-width: 26rem;
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst);
	line-height: 1.5;
}

/*
 * Pilla. `:root` foran klassen, ikke fordi kaskaden er uklar men fordi den *snur*: kjernens egen
 * knappregel er `:root :where(.wp-element-button, …)`, `:where()` teller null, og en bar klasse står
 * dermed uavgjort mot den — avgjort av lasterekkefølgen, som er motsatt i butikkens PHP-maler.
 */
:root .ft-innlogging__cta {
	inline-size: 100%;
	max-inline-size: 20rem;
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--l);
	border-radius: var(--wp--custom--radius--pille);
	font-size: var(--wp--preset--font-size--brodtekst);
}

/* Registrering er den andre veien og ikke det andre valget: en tekstlenke under knappen. */
.ft-innlogging__ny {
	color: var(--wp--preset--color--tekst);
	font-size: var(--wp--preset--font-size--brodtekst-s);
}

/*
 * «Nei takk» er en tekstlenke og ingen andre knapp: to knapper ved siden av hverandre er to
 * likeverdige valg, og dette er utveien og ikke et alternativ.
 */
.ft-innlogging__nei {
	padding: var(--wp--preset--spacing--xxxs);
	border: 0;
	background: none;
	color: var(--wp--preset--color--tekst-svak);
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	text-decoration: underline;
	cursor: pointer;
}

.ft-innlogging__nei:hover,
.ft-innlogging__nei:focus-visible {
	color: var(--wp--preset--color--tekst);
}

/*
 * Smal visning. Container query og ikke media query (ADR-0003): det som er trangt er *kortet*, og
 * kortet er like trangt i en 400px-visning som det ville vært i en tenkt smal ramme.
 *
 * **Bare luften og merket, aldri tittelen.** `display-s` er alt et flytende token (ADR-0003) og
 * klemmer seg selv fra 2,25rem til 1,75rem; en overstyring her lander på brødtekstens egen størrelse,
 * og da er det ikke lenger en tittel.
 */
@container ft-innlogging (max-width: 22rem) {
	.ft-innlogging__kort {
		padding: var(--wp--preset--spacing--m) var(--wp--preset--spacing--s);
	}

	.ft-innlogging__merke {
		inline-size: 6.5rem;
	}
}

/* ─────────────────────  GJESTENS HJERTE PÅ KORTET  ─────────────────────────
   `kort.css` skjuler hjertet til modulen vet hvem leseren er og avslører det
   for `innlogget`. Dette er gjestens halvdel: hjertet *er* innloggingsporten,
   og et kortrutenett uten hjerter har ingen port i det hele tatt.
   ───────────────────────────────────────────────────────────────────────── */

[data-ft-leser="gjest"] .ft-kort__hjerte {
	display: inline-flex;
}