/**
 * Header/footer frame: slots, main menu, search panel and the narrow-screen panel
 * (Q018, B040, B106, B114, B120).
 *
 * Theme-owned classes use the `.ut-th-` prefix. Colours come from the ui-core
 * brand presets; nothing here is a node value.
 */

/* The theme owns the page canvas; ui-core supplies its colour. Keep this
   default at zero specificity so saved Global Styles can still override it. */
:where(body.ut-ui) {
	background-color: var(--ut-canvas);
}

/* Embedded windows stay inside their column (0.36.5): a calendar or map pasted
   with a fixed width (DSK «Lokaler»: Google Calendar, width="1400") otherwise
   pushes the page sideways — 110 px at 1440, about 1000 px on a phone. Kadence
   Theme had the same rule. Only the width is capped and the height attribute is
   kept; embeds that fill their frame already set their own width, and any rule
   of their own wins over this zero-specificity default. */
:where(embed, iframe, object) {
	max-width: 100%;
}

.ut-th-slot {
	min-width: 0;
}

/* The search panel is positioned against the whole header, not the actions group. */
.ut-sticky-chrome-root {
	position: relative;
	background: var(--ut-canvas, transparent);
}

/* The header stays in view while the page scrolls (B026, v3 `.siteheader`; B-FP
   sidemeny-rulling 2026-09-26). Sticky sits on the template-part wrapper, not on
   `.ut-sticky-chrome-root`: the wrapper is exactly as tall as the root, so a sticky
   root would have no room to stick. The wrapper also holds the panel host, so an
   open search panel stays under the header. The WordPress admin bar keeps its place
   above it; below 601px WordPress lets the admin bar scroll away, so the header
   sticks to the very top there. z-index sits above map panes and controls in the
   content (Leaflet uses up to 1000) and far below the admin bar (99999). */
.wp-site-blocks > header:has(> .ut-sticky-chrome-root) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 1001;
}

@media (max-width: 600px) {
	.wp-site-blocks > header:has(> .ut-sticky-chrome-root) {
		top: 0;
	}
}

/* A short window (zoom 150-200 %, a phone on its side) would lose too much of its
   height to a fixed header: below 600px of height the header scrolls with the page
   again, and so does the object menu (see the object-menu geometry below). */
@media (max-height: 599px) {
	.wp-site-blocks > header:has(> .ut-sticky-chrome-root) {
		position: relative;
		top: auto;
	}
}

/* Anchor jumps and keyboard focus stop below the fixed header, not behind it.
   `--ut-th-header-cover` is the theme's own measurement of how much of the window
   the header covers (frame.js), so this works without unitedtech-navigation
   (0.24.1). Navigation's `--ut-sticky-offset` cannot serve here: ui-core gives it
   a default of 0px, so a node without navigation would get no padding at all. */
html {
	scroll-padding-top: var(--ut-th-header-cover, 0px);
}

/* Narrow screens: while the reader scrolls down, the header shrinks to its brand
   row (logo, search, notifications, account); scrolling up brings the whole header
   back (decided 2026-09-26, amends B026 for narrow screens). frame.js sets the class
   and the two shifts. Transforms, not height, so the page below never jumps: the
   wrapper slides up by everything except the brand row, the brand row slides back
   down by the same amount minus what sits above it, and covers the rows behind it. */
