/* Hjelseth Base – supplerende stiler. Farger, fonter og størrelser styres av theme.json (child-temaet). */

/* Seksjoner ligger kant i kant – avstand styres av seksjonenes egen padding. */
.wp-site-blocks > main,
.wp-site-blocks > footer,
.wp-block-post-content > .alignfull,
.hb-main > .wp-block-post-content { margin-block-start: 0; }
.wp-block-post-content > .alignfull:last-child { margin-block-end: 0; }

/* Topp */
.hb-header { z-index: 50; border-bottom: 1px solid var(--wp--preset--color--border); }
.hb-header .wp-block-site-logo + .wp-block-site-title { display: none; }
.hb-header .wp-block-site-logo img { height: auto; max-height: 56px; width: auto; }
@media (max-width: 781px) {
	.hb-header .hb-header-cta { display: none; }
}

/* Etikett over overskrifter */
.hb-etikett {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-block-end: 0.5rem;
}
.is-style-seksjon-mork .hb-etikett,
.is-style-seksjon-aksent .hb-etikett { color: inherit; opacity: 0.8; }

/* Lenke med pil */
.hb-pil-lenke a { font-weight: 600; text-decoration: none; }
.hb-pil-lenke a::after { content: "→"; display: inline-block; margin-inline-start: 0.4em; transition: transform var(--wp--custom--transition); }
.hb-pil-lenke a:hover::after { transform: translateX(4px); }

/* Kort: lenken legger seg nederst så kortene blir like */
.is-style-kort { display: flex; flex-direction: column; }
.is-style-kort > .hb-pil-lenke { margin-top: auto; padding-top: 0.5rem; }
.wp-block-columns > .is-style-kort { box-shadow: var(--wp--preset--shadow--sm); }

/* Hele kortet er klikkbart: pil-lenken strekkes over kortet. Teksten kan fortsatt merkes, og lenken er den ene fokuserbare. */
.is-style-kort:has(.hb-pil-lenke a) { position: relative; transition: transform var(--wp--custom--transition), box-shadow var(--wp--custom--transition), border-color var(--wp--custom--transition); }
.is-style-kort .hb-pil-lenke a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.is-style-kort:has(.hb-pil-lenke a):hover { transform: translateY(-4px); box-shadow: var(--wp--preset--shadow--lg); border-color: color-mix(in srgb, var(--wp--preset--color--accent) 40%, var(--wp--preset--color--border)); }
.is-style-kort:has(.hb-pil-lenke a):hover .hb-pil-lenke a::after { transform: translateX(4px); }
.is-style-kort:has(.hb-pil-lenke a:focus-visible) { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }
.is-style-kort .hb-pil-lenke a:focus-visible { outline: none; }
/* Ikon i kort (K2): fylles med profilfargen når kortet holdes over. */
.is-style-kort > .hc-ikon { align-self: flex-start; margin-block-end: var(--wp--preset--spacing--20); }
.is-style-kort:has(.hb-pil-lenke a):hover .hc-ikon--boks,
.is-style-kort:has(.hb-pil-lenke a):hover .hc-ikon--sirkel { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-contrast); }

/* K1 – bilde øverst, kant i kant */
.is-style-kort.hb-kort-bilde { padding: 0 !important; overflow: hidden; }
.hb-kort-bilde > .wp-block-image { margin: 0; }
.hb-kort-bilde > .wp-block-image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; }
.hb-kort-bilde > .hb-kort-innhold { flex: 1; display: flex; flex-direction: column; padding: var(--wp--preset--spacing--40); margin-block-start: 0; }
.hb-kort-innhold > .hb-pil-lenke { margin-top: auto; padding-top: 0.5rem; }

/* K3 – fargekort med stort ikon */
.is-style-kort.hb-kort-farge { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-contrast); border-color: transparent; min-height: 280px; }
.wp-block-column:nth-child(3n+2) > .is-style-kort.hb-kort-farge, .wp-block-columns > .hb-kort-farge:nth-child(3n+2) { background: var(--wp--preset--color--accent-2); }
.wp-block-columns > .hb-kort-farge:nth-child(3n) { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
.hb-kort-farge :is(h2, h3, h4, a), .hb-kort-farge .hb-pil-lenke a { color: inherit !important; }
.hb-kort-farge > p:not(.hb-pil-lenke) { opacity: 0.85; }
.hb-kort-farge > .hc-ikon { color: inherit; margin-block-end: auto; padding-block-end: var(--wp--preset--spacing--50); }
.hb-kort-farge::after { content: "↗"; position: absolute; top: var(--wp--preset--spacing--30); right: var(--wp--preset--spacing--30); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.14); font-size: 1.1rem; transition: transform var(--wp--custom--transition), background var(--wp--custom--transition); }
.hb-kort-farge:hover::after { transform: rotate(45deg); background: rgba(255, 255, 255, 0.28); }

