/* theme.json can't express :focus-visible, open-state attribute selectors, or current-menu-item — these three rules cover what's left. */

/*
 * Anchor jumps land below the sticky header, not under it. --header-height is
 * set from the header's real measured height (assets/js/scroll-offset.js) --
 * its nav row wraps a different number of times at different widths, so no
 * single static number is correct everywhere; 220px is a fallback for the
 * brief moment before that script runs, sized to the tallest wrapped state
 * seen across breakpoints.
 */
html {
	scroll-padding-top: var(--header-height, 220px);
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;

	.is-style-dark-section &,
	.site-footer & {
		outline-color: var(--wp--preset--color--light);
	}
}

/*
 * Dark footer (parts/footer.html). Links are white and not underlined at
 * rest; on hover they stay white and gain an underline. There is no red text
 * on a dark background. The general nav-link rules further down are
 * !important, so the footer nav links need !important plus one more class to
 * win.
 */
.site-footer a {
	color: var(--wp--preset--color--light);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--wp--preset--color--light);
	text-decoration: underline;
}

.site-footer .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--light) !important;
}

.site-footer .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--light) !important;
}

/*
 * Top edge of the footer, so it reads as its own block when a dark section
 * (is-style-dark-section, e.g. Home's showroom section) sits directly above it.
 */
.site-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/*
 * Footer bottom row: Privacy policy / Cookie policy (a navigation block) plus
 * the "Cookie settings" button (parts/footer.html, a Buttons block since the
 * buttons-as-blocks change). Complianz's own script only reopens the consent
 * banner for a click on a literal `button.cmplz-manage-consent` element
 * (cmplz_add_event in complianz.js uses `e.target.closest(selector)`, and a
 * Gutenberg Button block always renders an `<a>`, never a `<button>`, so that
 * selector can never match it) -- assets/js/scroll-to-top.js's sibling
 * handler calls `window.cmplz_set_banner_status('show')` directly instead,
 * the same function Complianz's own handler calls. The wrapping
 * `.wp-block-buttons` is set to `display: contents` so the button sits
 * directly in `.footer-legal`'s flex row, exactly as the plain `<button>`
 * did before. It's styled here to match the nav links beside it: small,
 * bold, light, underline on hover only. The row's gap matches the nav's own
 * 1.5rem column gap, so the three items read as one evenly spaced row.
 */
.footer-legal {
	gap: 0.5rem 1.5rem;
}

.footer-legal .wp-block-buttons {
	display: contents;
}

.site-footer .footer-cookie-settings {
	margin: 0;
}

.site-footer .footer-cookie-settings .wp-block-button__link {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	cursor: pointer;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: inherit;
	color: var(--wp--preset--color--light);
	text-decoration: none;
}

.site-footer .footer-cookie-settings .wp-block-button__link:hover {
	color: var(--wp--preset--color--light);
	text-decoration: underline;
}

/*
 * Footer phone/email icons, and the Instagram/Facebook icons below: accent
 * red in every state, independent of the link text color (which is white on
 * the dark footer) -- the same color as every other icon on the site (header
 * phone icon, scroll-to-top, cookie consent). The "no red on dark" rule is
 * for text only, not icons. Their SVGs use stroke="currentColor", so setting
 * color on the svg itself is enough.
 */
.site-footer a svg {
	color: var(--wp--preset--color--accent);
}

/* Footer Instagram/Facebook icons: side by side with a clear gap. */
.footer-social {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.75rem;
}

.footer-social svg {
	display: block;
}

/*
 * Footer divider: a faint bg-tinted rule instead of the light hairline token.
 * Background is cleared because theme.json's core/separator style sets both
 * a background and a border color -- with a translucent color the two layers
 * stack and the line renders at roughly double the intended opacity.
 */
.site-footer .wp-block-separator {
	color: rgba(255, 255, 255, 0.15);
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.15);
}

/*
 * Consecutive same-background sections: the second drops its top padding, so
 * the gap between them is one section of spacing, not two. Applies to
 * top-level blocks of any page's content (patterns render in place, so they
 * count too).
 *
 * A "section" here is a block with the section spacing token as its padding.
 * Matching on that inline style keeps the rule off things that aren't padded
 * sections -- the hero slider, full-bleed photos, the map band, separators --
 * so a section after a photo or a divider line keeps its top padding.
 * "Same background" is either both on the page background (no background
 * class, not the dark style) or both dark. !important is needed to beat the
 * padding set inline by the block markup.
 */
.wp-block-post-content > [style*="padding-bottom:var(--wp--preset--spacing--section)"]:not(.has-background):not(.is-style-dark-section)
	+ [style*="padding-top:var(--wp--preset--spacing--section)"]:not(.has-background):not(.is-style-dark-section),
.wp-block-post-content > .is-style-dark-section[style*="padding-bottom:var(--wp--preset--spacing--section)"]
	+ .is-style-dark-section[style*="padding-top:var(--wp--preset--spacing--section)"] {
	padding-top: 0 !important;
}

/*
 * Grey sections (a full-width Group with the "surface" background colour,
 * wrapped around a normal section). The section inside keeps its own padding,
 * the same section token the dark band uses, so a grey band has exactly the
 * dark band's space above and below. The first element's top margin (a
 * heading's 36px) and the last element's bottom margin (a paragraph's 18px),
 * which can sit a level or two down inside the section's own groups, would add
 * to that and leave grey sections roomier than the dark one, so they are
 * zeroed here. Plain white sections are not affected.
 */
.wp-block-post-content > .has-surface-background-color > * > :first-child,
.wp-block-post-content > .has-surface-background-color > * > :first-child > :first-child,
.wp-block-post-content > .has-surface-background-color > * > :first-child > :first-child > :first-child {
	margin-top: 0;
}

.wp-block-post-content > .has-surface-background-color > * > :last-child,
.wp-block-post-content > .has-surface-background-color > * > :last-child > :last-child,
.wp-block-post-content > .has-surface-background-color > * > :last-child > :last-child > :last-child {
	margin-bottom: 0;
}

/*
 * Media & Text with the image on the right (media-text-right pattern and the
 * same block in page content): core pads the text column 8% on both sides,
 * which pushes its left edge ~50px in from the content edge every other
 * section's heading starts on. Dropping that left padding lines the text up
 * with the rest of the page; the right padding stays as the gap before the
 * image. That's only while text and image sit side by side; image-left
 * sections keep core's padding there, since their text starts after the image.
 */
@media (min-width: 601px) {
	.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
		padding-left: 0;
	}
}

/*
 * At 600px and below core stacks every media-text block (image on top, text
 * below) and still pads the text 8% on both sides, so the text sat ~26px in
 * from the content edge. Stacked, there's no image beside it to keep clear
 * of, so the text runs edge to edge like any other section -- image left or
 * right, light or dark (inside a dark section the content edge is the dark
 * group's own padding, which lines up the same way).
 */
@media (max-width: 600px) {
	.wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
		padding-left: 0;
		padding-right: 0;
	}
}

/*
 * Media & Text images: 4:3, cropped to fill. This used to be an inline style
 * on each image, which the block editor doesn't write -- so those blocks
 * showed as invalid ("unexpected content") and the image couldn't be
 * replaced. As a theme rule every Media & Text block gets the same crop and
 * its markup is what the editor itself saves.
 */
.wp-block-media-text > .wp-block-media-text__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/*
 * Links inside running text (functions.php adds .is-inline-link to links in
 * a <p>/<li> that has other text around them). Like every other link they
 * have no underline at rest and gain one on hover; the colour comes from the
 * theme.json link style (accent, accent-hover on hover). In a dark section
 * the link stays white on hover and only gains the underline.
 */
a.is-inline-link {
	text-decoration: none;
}

a.is-inline-link:hover {
	text-decoration: underline;
}

.is-style-dark-section a.is-inline-link:hover {
	color: var(--wp--preset--color--light);
}

/*
 * Selected header nav item: bold + dark red, always (not just on hover).
 * Scoped to header specifically — the footer repeats some of the same
 * links (Sidor nav) and would otherwise also pick up "current" styling
 * there, which isn't wanted. Needs !important for the same specificity-tie
 * reason as the general nav-link rule below (identical property, so
 * whichever isn't !important loses regardless of source order).
 */
header .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--light) !important;
	font-weight: 700;
}

/*
 * "Boka måttagning" / "Book a measurement" nav CTA (parts/header.html,
 * header-en.html). core/navigation's custom renderer doesn't reliably apply
 * per-link block-level color/typography style attributes (same renderer quirk
 * as the blockGap/orientation issues elsewhere in this theme), so this is a
 * plain class instead.
 *
 * Solid accent button (no outline): accent background, white text. Hover,
 * keyboard focus and press use accent-hover; the current-page state (the
 * booking page itself) looks the same as the resting button. The arrow is a CSS mask filled with currentColor
 * (like the phone icon below), so it follows the text colour and, having no
 * text content, is invisible to screen readers (decorative, "aria-hidden" in
 * effect). The general nav-link override below is !important (needed to win
 * its own specificity tie against core), so these need !important too -- and,
 * since two !important rules still resolve by specificity, the hover/current
 * versions are each one class heavier than the rule they override.
 */
.wp-block-navigation-item.nav-link-cta .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: #fff !important;
	font-weight: 700;
	background-color: var(--wp--preset--color--accent);
	border: 0;
	padding: 0.45rem 0.95rem;
	border-radius: 0;
}