@media (max-width: 760px) {
	.wp-site-blocks > header:has(> .ut-sticky-chrome-root) {
		transition: transform 0.2s ease;
	}

	.ut-sticky-chrome-root .ut-th-brandrow {
		transition: transform 0.2s ease;
	}

	html.ut-th-header-compact .wp-site-blocks > header:has(> .ut-sticky-chrome-root) {
		transform: translateY(calc(-1 * var(--ut-th-compact-shift, 0px)));
	}

	html.ut-th-header-compact .ut-sticky-chrome-root .ut-th-brandrow {
		position: relative;
		z-index: 50;
		transform: translateY(var(--ut-th-compact-brand-shift, 0px));
		background: var(--ut-canvas, #ffffff);
		box-shadow: 0 1px 0 var(--ut-border, rgba(0, 0, 0, 0.1));
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-site-blocks > header:has(> .ut-sticky-chrome-root),
	.ut-sticky-chrome-root .ut-th-brandrow {
		transition: none;
	}
}

/* The header rows stack flush; the page's block gap belongs to content, not to
   the frame (the template's rows touch, separated only by their own rules). */
.ut-sticky-chrome-root > * + * {
	margin-block-start: 0;
}

/* Header rows (B139/B140: the mockup owns form, placement and composition).
   Three stacked full-width rows — a dark topline carrying the node's tagline,
   the brand row (identity, place, actions) on the canvas, and the menu row on
   the surface — each with its content constrained to the wide width. */
/* Core's layout CSS makes every constrained group `position: relative`
   (`:where(.wp-block-group.wp-block-group-is-layout-constrained)`), which would
   make a row — not the whole header — the anchor for the search panel below.
   `:where()` has no specificity, so a plain class wins. */
.ut-th-topline,
.ut-th-brandrow,
.ut-th-navrow {
	position: static;
}

/* The header is full width (v3: «Samlet header i full bredde»): each row spans
   the viewport and its own content sits in a 30px gutter, rather than being
   constrained to the wide width like the page content below. */
.ut-th-topline,
.ut-th-brandrow,
.ut-th-navrow {
	padding-inline: 0;
}

.ut-th-topline > .wp-block-group,
.ut-th-brandrow > .wp-block-group,
.ut-th-navrow > .wp-block-group {
	max-width: none;
	padding-inline: 30px;
	align-items: center;
	/* The header is chrome, not prose: the template sets its own 14px base here
	   and steps down to 12px/11px for the menu, the account entry and the
	   tagline. The page's prose size keeps governing everything below. */
	font-size: 14px;
}

.ut-th-topline {
	background: var(--ut-content, #191c1f);
	color: var(--ut-surface, #ffffff);
}

.ut-th-topline > .wp-block-group {
	min-height: 34px;
}

/* A node with no tagline set (B047) gets no empty dark strip. */
.ut-th-topline:not(:has(.wp-block-site-tagline)) {
	display: none;
}

.ut-th-topline .wp-block-site-tagline {
	margin: 0;
	font-size: 11px;
	opacity: 0.85;
}

.ut-th-brandrow {
	background: var(--ut-canvas, transparent);
	border-bottom: 1px solid var(--ut-border, transparent);
	color: var(--ut-content, inherit);
}

.ut-th-brandrow > .wp-block-group {
	min-height: 79px;
	padding-block: 14px;
	gap: 32px;
}

.ut-th-navrow {
	background: var(--ut-surface, transparent);
	border-bottom: 1px solid var(--ut-border, transparent);
	color: var(--ut-content, inherit);
}

.ut-th-navrow > .wp-block-group {
	gap: 16px;
}

/* The actions sit at the far end of the brand row (the template's
   `.tools{margin-left:auto}`), and the node's name never pushes them: like the
   template's `.wordmark` it stays on one line and is cut if it has to be. */
.ut-th-identity {
	flex: 0 1 auto;
	min-width: 0;
	gap: 12px;
}

/* The logo is sized by height (0.20.0), not by WordPress' default 120px width
   (`.is-default-size img`), so a square symbol and a wide wordmark both sit at
   a fitting size. The width follows and never exceeds the room; a wordmark
   shrinks before it pushes the actions. Beside the name, the symbol keeps its
   size and the name gives way instead. */
.ut-th-identity .wp-block-site-logo.ut-th-identity-logo {
	flex: 0 1 auto;
	min-width: 0;
	line-height: 0;
}

.ut-th-identity:has(.ut-th-identity-name) .wp-block-site-logo.ut-th-identity-logo {
	flex-shrink: 0;
}

.ut-th-identity .wp-block-site-logo.ut-th-identity-logo a {
	display: block;
	max-width: 100%;
}

.ut-th-identity .wp-block-site-logo.ut-th-identity-logo img {
	width: auto;
	height: 40px;
	max-width: 100%;
	object-fit: contain;
}

/* The node's name carries the brand where no logo is set, so it is a wordmark
   rather than body text (the template's `.wordmark`), alone or beside the
   node's symbol. */
.ut-th-identity .wp-block-site-title {
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 26px;
	font-weight: 780;
	letter-spacing: -1px;
	line-height: 1;
}

/* Name size steps (0.20.0) for long names: a node picks one of the theme's
   fixed steps (B128 keeps the typographic roles shared). The class sits on
   <body> on the frontend and on the canvas root in the Site Editor. */
.ut-th-name-size-medium .ut-th-identity .wp-block-site-title {
	font-size: 22px;
	letter-spacing: -0.6px;
}

.ut-th-name-size-small .ut-th-identity .wp-block-site-title {
	font-size: 18px;
	letter-spacing: -0.3px;
}

.ut-th-brandrow .ut-th-actions {
	flex: none;
	margin-left: auto;
	gap: 10px;
}

.ut-th-slot--main-menu,
.ut-th-slot--object-menu {
	flex: 1 1 auto;
}

/* Contain the plugin sidebar's stacking level inside the theme's object row.
   Main-menu dropdowns (50) and search/place panels (60) must remain above it. */
.ut-th-header-row-object {
	position: relative;
	z-index: 40;
}

/* The object-menu row exists only where the object menu applies (B042, B107). */
.ut-th-header-row-object:not(:has(.ut-th-slot)) {
	display: none;
}

.ut-th-menu,
.ut-th-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ut-th-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
}

.ut-th-menu a {
	display: inline-block;
	padding: 0.5rem 0;
	color: inherit;
	text-decoration: none;
}

.ut-th-menu a:hover,
.ut-th-menu a:focus-visible {
	text-decoration: underline;
}

.ut-th-menu .current-menu-item > a {
	font-weight: 600;
}

/* Main menu on wide screens (the mockup's `.globalnav`): flat items, hover in
   the link colour on the sunk surface, and the current page marked with the
   selected colour plus an underline indicator. The same markup inside the
   narrow-screen panel keeps the plain list styling further down. */
@media (min-width: 761px) {
	/* The main menu is inline here, so its toggle button is not needed. */
	.ut-th-panel-toggle:not(.ut-th-panel-toggle--icon) {
		display: none;
	}

	/* Menu and scope text sit on one line (the template's `.navrow`). */
	.ut-th-mainnav {
		display: flex;
		align-items: center;
		gap: 16px;
	}

	.ut-th-mainnav .ut-th-menu {
		gap: 0 2px;
		align-items: center;
	}

	.ut-th-mainnav .ut-th-menu a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 12px 14px;
		font-size: 12px;
		border-bottom: 2px solid transparent;
	}

	.ut-th-mainnav .ut-th-menu a:hover,
	.ut-th-mainnav .ut-th-menu a:focus-visible {
		color: var(--ut-link, inherit);
		background: var(--ut-hover-surface, rgba(0, 0, 0, 0.06));
		text-decoration: none;
	}

	.ut-th-mainnav .ut-th-menu .current-menu-item > a,
	.ut-th-mainnav .ut-th-menu .current-menu-ancestor > a,
	.ut-th-mainnav .ut-th-menu .current-menu-parent > a {
		color: var(--ut-selected, inherit);
		border-bottom-color: var(--ut-selected, currentColor);
		font-weight: 650;
	}
}

/* Footer (B167, 0.31.0; mockup-footer-2026-10-01, «Forslag – mer innhold»): a
   neutral band with three rows — identity and contact beside the menu columns,
   the optional extras row, and the bottom line (copyright, who runs the site,
   languages). Rows rule off from each other; an empty row is not shown. */
.ut-th-footer {
	margin-top: 56px;
	padding-block: 48px 0;
	background: var(--ut-neutral-surface, transparent);
	border-top: 1px solid var(--ut-border, currentColor);
	color: var(--ut-content-muted, inherit);
	font-size: 14px;
	line-height: 1.5;
}

.ut-th-footer > * + * {
	margin-block-start: 0;
}

/* Buttons and a link colour the editor chose (`has-link-color`) keep their own
   colours (0.36.5): before, this rule outranked them, so a default button in the
   extras pattern got dark text on its dark fill. `:where()` keeps the specificity. */
.ut-th-footer a:where(:not(.wp-element-button, .wp-block-button__link, .has-link-color a)) {
	color: var(--ut-content, inherit);
	text-decoration: none;
}

.ut-th-footer a:where(:not(.wp-element-button, .wp-block-button__link, .has-link-color a)):hover,
.ut-th-footer a:where(:not(.wp-element-button, .wp-block-button__link, .has-link-color a)):focus-visible {
	color: var(--ut-link, inherit);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ut-th-footer .ut-th-footer-heading {
	margin: 0 0 12px;
	/* A label, not a content heading: keeps the body face under every expression. */
	font-family: inherit;
	font-size: 12px;
	font-weight: 650;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ut-content-subtle, inherit);
}

/* A heading that is a link keeps the heading's look. */
.ut-th-footer .ut-th-footer-heading a {
	color: inherit;
}

/* Row 1: identity and contact, then the menu columns. */
.ut-th-footmain {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 36px 44px;
	padding-bottom: 40px;
}

.ut-th-footmain:has(> .ut-th-slot--footer-menu) {
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 2fr);
}

.ut-th-footmain:has(.ut-th-footernav--cols-1) {
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
}

.ut-th-footmain:has(.ut-th-footernav--cols-3) {
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 3fr);
}

.ut-th-footmain:has(.ut-th-footernav--cols-4) {
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 4fr);
}

.ut-th-footmain > * {
	margin: 0;
}

.ut-th-footidentity > * {
	margin: 0;
}

.ut-th-footer .ut-th-footidentity .wp-block-site-title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--ut-content, inherit);
}

.ut-th-footer .ut-th-footidentity .wp-block-site-title a {
	color: inherit;
	text-decoration: none;
}

.ut-th-footer .wp-block-site-tagline {
	margin-top: 4px;
	font-size: inherit;
}

.ut-th-contact {
	margin-top: 18px;
	font-style: normal;
}

.ut-th-contact dl {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 6px 16px;
	margin: 0;
}

.ut-th-contact dt {
	padding-top: 1px;
	font-size: 13px;
	color: var(--ut-content-subtle, inherit);
}

.ut-th-contact dd {
	margin: 0;
	color: var(--ut-content, inherit);
	overflow-wrap: anywhere;
}

.ut-th-footer .ut-th-contact a {
	color: var(--ut-link, inherit);
}

.ut-th-social {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.ut-th-footer .ut-th-social a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--ut-border-control, currentColor);
	border-radius: 50%;
	background: var(--ut-surface, transparent);
	color: var(--ut-content, inherit);
	text-decoration: none;
}

.ut-th-footer .ut-th-social a:hover,
.ut-th-footer .ut-th-social a:focus-visible {
	border-color: var(--ut-brand, currentColor);
	color: var(--ut-brand-strong, inherit);
}

.ut-th-social-icon {
	width: 17px;
	height: 17px;
}

.ut-th-footernav {
	display: grid;
	grid-template-columns: repeat(var(--ut-th-footcols, 2), minmax(0, 1fr));
	gap: 32px 44px;
}

.ut-th-footernav--cols-1 { --ut-th-footcols: 1; }
.ut-th-footernav--cols-3 { --ut-th-footcols: 3; }
.ut-th-footernav--cols-4 { --ut-th-footcols: 4; }

.ut-th-footcol-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ut-th-footcol-list a,
.ut-th-footcol-list span {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	overflow-wrap: anywhere;
}

/* Row 2: the extras pattern. Hidden when it shows nothing. */
.ut-th-footextra-row {
	padding-block: 32px;
	border-top: 1px solid var(--ut-border-strong, currentColor);
}

.ut-th-footextra-row:not(:has(.ut-th-slot)) {
	display: none;
}

.ut-th-footextra > :first-child {
	margin-top: 0;
}

.ut-th-footextra > :last-child {
	margin-bottom: 0;
}

/* A text link in the extras pattern (0.36.5): the footer's link colour, and
   underlined, since it usually sits inside a sentence («Telefon … · kart»).
   Buttons and a link colour the editor chose on the block keep their own. */
