/**
 * Section & component styles for the redesign.
 *
 * The shared building blocks the flagship pages compose from: the header and
 * footer chrome, the mobile CTA bar, the tab modules (environment selector,
 * kravuppfyllnad, hub filter), the delivery-gap bar, metric rows, the
 * inspection protocol table and chart, numbered step lists, panels, verify
 * notes and the quote-flow wizard.
 *
 * Design tokens come from theme.json as --wp--preset--* / --wp--custom--*.
 * Values here are layout and component structure only.
 */

/* ---------------------------------------------------------------------------
   Shared primitives
   --------------------------------------------------------------------------- */

/* An inner max-width for chrome (header/footer/mobile bar) that sits outside the
   block layout system. Matches the design's 1240px container. */
.indoor-inner {
	max-inline-size: 78.75rem; /* 1240px + 2×20px gutter */
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--s);
}

/* A soft white card on paper. Block markup usually sets these via attributes;
   the class is here for the hand-built section patterns. */
.indoor-box {
	background-color: var(--wp--preset--color--surface-raised);
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: var(--wp--custom--radius--card);
}

/* Sunken inset panel inside a card — "vad som styr priset", "vad du får". */
.indoor-panel {
	background-color: var(--wp--preset--color--surface-sunken);
	border-radius: var(--wp--custom--radius--field);
	padding: var(--wp--preset--spacing--m);
}

.indoor-panel__row {
	border-block-start: 1px solid var(--wp--preset--color--border-subtle);
	padding-block-start: var(--wp--preset--spacing--xs);
	margin-block-start: var(--wp--preset--spacing--xs);
}

.indoor-panel__row:first-of-type {
	border-block-start: 0;
	padding-block-start: 0;
	margin-block-start: 0;
}

/* Inline "⚠️ verifiera" note — an unverified figure awaiting owner sign-off. */
.indoor-note {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--accent-deep);
}

.has-surface-inverse-background-color .indoor-note {
	color: var(--indoor-eyebrow-on-dark);
}

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */

/*
 * OPAQUE, and with no backdrop-filter. Both matter, for different reasons.
 *
 * The design system already required it: §9.1 item 2 forbids glassmorphism here
 * because every contrast ratio proven in §2 assumes an opaque backdrop, and a
 * translucent header invalidates the whole table the moment content scrolls
 * under it. The rule said so in a comment while doing the opposite.
 *
 * The blur also broke the mobile menu outright. `backdrop-filter` makes an
 * element a containing block for its `position: fixed` descendants, so the
 * navigation overlay — which lives inside this header — was being sized against
 * the header instead of the viewport. It opened as a 130px sliver behind the
 * page rather than a full-screen menu, which reads as "the menu is hidden under
 * the content". Removing the filter restores the viewport as its containing
 * block. `transform`, `filter` and `will-change` would all do the same damage.
 */
.indoor-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 60;
	background-color: var(--wp--preset--color--surface);
	border-block-end: 1px solid var(--wp--preset--color--border-subtle);
}

.indoor-header__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	text-decoration: none;
	color: var(--wp--preset--color--text-primary);
}

.indoor-header__brand:hover {
	text-decoration: none;
}

.indoor-header__wordmark {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: -0.012em;
}

.indoor-header__actions {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
}

.indoor-header__phone {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.85rem;
	color: var(--wp--preset--color--text-primary);
	text-decoration: none;
	white-space: nowrap;
}

/* The phone link is a secondary path; below the fold of the header on small
   screens it is dropped to protect the layout (the drawer repeats it). */
@media (width < 48em) {
	.indoor-header__phone {
		display: none;
	}
}

/*
 * The brand mark beside the site title.
 *
 * Only the flower is in the file, not the full lockup. The supplied logo puts
 * "INDOOR PROFESSIONAL AB" at 8.2% of its own height, so at any size a header
 * can carry the letters are 3-5px tall; the name is set as live text instead.
 *
 * Sized on the BLOCK axis because the mark is portrait (287x391) — constraining
 * width would let the stem push the header taller on its own. `inline-size:auto`
 * keeps the ratio.
 *
 * The [width][height] in the selector answers base.css's `img[width][height] {
 * height: auto }`, which is 0,2,1 and would otherwise tie with a plain
 * two-class rule and win or lose on file order.
 */
.indoor-header .wp-block-site-logo img[width][height] {
	block-size: 46px;
	inline-size: auto;

	/*
	 * The stem tails off below the petals with nothing beside it, so the mark's
	 * optical centre sits above its geometric one. Nudging it down settles the
	 * petals against the wordmark's x-height instead of leaving them riding high.
	 */
	transform: translateY(1px);
}

