/*
 * Halden Tennisklubb – det theme.json ikke dekker.
 *
 * Farger, skrift og avstander kommer fra theme.json som CSS-variabler.
 * Her ligger komponentene fra FigCraft-designet: knappevarianter, kort,
 * ikoner, hero-bildet, fordelslisten, bilderutenettet og sponsorene.
 */

/* ---------- Grunnlag ---------- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Topp, innhold og bunn ligger kant i kant; seksjonene styrer luften selv. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.htk-skille {
	margin: 0 0.75em;
}

.htk-maks-520 {
	max-width: 520px;
}

.htk-maks-440 {
	max-width: 440px;
}

.htk-maks-640 {
	max-width: 640px;
}

.htk-maks-680 {
	max-width: 680px;
}

.htk-maks-900 {
	max-width: 900px;
}

/*
 * Avstander styres av blockGap i blokkene, ikke av marger her.
 * Kolonneblokken har en standard bunnmarg som ville lagt luft
 * under seksjonene som ikke finnes i designet.
 */
.htk-hero .wp-block-columns,
.htk-seksjon .wp-block-columns {
	margin-bottom: 0;
}

/*
 * Enlinjede tekster har tett linjehøyde i designet (auto ≈ 1.2).
 * Brødtekstens 1.55 ville gjort radene i lister og menyer for luftige.
 */
.htk-toppstripe,
.htk-hero__info,
.htk-meta,
.htk-lenke,
.wp-block-read-more,
.htk-flere-saker,
.htk-nokkeltall,
.htk-footer__kolonne,
.htk-footer__klubb,
.htk-footer__bunn,
.wp-block-button__link {
	line-height: 1.25;
}

/* ---------- Etiketter ---------- */

.htk-etikett {
	font-size: var(--wp--preset--font-size--metadata);
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;
}

.htk-etikett-liten {
	font-size: var(--wp--preset--font-size--etikett-liten);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--wp--preset--color--primaer);
}

p.htk-pille {
	display: inline-block;
	width: fit-content;
	padding: 6px 12px;
	border-radius: 999px;
}

/* ---------- Knapper ---------- */

.wp-block-button.htk-stor > .wp-block-button__link {
	padding: 16px 26px 16px 28px;
}

.wp-block-button.is-style-sekundaer > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--primaer);
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--primaer);
}

.wp-block-button.is-style-sekundaer > .wp-block-button__link:hover {
	background: var(--wp--preset--color--primaer-lys);
}

.wp-block-button.is-style-noytral > .wp-block-button__link {
	background: var(--wp--preset--color--hvit);
	color: var(--wp--preset--color--overskrift);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--kant);
}

.wp-block-button.is-style-noytral > .wp-block-button__link:hover {
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--overskrift);
}

.wp-block-button__link:focus-visible,
a:focus-visible {
	outline: 2px solid var(--wp--preset--color--primaer);
	outline-offset: 3px;
}

/* ---------- Ikoner (se inc/ikoner.php) ---------- */

.htk-ikon-etter .wp-block-button__link,
.htk-ikon-etter > a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.htk-ikon-etter .wp-block-button__link::after,
.htk-ikon-etter > a::after,
.htk-ikon-foran::before,
.htk-ikonboks::before,
.htk-ikonlinje::before {
	content: "";
	display: inline-block;
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--htk-ikon) center / contain no-repeat;
	mask: var(--htk-ikon) center / contain no-repeat;
}

.htk-ikon-etter .wp-block-button__link::after,
.htk-ikon-etter > a::after {
	width: 14px;
	height: 14px;
}

.htk-ikon-etter > a {
	gap: 6px;
}

.htk-ikon-foran {
	display: flex;
	align-items: center;
	gap: 8px;
}

.htk-ikon-foran::before {
	width: 16px;
	height: 16px;
	background-color: var(--wp--preset--color--primaer);
}

.htk-ikonboks {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin: 0;
	border-radius: 14px;
	background: var(--wp--preset--color--primaer-lys);
	color: var(--wp--preset--color--primaer);
}

.htk-ikonboks::before {
	width: 24px;
	height: 24px;
}

