/**
 * Blanky Nordic — base.
 *
 * Tokens, links, focus, labels. Colours come from theme.json presets only,
 * so the style variations and the dark toggle recolour everything.
 *
 * Lines have three roles:
 *   divider  navy, separates sections (header rows, card tops, post nav)
 *   frame    pale grey, outlines a small part (tags, page numbers, byline)
 *   line     gold, decoration only (short rules, nav underline). Never text:
 *            gold on white is 2.46:1.
 *
 * @package Blanky_Nordic
 * @since   3.7
 */

:root {
	--nordic-divider: 1px solid var(--wp--preset--color--border);
	--nordic-frame: 1px solid var(--wp--custom--nordic--rule, #e5e7eb);
	--nordic-line: var(--wp--preset--color--primary);
	--nordic-ease: 150ms ease;
}

/*
 * Keep the footer at the bottom on short pages. Core prints every template as
 * body > .wp-site-blocks > header, main, footer; the column fills the window
 * and main takes the spare height. The admin bar pushes <html> down by its
 * height while logged in, so that height is taken off.
 */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--nordic-ease), text-decoration-color var(--nordic-ease);
}

@media (hover: hover) {

	a:hover {
		text-decoration-color: var(--nordic-line);
	}
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--foreground);
	outline-offset: 3px;
}

/* Small uppercase label: categories, eyebrows, section labels. */
.nordic-label {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.nordic-label a {
	color: inherit;
	text-decoration: none;
}

@media (hover: hover) {

	.nordic-label a:hover {
		text-decoration: underline;
		text-decoration-color: var(--nordic-line);
	}
}

/* Core inserts the skip link; only its look is set here. */
.skip-link.screen-reader-text:focus {
	background-color: var(--wp--preset--color--background);
	border: 2px solid var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.1em;
	padding: 1rem 1.5rem;
	text-decoration: none;
	text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}