/*
 * The "AB" suffix in the data face, sitting on the wordmark's baseline.
 *
 * It used to be `align-self: flex-end`, which worked only while the brand row
 * was the height of the wordmark. Adding the logo made the row 46px tall, and
 * flex-end pinned "AB" to the bottom of THAT — about 8px below the baseline it
 * belongs on, reading as a detached scrap rather than a suffix.
 *
 * Centring it in the row is the stable version: it tracks the row height
 * instead of the tallest item in it. The small nudge closes the last few pixels
 * to the wordmark's baseline and is in `em`, so it scales with the suffix
 * rather than drifting if either font size changes.
 */
.indoor-header__name {
	/*
	 * The name and its suffix share a baseline, and the pair is then centred
	 * against the logo as one unit by the brand group above.
	 *
	 * This is a nested group rather than three siblings in one flex row for a
	 * concrete reason: baseline-aligning the title directly against the logo
	 * pulls it 8px off centre, and centring "AB" against the row leaves it 3.6px
	 * above the wordmark's baseline. Neither is fixable with a nudge that stays
	 * correct when a font size changes — the offset is a function of two
	 * different half-leadings. Giving the text its own baseline context makes
	 * the alignment exact and self-maintaining.
	 */
	align-items: baseline;
}

.indoor-header__ab {
	margin: 0;
	font-size: 0.66rem;
	line-height: 1;
	color: var(--wp--preset--color--text-muted);
}

/* Mega-menu: the Städtjänster panel opens as a white two-column card, as in the
   design (white surface, paper hover on each row). */
.indoor-header .wp-block-navigation__submenu-container {
	min-inline-size: 33rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 var(--wp--preset--spacing--s);
	background-color: var(--wp--preset--color--surface-raised);
	border-radius: 18px;
	padding: var(--wp--preset--spacing--s);
}

.indoor-header .wp-block-navigation__submenu-container .wp-block-navigation-item {
	inline-size: auto;
}

.indoor-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.indoor-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background-color: var(--wp--preset--color--surface);
	border-radius: 10px;
}

/* ---------------------------------------------------------------------------
   Related-services chips
   A row of rounded links that green their border on hover, as in the design.
   --------------------------------------------------------------------------- */

.indoor-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2-xs);
	margin-block-start: var(--wp--preset--spacing--s);
}

.indoor-tag {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	padding: 0.5rem 1.1rem;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-primary);
	text-decoration: none;
	transition:
		border-color var(--wp--custom--transition--fast),
		background-color var(--wp--custom--transition--fast),
		color var(--wp--custom--transition--fast);
}

.indoor-tag:hover,
.indoor-tag:focus-visible {
	border-color: var(--wp--preset--color--brand-primary);
	background-color: var(--wp--preset--color--surface-raised);
	color: var(--wp--preset--color--brand-primary);
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
   Light buttons on colour bands
   A white button on the dark or green bands must not flip to the theme's default
   green hover — that would be green-on-green / low contrast. It deepens to the
   sunken tint instead, keeping its own text colour readable.
   --------------------------------------------------------------------------- */

.has-surface-inverse-background-color .wp-block-button__link.has-surface-background-color:hover,
.has-surface-inverse-background-color .wp-block-button__link.has-surface-background-color:focus,
.has-brand-primary-background-color .wp-block-button__link.has-surface-background-color:hover,
.has-brand-primary-background-color .wp-block-button__link.has-surface-background-color:focus {
	background-color: var(--wp--preset--color--surface-sunken);
}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */

/* Rounded top corners over the paper page, as in the design. */
.indoor-footer {
	border-start-start-radius: 28px;
	border-start-end-radius: 28px;
}

/* The service/company columns: reset the list markers lists.css would add. */
.indoor-footer__nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--2-xs);
}

.indoor-footer__nav li {
	margin: 0;
	padding: 0;
}

.indoor-footer__nav li::before {
	content: none;
}

.indoor-footer__nav a {
	color: var(--wp--preset--color--text-on-dark-muted);
	font-size: var(--wp--preset--font-size--small);
}

/* The lead column's phone, set larger in the data face. */
/*
 * Same size as the email and address beneath it — the review asked whether the
 * number should be set larger, and the answer is no: the column reads as one
 * even contact list. The mono face still marks it as a number, and the
 * undimmed colour still marks it as the primary route.
 */
.indoor-footer__phone a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-on-dark);
}

/* ---------------------------------------------------------------------------
   Footer certification row

   Was a text line — "FR2000 · AAA kreditvärdighet · Almega · Fora" — and is now
   the marks themselves. Still a list, because a screen reader should announce
   four items rather than one run-on string, and still gated: the pattern emits
   nothing at all when no credential is verified.
   --------------------------------------------------------------------------- */

