/*
 * danskdansk: sidens egne skærme (/log-ind/, /start/, /konto/, /telefon/).
 *
 * Kun værdier fra stilgrundlaget. De står som variabler i temaets
 * assets/grundlag.css, som hentes før denne fil (handlingen danskdansk_hoved).
 */

* { box-sizing: border-box; }

[hidden] { display: none !important; }

/*
 * Bag siden er blå, så området under telefonens statuslinje er blåt. Siden
 * selv (body) er papirfarvet og mindst lige så høj som skærmen, og den kan
 * ikke trækkes ud over kanten, så den blå baggrund kun ses foroven.
 */
html {
	-webkit-text-size-adjust: 100%;
	background: var(--dd-kobolt);
	overscroll-behavior-y: none;
}

body.dd {
	display: flow-root;
	/* svh: skærmens højde med Safaris værktøjslinjer synlige. 100vh alene er
	   højere end det synlige område på iPhone og giver rulning. */
	min-height: 100vh;
	min-height: 100svh;
	margin: 0;
	background: var(--dd-papir);
	color: var(--dd-blaek);
	font-family: var(--dd-skrift-tekst);
	font-size: var(--dd-str-tekst);
	line-height: var(--dd-linje-tekst);
}

/* Skærmen: én kolonne, som på telefonen. */

.dd-skaerm {
	display: flex;
	flex-direction: column;
	max-width: var(--dd-kolonne);
	min-height: 100vh;
	min-height: 100svh;
	margin: 0 auto;
}

/* Den blå flade øverst på hver skærm: toplinjen og overskriften. */

.dd-hoved {
	padding: max(var(--dd-a4), env(safe-area-inset-top)) var(--dd-kant-skaerm) var(--dd-a5);
	background: var(--dd-kobolt);
	color: var(--dd-hvid);
}

.dd-hoved h1 { margin: 0; }

.dd-hoved .dd-undertekst {
	margin: var(--dd-a2) 0 0;
	color: var(--dd-kobolt-lys);
}

.dd-hoved a,
.dd-hoved a:hover { color: var(--dd-hvid); }

.dd-hoved a:focus-visible { outline-color: var(--dd-hvid); }

.dd-panel {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: max(var(--dd-a6), env(safe-area-inset-top)) var(--dd-kant-skaerm) var(--dd-a5);
	background: var(--dd-kobolt);
	color: var(--dd-hvid);
}

.dd-panel-navn {
	margin: 0;
	font-family: var(--dd-skrift-overskrift);
	font-size: var(--dd-str-logo);
	line-height: 0.86;
	letter-spacing: -0.035em;
}

.dd-panel-navn span { display: block; }

.dd-panel-navn .dd-tynd { opacity: 0.62; }

.dd-indhold {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: var(--dd-a5) var(--dd-kant-skaerm) max(var(--dd-a6), env(safe-area-inset-bottom));
}

.dd-fyld { flex-grow: 1; }

/* Toplinjen: »Tilbage« eller navnet til venstre. */

.dd-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dd-a3);
	min-height: var(--dd-tryk);
	margin-bottom: var(--dd-a4);
}

.dd-logo {
	margin: 0;
	font-family: var(--dd-skrift-overskrift);
	font-size: var(--dd-str-kort);
	letter-spacing: -0.02em;
}

.dd-fed { font-weight: 700; }

.dd-tynd { font-weight: 300; }

.dd-tilbage {
	display: inline-flex;
	align-items: center;
	gap: var(--dd-a1);
	min-height: var(--dd-tryk);
	padding-right: var(--dd-a3);
	font-size: var(--dd-str-lille);
	text-decoration: none;
}

.dd-konto-knap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--dd-tryk);
	height: var(--dd-tryk);
	border: var(--dd-kant-bredde) solid var(--dd-hvid);
	border-radius: 50%;
}

/* Tekst */

h1 {
	margin: 0 0 var(--dd-a2);
	font-family: var(--dd-skrift-overskrift);
	font-weight: 700;
	font-size: var(--dd-str-overskrift);
	line-height: var(--dd-linje-overskrift);
	letter-spacing: -0.02em;
}

.dd-hoved-stor h1 {
	font-size: var(--dd-str-stor);
	line-height: 1;
	letter-spacing: -0.03em;
}

h2 {
	margin: 0 0 var(--dd-a2);
	font-family: var(--dd-skrift-overskrift);
	font-weight: 700;
	font-size: var(--dd-str-kort);
	line-height: var(--dd-linje-overskrift);
	letter-spacing: -0.01em;
}

p { margin: 0 0 var(--dd-a2); }

a { color: var(--dd-blaek); text-underline-offset: 3px; }