.htk-ikonlinje {
	margin: 0;
	line-height: 0;
	color: var(--wp--preset--color--primaer);
}

.htk-ikonlinje::before {
	width: 22px;
	height: 22px;
}

/* ---------- Lenker ---------- */

.htk-lenke,
.wp-block-read-more.htk-lenke {
	font-weight: 600;
	color: var(--wp--preset--color--primaer);
}

.htk-lenke--liten {
	font-size: var(--wp--preset--font-size--liten);
}

/* ---------- Kort ---------- */

.wp-block-group.is-style-kort {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	background: var(--wp--preset--color--hvit);
}

.htk-snarvei {
	height: 100%;
	padding: 28px;
	border: 1px solid var(--wp--preset--color--kant);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.htk-snarvei:hover {
	border-color: var(--wp--preset--color--pa-mork);
	box-shadow: var(--wp--preset--shadow--kort);
}

.htk-snarvei .htk-lenke {
	margin-top: auto;
	padding-top: 6px;
}

/* Hele kortet er klikkbart via lenken nederst. */
.htk-strekk::before {
	content: "";
	position: absolute;
	inset: 0;
}

.htk-nyhetskort {
	height: 100%;
}

.htk-nyhetskort__bilde {
	width: 100%;
	margin: 0;
}

.htk-nyhetskort__bilde img {
	border-radius: 0;
}

.htk-nyhetskort__tekst {
	flex: 1 1 auto;
	width: 100%;
	box-sizing: border-box;
}

.htk-nyhetskort .wp-block-post-title {
	margin: 0;
}

.htk-nyhetskort .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primaer);
	text-decoration: none;
}

.htk-nyhetskort .wp-block-post-excerpt,
.htk-nyhetskort .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.htk-nyhetskort .wp-block-read-more {
	margin-top: auto;
}

/* Kortene har egen «Les saken»-blokk; utdragets «les mer»-felt brukes ikke. */
.wp-block-post-excerpt__more-link {
	display: none;
}

/* Dato · kategori */
.htk-meta > * + *::before {
	content: "·";
	margin: 0 0.6em;
	color: var(--wp--preset--color--dempet);
}

.htk-meta .wp-block-post-terms a {
	color: inherit;
}

/* ---------- Hero ---------- */

.htk-hero__bilde {
	position: relative;
	display: block;
	aspect-ratio: 560 / 480;
	overflow: hidden;
	border-radius: 24px;
	background: var(--wp--preset--color--kant);
}

.htk-hero__bilde img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.htk-hero__bilde:hover img {
	transform: scale(1.02);
}

.htk-hero__brikke {
	position: absolute;
	left: 24px;
	bottom: 24px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: calc(100% - 48px);
	padding: 14px 18px;
	border-radius: 14px;
	background: var(--wp--preset--color--hvit);
	box-shadow: var(--wp--preset--shadow--kort);
}

.htk-hero__brikke-tittel {
	font-size: var(--wp--preset--font-size--brodtekst);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--overskrift);
}

/* ---------- Siste nytt: flere saker ---------- */

.htk-flere-saker .wp-block-query {
	margin: 0;
}

.htk-flere-saker__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Spørringsblokken gir hvert innlegg toppmarg; her står de på én linje. */
.htk-flere-saker .htk-flere-saker__liste > li {
	margin: 0;
}

.htk-flere-saker__liste .wp-block-post-title,
.htk-flere-saker__liste .wp-block-post-date {
	margin: 0;
	font-size: var(--wp--preset--font-size--liten);
	color: var(--wp--preset--color--primaer);
}

.htk-flere-saker__liste .htk-flere-saker__dato::before {
	content: "·";
	margin: 0 0.6em;
}

/* ---------- Bilder fra klubben ---------- */

/*
 * Galleriet er kjernens core/gallery (for lightboxen), men med eget
 * rutenett. Kjernens bredder bruker :not(#individual-image), så
 * velgerne her trenger samme ID-vekt for å vinne.
 */
.wp-block-htk-klubbbilder .wp-block-gallery.has-nested-images.htk-bilderutenett {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
}

