/*
Theme Name:   Tannkunsten
Theme URI:    https://tannkunsten.no/
Description:  Blocksy child theme for tannkunsten.no. Design tokens live in theme.json and the Blocksy customizer; this file maps them onto the components of the approved design (canvas "Tannkunsten front page", 2026-10-21).
Author:       Reboot Norge AS
Author URI:   https://reboot.no/
Template:     blocksy
Version:      0.2.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain:  tannkunsten
*/

/*
 * Rules for this file: no raw brand colours, font families or font sizes; use var(--wp--preset--…)
 * and var(--wp--custom--…) from theme.json. No box-shadow anywhere (Henrik, 2026-10-21): surfaces
 * are separated with hairlines, tints or overlap.
 */

:root {
	--tk-gold: var(--wp--preset--color--palette-color-1);
	--tk-gold-dark: var(--wp--preset--color--palette-color-2);
	--tk-text: var(--wp--preset--color--palette-color-3);
	--tk-navy: var(--wp--preset--color--palette-color-4);
	--tk-line: var(--wp--preset--color--palette-color-5);
	--tk-sand: var(--wp--preset--color--palette-color-6);
	--tk-cream: var(--wp--preset--color--palette-color-7);
	--tk-white: var(--wp--preset--color--palette-color-8);
	--tk-gutter: clamp(16px, 2.8vw, 40px);
}

/* ------------------------------------------------------------ layout */

/*
 * Blocksy sets --wp--style--global--content-size to its own content style (the full container on
 * pages), so WordPress's constrained layout does not cap text. Sections (`.tk-section`) are
 * alignfull groups; their inner `.tk-wrap` is the 1280 px container with the page gutter.
 */
.entry-content .tk-section > .tk-wrap {
	max-width: calc(var(--wp--custom--width--container) + 2 * var(--tk-gutter)) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--tk-gutter);
	padding-right: var(--tk-gutter);
	box-sizing: border-box;
}

/* Inside the wrap, blocks start at the left edge and take the full width; components set their own widths. */
.entry-content .tk-wrap.is-layout-constrained > :where(:not(.alignfull)) {
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/*
 * Blocksy gives every heading a 1.5 em top margin. Components here space themselves, so headings
 * carry no top margin; article text (`.tk-prose`) re-adds it where headings follow paragraphs.
 */
.entry-content :is(h1, h2, h3, h4, h5, h6) {
	margin-top: 0;
	margin-bottom: 0.45em;
}

.entry-content :is(h1, h2, h3, h4, h5, h6):last-child {
	margin-bottom: 0;
}

/* White band with hairlines (treatments, article area). */
.tk-band-white {
	background: var(--tk-white);
	border-top: 1px solid var(--tk-line);
	border-bottom: 1px solid var(--tk-line);
}

/* Two columns: article + fixed 420 px aside, single column under 960 px. */
.tk-two {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--wp--custom--width--aside);
	gap: 72px;
	align-items: start;
}

.tk-two > .tk-aside {
	position: sticky;
	top: 108px;
}

@media (max-width: 960px) {
	.tk-two {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.tk-two > .tk-aside {
		position: static;
	}
}

/* Columns that stack image-first on phones. */
@media (max-width: 781px) {
	.wp-block-columns.is-reversed-on-mobile > .wp-block-column:last-child {
		order: -1;
	}
}

/* ------------------------------------------------------------ layout */

/*
 * Blocksy sets --wp--style--global--content-size to its own content style (the full 1400 px
 * container on pages), so theme.json's contentSize never applies. Reading width inside a
 * section is capped here instead: text, lists, FAQ and tables at 840 px (the live text column),
 * while alignwide / alignfull children (hero columns, card rows, panels) keep the container.
 */
.entry-content .tk-section.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide):not(.wp-block-columns):not(.wp-block-buttons)),
.entry-content .tk-section .wp-block-column.is-layout-constrained > :where(:not(.alignfull):not(.alignwide)) {
	max-width: var(--wp--custom--width--text);
	margin-left: 0;
	margin-right: 0;
}

/* Centred sections (CTA, section titles) keep their centring. */
.entry-content .tk-section.is-layout-constrained > .has-text-align-center,
.entry-content .tk-section.is-layout-constrained > .wp-block-buttons {
	margin-left: auto;
	margin-right: auto;
}

/* ------------------------------------------------------------ text */

p.is-style-eyebrow,
.tk-eyebrow {
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
	color: var(--tk-navy);
	margin-bottom: 0;
}

p.is-style-eyebrow.has-palette-color-2-color {
	color: var(--tk-gold-dark);
}

p.is-style-lead {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.55;
	color: var(--tk-text);
}

/* Article text (treatment pages, team profiles). */
.tk-prose p,
.tk-prose li {
	font-size: var(--wp--preset--font-size--prose);
	line-height: 1.7;
	color: var(--tk-text);
}

.tk-prose p a,
.tk-prose li a,
p.is-style-lead a {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--wp--preset--color--gold-light);
}

.tk-prose > * + * {
	margin-top: 22px;
}

.tk-prose :is(h2, h3, h4) {
	margin-top: 1.4em;
}

.tk-prose :is(h2, h3, h4) + :is(h2, h3, h4) {
	margin-top: 0.4em;
}

/* Authorship / note line: boxed with a hairline. */
/* Normal text flow, not flex: a note may mix italic, bold, links and a <br> (Periodontitt). */
p.is-style-note {
	position: relative;
	padding: 14px 18px 14px 50px;
	background: var(--tk-cream);
	border: 1px solid var(--tk-line);
	border-radius: 14px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

p.is-style-note::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 50%;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: var(--tk-gold-dark);
	-webkit-mask: url("assets/icons/shield-check.svg") center / contain no-repeat;
	mask: url("assets/icons/shield-check.svg") center / contain no-repeat;
}

/* Breadcrumbs (Yoast block). */
.tk-crumbs,
.tk-crumbs a {
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}

.tk-crumbs .breadcrumb_last {
	color: var(--tk-navy);
}

/* ------------------------------------------------------------ buttons */

.wp-block-button__link {
	min-height: var(--wp--custom--control--height);
	padding: 0 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-transform: none;
	border: 1.5px solid transparent;
}

.wp-block-button.is-style-large .wp-block-button__link {
	min-height: var(--wp--custom--control--height-lg);
	padding: 0 30px;
	font-size: 16px;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--tk-navy);
	border-color: var(--tk-navy);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--tk-navy);
	color: var(--tk-white);
}

.wp-block-button.is-style-light .wp-block-button__link {
	background: var(--tk-white);
	color: var(--tk-navy);
}

.wp-block-button.is-style-light .wp-block-button__link:hover {
	background: var(--tk-sand);
	color: var(--tk-navy);
}

/* Round arrow buttons for the scroller. */
.tk-scroller-nav {
	display: flex;
	align-items: center;
	gap: 10px;
}

.tk-scroller-nav button {
	width: 48px;
	height: 48px;
	border-radius: var(--wp--custom--radius--pill);
	border: 1.5px solid var(--tk-line);
	background: var(--tk-white);
	color: var(--tk-navy);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
}

.tk-scroller-nav button:last-child {
	background: var(--tk-navy);
	border-color: var(--tk-navy);
	color: var(--tk-white);
}

.tk-scroller-nav button[disabled] {
	opacity: 0.4;
	cursor: default;
}

/* ------------------------------------------------------------ hero (front page) */

