/* Norsk Husisolering: keeps the old site's look on styrk-blocks.
   Colours come from theme.json (Mose/Stein, darkened just enough for WCAG AA). */

/* ─────────── Header ─────────── */
.site-header-react .rh-logo img,
.site-header-react .rh-logo-stack img {
	height: 79px;
	width: auto;
	max-height: none;
}

.site-header-react .rh-desktop-link {
	font-size: 18px;
	font-weight: 500;
}

/* Menu spread across the header like the old site; the flags sit by the search icon. */
@media (min-width: 1024px) {
	.site-header-react .rh-desktop-nav {
		flex: 1 1 auto;
		justify-content: flex-start;
		gap: 0;
	}

	.site-header-react .rh-desktop-nav .rh-desktop-link:not([href="/"], [href$="/en/"]) {
		flex: 1 1 0;
		justify-content: center;
	}

	.site-header-react .rh-desktop-nav .rh-desktop-link[href="/"] {
		margin-left: 24px;
	}

	/* The header puts a 36px gap inline between items; pull the flags and the
	   search icon together (about 14px apart, as on the old site). */
	.site-header-react .rh-desktop-nav .rh-desktop-link[href$="/en/"] {
		margin-left: -22px;
	}

	.site-header-react .rh-desktop-nav + .rh-search-trigger {
		margin-left: -30px !important; /* the button sets margin-left inline */
	}
}

/* Language links show the flags, as on the old site; the text stays for screen readers. */
.site-header-react .nhi-lang a,
.site-header-react a.nhi-lang,
.site-header-react .rh-desktop-link[href$="/en/"],
.site-header-react .rh-desktop-link[href="/"] {
	display: inline-block;
	width: 32px;
	min-width: 32px;
	height: 22px;
	padding: 0 !important;
	overflow: hidden;
	color: transparent;
	text-indent: 100%;
	white-space: nowrap;
	background: center / contain no-repeat;
}

.site-header-react .rh-desktop-nav .rh-desktop-link[href="/"] {
	background: url("images/flag-no.svg") center / contain no-repeat !important; /* beats the header's inline background */
}

.site-header-react .rh-desktop-nav .rh-desktop-link[href$="/en/"] {
	background: url("images/flag-gb.svg") center / contain no-repeat !important;
}

/* ─────────── Footer ─────────── */
.nhi-footer {
	font-size: 16px;
}

/* No decorative glow: the old footer was a flat grey band. */
.nhi-footer::before {
	display: none;
}

.nhi-footer .nhi-footer__inner {
	max-width: 1140px;
	margin-inline: auto;
	display: block;
	padding: 128px 16px 16px;
}

.nhi-footer .nhi-footer__cols {
	width: 100%;
	align-items: center;
	gap: 32px;
}

.nhi-footer .site-footer__certs {
	display: grid;
	grid-template-columns: repeat(2, 150px);
	justify-content: center;
	gap: 40px 56px;
	margin: 0;
}

.nhi-footer .site-footer__cert-img {
	width: 150px;
	height: auto;
	max-height: 44px;
	object-fit: contain;
}

.nhi-footer .site-footer__contact-info,
.nhi-footer .site-footer__contact-info a {
	font-size: 16px;
	line-height: 1.6;
	color: #fff;
}

.nhi-footer .nhi-footer__bottom {
	margin-top: 96px;
	font-size: 15px;
}

.nhi-footer .nhi-footer__bottom,
.nhi-footer .nhi-footer__bottom a {
	color: #fff;
}

@media (max-width: 781px) {
	.nhi-footer .nhi-footer__inner {
		padding-top: 64px;
	}

	.nhi-footer .site-footer__certs {
		grid-template-columns: repeat(2, minmax(0, 150px));
		gap: 32px;
	}

	.nhi-footer .nhi-footer__contact {
		text-align: center;
	}
}

/* ─────────── Front page hero: contained photo band like the old site ─────────── */
.nhi-hero.cb-hero {
	max-width: 1140px;
	min-height: 502px;
	margin-inline: auto;
}

.nhi-hero .cb-hero__main {
	padding: 0 16px;
}