.indoor-footer__certs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2-xs);
	align-items: center;

	/*
	 * The old text line was pushed right with `margin-inline-start: auto` so it
	 * balanced the copyright. Four marks are wide enough that they always wrap
	 * to their own line, where an auto margin does nothing but make the
	 * alignment unpredictable; left is where every other row in the bar starts.
	 */
	margin: var(--wp--preset--spacing--2-xs) 0 0;
	padding: 0;
	list-style: none;
	letter-spacing: 0.08em;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
}

.indoor-footer__certs > li::marker {
	content: "";
}

/* ---------------------------------------------------------------------------
   Mobile CTA bar
   Persistent Ring / Boka besiktning bar under ~1024px (brief requirement).
   --------------------------------------------------------------------------- */

.indoor-mobile-bar {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 60;
	display: none;
	gap: 1px;
	background-color: rgb(27 33 36 / 20%);
	border-block-start: 1px solid rgb(27 33 36 / 20%);
}

.indoor-mobile-bar a {
	flex: 1;
	padding: var(--wp--preset--spacing--s);
	text-align: center;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
}

.indoor-mobile-bar__call {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text-primary);
}

.indoor-mobile-bar__book {
	flex: 1.4;
	background-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--text-on-dark);
}

@media (width < 64em) {
	.indoor-mobile-bar {
		display: flex;
	}

	/* Keep the fixed bar from covering the last of the content / footer. */
	body:has(.indoor-mobile-bar) {
		padding-block-end: 4.25rem;
	}
}

/* ---------------------------------------------------------------------------
   Tab module
   Environment selector, kravuppfyllnad, hub filter. Progressive enhancement:
   without JS every panel is shown stacked (crawlable, usable); with JS the
   list becomes real tabs and only the selected panel shows.
   --------------------------------------------------------------------------- */

.indoor-tabs__list {
	display: flex;
	gap: var(--wp--preset--spacing--2-xs);
	overflow-x: auto;
	padding-block-end: var(--wp--preset--spacing--2-xs);
	scrollbar-width: thin;
}

.indoor-tab {
	white-space: nowrap;
	cursor: pointer;
	border-radius: var(--wp--custom--radius--pill);
	padding: 0.65rem 1.1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	border: 1px solid var(--wp--preset--color--border-strong);
	background-color: transparent;
	color: var(--wp--preset--color--text-primary);
	min-block-size: 44px;
	transition:
		background-color var(--wp--custom--transition--fast),
		border-color var(--wp--custom--transition--fast);
}

.indoor-tab[aria-selected="true"],
.indoor-tab.is-active {
	background-color: var(--wp--preset--color--brand-primary);
	border-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--text-on-dark);
}

/* Enhanced: hide the panels JS has marked hidden. Non-enhanced: show all. */
.indoor-tabs[data-enhanced] .indoor-tabs__panel[hidden] {
	display: none;
}

.indoor-tabs__panel {
	margin-block-start: var(--wp--preset--spacing--m);
}

/* Kravuppfyllnad panel: requirement intro beside a numbered checklist. */
.indoor-kravpanel {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: clamp(1.5rem, 3vw, 2.25rem);
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

.indoor-kravpanel__intro h3 {
	margin-block: 0 var(--wp--preset--spacing--xs);
}

.indoor-kravpanel__intro p {
	color: var(--wp--preset--color--text-secondary);
	max-inline-size: 30em;
}

.indoor-kravpanel__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.65rem;
	align-content: start;
}

.indoor-kravpanel__list li {
	display: flex;
	gap: 0.75rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--text-secondary);
}

.indoor-kravpanel__list .num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--brand-primary);
	padding-block-start: 0.15rem;
	flex: none;
}

.indoor-tabs:not([data-enhanced]) .indoor-tabs__panel + .indoor-tabs__panel {
	margin-block-start: var(--wp--preset--spacing--m);
}

/* ---------------------------------------------------------------------------
   Selectable chips (multi/single select in the quote flow)
   --------------------------------------------------------------------------- */

.indoor-chip {
	cursor: pointer;
	border-radius: var(--wp--custom--radius--pill);
	padding: 0.75rem 1.25rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	border: 1px solid var(--wp--preset--color--border-strong);
	background-color: var(--wp--preset--color--surface-raised);
	color: var(--wp--preset--color--text-primary);
	min-block-size: 44px;
}

.indoor-chip[aria-pressed="true"] {
	background-color: var(--wp--preset--color--brand-primary);
	border-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--text-on-dark);
}

/* ---------------------------------------------------------------------------
   Delivery-gap bar (hero)
   A static, meaningful statement: contracts promise >90%, the market delivers
   55–65%. The green segment is what gets done, the terracotta what does not.
   --------------------------------------------------------------------------- */

.indoor-gapbar {
	display: grid;
	gap: 0.7rem;
	max-inline-size: 32em;
	border-block-start: 1px solid var(--wp--preset--color--border-subtle);
	padding-block-start: var(--wp--preset--spacing--s);
}

.indoor-gapbar__labels {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--s);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--text-muted);
	text-transform: uppercase;
}