.tk-hero-photo {
	position: relative;
	min-height: 560px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.tk-hero-photo::before {
	content: "";
	position: absolute;
	inset: 40px 0 0 0;
	background: var(--tk-sand);
	border-radius: var(--wp--custom--radius--hero);
}

.tk-hero-photo .wp-block-image {
	position: relative;
	width: 86%;
	max-width: 560px;
	margin: 0;
}

.tk-hero-photo .wp-block-image img {
	border-radius: 0;
	width: 100%;
	height: auto;
}

/* Opening-hours card hanging over the panel's left edge. */
.tk-hours {
	position: absolute;
	left: -28px;
	bottom: 56px;
	display: grid;
	grid-template-columns: 44px auto;
	column-gap: 14px;
	align-items: center;
	padding: 16px 20px;
	background: var(--tk-white);
	border: 1px solid var(--tk-line);
	border-radius: 16px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	color: var(--tk-navy);
	margin: 0 !important;
}

.tk-hours::before {
	content: "";
	grid-row: 1 / 3;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--tk-sand);
	-webkit-mask: url("assets/icons/clock.svg") center / 22px no-repeat, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: url("assets/icons/clock.svg") center / 22px no-repeat, linear-gradient(#000 0 0);
	mask-composite: exclude;
	background: var(--tk-gold-dark);
}

.tk-hours .tk-hours-label {
	display: block;
	grid-column: 2;
	white-space: nowrap;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tk-gold-dark);
	margin-bottom: 2px;
}

@media (max-width: 781px) {
	.tk-hero-photo {
		min-height: 0;
		flex-direction: column;
		align-items: center;
		padding-top: 24px;
	}

	.tk-hero-photo::before {
		inset: 0 0 72px 0;
	}

	.tk-hero-photo .wp-block-image {
		width: 78%;
	}

	.tk-hours {
		position: relative;
		left: auto;
		bottom: auto;
		width: calc(100% - 32px);
		margin-top: -36px !important;
		box-sizing: border-box;
	}
}

/* Treatment-page hero photo: one even radius, fixed band height. */
.wp-block-image.is-style-hero img {
	border-radius: var(--wp--custom--radius--hero);
	width: 100%;
	height: clamp(260px, 33vw, 480px);
	object-fit: cover;
}

/* Portrait cut-outs (team, referrals): on a sand tile, feet to the bottom edge. */
.wp-block-image.is-style-portrait {
	background: var(--tk-sand);
	border-radius: var(--wp--custom--radius--hero);
	overflow: hidden;
	height: clamp(320px, 36vw, 520px);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	margin: 0;
}

.wp-block-image.is-style-portrait img {
	width: auto;
	max-width: 88%;
	height: 92%;
	object-fit: contain;
	object-position: bottom;
	border-radius: 0;
}

.wp-block-image.is-style-wide img {
	border-radius: var(--wp--custom--radius--panel);
	width: 100%;
	height: clamp(220px, 30vw, 440px);
	object-fit: cover;
}

/* ------------------------------------------------------------ cards and panels */

.wp-block-group.is-style-card {
	background: var(--tk-cream);
	border: 1px solid var(--tk-line);
	border-radius: var(--wp--custom--radius--card-lg);
	padding: 28px;
	box-sizing: border-box;
	transition: border-color 0.2s ease;
}

.wp-block-group.is-style-card-white {
	background: var(--tk-white);
	border: 1px solid var(--tk-line);
	border-radius: var(--wp--custom--radius--card);
	padding: 22px 24px;
	box-sizing: border-box;
}

/* Sand inset panel with a rounded photo (front-page features, CTA, priser trust panel). */
.wp-block-group.is-style-panel {
	background: var(--tk-sand);
	border-radius: var(--wp--custom--radius--panel);
	padding: clamp(24px, 3.3vw, 48px);
	box-sizing: border-box;
}

.wp-block-group.is-style-panel .wp-block-image img {
	border-radius: var(--wp--custom--radius--photo);
	width: 100%;
	height: clamp(260px, 30vw, 440px);
	object-fit: cover;
}

.wp-block-group.is-style-panel .wp-block-columns {
	gap: 40px;
}

/* Dark navy band (Tannlegevakt): photo in the left column, text right. */
.wp-block-group.is-style-band-dark {
	background: var(--tk-navy);
	color: var(--tk-white);
	border-radius: var(--wp--custom--radius--panel);
	overflow: hidden;
	padding: 0;
}

.wp-block-group.is-style-band-dark .wp-block-columns {
	gap: 0;
}

.wp-block-group.is-style-band-dark .wp-block-column:last-child {
	padding: clamp(28px, 3.9vw, 56px);
	box-sizing: border-box;
}

.wp-block-group.is-style-band-dark .wp-block-image,
.wp-block-group.is-style-band-dark .wp-block-image img {
	height: 100%;
	min-height: 360px;
	margin: 0;
}

.wp-block-group.is-style-band-dark .wp-block-image img {
	width: 100%;
	object-fit: cover;
	border-radius: 0;
}

.wp-block-group.is-style-band-dark h2,
.wp-block-group.is-style-band-dark h3 {
	color: var(--tk-white);
}

.wp-block-group.is-style-band-dark p {
	color: var(--wp--preset--color--footer-muted);
}

.wp-block-group.is-style-band-dark p.is-style-eyebrow,
.wp-block-group.is-style-band-dark p.is-style-lead {
	color: var(--wp--preset--color--gold-light);
}

.wp-block-group.is-style-band-dark p.is-style-lead {
	font-weight: 600;
}

/* ------------------------------------------------------------ treatment cards + scroller */

.tk-cards .is-style-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--tk-navy);
}

.tk-cards .is-style-card:hover {
	border-color: var(--tk-gold);
}

.tk-cards .tk-card-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.tk-cards .is-style-card h3 {
	font-size: var(--wp--preset--font-size--card);
	margin: 0;
}

.tk-cards .is-style-card h3 a {
	color: inherit;
	text-decoration: none;
}

.tk-cards .is-style-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.tk-cards .tk-arrow {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--tk-sand);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--tk-gold-dark);
}

.tk-cards .tk-arrow::before {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("assets/icons/arrow.svg") center / contain no-repeat;
	mask: url("assets/icons/arrow.svg") center / contain no-repeat;
}

.tk-cards .is-style-card p {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	margin: 0;
}

.tk-clamp,
.tk-scroller .is-style-card p {
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Scroll-snap row: three cards per view on desktop, one on phones; arrows move a page at a time. */
.tk-scroller {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 12px;
	-webkit-overflow-scrolling: touch;
}

.tk-scroller::-webkit-scrollbar {
	display: none;
}

.tk-scroller > * {
	flex: 0 0 calc((100% - 40px) / 3);
	min-width: 300px;
	scroll-snap-align: start;
	margin: 0;
}

@media (max-width: 781px) {
	.tk-scroller > * {
		flex-basis: 84%;
		min-width: 0;
	}
}

/* Grid of treatment cards (Behandlinger hub). */
.tk-cards.tk-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}

/* Phones: one compact row per card, icon beside the title. */
@media (max-width: 640px) {
	.tk-cards.tk-grid {
		gap: 10px;
	}

	.tk-cards.tk-grid .is-style-card {
		flex-direction: row;
		align-items: center;
		gap: 16px;
		padding: 16px 20px;
	}

	.tk-cards.tk-grid .is-style-card .wp-block-image img {
		width: 32px;
		height: 32px;
	}
}

/* ------------------------------------------------------------ team */

.tk-tile {
	background: var(--tk-sand);
	border-radius: 28px 28px 28px 80px;
	overflow: hidden;
	aspect-ratio: 4 / 4.4;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	margin: 0 0 14px;
}

/* Width goes on the figure: a percentage on the img inside a shrink-to-fit figure collapses to 0. */
.tk-tile .wp-block-image {
	width: 92%;
	margin: 0;
}

.tk-tile img {
	width: 100%;
	height: auto;
	border-radius: 0;
}

.tk-team h3,
.tk-team h4,
.tk-team h4 a {
	font-size: 20px;
	color: var(--tk-navy);
	margin: 0;
	text-decoration: none;
}

.tk-team h4 a:hover {
	color: var(--tk-gold-dark);
}

.tk-team .tk-role {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--tk-gold-dark);
	margin: 2px 0 8px;
}