a:hover { color: var(--dd-kobolt); }

.dd-daempet { color: var(--dd-daempet); }

.dd-lille {
	color: var(--dd-daempet);
	font-size: var(--dd-str-mindst);
}

.dd-email { overflow-wrap: anywhere; }

.dd-fod {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--dd-a3);
	margin-top: var(--dd-a5);
	color: var(--dd-daempet);
	font-size: var(--dd-str-mindst);
}

.dd-fod .dd-link { font-size: var(--dd-str-mindst); }

.dd-ikon {
	flex-shrink: 0;
	width: var(--dd-ikon);
	height: var(--dd-ikon);
}

/* Fokus: tydelig blå ring for dem, der bruger tastatur. */

a:focus-visible,
button:focus-visible {
	outline: var(--dd-fokus) solid var(--dd-kobolt);
	outline-offset: 2px;
}

/* Formularer */

.dd-formular {
	display: flex;
	flex-direction: column;
	gap: var(--dd-a2);
	margin: var(--dd-a4) 0 0;
}

.dd-formular-taet { margin-top: var(--dd-a3); }

.dd-formular .dd-lille { margin: 0; }

.dd-formular label {
	font-weight: 700;
	font-size: var(--dd-str-lille);
}

.dd-formular input[type="email"],
.dd-formular input[type="text"] {
	width: 100%;
	height: var(--dd-hoejde-knap);
	padding: 0 var(--dd-a4);
	border: var(--dd-kant-bredde) solid var(--dd-kant);
	border-radius: var(--dd-radius-knap);
	background: var(--dd-hvid);
	color: var(--dd-blaek);
	font: inherit;
}

.dd-formular input::placeholder { color: var(--dd-daempet); }

.dd-formular input:focus {
	border-color: var(--dd-kobolt);
	outline: none;
	box-shadow: 0 0 0 var(--dd-fokus) var(--dd-kobolt-lys);
}

.dd-formular #dd-kode {
	height: var(--dd-hoejde-kode);
	border-color: var(--dd-blaek);
	border-radius: var(--dd-radius-kode);
	font-family: var(--dd-skrift-overskrift);
	font-weight: 700;
	font-size: var(--dd-str-overskrift);
	letter-spacing: 0.3em;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.dd-formular #dd-kode:focus { border-color: var(--dd-kobolt); }

/* Knapper: orange er det, man trykker på. */

.dd-knap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--dd-a2);
	width: 100%;
	min-height: var(--dd-hoejde-knap);
	margin-top: var(--dd-a2);
	padding: var(--dd-a2) var(--dd-a4);
	border: 0;
	border-radius: var(--dd-radius-knap);
	background: var(--dd-orange);
	color: var(--dd-blaek);
	font: inherit;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.dd-knap:hover { color: var(--dd-blaek); }

.dd-knap-anden {
	border: var(--dd-kant-bredde) solid var(--dd-blaek);
	background: transparent;
}

.dd-knap-fare {
	background: var(--dd-fare);
	color: var(--dd-hvid);
}

.dd-knap-fare:hover { color: var(--dd-hvid); }

.dd-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	column-gap: var(--dd-a4);
	margin-top: var(--dd-a5);
}

.dd-links form { margin: 0; }

.dd-link {
	display: flex;
	align-items: center;
	min-height: var(--dd-tryk);
	padding: 0;
	border: 0;
	background: none;
	color: var(--dd-blaek);
	font: inherit;
	font-size: var(--dd-str-lille);
	text-align: left;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* Velkomsten og »Prøv uden konto« */

.dd-knapper {
	display: flex;
	flex-direction: column;
	gap: var(--dd-a1);
	margin-top: var(--dd-a4);
}

.dd-bund-tekst {
	margin: var(--dd-a5) 0 0;
	font-weight: 700;
}

/* Beskeder og bokse */

.dd-besked {
	margin: 0 0 var(--dd-a4);
	padding: var(--dd-a3) var(--dd-a4);
	border-radius: var(--dd-radius-knap);
	background: var(--dd-kobolt-lys);
	font-size: var(--dd-str-lille);
	font-weight: 700;
}

.dd-besked-fejl {
	border: var(--dd-kant-bredde) solid var(--dd-fare);
	background: var(--dd-hvid);
	color: var(--dd-fare);
}

.dd-boks {
	display: flex;
	align-items: flex-start;
	gap: var(--dd-a3);
	margin-top: var(--dd-a3);
	padding: var(--dd-a3) var(--dd-a4);
	border-radius: var(--dd-radius-knap);
	background: var(--dd-kobolt-lys);
	font-size: var(--dd-str-lille);
}

.dd-boks p { margin: 0; }

.dd-boks .dd-ikon {
	margin-top: 2px;
	color: var(--dd-kobolt);
}

h1 + .dd-kort { margin-top: var(--dd-a4); }

.dd-kort {
	display: flex;
	flex-direction: column;
	gap: var(--dd-a1);
	padding: var(--dd-a4);
	border-radius: var(--dd-radius-kort);
	background: var(--dd-hvid);
}

/* Startskærmen: materialerne */

.dd-materialer {
	display: flex;
	flex-direction: column;
	gap: var(--dd-a3);
	margin: var(--dd-a5) 0 0;
	padding: 0;
	list-style: none;
}

.dd-materiale {
	display: flex;
	align-items: center;
	gap: var(--dd-a4);
	padding: var(--dd-a4);
	border-radius: var(--dd-radius-kort);
	background: var(--dd-hvid);
	color: var(--dd-blaek);
	text-decoration: none;
}

a.dd-materiale:hover { color: var(--dd-blaek); }

.dd-materiale-ikon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--dd-a7);
	height: var(--dd-a7);
	border-radius: var(--dd-radius-knap);
	background: var(--dd-kobolt-lys);
	color: var(--dd-kobolt);
}

