/* ══════════════════════════════════════════════════════════════════════════════════════════════
   base.css — the STACK layer of an owned theme (starter kit). Loaded before design.css.

   Nothing here is design. It is what our stack does to a hand-built theme, undone once, so design.css can be
   written as if the page were blank. Every rule is a trap that cost the noers pilot a round trip:
   · ACSS gives a top-level <section> padding-block, padding-inline and a flex-column gap;
   · ACSS makes `section > div` a flex column with --content-gap;
   · ACSS makes every <a> not directly inside p/span display:block (a link inside <b> breaks its line);
   · ACSS gives p/li its --text-line-height (the source design's line-height is inherited instead);
   · the parent theme's <body> is a flex column, so the page box needs min-width:0 or it grows past the viewport;
   · Etch loops render items WITHOUT a wrapper — style the loop's parent as the grid/flex container;
   · MenuOp renders the menu as span.nb-navsub > a + i.nb-navsub__caret + ul.nb-sub (not WordPress .sub-menu)
     and injects .nb-burger + #nb-drawer for phones; it marks the current page a[aria-current="page"] and a
     section's top item .nb-nav-section (etch 0.8.9+);
   · ACSS matches class SUBSTRINGS: a[class*="link--"], [class*="btn--"], padding--, gap--, section--, grid--,
     col-, … — a BEM modifier like `x__fact-link--quiet` gets ACSS's link colour. Keep those substrings out of
     class names (`x__fact-quiet`), don't fight them with specificity.
   Resets sit in :where() or on the theme's own classes — never redefine an ACSS variable, never !important.
   Prefix: ub-   ·   change a rule here only if the stack changed; update _starter too.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── page box ── */
.ub-box{position:relative;width:100%;min-width:0;margin-inline:auto;overflow-x:clip}
.ub-box *,.ub-box *::before,.ub-box *::after{box-sizing:border-box}
.ub-box :where(img){max-width:100%;height:auto;display:block}
/* ACSS rounds every <img> outside <header> (`:where(img):not(header img){border-radius:var(--radius)}`): content photos
   get 5px corners the source never had and a 12px logo (MitID) gets visibly clipped. Rounded images round on purpose. */
.ub-box :where(img),#nb-drawer :where(img){border-radius:0} /* :where — a component's own img class (height:100%, display:none) must win */
.ub-main{display:block}

/* ── ACSS section + container defaults → off ── */
:where(.ub-box) section{padding-block:0;padding-inline:0}
/* a band: its own formatting context (margins stay inside, like a Nuxt overflow:hidden wrapper) — also undoes
   ACSS's section flex-column + gap. Put ub-band (or your band class here) on every top-level section. */
.ub-band{display:flow-root}
/* containers: block, not ACSS's flex column. */
.ub-wrap{display:block;width:100%;margin-inline:auto}

/* ── typography defaults → the design's ── */
:where(.ub-box) :is(p,li){line-height:inherit}
.ub-box :where(h1,h2,h3,h4,h5,h6){margin:0}
.ub-box :where(p,figure){margin:0}
.ub-box :where(a){color:inherit} /* (0,1,0): beats ACSS's `body a` link colour, loses to every design.css class (loaded later) */
/* ACSS sets text-wrap: pretty — it moves line breaks, so a 1:1 heading wraps onto a different number of lines (SHL hero: 3 vs 4) */
.ub-box :where(h1,h2,h3,h4,h5,h6,p,li,blockquote){text-wrap:wrap}

/* ── rich text: links stay inline; unbreakable runs (a '______' line) must not widen phones ── */
.ub-prose{overflow-wrap:anywhere}
.ub-prose a{display:inline}

/* ── WordPress core blocks inside the prose (ops/core.php turns the client's text into them) ──
   Each block's default CSS is undone so a converted page looks like its source; this file is also the block editor's
   stylesheet (functions.php add_editor_style), so the editor shows the same. Where WordPress' rule has to be beaten
   the selector TIES it — `:where(.ub-prose) .wp-block-x el` is (0,1,1) like WordPress' `.wp-block-table td` — and
   wins by order (core block CSS prints before base.css), so a design.css rule of the same weight (`.x-prose td`) still
   wins over these. In design.css: give a block that WAS a paragraph (image, buttons, embed) the prose's <p> margin —
   `.ub-prose :where(.wp-block-image,.wp-block-buttons,.wp-block-embed){margin-block:…}` — and style
   `.wp-block-quote` / `.wp-block-separator` like the prose's blockquote / hr if their selectors are tag-only. */
/* table: none of WordPress' borders (1px cells, 3px thead/tfoot lines), cell padding or width:100%; cells keep words
   and prices whole; a table wider than the column scrolls inside its own box (WordPress' figure) instead of widening
   the page. The table's margin moves to that box — a margin inside an overflow box no longer collapses with the
   paragraph above (Hornsleth) — so give `.ub-prose .wp-block-table` the margin your prose gives `table`. That rule
   is (0,2,1) on purpose: it must beat the prose's own `table` margin. */
