/*
 * Torunn Tøllefsen – stylesheet.
 *
 * Colors, fonts, sizes and spacing are presets in theme.json and are changed under
 * Utseende → Redigering → Stiler. Layout pieces the WordPress blocks cannot do are
 * custom blocks in the Torunn Tøllefsen plugin, each with its own CSS. This file holds
 * the type scale steps, base element styles and the few block styles of the theme.
 *
 * Breakpoints: 640px, 768px, 1024px, 1280px.
 */

/* ---------- Shared values ----------
 * Font sizes and spacing are fluid presets in theme.json: they grow smoothly from
 * 375px to 1280px wide instead of jumping at breakpoints. Breakpoints are only used
 * where the layout itself changes, such as one column becoming twelve.
 */

:root {
	--tt-innrykk: var(--wp--preset--spacing--innrykk);
	--tt-maks: 88rem;
	--tt-overgang: 150ms ease;
}

/* ---------- Base ---------- */

*,
::before,
::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;

	@media (prefers-reduced-motion: reduce) {
		scroll-behavior: auto;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Like Tailwind's reset in the Astro site: no default margins, so the blocks' own spacing decides. */
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

/* Paragraph blocks are 18px by default. Text inside the custom blocks sets its own size. */
.wp-block-paragraph {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.625;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

::selection {
	background: var(--wp--preset--color--rust);
	color: var(--wp--preset--color--hvit);
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--rust);
	outline-offset: 4px;
}

a {
	text-decoration-thickness: 1px;
	text-decoration-color: var(--wp--preset--color--stein);
	text-underline-offset: 0.22em;
	transition: color var(--tt-overgang), text-decoration-color var(--tt-overgang);

	&:hover {
		text-decoration-color: var(--wp--preset--color--rust);
	}
}

/* Header, main and footer sit directly against each other. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Headings in dark areas are white, links there are white with a faint underline. */
.has-kveld-background-color {
	h1, h2, h3, h4 {
		color: var(--wp--preset--color--hvit);
	}

	a {
		text-decoration-color: rgb(255 255 255 / 0.35);

		&:hover {
			text-decoration-color: var(--wp--preset--color--hvit);
		}
	}

	:focus-visible {
		outline-color: var(--wp--preset--color--hvit);
	}

	.is-style-etikett {
		color: inherit;
	}
}

.wp-block-image figcaption {
	margin: 0.75rem 0 0;
	padding-top: 0.5rem;
	border-top: 1px solid var(--wp--preset--color--svart);
	text-align: left;
}

.wp-block-image img {
	background: var(--wp--preset--color--stein-lys);
}

.wp-block-image img[src$=".svg"],
.wp-block-image img[src$=".png"] {
	background: none;
}

/* ---------- Buttons ---------- */

.wp-block-button__link {
	text-align: center;
	transition: color var(--tt-overgang), background-color var(--tt-overgang), border-color var(--tt-overgang);
}

.wp-block-button.is-style-tekstlenke .wp-block-button__link {
	text-decoration-color: var(--wp--preset--color--stein);
	text-underline-offset: 4px;
	white-space: nowrap;
}


/* ---------- Project page ---------- */

.wp-block-post-title {
	margin: 0;
}

/* ---------- «Lyset slås på»: the photo goes from dusk to lit ---------- */

.wp-block-cover.is-style-lys-pa .wp-block-cover__image-background {
	animation: tt-lys-pa 2.6s cubic-bezier(0.3, 0.1, 0.2, 1) 0.2s both;

	@media (prefers-reduced-motion: reduce) {
		animation: none;
	}
}

@keyframes tt-lys-pa {
	0% {
		filter: brightness(0.12) saturate(0.4);
	}

	35% {
		filter: brightness(0.3) saturate(0.6);
	}

	100% {
		filter: brightness(1) saturate(1);
	}
}