.indoor-gapbar__track {
	block-size: 10px;
	border-radius: 8px;
	background-color: rgb(27 33 36 / 10%);
	overflow: hidden;
	display: flex;
}

.indoor-gapbar__done {
	background-color: var(--wp--preset--color--support-green);
}

.indoor-gapbar__gap {
	background-color: var(--wp--preset--color--brand-accent);
}

/* ---------------------------------------------------------------------------
   Metrics row (trust numbers, industry nyckeltal)
   --------------------------------------------------------------------------- */

.indoor-metrics {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--m) var(--wp--preset--spacing--xl);
}

.indoor-metric__value {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.875rem;
	letter-spacing: -0.01em;
	line-height: 1.05;
	color: var(--wp--preset--color--text-primary);
}

.indoor-metric__label {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
	margin-block-start: 0.25rem;
	max-inline-size: 14em;
}

.has-surface-inverse-background-color .indoor-metric__value {
	color: var(--wp--preset--color--text-on-dark);
}

.has-surface-inverse-background-color .indoor-metric__label {
	color: var(--wp--preset--color--text-on-dark-muted);
}

/* ---------------------------------------------------------------------------
   Numbered steps
   --------------------------------------------------------------------------- */

.indoor-steps {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--s);
}

/*
 * There is no `.indoor-steps__num` any more, and no flex row to hold it.
 *
 * These lists were emitting their own "01" span while lists.css was also
 * drawing a counter through `.indoor-steps > li::before`, so every step showed
 * its number twice — once small and mono, once large and serif. The generated
 * counter is the better of the two (it renumbers itself when a step is added or
 * removed), so the markup span went and this rule went with it.
 */

/* ---------------------------------------------------------------------------
   Inspection protocol table + monthly chart (example data)
   --------------------------------------------------------------------------- */

.indoor-datatable {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.indoor-datatable thead th {
	text-align: start;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--wp--preset--color--text-muted);
	padding: 0.65rem 0.75rem;
}

.indoor-datatable tbody td {
	border-block-start: 1px solid var(--wp--preset--color--border-subtle);
	padding: 0.7rem 0.75rem;
	color: var(--wp--preset--color--text-secondary);
}

.indoor-datatable td.is-score {
	text-align: end;
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
}

.indoor-datatable td.is-score--warn {
	color: var(--wp--preset--color--accent-deep);
}

.indoor-datatable td.is-score--good {
	color: var(--wp--preset--color--brand-primary);
}

.indoor-chart {
	display: flex;
	align-items: flex-end;
	gap: 0.5rem;
	block-size: 120px;
}

.indoor-chart__col {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	gap: 0.35rem;
	block-size: 100%;
}

.indoor-chart__bar {
	inline-size: 100%;
	border-radius: 8px;
	background-color: var(--wp--preset--color--support-green);
	block-size: var(--bar, 50%);
}

.indoor-chart__bar--warn {
	background-color: var(--wp--preset--color--brand-accent);
}

.indoor-chart__val,
.indoor-chart__month {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	color: var(--wp--preset--color--text-muted);
}

/* ---------------------------------------------------------------------------
   Quote flow (four-step wizard)
   Progressive enhancement: without JS all four steps + the contact form show
   stacked as one long form (still submits via CF7). With JS, one step at a time
   plus a progress bar.
   --------------------------------------------------------------------------- */

.indoor-quote__progress {
	block-size: 6px;
	border-radius: var(--wp--custom--radius--pill);
	background-color: rgb(27 33 36 / 10%);
	overflow: hidden;
	margin-block-start: var(--wp--preset--spacing--xs);
}

.indoor-quote__progress span {
	display: block;
	block-size: 100%;
	background-color: var(--wp--preset--color--brand-primary);
	inline-size: var(--progress, 25%);
	transition: inline-size var(--wp--custom--transition--base);
}

.indoor-quote[data-enhanced] .indoor-quote__step[hidden] {
	display: none;
}

/* Large tap-first choice cards for "typ av lokal". */
.indoor-quote__choices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
	gap: var(--wp--preset--spacing--xs);
}

.indoor-choice {
	display: grid;
	gap: 0.3rem;
	text-align: start;
	cursor: pointer;
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--m);
	border: 1px solid var(--wp--preset--color--border-subtle);
	background-color: var(--wp--preset--color--surface-raised);
	color: var(--wp--preset--color--text-primary);
}

.indoor-choice[aria-pressed="true"] {
	background-color: var(--wp--preset--color--brand-primary);
	border-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--text-on-dark);
}

.indoor-choice strong {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.05rem;
}