.wp-block-navigation-item.nav-link-cta .wp-block-navigation-item__content::after {
	content: "";
	flex: none;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wp-block-navigation-item.nav-link-cta .wp-block-navigation-item__content:hover,
.wp-block-navigation-item.nav-link-cta .wp-block-navigation-item__content:focus-visible {
	color: #fff !important;
	background-color: var(--wp--preset--color--accent-hover);
	border-color: var(--wp--preset--color--accent-hover);
	text-decoration: none !important;
}

.wp-block-navigation-item.nav-link-cta .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

/*
 * When the booking page itself is open, this item also gets current-menu-item
 * -- whose selector above (header .item.current-menu-item .content) is one
 * type-selector heavier than nav-link-cta's, so it would otherwise win the
 * colour tie (and turn the text bold on the accent fill). This combined
 * selector is heavier than either alone: the current page shows the button
 * filled accent with white text, same as at rest.
 */
header .wp-block-navigation-item.nav-link-cta.current-menu-item .wp-block-navigation-item__content {
	color: #fff !important;
	background-color: var(--wp--preset--color--accent);
}

header .wp-block-navigation-item.nav-link-cta.current-menu-item .wp-block-navigation-item__content:hover,
header .wp-block-navigation-item.nav-link-cta.current-menu-item .wp-block-navigation-item__content:focus-visible {
	color: #fff !important;
}

/*
 * Header phone link (parts/header.html). A plain nav item before the
 * "Boka måttagning" CTA, so it picks up the general nav-link color/hover
 * rules below and moves into the overlay menu on mobile along with the rest
 * of the nav. The phone icon can't live in the label (core/navigation-link
 * runs it through wp_kses_post, which strips <svg>), so it's a CSS mask
 * filled with the accent colour, whatever the link text colour is (white on
 * the dark header). The icon on the "Boka måttagning" button is the
 * exception: a red arrow on the red button would vanish, so it stays white.
 */
.nav-link-phone .wp-block-navigation-item__content::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 0.35em;
	vertical-align: -0.125em;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'/%3E%3C/svg%3E") center / contain no-repeat;
}

/*
 * Phone link in brand red (the hover token) at rest, text and icon (the icon
 * is currentColor). One class heavier than the general nav-link rule below,
 * which forces ink with !important; hover keeps that rule's red + underline.
 * Same selector matches inside the mobile overlay menu.
 */
.nav-link-phone .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--light) !important;
}

/*
 * Complianz's "manage consent" reopen tab. By default it sits mostly below
 * the viewport (bottom:-35px, only revealed on hover) as a plain unlabelled
 * text pill in the plugin's own banner colors — easy to miss entirely.
 * Complianz builds its own banner CSS as a JS string and injects it into a
 * <style> tag at runtime (see cmplz_append_css in its bundle), so it always
 * lands after this stylesheet in the DOM regardless of enqueue order —
 * matching selector specificity isn't enough here, these need !important.
 * Icon is the same stroke-SVG style used for the phone/email icons
 * elsewhere, drawn as a mask since this button's content isn't block markup
 * we control.
 */
#cmplz-manage-consent .cmplz-manage-consent {
	bottom: 20px !important;
	left: 20px !important;
	right: auto !important;
	top: auto !important;
	height: 48px !important;
	width: 48px !important;
	min-width: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	background-color: var(--wp--preset--color--bg) !important;
	border-radius: 0 !important;
	font-size: 0 !important;
	box-shadow: var(--wp--preset--shadow--natural) !important;
	animation: none !important;
}

#cmplz-manage-consent .cmplz-manage-consent::before {
	content: "";
	width: 1.5rem;
	height: 1.5rem;
	flex-shrink: 0;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5'/%3E%3Cpath d='M8.5 8.5v.01'/%3E%3Cpath d='M16 15.5v.01'/%3E%3Cpath d='M12 12v.01'/%3E%3Cpath d='M11 17v.01'/%3E%3Cpath d='M7 14v.01'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5'/%3E%3Cpath d='M8.5 8.5v.01'/%3E%3Cpath d='M16 15.5v.01'/%3E%3Cpath d='M12 12v.01'/%3E%3Cpath d='M11 17v.01'/%3E%3Cpath d='M7 14v.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

#cmplz-manage-consent .cmplz-manage-consent:hover,
#cmplz-manage-consent .cmplz-manage-consent:focus {
	bottom: 20px !important;
	animation: none !important;
	background-color: var(--wp--preset--color--bg) !important;
}

/*
 * Hover/focus: same accent-hover fill + light icon as every other button.
 * The icon is a mask filled by background-color, so no colour is baked into
 * the SVG and a palette change reaches it.
 */
#cmplz-manage-consent .cmplz-manage-consent:hover,
#cmplz-manage-consent .cmplz-manage-consent:focus-visible {
	background-color: var(--wp--preset--color--accent-hover) !important;
}

#cmplz-manage-consent .cmplz-manage-consent:hover::before,
#cmplz-manage-consent .cmplz-manage-consent:focus-visible::before {
	background-color: var(--wp--preset--color--light);
}

/*
 * Consent dialog icons (close X and category chevrons). Same !important
 * requirement as above (Complianz's own CSS is injected at runtime, always
 * landing after this stylesheet). The close icon's path already uses
 * fill="currentColor", so setting color here is enough; the chevron paths
 * have no fill attribute at all (defaulting to SVG's own black), so those
 * need fill set directly.
 */
#cmplz-cookiebanner-container .cmplz-close {
	color: var(--wp--preset--color--ink) !important;
}

#cmplz-cookiebanner-container .cmplz-category-toggle svg {
	fill: var(--wp--preset--color--accent) !important;
}

/*
 * Banner links: ink, no underline at rest (Complianz underlines them by
 * default), underline and accent-hover on hover, like every other link on a
 * white background.
 */
#cmplz-cookiebanner-container .cmplz-links .cmplz-link,
#cmplz-cookiebanner-container .cmplz-message a {
	color: var(--wp--preset--color--ink) !important;
	text-decoration: none !important;
}

#cmplz-cookiebanner-container .cmplz-links .cmplz-link:hover,
#cmplz-cookiebanner-container .cmplz-message a:hover {
	color: var(--wp--preset--color--accent-hover) !important;
	text-decoration: underline !important;
}

/*
 * Visually hides text that should still reach screen readers (the
 * scroll-to-top button's label, below) without an aria-label attribute --
 * which a Button block's save() has no slot for, so a literal one in the
 * markup would make the editor flag the block as invalid content.
 */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * Scroll-to-top button (parts/footer.html, a Buttons block), paired with the
 * manage-consent icon in the opposite corner — same size/shape/shadow, and
 * the same deep-red icon color too (its arrow SVG uses stroke="currentColor").
 * The carousel arrows (.is-swipe-row-next, further down) share these exact
 * declarations and hover/focus states through the selector lists below, so
 * the two can't drift apart; only their position and chevron differ.
 * assets/js/scroll-to-top.js adds the click handler (a Button block's `<a>`
 * has no attribute slot for an inline onclick, and one would be mangled by
 * wptexturize on save regardless -- see the Map Band pattern's own comment).
 */
.scroll-to-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 9998;
}

.scroll-to-top .wp-block-button__link,
.is-swipe-row-next {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: none;
	border-radius: 0;
	background-color: var(--wp--preset--color--bg);
	color: var(--wp--preset--color--accent);
	box-shadow: var(--wp--preset--shadow--natural);
	cursor: pointer;
}

.scroll-to-top .wp-block-button__link:hover,
.scroll-to-top .wp-block-button__link:focus-visible,
.is-swipe-row-next:hover,
.is-swipe-row-next:focus-visible {
	background-color: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--light);
}

/*
 * Sticky header. position:sticky was on the <header> itself, but WordPress
 * wraps every template part in a plain .wp-block-template-part div with no
 * height of its own — since the header is that div's only child, the div is
 * exactly the header's height, leaving no room for the header to move within
 * it, so it never visibly stuck. Moving position:sticky to that wrapper
 * instead makes its containing block .wp-site-blocks (full page height),
 * which has the room. :first-child scopes this to the header's wrapper only —
 * the footer's part uses the same class but isn't wp-site-blocks' first child.
 * top/z-index match what the header's own block-level sticky support used to
 * generate, including the same admin-bar-height offset and the same
 * max-width:600px cutoff core uses to zero that offset out.
 */
.wp-site-blocks > .wp-block-template-part:first-child {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 10;
}

@media screen and (max-width: 600px) {
	.wp-site-blocks > .wp-block-template-part:first-child {
		top: 0;
	}
}

/*
 * Core's navigation block CSS carries its own doubled-class selector
 * (.wp-block-navigation-item__content.wp-block-navigation-item__content),
 * which has real (non-:where) specificity and forces color: inherit on
 * every nav link. That's the exact same selector text as this override, so
 * it's a specificity tie decided by DOM order alone — core's rule happened
 * to win, and only looked correct before because inherited body-text ink
 * coincidentally matched this rule's old ink value. !important removes the
 * order-dependency instead of relying on that coincidence again.
 * Header/footer nav items: ink + bold by default, dark red on hover.
 */
.wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink) !important;
	font-weight: 700;
	text-decoration: none;
}

.wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent-hover) !important;
	text-decoration: underline;
}

/*
 * core/navigation declares blockGap support, but its custom renderer
 * (WP_Navigation_Block_Renderer) doesn't apply block-style spacing the way
 * ordinary blocks do — the theme.json blockGap setting for core/navigation
 * never reaches the DOM. Matches Header.tsx's gap-x-6 gap-y-2 (fixed, not
 * fluid — the nav row doesn't scale with viewport width in source).
 */
.wp-block-navigation__container {
	row-gap: 0.5rem;
	column-gap: 1.5rem;
}

/*
 * Header nav: half the item spacing (12px, not 24px) so logo and nav share
 * one row from 1456px up. At 24px it wrapped below 1448px once "Våra
 * projekt" and "Inspiration" were in the nav.
 */
header .wp-block-navigation__container {
	column-gap: 0.75rem;
}