/* Nummer og nøkkeltall */
.hb-nummer {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	margin-block-end: 0.25rem;
}
.hb-tall {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: var(--wp--custom--heading--weight);
	letter-spacing: -0.03em;
	line-height: 1;
	margin-block-end: 0.25rem;
}
.is-style-seksjon-mork .hb-nummer, .is-style-seksjon-mork .hb-tall,
.is-style-seksjon-aksent .hb-nummer, .is-style-seksjon-aksent .hb-tall { color: inherit; }

/* Sjekkliste (C1): ekte hake i fylt sirkel. */
ul.hb-sjekkliste { list-style: none; padding-inline-start: 0; }
ul.hb-sjekkliste li { position: relative; padding-inline-start: 2.2em; margin-block: 0.6em; }
ul.hb-sjekkliste li::before {
	content: ""; position: absolute; left: 0; top: 0.05em; width: 1.5em; height: 1.5em; border-radius: 50%;
	background: var(--wp--preset--color--accent);
}
ul.hb-sjekkliste li::after {
	content: ""; position: absolute; left: 0.3em; top: 0.35em; width: 0.9em; height: 0.9em;
	background: var(--wp--preset--color--accent-contrast);
	-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='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%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='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
:is(.is-style-seksjon-mork, .is-style-seksjon-aksent) ul.hb-sjekkliste li::before { background: currentColor; }
:is(.is-style-seksjon-mork, .is-style-seksjon-aksent) ul.hb-sjekkliste li::after { background: var(--wp--preset--color--contrast); }

/* Fordeler med ikon (C2) */
.hb-fordel > .hc-ikon { margin-block-end: var(--wp--preset--spacing--20); }
.hb-fordel > h3 { font-size: var(--wp--preset--font-size--medium); margin-block-end: 0.25rem; }
.hb-fordel > p { color: var(--wp--preset--color--contrast-2); }
:is(.is-style-seksjon-mork, .is-style-seksjon-aksent) .hb-fordel > p { color: inherit; opacity: 0.85; }

/* Piller med ikon (C3) */
.hb-piller { gap: 0.6rem !important; }
.hb-pille { gap: 0.5rem !important; padding: 0.55rem 1rem; border-radius: var(--wp--custom--radius--pill); background: color-mix(in srgb, var(--wp--preset--color--accent) 10%, var(--wp--preset--color--base)); color: var(--wp--preset--color--accent-2); }
.hb-pille > p { margin: 0; font-weight: 600; font-size: var(--wp--preset--font-size--small); }

/* Tillitsrad under hero (H4) */
.hb-tillit { gap: 0.75rem 2rem !important; padding: 1rem 1.5rem; border-radius: var(--wp--custom--radius--md); background: var(--wp--preset--color--base-2); color: var(--wp--preset--color--contrast-2); }
.hb-tillit > .wp-block-group { gap: 0.5rem !important; }
.hb-tillit p { margin: 0; }
.hb-tillit strong { color: var(--wp--preset--color--contrast); }

/* Butikk-hero (H5): kort med bilde, åpningstider og adresse */
.hb-butikkort { padding: 0 !important; overflow: hidden; box-shadow: var(--wp--preset--shadow--md); }
.hb-butikkort > .wp-block-image { margin: 0; }
.hb-butikkort > .wp-block-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.hb-butikkort > .wp-block-group { padding: var(--wp--preset--spacing--40); margin-block-start: 0; }

/* Prosjekter */
.hb-prosjekt-bilde { margin-block-end: 0.75rem; }
.hb-prosjekt-bilde img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.hb-prosjekt-tekst { color: var(--wp--preset--color--contrast-2); }
.hb-prosjekt-tekst strong { color: var(--wp--preset--color--contrast); }

/* Infostripe (åpningstider, adresse, telefon) */
.hb-info-stripe .wp-block-group { gap: 1rem !important; }
.hb-info-stripe .hb-info-tittel { font-size: var(--wp--preset--font-size--small); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--contrast-2); margin-block-end: 0.35rem; }
.hb-info-stripe .hc-info { font-weight: 600; }