.ut-th-footer .ut-th-footextra a:not(.wp-element-button, .wp-block-button__link, .has-link-color a) {
	color: var(--ut-content, inherit);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ut-th-footer .ut-th-footextra a:not(.wp-element-button, .wp-block-button__link, .has-link-color a):is(:hover, :focus-visible) {
	color: var(--ut-link, inherit);
}

.ut-th-footextra :where(h2, h3) {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ut-content-subtle, inherit);
}

/* Row 3: copyright and who runs the site, languages at the far end. */
.ut-th-footbottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	padding-block: 18px 26px;
	border-top: 1px solid var(--ut-border-strong, currentColor);
	font-size: 13px;
}

.ut-th-footlegal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 0;
}

.ut-th-footlegal > * {
	margin: 0;
}

/* The slot wrapper is a block; keep the separator on the same line as its text. */
.ut-th-footlegal > .ut-th-slot {
	display: flex;
	align-items: baseline;
}

.ut-th-footlegal .ut-th-slot + .ut-th-slot::before {
	content: "·";
	margin: 0 8px;
	color: var(--ut-border-control, currentColor);
}

.ut-th-copyright {
	margin: 0;
}

.ut-th-footer .ut-th-footbottom a {
	color: var(--ut-link, inherit);
}

/* Footer: the site's published languages (B048/B114/B118). Each version is a
   bordered pill; the current one is marked in the brand colours (`.footlang`). */
.ut-th-language-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ut-th-footer .ut-th-language a,
.ut-th-language.is-current > span {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0.4375rem 0.6875rem;
	border: 1px solid var(--ut-border-control, currentColor);
	border-radius: 0.375rem;
	background: var(--ut-surface, transparent);
	color: inherit;
	text-decoration: none;
}

.ut-th-footer .ut-th-language a:hover,
.ut-th-footer .ut-th-language a:focus-visible {
	background: var(--ut-hover-surface, rgba(0, 0, 0, 0.06));
	text-decoration: none;
}

.ut-th-language.is-current > span {
	border-color: var(--ut-brand, currentColor);
	background: var(--ut-brand-surface, transparent);
	color: var(--ut-brand-strong, inherit);
	font-weight: 650;
}