.tk-team p {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

/* Team page profiles: portrait on a sand tile, text beside it, alternating. */
.tk-person {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 460px;
	gap: 72px;
	align-items: center;
}

.tk-person.is-flipped {
	grid-template-columns: 460px minmax(0, 1fr);
}

.tk-person + .tk-person {
	margin-top: 64px;
}

.tk-person.is-flipped > :first-child {
	order: 2;
}

.tk-person .tk-portrait {
	background: var(--tk-sand);
	border-radius: var(--wp--custom--radius--hero);
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 520px;
	margin: 0;
}

.tk-person .tk-portrait .wp-block-image {
	width: 88%;
	margin: 0;
}

.tk-person .tk-portrait img {
	width: 100%;
	height: auto;
	border-radius: 0;
}

/* Aside title on pages whose live version had no "Timebestilling" heading. */
.tk-aside-card .tk-aside-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium-large);
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--heading);
	line-height: 1.25;
	color: var(--tk-navy);
}

.tk-person h2 {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0;
}

.tk-person h3 {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tk-gold-dark);
	margin: 6px 0 12px;
}

@media (max-width: 960px) {
	.tk-person,
	.tk-person.is-flipped {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.tk-person.is-flipped > :first-child {
		order: 0;
	}

	.tk-person > .tk-portrait {
		order: -1; /* portrait above the text on phones */
	}

	.tk-person .tk-portrait {
		height: auto;
		aspect-ratio: 1;
	}
}

/* ------------------------------------------------------------ FAQ (core Details) */

.wp-block-details.is-style-faq {
	background: var(--tk-white);
	border: 1px solid var(--tk-line);
	border-radius: var(--wp--custom--radius--card);
	padding: 0 24px;
	margin: 0 0 10px;
}

.tk-band-white .wp-block-details.is-style-faq {
	background: var(--tk-cream);
}

.wp-block-details.is-style-faq > summary {
	position: relative;
	list-style: none;
	cursor: pointer;
	padding: 20px 56px 20px 0;
	margin: 0;
}

.wp-block-details.is-style-faq > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details.is-style-faq > summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	border-radius: 50%;
	background: var(--tk-sand);
	color: var(--tk-gold-dark);
	font-size: 20px;
	line-height: 30px;
	text-align: center;
	transition: transform 0.2s;
}

.wp-block-details.is-style-faq[open] > summary::after {
	transform: rotate(45deg);
}

.wp-block-details.is-style-faq .tk-faq-q {
	display: inline;
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--prose);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.4;
	color: var(--tk-navy);
}

.wp-block-details.is-style-faq > :not(summary) {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.65;
	max-width: 680px;
	margin: 0 0 20px;
}

.wp-block-details.is-style-faq[open] > summary {
	padding-bottom: 8px;
}

/* Front-page FAQ: intro left, questions right. */
.tk-faq {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 48px;
	align-items: start;
}

@media (max-width: 960px) {
	.tk-faq {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------ price list */

.wp-block-details.is-style-faq .tk-faq-q.tk-price-cat {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--heading);
}

.wp-block-table.is-style-prices {
	margin: 0 0 10px;
	max-width: none;
}

.wp-block-table.is-style-prices table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table.is-style-prices td {
	border: 0;
	border-top: 1px solid var(--tk-line);
	padding: 12px 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--tk-text);
	vertical-align: top;
}

.wp-block-table.is-style-prices tr:first-child td {
	border-top: 0;
}

.wp-block-table.is-style-prices td:last-child {
	text-align: right;
	white-space: nowrap;
	font-weight: 700;
	color: var(--tk-navy);
	padding-left: 24px;
}

.wp-block-details.is-style-faq > p:has(> em:only-child) {
	font-size: 13px;
	color: var(--wp--preset--color--muted);
	margin: 6px 0 18px;
}

/* ------------------------------------------------------------ aside: booking card, vakt link, chips */

.tk-aside-card {
	background: var(--tk-cream);
	border: 1px solid var(--tk-line);
	border-radius: 28px;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.tk-aside-card h2 {
	font-size: var(--wp--preset--font-size--medium-large);
	margin: 0;
}

.tk-aside-card p {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	margin: 0;
}

.tk-aside-card .wp-block-buttons,
.tk-aside-card .wp-block-button,
.tk-aside-card .wp-block-button__link {
	width: 100%;
}

.tk-aside-card .tk-phone {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--tk-navy);
	font-weight: 700;
	font-size: 17px;
}

.tk-aside-card .tk-hours-inline {
	border-top: 1px solid #E6DDCF;
	padding-top: 16px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--tk-text);
}

.tk-aside-card .tk-hours-inline .tk-hours-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tk-gold-dark);
	margin-bottom: 2px;
}

.tk-vakt-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 24px;
	background: var(--tk-white);
	border: 1px solid var(--tk-line);
	border-radius: 20px;
	color: var(--tk-navy);
	margin-top: 16px;
	text-decoration: none;
}

.tk-vakt-link .tk-eyebrow {
	font-size: 11px;
	color: var(--tk-gold-dark);
	letter-spacing: 0.12em;
}

.tk-vakt-link strong {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 17px;
	font-weight: 500;
}

.tk-vakt-link::after {
	content: "";
	flex: 0 0 18px;
	height: 18px;
	background: var(--tk-gold-dark);
	-webkit-mask: url("assets/icons/arrow.svg") center / contain no-repeat;
	mask: url("assets/icons/arrow.svg") center / contain no-repeat;
}

/* ------------------------------------------------------------ contact */

.tk-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

.tk-facts .is-style-card-white p {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	color: var(--tk-navy);
}

.tk-facts .tk-eyebrow {
	font-size: 11px;
	color: var(--tk-gold-dark);
	letter-spacing: 0.12em;
	margin-bottom: 6px;
}

/* Contact Form 7 on a sand panel. */
.tk-form {
	background: var(--tk-sand);
	border-radius: var(--wp--custom--radius--panel);
	padding: clamp(24px, 2.8vw, 40px);
}

.tk-form h2 {
	font-size: 28px;
	margin: 0 0 18px;
}

.tk-form label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tk-navy);
	margin-bottom: 8px;
}

.tk-form p {
	margin: 0 0 18px;
}

.tk-form .wpcf7-form-control:not(.wpcf7-submit) {
	font: inherit;
	font-size: 16px;
	color: var(--tk-navy);
	background: var(--tk-white);
	border: 1px solid #D8CDBE;
	border-radius: 14px;
	padding: 14px 16px;
	width: 100%;
	box-sizing: border-box;
}

.tk-form .wpcf7-form-control:focus {
	outline: 2px solid var(--tk-gold);
	outline-offset: 1px;
	border-color: var(--tk-gold);
}

.tk-form .wpcf7-submit {
	min-height: var(--wp--custom--control--height-lg);
	padding: 0 32px;
	border-radius: var(--wp--custom--radius--pill);
	border: 0;
	background: var(--tk-gold);
	color: var(--tk-white);
	font: inherit;
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
}

.tk-form .wpcf7-submit:hover {
	background: var(--tk-gold-dark);
}

/* Map band: image linking to Google Maps, with an address tag. */
.tk-map {
	position: relative;
	display: block;
	border-radius: var(--wp--custom--radius--panel);
	overflow: hidden;
	border: 1px solid var(--tk-line);
	background: var(--tk-sand);
}

.tk-map img {
	width: 100%;
	height: clamp(260px, 30vw, 440px);
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.tk-map .tk-map-tag {
	position: absolute;
	left: 32px;
	bottom: 32px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	background: var(--tk-white);
	border: 1px solid var(--tk-line);
	border-radius: 16px;
	color: var(--tk-navy);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
}

/* ------------------------------------------------------------ page headers and section heads */

/* Eyebrow label as a heading (front-page H1). */
.wp-block-heading.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
	color: var(--tk-navy);
	line-height: 1.4;
	margin: 0 0 14px;
}

.tk-header .tk-page-title {
	padding-top: 28px;
}

.tk-header:not(.tk-hero-section) .tk-page-title {
	max-width: var(--wp--custom--width--text);
}

.tk-page-title h1,
.tk-page-title .tk-title {
	margin: 10px 0 18px;
}