.wp-block-htk-klubbbilder .wp-block-gallery.has-nested-images.htk-bilderutenett figure.wp-block-image:not(#individual-image) {
	width: auto;
	margin: 0;
}

.wp-block-htk-klubbbilder .htk-bilderutenett img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 16px;
}

@media (max-width: 900px) {
	.wp-block-htk-klubbbilder .wp-block-gallery.has-nested-images.htk-bilderutenett {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.wp-block-htk-klubbbilder .wp-block-gallery.has-nested-images.htk-bilderutenett {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}

/* ---------- Medlemskap: fordeler ---------- */

ul.htk-fordeler {
	margin: 0;
	padding: 8px 32px;
	list-style: none;
	border-radius: 24px;
	background: var(--wp--preset--color--lys);
}

.htk-fordeler li {
	--htk-hake-topp: 50%;
	--htk-hake-flytt: -50%;
	--htk-hake-d: 32px;
	--htk-hake-ikon-x: 9px;
	--htk-hake-ikon-topp: 50%;
	--htk-hake-ikon-d: 14px;
	display: flex;
	align-items: center;
	min-height: 32px;
	padding: 20px 0 20px 48px;
	border-bottom: 1px solid var(--wp--preset--color--kant);
	font-size: var(--wp--preset--font-size--fordel);
	font-weight: 600;
	line-height: 1.45;
	color: var(--wp--preset--color--overskrift);
}

.htk-fordeler li:last-child {
	border-bottom: 0;
}

/* Hake i blå sirkel, felles for .htk-fordeler og .htk-punkter. */
.htk-fordeler li,
.htk-punkter li {
	--htk-ikon: var(--htk-ikon-hake);
	position: relative;
}

.htk-fordeler li::before,
.htk-fordeler li::after,
.htk-punkter li::before,
.htk-punkter li::after {
	content: "";
	position: absolute;
	left: 0;
	top: var(--htk-hake-topp);
	transform: translateY(var(--htk-hake-flytt));
}

.htk-fordeler li::before,
.htk-punkter li::before {
	width: var(--htk-hake-d);
	height: var(--htk-hake-d);
	border-radius: 999px;
	background: var(--wp--preset--color--primaer);
}

.htk-fordeler li::after,
.htk-punkter li::after {
	left: var(--htk-hake-ikon-x);
	top: var(--htk-hake-ikon-topp);
	width: var(--htk-hake-ikon-d);
	height: var(--htk-hake-ikon-d);
	background: var(--wp--preset--color--hvit);
	-webkit-mask: var(--htk-ikon) center / contain no-repeat;
	mask: var(--htk-ikon) center / contain no-repeat;
}

@media (max-width: 520px) {
	ul.htk-fordeler {
		padding: 4px 20px;
	}
}

/* ---------- Om klubben ---------- */

/* ---------- Nyttig å vite ---------- */

.htk-infokort {
	height: 100%;
	box-sizing: border-box;
}

.htk-infokort .htk-lenke {
	margin-top: auto;
}

/* ---------- Sponsorer ---------- */

.htk-sponsorer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-bottom: 0;
	padding: 0;
	list-style: none;
}

.htk-sponsorer li {
	display: flex;
	width: 136px;
	height: 80px;
	border: 1px solid var(--wp--preset--color--kant);
	border-radius: 12px;
	background: var(--wp--preset--color--hvit);
}

.htk-sponsorer a {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
}

.htk-sponsorer li > img,
.htk-sponsorer a > img {
	display: block;
	max-width: 108px;
	max-height: 44px;
	width: auto;
	height: auto;
	margin: auto;
	object-fit: contain;
}

@media (max-width: 520px) {
	.htk-sponsorer li {
		width: calc(50% - 8px);
	}
}

/* ---------- Topp ---------- */

.htk-header__rad {
	gap: 24px;
}

.htk-header .wp-block-site-logo img {
	width: 108px;
	height: auto;
}

.htk-meny {
	flex: 1 1 auto;
}

.htk-meny .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primaer);
}

.htk-header__knapper {
	flex-wrap: nowrap;
}

@media (max-width: 1100px) {
	.htk-meny {
		flex: 0 0 auto;
		order: 3;
	}
}