/* The bottom line carries no heading for the language list. */
.ut-th-footbottom .ut-th-languages .ut-th-footer-heading {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Site expression «Overskrifter: Klassisk» (designuttrykk prototype): WordPress
   declares the display preset on :root, where ui-core's body-level
   `--ut-font-display` does not exist yet, so it is re-pointed here, on the
   element that carries ui-core's class. Headings, the site title and the
   hero/headline/title roles then follow ui-core's serif; without ui-core the
   sans preset is the fallback. */
.ut-ui-headings-serif {
	--wp--preset--font-family--ut-display: var(--ut-font-display, var(--wp--preset--font-family--ut-sans));
}

/* Site expression «Bunnfelt: Mørk» (designuttrykk prototype): the footer band
   in the node's own dark brand colour, the same pair as the «Mørk flate» block
   style (`--ut-brand-strong` / `--ut-on-brand`, contrast-gated in ui-core). Only
   the footer's own parts are recoloured; blocks in the extras pattern keep
   their own styles. No new colour values. */
.ut-th-footer-dark .ut-th-footer {
	--ut-focus-ring-color: var(--ut-on-brand);
	background: var(--ut-brand-strong);
	border-top-color: var(--ut-brand-strong);
	color: color-mix(in srgb, var(--ut-on-brand) 84%, transparent);
}

.ut-th-footer-dark .ut-th-footer a:not(.ut-th-footextra a),
.ut-th-footer-dark .ut-th-footer .ut-th-contact a,
.ut-th-footer-dark .ut-th-footer .ut-th-footbottom a,
.ut-th-footer-dark .ut-th-footer .ut-th-footidentity .wp-block-site-title,
.ut-th-footer-dark .ut-th-contact dd {
	color: var(--ut-on-brand);
}

.ut-th-footer-dark .ut-th-footer a:not(.ut-th-footextra a):is(:hover, :focus-visible) {
	color: var(--ut-on-brand);
}

/* The browser's default focus ring is dark; on the dark band it would vanish. */
.ut-th-footer-dark .ut-th-footer a:not(.ut-th-footextra a):focus-visible {
	outline: 2px solid var(--ut-on-brand);
	outline-offset: 2px;
}

/* Text links in the extras pattern read like the band's other links (0.36.5);
   before, they kept the light footer's dark text (and the link blue on hover)
   on the dark band. Buttons and an editor-chosen link colour are not touched. */
.ut-th-footer-dark .ut-th-footer .ut-th-footextra a:not(.wp-element-button, .wp-block-button__link, .has-link-color a),
.ut-th-footer-dark .ut-th-footer .ut-th-footextra a:not(.wp-element-button, .wp-block-button__link, .has-link-color a):is(:hover, :focus-visible) {
	color: var(--ut-on-brand);
}

.ut-th-footer-dark .ut-th-footer .ut-th-footextra a:not(.wp-element-button, .wp-block-button__link, .has-link-color a):focus-visible {
	outline: 2px solid var(--ut-on-brand);
	outline-offset: 2px;
}

.ut-th-footer-dark .ut-th-footer .ut-th-footer-heading,
.ut-th-footer-dark .ut-th-contact dt,
.ut-th-footer-dark .ut-th-footextra :where(h2, h3) {
	color: color-mix(in srgb, var(--ut-on-brand) 76%, transparent);
}

.ut-th-footer-dark :is(.ut-th-footextra-row, .ut-th-footbottom) {
	border-top-color: color-mix(in srgb, var(--ut-on-brand) 24%, transparent);
}

.ut-th-footer-dark .ut-th-footlegal .ut-th-slot + .ut-th-slot::before {
	color: color-mix(in srgb, var(--ut-on-brand) 55%, transparent);
}

.ut-th-footer-dark .ut-th-footer .ut-th-social a {
	border-color: transparent;
	background: var(--ut-on-brand);
	color: var(--ut-brand-strong);
}

.ut-th-footer-dark .ut-th-footer .ut-th-social a:is(:hover, :focus-visible) {
	border-color: var(--ut-on-brand);
	background: transparent;
	color: var(--ut-on-brand);
}

.ut-th-footer-dark .ut-th-footer .ut-th-language a,
.ut-th-footer-dark .ut-th-language.is-current > span {
	border-color: color-mix(in srgb, var(--ut-on-brand) 45%, transparent);
	background: transparent;
	color: var(--ut-on-brand);
}

.ut-th-footer-dark .ut-th-footer .ut-th-language a:is(:hover, :focus-visible) {
	background: color-mix(in srgb, var(--ut-on-brand) 14%, transparent);
}

.ut-th-footer-dark .ut-th-language.is-current > span {
	border-color: var(--ut-on-brand);
	background: color-mix(in srgb, var(--ut-on-brand) 16%, transparent);
}

/* Footer: who runs this site (B028) and who delivers it (B168). The values are
   node values; only the presentation is the theme's. */
.ut-th-operator,
.ut-th-provider {
	margin: 0;
	font-size: inherit;
	color: inherit;
}

@media (max-width: 1000px) {
	.ut-th-footmain:has(> .ut-th-slot--footer-menu) {
		grid-template-columns: minmax(0, 1fr);
	}

	.ut-th-footernav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ut-th-footernav--cols-1 {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 560px) {
	.ut-th-footer {
		padding-top: 36px;
	}

	.ut-th-footmain {
		gap: 28px 20px;
		padding-bottom: 28px;
	}

	.ut-th-footernav {
		gap: 28px 20px;
	}

	.ut-th-footcol-list a,
	.ut-th-footcol-list span {
		min-height: 44px;
	}

	.ut-th-contact dl {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.ut-th-contact dt:not(:first-child) {
		margin-top: 8px;
	}

	.ut-th-footer .ut-th-social a {
		width: 44px;
		height: 44px;
	}

	.ut-th-footextra-row {
		padding-block: 26px;
	}

	.ut-th-footbottom {
		flex-direction: column;
		align-items: flex-start;
		padding-bottom: 22px;
	}

	.ut-th-footlegal {
		flex-direction: column;
		align-items: flex-start;
	}

	.ut-th-footlegal .ut-th-slot + .ut-th-slot::before {
		content: none;
	}
}

/* Panel toggles: the hamburger and the search icon are borderless icon buttons
   in the mockup (`.iconbtn`, `.mobiletools .menuword`); only the place button
   carries a border, and it sets its own below. */
.ut-th-panel-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	border: 1px solid transparent;
	border-radius: 0.5rem;
	background: transparent;
	color: var(--ut-content, inherit);
	font: inherit;
	cursor: pointer;
}

.ut-th-panel-toggle:hover {
	background: var(--ut-hover-surface, rgba(0, 0, 0, 0.06));
}

.ut-th-panel-toggle-icon {
	width: 20px;
	height: 20px;
	flex: none;
	stroke-width: 1.7;
}

.ut-th-panel-toggle:focus-visible,
.ut-th-slot--account a:focus-visible,
.ut-th-slot--account button:focus-visible {
	outline: 2px solid var(--wp--preset--color--ut-focus-ring-color, currentColor);
	outline-offset: 2px;
}

/* Create entry (B169/B170, 0.33.0): a button filled in the site's brand colour
   with a white plus — «make something new», the same look as the pages' own
   create buttons. On a narrow screen a round «+» (below). The place is the
   theme's; the label and target are a node value (B021). */
.ut-th-create {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 38px;
	padding: 0 14px 0 11px;
	border: 1px solid var(--ut-brand, currentColor);
	border-radius: var(--ut-radius-control, 6px);
	background: var(--ut-brand, #2d4876);
	color: var(--ut-on-brand, #ffffff);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.ut-th-create:hover,
.ut-th-create:focus-visible {
	border-color: var(--ut-brand-strong, currentColor);
	background: var(--ut-brand-strong, #24395f);
	color: var(--ut-on-brand, #ffffff);
	text-decoration: none;
}

.ut-th-create:focus-visible {
	outline: 2px solid var(--wp--preset--color--ut-focus-ring-color, currentColor);
	outline-offset: 2px;
}

.ut-th-create-icon {
	width: 18px;
	height: 18px;
	flex: none;
}

/* Call to action (0.36.0, unitedtechnology-org D3a): «Book a meeting» on a sales
   site. A node value; nothing renders without one. Wide screens: a filled button
   in the actions row. Narrow screens: full width at the foot of the main-menu
   panel, where there is room for the words (kept in the row when the node has
   no main menu, so the button never disappears). frame.js moves the panels to
   the header element, so the check is on the header, not the inner group. */
.ut-th-header-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 0 14px;
	border: 1px solid var(--ut-brand, currentColor);
	border-radius: var(--ut-radius-control, 6px);
	background: var(--ut-brand, #2d4876);
	color: var(--ut-on-brand, #ffffff);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.15;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

.ut-th-header-cta:hover,
.ut-th-header-cta:focus-visible {
	border-color: var(--ut-brand-strong, currentColor);
	background: var(--ut-brand-strong, #24395f);
	color: var(--ut-on-brand, #ffffff);
	text-decoration: none;
}

.ut-th-header-cta:focus-visible {
	outline: 2px solid var(--wp--preset--color--ut-focus-ring-color, currentColor);
	outline-offset: 2px;
}

.ut-th-panel-cta {
	display: none;
}

@media (max-width: 760px) {
	.wp-site-blocks > header:has(.ut-th-panel-cta) .ut-th-slot--cta {
		display: none;
	}

	.ut-th-panel-cta {
		display: block;
		margin-top: 16px;
	}

	.ut-th-panel-cta .ut-th-header-cta {
		width: 100%;
		min-height: 44px;
		font-size: 15px;
		white-space: normal;
	}
}

/* Account entry (content from unitedtech-navigation, frame from the theme;
   B038/B043 decide what it does, the mockup's `.person`/`.utility` decides how
   it looks: a plain row in the header actions, not a filled call to action). */
.ut-th-slot--account .ut-nav-account {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 42px;
	padding: 6px 9px;
	font-size: 12px;
	border-radius: 6px;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	border: 0;
	background: transparent;
	font-family: inherit;
	cursor: pointer;
}

.ut-th-slot--account .ut-nav-account:hover,
.ut-th-slot--account a:hover {
	background: var(--ut-hover-surface, rgba(0, 0, 0, 0.06));
	color: var(--ut-content, inherit);
}

.ut-th-slot--account [data-ut-account] { position: relative; }
.ut-th-slot--account [data-ut-account-panel] {
	position: absolute;
	/* Match the frame's other header panels, above the object row (40). */
	z-index: 60;
	right: 0;
	top: calc(100% + 8px);
	width: min(260px, calc(100vw - 32px));
	max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px) - var(--ut-th-header-height, 180px) - 16px);
	overflow-y: auto;
	padding: 8px;
	border: 1px solid var(--ut-border);
	border-radius: var(--ut-radius-container);
	background: var(--ut-surface-raised);
	color: var(--ut-content);
	box-shadow: var(--ut-elev-overlay);
	font-size: 14px;
	text-align: left;
}
.ut-th-slot--account [data-ut-account-panel][hidden] { display: none; }
.ut-th-slot--account .ut-nav-account-name {
	padding: 12px;
	font-weight: 650;
	overflow-wrap: anywhere;
}
.ut-th-slot--account .ut-nav-account-links { margin: 0; padding: 0; list-style: none; }
.ut-th-slot--account [data-ut-account-panel] a {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 10px 12px;
	border-radius: var(--ut-radius-control);
	color: inherit;
	text-decoration: none;
	overflow-wrap: anywhere;
}
.ut-th-slot--account .ut-nav-account-logout {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--ut-border);
}

.ut-th-slot--account svg {
	width: 18px;
	height: 18px;
	flex: none;
}

/* Monogram beside the account entry (the template's `.avatar`).
   unitedtech-navigation renders the element; the frame sizes it, the same way
   it places a plugin's count badge on an icon. */
.ut-th-slot--account .ut-nav-account-monogram {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--ut-tint-1, var(--ut-hover-surface, transparent));
	color: var(--ut-tint-content, var(--ut-content, inherit));
	font-size: 11px;
	font-weight: 650;
	line-height: 1;
}


/* Icon entries a plugin puts in a header slot (notifications, B111/B112).
   The plugin owns the content; the theme owns how it sits in the frame. A count
   marks itself with [data-ut-slot-badge] and is placed on the icon here. */
.ut-th-slot--notifications a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 42px;
	padding: 0;
	border-radius: 0.5rem;
	color: inherit;
	text-decoration: none;
}

.ut-th-slot--notifications a:hover {
	background: var(--ut-hover-surface, rgba(0, 0, 0, 0.06));
}

.ut-th-slot--notifications a:focus-visible {
	outline: 2px solid var(--wp--preset--color--ut-focus-ring-color, currentColor);
	outline-offset: 2px;
}

.ut-th-slot--notifications svg {
	width: 20px;
	height: 20px;
	flex: none;
}

.ut-th-slot [data-ut-slot-badge] {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 1.1rem;
	padding: 0 0.25rem;
	border: 1px solid var(--ut-surface, #ffffff);
	border-radius: 999px;
	background: var(--ut-danger, #a83232);
	color: var(--ut-on-brand, #ffffff);
	font-size: 0.6875rem;
	line-height: 1.1rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* A badge with no text content (B036: a dot, not a number) shrinks to a plain
   dot instead of an empty numeral-sized pill. Plugins that do need a visible
   count keep the sizing above by putting text inside the badge. */
.ut-th-slot [data-ut-slot-badge]:empty {
	top: 5px;
	right: 5px;
	min-width: 10px;
	width: 10px;
	height: 10px;
	padding: 0;
}

/* Search (B120): icon in the header actions, panel under the header at every width. */
.ut-th-panel-toggle--icon {
	padding: 0;
	min-width: 42px;
	min-height: 42px;
	justify-content: center;
}

.ut-th-panel-toggle--icon .ut-th-panel-toggle-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ut-th-panel--search {
	display: none;
}

.ut-th-panels {
	position: relative;
	z-index: 60;
	margin-block: 0;
	font-size: 14px;
}

.ut-th-panels > .ut-th-panel {
	background: var(--ut-surface, #ffffff);
	border-bottom: 1px solid var(--ut-border, currentColor);
	box-shadow: 0 14px 30px rgb(25 28 31 / 8%);
	padding: 0;
}

.ut-th-panels .ut-th-panel-inner {
	padding: 18px 30px 22px;
	max-width: 1120px;
}

.ut-th-panel-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 10px;
}

.ut-th-panel-head h2 {
	margin: 0;
	font-size: 15px;
	letter-spacing: -0.2px;
}

.ut-th-panel-close {
	margin-left: auto;
	min-height: 38px;
	padding: 0 4px;
	border: 0;
	background: transparent;
	color: var(--ut-link, inherit);
	font: inherit;
	font-size: 12px;
	font-weight: 650;
	cursor: pointer;
}

.ut-th-mainnav .ut-th-panel-head {
	display: none;
}

.ut-th-panel--search.is-open {
	display: block;
}

.ut-th-search-scope {
	display: block;
	margin-bottom: 0.5rem;
	font-size: var(--wp--preset--font-size--ut-prose, 1rem);
}

.ut-th-searchform-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ut-th-search-input {
	flex: 1 1 320px;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--ut-border-control, currentColor);
	border-radius: 0.5rem;
}

.ut-th-search-input svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.ut-th-search-input .ut-th-search-field {
	width: 100%;
	min-width: 0;
	min-height: 44px;
	border: 0;
	padding: 0;
	background: transparent;
	font: inherit;
}

.ut-th-search-submit {
	flex: none;
	min-height: 44px;
	padding: 0.5rem 1rem;
	border: 0;
	border-radius: 0.5rem;
	background: var(--wp--preset--color--ut-interactive, #1f2937);
	color: var(--wp--preset--color--ut-on-brand, #ffffff);
	font: inherit;
	cursor: pointer;
}

.ut-th-search-submit:hover {
	background: var(--wp--preset--color--ut-interactive-hover, #111827);
}

/* The rounded label is the input's visible boundary. Keep one focus ring
   around that boundary, including keyboard and programmatic panel focus. */
.ut-th-search-input:focus-within,
.ut-th-search-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--ut-focus-ring-color, currentColor);
	outline-offset: 2px;
}

.ut-th-search-input .ut-th-search-field:focus {
	outline: none;
	box-shadow: none;
}

/* Place selector (B045/B046): button after the logo, panel with search + list. */
.ut-th-place {
	position: relative;
}

/* The place keeps its size; a long node name gives way instead (the template
   holds `.place` at a fixed cap and lets the wordmark be the flexible part).
   Without this the button overflows its slot and covers the search icon. */
.ut-th-slot--place {
	flex: none;
	max-width: 260px;
}

.ut-th-place-button {
	min-width: 0;
	min-height: 38px;
	max-width: 100%;
	gap: 8px;
	padding: 5px 10px;
	border-radius: 6px;
	justify-content: flex-start;
	background: var(--ut-brand-surface, var(--ut-surface, transparent));
	color: var(--ut-brand-strong, var(--ut-content, inherit));
	border-color: var(--ut-brand-surface, var(--ut-border, currentColor));
	font-weight: 600;
}

.ut-th-place-button:hover {
	background: var(--ut-brand-surface, var(--ut-hover-surface, rgba(0, 0, 0, 0.06)));
}

.ut-th-place-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ut-th-place-chevron {
	flex: none;
	width: 13px;
	height: 13px;
}

.ut-th-panel--place {
	display: none;
	position: absolute;
	z-index: 60;
	top: 100%;
	left: 0;
	min-width: 18rem;
	max-width: 90vw;
	max-height: 70vh;
	overflow-y: auto;
	padding: 1rem;
	background: var(--ut-surface, #ffffff);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.ut-th-panel--place.is-open {
	display: block;
}

.ut-th-place-search-label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: var(--wp--preset--font-size--ut-prose, 1rem);
}

.ut-th-place-search-field {
	width: 100%;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	margin-bottom: 0.5rem;
	border: 1px solid var(--ut-border-control, currentColor);
	border-radius: 0.5rem;
	font: inherit;
}

.ut-th-place-search-field:focus-visible {
	outline: 2px solid var(--wp--preset--color--ut-focus-ring-color, currentColor);
	outline-offset: 2px;
}

.ut-th-place-list,
.ut-th-place-results {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ut-th-place-list {
	margin-bottom: 0.25rem;
	border-bottom: 1px solid var(--ut-border, currentColor);
	padding-bottom: 0.25rem;
}

.ut-th-place-option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.5rem;
	border-radius: 0.375rem;
	color: inherit;
	text-decoration: none;
}

.ut-th-place-option svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.ut-th-place-option:hover,
.ut-th-place-option:focus-visible {
	background: var(--ut-hover-surface, rgba(0, 0, 0, 0.06));
}

.ut-th-place-option[aria-current="true"] {
	font-weight: 600;
}

/* One level at a time (K8, 0.21.0). A place with places below it is a button
   with the count; a sub-level has a back button, its name, and «Go to all of …». */
button.ut-th-place-option {
	width: 100%;
	border: 0;
	margin: 0;
	background: none;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.ut-th-place-option-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.ut-th-place-option-name,
.ut-th-place-path {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ut-th-place-path {
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--ut-content-muted, inherit);
}

.ut-th-place-count {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 2px;
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--ut-content-muted, inherit);
}

.ut-th-place-option .ut-th-place-count svg {
	width: 16px;
	height: 16px;
}

.ut-th-place-option.is-current-branch,
.ut-th-place-option--goto {
	font-weight: 600;
}

.ut-th-place-level-head {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0 0 0.25rem;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid var(--ut-border, currentColor);
}

.ut-th-place-back {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 2px;
	min-height: 44px;
	max-width: 50%;
	padding: 0 0.5rem 0 0.25rem;
	border: 0;
	border-radius: 0.375rem;
	background: none;
	font: inherit;
	font-size: 0.875rem;
	color: var(--ut-brand-strong, inherit);
	cursor: pointer;
}

.ut-th-place-back span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ut-th-place-back svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.ut-th-place-back:hover,
.ut-th-place-back:focus-visible {
	background: var(--ut-hover-surface, rgba(0, 0, 0, 0.06));
}

.ut-th-place-back:focus-visible,
.ut-th-place-level-title:focus-visible,
button.ut-th-place-option:focus-visible {
	outline: 2px solid var(--wp--preset--color--ut-focus-ring-color, currentColor);
	outline-offset: 2px;
}

.ut-th-place-level-title {
	min-width: 0;
	margin: 0 0 0 auto;
	padding-right: 0.5rem;
	overflow: hidden;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ut-th-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.ut-th-place-empty {
	padding: 0.5rem;
	color: var(--ut-content-muted, inherit);
}

@media (min-width: 761px) {
	.ut-th-menu li {
		position: relative;
	}

	.ut-th-mainnav .sub-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 50;
		min-width: 14rem;
		padding: 0.5rem 1rem;
		background: #ffffff;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	}

	.ut-th-mainnav li:hover > .sub-menu,
	.ut-th-mainnav li:focus-within > .sub-menu {
		display: block;
	}
}

/* Object-menu geometry (B141): the theme owns the sidebar's width, its top
   position and the push of <main> — unitedtech-navigation renders
   `.ut-nav-sidebar` inside our object-menu slot and only sets state
   (body.ut-nav-has-sidebar / .ut-nav-sidebar-collapsed). `--ut-th-header-height`
   is published by frame.js from the header's own height (without the admin bar,
   which WordPress gives as `--wp-admin--admin-bar--height`), so a taller header
   (tagline, wrapped site name) is tracked without a hardcoded pixel value. Kadence pages are unaffected — this is scoped to slot mode. */
@media (max-width: 1120px) {
	/* The object menu overlays the content as a bounded left drawer. The theme
	   owns its geometry; navigation only switches the open state. */
	body.ut-nav-slot-mode.ut-nav-sidebar-open {
		overflow: hidden;
	}

	body.ut-nav-slot-mode.ut-nav-sidebar-open .ut-th-header-row-object::before {
		content: '';
		position: fixed;
		inset: calc(var(--wp-admin--admin-bar--height, 0px) + var(--ut-th-header-height, 0px)) 0 0;
		z-index: 1;
		background: rgba(15, 23, 42, 0.32);
	}

	body.ut-nav-slot-mode.ut-nav-has-sidebar .ut-nav-sidebar.is-open {
		position: fixed;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--ut-th-header-height, 0px));
		left: 0;
		z-index: 2;
		width: min(360px, calc(100vw - 16px));
		height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px) - var(--ut-th-header-height, 0px));
		max-height: none;
		box-sizing: border-box;
		box-shadow: 4px 0 18px rgba(15, 23, 42, 0.16);
	}

	.ut-th-header-row-object {
		max-width: none;
		background: var(--ut-surface, #ffffff);
		border-bottom: 1px solid var(--ut-border, currentColor);
	}

	.ut-th-header-row-object:has(.ut-nav-header-bar[hidden]) {
		display: none;
	}

	.ut-th-header-row-object .ut-nav-header-bar {
		min-height: 0;
		padding: 8px 16px;
	}

	.ut-th-header-row-object .ut-nav-trigger,
	.ut-th-header-row-object .ut-nav-trigger:hover,
	.ut-th-header-row-object .ut-nav-trigger:focus,
	.ut-th-header-row-object .ut-nav-trigger:active {
		min-height: 44px;
		padding: 8px 12px;
		gap: 8px;
		font-size: 14px;
		color: var(--ut-link, inherit);
		border: 1px solid var(--ut-border, currentColor);
		border-radius: 6px;
		box-shadow: none;
	}

	.ut-th-header-row-object .ut-nav-trigger-icon {
		width: 16px;
		height: 16px;
	}
}

@media (max-width: 760px) {
	/* The object drawer leaves page content rendered beneath its backdrop. */
	html[data-ut-open-panel]:not([data-ut-open-panel="account"]):not([data-ut-open-panel="object-menu"]) .wp-site-blocks > :not(header) {
		display: none;
	}
}

@media (min-width: 1121px) {
	/* The header is sticky, so its bottom edge sits at the same place in the window
	   whether the page is scrolled or not: admin bar + the header's own height. Both
	   parts are independent of the scroll position, so a measurement taken while the
	   reader has scrolled can never move the menu (before 0.24.0 the value came from
	   the header's rendered bottom edge and the header scrolled away). */
	/* The menu never runs down beside the footer and is never squeezed (0.36.3).
	   The footer spans the full width as on pages without the menu. When it comes
	   into view, frame.js publishes the menu's height down to the footer, but never
	   less than its content needs (`--ut-th-object-menu-fit`), and how far that
	   still reaches past the footer (`--ut-th-object-menu-shift`); the menu moves
	   up by that much, as if it scrolled with the page, and the part under the
	   header is clipped. Only empty space below the entries is given up (0.31.1
	   capped the height at the footer, which left a strip of the list on a short
	   page). */
	body.ut-nav-slot-mode.ut-nav-has-sidebar .ut-nav-sidebar {
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--ut-th-header-height, 0px) - var(--ut-th-object-menu-shift, 0px));
		width: var(--ut-th-object-menu-width, 248px);
		height: var(--ut-th-object-menu-fit, calc(100vh - var(--wp-admin--admin-bar--height, 0px) - var(--ut-th-header-height, 0px)));
		clip-path: inset(var(--ut-th-object-menu-shift, 0px) -100vmax -100vmax -100vmax);
	}

	body.ut-nav-slot-mode.ut-nav-has-sidebar.ut-nav-sidebar-collapsed .ut-nav-sidebar {
		width: var(--ut-th-object-menu-width-collapsed, 68px);
	}

	/* Only <main> is pushed by the menu. The footer is never pushed: it keeps the
	   same full-width band and column as on every other page (0.31.1; 0.8.0-0.31.0
	   pushed it too, which left the band starting right of the menu). */
	/* A short page is still as tall as the menu (0.36.3): at least the rest of the
	   window, and at least the menu's content (`--ut-th-object-menu-need` from
	   frame.js), so the footer never starts above the menu's bottom edge. */
	body.ut-nav-slot-mode.ut-nav-has-sidebar main {
		padding-left: calc(var(--ut-th-object-menu-width, 248px) + 32px);
		min-height: max(var(--ut-th-object-menu-need, 0px), calc(100vh - var(--wp-admin--admin-bar--height, 0px) - var(--ut-th-header-height, 0px)));
		transition: padding-left 0.3s ease;
	}

	body.ut-nav-slot-mode.ut-nav-has-sidebar.ut-nav-sidebar-collapsed main {
		padding-left: calc(var(--ut-th-object-menu-width-collapsed, 68px) + 32px);
	}
}

/* A short window: the header scrolls with the page (see the sticky header above),
   so the object menu does too. It starts right under the header, runs at least to
   the bottom of the first screen and is as tall as its content; <main> is at least
   as tall (above), so the footer starts below it (0.36.3). */
@media (min-width: 1121px) and (max-height: 599px) {
	body.ut-nav-slot-mode.ut-nav-has-sidebar .ut-th-header-row-object {
		position: static;
	}

	body.ut-nav-slot-mode.ut-nav-has-sidebar .ut-nav-sidebar {
		position: absolute;
		top: var(--ut-th-header-height, 0px);
		bottom: auto;
		height: auto;
		min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - var(--ut-th-header-height, 0px));
	}
}

/* Search results controls (B058/B059/B098/B110): type filter and sort, both
   plain link lists so no JS is required. */
.ut-th-search-controls {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin-block: 1rem;
}

.ut-th-search-types ul,
.ut-th-search-sort ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ut-th-search-type-option,
.ut-th-search-sort-option {
	display: inline-block;
	padding: 0.375rem 0.75rem;
	border: 1px solid var(--ut-border, currentColor);
	border-radius: var(--wp--preset--spacing--ut-radius-pill, 9999px);
	color: inherit;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--ut-prose, 1rem);
}

.ut-th-search-type-option:hover,
.ut-th-search-sort-option:hover,
.ut-th-search-type-option:focus-visible,
.ut-th-search-sort-option:focus-visible {
	background: var(--ut-hover-surface, rgba(0, 0, 0, 0.06));
}

.ut-th-search-type-option[aria-current="true"],
.ut-th-search-sort-option[aria-current="true"] {
	background: var(--wp--preset--color--ut-interactive, #1f2937);
	border-color: var(--wp--preset--color--ut-interactive, #1f2937);
	color: var(--wp--preset--color--ut-on-brand, #ffffff);
	font-weight: 600;
}

/* ── Narrow screens: the mockup's own mobile frame (breakpoint 760px) ──
   The template drops the topline entirely, keeps only the wordmark and an icon
   row (`.mobiletools`) in the brand row, hides the menu row, and puts the place
   pill plus a «Hovedmeny» button in a brand-tinted context row
   (`.s2 .mobilecontext`). The theme reaches the same shape by reusing its own
   rows: the menu row becomes the context row, and `frame.js` moves the place
   slot into it. Panel mechanics (`ut:panel`, `data-ut-open-panel`, B106) are
   unchanged — only the toggle's position moves. */
@media (max-width: 760px) {
	.ut-th-topline {
		display: none;
	}

	.ut-th-brandrow > .wp-block-group {
		min-height: 68px;
		padding: 12px 16px;
		gap: 12px;
		flex-wrap: nowrap;
	}

	.ut-th-brandrow .ut-th-actions {
		gap: 5px;
	}

	/* The template steps the wordmark down here (`.wordmark{font-size:22px}`). */
	.ut-th-brandrow .wp-block-site-title {
		font-size: 22px;
	}

	.ut-th-identity {
		gap: 10px;
	}

	.ut-th-identity .wp-block-site-logo.ut-th-identity-logo img {
		height: 32px;
	}

	.ut-th-name-size-medium .ut-th-identity .wp-block-site-title {
		font-size: 19px;
	}

	.ut-th-name-size-small .ut-th-identity .wp-block-site-title {
		font-size: 16px;
	}

	.ut-th-actions .ut-th-panel-toggle--icon,
	.ut-th-slot--notifications a,
	.ut-th-slot--account .ut-nav-account {
		min-width: 38px;
		min-height: 40px;
		padding: 0;
	}

	/* The account entry is icon-only here, like the mockup's `.mobiletools`. */
	.ut-th-slot--account .ut-nav-account-monogram {
		width: 26px;
		height: 26px;
	}

	.ut-th-actions .ut-nav-account-label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.ut-th-slot--account .ut-nav-account {
		justify-content: center;
		gap: 0;
	}

	/* B169: the create entry stays on a narrow screen, as a round «+». The
	   label is kept for screen readers (the link's accessible name). */
	.ut-th-create {
		width: 36px;
		height: 36px;
		min-height: 36px;
		padding: 0;
		border-radius: 50%;
	}

	.ut-th-create-label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	/* The menu row becomes the context row: brand-tinted, place on the left,
	   the menu button pushed to the right. */
	.ut-th-navrow {
		background: var(--ut-brand-surface, transparent);
	}

	.ut-th-navrow > .wp-block-group {
		min-height: 45px;
		padding: 7px 14px;
		gap: 8px;
		flex-wrap: nowrap;
	}

	.ut-th-navrow .ut-th-slot--place {
		max-width: 180px;
	}

	.ut-th-navrow .ut-th-place-button {
		min-height: 34px;
		padding: 4px 7px 4px 0;
		font-size: 12px;
		background: none;
		border-color: transparent;
	}

	.ut-th-navrow .ut-th-place-button:hover {
		background: none;
	}

	.ut-th-mainnav {
		display: flex;
		flex-wrap: wrap;
		margin-left: auto;
		min-width: 0;
	}

	.ut-th-mainnav > .ut-th-panel-toggle {
		margin-left: auto;
		gap: 7px;
		min-height: 34px;
		padding: 0;
		font-size: 12px;
	}

	.ut-th-panel {
		display: none;
		flex: 1 1 100%;
		padding: 0.5rem 0;
	}

	.ut-th-panel.is-open {
		display: block;
	}

	.ut-th-panel .ut-th-menu {
		flex-direction: column;
		gap: 0;
	}

	/* Menu items in the open panel are ruled rows, not a wrapped strip
	   (the mockup's `.panel .globalnav button`). */
	.ut-th-panel--menu .ut-th-menu > li > a {
		display: block;
		padding: 12px 6px;
		font-size: 15px;
		border-bottom: 1px solid var(--ut-border, currentColor);
	}

	.ut-th-panel .sub-menu {
		padding-left: 1rem;
	}

	.ut-th-panels .ut-th-panel-inner {
		padding: 15px 16px 19px;
	}

}

/* The mockup tightens the same desktop rows between 761 and 1120px rather than
   switching layout (`.s2 .brandrow{gap:15px}`, `.tools{gap:3px}`, …). */
@media (min-width: 761px) and (max-width: 1120px) {
	.ut-th-brandrow > .wp-block-group {
		gap: 15px;
	}

	.ut-th-brandrow .ut-th-actions {
		gap: 3px;
	}

	.ut-th-slot--place {
		max-width: 180px;
	}

	.ut-th-mainnav .ut-th-menu a {
		padding-left: 9px;
		padding-right: 9px;
	}
}

/* =============================================================================
   Article, archive and 404 (B156 — vanlige maler v1, 0.19.0)
   Form follows mockup-vanlige-maler-2026-09-21.html. Colours and radii are
   ui-core tokens; the type scale is theme.json's ut-* presets.
   ============================================================================= */

/* Article header: kicker, title, lead, meta line. */
.ut-th-article-head {
	margin-block-end: 1.5rem;
}

.ut-th-article-head > * + * {
	margin-block-start: 0.75rem;
}

.ut-th-kicker {
	font-size: 0.75rem;
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ut-brand-strong);
}

.ut-th-kicker a {
	display: inline-block;
	padding: 3px 9px;
	border-radius: var(--ut-radius-control, 4px);
	background: var(--ut-brand-surface);
	color: inherit;
	text-decoration: none;
}

.ut-th-kicker a:hover {
	text-decoration: underline;
}

.ut-th-kicker .wp-block-post-terms__separator {
	color: var(--ut-content-subtle);
}

.ut-th-article-head .wp-block-post-title {
	margin: 0;
	line-height: 1.15;
	letter-spacing: -0.02em;
	overflow-wrap: anywhere;
}

.ut-th-lead {
	margin: 0;
	line-height: 1.5;
	color: var(--ut-content-muted);
}

/* Meta line: dates on the left, quiet actions on the right (B156: not
   intrusive). Below the mobile breakpoint the actions drop under the dates. */
.ut-th-article-meta {
	align-items: center;
	gap: 6px 16px;
	font-size: 0.8125rem;
	color: var(--ut-content-subtle);
}

.ut-th-article-dates {
	gap: 6px 10px;
}

.ut-th-article-dates > * {
	margin: 0;
	white-space: nowrap;
}

.ut-th-article-dates > * + *::before {
	content: "·";
	margin-inline-end: 10px;
	color: var(--ut-border-strong);
}

.ut-th-author {
	color: var(--ut-content-muted);
}

.ut-th-meta-label {
	color: inherit;
}

.ut-th-article-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 4px;
	margin-inline-start: auto;
}

.ut-th-article-action {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 32px;
	padding: 4px 6px;
	border: 0;
	border-radius: var(--ut-radius-control, 4px);
	background: none;
	font: inherit;
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--ut-content-muted);
	cursor: pointer;
}

.ut-th-article-action:hover {
	color: var(--ut-link);
	text-decoration: underline;
}

.ut-th-article-action:focus-visible {
	outline: var(--ut-focus-ring-width, 3px) solid var(--ut-focus-ring-color);
	outline-offset: var(--ut-focus-ring-offset, 2px);
}

.ut-th-article-action[data-state="done"] {
	color: var(--ut-success);
}

.ut-th-article-action[data-state="failed"] {
	color: var(--ut-danger);
}

.ut-th-article-action-icon {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.8;
}

.ut-th-article-action-status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* Hero image with caption (rendered as a core/image block, see Article::render_hero). */
.ut-th-article .ut-th-hero {
	margin: 0 0 1.75rem;
}

.ut-th-article .ut-th-hero img {
	width: 100%;
	height: auto;
	border-radius: var(--ut-radius-card, 8px);
}

.ut-th-article .ut-th-hero .wp-element-caption,
.ut-th-article .wp-block-image .wp-element-caption {
	margin-top: 8px;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--ut-content-muted);
	text-align: start;
}

/* A page that opens with a full-width block (a cover or a coloured band) starts
   right under the header (0.23.1). The site's block gap otherwise puts a strip of
   the canvas between the header and the block. Pages that open with a title or
   ordinary content keep the gap. */
.wp-site-blocks > main:has(> .wp-block-post-content:first-child > .alignfull:first-child) {
	margin-block-start: 0;
}

/* Content prose (0.19.2, scoped 0.19.3): ui-core's reset removes heading
   sizes, list markers and paragraph margins. Every post-content block — pages
   as well as articles, and content nested in older Kadence wrappers — gets
   them back. Plugin islands rendered inside the content (Public Views' views,
   ui-core primitives such as the section nav) carry `.ut-ui` on their root
   and are excluded: their primitives own their own list and heading styling.
   `:where()` keeps specificity at the wrapper class alone, so a block with its
   own size preset still wins. Sizes are theme.json presets. List markers and
   item spacing (0.22.0) go only to authored lists — the List block
   (`.wp-block-list`) and classic lists without a block class — not to lists a
   block uses as structure, such as the Query Loop's `ul.wp-block-post-template`. */
.wp-block-post-content {
	line-height: 1.65;
}

.wp-block-post-content :where(p, ul, ol, blockquote, figure, table, pre, .wp-block-buttons):where(:not(.wp-block-post-content .ut-ui *)) {
	margin-block: 0 1.15em;
}

.wp-block-post-content :where(h2, h3, h4, h5, h6):where(:not(.wp-block-post-content .ut-ui *)) {
	font-weight: 700;
	line-height: 1.25;
	margin-block: 1.6em 0.6em;
}

.wp-block-post-content :where(h2):where(:not(.wp-block-post-content .ut-ui *)) {
	font-size: var(--wp--preset--font-size--ut-title);
}

.wp-block-post-content :where(h3):where(:not(.wp-block-post-content .ut-ui *)) {
	font-size: var(--wp--preset--font-size--ut-lead);
	line-height: 1.3;
	margin-block: 1.4em 0.5em;
}

.wp-block-post-content :where(h4, h5, h6):where(:not(.wp-block-post-content .ut-ui *)) {
	font-size: 1.0625rem;
	margin-block: 1.3em 0.4em;
}

.wp-block-post-content :where(ul):where(:not([class*="wp-block-"]), .wp-block-list):where(:not(.wp-block-post-content .ut-ui *)) {
	list-style: disc;
	padding-inline-start: 1.3em;
}

.wp-block-post-content :where(ol):where(:not([class*="wp-block-"]), .wp-block-list):where(:not(.wp-block-post-content .ut-ui *)) {
	list-style: decimal;
	padding-inline-start: 1.3em;
}

.wp-block-post-content :where(:where(ul, ol):where(:not([class*="wp-block-"]), .wp-block-list) > li + li):where(:not(.wp-block-post-content .ut-ui *)) {
	margin-block-start: 0.4em;
}

.wp-block-post-content :where(blockquote):where(:not(.wp-block-post-content .ut-ui *)) {
	padding-inline-start: 1rem;
	border-inline-start: 3px solid var(--ut-border-strong);
	color: var(--ut-content-muted);
}

.wp-block-post-content :where(hr):where(:not(.wp-block-post-content .ut-ui *)) {
	margin-block: 1.5em;
	border: 0;
	border-top: 1px solid var(--ut-border);
}

/* Core's layout gap already spaces direct children; avoid doubling it. */
.wp-block-post-content.is-layout-constrained > :where(p, ul, ol, blockquote, figure, table, pre, .wp-block-buttons):last-child {
	margin-block-end: 0;
}

/* Tags row at the end of the article. */
.ut-th-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-block-start: 1.75rem;
	padding-block-start: 1rem;
	border-top: 1px solid var(--ut-border);
	font-size: 0.8125rem;
}

.ut-th-tags .ut-th-meta-label {
	color: var(--ut-content-subtle);
}

.ut-th-tags .wp-block-post-terms__separator {
	display: none;
}

.ut-th-tags a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 12px;
	border: 1px solid var(--ut-border-control);
	border-radius: var(--ut-radius-pill, 999px);
	background: var(--ut-surface);
	color: var(--ut-content);
	text-decoration: none;
}

.ut-th-tags a:hover {
	background: var(--ut-hover-surface);
}

/* Archive: title, description, cards, pagination (B029). */
.ut-th-archive-title {
	margin: 0 0 0.25rem;
	line-height: 1.2;
}

.ut-th-archive-description {
	margin: 0 0 0.5rem;
	color: var(--ut-content-subtle);
	font-size: 0.875rem;
}

.ut-th-archive-title + .wp-block-query,
.ut-th-archive-description + .wp-block-query {
	border-top: 1px solid var(--ut-border);
	padding-top: 0.25rem;
}

.ut-th-cards {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ut-th-cards > li {
	margin: 0;
}

.ut-th-card {
	gap: 20px;
	padding: 22px 0;
	border-bottom: 1px solid var(--ut-border);
}

.ut-th-card-thumb {
	flex: 0 0 200px;
	margin: 0;
	border-radius: var(--ut-radius-card, 8px);
	overflow: hidden;
	background: var(--ut-hover-surface);
	line-height: 0;
}

.ut-th-card-thumb img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.ut-th-card-text {
	flex: 1 1 auto;
	min-width: 0;
}

.ut-th-card-text > * + * {
	margin-block-start: 6px;
}

.ut-th-kicker--card {
	font-size: 0.6875rem;
}

.ut-th-kicker--card a {
	padding: 0;
	background: none;
}

.ut-th-card .wp-block-post-title {
	margin: 0;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.ut-th-card .wp-block-post-title a {
	color: var(--ut-content);
	text-decoration: none;
}

.ut-th-card .wp-block-post-title a:hover {
	text-decoration: underline;
}

.ut-th-card .wp-block-post-excerpt {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--ut-content-muted);
}

.ut-th-card .wp-block-post-excerpt__more-text,
.ut-th-card .wp-block-post-excerpt__more-link {
	display: none;
}

.ut-th-card-date {
	font-size: 0.8125rem;
	color: var(--ut-content-subtle);
}

.ut-th-archive .wp-block-query-pagination {
	margin-block-start: 1.375rem;
	font-size: 0.875rem;
}

.ut-th-archive .wp-block-query-pagination a,
.ut-th-archive .wp-block-query-pagination .current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 10px;
	border-radius: var(--ut-radius-control, 4px);
	text-decoration: none;
}

.ut-th-archive .wp-block-query-pagination a:hover {
	background: var(--ut-hover-surface);
}

.ut-th-archive .wp-block-query-pagination .current {
	background: var(--ut-selected-surface);
	color: var(--ut-selected);
	font-weight: 650;
}

/* 404 (B033). */
.ut-th-404-lead {
	color: var(--ut-content-muted);
}

/* Constrained layout centres any narrower child with auto margins; keep the
   block full width and narrow only its inner wrapper so the field stays left. */
.ut-th-404-search .wp-block-search__inside-wrapper {
	max-width: 560px;
}

.ut-th-404-search .wp-block-search__label {
	font-size: 0.8125rem;
	font-weight: 600;
	margin-block-end: 6px;
}

.ut-th-404-search .wp-block-search__input {
	min-height: 44px;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--ut-border-control);
	border-radius: var(--ut-radius-control, 4px);
	background: var(--ut-surface);
	font: inherit;
}