/*
 * Header bar (parts/header.html): logo, then two Navigation blocks --
 * .header-actions (phone, "Boka måttagning"; never collapses, so both stay
 * in the bar at every width) and .header-pages (the page links). Actions sit
 * against the pages nav with the same 12px as between nav items, and the
 * pair is pushed to the right.
 */
header .header-bar {
	column-gap: 0.75rem;
}

header .header-actions {
	margin-left: auto;
}

/*
 * Below 1170px the whole row (logo, page links, phone, "Boka måttagning",
 * language switcher) doesn't fit on one line, so the page links switch to
 * core's mobile menu (the ☰ button and overlay) instead of wrapping. The
 * width was measured with the smaller, lighter nav links (see the single-row
 * header block at the end of the header rules). Core only collapses the menu
 * below 600px; between 600 and 1169.98px these two rules do the same: show
 * the open button, hide the inline list. The overlay itself (.is-menu-open)
 * is core's, unchanged.
 */
@media (min-width: 600px) and (max-width: 1169.98px) {
	header .header-pages .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	header .header-pages .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/*
 * Header logo. It takes the room the row has left instead of a fixed width:
 * the Site Logo block's 195px is the minimum, and it grows from there to 260px
 * (burger and phone layouts) or 340px (full row, from 1456px). The wrapper has
 * 12px of right padding on top of the bar's 12px column gap, so there are at
 * least 24px between the logo and whatever is next to it. flex-basis (195px +
 * the padding) is what decides whether the row wraps, so the logo never makes
 * it wrap; it only uses the free space. Auto margins (header-actions on
 * desktop, header-lang on phones) take whatever is left past the maximum.
 */
header .header-logo {
	flex: 1 1 207px;
	min-width: 207px;
	max-width: 272px;
	padding-right: 12px;
	box-sizing: border-box;
}

/* Core makes the link inline-block, which shrinks to the image and leaves
 * width: 100% nothing to fill. */
header .header-logo a {
	display: block;
}

header .header-logo {
	margin: 0;
}

header .header-logo img {
	width: 100%;
	height: auto;
	display: block;
}

@media (min-width: 1456px) {
	header .header-logo {
		max-width: 352px;
	}
}

/*
 * Header language switcher (polylang/navigation-language-switcher, inside
 * .header-lang, parts/header.html), dropdown + flags + names. functions.php
 * strips the name text back out of the closed-state trigger (flag + caret
 * only there); the open list's items keep it. Sizing the flag to the nav
 * text's line-height keeps it visually aligned with the rest of the bar.
 */
.header-lang img {
	height: 1em;
	width: auto;
	vertical-align: middle;
	margin-right: 0.4em;
}

/*
 * Language switcher toggle: the current flag and the caret are one button
 * (functions.php), with a tap area of at least 44x44 CSS px made of padding
 * and min-size -- the flag (16x11) and caret (about 8px) are drawn at the same
 * size as before. The button is 44px tall but its vertical margin takes back
 * the extra 8px, so the header row keeps the height the 36px logo gives it
 * and nothing moves. Its right edge stays where the caret's was, so the gap
 * to the hamburger is unchanged.
 */
.header-lang .roland-lang-toggle {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-width: 44px;
	min-height: 44px;
	margin-block: -6px;
	padding: 0 0.5rem;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.header-lang .roland-lang-toggle__flag {
	display: inline-flex;
	align-items: center;
}

.header-lang .roland-lang-toggle img {
	margin-right: 0;
}

.header-lang .roland-lang-toggle svg {
	flex: none;
	width: 8.4px;
	height: 8.4px;
	margin: 0;
}

/*
 * Open list: right-aligned under the toggle (it is the last thing in the
 * header, so a left-aligned 12.5rem list ran off the right edge and made the
 * page scroll sideways) and starting below the 44px toggle so it never
 * covers the toggle's lower edge; a second tap on the toggle must close it.
 */
nav.header-lang .has-child .wp-block-navigation__submenu-container {
	left: auto;
	right: 0;
	top: calc(100% + 6px);
}

/*
 * Polylang always includes the current language in the dropdown's data (it
 * needs it to build the closed-state trigger), so the open list would
 * otherwise repeat it. Hiding just the nested copy inside the submenu
 * panel -- not the trigger itself, which lives outside
 * .wp-block-navigation__submenu-container -- leaves only the other two
 * flags in the open state.
 */
.header-lang .wp-block-navigation__submenu-container .current-lang {
	display: none;
}

/*
 * Footer "Sidor" nav (parts/footer.html). Same renderer gap: the
 * orientation:"vertical" block attribute is dropped, so it renders with the
 * same horizontal flex layout as the header nav and wraps into pairs at this
 * column's width. Source stacks it as a single column (ul className="space-y-2").
 */
.footer-sidor-nav.wp-block-navigation,
.footer-sidor-nav .wp-block-navigation__container {
	flex-direction: column;
	align-items: flex-start;
}

/* Same text size as the Contact and Opening hours columns (body size). */
.site-footer .footer-sidor-nav.wp-block-navigation {
	font-size: var(--wp--preset--font-size--body);
}

/*
 * A Pages link that doesn't fit its column wraps onto a second line (and, as
 * a last resort, breaks inside a word) instead of spilling into the next
 * column -- e.g. when a browser translates the labels into longer English.
 */
.site-footer .footer-sidor-nav .wp-block-navigation-item {
	min-width: 0;
}

.site-footer .footer-sidor-nav .wp-block-navigation-item__content {
	white-space: normal;
	overflow-wrap: break-word;
}

/*
 * Footer columns (parts/footer.html has one Columns block: logo and
 * description, Pages, Contact, Opening hours). Side by side (from 782px,
 * core's stacking breakpoint), Pages takes 20% of a column's width from the
 * logo column: flex-grow 0.8 / 1.2 / 1 / 1. Contact and Opening hours keep
 * exactly the width of an equal quarter, as before; the logo column's text
 * wraps a little earlier and the logo scales down with it.
 */
@media (min-width: 782px) {
	.site-footer .wp-block-columns > .wp-block-column:nth-child(1) {
		flex-grow: 0.8;
	}

	.site-footer .wp-block-columns > .wp-block-column:nth-child(2) {
		flex-grow: 1.2;
	}
}

/*
 * Wide screens: the Pages list in two sub-columns of four under the one
 * "Pages" heading (Skjutdörrsgarderober … Inspiration left, Våra projekt …
 * Om oss right). It stays one list in page order, laid out column by column,
 * so narrower screens simply keep the single list. At the 18px body size the
 * two need ~315px on one line; the widened Pages column has that from
 * 1254px (323px at 1280px), and 1264px leaves a little slack. Sub-columns
 * can shrink to their share, so longer labels wrap rather than overflow.
 * Same 8px row spacing as the single list.
 */
@media (min-width: 79rem) {
	.site-footer .footer-sidor-nav .wp-block-navigation__container {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, max-content));
		grid-template-rows: repeat(4, auto);
		grid-auto-flow: column;
		column-gap: 1.5rem;
		row-gap: 0.5rem;
	}
}

/*
 * Vanliga frågor / Boka måttagning accordion. The question counter ("01",
 * "02", ...) is pure CSS (counter-increment below), not stored text: a
 * number typed into the page content would need hand-renumbering every time
 * a question is added, edited or removed, and Gutenberg's own editing
 * canvas made that worse than it sounds -- core/details' summary always
 * collapses to a single rich-text editing node in the editor (confirmed via
 * its DevTools-rendered DOM), regardless of how many real elements the
 * saved markup has inside <summary>. A counter badge that depended on
 * <summary> having two real child elements (one per grid column) rendered
 * correctly on the front end, but in the editor every question's heading
 * got crushed into a few pixels of width, because the editor's single
 * child only ever fills the grid's first (narrow) column. Keeping the
 * counter entirely in CSS -- not a real element inside <summary> at all --
 * sidesteps that mismatch completely: both contexts just see <summary>
 * containing the question text, nothing else, and the counter is drawn
 * without needing a second grid-column citizen to exist. It also means the
 * number updates live, instantly and correctly, when a question is
 * duplicated, deleted or reordered in the editor -- no save-and-reload
 * needed to see the renumbering, since it was never a number to update.
 *
 * The answer row keeps using --faq-counter-col (below) so its left border
 * still lines up under the question column, same as before.
 */
.wp-block-group:has(> .faq-item) {
	counter-reset: faq-item;
}

.faq-item {
	--faq-counter-col: 3.75rem;
	counter-increment: faq-item;
}

.faq-item summary {
	position: relative;
	list-style: none;
	cursor: pointer;
	padding-top: 1.75rem;
	padding-bottom: 1.75rem;
	padding-left: calc(var(--faq-counter-col) + var(--wp--preset--spacing--gutter));
}

.faq-item summary::-webkit-details-marker {
	display: none;
}

.faq-item summary::marker {
	content: "";
}

.faq-item summary::before {
	content: counter(faq-item, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 1.75rem;
	width: var(--faq-counter-col);
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--eyebrow);
	color: var(--wp--preset--color--secondary);
}

.faq-item[open] summary::before {
	color: var(--wp--preset--color--accent);
}

/*
 * .faq-question is a real heading (h2 on Vanliga frågor, h3 on Boka
 * måttagning) instead of a span, for document outline / SEO. margin and
 * line-height are reset because theme.json's global h2/h3 element styles and
 * the browser's default heading margin would otherwise apply to this tag and
 * change its appearance. letter-spacing is set explicitly to the same
 * -0.015em every other heading uses, so it matches whether it's an h2 or h3. Sized to heading-3, not
 * heading-2, so it stays clearly smaller than the section h2 above the list
 * (e.g. Boka måttagning's "Vanliga frågor innan du ringer"), and so the
 * question size matches between the two pages even though one uses h2 and
 * the other h3.
 */