@media (max-width: 782px) {
	.htk-toppstripe {
		display: none;
	}

	.htk-header__knapper .is-style-sekundaer {
		display: none;
	}

	.htk-header .wp-block-site-logo img {
		width: 84px;
	}
}

/* ---------- Bunn ---------- */

.htk-footer__logo {
	display: inline-block;
	padding: 12px;
	border-radius: 12px;
	background: var(--wp--preset--color--hvit);
	line-height: 0;
}

.htk-footer__logo img {
	width: 108px;
	height: auto;
}

.wp-block-post-content:not(.htk-forside) img {
	height: auto;
	max-width: 100%;
	border-radius: 12px;
}

/* ---------- Sidehoder og tekststiler ---------- */

.has-artikkeltittel-font-size {
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.has-artikkelingress-font-size {
	line-height: 1.5;
}

.has-ingress-font-size {
	line-height: 1.6;
}

.htk-sidehode__innhold .wp-block-search {
	width: 100%;
	max-width: 640px;
}

.htk-sidehode__innhold > * {
	margin-block: 0;
}

.htk-sideinnhold > :first-child:not(.alignfull) {
	padding-top: clamp(40px, 5vw, 72px);
}

.htk-sideinnhold > :last-child:not(.alignfull) {
	padding-bottom: clamp(48px, 5vw, 80px);
}

/* ---------- Nyhetsarkivet ---------- */

.htk-fremhevet {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 680fr) minmax(0, 520fr);
	overflow: hidden;
	border-radius: 24px;
	background: var(--wp--preset--color--hvit);
}

.htk-fremhevet--uten-bilde {
	grid-template-columns: minmax(0, 1fr);
}

.htk-fremhevet__bilde {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 680 / 420;
	object-fit: cover;
}

.htk-fremhevet__tekst {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	padding: 48px 56px;
}

.htk-fremhevet__tekst > * {
	margin: 0;
}

p.htk-fremhevet__etikett {
	padding: 5px 10px;
	background: var(--wp--preset--color--primaer-lys);
}

.htk-fremhevet .htk-meta {
	display: flex;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--metadata);
	color: var(--wp--preset--color--dempet);
}

.htk-fremhevet__tittel {
	font-size: var(--wp--preset--font-size--overskrift-3);
	line-height: 1.2;
}

.htk-fremhevet__tittel a {
	color: var(--wp--preset--color--overskrift);
}

.htk-fremhevet:hover .htk-fremhevet__tittel a {
	color: var(--wp--preset--color--primaer);
	text-decoration: none;
}

.htk-fremhevet__utdrag {
	font-size: var(--wp--preset--font-size--ingress);
	line-height: 1.6;
}

@media (max-width: 782px) {
	.htk-fremhevet {
		grid-template-columns: minmax(0, 1fr);
	}

	.htk-fremhevet__bilde {
		aspect-ratio: 16 / 9;
	}

	.htk-fremhevet__tekst {
		padding: 28px 24px;
	}
}

/* Sidetall: runde knapper, nåværende side fylt. */
.wp-block-query-pagination.htk-sidetall {
	gap: 8px;
	margin: 0;
	padding-top: 8px;
}

.htk-sidetall .wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.htk-sidetall .page-numbers,
.htk-sidetall .wp-block-query-pagination-previous,
.htk-sidetall .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 44px;
	height: 44px;
	margin: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--hvit);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--kant);
	font-size: var(--wp--preset--font-size--brodtekst);
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--overskrift);
	text-decoration: none;
}

.htk-sidetall .wp-block-query-pagination-previous,
.htk-sidetall .wp-block-query-pagination-next {
	padding: 0 20px 0 22px;
}

.htk-sidetall a:hover {
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--overskrift);
	text-decoration: none;
}

.htk-sidetall .page-numbers.current {
	background: var(--wp--preset--color--primaer);
	box-shadow: none;
	color: var(--wp--preset--color--hvit);
}

.htk-sidetall .page-numbers.dots {
	min-width: 0;
	background: none;
	box-shadow: none;
	color: var(--wp--preset--color--dempet);
}

.htk-sidetall .htk-deaktivert {
	opacity: 0.45;
}