.ut-th-404-search .wp-block-search__input:focus-visible {
	border-color: var(--ut-interactive);
	outline: var(--ut-focus-ring-width, 3px) solid var(--ut-focus-ring-color);
	outline-offset: var(--ut-focus-ring-offset, 2px);
}

.ut-th-404-search .wp-block-search__button {
	min-height: 44px;
	padding: 0 18px;
	border: 0;
	border-radius: var(--ut-radius-control, 4px);
	background: var(--ut-interactive);
	color: var(--ut-on-brand);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.ut-th-404-search .wp-block-search__button:hover {
	background: var(--ut-interactive-hover);
}

@media (max-width: 760px) {
	.ut-th-article-meta {
		gap: 4px 12px;
	}

	.ut-th-article-actions {
		width: 100%;
		margin-inline-start: 0;
		gap: 2px 10px;
	}

	.ut-th-article-action {
		min-height: 40px;
		padding: 4px 2px;
	}

	.ut-th-card {
		flex-direction: column;
		gap: 12px;
		padding: 18px 0;
	}

	.ut-th-card-thumb {
		flex-basis: auto;
		width: 100%;
	}

	.ut-th-404-search .wp-block-search__inside-wrapper {
		flex-direction: column;
		gap: 8px;
	}
}

/* Print (B052): title, text and images stay; frame, actions and tags go. */
@media print {
	.ut-sticky-chrome-root,
	.ut-th-footer,
	.ut-nav-sidebar,
	.ut-th-article-actions,
	.ut-th-tags,
	.wp-block-query-pagination,
	#wpadminbar {
		display: none !important;
	}

	body.ut-ui,
	.wp-site-blocks > main {
		background: #fff !important;
		color: #000 !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	html {
		margin-top: 0 !important;
	}

	.ut-th-kicker a {
		background: none;
		padding: 0;
		color: #000;
	}

	.ut-th-article a {
		color: inherit;
		text-decoration: none;
	}

	.ut-th-article .ut-th-hero img,
	.ut-th-article .wp-block-image img {
		max-width: 100%;
		break-inside: avoid;
	}

	.ut-th-article h2,
	.ut-th-article h3 {
		break-after: avoid;
	}
}