/* The contact page keeps its H2 title (parity with the live page); it is styled as the page title. */
.tk-page-title .tk-title {
	font-size: var(--wp--preset--font-size--xxx-large);
	line-height: 1.04;
	color: var(--tk-navy);
}

.tk-page-title .wp-block-buttons {
	margin-top: 28px;
}

/* A second heading right under the title (Om oss) reads as a subtitle. */
.tk-page-title h1 + h2 {
	font-size: var(--wp--preset--font-size--medium-large);
	color: var(--tk-gold-dark);
	margin-top: -6px;
}

.tk-hero-section .tk-page-title {
	padding-top: 12px;
}

/* Section head: label + title left, actions right. */
.tk-section-head {
	margin-bottom: 36px;
}

.tk-section-head h2 {
	margin: 8px 0 0;
}

.tk-team-head {
	max-width: 720px;
	margin: 0 auto 44px !important;
}

.tk-team-head h2 {
	margin: 8px 0 14px;
}

.tk-faq > :first-child :is(h2, h3) {
	margin: 8px 0 20px;
}

.tk-features .is-style-panel + .is-style-panel {
	margin-top: 24px;
}

/* Generic sections: a centred title above a card grid or panel. */
.tk-grid-section .tk-wrap > h2,
.tk-features .tk-wrap > h2,
.tk-content .tk-wrap > h2 {
	margin-bottom: 32px;
}

/* Hub cards (Behandlinger): icon, then the bold linked title. */
.tk-cards.tk-grid .is-style-card .wp-block-image {
	margin: 0;
}

.tk-cards.tk-grid .is-style-card .wp-block-image img {
	width: 40px;
	height: 40px;
	border-radius: 0;
}

.tk-cards.tk-grid .is-style-card p strong a,
.tk-cards.tk-grid .is-style-card .tk-card-link {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--card);
	font-weight: 500;
	color: var(--tk-navy);
	text-decoration: none;
}

.tk-cards.tk-grid .is-style-card p strong a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Booking CTA panel (team page, hub pages): centred. */
.tk-cta {
	text-align: center;
}

.tk-cta > * {
	max-width: 640px;
	margin-left: auto !important;
	margin-right: auto !important;
}

.tk-cta h2 {
	font-size: var(--wp--preset--font-size--x-large);
}

/* Article column: the related chips. */
.tk-prose nav {
	margin-top: 36px;
}

/* Aside: stacked cards. */
.tk-aside > * + * {
	margin-top: 16px;
}

/* Contact page: facts and form. */
.tk-two.tk-contact {
	grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
	gap: 48px;
}

.tk-two.tk-contact > :first-child > * + * {
	margin-top: 32px;
}

@media (max-width: 960px) {
	.tk-two.tk-contact {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------ header */

/* Menu items are pills of their own height, not the full 84 px row. */
[data-header] .menu > li > .ct-menu-link {
	height: 40px;
	align-self: center;
	border-radius: var(--wp--custom--radius--pill);
	padding: 0 14px;
}

/* Hairline under the whole header row, not just the container. */
[data-header] .ct-header [data-row*="middle"] {
	--theme-border-bottom: 1px solid var(--tk-line);
}

[data-header] .ct-header [data-row*="middle"] > div {
	--theme-border-bottom: none;
}

/* Dropdowns: hairline and radius instead of a shadow. */
[data-header] .ct-header [data-id="menu"] .sub-menu {
	--theme-box-shadow: none;
	--theme-border-radius: 16px;
	border: 1px solid var(--tk-line);
	padding: 8px;
}

[data-header] .ct-header [data-id="menu"] .sub-menu .ct-menu-link {
	border-radius: 10px;
}

[data-header] .menu > li > .ct-menu-link:hover,
[data-header] .menu > .current-menu-item > .ct-menu-link,
[data-header] .menu > .current-menu-ancestor > .ct-menu-link {
	background: var(--tk-sand);
}

[data-header] .ct-header-text a {
	font-weight: 600;
	color: var(--wp--preset--color--navy-2);
}

/* ------------------------------------------------------------ footer */

.ct-footer {
	--theme-text-color: var(--wp--preset--color--footer-muted);
	--theme-link-initial-color: var(--wp--preset--color--footer-text);
	--theme-link-hover-color: var(--tk-gold);
	--theme-heading-color: var(--tk-gold);
}

.ct-footer .widget-title,
.ct-footer h3,
.ct-footer h6 {
	font-size: 18px;
	color: var(--tk-gold);
	margin-bottom: 6px;
}

.ct-footer p,
.ct-footer li {
	font-size: 15px;
	line-height: 1.65;
	color: var(--wp--preset--color--footer-muted);
}

.ct-footer strong {
	color: var(--tk-white);
}

.ct-footer .wp-block-image img {
	border-radius: 16px;
}

.ct-footer .tk-footer-logo img {
	border-radius: 0;
	width: 200px;
}

.ct-footer .tk-footer-map {
	width: 160px;
}

.ct-footer .is-style-plain li {
	margin-bottom: 10px;
}

.ct-footer .ct-footer-copyright {
	font-size: 13px;
	color: #9FB0C2;
}

.ct-footer .ct-footer-copyright a {
	color: #9FB0C2;
}

.ct-footer .tk-foot-links {
	float: right;
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}

/* ------------------------------------------------------------ cookie banner */

#cc-main {
	--cc-font-family: var(--wp--preset--font-family--body);
	--cc-bg: var(--tk-white);
	--cc-primary-color: var(--tk-navy);
	--cc-secondary-color: var(--tk-navy);
	--cc-btn-primary-bg: var(--tk-gold);
	--cc-btn-primary-color: var(--tk-white);
	--cc-btn-primary-hover-bg: var(--tk-gold-dark);
	--cc-btn-secondary-bg: var(--tk-sand);
	--cc-btn-secondary-color: var(--tk-navy);
	--cc-btn-secondary-hover-bg: var(--tk-line);
	--cc-toggle-on-bg: var(--tk-gold);
	--cc-btn-border-radius: var(--wp--custom--radius--pill);
	--cc-modal-border-radius: var(--wp--custom--radius--card);
	--cc-link-color: var(--tk-gold-dark);
}

/* The banner and the settings dialog: hairline, no shadow. Secondary buttons outlined in navy. */
#cc-main .cm,
#cc-main .pm {
	box-shadow: none;
	border: 1px solid var(--tk-line);
}

#cc-main .cm__btn--secondary,
#cc-main .pm__btn--secondary {
	background: var(--tk-white);
	color: var(--tk-navy);
	border: 1.5px solid var(--tk-navy);
}

#cc-main .cm__btn--secondary:hover,
#cc-main .pm__btn--secondary:hover {
	background: var(--tk-navy);
	color: var(--tk-white);
}

/* ============================================================ rhythm and type (polish, 2026-10-21)
 * One spacing system for every component: eyebrow 12 → title 16 → lead 28 → buttons; 12 px between
 * buttons; 1.25 em between flow blocks; 96 px between sections; centred intros at 640 px.
 */

.entry-content {
	--theme-content-spacing: 1.25em;
}

/* --- type */
.entry-content :is(h1, h2, h3, h4) {
	text-wrap: balance;
}

.has-display-font-size {
	letter-spacing: var(--wp--custom--letter-spacing--display);
	line-height: 1.02;
}

p.is-style-eyebrow,
.wp-block-heading.is-style-eyebrow,
.tk-eyebrow {
	font-size: 12px;
	letter-spacing: 0.16em;
	margin-bottom: 12px;
}

p.is-style-lead {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.55;
	max-width: 560px;
}

.has-text-align-center.is-style-lead {
	margin-left: auto;
	margin-right: auto;
}

.entry-content :is(h1, h2, h3) + p.is-style-lead {
	margin-top: 16px;
}

.entry-content p.is-style-lead + .wp-block-buttons,
.entry-content p + .wp-block-buttons {
	margin-top: 28px;
}

/* --- buttons */
.wp-block-buttons {
	gap: 12px;
}

.wp-block-button__link {
	min-height: 46px;
	padding: 0 24px;
	font-size: 15px;
	letter-spacing: 0;
}