.faq-question {
	min-width: 0;
	margin: 0;
	font-size: var(--wp--preset--font-size--heading-3);
	font-weight: 600;
	line-height: inherit;
	letter-spacing: -0.015em;
}

/*
 * The answer row is a Group block (.faq-answer-row) inside the Details
 * block, so the block editor can save it. Its first grid column is a
 * ::before spacer (a pseudo-element takes part in the grid like a first
 * child), which carries the open-state border -- no extra markup needed.
 * The spacer column is the gutter narrower than the summary's counter
 * column, with a fixed 1rem gap taking up the difference: the border (at
 * the spacer's right edge) then lands 1rem before the question/answer
 * column starts, giving the border breathing room from the answer text
 * while keeping the text itself aligned with the question above it.
 */
.faq-answer-row {
	display: grid;
	grid-template-columns: calc(var(--faq-counter-col) + var(--wp--preset--spacing--gutter) - 1rem) 1fr;
	gap: 1rem;
	padding-bottom: 2.5rem;
}

.faq-answer-row::before {
	content: "";
}

.faq-item[open] .faq-answer-row::before {
	border-right: 2px solid var(--wp--preset--color--accent);
}

.faq-answer {
	/*
	 * An answer with more than one paragraph (e.g. the ROT question): without
	 * this, CSS grid auto-placement fills .faq-answer-row's two columns
	 * left-to-right row by row, so the first paragraph lands in column 2 but
	 * the second lands back in column 1 (the spacer column) -- each
	 * paragraph alternating columns and getting squeezed into the narrow
	 * spacer's width. Pinning every answer paragraph to column 2 keeps them
	 * stacked in one column regardless of how many there are.
	 */
	grid-column: 2;
	font-size: var(--wp--preset--font-size--body);
}

@media (min-width: 48rem) {
	.faq-item summary {
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}

	.faq-item summary::before {
		top: 2.5rem;
		font-size: var(--wp--preset--font-size--small);
	}

	.faq-answer {
		font-size: var(--wp--preset--font-size--heading-3);
	}
}

/*
 * Formidable Forms ships its own stylesheet (formidableforms.css) with
 * generic default field styling that carries none of the theme's tokens.
 * Scoped to the booking form specifically (:is(#form_bokamttagning, #form_bokamttagning-en)) so it
 * doesn't affect any other Formidable form on the site. Values match
 * boka-mattagning.tsx's fieldClasses / labelClasses exactly.
 *
 * The 40rem cap goes on .booking-form's children, not on .booking-form
 * itself. .booking-form's own box gets no override, so WP's
 * is-layout-constrained rules position it exactly like every sibling
 * section -- centered within the content size at viewports wider than
 * that, same as the H1/FAQ/email sections. Capping the group itself
 * (and forcing its margin to pin it to the padding edge, which was tried
 * first) broke that: at viewports wider than the content size, siblings
 * center inward while the pinned group stayed at the outer edge, visibly
 * misaligning it. The children have no auto-centering of their own, so
 * they simply hug the left edge of whatever box .booking-form lands in,
 * keeping the form aligned with the rest of the page at any width.
 *
 * The separator is left uncapped so it still spans the full section width
 * like every other section's hairline. The form container needs
 * !important: Formidable's own .frm_forms.frm_style_formidable-style.
 * with_frm_style rule sets max-width:var(--form-width) (100%) with three
 * classes' worth of specificity, beating a plain class selector here.
 */
.booking-form > h2,
.booking-form > p {
	max-width: 40rem;
}

.booking-form > .frm_forms {
	max-width: 40rem !important;
}

/*
 * Booking page, form section (50 / 416): the form on the left and "Prefer to
 * write?" on the right. A hairline vertical rule (the colour and 1px weight of
 * the separators between sections) divides the two, with one and a half
 * gutters of space on each side of it. On phones the columns stack and the same hairline runs
 * horizontally between them, as the separators did before.
 */
.booking-form > .wp-block-columns {
	gap: 0;
}

@media (min-width: 782px) {
	.booking-form > .wp-block-columns > .wp-block-column:first-child {
		padding-right: calc(var(--wp--preset--spacing--gutter) * 1.5);
	}

	.booking-form > .wp-block-columns > .wp-block-column:last-child {
		padding-left: calc(var(--wp--preset--spacing--gutter) * 1.5);
		border-left: 1px solid var(--wp--preset--color--hairline);
	}
}

@media (max-width: 781px) {
	.booking-form > .wp-block-columns > .wp-block-column:last-child {
		margin-top: var(--wp--preset--spacing--section);
		padding-top: var(--wp--preset--spacing--section);
		border-top: 1px solid var(--wp--preset--color--hairline);
	}
}

/*
 * Vertical space between form fields: half the gutter (24px at desktop, the
 * same half-gutter step the header row uses), floored at 1rem so fields don't
 * crowd on phones where half the gutter would be ~13px. The full gutter
 * (48px at desktop) made the form read as a list of separate blocks.
 */
:is(#form_bokamttagning, #form_bokamttagning-en) {
	--form-row-gap: max(1rem, calc(var(--wp--preset--spacing--gutter) / 2));
}

:is(#form_bokamttagning, #form_bokamttagning-en) .frm_form_field {
	margin-bottom: var(--form-row-gap);
}

/*
 * Two rows of two on tablet/desktop (the container also holds hidden inputs,
 * hence nth-of-type): Namn and Telefon on row 1, E-post and Ort on row 2, in
 * the form's field order, so keyboard order matches what you see. Everything
 * else (textarea, consent, submit) spans both columns. Single column on
 * mobile -- no grid at all there.
 */
@media (min-width: 48rem) {
	:is(#form_bokamttagning, #form_bokamttagning-en) .frm_fields_container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--form-row-gap) var(--wp--preset--spacing--gutter);
	}

	:is(#form_bokamttagning, #form_bokamttagning-en) .frm_fields_container > .frm_form_field {
		grid-column: 1 / -1;
		margin-bottom: 0;
	}

	:is(#form_bokamttagning, #form_bokamttagning-en) .frm_fields_container > .frm_form_field:nth-of-type(1) {
		grid-column: 1;
		grid-row: 1;
	}

	:is(#form_bokamttagning, #form_bokamttagning-en) .frm_fields_container > .frm_form_field:nth-of-type(2) {
		grid-column: 2;
		grid-row: 1;
	}

	:is(#form_bokamttagning, #form_bokamttagning-en) .frm_fields_container > .frm_form_field:nth-of-type(3) {
		grid-column: 1;
		grid-row: 2;
	}

	:is(#form_bokamttagning, #form_bokamttagning-en) .frm_fields_container > .frm_form_field:nth-of-type(4) {
		grid-column: 2;
		grid-row: 2;
	}
}

/*
 * Consent checkbox label. Not flex: the label's content is loose text, the
 * "integritetspolicy" link and a full stop, and as a flex container each of
 * those became its own column, so the link and full stop sat apart from the
 * sentence. As a block with the checkbox pinned in the left padding, the
 * whole thing wraps as one sentence. The checkbox (enlarged below, since the
 * native size is well under a comfortable tap target) is centred on the
 * first line of text: 1lh is that line's height.
 */
:is(#form_bokamttagning, #form_bokamttagning-en) .frm_checkbox label {
	display: block;
	position: relative;
	box-sizing: border-box; /* Formidable sets width:100%; keep the padding inside it. */
	padding: 0.5rem 0 0.5rem 2.25rem;
	cursor: pointer;
}

/*
 * !important needed to beat Formidable's own
 * .with_frm_style ... input[type="checkbox"] rule, which sets width/height
 * to 16px with !important.
 */
/*
 * The privacy-policy link sits in running text too, but inside a <label>,
 * which the is-inline-link filter (p/li only) doesn't see. No underline at
 * rest, like every other link; the theme.json link style adds it on hover.
 */
:is(#form_bokamttagning, #form_bokamttagning-en) .frm_checkbox label a {
	text-decoration: none;
}

/*
 * Optional marketing opt-in (.roland-optin, last field before the submit
 * button). Its checkbox text is the whole label, so the group name Formidable
 * prints above it ("Marknadsföring" / "Marketing") is hidden visually but kept
 * for screen readers (it names the group), and the label is at least 44px
 * tall so one-line text still gives a full-size tap target.
 */