/* Prisliste */
.hb-pris-rad { gap: 1.5rem !important; padding-block: 1.1rem; border-bottom: 1px solid var(--wp--preset--color--border); margin-block-start: 0 !important; }
.hb-pris-rad h3 { font-size: var(--wp--preset--font-size--medium); margin: 0 0 0.2rem; }
.hb-pris-rad p { margin: 0; color: var(--wp--preset--color--contrast-2); }
.hb-pris-rad p.hb-pris { flex: none; font-family: var(--wp--preset--font-family--heading); font-weight: 700; color: var(--wp--preset--color--contrast); white-space: nowrap; }
.hb-pris-rad h4 { font-size: var(--wp--preset--font-size--medium); margin: 0 0 0.15rem; }
.hb-meny-kategori { padding-block-end: 0.5rem; border-bottom: 2px solid var(--wp--preset--color--accent); margin-block-end: 0.25rem; }
/* Priser og nøkkeltall: vanlige tall også i fonter med gammeldagse tall (Playfair, Fraunces). */
.hb-pris, .hb-tall, .hb-nummer { font-variant-numeric: lining-nums tabular-nums; }
.hb-pris-merknad { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--contrast-2); margin-block-start: 1rem; }

/* Booking (B1 knapp-boks, B2 innebygd) */
.hb-booking-boks { border-radius: var(--wp--custom--radius--lg); }
.hb-booking-ramme iframe { display: block; width: 100%; min-height: 720px; border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--lg); background: var(--wp--preset--color--base); }
.hb-booking-ramme .hb-booking-reserve { font-size: var(--wp--preset--font-size--small); margin-block-start: 0.6rem; }

/* «Avrundet» bildestil: theme.json gir alle bilder et hjørne med samme spesifisitet som kjernens stil – denne vinner. */
.wp-block-image.is-style-rounded img { border-radius: 9999px; object-position: 50% 20%; } /* portretter: utsnitt mot ansiktet */

/* Prosess: nummer i sirkel med linje mellom stegene */
.hb-prosess .hb-nummer {
	display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
	background: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-contrast);
	font-size: var(--wp--preset--font-size--medium); position: relative; margin-block-end: var(--wp--preset--spacing--20);
}
@media (min-width: 782px) {
	.hb-prosess > .wp-block-column { position: relative; }
	.hb-prosess > .wp-block-column:not(:last-child)::after {
		content: ""; position: absolute; top: 1.5rem; left: 3.75rem; right: calc(-1 * var(--wp--preset--spacing--40) + 0.75rem);
		border-top: 2px dashed color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent);
	}
}

/* Kundeomtale */
.wp-block-quote.hb-omtale {
	border: 0; padding: 0; max-width: 820px; margin-inline: auto; text-align: center;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 500; letter-spacing: -0.01em; line-height: 1.3;
}
.wp-block-quote.hb-omtale::before { content: "“"; display: block; font-size: 3em; line-height: 0.6; color: var(--wp--preset--color--accent); }
.wp-block-quote.hb-omtale cite {
	display: block; margin-top: 1.25rem; font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small); font-style: normal; font-weight: 600; letter-spacing: 0;
	color: var(--wp--preset--color--contrast-2);
}

/* Spørsmål og svar */
.wp-block-details summary { cursor: pointer; font-weight: 600; list-style: none; position: relative; padding-inline-end: 2rem; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; position: absolute; right: 0; top: -0.05em; font-size: 1.4em; line-height: 1; color: var(--wp--preset--color--accent); transition: transform var(--wp--custom--transition); }
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details > :not(summary) { margin-block-start: 0.75rem; }

/* CTA */
.hb-cta-telefon { text-align: center; margin-block-start: var(--wp--preset--spacing--30); }

/* Bunn */
.hb-footer .hb-footer-tittel {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; margin-block-end: 0.75rem;
}
.hb-footer .wp-block-separator { opacity: 0.18; margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30); }
.hb-footer a { text-decoration: none; }
.hb-footer a:hover { text-decoration: underline; }
.hb-footer .hb-footer-tekst { opacity: 0.8; max-width: 34ch; }
.hb-footer .wp-block-column > * + * { margin-block-start: 0.4rem; }
/* Valgfrie kolonner (åpningstider, sosiale) skjules når bedriftsinfo-feltet er tomt. Redaktører ser «Legg inn …». */
.hb-footer .hb-footer-valgfri:not(:has(.hc-info)) { display: none; }

/* Lange norske ord (ventilasjonsentreprenør) skal deles pent, ikke brytes midt i eller gå utenfor skjermen. */
:where(h1, h2, h3, .has-display-font-size) { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 480px) {
	.has-display-font-size { font-size: clamp(2rem, 9.5vw, 2.6rem) !important; }
}

/* Tilgjengelighet */
:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Mobilmeny: venstrejustert, store trykkflater */
.hb-header .wp-block-navigation__responsive-container.is-menu-open { padding: var(--wp--preset--spacing--40); }
.hb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.hb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.hb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { align-items: flex-start !important; }
.hb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: var(--wp--preset--spacing--60); }
.hb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 0.25rem; width: 100%; }
.hb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: var(--wp--custom--heading--weight);
	letter-spacing: var(--wp--custom--heading--tracking);
	padding-block: 0.35rem;
}
