/*
 * Base: reset, typography, layout primitives, a11y basics.
 * Everything here uses tokens from tokens.css. No raw hex.
 * @font-face declarations live in fonts.css (enqueued first).
 */

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

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Anchor targets (e.g. /boka-tid/#kontakt) land below the sticky header. */
	scroll-padding-block-start: calc(var(--mh-header-height) + var(--mh-space-md));
}

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

body {
	min-height: 100vh;
	background-color: var(--mh-bg);
	color: var(--mh-text);
	font-family: var(--mh-font-body);
	font-size: var(--mh-fs-body);
	font-weight: var(--mh-weight-regular);
	line-height: var(--mh-lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

/* Text links are teal, so terracotta stays with buttons and the hero emphasis.
   Teal has no hover shade; the underline thickens instead. */
a {
	color: var(--mh-teal);
	text-underline-offset: 0.15em;
}

a:hover {
	text-decoration-thickness: 2px;
}

/* Typography ------------------------------------------------------------ */
h1,
h2,
h3,
h4 {
	color: var(--mh-heading);
	font-family: var(--mh-font-heading);
	font-weight: var(--mh-weight-semibold);
	line-height: var(--mh-lh-heading);
	text-wrap: balance;
}

h1 {
	/* Display H1 is set in regular weight; h2 and smaller stay semibold. */
	font-size: var(--mh-fs-h1);
	font-weight: var(--mh-weight-regular);
}
h2 {
	font-size: var(--mh-fs-h2);
}
h3 {
	font-size: var(--mh-fs-h3);
}
h4 {
	font-size: var(--mh-fs-h4);
}

p {
	max-width: var(--mh-measure);
}

/* The one place terracotta may be used as text: a single emphasis word in a
   large display heading, italic, as in the reference. */
.mh-emphasis {
	color: var(--mh-terracotta);
	font-style: italic;
	font-weight: var(--mh-weight-regular);
}

/* Eyebrow label above headings. */
.mh-eyebrow {
	display: inline-block;
	color: var(--mh-leaf);
	font-family: var(--mh-font-body);
	font-size: var(--mh-fs-eyebrow);
	font-weight: var(--mh-weight-semibold);
	letter-spacing: var(--mh-tracking-eyebrow);
	text-transform: uppercase;
	margin-block-end: var(--mh-space-sm);
}

.mh-lead {
	font-size: var(--mh-fs-lead);
	max-width: var(--mh-measure);
}

/* Layout primitives ----------------------------------------------------- */
.mh-container {
	width: 100%;
	max-width: var(--mh-container);
	margin-inline: auto;
	padding-inline: var(--mh-gutter);
}

.mh-container--narrow {
	max-width: var(--mh-container-narrow);
}

.mh-section {
	padding-block: var(--mh-space-3xl);
}

/* Running text from the editor or a textarea: paragraphs and lists spaced by
   one rhythm step, since the reset strips every margin. */
.mh-prose > * + * {
	margin-block-start: var(--mh-space-md);
}

/* A heading in running text starts a new part: well clear of the text above,
   close to its own text below, so it groups with what it introduces. */
.mh-prose > * + h2 {
	margin-block-start: var(--mh-space-2xl);
}

.mh-prose > h2 + * {
	margin-block-start: var(--mh-space-sm);
}

.mh-prose ul,
.mh-prose ol {
	padding-inline-start: var(--mh-space-lg);
}

/* Background bands. Cream is the body default; these opt into the alternates. */
.mh-section--sand {
	background-color: var(--mh-bg-alt);
}
.mh-section--dark {
	background-color: var(--mh-slate);
	color: var(--mh-on-dark);
}
.mh-section--dark h1,
.mh-section--dark h2,
.mh-section--dark h3,
.mh-section--dark h4 {
	color: var(--mh-on-dark);
}

/* Accessibility --------------------------------------------------------- */

/* Skip link: first focusable element, hidden until focused. */
.mh-skip-link {
	position: absolute;
	inset-inline-start: var(--mh-space-md);
	inset-block-start: -100px;
	z-index: 1000;
	background-color: var(--mh-white);
	color: var(--mh-terracotta);
	padding: var(--mh-space-sm) var(--mh-space-md);
	border-radius: var(--mh-radius-sm);
}

@media (prefers-reduced-motion: no-preference) {
	.mh-skip-link {
		transition: inset-block-start var(--mh-transition);
	}
}

.mh-skip-link:focus {
	inset-block-start: var(--mh-space-md);
}

/* Custom focus ring: never remove the outline without a replacement. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--mh-focus-width) solid var(--mh-focus);
	outline-offset: var(--mh-focus-offset);
	border-radius: var(--mh-radius-sm);
}

.mh-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Motion is opt-in per the a11y rules: every transition and animation in
   components.css and sections.css is wrapped in
   @media (prefers-reduced-motion: no-preference), so no global override is
   needed here, and no rule in the theme uses an importance override. */

/* Terracotta band. White on terracotta is 5.5:1, so body text passes AA. */
.mh-section--accent {
	background-color: var(--mh-accent);
	color: var(--mh-on-dark);
}
.mh-section--accent h1,
.mh-section--accent h2,
.mh-section--accent h3,
.mh-section--accent h4 {
	color: var(--mh-on-dark);
}

/* Shared section header: eyebrow, heading, lead. */
.mh-section__header {
	margin-block-end: var(--mh-space-2xl);
}

.mh-section__header--center {
	text-align: center;
}

.mh-section__header--center .mh-lead,
.mh-section__header--center .mh-section__title {
	margin-inline: auto;
}

.mh-section__title {
	margin-block-end: var(--mh-space-md);
}

.mh-section__header .mh-lead {
	max-width: var(--mh-measure);
}