/* ---------- Nyhetsartikkel ---------- */

.htk-brodsmuler {
	font-weight: 600;
	line-height: 1.25;
}

.htk-brodsmuler li:not(:last-child)::after {
	margin: 0 8px;
	opacity: 1;
	font-weight: 400;
	color: var(--wp--preset--color--dempet);
}

.htk-artikkelmeta {
	line-height: 1.25;
	color: var(--wp--preset--color--dempet);
}

.htk-artikkelmeta p,
.htk-artikkelmeta .wp-block-post-date,
.htk-artikkelmeta .wp-block-post-author-name {
	margin: 0;
	font-size: inherit;
	color: inherit;
}

/* Bildet står halvveis ned i det lyse artikkelhodet. */
.htk-hovedbilde {
	background: linear-gradient(var(--wp--preset--color--lys) 50%, var(--wp--preset--color--hvit) 50%);
}

.htk-hovedbilde__bilde {
	margin: 0;
}

.htk-hovedbilde__bilde img {
	border-radius: 24px;
}

.htk-artikkeltekst .wp-block-post-content {
	line-height: 1.7;
}

.htk-artikkeltekst .wp-block-post-content h2 {
	font-size: var(--wp--preset--font-size--artikkel-mellomtittel);
	line-height: 1.25;
}

.htk-artikkeltekst .wp-block-post-content h3 {
	font-size: var(--wp--preset--font-size--korttittel);
	line-height: 1.3;
	letter-spacing: 0;
}

.htk-artikkeltekst .wp-block-post-content :where(ul, ol) {
	padding-left: 1.25em;
}

.htk-artikkeltekst .wp-block-post-content li + li {
	margin-top: 6px;
}

.htk-artikkeltekst .wp-block-quote {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-inline: 0;
	padding: 4px 0 4px 28px;
	border-left: 4px solid var(--wp--preset--color--primaer);
}

.htk-artikkeltekst .wp-block-quote > * {
	margin: 0;
}

.htk-artikkeltekst .wp-block-quote p {
	font-size: var(--wp--preset--font-size--sitat);
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--navy);
}

.htk-artikkeltekst .wp-block-quote cite {
	font-size: var(--wp--preset--font-size--liten);
	font-style: normal;
	line-height: 1.25;
	color: var(--wp--preset--color--dempet);
}

.htk-artikkelbunn {
	line-height: 1.25;
}

.htk-artikkelbunn p {
	margin: 0;
}

/* ---------- Undersider ---------- */

/* Fullbredde-seksjoner ligger kant i kant, uten innholdets blokkavstand mellom seg. */
.htk-sideinnhold > .alignfull {
	margin-block-start: 0;
}

.htk-maks-720 {
	max-width: 720px;
}

/* Kort med ramme: Inne/Ute, stegene, spørsmålskortet, partnerkortene, huskelisten, prisboksene, styrekortene og vervkortene. */
.htk-tilbud,
.htk-steg,
.htk-sporsmalkort,
.htk-partnerkort,
.htk-huskeliste,
.htk-pris,
.htk-pristabell,
.htk-styrekort,
.htk-verv {
	box-sizing: border-box;
	height: 100%;
	border: 1px solid var(--wp--preset--color--kant);
}

.htk-tilbud {
	padding: clamp(24px, 3vw, 36px);
}

.htk-steg,
.htk-sporsmalkort,
.htk-huskeliste {
	padding: clamp(24px, 2.5vw, 32px);
}

/* Lenke som er en knapp i innholdet, slik at adressen kan bindes til Klubbinfo. */
.wp-block-button.htk-lenkeknapp > .wp-block-button__link {
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-weight: 600;
	color: var(--wp--preset--color--primaer);
}

.wp-block-button.htk-lenkeknapp > .wp-block-button__link:hover {
	text-decoration: underline;
}

.wp-block-button.htk-lenkeknapp.htk-ikon-etter > .wp-block-button__link {
	gap: 6px;
}