.indoor-choice span {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.indoor-choice[aria-pressed="true"] span {
	color: var(--wp--preset--color--text-on-dark-muted);
}

.indoor-quote__nav {
	display: flex;
	gap: var(--wp--preset--spacing--xs);
	align-items: center;
	flex-wrap: wrap;
	margin-block-start: var(--wp--preset--spacing--l);
}

/* Quote wizard chrome */
.indoor-quote {
	max-inline-size: 46rem;
	margin-inline: auto;
}

.indoor-quote__bar {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--wp--preset--spacing--s);
}

.indoor-quote__steplabel {
	margin: 0;
}

.indoor-quote__step {
	border: 0;
	padding: 0;
	margin: 0;
	min-inline-size: 0;
}

.indoor-quote__legend {
	display: block;
	float: none;
	inline-size: 100%;
	padding: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--heading-2);
	line-height: 1.14;
	letter-spacing: -0.008em;
	color: var(--wp--preset--color--text-primary);
	margin-block: var(--wp--preset--spacing--l) var(--wp--preset--spacing--xs);
	text-wrap: balance;
}

.indoor-quote__hint {
	color: var(--wp--preset--color--text-muted);
	margin-block-end: var(--wp--preset--spacing--l);
	max-inline-size: 34em;
}

.indoor-quote__checks {
	border: 0;
	padding: 0;
	margin-block-start: var(--wp--preset--spacing--m);
	min-inline-size: 0;
}

/* The back control is a secondary (outline) button; it carries the button
   classes for sizing but not the .wp-block-button.is-style-outline wrapper the
   outline style keys off, so its look is set here. */
.indoor-quote__back {
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--border-strong);
	color: var(--wp--preset--color--text-primary);
}

.indoor-quote__back:hover,
.indoor-quote__back:focus {
	border-color: var(--wp--preset--color--text-primary);
	background-color: var(--wp--preset--color--surface-sunken);
}

.indoor-quote__skip {
	background: none;
	border: 0;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	min-block-size: 44px;
}

.indoor-quote__skip:hover {
	color: var(--wp--preset--color--text-primary);
}

/* The wizard sits on its own focused page; give it room to breathe. */
.indoor-quote-main {
	padding-block: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--2-xl);
}

/* ---------------------------------------------------------------------------
   Rounded colour bands
   The design's in-container panels (dark, green, white) — used instead of
   full-bleed bands for the healthcare, audit and closing sections.
   --------------------------------------------------------------------------- */

.indoor-band {
	border: 1px solid transparent;
	border-radius: 22px;
	padding: clamp(1.75rem, 4vw, 3.25rem);
	margin-block: var(--wp--preset--spacing--section-tight);
}

.indoor-band--bordered,
.indoor-band.has-surface-raised-background-color {
	border-color: var(--wp--preset--color--border-subtle);
}

/* Eyebrow / mono labels are legible on the dark band; on the green band they
   need lightening too (base.css only covers surface-inverse). */
.has-brand-primary-background-color .indoor-eyebrow {
	color: var(--indoor-eyebrow-on-dark);
}

.has-brand-primary-background-color .indoor-mono,
.has-brand-primary-background-color .indoor-label {
	color: rgb(255 255 255 / 75%);
}

/* ---------------------------------------------------------------------------
   Trust strip
   --------------------------------------------------------------------------- */

.indoor-trust {
	border-block: 1px solid var(--wp--preset--color--border-subtle);
}

.indoor-trust__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--m) var(--wp--preset--spacing--xl);
}

.indoor-trust__certs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2-xs);
}