.wp-block-button.is-style-large .wp-block-button__link {
	min-height: 52px;
	padding: 0 28px;
	font-size: 15px;
}

/* --- page header */
.tk-header .tk-crumbs {
	margin-bottom: 6px;
}

.tk-header .tk-page-title {
	padding-top: 20px;
}

.tk-page-title h1,
.tk-page-title .tk-title {
	margin: 0 0 24px;
	max-width: 22ch; /* room for "(tannkjøttbetennelse):" on one line; 14ch broke it mid-word */
}

.tk-page-title .wp-block-buttons {
	margin-top: 28px;
}

.tk-hero-section .tk-page-title {
	padding-top: 0; /* text and photo are centred on each other, no offset */
}

/* --- front-page hero */
.tk-hero .wp-block-column:first-child {
	padding-right: clamp(0px, 3vw, 48px);
}

.tk-hero h2.has-display-font-size {
	margin-bottom: 20px;
}

/* --- section heads */
.tk-section-head {
	margin-bottom: 40px;
}

.tk-section-head h2,
.tk-faq > :first-child :is(h2, h3) {
	margin: 0;
}

.tk-faq > :first-child .wp-block-buttons {
	margin-top: 24px;
}

.tk-team-head {
	max-width: 640px;
	margin: 0 auto 48px !important;
}

.tk-team-head h2 {
	margin: 0 0 14px;
}

.tk-team-head p.is-style-lead {
	margin: 0;
}

/* --- cards */
.wp-block-group.is-style-card {
	padding: 26px 28px;
}

.tk-cards .is-style-card {
	gap: 14px;
}

.tk-cards .is-style-card h3 {
	font-size: 20px;
	line-height: 1.25;
}

.tk-cards .is-style-card p {
	line-height: 1.6;
}

.tk-cards.tk-grid .is-style-card p strong a,
.tk-cards.tk-grid .is-style-card .tk-card-link {
	font-size: 19px;
}

/* --- panels and the dark band */
.wp-block-group.is-style-panel {
	padding: clamp(28px, 3.6vw, 56px);
}

.wp-block-group.is-style-panel .wp-block-columns {
	gap: clamp(32px, 4vw, 64px);
}

.wp-block-group.is-style-panel h2,
.wp-block-group.is-style-band-dark h2 {
	margin-bottom: 14px;
}

.wp-block-group.is-style-panel p,
.wp-block-group.is-style-band-dark p {
	font-size: 16px;
	line-height: 1.65;
	max-width: 520px;
}

.wp-block-group.is-style-panel .wp-block-buttons,
.wp-block-group.is-style-band-dark .wp-block-buttons {
	margin-top: 26px;
}

.wp-block-group.is-style-band-dark .wp-block-column:last-child {
	padding: clamp(32px, 4.2vw, 64px);
}

.wp-block-group.is-style-band-dark p.is-style-lead {
	margin-bottom: 14px;
	font-size: var(--wp--preset--font-size--lead);
}

.tk-features .is-style-panel + .is-style-panel {
	margin-top: 24px;
}

/* --- article + aside */
.tk-two {
	gap: 64px;
}

.tk-prose > * + * {
	margin-top: 20px;
}

.tk-prose :is(h2, h3, h4) {
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}

.tk-prose h2 {
	font-size: 28px;
}

.tk-prose h3 {
	font-size: 22px;
}

.tk-aside-card {
	padding: 28px 30px;
	gap: 14px;
}

.tk-aside-card h2 {
	font-size: 22px;
	margin: 0 0 2px;
}

.tk-aside-card .wp-block-buttons {
	margin-top: 6px;
}

.tk-aside-card .tk-phone {
	font-size: 17px;
}

/* --- FAQ / accordions */
.wp-block-details.is-style-faq {
	border-radius: 16px;
	padding: 0 22px;
}

.wp-block-details.is-style-faq > summary {
	padding: 18px 52px 18px 0;
}

.wp-block-details.is-style-faq[open] > summary {
	padding-bottom: 10px;
}

.wp-block-details.is-style-faq .tk-faq-q {
	font-size: 16px;
}

.wp-block-details.is-style-faq > :not(summary) {
	margin: 0 0 18px;
}

.wp-block-details.is-style-faq > summary::after {
	width: 28px;
	height: 28px;
	margin-top: -14px;
	font-size: 18px;
	line-height: 28px;
}

/* --- price list */
.wp-block-details.is-style-faq .tk-faq-q.tk-price-cat {
	font-size: 19px;
}

.wp-block-details.is-style-faq[open] > summary + .wp-block-table {
	border-top: 1px solid var(--tk-line);
	padding-top: 6px;
}

.wp-block-table.is-style-prices {
	margin: 0 0 14px;
}

.wp-block-table.is-style-prices td {
	padding: 11px 0;
	font-size: 15px;
	line-height: 1.45;
}

.wp-block-table.is-style-prices td:last-child {
	font-size: 15px;
}

/* --- team */
.tk-team .tk-tile {
	margin-bottom: 16px;
}

.tk-team h4 {
	margin-bottom: 4px;
}

.tk-team p {
	line-height: 1.55;
}

.tk-person h2 {
	font-size: 34px;
	margin: 0;
}

.tk-person h3 {
	font-size: 12px;
	letter-spacing: 0.16em;
	margin: 8px 0 16px;
}

.tk-person p {
	font-size: var(--wp--preset--font-size--medium) !important;
	line-height: 1.65;
	max-width: 600px;
}

/* --- CTA panel */
.tk-cta > * {
	max-width: 520px;
}

.tk-cta h2 {
	margin-bottom: 10px;
}

.tk-cta .wp-block-buttons {
	margin-top: 24px;
}

/* --- contact */
.tk-facts .is-style-card-white {
	padding: 20px 22px;
}

.tk-facts .tk-eyebrow {
	margin-bottom: 8px;
}

.tk-form h2 {
	font-size: 24px;
	margin: 0 0 16px;
}

.tk-form label {
	font-size: 12px;
	letter-spacing: 0.1em;
	margin-bottom: 6px;
}

.tk-form .wpcf7-form-control:not(.wpcf7-submit) {
	font-size: 15px;
	padding: 12px 14px;
	border-radius: 12px;
}

.tk-form .wpcf7-submit {
	min-height: 48px;
}