:is(#form_bokamttagning, #form_bokamttagning-en) .roland-optin .frm_primary_label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

:is(#form_bokamttagning, #form_bokamttagning-en) .roland-optin .frm_checkbox label {
	min-height: 44px;
}

:is(#form_bokamttagning, #form_bokamttagning-en) .frm_checkbox input[type="checkbox"] {
	position: absolute;
	left: 0;
	top: 0.5rem;
	top: calc(0.5rem + (1lh - 1.5rem) / 2);
	width: 1.5rem !important;
	min-width: 1.5rem !important;
	height: 1.5rem !important;
	margin: 0 !important;
	accent-color: var(--wp--preset--color--ink);
}

:is(#form_bokamttagning, #form_bokamttagning-en) .frm_primary_label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

:is(#form_bokamttagning, #form_bokamttagning-en) .frm_description {
	margin-top: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--secondary);
}

:is(#form_bokamttagning, #form_bokamttagning-en) input[type="text"],
:is(#form_bokamttagning, #form_bokamttagning-en) input[type="tel"],
:is(#form_bokamttagning, #form_bokamttagning-en) input[type="email"],
:is(#form_bokamttagning, #form_bokamttagning-en) select,
:is(#form_bokamttagning, #form_bokamttagning-en) textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: 0;
	background-color: #fff;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--body);
}

/*
 * Focus: the site's dark outline (same as the global :focus-visible rule)
 * instead of Formidable's blue border and glow. !important because Formidable's
 * own .with_frm_style focus rule sets border-color and box-shadow with it.
 */
:is(#form_bokamttagning, #form_bokamttagning-en) input[type="text"]:focus,
:is(#form_bokamttagning, #form_bokamttagning-en) input[type="tel"]:focus,
:is(#form_bokamttagning, #form_bokamttagning-en) input[type="email"]:focus,
:is(#form_bokamttagning, #form_bokamttagning-en) textarea:focus {
	border-color: var(--wp--preset--color--secondary) !important;
	box-shadow: none !important;
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

:is(#form_bokamttagning, #form_bokamttagning-en) .frm_button_submit {
	cursor: pointer;
	border: none;
	border-radius: 0;
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bg);
	padding: 0.75rem 1.5rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--body);
}

:is(#form_bokamttagning, #form_bokamttagning-en) .frm_button_submit:hover,
:is(#form_bokamttagning, #form_bokamttagning-en) .frm_button_submit:focus-visible {
	background-color: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--light);
}

/*
 * Map band (the "Map Band" synced pattern, wp_block). Content width, not full
 * bleed, with the same section padding as other sections. A raw iframe has no
 * block attributes for height, so the fixed 280px/360px breakpoint from
 * Footer.tsx's h-[280px] md:h-[360px] is set here. Complianz intercepts the
 * iframe and injects its own consent placeholder client-side (white box,
 * semi-transparent black button) — restyled with the theme's existing button
 * tokens (ink/bg/hover, 4px radius) so it doesn't look like a default
 * plugin widget.
 */
.map-band-address {
	margin-bottom: var(--wp--preset--spacing--gutter);
}

.map-band-wrap {
	position: relative;
}

.map-band-embed {
	display: block;
	width: 100%;
	height: 280px;
	border: 0;
}

/*
 * Greyscale and a little flatter so the map sits quietly in the page's
 * palette; full colour on hover (and keyboard focus) when someone is actually
 * looking at it. Only where a pointer can hover: phones and tablets, which
 * can't, show the map in full colour (a grey map there would never un-grey).
 * Until marketing consent is given, Complianz shows its own
 * placeholder instead of the live map -- a map image set as the background of
 * .cmplz-blocked-content-container, which wraps the iframe -- so that gets the
 * same treatment. Its consent notice sits inside and greys with it, but
 * hovering the notice also hovers the map, which lifts the filter, so the
 * notice's red hover still shows.
 */
@media (hover: hover) {
	.map-band-embed,
	.map-band .cmplz-blocked-content-container {
		filter: grayscale(1) contrast(0.9);
		transition: filter 0.3s ease;
	}
}

.map-band-wrap:hover .map-band-embed,
.map-band-wrap:focus-within .map-band-embed,
.map-band-wrap:hover .cmplz-blocked-content-container,
.map-band-wrap:focus-within .cmplz-blocked-content-container {
	filter: none;
}

@media (prefers-reduced-motion: reduce) {
	.map-band-embed,
	.map-band .cmplz-blocked-content-container {
		transition: none;
	}
}

@media (min-width: 48rem) {
	.map-band-embed {
		height: 360px;
	}
}

/*
 * Google's embed only draws its place card (name, address, review score,
 * directions) when the frame is at least ~500px wide and ~300px tall; below
 * that it shows just an "Open in Maps" link, which is what phones got. Phones
 * and small tablets therefore get a 500px-wide, 300px-tall frame, clipped to
 * the content width by the wrapper. The card sits at the frame's left edge
 * (about 250px wide), so it stays fully visible; the pin sits right of centre.
 */
@media (max-width: 47.99rem) {
	.map-band-wrap {
		overflow: hidden;
	}

	.map-band-wrap .map-band-embed {
		width: 100%;
		min-width: 500px;
		max-width: none;
		height: 300px;
	}
}

/*
 * Click-to-activate overlay (a Buttons block inside the Map Band pattern):
 * sits on top of the iframe until clicked, so a page-scroll wheel event over
 * the map area scrolls the page instead of being captured by Google's own
 * zoom-on-scroll handler. A whole-map click target, not a normal CTA, so the
 * button's own wrapper (.map-band-activate, the block's "Additional CSS
 * class") is positioned absolutely and its link stretched to fill it, rather
 * than styling the link as a normal inline button.
 *
 * !important on the hidden state: core's own block-library CSS sets
 * `.wp-block-buttons > .wp-block-button { display: inline-block }`, two
 * classes (0,2,0) against this rule's one (0,1,0) -- with neither
 * `.map-band-wrap.is-map-live` match nor a source-order tie to rely on, core
 * wins and the overlay showed through Complianz's own blocked-content notice
 * before a real map had loaded. Confirmed via Chrome DevTools' matched-styles
 * panel, which is the only way this was actually found -- the two rules
 * read as correct and non-conflicting from the stylesheet alone.
 */
.map-band-activate {
	/* Hidden until the live map has loaded; see .is-map-live below. */
	display: none !important;
	position: absolute;
	inset: 0;
}

.map-band-wrap.is-map-live .map-band-activate {
	display: block !important;
}

/*
 * Marketing consent given (assets/js/map-band.js sets the class while it
 * lasts): no overlay on any page, so the visitor is never asked twice. Higher
 * specificity than the rule above, which also uses !important.
 */
.map-band-wrap.is-map-live.is-map-activated .map-band-activate {
	display: none !important;
}

.map-band-activate .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 0;
	background: rgba(17, 17, 17, 0.15);
	color: var(--wp--preset--color--bg);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
	cursor: pointer;
}

.map-band-activate .wp-block-button__link:hover {
	background: rgba(17, 17, 17, 0.25);
}

.map-band .cmplz-blocked-content-container {
	background-color: var(--wp--preset--color--bg);
	border-radius: 0;
	box-shadow: none;
}

/*
 * While the map is blocked the placeholder is only a short strip holding the
 * consent notice (140px), not a grey box as tall as the map. Complianz sizes
 * that box from its placeholder image (the Google Maps picture, 1280x920) and
 * writes the height into an inline style once the box scrolls into view
 * (.cmplz-placeholder-N { height: ...px }), which made the band about 967px
 * tall at 1440px wide. Two classes outweigh Complianz's one. Once consent is
 * given the live map (.map-band-embed, 280px / 360px) replaces the box.
 */
.map-band .cmplz-blocked-content-container {
	height: 140px;
}

.map-band .cmplz-blocked-content-notice {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--body);
	max-width: 320px;
	padding: 0.75rem 1.5rem;
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bg);
	border-radius: 0;
	line-height: 1.4;
}

.map-band .cmplz-blocked-content-notice:hover {
	background-color: var(--wp--preset--color--accent-hover);
}

/*
 * Complianz's placeholder for a blocked YouTube embed. Complianz sizes that
 * box from the placeholder image (YouTube's 4:3 thumbnail) and writes the
 * height into an inline <style> (.cmplz-placeholder-N { height: ...px }), so
 * before consent it is taller than the 16:9 video that replaces it and the
 * page jumps when consent is given. Two classes outweigh Complianz's one,
 * so this keeps the box 16:9 before and after. The 4:3 thumbnail is cropped
 * to fit (Complianz sets background-size: cover); centred, the crop falls on
 * the video frame and cuts off the black bars baked into the thumbnail.
 */
.wp-block-embed.is-provider-youtube .wp-block-embed__wrapper.cmplz-blocked-content-container {
	aspect-ratio: 16 / 9;
	height: auto;
	background-position: center;
}

/*
 * Material swatch grid (Material page, Skjutdörrsgarderober and Inredning page
 * content, door-materials-teaser pattern). Core's
 * group block has no attribute for "N columns on desktop, fewer on mobile" —
 * its grid layout type only offers a single auto-fill minimum-width (continuous,
 * not a discrete per-breakpoint count) or a fixed non-responsive column count.
 * Swatches need an exact "5-6 desktop / 3 mobile" count, so this fills that gap.
 */
.roland-swatch-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--gutter);
}

@media (min-width: 48rem) {
	.roland-swatch-grid {
		grid-template-columns: repeat(6, 1fr);
	}
}

/*
 * Material page (Swedish 419, English 120): bigger swatches, as on the live site. Four across
 * from 1024px (300px each at 1440px), three on tablets, two on phones, and each swatch fills
 * its column. The grid on the other pages keeps the six/three columns above.
 */
body:is(.page-id-419, .page-id-120) .roland-swatch-grid {
	grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 1024px) {
	body:is(.page-id-419, .page-id-120) .roland-swatch-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 599.98px) {
	body:is(.page-id-419, .page-id-120) .roland-swatch-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

body:is(.page-id-419, .page-id-120) .roland-swatch-grid img {
	width: 100%;
	height: auto;
}

/*
 * Subheadings between swatch groups (Material page: Decor panels, Mirror,
 * Glass). At the default 1em top margin (24px) a subheading sat as close to
 * the swatch row above it as to its own swatches, so the groups ran
 * together. 2em doubles that gap. Targets only h3s that sit directly in a
 * group alongside a swatch grid, so no page content needs a class and other
 * headings (e.g. "Door materials" on Skjutdörrsgarderober, an h2) are
 * unaffected.
 */
.wp-block-group:has(> .roland-swatch-grid) > h3.wp-block-heading {
	margin-top: 2em;
}

/*
 * Inspiration gallery swipe row (inspiration-page pattern). Mobile-first: a
 * horizontal scroll-snap row by default (each card ~72% wide, so the next one
 * is visibly cut off), switching to the same 3-then-2 layout the desktop grid
 * always had once it's rendered as one flat row of 5 images (a 6-column grid
 * with the first three spanning 2 columns and the last two spanning 3 — same
 * visual result as three equal columns then two equal columns, just achieved
 * in one grid instead of two, since a single mobile scroll container needs
 * all 5 images as siblings rather than split across two separate rows).
 * Scrollbar hidden across engines; overflow-x stays auto so touch/trackpad
 * scrolling keeps working. No JS, no transitions.
 */
.is-swipe-row {
	display: flex;
	overflow-x: auto;
	gap: var(--wp--preset--spacing--gutter);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.is-swipe-row::-webkit-scrollbar {
	display: none;
}

.is-swipe-row > * {
	flex: 0 0 72%;
	scroll-snap-align: start;
}

@media (min-width: 48rem) {
	.is-swipe-row {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		overflow-x: visible;
	}

	/* Three to a row by default (3, 6, 9 photos). The rules below handle the
	   counts that don't divide by three, so the last row is never one orphan:
	   2 = two halves, 4 = four across, 5 = three then two, 7 = four then
	   three. :first-child:nth-last-child(N) matches a row with exactly N
	   children (a quantity query), so the editor can add or remove a photo
	   and the layout follows. */
	.is-swipe-row > * {
		grid-column: span 4;
	}

	.is-swipe-row > :first-child:nth-last-child(2),
	.is-swipe-row > :first-child:nth-last-child(2) ~ * {
		grid-column: span 6;
	}

	.is-swipe-row > :first-child:nth-last-child(4),
	.is-swipe-row > :first-child:nth-last-child(4) ~ * {
		grid-column: span 3;
	}

	.is-swipe-row > :first-child:nth-last-child(5) ~ :nth-child(n+4) {
		grid-column: span 6;
	}

	.is-swipe-row > :first-child:nth-last-child(7),
	.is-swipe-row > :first-child:nth-last-child(7) ~ :nth-child(-n+4) {
		grid-column: span 3;
	}
}

/*
 * Mobile-only scroll hint for the swipe row above: a small circular chevron
 * button pinned to the row's right edge. It lives on .is-swipe-row-wrap (a
 * plain, non-scrolling parent) rather than inside .is-swipe-row itself, so it
 * stays fixed in place while the row scrolls under it instead of scrolling
 * away. Its positioning box is sized/placed as a 4:3 box matching one card's
 * image (not the card, which also includes the caption) so it's vertically
 * centered on the images specifically. That positioning box stays
 * pointer-events:none so it doesn't block swipes across the rest of its
 * (mostly empty) area — only the small circular button inside re-enables
 * pointer-events, and its onclick advances the row by one card's width
 * (matching the JS-in-markup pattern already used for footer.html's
 * scroll-to-top button, since this theme has no other enqueued script).
 */
.is-swipe-row-wrap {
	position: relative;
}

.is-swipe-row-hint {
	position: absolute;
	top: 0;
	right: 0;
	width: 72%;
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 0.5rem;
	pointer-events: none;
}

.is-swipe-row-next {
	/* Look: shared with .scroll-to-top above (48px circle, so well over the
	   44px tap minimum). Here: re-enable taps inside the pass-through hint box
	   and swap the page's "→" text for the same chevron the scroll-to-top
	   button draws (Lucide chevron-right, 2px round stroke), as a mask so it
	   takes the button's text colour on hover/focus too. The glyph in the
	   markup stays (no page edits) but is hidden with font-size 0. */
	pointer-events: auto;
	font-size: 0;
	line-height: 0;
}

.is-swipe-row-next::before {
	content: "";
	width: 1.5rem;
	height: 1.5rem;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (min-width: 48rem) {
	.is-swipe-row-hint {
		display: none;
	}
}

/*
 * Project tiles (Home and Skjutdörrsgarderober, "Våra projekt" / "Our work"):
 * six cards, a 3x2 grid on desktop and one swipe row on phones. Both come
 * from .is-swipe-row above (six children = three to a row), so .tricky-tiles
 * needs no layout rules of its own; it stays on the row as a hook for the
 * 4:5 tile photos below.
 */

/* The scroll hint centres itself on a 4:3 photo; the tiles' photos are 4:5. */
.is-swipe-row-wrap:has(.tricky-tiles) .is-swipe-row-hint {
	aspect-ratio: 4 / 5;
}

/* Home and Skjutdörrsgarderober split the six tiles into two rows of three,
   each under its own line of text; clear space between the two. */
.tile-subsection + .tile-subsection {
	margin-top: var(--wp--preset--spacing--section);
}

/*
 * Image cards (Home tricky tiles, Skjutdörrsgarderober "Inspiration"). Each
 * card is a Group block (.tricky-tile) holding an Image block linked to its
 * Inspiration anchor and an H3 (.tricky-tile__label) with the same link, so
 * the photo can be replaced in the block editor. Both links stay text-colored
 * with no underline; hovering or focusing either one turns the label red,
 * so the card still reads as one target. No hover animation on the image
 * (red only for hover/focus states).
 */
.tricky-tile .wp-block-image {
	margin: 0;
}

/* Core makes the image link inline-block, which leaves a descender gap
   under the photo; as a block the label sits exactly 0.75rem below it. */
.tricky-tile .wp-block-image a {
	display: block;
}

.tricky-tile img {
	display: block;
	width: 100%;
}

.tricky-tile a {
	color: inherit;
	text-decoration: none;
}

.tricky-tile__label {
	margin: 0.75rem 0 0;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
}

.tricky-tile:hover .tricky-tile__label a,
.tricky-tile:focus-within .tricky-tile__label a {
	color: var(--wp--preset--color--accent-hover);
}

/*
 * Vertical crop position for cover-cropped Image blocks, as a class (Advanced
 * > Additional CSS class) because the Image block has no focal-point setting
 * and an inline object-position makes the editor flag the block as invalid.
 * The number is the vertical position in percent (50% 25% = a little above
 * centre).
 */
.wp-block-image.crop-y-15 img {
	object-position: 50% 15%;
}

.wp-block-image.crop-y-25 img {
	object-position: 50% 25%;
}

/*
 * Light button hover/focus (styles/blocks/light-button.json, used by the
 * homepage hero's Cover block button). The variation JSON already sets
 * these, but WordPress prints the variation's resting colours after its
 * :hover/:focus-visible colours, both at :where() zero specificity, so the
 * resting colours always win. This restates the hover with real specificity.
 */
.wp-block-button.is-style-light-button .wp-block-button__link:hover,
.wp-block-button.is-style-light-button .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--light);
}

/*
 * Reusable button styles (styles/blocks/secondary-button.json and
 * primary-button.json; pick them under Styles in the Button block's sidebar).
 * Like the light button above, the variations only register the style and its
 * resting look: WordPress prints their :hover colours before the resting ones
 * at zero specificity, so everything that matters is restated here.
 *
 * Secondary (outlined): accent outline and text, transparent fill; solid accent
 * on hover and keyboard focus. On white (accent text 7.4:1) and on the grey
 * bands (6.8:1) it is red. On the dark band red text would be 2.6:1, so there
 * it is a white outline with white text (18.9:1); the hover is the same solid
 * accent (white on accent 7.4:1).
 *
 * Primary (red): the same solid accent button as the header "Boka måttagning";
 * accent-hover on hover and focus.
 */
.wp-block-button.is-style-secondary-button .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--accent);
	border: 1.5px solid var(--wp--preset--color--accent);
	border-radius: 0;
	font-weight: 600;
	text-decoration: none;
}

.wp-block-button.is-style-secondary-button .wp-block-button__link:hover,
.wp-block-button.is-style-secondary-button .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--light);
}