.indoor-trust__badge {
	display: inline-flex;
	align-items: center;
	min-block-size: 3.5rem;
	padding: 0.75rem 1rem;
	background-color: var(--wp--preset--color--surface-raised);
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: 14px;
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Credential marks

   Four issuer logos in their own colours, because recolouring a trademark is
   what the issuers' guidelines forbid. Restraint comes from containment: one
   bounded neutral card per mark, all the same height, so the strip still reads
   as a quiet row rather than a sponsor wall.

   The card is what makes the white-on-white FR2000 badge visible at all — it
   is a white disc, and without the surface-raised fill and the hairline border
   it vanishes into the section behind it.

   Sizing is OPTICAL, not pixel-equal. --indoor-mark-scale comes from each
   credential's own record (business-data.php) and pulls the square badge back
   against three wordmarks; equal heights would let it dominate them.
   --------------------------------------------------------------------------- */

/*
 * A fixed block-size, not a minimum: four cards of four different heights would
 * read as an accident. The card is 4.5rem tall with 0.75rem padding, which
 * leaves exactly the 3rem the mark rule below asks for at scale 1.
 */
.indoor-mark {
	justify-content: center;
	block-size: 4.5rem;
	min-inline-size: 6.5rem;
}

/*
 * The [width][height] in the selector is deliberate, not decoration. base.css
 * sets `img[width][height] { height: auto }` so intrinsic ratios survive when
 * CSS constrains one axis — at 0,2,1 that outspecifies a lone class, and a
 * plain `.indoor-mark__img` rule silently loses the height it asks for. Marks
 * are the one case that constrains the BLOCK axis and lets width follow, so
 * this rule has to match the reset's shape to beat it.
 */
.indoor-mark__img[width][height] {
	block-size: calc(3rem * var(--indoor-mark-scale, 1));
	inline-size: auto;
	max-inline-size: 100%;
	object-fit: contain;
}

/*
 * The footer variant. Same marks on surface-inverse, so each keeps a light
 * card: these files are drawn for light backgrounds and Fora's blue in
 * particular loses almost all its contrast placed straight on the dark band.
 */
.indoor-mark--card {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	/* Overrides .indoor-mark's 4.5rem — the footer row is a footnote, not a band. */
	block-size: 2.5rem;
	min-inline-size: 4rem;
	padding: 0.3rem 0.5rem;
	background-color: var(--wp--preset--color--surface);
	border-radius: 8px;
}

.indoor-mark--card .indoor-mark__img[width][height] {
	block-size: calc(1.6rem * var(--indoor-mark-scale, 1));
}

/* ---------------------------------------------------------------------------
   Environment selector panel
   --------------------------------------------------------------------------- */

.indoor-envpanel {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	overflow: clip;
	margin-block-start: var(--wp--preset--spacing--m);
}

.indoor-envpanel > * {
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.indoor-envpanel > * + * {
	border-inline-start: 1px solid var(--wp--preset--color--border-subtle);
}

.indoor-envpanel__col--proof {
	background-color: var(--wp--preset--color--surface-sunken);
}

.indoor-envpanel__intro h3 {
	margin-block: 0 var(--wp--preset--spacing--2-xs);
}

/*
 * One underline, not two. The border IS the underline here — it sits lower and
 * in brand green rather than the text colour — but the anchor kept the browser
 * default on top of it, so the link was drawn with two rules under it.
 */
.indoor-envpanel__link {
	display: inline-block;
	margin-block-start: var(--wp--preset--spacing--s);
	font-weight: 500;
	text-decoration: none;
	border-block-end: 1px solid var(--wp--preset--color--brand-primary);
}

/*
 * With text-decoration off, hover needs to come from somewhere: the rule
 * thickens instead, which keeps the affordance without reintroducing a second
 * line. Focus is left to the global focus-visible outline.
 */
.indoor-envpanel__link:hover {
	text-decoration: none;
	border-block-end-width: 2px;
	padding-block-end: 0;
}

.indoor-envpanel__list {
	list-style: none;
	margin: var(--wp--preset--spacing--xs) 0 0;
	padding: 0;
	display: grid;
	gap: 0.65rem;
}

.indoor-envpanel__list li,
.indoor-fact,
.indoor-choice + * {
	font-size: var(--wp--preset--font-size--small);
}

.indoor-envpanel__list li {
	position: relative;
	padding-inline-start: 1.15em;
	color: var(--wp--preset--color--text-secondary);
	line-height: 1.5;
}

.indoor-envpanel__list li::before {
	content: "—";
	position: absolute;
	inset-inline-start: 0;
	color: var(--wp--preset--color--brand-primary);
}

/* ---------------------------------------------------------------------------
   Fact rows (healthcare band) + image placeholder slots
   --------------------------------------------------------------------------- */

.indoor-factlist {
	display: grid;
	gap: var(--wp--preset--spacing--xs);
	align-content: start;
}

.indoor-fact {
	display: grid;
	gap: 0.35rem;
	border: 1px solid rgb(255 255 255 / 18%);
	border-radius: 12px;
	padding: 1rem 1.15rem;
}

.indoor-fact__key {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-on-dark);
}

.indoor-fact__val {
	color: var(--wp--preset--color--text-on-dark-muted);
	line-height: 1.5;
	font-size: var(--wp--preset--font-size--small);
}

.indoor-imgslot {
	display: grid;
	place-content: center;
	text-align: center;
	border: 1px dashed var(--wp--preset--color--border-strong);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--l);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--micro);
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted);
}

.indoor-imgslot--43 {
	aspect-ratio: 4 / 3;
}

.indoor-imgslot--32 {
	aspect-ratio: 3 / 2;
}

.indoor-imgslot--169 {
	aspect-ratio: 16 / 9;
}

/* ---------------------------------------------------------------------------
   Long-form document sections

   The privacy policy was composed with the editorial "prosenote" archetype: a
   58% prose column with a decorative margin note beside it repeating one of its
   own sentences. On a legal document that reads as a narrow ribbon of text with
   half the section empty, and the margin note duplicates content a reader is
   expected to read once, carefully.

   This widens the prose to the wide container instead. It is a longer measure
   than the 44rem the theme uses for marketing prose, which is a deliberate
   trade: a policy is scanned for the clause you need rather than read start to
   finish, and the owner asked for the full width of the container.
   --------------------------------------------------------------------------- */