/* --- footer */
.ct-footer .widget-title,
.ct-footer h3,
.ct-footer h6 {
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.ct-footer p,
.ct-footer li {
	font-size: 15px;
	line-height: 1.6;
}

.ct-footer .tk-footer-logo img {
	width: 180px;
}

.ct-footer .ct-footer-copyright,
.ct-footer .ct-footer-copyright a {
	font-size: 13px;
}

/* Centred intros keep their width inside the wrap (the wrap reset above is more specific). */
.entry-content .tk-wrap > .tk-team-head,
.entry-content .tk-wrap > .tk-cta > * {
	max-width: 640px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.entry-content .tk-wrap > .tk-cta > * {
	max-width: 520px !important;
}

.tk-header .tk-crumbs {
	margin-bottom: 18px;
}

.tk-aside-card .tk-phone,
.tk-facts a,
.tk-vakt-link {
	text-decoration: none;
}

/* Page headers without a photo: a shorter band. */
.entry-content .tk-header:not(.tk-hero-section) > .tk-wrap {
	padding-bottom: 56px;
}

/* Hub/about pages: reading-width text and columns, centred (Henrik 2026-10-23: with no aside the column
   sat alone on the left of the page). */
.entry-content .tk-content .tk-wrap > .tk-prose,
.entry-content .tk-content .tk-wrap > .wp-block-columns {
	max-width: var(--wp--custom--width--text);
	margin-left: auto !important; /* the .tk-wrap child reset above pins children left with !important */
	margin-right: auto !important;
}

/* Contact facts in one row beside the form column. */
@media (min-width: 961px) {
	.tk-facts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px;
	}

	.tk-facts .is-style-card-white p {
		font-size: 15px;
	}
}

.tk-form .wpcf7-submit {
	text-transform: none;
	letter-spacing: 0;
}

.entry-content .tk-header:not(.tk-hero-section) > .tk-wrap {
	padding-top: 28px !important;
	padding-bottom: 52px !important;
}

.tk-facts {
	align-items: stretch;
}

.tk-facts > .wp-block-group {
	margin: 0 !important;
	min-height: 100%;
}

.tk-facts .tk-eyebrow,
.tk-facts p.is-style-eyebrow {
	font-size: 11px;
	letter-spacing: 0.12em;
	white-space: nowrap;
}

/* ------------------------------------------------------------ vertical alignment of text beside photos
 * Blocksy stretches columns, so "vertically aligned center" put the text at the column top, and the
 * last block's trailing margin made text blocks taller than they look. Centre the column itself and
 * drop trailing margins; the front-page hero compensates for the photo overhanging its panel.
 */
.wp-block-columns.are-vertically-aligned-center > .wp-block-column {
	align-self: center;
}

.wp-block-column > :last-child,
.tk-text > :last-child,
.tk-prose > :last-child,
.wp-block-group.is-style-panel > :last-child,
.wp-block-group.is-style-band-dark > :last-child,
.tk-aside-card > :last-child {
	margin-bottom: 0 !important;
}

/* Team profiles: tile and text share a top edge; the tile follows the text when it is longer. */
.tk-person {
	align-items: start;
	margin-bottom: 0 !important;
}

.tk-person .tk-text {
	padding-top: 10px;
}

.tk-person .tk-portrait {
	position: sticky;
	top: 108px;
}

.entry-content .tk-people > .tk-wrap {
	padding-top: 56px !important;
}

@media (max-width: 960px) {
	.tk-person .tk-portrait {
		position: static;
	}

	.tk-person .tk-text {
		padding-top: 0;
	}
}

/* ============================================================ round 4 (2026-10-21)
 * Sections butt together (no Blocksy gap), the wrap is the full width on phones, article heroes
 * let the photo match the text height, team page rebuilt, mobile hero text-first.
 */
.entry-content .tk-section {
	margin-bottom: 0 !important;
}

.entry-content .tk-section > .tk-wrap {
	width: 100% !important;
}

@media (max-width: 781px) {
	:root {
		--tk-gutter: 20px;
	}
}

/* Dropdown items */
[data-header] .ct-header [data-id="menu"] .sub-menu .ct-menu-link {
	font-size: 15px;
	padding: 11px 14px;
}

/* --- article/hub hero: photo exactly as tall as the text column (min 380), edges aligned */
.tk-hero-section .tk-hero.are-vertically-aligned-center > .wp-block-column {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.tk-hero-section .tk-hero .wp-block-column > .wp-block-image.is-style-hero {
	flex: 1;
	display: flex;
	margin: 0;
	min-height: 380px;
}

.wp-block-image.is-style-hero img {
	flex: 1;
	height: auto;
	min-height: 380px;
	object-fit: cover;
}

/* --- Tannlegevakt band: wider photo column so the clinic photo keeps most of its width */
.wp-block-group.is-style-band-dark .wp-block-column:first-child {
	flex-basis: 56% !important;
	display: flex;
}

.wp-block-group.is-style-band-dark .wp-block-column:last-child {
	flex-basis: 44% !important;
}

.wp-block-group.is-style-band-dark .wp-block-image {
	flex: 1;
	display: flex;
}

.wp-block-group.is-style-band-dark .wp-block-image img {
	flex: 1;
	height: auto;
	min-height: 340px;
	object-position: 40% center;
}

/* --- team page */
.tk-team-header .tk-page-title {
	padding-top: 20px;
}

.tk-person,
.tk-person.is-flipped {
	grid-template-columns: 400px minmax(0, 1fr);
	gap: 64px;
	align-items: center;
	padding: 56px 0;
	border-top: 1px solid var(--tk-line);
}

.tk-person.is-flipped {
	grid-template-columns: minmax(0, 1fr) 400px;
}

.tk-person > .tk-text {
	order: 2;
	padding-top: 0;
}

.tk-person.is-flipped > .tk-text {
	order: 0;
}

.tk-person + .tk-person {
	margin-top: 0;
}

.tk-people .tk-wrap > .tk-person:first-child {
	border-top: 0;
	padding-top: 0;
}

.tk-people .tk-wrap > .tk-person:last-child {
	padding-bottom: 0;
}

.tk-person .tk-portrait {
	position: static;
	align-self: stretch;
	height: auto;
	min-height: 440px;
}

.tk-person h2 {
	font-size: 30px;
}

@media (max-width: 960px) {
	.tk-person,
	.tk-person.is-flipped {
		grid-template-columns: minmax(0, 1fr);
		padding: 40px 0;
	}

	.tk-person > .tk-text,
	.tk-person.is-flipped > .tk-text {
		order: 2;
	}

	.tk-person .tk-portrait {
		min-height: 0;
		aspect-ratio: 1;
	}
}

/* --- phones: text first in every hero, photo after; full-width button pair on the front page */
@media (max-width: 781px) {
	.tk-hero.is-reversed-on-mobile > .wp-block-column:last-child {
		order: 0;
	}

	.tk-hero .wp-block-column:first-child {
		padding: 0;
	}

	.tk-hero .tk-page-title,
	.tk-hero .wp-block-column:first-child > .wp-block-buttons {
		margin-bottom: 8px;
	}

	.tk-hero-section .tk-hero .wp-block-column > .wp-block-image.is-style-hero,
	.wp-block-image.is-style-hero img {
		min-height: 0;
	}

	.wp-block-image.is-style-hero img {
		aspect-ratio: 4 / 3;
		height: auto;
	}

	.tk-hero-section .tk-hero .wp-block-column:last-child {
		margin-top: 28px;
	}

	.has-display-font-size {
		font-size: 40px;
	}

	.tk-hero-section .tk-hero .wp-block-column:first-child .wp-block-buttons {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.tk-hero-section .tk-hero .wp-block-column:first-child .wp-block-button,
	.tk-hero-section .tk-hero .wp-block-column:first-child .wp-block-button__link {
		width: 100%;
	}

	.tk-hero-photo {
		margin-top: 24px;
		padding-top: 20px;
	}

	.tk-hero-photo::before {
		inset: 0 0 40px 0;
		border-radius: 28px;
	}

	.tk-hero-photo .wp-block-image {
		width: 88%;
	}

	.tk-hours {
		margin-top: -40px !important;
	}

	.wp-block-group.is-style-band-dark .wp-block-column:first-child,
	.wp-block-group.is-style-band-dark .wp-block-column:last-child {
		flex-basis: 100% !important;
	}

	.wp-block-group.is-style-band-dark .wp-block-image img {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}
}

.tk-map img {
	height: auto;
	aspect-ratio: 8 / 3;
	max-height: 480px;
}

.tk-map .tk-map-credit {
	position: absolute;
	right: 12px;
	bottom: 8px;
	font-size: 11px;
	color: var(--wp--preset--color--muted);
	background: rgba(255, 255, 255, 0.8);
	padding: 2px 6px;
	border-radius: 6px;
}

/* Profiles: first one photo-left (the live order), then alternating. */
.tk-person {
	grid-template-columns: 400px minmax(0, 1fr);
}

.tk-person > .tk-text {
	order: 2;
}

.tk-person.is-flipped {
	grid-template-columns: minmax(0, 1fr) 400px;
}

.tk-person.is-flipped > .tk-text {
	order: 0;
}

.tk-team-header > .wp-block-column:first-child {
	flex-basis: 38% !important;
}

/* Live order: rows marked "reverse" (Alan, Chen) have the photo on the left. */
.tk-person {
	grid-template-columns: minmax(0, 1fr) 400px;
}

.tk-person > .tk-text {
	order: 0;
}

.tk-person.is-flipped {
	grid-template-columns: 400px minmax(0, 1fr);
}

.tk-person.is-flipped > .tk-text {
	order: 2;
}

/* Portrait tile: fixed height, centred on the text (no sand void above short bios). */
.tk-person .tk-portrait {
	align-self: center;
	height: 480px;
	min-height: 0;
}

/* ============================================================ round 5 (2026-10-21) */

/* Onest headings: slightly less tight than DM Sans needed. */
.entry-content :is(h1, h2, h3, h4),
.has-display-font-size {
	letter-spacing: -0.02em;
}

/* Dark band: the photo fills its column completely (the column stretches to the text's height). */
.wp-block-group.is-style-band-dark .wp-block-columns.are-vertically-aligned-center > .wp-block-column:first-child {
	align-self: stretch;
	position: relative;
	min-height: 360px;
}

.wp-block-group.is-style-band-dark .wp-block-column:first-child .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
	display: block;
}

.wp-block-group.is-style-band-dark .wp-block-column:first-child .wp-block-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: cover;
	object-position: 40% center;
}

@media (max-width: 781px) {
	.wp-block-group.is-style-band-dark .wp-block-columns.are-vertically-aligned-center > .wp-block-column:first-child {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}
}

/* Scroller arrows: both quiet (white, hairline); navy only on hover. */
.tk-scroller-nav button,
.tk-scroller-nav button:last-child {
	background: var(--tk-white);
	border-color: var(--tk-line);
	color: var(--tk-navy);
}

.tk-scroller-nav button:not([disabled]):hover {
	background: var(--tk-navy);
	border-color: var(--tk-navy);
	color: var(--tk-white);
}

/* Price tables: row hairlines only, no outer border. */
.wp-block-table.is-style-prices,
.wp-block-table.is-style-prices table,
.wp-block-table.is-style-prices tbody,
.wp-block-table.is-style-prices tr,
.wp-block-table.is-style-prices td {
	border: 0;
}

.wp-block-table.is-style-prices tr + tr td {
	border-top: 1px solid var(--tk-line);
}

.wp-block-details.is-style-faq[open] > summary + .wp-block-table {
	border-top: 1px solid var(--tk-line);
}

/* Heading weight 500 (Henrik 2026-10-21); small heading-font labels follow. */
.entry-content :is(h1, h2, h3, h4, h5, h6),
.has-display-font-size {
	font-weight: 500;
}

.tk-aside-card h2,
.tk-form h2,
.tk-cards .is-style-card h3,
.tk-team h4,
.tk-person h2 {
	font-weight: 500;
}

/* ============================================================ phones, round 6 (2026-10-21) */
@media (max-width: 781px) {
	/* Scroll rows run to the screen edge (cards and the team tiles). */
	.tk-scroller,
	.wp-block-columns.tk-team {
		margin-left: calc(-1 * var(--tk-gutter)) !important;
		margin-right: calc(-1 * var(--tk-gutter)) !important;
		padding-left: var(--tk-gutter);
		padding-right: var(--tk-gutter);
		scroll-padding-left: var(--tk-gutter);
		width: auto !important;
		max-width: none !important;
	}

	/* Team tiles: a swipeable row instead of a stack (CSS only, no script). */
	.wp-block-columns.tk-team {
		display: flex;
		flex-wrap: nowrap !important;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding-bottom: 8px;
		-webkit-overflow-scrolling: touch;
	}

	.wp-block-columns.tk-team::-webkit-scrollbar {
		display: none;
	}

	.wp-block-columns.tk-team > .wp-block-column {
		flex: 0 0 68% !important;
		flex-basis: 68% !important;
		scroll-snap-align: start;
		margin: 0 !important;
	}

	.entry-content .tk-team-section > .tk-wrap {
		padding-bottom: 48px !important;
	}

	/* Dark band: the photo is a normal 4:3 block above the text, same padding as the text. */
	.wp-block-group.is-style-band-dark .wp-block-columns.are-vertically-aligned-center > .wp-block-column:first-child {
		aspect-ratio: auto;
		min-height: 0;
		position: static;
	}

	.wp-block-group.is-style-band-dark .wp-block-column:first-child .wp-block-image,
	.wp-block-group.is-style-band-dark .wp-block-column:first-child .wp-block-image img {
		position: static;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.wp-block-group.is-style-band-dark .wp-block-column:last-child {
		padding: 28px 24px 32px;
	}

	/* FAQ: even rhythm around the list, questions with equal side room. */
	.tk-faq {
		gap: 28px;
	}

	.entry-content .tk-faq-section > .tk-wrap {
		padding-top: 48px !important;
		padding-bottom: 48px !important;
	}

	.wp-block-details.is-style-faq {
		padding: 0 20px;
	}

	.wp-block-details.is-style-faq > summary {
		padding-right: 44px;
	}

	.wp-block-details.is-style-faq > summary::after {
		right: -2px;
	}

	/* Footer: two columns for the link groups, intro and opening hours full width. */
	.ct-footer [data-row*="middle"] > div {
		grid-template-columns: 1fr 1fr !important;
		column-gap: 20px;
		row-gap: 36px !important;
	}

	.ct-footer [data-row*="middle"] > div > :first-child,
	.ct-footer [data-row*="middle"] > div > :last-child {
		grid-column: 1 / -1;
	}

	.ct-footer .tk-footer-map {
		width: 140px;
	}

	.ct-footer .tk-foot-links {
		float: none;
		margin-top: 10px;
	}
}

/* Off-canvas menu: navy links on the cream panel, hairlines between items, gold current item.
   Behandlinger and Om oss open as submenus with a navy chevron; the close icon is navy too
   (Blocksy's default icon colour is white, invisible on cream). */
#offcanvas {
	--theme-link-initial-color: var(--tk-navy);
	--theme-link-hover-color: var(--tk-gold-dark);
}

#offcanvas.ct-panel .ct-toggle-close,
#offcanvas.ct-panel .ct-toggle-dropdown-mobile {
	--theme-icon-color: var(--tk-navy);
	--theme-icon-hover-color: var(--tk-gold-dark);
}