/* Punktliste med hake i blå sirkel. */
ul.htk-punkter {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.htk-punkter li {
	--htk-hake-topp: 0.5px;
	--htk-hake-flytt: 0;
	--htk-hake-d: 22px;
	--htk-hake-ikon-x: 6px;
	--htk-hake-ikon-topp: 6.5px;
	--htk-hake-ikon-d: 10px;
	padding-left: 34px;
}

/* Hvite bokser på lys flate (Halleie og Greencard). */
.htk-boks {
	box-sizing: border-box;
	height: 100%;
	padding: 24px;
	border-radius: 16px;
	background: var(--wp--preset--color--hvit);
}

ul.htk-fordeler.htk-fordeler--rund-20 {
	border-radius: 20px;
}

/* Tallkort på mørk flate (Strömstad). */
.htk-tallkort {
	box-sizing: border-box;
	height: 100%;
	padding: 28px;
	border: 1px solid var(--wp--preset--color--navy-kant);
	border-radius: 20px;
}

/* Nummerert sirkel i stegene. */
p.htk-stegnr {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--primaer);
	font-size: var(--wp--preset--font-size--mellomtittel);
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--hvit);
}

/* Nivåfargene (--htk-farge og --htk-tone per nivåstil) genereres av htk_nivaa_css() i functions.php. */

/* Ukeplanen: én kolonne per dag, én rad per økt. */
.htk-dag {
	box-sizing: border-box;
	height: 100%;
	padding: 16px;
	border: 1px solid var(--wp--preset--color--kant);
	border-radius: 16px;
	background: var(--wp--preset--color--hvit);
}

.htk-dag__navn {
	margin: 0;
	padding: 4px 4px 8px;
	font-size: var(--wp--preset--font-size--mellomtittel);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.25;
}

.htk-okt {
	border-radius: 8px;
	padding: 12px 14px;
	background: var(--htk-tone);
	box-shadow: inset 4px 0 0 var(--htk-farge);
}

.htk-okt > * {
	margin: 0;
	line-height: 1.2;
}

.htk-okt__tid,
.htk-okt__bane {
	font-size: var(--wp--preset--font-size--metadata);
	color: var(--wp--preset--color--dempet);
}

.htk-okt__navn {
	font-size: var(--wp--preset--font-size--liten);
	font-weight: 600;
	color: var(--wp--preset--color--overskrift);
}

/* Nivåkort. */
.htk-nivaakort {
	box-sizing: border-box;
	height: 100%;
	min-height: 150px;
	padding: 24px;
	border: 1px solid var(--wp--preset--color--kant);
	border-radius: 16px;
	background: var(--wp--preset--color--hvit);
}

.htk-nivaanavn {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: var(--wp--preset--font-size--mellomtittel);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.25;
}

.htk-nivaanavn::before {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	border-radius: 999px;
	background: var(--htk-farge);
}

@media (max-width: 520px) {
	.htk-okt__navn {
		font-size: var(--wp--preset--font-size--brodtekst);
	}
}

/* ---------- Øvrige tilbud ---------- */

/* Tjenestene hos Henrik: liten ikonboks ved siden av tittel og tekst. */
.htk-tjeneste {
	align-items: flex-start;
}

.htk-tjeneste .htk-ikonboks {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 14px;
}

.htk-tjeneste .htk-ikonboks::before {
	width: 24px;
	height: 24px;
}

.htk-ovrig-kontakt {
	padding-top: 4px;
}

/* Partnerkort: bilde øverst, tekst under; kortene i en rad er like høye. */
.htk-partnerkort__bilde {
	box-sizing: border-box;
	width: 100%;
	height: 180px;
	margin: 0;
}

.htk-partnerkort__bilde img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.htk-partnerkort__bilde--logo {
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid var(--wp--preset--color--kant);
}

.htk-partnerkort__bilde--logo img {
	width: auto;
	height: auto;
	max-width: 240px;
	max-height: 124px;
	object-fit: contain;
}

.htk-partnerkort__tekst {
	box-sizing: border-box;
	flex: 1;
	padding: 28px;
}

.htk-partnerkort__tekst > * {
	margin: 0;
}

.htk-partnerkort__tekst ul.htk-punkter {
	gap: 14px;
}

/* ---------- Turneringer ---------- */