.is-style-dark-section .wp-block-button.is-style-secondary-button .wp-block-button__link {
	color: var(--wp--preset--color--light);
	border-color: var(--wp--preset--color--light);
}

.is-style-dark-section .wp-block-button.is-style-secondary-button .wp-block-button__link:hover,
.is-style-dark-section .wp-block-button.is-style-secondary-button .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--light);
}

.is-style-dark-section .wp-block-button.is-style-secondary-button .wp-block-button__link:focus-visible {
	outline-color: var(--wp--preset--color--light);
}

.wp-block-button.is-style-primary-button .wp-block-button__link {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--light);
	border: 0;
	border-radius: 0;
	font-weight: 600;
	text-decoration: none;
}

.wp-block-button.is-style-primary-button .wp-block-button__link:hover,
.wp-block-button.is-style-primary-button .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--light);
}

.is-style-dark-section .wp-block-button.is-style-primary-button .wp-block-button__link:focus-visible {
	outline-color: var(--wp--preset--color--light);
}

/*
 * The section-ending links used to be paragraphs, whose own margin kept them
 * clear of what is above (a tile row, a photo grid). A Buttons block has no
 * margin, so these button rows get the space back. Core zeroes the margin of a
 * first child, so a button row that opens a section is not pushed down.
 */
.wp-block-buttons:has(> .wp-block-button.is-style-secondary-button),
.wp-block-buttons:has(> .wp-block-button.is-style-primary-button) {
	margin-top: 1.5rem;
}

/*
 * Privacy notice under the booking forms' submit button (added to the forms'
 * submit_html in Formidable). Small, secondary text; the link has no underline
 * at rest, like other links, and gains one (with accent-hover) on hover.
 */
:is(#form_bokamttagning, #form_bokamttagning-en) .frm-privacy-notice {
	margin: 1rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--secondary);
}

:is(#form_bokamttagning, #form_bokamttagning-en) .frm-privacy-notice a {
	color: inherit;
	text-decoration: none;
}

:is(#form_bokamttagning, #form_bokamttagning-en) .frm-privacy-notice a:hover {
	color: var(--wp--preset--color--accent-hover);
	text-decoration: underline;
}

/*
 * Home hero call button ("Frågor? Ring en människa." / "Questions? Call a
 * human."; class hero-call-button on pages 411 and 44): filled brand red with
 * white text, a step larger than the standard button. White on the accent (#AA1818) is
 * 7.4:1 (WCAG AA needs 4.5:1); on accent-hover (#8A1212) it is 10.2:1. Hover and
 * keyboard focus both darken it; the focus outline is white because the
 * button sits on a dark photo (the global ink outline would vanish there).
 */