#offcanvas [data-id="mobile-menu"] > ul > li {
	border-bottom: 1px solid var(--tk-line);
}

#offcanvas [data-id="mobile-menu"] > ul > li > .ct-menu-link,
#offcanvas [data-id="mobile-menu"] > ul > li > .ct-sub-menu-parent > .ct-menu-link {
	color: var(--tk-navy);
	padding: 12px 0;
	font-weight: 500;
}

#offcanvas [data-id="mobile-menu"] > ul > li.current-menu-item > .ct-menu-link,
#offcanvas [data-id="mobile-menu"] > ul > li.current-menu-item > .ct-sub-menu-parent > .ct-menu-link,
#offcanvas [data-id="mobile-menu"] .sub-menu li.current-menu-item > .ct-menu-link {
	color: var(--tk-gold-dark);
}

#offcanvas [data-id="mobile-menu"] .sub-menu {
	padding: 0 0 10px 14px;
}

#offcanvas [data-id="mobile-menu"] .sub-menu .ct-menu-link {
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 400;
	color: var(--tk-text);
	padding: 7px 0;
}

#offcanvas .ct-panel-content {
	padding-top: 24px;
}

@media (max-width: 781px) {
	.wp-block-group.is-style-band-dark .wp-block-column:first-child .wp-block-image {
		min-height: 0;
		height: auto;
	}
}

/* Front-page hero, variant A: H1 is the display title, the H2 a navy subtitle. */
.tk-hero :is(h1, h2).has-display-font-size {
	margin-bottom: 18px;
}

.tk-hero h2.tk-subtitle {
	font-size: 24px;
	line-height: 1.3;
	color: var(--tk-navy);
	max-width: 520px;
	margin-bottom: 20px;
}

@media (max-width: 781px) {
	.tk-hero h2.tk-subtitle {
		font-size: 20px;
	}
}