.indoor-section--document > :not(.alignwide, .alignfull) {
	max-inline-size: var(--wp--style--global--wide-size);
}

/* ---------------------------------------------------------------------------
   Section photos

   The filled counterpart of .indoor-imgslot. Same aspect ratios, so a slot that
   gains a photo does not change the layout around it — the box was already
   holding that space.

   object-fit: cover because the source photos are stock and their own framing
   will not match a 3:2 or 4:3 slot; letterboxing them inside the reserved box
   would look like a mistake.
   --------------------------------------------------------------------------- */

.indoor-sectionphoto {
	margin: 0;
	overflow: hidden;
	border-radius: 12px;
}

.indoor-sectionphoto__img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.indoor-sectionphoto--32 { aspect-ratio: 3 / 2; }
.indoor-sectionphoto--43 { aspect-ratio: 4 / 3; }
.indoor-sectionphoto--169 { aspect-ratio: 16 / 9; }

/* ---------------------------------------------------------------------------
   Consent-gated map

   Shares .indoor-imgslot so the box, the dashed border and — crucially — the
   reserved aspect-ratio are identical to the placeholder it replaces. The space
   is claimed before anything loads, so swapping in the iframe shifts nothing.

   The panel is not a loading state: until the visitor presses the button this
   IS the map, and it has to read as a deliberate choice rather than a broken
   embed. Hence the address in real type and a plain sentence saying what the
   button will do.
   --------------------------------------------------------------------------- */

.indoor-map {
	gap: var(--wp--preset--spacing--2-xs);
}

.indoor-map__address {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-primary);
}

.indoor-map__note {
	margin: 0;
	max-inline-size: 30ch;
	margin-inline: auto;
}

.indoor-map__button {
	justify-self: center;
	min-block-size: 44px;
	padding: 0.55rem 1.25rem;
	background-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--text-on-dark);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}

.indoor-map__button:hover,
.indoor-map__button:focus-visible {
	background-color: var(--wp--preset--color--accent-deep);
}

/*
 * Once loaded the box is pure iframe: no padding, no dashed border, and none of
 * the grid centring that positioned the button.
 */
.indoor-map--loaded {
	display: block;
	padding: 0;
	border: 0;
	overflow: hidden;
	border-radius: 12px;
}

.indoor-map--loaded iframe {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

/* On the dark and green bands the button must not be green-on-green. */
.has-surface-inverse-background-color .indoor-map__button,
.has-brand-primary-background-color .indoor-map__button {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text-primary);
}

.has-surface-inverse-background-color .indoor-map__address,
.has-brand-primary-background-color .indoor-map__address {
	color: var(--wp--preset--color--text-on-dark);
}

/* Bordered "ingår"-style tick list on light surfaces. */
.indoor-ticklist {
	list-style: none;
	margin: var(--wp--preset--spacing--m) 0 0;
	padding: 0;
	display: grid;
	gap: 0.7rem;
}

.indoor-ticklist li {
	position: relative;
	padding-inline-start: 1.4em;
	line-height: 1.55;
}

.indoor-ticklist li::before {
	content: "—";
	position: absolute;
	inset-inline-start: 0;
	color: var(--wp--preset--color--brand-primary);
}

.has-surface-inverse-background-color .indoor-imgslot,
.has-brand-primary-background-color .indoor-imgslot {
	border-color: rgb(255 255 255 / 30%);
	color: var(--wp--preset--color--text-on-dark-muted);
}

/* ---------------------------------------------------------------------------
   Inspection follow-up (protocol + chart + steps)
   --------------------------------------------------------------------------- */

.indoor-followup {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	gap: var(--wp--preset--spacing--m);
	margin-block-start: var(--wp--preset--spacing--l);
}

.indoor-followup__side {
	display: grid;
	gap: var(--wp--preset--spacing--m);
	align-content: start;
}

.indoor-followup__protocol,
.indoor-followup__card {
	padding: 0;
}

.indoor-followup__card {
	padding: var(--wp--preset--spacing--m);
}

.indoor-followup__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--wp--preset--spacing--s);
	padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
	border-block-end: 1px solid var(--wp--preset--color--border-subtle);
}

.indoor-followup__head h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
}

.indoor-followup__foot {
	display: flex;
	justify-content: space-between;
	padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
	border-block-start: 1px solid var(--wp--preset--color--border-subtle);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.indoor-followup__avg {
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--text-primary);
}

.indoor-followup__card h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
}

.indoor-followup__meta {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
	margin-block: 0.25rem var(--wp--preset--spacing--m);
}

/* ---------------------------------------------------------------------------
   Panels, calc, cases, contact card, faq
   --------------------------------------------------------------------------- */

.indoor-panel__title {
	font-weight: 500;
	margin: 0;
}