.wp-block-button.hero-call-button .wp-block-button__link {
	background-color: var(--wp--preset--color--accent);
	color: #fff;
	padding: 1rem 2rem;
	font-size: 1.25rem;
	font-weight: 600;
}

/* Phones: less side padding so the Swedish label stays on one line at 390px. */
@media (max-width: 30rem) {
	.wp-block-button.hero-call-button .wp-block-button__link {
		padding-right: 1.25rem;
		padding-left: 1.25rem;
	}
}

.wp-block-button.hero-call-button .wp-block-button__link:hover,
.wp-block-button.hero-call-button .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--accent-hover);
	color: #fff;
}

.wp-block-button.hero-call-button .wp-block-button__link:focus-visible {
	outline-color: #fff;
}

/*
 * Inspiration galleries (.inspiration-grid, a Group of Image blocks): the
 * Inspiration page and Home's Inspiration section. Laid out like Bomann's own
 * feed: 1 column on phones, 2 on tablets, 3 from 64rem, every image a square
 * centre crop (CSS only; the files keep their full frame) and never shown
 * wider than 640px. The gap is the same both ways.
 */
.inspiration-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
}

.inspiration-grid > * {
	margin-block: 0;
}

@media (min-width: 601px) {
	.inspiration-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.inspiration-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.inspiration-grid .wp-block-image {
	max-width: 640px;
}

.inspiration-grid .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	object-position: center;
}

/*
 * "AI visualisation" label: the Image block style of that name (Styles panel
 * in the editor). functions.php adds the label as real text on the site; the
 * editor shows the same label with ::before, since it doesn't run that filter.
 */
.wp-block-image.is-style-ai-visualisation {
	position: relative;
}

.wp-block-image.is-style-ai-visualisation .ai-visualisation-label,
.editor-styles-wrapper .wp-block-image.is-style-ai-visualisation::before {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 1;
	padding: 0.125rem 0.5rem;
	background: var(--wp--preset--color--light);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.editor-styles-wrapper .wp-block-image.is-style-ai-visualisation::before {
	content: "AI visualisation";
}

/*
 * Våra projekt's room-category jump links (.project-filters paragraph):
 * pill buttons instead of plain inline text links, so it reads as a set of
 * filters rather than a run-on sentence. gap handles the spacing the old
 * " · " separators used to -- the markup carries none any more.
 */
.project-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.project-filters a {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 1rem;
	/* Dark red outline by default -- a neutral ink border didn't read as
	   clickable; red (the same token used for the filled/selected and hover
	   states below) signals it up front. */
	border: 1px solid var(--wp--preset--color--accent);
	/* Same radius as the header's "Boka måttagning" nav CTA (below) and the
	   hero's own button (styles/blocks/light-button.json), not a full pill. */
	border-radius: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

/*
 * Hover matches the filled/selected look below (dark red fill, light text)
 * rather than a lighter hint -- hovering any pill previews what clicking it
 * looks like, not a separate third state.
 */
.project-filters a:hover,
.project-filters a:focus-visible {
	background-color: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--light);
}

/*
 * Filled state for whichever room the URL's #fragment currently points at.
 * :target only reflects the address bar, not scroll position, which is
 * exactly right here -- these are click-to-jump filters, not a
 * continuously-updating scroll-spy, so no JS is needed. :has() lets a
 * descendant's :target state style an unrelated element elsewhere in the
 * same scope (the pattern this theme already uses for the swatch-grid and
 * FAQ-item counters, in the same stylesheet).
 */
.wp-block-post-content:has(#bedroom:target) .project-filters a[href="#bedroom"],
.wp-block-post-content:has(#sloped-ceiling:target) .project-filters a[href="#sloped-ceiling"],
.wp-block-post-content:has(#under-stairs:target) .project-filters a[href="#under-stairs"],
.wp-block-post-content:has(#stairwell:target) .project-filters a[href="#stairwell"],
.wp-block-post-content:has(#room-divider:target) .project-filters a[href="#room-divider"],
.wp-block-post-content:has(#hall:target) .project-filters a[href="#hall"],
.wp-block-post-content:has(#walk-in:target) .project-filters a[href="#walk-in"],
.wp-block-post-content:has(#showroom:target) .project-filters a[href="#showroom"] {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--light);
}

/*
 * Booking page, top section (50 / 416): the eyebrow, H1, line and call button
 * on the left, a team photo with a caption on the right, vertically centred
 * against each other. The photo has a fixed 4:3 shape (it never depends on the
 * text beside it). On phones the columns stack: text and button first, then the
 * photo. 4px corners, the radius of the site's buttons and pills.
 */
.page-photo-columns .page-photo {
	margin: 0;
}

.page-photo-columns .page-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 50% 30%;
	border-radius: 0;
}

/*
 * Home hero: a core Cover block (class home-hero) with one image, the
 * "hero-scrim" gradient as its overlay (theme.json; editable under Overlay in
 * the block sidebar) and the content group (.home-hero__content: title,
 * subtitle, call button) inside it, bottom left. The image and the text are
 * edited in the block editor like any Cover; this only adds the spacing and the
 * text rules below. It replaced the old image carousel and its script, so
 * there are no slide controls any more.
 */
.wp-site-blocks .home-hero {
	padding: 0;
}

.wp-site-blocks .home-hero__content {
	width: 100%;
	padding-top: 2rem;
	padding-bottom: 2rem;
}

/* Keeps the heading and subhead readable over the lighter parts of the photo,
   on top of the scrim. */
.wp-site-blocks .home-hero__content :is(h1, p) {
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

/*
 * Hero title (English home page): the theme's h1 size and weight now; this only keeps the title no
 * wider than 20em so it does not run across the whole photo. In the constrained layout core centres
 * anything with a max-width, so the title gets the left margin the other children get (the space
 * beside the 90rem content column, none below that width) and lines up with the subtitle and the
 * button.
 */
.wp-site-blocks .home-hero__content h1 {
	max-width: 20em;
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 90rem)) / 2)) !important;
	margin-right: auto !important;
}

/*
 * Rounded corners (8px) on the images inside the content width: image blocks
 * (single images, the category tiles, the swipe rows, the inspiration grids)
 * and the picture in a media-and-text block. Cover blocks get the same radius
 * and hide their overflow so the photo and the overlay follow the corners.
 * Anything full-width (alignfull: the home hero, the full-width page-header
 * Covers, the full-width photos) runs edge to edge and stays square; see the
 * reset below. Also not rounded: the logo and the flag in the header, the
 * footer logo (all outside the page content), the material swatches
 * (.roland-swatch) and the map (not an image).
 */
.wp-block-post-content :is(.wp-block-image, .wp-block-media-text__media) img,
.wp-block-post-content .wp-block-media-text__media {
	border-radius: 0;
}

.wp-block-post-content .wp-block-media-text__media {
	overflow: hidden;
}

.wp-block-post-content .wp-block-cover {
	border-radius: 0;
	overflow: hidden;
}

.wp-block-post-content .roland-swatch .wp-block-image img,
.wp-block-post-content .roland-swatch-grid .wp-block-image img {
	border-radius: 0;
}

/* Full-width (alignfull) elements stay square on all four corners. */
.wp-block-post-content .wp-block-cover.alignfull,
.wp-block-post-content .wp-block-image.alignfull img {
	border-radius: 0;
}

/* >>> single-row header (managed block) */
/*
 * Single-row header (layout and styling only; the blocks in parts/header.html
 * are unchanged, so everything stays editable in the Site Editor).
 *
 * Desktop (from 1170px): one row. Logo on the left, the page links in the
 * middle, then the phone number, the solid "Boka måttagning" button and the
 * language switcher on the right. The source order is logo, phone + button,
 * page links, language; flex order puts the page links before the phone and
 * button, and the auto margins centre them between the logo and the button.
 * The page links are smaller (13px) and lighter (500 instead of 700) so
 * eight of them fit with the rest.
 */
header .header-bar .header-pages .wp-block-navigation-item__content.wp-block-navigation-item__content {
	font-size: 0.8125rem;
	font-weight: 500;
}

header .header-bar .nav-link-phone .wp-block-navigation-item__content.wp-block-navigation-item__content,
header .header-bar .nav-link-cta .wp-block-navigation-item__content.wp-block-navigation-item__content {
	font-size: 0.8125rem;
}

@media (min-width: 1170px) {
	header .header-bar {
		flex-wrap: nowrap;
	}

	header .header-bar .header-pages {
		order: 1;
		margin-inline: auto;
	}

	header .header-bar .header-actions {
		order: 2;
		margin-left: 0;
	}

	header .header-bar .header-lang {
		order: 3;
	}
}

/*
 * Phones (up to 599px): one row only: logo, phone icon (the number is hidden,
 * the link text stays in the page for screen readers), the button, the
 * language switcher and the menu toggle. The logo takes whatever width is
 * left. The button drops its arrow to save room.
 */
@media (max-width: 599.98px) {
	/* The page gutter (26px at 393px) is too much for a row with five items. */
	header.wp-block-group.has-global-padding {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}

	header .header-bar {
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-start;
		column-gap: 0.125rem;
		padding-top: 0.5rem !important;
		padding-bottom: 0.5rem !important;
	}

	header .header-logo {
		flex: 1 1 0;
		min-width: 5.5rem;
		max-width: 9.5rem;
		padding-right: 0.5rem;
	}

	header .header-bar .header-actions {
		order: 1;
		flex: 0 0 auto;
		margin-left: auto;
	}

	header .header-bar .header-actions .wp-block-navigation__container {
		flex-wrap: nowrap;
		column-gap: 0;
		align-items: center;
	}

	header .header-bar .header-lang {
		order: 2;
		margin-left: 0;
	}

	header .header-bar .header-pages {
		order: 3;
	}

	/* Phone: icon only. font-size 0 hides the number visually; the icon
	   keeps a fixed size so it does not shrink with it. */
	header .header-bar .nav-link-phone .wp-block-navigation-item__content.wp-block-navigation-item__content {
		font-size: 0;
		line-height: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 2.25rem;
		min-height: 2.25rem;
		padding: 0;
	}

	header .header-bar .nav-link-phone .wp-block-navigation-item__content::before {
		width: 1.375rem;
		height: 1.375rem;
		margin: 0;
		vertical-align: baseline;
	}

	header .header-bar .nav-link-cta .wp-block-navigation-item__content.wp-block-navigation-item__content {
		font-size: 0.75rem;
		padding: 0.4rem 0.6rem;
		gap: 0;
		white-space: nowrap;
	}

	header .header-bar .nav-link-cta .wp-block-navigation-item__content::after {
		display: none;
	}

	header .header-bar .header-lang .roland-lang-toggle {
		min-width: 2.25rem;
		padding: 0 0.25rem;
		gap: 0.25rem;
	}
}
/* <<< single-row header */





/* >>> nav dropdown (managed block) */
/*
 * "Skjutdörrsgarderober" dropdown (core/navigation-submenu in
 * parts/header.html and header-en.html: the parent is a link to its own page,
 * "Inredning och walk-in" and "Våra projekt" sit under it). Core opens it on
 * hover and on keyboard focus, and the toggle button next to the parent opens
 * it on click and touch. The links inside use the same 13px / 500 type as the
 * other page links (the rule above covers them), white, underline on hover.
 */
header .header-pages .wp-block-navigation-submenu__toggle {
	color: inherit;
	padding: 0 0 0 0.25rem;
	margin: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
}

/*
 * The arrow is core's thin stroked chevron (fill none, 1.5px stroke, 8.4px), the
 * same one the language switcher draws. It used to be filled with currentColor,
 * which turns the stroked path into a solid triangle. On the desktop bar it sits
 * 3.5px after the word and is centred on it; the mobile menu panel keeps its
 * own layout.
 */
header .header-pages .wp-block-navigation-submenu__toggle svg {
	width: 0.75rem;
	height: 0.75rem;
	fill: none;
	stroke: currentColor;
}

@media (min-width: 1170px) {
	header .header-pages .wp-block-navigation-submenu__toggle {
		display: inline-flex;
		align-items: center;
		margin-left: 3.5px;
		padding: 0;
	}

	header .header-pages .wp-block-navigation-submenu__toggle svg {
		width: 8.4px;
		height: 8.4px;
		margin: 0;
	}
}

header .header-pages .wp-block-navigation-submenu__toggle:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

@media (min-width: 1170px) {
	/* The panel under the parent: dark like the bar, a thin light edge. */
	header.wp-block-group .header-bar .header-pages .wp-block-navigation__submenu-container {
		min-width: 200px;
		padding: 0.5rem 0;
		border-radius: 0;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	}

	header .header-pages .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: block;
		padding: 0.5rem 1rem;
		white-space: nowrap;
	}

	/* Keyboard: core only opens the list once focus is inside it, so Tab from
	   the parent link to its toggle button would leave it closed. Open it
	   whenever keyboard focus is on the parent, the toggle or an item. */
	header .header-pages .wp-block-navigation-submenu:has(:focus-visible) > .wp-block-navigation__submenu-container {
		height: auto;
		width: auto;
		overflow: visible;
		opacity: 1;
		visibility: visible;
	}

	/* While focus moves from the toggle to the first item there is a moment
	   with no :focus-visible inside the list. If it hid at once, the browser
	   would skip its items; hiding is delayed by 0.25s so they stay focusable
	   (it also stops the list flickering when the pointer slips off it). Showing
	   is immediate. */
	header .header-pages .has-child > .wp-block-navigation__submenu-container {
		transition: visibility 0s linear 0.25s, opacity 0.15s ease;
	}

	header .header-pages .has-child:hover > .wp-block-navigation__submenu-container,
	header .header-pages .has-child:has(:focus-visible) > .wp-block-navigation__submenu-container,
	header .header-pages .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		transition-delay: 0s;
	}
}

/* In the phone menu the list is always open, indented under its parent. */
header .header-pages .is-menu-open .wp-block-navigation__submenu-container,
header.wp-block-group .header-bar .header-pages .is-menu-open .wp-block-navigation__submenu-container {
	position: static;
	min-width: 0;
	width: auto;
	height: auto;
	overflow: visible;
	opacity: 1;
	visibility: visible;
	margin: 0.5rem 0 0 0.25rem;
	padding: 0 0 0 1rem;
	background: transparent;
	border: 0;
	border-left: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 0;
	box-shadow: none;
}

header .header-pages .is-menu-open .wp-block-navigation-submenu__toggle {
	display: none;
}
/* <<< nav dropdown */

/*
 * Dark header (parts/header.html, header-en.html): #111111 bar, white logo
 * (attachment 736), white text and icons (white on #111111 is 18.9:1). Links
 * stay white on hover and only gain an underline; none is underlined at rest.
 * The accent button is described below. The selectors are prefixed with header.wp-block-group
 * .header-bar to out-rank the light-theme nav rules above, which are
 * !important; where both have the same weight, this block wins by coming
 * last. The submenu panel (language list) and the mobile overlay get the
 * dark background too, otherwise their white links would sit on white.
 */
header.wp-block-group .header-bar .wp-block-navigation-item__content.wp-block-navigation-item__content,
header.wp-block-group .header-bar .nav-link-phone .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: #ffffff !important;
}

header.wp-block-group .header-bar .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
header.wp-block-group .header-bar .nav-link-phone .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	color: #ffffff !important;
	text-decoration: underline;
}