/* Merknad på blå flate med «i»-merke til venstre. Teksten har hengende innrykk (20 + ikon 20 + gap 14), så alle linjer starter på samme x. */
p.htk-merknad {
	position: relative;
	display: block;
	padding: 20px 20px 20px 54px;
	border-radius: 16px;
	background: var(--wp--preset--color--primaer-lys);
	font-size: var(--wp--preset--font-size--brodtekst);
	line-height: 1.55;
	color: var(--wp--preset--color--overskrift);
}

p.htk-merknad::before {
	position: absolute;
	left: 20px;
	top: 20px;
	width: 20px;
	height: 20px;
	background-color: var(--wp--preset--color--primaer);
}

/* Lisenstrinn: nummerert sirkel til venstre, tekst til høyre, skillelinje mellom trinnene. */
.htk-lisenssteg {
	width: 100%;
	padding: 24px 0;
	border-bottom: 1px solid var(--wp--preset--color--kant);
}

.htk-lisenssteg > .wp-block-group {
	flex: 1;
	min-width: 0;
}

.htk-lisenssteg p.htk-stegnr {
	flex: none;
	width: 40px;
	height: 40px;
	font-size: var(--wp--preset--font-size--mellomtittel);
}

.htk-lisenssteg .htk-lenke {
	margin: 0;
}

/* Huskeliste: hvitt kort med ramme på lys flate. */
.htk-huskeliste {
	width: 100%;
	height: auto;
}

/* Priser. */

/* Kontingentkort: etikett, beløp og beskrivelse. Beløpet står i 44 px (tall) og krymper bare når kortet er smalere enn i designet. Som i FigCraft kan «3 700 kr» rage inn i høyre padding (innholdsboksen er 166 px, teksten 178 px; boksen utvides 14 px). Et lengre beløp brytes til neste linje, aldri klippes. */
.htk-pris {
	padding: 28px;
	container-type: inline-size;
}

.htk-pris p {
	margin: 0;
}

p.htk-pris__belop {
	margin-right: -14px;
	font-size: min(var(--wp--preset--font-size--tall), calc((100cqi + 12px) / 4.045));
	overflow-wrap: anywhere;
}

/* Baneleie: prisboks med linjer. Etikett og pris står i en flex-rad, så lengre tekst eller flere linjer bryter ikke oppsettet. */
.htk-pristabell {
	padding: 36px;
	align-items: stretch;
}

.htk-prislinjer {
	align-items: stretch;
}

.htk-prislinje {
	padding-block: 16px;
	border-bottom: 1px solid var(--wp--preset--color--kant);
}

.htk-prislinje:last-child {
	border-bottom: 0;
}

.htk-prislinje > p {
	margin: 0;
}

.htk-prislinje > p:last-child {
	flex: 0 1 auto;
	text-align: right;
}

/* ---------- Styret ---------- */

/* Styrekort: bildeflate øverst (portrett eller initialer), rolle og navn under. Kortene ligger direkte i et rutenett, så et kort kan legges til eller fjernes uten annen markup. */
.htk-styrekort__bilde {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 280px;
	margin: 0;
	background: var(--wp--preset--color--lys);
}

.htk-styrekort__bilde:has(img) {
	align-items: flex-end;
}

.htk-styrekort__bilde > .wp-block-image {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 100%;
	margin: 0;
}

.htk-styrekort .htk-styrekort__bilde .wp-block-image {
	width: 100%;
	max-width: none;
}

.htk-styrekort .htk-styrekort__bilde .wp-block-image img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
	object-position: top;
}

p.htk-styrekort__initialer {
	display: grid;
	place-items: center;
	width: 112px;
	height: 112px;
	margin: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--primaer-lys);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1;
	color: var(--wp--preset--color--primaer);
}

.htk-styrekort__tekst {
	box-sizing: border-box;
	width: 100%;
	padding: 24px;
}

.htk-styrekort__tekst > * {
	margin: 0;
}

p.htk-styrekort__rolle {
	font-size: var(--wp--preset--font-size--etikett-liten);
}

/* Andre verv: hvitt kort med overskrift og ett avsnitt per navn. */
.htk-verv {
	padding: 28px;
}

.htk-verv > * {
	margin: 0;
}