:where(.ub-prose) .wp-block-table{overflow-x:auto;margin:0}
.ub-prose .wp-block-table>table{margin:0}
:where(.ub-prose) .wp-block-table table{width:auto;border-collapse:collapse}
:where(.ub-prose) .wp-block-table :is(thead,tfoot){border-width:0}
:where(.ub-prose) .wp-block-table :is(td,th){padding:1px;border-width:0;overflow-wrap:normal}
/* a flex/grid column holding a wide table: without this the table widens the column past the phone (Hornsleth) */
:where(.ub-prose){min-width:0;max-width:100%}
/* image (a <p><img> or a captioned <figure> before): no figure/caption margins of WordPress' own; the img stays
   display:block from the page box rule above (WordPress' vertical-align:bottom then does nothing). */
:where(.ub-prose) .wp-block-image{margin:0}
:where(.ub-prose) .wp-block-image :where(figcaption){margin:0}
/* a captioned image wraps its caption at the IMAGE's width, as the old editor's figure.wp-caption did with its
   style="width:Npx" (= the image's width; the converter drops it): the figure shrinks to the image and the caption
   adds no width of its own (Rosendahls: a 300px image had a 608px-wide caption). */
:where(.ub-prose) .wp-block-image:has(>figcaption){width:fit-content;max-width:100%}
:where(.ub-prose) .wp-block-image>figcaption{contain:inline-size}
/* quote: WordPress' overflow-wrap:break-word and its block <cite> → the prose's own (anywhere, inline) */
:where(.ub-prose) .wp-block-quote{overflow-wrap:inherit}
:where(.ub-prose) .wp-block-quote>cite{display:inline}
/* separator: WordPress draws a 2px currentColor top border; an <hr> here had the page box's border reset (no line
   unless design.css draws one). Same weight as `.x-prose hr` — design.css's own hr rule still wins. */