.nhi-hero h1 {
	max-width: 460px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: normal;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.nhi-hero .cb-hero-content a,
.nhi-benefits .cb-split-text a.wp-element-button,
.nhi-benefits .cb-split-text .cb-btn {
	border-radius: 0;
	font-size: 22px;
	font-weight: 500;
	text-transform: uppercase;
}

.nhi-hero .cb-hero-content a svg {
	display: none;
}

/* ─────────── Intro text ─────────── */
.nhi-intro h2 {
	color: #212529;
	font-size: 40px;
	font-weight: 600;
}

.nhi-intro .cb-rich-text-body {
	max-width: none;
	color: #212529;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

/* ─────────── Benefits band ─────────── */
.nhi-benefits {
	padding-block: 56px;
}

.nhi-benefits h2 {
	margin-bottom: 40px;
	color: #fff;
	font-size: 26px;
	font-weight: 600;
}

.nhi-house-list {
	padding-left: 16px;
	list-style: none;
}

.nhi-house-list li {
	margin-bottom: 18px;
	padding-left: 46px;
	font-size: 22px;
	font-weight: 400;
	background: url("images/house-outline-white.svg") left center / 30px auto no-repeat;
}

.nhi-question {
	text-align: center;
}

.nhi-question .nhi-question__photo {
	width: 200px;
	margin: 0 auto 24px;
}

.nhi-question .nhi-question__photo img {
	width: 200px;
	height: 284px;
	object-fit: cover;
	border-radius: 2px;
}

.nhi-question h3 {
	margin: 0;
	color: #fff;
	font-size: 32px;
	font-weight: 500;
}

.nhi-question p {
	margin: 0 0 16px;
	font-size: 18px;
}

.nhi-question a:not(.wp-element-button) {
	color: #fff;
	text-decoration: none;
}

.nhi-question .wp-block-buttons {
	justify-content: center;
}

.nhi-main .nhi-question .wp-element-button {
	width: 300px;
	padding: 16px 8px;
	border: 0;
	border-radius: 10px;
	background: #75756e;
	color: #fff;
	font-size: 18px;
	font-weight: 400;
	text-transform: none;
	box-shadow: 5px 5px 5px -5.5px #000;
}

/* The old site showed the hero photo mirrored (hose from the right). */
.nhi-hero .cb-hero__media img,
.nhi-hero > img,
.nhi-hero picture img {
	transform: rotateY(180deg);
	object-position: 100% 0;
}

/* ─────────── References: photo card with a green bar; on hover/focus the green
   panel slides up over the photo and shows name + excerpt (as the old site). ─────────── */
.nhi-references-grid {
	--nhi-card-h: 368px;
	--nhi-bar-h: 110px;
	background: #fff;
}

.nhi-references-grid .grid {
	gap: 16px;
}

.nhi-references-grid .cb-project-card {
	position: relative;
	height: var(--nhi-card-h);
	overflow: hidden;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: #fff;
	color: #fff;
	text-align: center;
}

.nhi-references-grid .cb-project-photo {
	position: absolute;
	inset: 0;
	height: 100%;
	aspect-ratio: auto;
}

/* The sliding panel: parked so only its top bar shows at rest. */
.nhi-references-grid .cb-project-card > .p-6 {
	position: absolute;
	inset: 0;
	z-index: 1;
	justify-content: center;
	padding: 24px;
	background: #70775d;
	transform: translateY(calc(100% - var(--nhi-bar-h)));
	transition: transform 0.3s ease-out;
}

/* Short title: centred in the bar at rest, at the top of the panel on hover. */
.nhi-references-grid .cb-project-card__badges {
	position: absolute;
	top: calc(var(--nhi-card-h) - var(--nhi-bar-h));
	right: 16px;
	left: 16px;
	z-index: 2;
	display: flex;
	height: var(--nhi-bar-h);
	align-items: center;
	justify-content: center;
	transition: top 0.3s ease-out, height 0.3s ease-out;
}

.nhi-references-grid .cb-project-card__badge {
	padding: 0;
	border-radius: 0;
	background: none !important; /* styrk-blocks paints the pill with !important */
	color: #fff !important;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
}

.nhi-references-grid .cb-project-card h2,
.nhi-references-grid .cb-project-card h3,
.nhi-references-grid .nhi-card-excerpt {
	opacity: 0;
	transition: opacity 0.2s ease-out;
}

.nhi-references-grid .cb-project-card h2,
.nhi-references-grid .cb-project-card h3 {
	color: #fff;
	font-size: 22px;
	font-weight: 500;
}

.nhi-references-grid .nhi-card-excerpt {
	margin: 0;
	color: #fff;
	font-size: 16px;
	line-height: 1.6;
}

.nhi-references-grid .cb-project-card:is(:hover, :focus-visible) > .p-6 {
	transform: translateY(0);
}

.nhi-references-grid .cb-project-card:is(:hover, :focus-visible) .cb-project-card__badges {
	top: 0;
	height: 76px;
}

.nhi-references-grid .cb-project-card:is(:hover, :focus-visible) :is(h2, h3, .nhi-card-excerpt) {
	opacity: 1;
	transition-delay: 0.1s;
}

.nhi-references-grid .cb-project-card:focus-visible {
	outline: 2px solid #212529;
	outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
	.nhi-references-grid .cb-project-card > .p-6,
	.nhi-references-grid .cb-project-card__badges,
	.nhi-references-grid :is(h2, h3, .nhi-card-excerpt) {
		transition: none;
	}
}

@media (max-width: 781px) {
	.nhi-references-grid {
		--nhi-card-h: 300px;
	}
}

.nhi-references-grid .cb-featured-projects__heading {
	color: #212529;
	font-size: 32px;
	font-weight: 600;
}

.nhi-references-archive .cb-featured-projects__heading {
	font-size: 40px;
	font-weight: 700;
}

/* Single reference: text column and photo grid like the old page. */
.nhi-reference-text h2 {
	color: #212529;
	font-size: 32px;
	font-weight: 600;
}

.nhi-reference-text .cb-rich-text-body {
	max-width: 560px;
	color: #212529;
	font-size: 15px;
}

.nhi-reference-photos img {
	border-radius: 0;
}

.nhi-reference-photos > div,
.nhi-reference-photos .grid {
	max-width: 1140px;
	margin-inline: auto;
}

/* ─────────── Site-wide: the old site's plain look on every section ─────────── */
.nhi-main {
	--nhi-text: #212529;
}

.nhi-main .cb-block-split:not(.nhi-benefits),
.nhi-main .cb-block-rich-text:not(.nhi-benefits) {
	background: #fff;
	color: var(--nhi-text);
}

.nhi-main .cb-block-split:not(.styrk-dark) :is(h1, h2, h3, h4),
.nhi-main .cb-block-rich-text :is(h1, h2, h3, h4) {
	color: var(--nhi-text);
}

.nhi-main .cb-split-body,
.nhi-main .cb-split-text,
.nhi-main .cb-rich-text-body {
	color: var(--nhi-text);
}

.nhi-main .cb-split-text h1,
.nhi-main .cb-rich-text-body h1 {
	font-size: 36px;
	font-weight: 700;
}

.nhi-main .cb-block-rich-text > div > h2,
.nhi-main .cb-block-rich-text h2:first-child {
	font-size: 32px;
	font-weight: 600;
}

.nhi-main .cb-rich-text-body h3 {
	margin-top: 48px;
	font-size: 26px;
	font-weight: 500;
}

.nhi-main .lead {
	font-size: 20px;
	line-height: 1.3;
}

.nhi-main .cb-rich-text-body,
.nhi-main .cb-split-body {
	max-width: none;
	font-size: 16px;
	line-height: 1.5;
}

.nhi-main .wp-block-button__link,
.nhi-main .wp-element-button {
	border-radius: 0;
	background: #70775d;
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
	box-shadow: none;
}

.nhi-main .wp-block-button__link:hover,
.nhi-main .wp-block-button__link:focus-visible {
	text-decoration: underline;
}

/* Services/products: text left, photo top-right, like the old page. */
.nhi-service-top .cb-split-cols {
	align-items: flex-start;
}

.nhi-service-top .cb-split-text {
	justify-content: flex-start;
}

.nhi-service-top img {
	box-shadow: none;
	border-radius: 0;
}

/* ─────────── Page photo band above forms/jobs (as the old pages) ─────────── */
.nhi-page-top {
	max-width: 1140px;
	margin-inline: auto;
	padding-inline: 16px;
}

.nhi-page-photo,
.nhi-page-photo img {
	width: 100%;
	margin: 0;
}

.nhi-page-photo img {
	height: 318px;
	object-fit: cover;
}

.nhi-form-page.cb-block-split {
	padding-top: 40px;
}

.nhi-form-page .cb-split-cols {
	align-items: flex-start;
}

/* Om oss: whole portrait, no crop; the map sits free on the grey band. */
.nhi-about .cb-split-image-wrap img {
	height: auto;
	aspect-ratio: auto;
	object-fit: contain;
	box-shadow: none;
}

.nhi-regions .cb-split-image-wrap,
.nhi-regions .cb-split-image-wrap > *,
.nhi-regions .cb-split-image-wrap img {
	background: transparent;
	box-shadow: none;
}

.nhi-regions .cb-split-image-wrap img {
	max-height: 460px;
	object-fit: contain;
}

/* ─────────── Forms (Forminator) like the old forms ─────────── */
.nhi-main .forminator-ui.forminator-custom-form .forminator-label {
	color: #212529;
	font-size: 16px;
	font-weight: 700;
}

.nhi-main .forminator-ui.forminator-custom-form .forminator-input,
.nhi-main .forminator-ui.forminator-custom-form .forminator-textarea {
	border: 1px solid #555;
	border-radius: 0;
	background: #fff;
	color: #212529;
	font-size: 14px;
}

.nhi-main .forminator-ui.forminator-custom-form .forminator-button-submit {
	border: 1px solid #212529;
	border-radius: 0;
	background: #fff;
	color: #212529;
	font-size: 14px;
	text-transform: none;
}

.nhi-main .forminator-ui.forminator-custom-form .forminator-button-submit:hover,
.nhi-main .forminator-ui.forminator-custom-form .forminator-button-submit:focus-visible {
	background: #70775d;
	color: #fff;
}

/* ─────────── Plain archive lists (/tjenester/, /produkter/) like the old site ─────────── */
.nhi-archive {
	padding-block: 32px 64px;
}

.nhi-archive .wp-block-query-title,
.nhi-archive > h1 {
	font-size: 36px;
	font-weight: 700;
}

.nhi-archive .wp-block-post-title {
	margin: 32px 0 4px;
	font-size: 26px;
	font-weight: 600;
}

.nhi-archive .wp-block-post-title a {
	color: #1a5fb4;
	text-decoration: none;
}

.nhi-archive .wp-block-post-title a:hover,
.nhi-archive .wp-block-post-title a:focus-visible {
	text-decoration: underline;
}

.nhi-archive .wp-block-post-date {
	font-size: 13px;
}

.nhi-archive .wp-block-post-excerpt {
	font-size: 14px;
}

main.nhi-archive .wp-block-post-excerpt a.wp-block-post-excerpt__more-link {
	padding: 0;
	border-radius: 0;
	background: none !important; /* styrk-blocks sets the button look with !important */
	color: #5f654f !important;
	font-size: 14px;
	font-weight: 400;
	text-decoration: underline;
}

/* ─────────── Search fields and focus rings: square, max 2px radius ─────────── */
:root,
body,
.cb-search-page,
.site-header-react {
	--cb-search-card-radius: 2px !important; /* styrk-blocks search hits; the plugin also sets it inline */
}

/* The header sets these radii inline, hence !important. */
.site-header-react :is(.rh-search-trigger, .rh-mobile-toggle),
.rh-search-overlay :is(.rh-search-close, .rh-search-form, .rh-search-form input, a, button),
.cb-search-page :is(.cb-search-page__form, .cb-search-page__form input, .cb-search-page__form button) {
	border-radius: 2px !important;
}

/* Square focus ring: Chrome rounds an offset outline by radius + offset, so even
   2px would show as ~8px. Radius 0 while focused keeps the ring square. */
:is(.site-header-react, .rh-search-overlay, .nhi-main, .nhi-footer, .cb-search-page, .nhi-dialog) :focus-visible {
	border-radius: 0 !important; /* the header sets radii inline */
}

/* ─────────── «Bestill gratis befaring» overlay (Privat / Bedrift) ─────────── */
.nhi-dialog {
	width: 100vw;
	max-width: none;
	height: 100vh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.nhi-dialog[open],
.nhi-dialog:target {
	display: flex;
	align-items: center;
	justify-content: center;
}

.nhi-dialog:target {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgb(112 119 93 / 85%);
}

.nhi-dialog::backdrop {
	background: rgb(112 119 93 / 85%);
}

html.nhi-dialog-open {
	overflow: hidden;
}

.nhi-dialog .nhi-choice {
	gap: 16px;
}

.nhi-dialog .wp-block-button__link {
	padding: 14px 18px;
	border-radius: 2px;
	background: #70775d;
	color: #fff;
	font-size: 22px;
	font-weight: 500;
	text-transform: uppercase;
	box-shadow: 0 0 0 1px rgb(255 255 255 / 60%);
}

.nhi-dialog .wp-block-button__link:is(:hover, :focus-visible) {
	text-decoration: underline;
}

.nhi-dialog .wp-block-button__link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Close: hidden until it gets keyboard focus (Esc and a click outside also close). */
.nhi-dialog__close {
	position: absolute;
	top: 16px;
	right: 16px;
	padding: 8px 12px;
	border: 0;
	border-radius: 2px;
	background: #fff;
	color: #212529;
	font-size: 16px;
	clip-path: inset(50%);
}

.nhi-dialog__close:focus-visible {
	clip-path: none;
	outline: 2px solid #212529;
	outline-offset: 2px;
}

/* Cookie dialog (GDPR Cookie Compliance): tabs square like the rest of the site. */
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-tab-nav,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-tab-nav a,
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-tab-nav button {
	border-radius: 2px;
}