.dd-materiale-ikon .dd-ikon {
	width: var(--dd-ikon-stor);
	height: var(--dd-ikon-stor);
}

.dd-materiale-ord {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.dd-materiale-navn {
	font-family: var(--dd-skrift-overskrift);
	font-weight: 700;
	font-size: var(--dd-str-kort);
	line-height: var(--dd-linje-overskrift);
	letter-spacing: -0.01em;
}

.dd-materiale-tekst {
	color: var(--dd-daempet);
	font-size: var(--dd-str-lille);
}

.dd-materiale > .dd-ikon { color: var(--dd-daempet); }

.dd-snart {
	border: var(--dd-kant-bredde) dashed var(--dd-kant);
	background: transparent;
}

.dd-snart .dd-materiale-ikon {
	background: var(--dd-graa);
	color: var(--dd-daempet);
}

.dd-snart .dd-materiale-navn { color: var(--dd-daempet); }

.dd-telefon-link {
	display: flex;
	align-items: center;
	gap: var(--dd-a3);
	min-height: var(--dd-hoejde-knap);
	margin-top: var(--dd-a5);
	padding: var(--dd-a3) var(--dd-a4);
	border-radius: var(--dd-radius-knap);
	background: var(--dd-graa);
	font-size: var(--dd-str-lille);
	text-decoration: none;
}

/* Når danskdansk allerede er åbnet fra startskærmen, er vejledningen overflødig. */
@media (display-mode: standalone) {
	.dd-telefon-link { display: none; }
}

/* Vejledningen til telefonen */

.dd-trin { margin-top: var(--dd-a4); }

.dd-trin .dd-knap { margin: var(--dd-a2) 0 var(--dd-a4); }

.dd-trin .dd-knap .dd-ikon { vertical-align: 0; }

.dd-trin ol {
	margin: 0;
	padding-left: var(--dd-a5);
}

.dd-trin li + li { margin-top: var(--dd-a2); }

.dd-trin .dd-ikon {
	vertical-align: -3px;
}

/* Min konto */

.dd-slet {
	display: inline-flex;
	align-items: center;
	gap: var(--dd-a2);
	min-height: var(--dd-tryk);
	color: var(--dd-fare);
	font-size: var(--dd-str-mindst);
}

.dd-fod .dd-slet + .dd-link { margin-left: auto; }

/* Om danskdansk */

.dd-om + .dd-om { margin-top: var(--dd-a3); }

.dd-om h3 {
	margin: var(--dd-a4) 0 var(--dd-a1);
	font-size: var(--dd-str-tekst);
}

.dd-om p,
.dd-om ul { margin: 0 0 var(--dd-a2); }

.dd-om ul { padding-left: var(--dd-a5); }

.dd-om > :last-child { margin-bottom: 0; }

.dd-om .dd-link { align-self: flex-start; }

.dd-om ul li + li { margin-top: var(--dd-a1); }

.dd-slet:hover { color: var(--dd-fare); }

/* Skjult felt mod robotter */

.dd-skjult {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* På en computer: samme kolonne, midt på skærmen. */

@media (min-width: 600px) {
	.dd-skaerm {
		min-height: 0;
		margin: var(--dd-a7) auto;
		overflow: hidden;
		border-radius: var(--dd-radius-kort);
	}

	.dd-panel { padding-top: var(--dd-a6); }

	.dd-hoved { padding-top: var(--dd-a4); }

	.dd-indhold { padding-bottom: var(--dd-a6); }
}