/**
 * 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);
}

.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 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;
}

/* 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`). A node with a logo keeps
   whatever `core/site-logo` renders; this only sizes the text beside it. */
.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;
}

.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;
	}

	/* Which area the menu applies to (the template's `.navscope`). */
	.ut-th-menu-scope {
		font-size: 11px;
		color: var(--ut-content-subtle, inherit);
		white-space: nowrap;
	}

	.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 (the mockup's `.sitefooter`): ruled off from the content, muted text,
   with the operator line on its own ruled row at the bottom. */
.ut-th-footer {
	border-top: 1px solid var(--ut-border, currentColor);
	color: var(--ut-content-muted, inherit);
	margin-top: 44px;
	padding-top: 22px;
	font-size: 12px;
}

.ut-th-footcols {
	align-items: flex-start;
	gap: 26px;
}

.ut-th-footer .ut-th-footer-heading,
.ut-th-footer .wp-block-site-title {
	margin: 0 0 9px;
	font-size: 12px;
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ut-content-subtle, inherit);
}

.ut-th-footer .ut-th-footidentity {
	gap: 0;
}

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

.ut-th-footoperator {
	border-top: 1px solid var(--ut-border, currentColor);
	gap: 0.5rem 1.25rem;
	margin-top: 18px;
	padding-top: 15px;
}

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

/* 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-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-language a:hover,
.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;
}

/* Footer: who runs this site (B028). The value is a node value; only the
   presentation is the theme's. */
.ut-th-operator {
	margin: 0;
	font-size: 11px;
	color: var(--ut-content-subtle, inherit);
}

/* The footer menu wraps within its column (the mockup's `.footmenu`). */
.ut-th-footernav .ut-th-menu {
	gap: 0.375rem 1.125rem;
}

.ut-th-footernav .ut-th-menu a {
	color: var(--ut-link, inherit);
	font-size: 12px;
	min-height: 34px;
	padding: 0;
}

/* 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 (the template's `.utility`): plain text beside the icons. The
   place is the theme's; the label and target are a node value (B021). */
.ut-th-create {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 6px 9px;
	border-radius: 6px;
	font-size: 12px;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

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

/* 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(--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-scope {
	font-size: 12px;
	color: var(--ut-content-subtle, inherit);
}

.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;
}

.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 rendered height, so a taller
   header (tagline, wrapped site name, admin bar) is tracked without a hardcoded
   pixel value. Kadence pages are unaffected — this is scoped to slot mode. */
@media (max-width: 760px) {
	.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: 32px;
		padding: 6px 4px;
		gap: 7px;
		font-size: 11px;
		color: var(--ut-content-muted, inherit);
	}

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

	/* The object panel shares the approved frame breakpoint (v3 / Q018). */
	html[data-ut-open-panel]:not([data-ut-open-panel="account"]) .wp-site-blocks > :not(header) {
		display: none;
	}
}

@media (min-width: 761px) {
	body.ut-nav-slot-mode.ut-nav-has-sidebar .ut-nav-sidebar {
		top: var(--ut-th-header-height, 0px);
		width: var(--ut-th-object-menu-width, 248px);
		height: calc(100vh - var(--ut-th-header-height, 0px));
	}

	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);
	}

	body.ut-nav-slot-mode.ut-nav-has-sidebar main {
		padding-left: var(--ut-th-object-menu-width, 248px);
		transition: padding-left 0.3s ease;
	}

	body.ut-nav-slot-mode.ut-nav-has-sidebar .wp-site-blocks > footer {
		padding-left: var(--ut-th-object-menu-width, 248px);
	}

	body.ut-nav-slot-mode.ut-nav-has-sidebar.ut-nav-sidebar-collapsed .wp-site-blocks > footer {
		padding-left: var(--ut-th-object-menu-width-collapsed, 68px);
	}

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

/* 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-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;
	}

	/* The template's narrow icon row has no create entry. */
	.ut-th-slot--create {
		display: none;
	}

	/* 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;
	}

	/* The template has no scope text in its narrow context row. */
	.ut-th-menu-scope {
		display: none;
	}

	.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;
	}

	.ut-th-footcols {
		gap: 18px;
	}

}

/* 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;
}

/* 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. */
.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(.wp-block-post-content .ut-ui *)) {
	list-style: disc;
	padding-inline-start: 1.3em;
}

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

.wp-block-post-content :where(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;
	}
}