/* Phones: the bleed must outrank the wrap's child reset (.entry-content .tk-wrap > …). */
@media (max-width: 781px) {
	.entry-content .tk-wrap > .tk-scroller,
	.entry-content .tk-wrap > .wp-block-columns.tk-team {
		margin-left: calc(-1 * var(--tk-gutter)) !important;
		margin-right: calc(-1 * var(--tk-gutter)) !important;
		width: calc(100% + 2 * var(--tk-gutter)) !important;
		max-width: none !important;
		padding-left: var(--tk-gutter);
		padding-right: var(--tk-gutter);
		box-sizing: border-box;
	}
}

/* Nohemi headings (trial 2026-10-23, after Fraunces): already tightly spaced, so only a hint of negative tracking. */
.entry-content :is(h1, h2, h3, h4),
.has-display-font-size {
	letter-spacing: -0.005em;
	font-optical-sizing: auto;
}

.has-display-font-size {
	line-height: 1.04;
}

/* ============================================================ Tannlegevakt, light split (option D, 2026-10-23)
 * No panel: the clinic photo sits on an offset sand backdrop (the hero's device), the text beside it on
 * the cream page. Replaces the navy band on the front page; `band-dark` stays available.
 */
.wp-block-group.is-style-band-light {
	color: var(--tk-navy);
}

.wp-block-group.is-style-band-light > :last-child {
	margin-bottom: 0 !important;
}

.wp-block-group.is-style-band-light .wp-block-columns {
	gap: clamp(32px, 5vw, 72px);
}

.wp-block-group.is-style-band-light .wp-block-column:first-child .wp-block-image {
	position: relative;
	margin: 0;
}

.wp-block-group.is-style-band-light .wp-block-column:first-child .wp-block-image img {
	width: 100%;
	height: clamp(300px, 32vw, 440px);
	object-fit: cover;
	object-position: 40% center;
	border-radius: var(--wp--custom--radius--photo);
}

.wp-block-group.is-style-band-light h2 {
	margin-bottom: 14px;
}

.wp-block-group.is-style-band-light p {
	font-size: 16px;
	line-height: 1.65;
	max-width: 520px;
}

.wp-block-group.is-style-band-light p.is-style-eyebrow {
	margin-bottom: 12px;
}

.wp-block-group.is-style-band-light p.is-style-lead {
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 600;
	margin-bottom: 14px;
}

.wp-block-group.is-style-band-light .wp-block-buttons {
	margin-top: 26px;
}

@media (max-width: 781px) {
	.wp-block-group.is-style-band-light .wp-block-column:first-child .wp-block-image img {
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.wp-block-group.is-style-band-light .wp-block-column:last-child {
		margin-top: 24px;
	}
}

/* ============================================================ round 7 (2026-10-23): sub-page review */

/* Team: no jump-nav in the header any more; the first profile starts right under it, and the bios flow in two
   columns next to the 400 px portrait so the text fills the width. */
.tk-person:first-child {
	border-top: 0;
	padding-top: 0;
}

.tk-person .tk-bio p {
	margin-top: 0;
	margin-bottom: 14px;
}

/* Links inside headings keep the heading colour (Tannlegeskrekk "2. Undersøkelse"). */
.tk-prose :is(h2, h3, h4) a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--tk-gold);
	text-underline-offset: 4px;
}

/* Two headings in a row (Henvisninger): the second reads as a subtitle. */
.tk-prose .tk-subhead {
	font-size: var(--wp--preset--font-size--medium-large);
	color: var(--tk-text);
	margin-top: 0.25em;
}

/* FAQ band without a live heading (Tannprotese): the title is a styled paragraph, not a new heading. */
.tk-faq .tk-faq-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--heading);
	line-height: 1.12;
	color: var(--tk-gold-dark);
	margin: 0;
}

/* Om oss: the three "Mer informasjon" cards share the full width. */
.tk-cards.tk-grid {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Cut-out portraits (transparent PNG) in a sand panel show whole, bottom-aligned, instead of being cropped. */
.wp-block-group.is-style-panel .wp-block-image img[src$=".png"] {
	height: auto;
	max-height: 480px;
	object-fit: contain;
	object-position: center bottom;
	border-radius: 0;
}

/* Contact form: plain labels, no blank line between label and field (CF7 puts a <br> after the label). */
.tk-form label {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	margin-bottom: 0;
}

.tk-form p > br {
	display: none;
}

.tk-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: 6px;
}

.tk-form p {
	margin-bottom: 14px;
}

/* ============================================================ round 8 (2026-10-23): team page as cards (option D)
   Four cards in a 2×2 grid, portrait tile on top. Overrides the earlier row layout (grid with a 400 px portrait
   column, hairlines, sticky tile) so the markup stays one .tk-person article per person. */
.tk-team-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch; /* cards beside each other share a height; the button sits at the bottom */
}

.tk-person,
.tk-person.is-flipped,
.tk-person:first-child {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	border: 1px solid var(--tk-line);
	border-radius: 28px;
	background: var(--tk-cream);
	overflow: hidden;
}

.tk-person + .tk-person {
	margin-top: 0;
}

.tk-person > .tk-portrait,
.tk-person .tk-portrait {
	order: 0;
	position: static;
	align-self: stretch;
	height: 300px;
	min-height: 0;
	aspect-ratio: auto;
	border-radius: 0;
	background: var(--tk-sand);
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

/* The whole cut-out shows: sized by height, never cropped at the top. */
.tk-person .tk-portrait .wp-block-image {
	width: auto;
	height: 92%;
	margin: 0;
}

.tk-person .tk-portrait img {
	height: 100%;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: center bottom;
}

.tk-person > .tk-text {
	order: 0;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	padding: 26px 32px 32px;
}

.tk-person h2 {
	font-size: 28px;
}

.tk-person h3 {
	margin: 6px 0 14px;
}

.tk-person .tk-bio p {
	font-size: 15px;
	line-height: 1.6;
}

.tk-person .wp-block-buttons {
	margin-top: auto;
	padding-top: 8px;
}

@media (max-width: 960px) {
	.tk-team-cards {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.tk-person .tk-portrait {
		height: 260px;
	}

	.tk-person > .tk-text {
		padding: 22px 20px 26px;
	}
}

/* ============================================================ round 9 (2026-10-23): phone review of every template */

/* Cards with a text line (Om oss "Mer informasjon") stack on phones; the compact icon-beside-title row is only for
   the icon/title cards on Behandlinger. */
@media (max-width: 640px) {
	.tk-cards.tk-grid .is-style-card:has(p) {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 20px 22px;
	}
}

/* Map band on phones: taller image, smaller tag that stays inside the band. */
@media (max-width: 640px) {
	.tk-map img {
		aspect-ratio: 4 / 3;
		max-height: 340px;
	}

	.tk-map .tk-map-tag {
		left: 14px;
		right: 14px;
		bottom: 14px;
		padding: 10px 14px;
		font-size: 13px;
		border-radius: 12px;
	}
}

/* Footer: the heading widget sits right on its list (the blank line was the widget gap). */
.ct-footer .ct-widget:has(> h6.wp-block-heading) + .ct-widget {
	margin-top: 8px !important;
}

/* Pages with no title (Personvernerklæring, parity with live): no empty title block and a shorter header band. */
.tk-header .tk-page-title:empty {
	display: none;
}

.entry-content .tk-header:has(.tk-page-title:empty) > .tk-wrap {
	padding-bottom: 20px !important;
}

/* Front page (Henrik 2026-10-23): titles one step thinner than elsewhere (400, not 500), and more air
 * between the hero's eyebrow and its display title. */
.home .entry-content :is(h1, h2, h3, h4, h5, h6):not(.is-style-eyebrow) {
	font-weight: 400;
}

.home .tk-hero .wp-block-heading.is-style-eyebrow {
	margin-bottom: 24px;
}

/* Behandlinger hub on phones: the icon/title cards sit two per row, icon above the title. */
@media (max-width: 640px) {
	.tk-cards.tk-grid:has(> .is-style-card > .wp-block-image) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tk-cards.tk-grid .is-style-card:has(> .wp-block-image) {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		margin: 0;
		padding: 16px;
	}

	.tk-cards.tk-grid .is-style-card:has(> .wp-block-image) .tk-card-link {
		font-size: 16px;
	}
}