/*
 * Sprogselskabet – temaets fælles CSS.
 * Farver, skrifter og afstande står i theme.json. Her står kun det,
 * theme.json ikke kan udtrykke: sidens opbygning og footeren.
 * 404-siden har sin egen CSS i blocks/ikke-fundet/style.css.
 */

/* ---------- Skrift ---------- */

/* Browseren giver knapper og felter deres egen bogstavafstand;
   de skal følge teksten omkring dem (stilgrundlaget). */
button,
input,
select,
textarea {
	letter-spacing: inherit;
}

/* ---------- Sidens opbygning ---------- */

/* Footeren står altid nederst, også på korte sider. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.admin-bar .wp-site-blocks {
	min-height: calc(100dvh - 32px);
}

@media (max-width: 782px) {
	.admin-bar .wp-site-blocks {
		min-height: calc(100dvh - 46px);
	}
}

.wp-site-blocks > main,
.wp-site-blocks > .ss-indhold,
.wp-site-blocks > .ss-tom {
	flex: 1 0 auto;
}

/* Ingen mellemrum mellem header, indhold og footer. */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.ss-indhold {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--80);
}

.ss-indhold .wp-block-post-title {
	margin-bottom: var(--wp--preset--spacing--50);
}

/* Overskrifter i teksten: mere luft over end under (stilgrundlagets afstande). */
.wp-block-post-content > :is(h2, h3, h4) {
	margin-top: var(--wp--preset--spacing--70);
}

.wp-block-post-content > h3,
.wp-block-post-content > h4 {
	margin-top: var(--wp--preset--spacing--60);
}

.wp-block-post-content > :is(h2, h3, h4) + * {
	margin-top: var(--wp--preset--spacing--40);
}

.wp-block-post-content > :first-child {
	margin-top: 0;
}

.ss-dato {
	color: var(--wp--preset--color--daempet);
	font-size: var(--wp--preset--font-size--lille);
}

/* Tom side: indholdet styrer alt selv. */
.ss-tom {
	padding: 0;
}

/* ---------- Footer ----------
 * Opbygning som den hidtidige footer (links · mærke · kontakt),
 * skrift, farver og afstande fra stilgrundlaget.
 */

.ss-footer {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--70) 30px;
	background: var(--wp--preset--color--blaek-lys);
	color: var(--wp--preset--color--hvid);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--lille);
	font-weight: 400;
	line-height: 1.5;
}

.ss-footer .ss-footer__kolonner {
	display: grid;
	grid-template-columns: 39% 22% 39%;
	align-items: end;
	gap: 0;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
}

/* WordPress' kolonneblok tvinger align-items: normal; derfor sættes det på hver kolonne. */
.ss-footer .ss-footer__kolonner > .wp-block-column {
	align-self: end;
	min-width: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
}

.ss-footer p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.ss-footer a {
	color: inherit;
	text-decoration: none;
}

.ss-footer a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ss-footer a:focus-visible {
	outline: 2px solid var(--wp--preset--color--hvid);
	outline-offset: 2px;
}

.ss-footer .ss-footer__links {
	text-align: left;
}

.ss-footer .ss-footer__kolonner > .ss-footer__midte {
	align-items: center;
}

.ss-footer .ss-footer__maerke {
	margin: 0;
	line-height: 0;
}

.ss-footer .ss-footer__maerke a {
	display: inline-block;
}

.ss-footer .ss-footer__maerke img {
	display: block;
	width: 64px;
	height: 64px;
}

.ss-footer .ss-footer__kontakt {
	text-align: right;
	color: var(--wp--preset--color--footer-daempet);
}

.ss-footer .ss-footer__kontakt > :first-child {
	color: var(--wp--preset--color--hvid);
}

@media (max-width: 767px) {
	.ss-footer {
		padding: var(--wp--preset--spacing--70) 20px;
	}

	.ss-footer .ss-footer__kolonner {
		grid-template-columns: 100%;
		gap: var(--wp--preset--spacing--50);
		text-align: center;
	}

	.ss-footer .ss-footer__kolonner > .wp-block-column {
		align-self: start;
		align-items: center;
	}

	.ss-footer .ss-footer__links,
	.ss-footer .ss-footer__kontakt {
		text-align: center;
	}
}

/* Brødtekst er 16 px på små skærme (stilgrundlaget). */
@media (max-width: 599px) {
	body {
		font-size: 16px;
	}
}

/* ---------- Tilgængelighed ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
	}
}