header.wp-block-group .header-bar .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	color: #ffffff !important;
}

header.wp-block-group .header-bar .wp-block-navigation-item__content:focus-visible,
header.wp-block-group .header-bar .wp-block-navigation__responsive-container-open:focus-visible,
header.wp-block-group .header-bar .wp-block-navigation__responsive-container-close:focus-visible,
header.wp-block-group .header-bar .roland-lang-toggle:focus-visible,
header.wp-block-group .header-bar .header-logo a:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/*
 * "Boka måttagning": accent button, white text; accent-hover on hover, focus
 * and press. Same on the booking page itself. White on #AA1818 is 7.4:1, on
 * #8A1212 10.2:1. The button's edge against the #111111 bar is 2.6:1 at rest
 * (1.9:1 on hover), under the 3:1 a bare UI boundary would need; the white
 * label (7.4:1 or better) is what identifies it. The 2px white focus outline
 * is kept for keyboard focus.
 */
header.wp-block-group .header-bar .wp-block-navigation-item.nav-link-cta .wp-block-navigation-item__content,
header.wp-block-group .header-bar .wp-block-navigation-item.nav-link-cta.current-menu-item .wp-block-navigation-item__content {
	color: #ffffff !important;
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	text-decoration: none;
}

header.wp-block-group .header-bar .wp-block-navigation-item.nav-link-cta .wp-block-navigation-item__content:hover,
header.wp-block-group .header-bar .wp-block-navigation-item.nav-link-cta .wp-block-navigation-item__content:focus-visible,
header.wp-block-group .header-bar .wp-block-navigation-item.nav-link-cta .wp-block-navigation-item__content:active,
header.wp-block-group .header-bar .wp-block-navigation-item.nav-link-cta.current-menu-item .wp-block-navigation-item__content:hover,
header.wp-block-group .header-bar .wp-block-navigation-item.nav-link-cta.current-menu-item .wp-block-navigation-item__content:focus-visible,
header.wp-block-group .header-bar .wp-block-navigation-item.nav-link-cta.current-menu-item .wp-block-navigation-item__content:active {
	color: #ffffff !important;
	background-color: var(--wp--preset--color--accent-hover);
	border-color: var(--wp--preset--color--accent-hover);
	text-decoration: none !important;
}

/* Burger, its close button and the language switcher. */
header.wp-block-group .header-bar .wp-block-navigation__responsive-container-open,
header.wp-block-group .header-bar .wp-block-navigation__responsive-container-close,
header.wp-block-group .header-bar .header-lang,
header.wp-block-group .header-bar .roland-lang-toggle {
	color: #ffffff;
}

header.wp-block-group .header-bar .wp-block-navigation__responsive-container-open svg,
header.wp-block-group .header-bar .wp-block-navigation__responsive-container-close svg {
	fill: currentColor;
}

/* The language switcher's chevron is a stroke, not a fill. */
header.wp-block-group .header-bar .roland-lang-toggle svg {
	fill: none;
	stroke: currentColor;
}

/* Language list and mobile menu overlay: dark panels, white links. */
header.wp-block-group .header-bar .wp-block-navigation__submenu-container {
	background-color: #111111;
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

header.wp-block-group .header-bar .wp-block-navigation__responsive-container.is-menu-open {
	background-color: #111111 !important;
	color: #ffffff !important;
}

/*
 * The hairline under the bar has no job on a dark bar, and its bottom margin
 * fell outside the header and left a cream strip under it, so it is hidden.
 */
header.wp-block-group > .wp-block-separator {
	display: none;
}

/*
 * Right-hand order of the header bar, the same at every width: the burger is
 * always last, at the far right, with the language flag just before it. In the
 * DOM the burger's navigation (.header-pages) comes before .header-lang; below
 * 1456px, where the page links collapse into the burger, flex order puts the
 * language switcher first. From 1456px the links are shown inline and the
 * switcher is last, as before. On phones the actions (phone, button) wrap onto
 * their own line with order 3, as set above.
 */
@media (min-width: 600px) and (max-width: 1169.98px) {
	header .header-bar .header-lang {
		order: 1;
	}

	header .header-bar .header-pages {
		order: 2;
	}
}