:where(.ub-prose) hr.wp-block-separator{border-width:0;border-style:solid;border-color:var(--ub-tw-border,#e5e7eb)}
/* buttons: WordPress makes the row a flex container (fine: one button per row, as the <p> was). The site's button
   classes sit on .wp-block-button in the stored block; functions.php moves them onto the <a> on the front end and drops
   WordPress' button classes there. In the EDITOR that filter does not run: the wrapper wears the site's button look,
   so the link inside is made plain text — otherwise WordPress' dark pill sits inside the site's button. (Matched by
   the prefix: a source button class without it — `et_pb_button` — needs its own line here.) */
.wp-block-button[class*="ub-"]>.wp-block-button__link{all:unset}
/* embed: WordPress' caption margins off; its responsive 16:9 wrapper stays (the video fills the column — measured) */
:where(.ub-prose) .wp-block-embed :where(figcaption){margin:0}
/* details: WordPress only adds cursor:pointer to the summary (kept) — style the accordion in design.css as before */

/* address: ops/core.php makes an <address> a paragraph `.nbk-address` (editable text, not HTML) — drawn as the browser drew
   the <address>: italic, no margins, the parent's font size (an <address> never had a <p>'s size). (0,1,1) beats the
   prose's `:where(p)` margins and a design's `.x-box :where(p){font-size:…}`. */
:where(.ub-prose) p.nbk-address{margin-block:0;font-style:italic;font-size:inherit}
/* bare text the renderer printed without a <p> (an anonymous block box) → core.php's paragraph `.nbk-bare`: no margins,
   and the parent's font size — anonymous text never had a <p>'s (Hjertebegravelse: p 18px in a 16px prose, +284px) */
:where(.ub-prose) p.nbk-bare{margin-block:0;font-size:inherit;line-height:inherit} /* a site's own `.x :where(p)` rule (0,2,0) still beats this — restate per site (bs.dk) */

/* ── native blocks (ops/native.php: the Etch layout as core blocks) ──
   A run of inline content beside blocks (a button link, an icon, a span in a flex row) is held by a paragraph
   `.nbk-flow`: display:contents, so the run lays out exactly as it did inside its parent — a flex item stays a flex item,
   and the paragraph adds no box, margin or line of its own. Layout groups carry no CSS of WordPress' own: functions.php
   turns its layout styles off (disable-layout-styles), so a converted group is styled by its classes alone. */
p.nbk-flow{display:contents}
/* …but a sibling rule (`.space-y-5>*+*`, a design.css `>` rule) now gives its margin to the host, which has no box: the
   run's first/last element inherits it (a computed value exists without a box) — Vahl's buttons under a text column
   lost 20px. In the prose the host is a <p> with the prose's margins: zero them first (a space-y rule still wins). */
:where(.ub-prose) p.nbk-flow{margin-block:0}
:where(p.nbk-flow)>:first-child{margin-top:inherit;margin-left:inherit}
:where(p.nbk-flow)>:last-child{margin-bottom:inherit;margin-right:inherit}
/* a <div> that held only inline content is the paragraph itself, `.nbk-div` (its children stay direct children:
   space-y-*, `>` rules). What a <p> gets here that the <div> did not (measured on Vahl): text-wrap / overflow-wrap,
   and inside the prose its margins and line-height. */
p.nbk-div{text-wrap:inherit;overflow-wrap:inherit}
:where(.ub-prose) p.nbk-div{margin-block:0;line-height:inherit}

/* Etch's `a:not(p > a, …){height:auto}` outranks core's .screen-reader-text: the skip link stood 69px tall (Rosen). */
#wp-skip-link:not(:focus){position:absolute;left:-10000px;width:1px;height:0;padding:0;border:0;overflow:hidden}

/* ── the source's Tailwind preflight, where the theme needs it before prose.css (same specificity → prose wins) ── */
.ub-box :where(ul,ol){list-style:none;margin:0;padding:0}
.ub-box :where(blockquote,dl,dd,figure,pre){margin:0}
.ub-box :where(button){font:inherit;color:inherit;background:none;border:0;padding:0}
:where(.ub-box *,.ub-box ::before,.ub-box ::after){border-width:0;border-style:solid;border-color:var(--neutral-ultra-light)}

/* ── Etch's two base layers, kept when Etch went (native plan step 5). Etch printed them inline on every page, in
   cascade layers (so every unlayered rule beats them); the site was built on top of them — e.g. a link that is not
   inside text is display:block, a list with a class has no bullets, `* {margin:0}`. Verbatim except the builder-only
   selector; same layer names and order (defaults, then reset). ── */
@layer etch-defaults {
	body {
		line-height: 1.5;
		-webkit-font-smoothing: antialiased;
		font-family: system-ui;
		display: flex;
		flex-direction: column;
	}
}
@layer etch-reset {
	/* Box sizing rules */
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	/* Remove default margins */
	* {
		margin: 0;
	}

	/* Prevent font size inflation */
	html {
		-moz-text-size-adjust: none;
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
		scrollbar-gutter: stable;
	}

	/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
	ul[role='list'],
	ol[role='list'] {
		list-style: none;
	}

	ul[class]:not(
			.wp-block-list,
			.list,
			[class*='marker']
		),
	ol[class]:not(
			.wp-block-list,
			.list,
			[class*='marker']
		) {
		padding: 0;
		list-style: none;
	}

	/* Set body min height */
	body {
		min-block-size: 100svh;
		display: flex;
		flex-direction: column;

		main {
			flex-grow: 1;
		}
	}

	/* A elements that don't have a class get default styles */
	a:not([class]) {
		text-decoration-skip-ink: auto;
	}

	/* Make media easier to work with */
	img,
	picture,
	video,
	canvas,
	svg:not(.block-editor-list-view-tree svg),
	a:not(
		p > a,
		span > a,
		h1 > a,
		h2 > a,
		h3 > a,
		h4 > a,
		h5 > a,
		h6 > a,
		li > a,
		em > a,
		q > a,
		label > a,
		strong > a,
		figcaption > a,
		.editor-styles-wrapper a
	) {
		max-inline-size: 100%;
		height: auto;
		display: block;
	}

	/* Inherit fonts for inputs and buttons */
	input,
	button,
	textarea,
	select {
		font: inherit;
		font-size: inherit;
	}

	button {
		cursor: pointer;
		background-color: transparent;
		border: none;
		color: currentColor;
	}

	/* Make sure textareas without a rows attribute are not tiny */
	textarea:not([rows]) {
		min-height: 10em;
	}

	/* Avoid text overflows */
	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		overflow-wrap: break-word;
	}

	figure:not(.nbk-img) > img { /* a layout image (ops/images.php) keeps the size it had outside a figure */
		inline-size: 100%;
	}

	img {
		block-size: auto;
	}

	/* Add back select GB styles that are removed by global settings toggle */
	.has-text-align-center {
		text-align: center;
	}

	.has-text-align-left {
		text-align: left;
	}

	.has-text-align-right {
		text-align: right;
	}

	.has-fit-text {
		white-space: nowrap !important;
	}

	#end-resizable-editor-section {
		display: none;
	}

	.aligncenter {
		clear: both;
	}

	.items-justified-left {
		justify-content: flex-start;
	}

	.items-justified-center {
		justify-content: center;
	}

	.items-justified-right {
		justify-content: flex-end;
	}

	.items-justified-space-between {
		justify-content: space-between;
	}

	.screen-reader-text {
		border: 0;
		clip-path: inset(50%);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
		word-wrap: normal !important;
	}

	.screen-reader-text:focus {
		background-color: #ddd;
		clip-path: none;
		color: #444;
		display: block;
		font-size: 1em;
		height: auto;
		left: 5px;
		line-height: normal;
		padding: 15px 23px 14px;
		text-decoration: none;
		top: 5px;
		width: auto;
		z-index: 100000;
	}
}

/* the page frame core wraps a block theme in (the parent's cpt.css held these; this theme does without it) */
body{margin:0}
.wp-site-blocks{max-width:none;padding:0;margin:0}