.indoor-panel__text {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
	margin-block-start: 0.25rem;
}

.indoor-panel__note {
	margin-block-start: var(--wp--preset--spacing--s);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	color: var(--wp--preset--color--text-muted);
}

.indoor-calc h3 {
	margin: 0 0 var(--wp--preset--spacing--s);
	font-size: var(--wp--preset--font-size--base);
}

.indoor-calc {
	padding: var(--wp--preset--spacing--m);
}

.indoor-calc__rows {
	margin: 0;
	display: grid;
	gap: 0.55rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.indoor-calc__rows > div {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--m);
}

.indoor-calc__rows dt {
	margin: 0;
}

.indoor-calc__rows dd {
	margin: 0;
	color: var(--wp--preset--color--text-primary);
}

.indoor-calc__result {
	border-block-start: 1px solid var(--wp--preset--color--border-subtle);
	padding-block-start: 0.55rem;
}

.indoor-calc__result dd {
	color: var(--wp--preset--color--brand-primary);
}

.indoor-case {
	padding: var(--wp--preset--spacing--m);
	display: grid;
	gap: var(--wp--preset--spacing--xs);
	align-content: start;
}

.indoor-case__problem {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.4;
}

.indoor-case__result {
	border-block-start: 1px solid var(--wp--preset--color--border-subtle);
	padding-block-start: var(--wp--preset--spacing--xs);
}

.indoor-case__tal {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.5rem;
	color: var(--wp--preset--color--brand-primary);
}

.indoor-case__resultat {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
	margin-block-start: 0.35rem;
}

.indoor-contactcard {
	border: 1px solid rgb(255 255 255 / 24%);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--m);
	display: grid;
	gap: var(--wp--preset--spacing--m);
}

.indoor-contactcard__grid {
	display: grid;
	gap: var(--wp--preset--spacing--s);
}

.indoor-contactcard__grid .indoor-mono {
	color: rgb(255 255 255 / 70%);
}

.indoor-contactcard__phone {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.15rem;
}

/* The details.css component already styles the accordion; this only spaces the
   home FAQ stack, whose items sit flush by design. */
.indoor-faq .wp-block-details {
	border-block-end: 1px solid var(--wp--preset--color--border-subtle);
}

.indoor-faq .wp-block-details:first-child {
	border-block-start: 1px solid var(--wp--preset--color--border-subtle);
}

/* ---------------------------------------------------------------------------
   Redesign rhythm

   The site-wide .indoor-section band padding (up to 104px each side) is tuned
   for full-bleed colour bands on the composed pages; the redesign sits closer,
   section to section (~64px, matching the design's `padding: 64px 0 0`). Scoped
   to the redesign's own templates — front page, service, industry, hub, wide and
   quote — so the composer pages keep their generous banding.
   --------------------------------------------------------------------------- */

.home .indoor-section,
.page-template-page-service .indoor-section,
.page-template-page-wide .indoor-section,
.page-template-page-quote .indoor-section {
	padding-block: var(--wp--preset--spacing--xl);
}

.home .indoor-section--tight,
.page-template-page-service .indoor-section--tight,
.page-template-page-wide .indoor-section--tight,
.page-template-page-quote .indoor-section--tight {
	padding-block: var(--wp--preset--spacing--l);
}

.home .indoor-band,
.page-template-page-service .indoor-band,
.page-template-page-wide .indoor-band,
.page-template-page-quote .indoor-band {
	margin-block: var(--wp--preset--spacing--l);
}

/*
 * The first section — the hero — already has the header (and, on inner pages,
 * the breadcrumb) above it, so it opens with a small top padding rather than a
 * full band's worth. Both the constrained main and the post-content wrapper are
 * covered because the hero is the first child of whichever holds it.
 */
.home .wp-block-post-content > .indoor-section:first-child,
.page-template-page-service #indoor-main > .indoor-breadcrumbs + .wp-block-post-content > .indoor-section:first-child,
.page-template-page-service .wp-block-post-content > .indoor-section:first-child,
.page-template-page-wide .wp-block-post-content > .indoor-section:first-child,
.page-template-page-quote .wp-block-post-content > .indoor-section:first-child {
	padding-block-start: var(--wp--preset--spacing--s);
}

/* Pull the content up under the breadcrumb: drop most of the layout block-gap
   between the breadcrumb and the first content block on inner pages. */
.page-template-page-service #indoor-main > .wp-block-post-content {
	margin-block-start: var(--wp--preset--spacing--s);
}

/*
 * The breadcrumb aligns to the wide content's left edge, not the narrower
 * centred content measure — so it sits far left, level with the hero copy
 * below it, as the design shows.
 */
.page-template-page-service .indoor-breadcrumbs {
	max-inline-size: var(--wp--style--global--wide-size);
	margin-inline: auto;
	text-align: start;
}