/*
 * Per-section styles.
 * One block per front-page section (hero, value row, services, etc.).
 * Added as each section is built. All values from tokens.css.
 */

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

/*
 * Below 60rem the front page's hero opens on the round portrait, so a full
 * section's worth of air above it read as an empty band under the header. The
 * top shrinks to about the portrait-to-heading gap there; wide screens keep the
 * section rhythm. Other pages set their own padding (.mh-light below).
 */
.mh-hero {
	padding-block: var(--mh-space-lg) var(--mh-space-3xl);
}

@media (min-width: 60rem) {
	.mh-hero {
		padding-block-start: var(--mh-space-3xl);
	}
}

/*
 * Mobile: one column, rubrik, knappar, ingress (front page, see
 * .mh-hero__body--cta-first), then the portrait with the credential lines.
 *
 * The portrait sat between the headline and the buttons until the mobile pass
 * measured it: h1 186px plus a 426px media block put the booking button at
 * 1076px on a 375x667 screen. Grid areas move the media last so the primary
 * call to action is on the first screen. Nothing in the media block is
 * focusable, so tab order is unaffected and the DOM keeps the h1 first.
 */
.mh-hero__inner {
	display: grid;
	gap: var(--mh-space-xl);
	/* Same rhythm as a section heading and its following text. */
	row-gap: var(--mh-space-md);
	grid-template-areas:
		"heading"
		"body"
		"media";
}

.mh-hero__heading {
	grid-area: heading;
}

.mh-hero__body {
	grid-area: body;
}

.mh-hero__media {
	grid-area: media;
	margin-block-start: var(--mh-space-lg);
}

.mh-hero__title {
	text-wrap: balance;
}

.mh-hero__media {
	inline-size: 100%;
	max-inline-size: 26rem;
	margin-inline: auto;
}

.mh-hero__img {
	inline-size: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	/*
	 * Anchor the crop to the top of the photograph. A portrait is taller than
	 * the 4:5 box, so cover always trims vertically, and the default centre
	 * takes that trim from both ends: on a 375x667 phone, where the height cap
	 * below bites hardest, it removed the top 23% of the file, which is her hair
	 * and forehead down to the eyebrows. Anchoring to the top spends the whole
	 * trim on the floor instead, where there is only jacket. It matters on wide
	 * screens too, where centring shaved the top of her hair.
	 *
	 * Top rather than a percentage: it cannot clip a head whatever the file's
	 * proportions, so it still holds when she swaps in her own photograph.
	 */
	object-position: center top;
	border-radius: var(--mh-radius-lg);
	box-shadow: var(--mh-shadow-lg);
	/* Capped on small screens so the booking button is not pushed far below the
	   fold on a 375x667 phone. Lifted once there is room for the two columns. */
	max-block-size: 62vh;
}

@media (min-width: 60rem) {
	.mh-hero__img {
		max-block-size: none;
	}
}

/*
 * Phones: her face on the first screen as a small round portrait above the h1,
 * and the large portrait hidden so it is not shown twice (the credential lines
 * stay). Width and height are fixed here, so nothing moves when it loads. The
 * crop keeps the top of the photo, as the large portrait does. From 60rem the
 * two swap back.
 */
.mh-hero__avatar {
	display: block;
	inline-size: var(--mh-hero-avatar);
	block-size: var(--mh-hero-avatar);
	margin-block-end: var(--mh-space-md);
	object-fit: cover;
	object-position: center top;
	border-radius: var(--mh-radius-pill);
	box-shadow: var(--mh-shadow);
}

.mh-hero__portrait {
	display: none;
}

@media (min-width: 60rem) {
	.mh-hero__avatar {
		display: none;
	}

	.mh-hero__portrait {
		display: block;
	}
}

/* Meriter sit directly under the portrait, sharing its width, separated by a
   leaf hairline. Leaf green stays decorative: the lines themselves are ink. */
/* Three quiet lines under the photograph, not a bullet list: one hairline above
   the group, no per-line marker, tight leading. */
.mh-hero__credentials {
	display: grid;
	gap: var(--mh-space-2xs);
	margin-block-start: var(--mh-space-md);
	padding-block-start: var(--mh-space-md);
	padding-inline-start: 0;
	border-block-start: 1px solid var(--mh-leaf);
	list-style: none;
}

.mh-hero__credentials li {
	font-size: var(--mh-fs-small);
	line-height: 1.3;
	color: var(--mh-text);
}

.mh-hero__body>*+* {
	margin-block-start: var(--mh-space-lg);
}

.mh-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mh-space-md);
}

.mh-hero__note {
	font-size: var(--mh-fs-small);
	margin-block-start: var(--mh-space-md);
}

/*
 * Front page, one column: the buttons (and the line under them) straight after
 * the h1, then her ingress. Her three-paragraph ingress put the booking button
 * at 912px on a 375x667 screen. The DOM keeps the ingress first for screen
 * readers; the buttons are the only focusable elements, so tab order is the
 * same either way. Flex, not margins on * + *, because sibling selectors follow
 * the DOM order and the visual order is different here.
 */
.mh-hero__body--cta-first {
	display: flex;
	flex-direction: column;
}

.mh-hero__body--cta-first > .mh-hero__actions {
	order: 1;
	margin-block-start: 0;
}

.mh-hero__body--cta-first > .mh-hero__note {
	order: 2;
}

.mh-hero__body--cta-first > .mh-hero__lead {
	order: 3;
	margin-block-start: var(--mh-space-xl);
}

/*
 * Desktop: text column left, portrait spanning both rows on the right.
 * Grid areas keep the DOM order (heading, media, body) while placing the
 * heading above the body in the left column.
 */
@media (min-width: 60rem) {
	.mh-hero__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"heading media"
			"body    media";
		align-items: start;
		column-gap: var(--mh-space-3xl);
		row-gap: var(--mh-space-md);
	}

	.mh-hero__media {
		margin-block-start: 0;
	}

	.mh-hero__heading {
		grid-area: heading;
	}

	.mh-hero__media {
		grid-area: media;
		max-inline-size: none;
		margin-inline: 0;
	}

	.mh-hero__body {
		grid-area: body;
	}

	/* Two columns: back to DOM order, ingress then buttons. */
	.mh-hero__body--cta-first {
		display: block;
	}

	.mh-hero__body--cta-first > .mh-hero__lead {
		margin-block-start: 0;
	}

	.mh-hero__body--cta-first > * + .mh-hero__actions {
		margin-block-start: var(--mh-space-lg);
	}
}

/* Light pages ------------------------------------------------------------ */

/*
 * Every page except the front page (body class mh-light, inc/setup.php): the
 * service pages, the Tjänster list and the standard pages have short sections
 * (a heading and a few lines), so they take the tighter section rhythm instead
 * of the front page's 3xl. The closing band on those pages follows suit. The
 * front page's sections are content-rich and keep 3xl.
 */
.mh-light .mh-hero,
.mh-light .mh-section {
	padding-block: var(--mh-space-section-tight);
}

.mh-light .mh-section__header {
	margin-block-end: var(--mh-space-xl);
}

/* Textsidor (page.php) ----------------------------------------------------- */

/*
 * Pages of running text only (Integritetspolicy, later köpvillkor). The body
 * keeps the site's text size and line height; the column is one reading
 * measure wide, headings included, so text and headings share both edges.
 * Section headings drop to the h3 size: clearly below the h1, clearly above
 * the text, with far more space above (2xl, from .mh-prose) than below.
 */
.mh-page__header {
	margin-block-end: var(--mh-space-xl);
}

.mh-page__content {
	max-inline-size: var(--mh-measure);
}

.mh-page__content h2 {
	font-size: var(--mh-fs-h3);
	text-wrap: pretty;
}

.mh-page__content strong {
	font-weight: var(--mh-weight-semibold);
}

/*
 * Two classes she can set on a paragraph in the editor ("Ytterligare
 * CSS-klass"); formatting only, the text is hers.
 *
 * mh-meta: a quieter small line, such as the date a policy was updated.
 * mh-listrad: one line of a list written as text, each starting with its own
 * dash. Consecutive lines sit closer than paragraphs, and a hanging indent
 * keeps a wrapped line clear of the dash above it.
 */
.mh-prose .mh-meta {
	font-size: var(--mh-fs-small);
	color: var(--mh-slate);
}

.mh-prose .mh-listrad {
	padding-inline-start: var(--mh-space-md);
	text-indent: calc(-1 * var(--mh-space-md));
}

.mh-prose > .mh-listrad + .mh-listrad {
	margin-block-start: var(--mh-space-xs);
}

/* Det här får du ---------------------------------------------------------- */

/*
 * Four items: one column on phones, a two-by-two grid from 768px. A grid
 * rather than CSS columns so the two items in a row share a top line and the
 * reading order runs across, not down. Four across is too cramped for her
 * longer headings ("Något att prova redan samma kväll").
 */
.mh-varden__grid {
	display: grid;
	gap: var(--mh-space-xl) var(--mh-space-2xl);
	padding-inline-start: 0;
	list-style: none;
}

.mh-varden__body {
	display: grid;
	gap: var(--mh-space-2xs);
}

.mh-varden__title {
	font-size: var(--mh-fs-h4);
	line-height: 1.2;
	overflow-wrap: break-word;
}

.mh-varden__text {
	max-width: 34ch;
	line-height: 1.5;
}

@media (min-width: 48rem) {
	.mh-varden__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Om mig ------------------------------------------------------------------ */

.mh-intro__inner {
	display: grid;
	gap: var(--mh-space-xl);
	align-items: center;
}

.mh-intro__actions {
	margin-block-start: var(--mh-space-lg);
	max-width: none;
}

.mh-intro__figure,
.mh-intro__placeholder {
	margin: 0;
	max-inline-size: 26rem;
	margin-inline: auto;
}

.mh-intro__img {
	inline-size: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--mh-radius-lg);
	box-shadow: var(--mh-shadow);
}

/* The Om mig page's placeholder is the shared .mh-placeholder (components.css);
   here it only takes the photo's 1:1 slot. */
.mh-intro__placeholder {
	aspect-ratio: 1 / 1;
}

/*
 * No image chosen: one centred column at reading width, the same treatment as
 * the centred process and FAQ headers. The header's own bottom margin is the
 * gap to the button, as on the other sections.
 */
.mh-intro--text-only .mh-intro__body {
	max-inline-size: var(--mh-container-narrow);
	margin-inline: auto;
}

.mh-intro--text-only .mh-section__header {
	margin-block-end: var(--mh-space-lg);
}

.mh-intro--text-only .mh-intro__actions {
	margin-block-start: 0;
	text-align: center;
}

@media (min-width: 60rem) {
	/* Two columns only with an image. A named grid-area without the template
	   would add implicit tracks and push the text-only column off centre. */
	.mh-intro:not(.mh-intro--text-only) .mh-intro__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas: "media body";
		column-gap: var(--mh-space-3xl);
	}

	.mh-intro:not(.mh-intro--text-only) .mh-intro__body {
		grid-area: body;
	}

	.mh-intro:not(.mh-intro--text-only) .mh-intro__media {
		grid-area: media;
	}

	.mh-intro__figure,
	.mh-intro__placeholder {
		margin-inline: 0;
	}
}

/*
 * The Om mig page reuses the teaser layout. Her story will be longer than the
 * teaser's paragraph, so the columns align to the top; the credential lines
 * sit under the portrait at its width, as under the hero portrait; the text
 * placeholder holds some height so the page does not collapse around it.
 */
.mh-om__inner {
	align-items: start;
}

.mh-om__credentials {
	max-inline-size: 26rem;
	margin-inline: auto;
}

.mh-om__placeholder {
	min-block-size: 16rem;
}

@media (min-width: 60rem) {
	.mh-om__credentials {
		margin-inline: 0;
	}
}

/* Tjänster ---------------------------------------------------------------- */

.mh-tjanster__grid {
	display: grid;
	gap: var(--mh-space-xl);
	grid-template-columns: 1fr;
}

.mh-tjanster__more {
	margin-block-start: var(--mh-space-xl);
	text-align: center;
	max-width: none;
}

/* One column below 768px, per the mobile pass. */
@media (min-width: 48rem) {
	.mh-tjanster__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 72rem) {
	.mh-tjanster__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Hur det går till -------------------------------------------------------- */

.mh-process__list {
	display: grid;
	gap: var(--mh-space-xl);
	margin: 0;
	padding-inline-start: 0;
	list-style: none;
	counter-reset: mh-step;
}

.mh-process__step {
	position: relative;
	counter-increment: mh-step;
	padding-inline-start: calc(2rem + var(--mh-space-md));
}

/* Same 2rem box, gap and teal as .mh-mark, so the three icon sections line up.
   The numeral is teal too: 6.03:1 on the white fill. */
.mh-process__step::before {
	content: counter(mh-step);
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2rem;
	block-size: 2rem;
	border: 1px solid var(--mh-teal);
	border-radius: var(--mh-radius-pill);
	background-color: var(--mh-white);
	color: var(--mh-teal);
	font-family: var(--mh-font-heading);
	font-size: var(--mh-fs-body);
	font-weight: var(--mh-weight-semibold);
	line-height: 1;
}

.mh-process__title {
	font-size: var(--mh-fs-h4);
	line-height: 1.2;
	margin-block-end: var(--mh-space-2xs);
	overflow-wrap: break-word;
}

.mh-process__text {
	line-height: 1.5;
}

.mh-process__note {
	margin-block-start: var(--mh-space-2xl);
	text-align: center;
	max-width: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--mh-space-sm);
	justify-content: center;
}

@media (min-width: 52rem) {
	.mh-process__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 72rem) {
	.mh-process__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Trygghetsrad ------------------------------------------------------------ */

.mh-trygghet__list {
	display: grid;
	gap: var(--mh-space-xl);
	padding-inline-start: 0;
	list-style: none;
	grid-template-columns: 1fr;
}

.mh-trygghet__text {
	line-height: 1.5;
	overflow-wrap: break-word;
}

@media (min-width: 44rem) {
	.mh-trygghet__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 68rem) {
	.mh-trygghet__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Omdömen ----------------------------------------------------------------- */

.mh-omdomen__grid {
	display: grid;
	gap: var(--mh-space-xl);
	padding-inline-start: 0;
	list-style: none;
	grid-template-columns: 1fr;
}

.mh-omdomen__figure {
	margin: 0;
	block-size: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--mh-space-md);
	padding: var(--mh-space-xl);
	background-color: var(--mh-surface);
	border: 1px solid var(--mh-border);
	border-radius: var(--mh-radius-lg);
}

.mh-omdomen__quote p {
	font-family: var(--mh-font-heading);
	font-size: var(--mh-fs-h4);
	line-height: 1.5;
	color: var(--mh-heading);
	max-width: none;
}

.mh-omdomen__name {
	margin-block-start: auto;
	font-size: var(--mh-fs-small);
	color: var(--mh-text);
}

@media (min-width: 52rem) {
	.mh-omdomen__grid {
		grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	}
}

/* Frågor ------------------------------------------------------------------ */

.mh-faq__list {
	display: grid;
	border-block-start: 1px solid var(--mh-border);
}

/* Rows separated by a hairline rather than a gap, so six questions read as one
   list instead of six stacked buttons. */
.mh-faq__item {
	border-block-end: 1px solid var(--mh-border);
	padding-block: var(--mh-space-sm);
}

.mh-faq__question {
	min-block-size: 2.75rem;
}

.mh-faq__readmore {
	margin-block-start: var(--mh-space-md);
	max-width: none;
}

.mh-faq__question {
	display: flex;
	/* Centred rather than nudged down by an em value: the marker then needs no
	   magic number and stays put when a question wraps to two lines. */
	align-items: center;
	justify-content: space-between;
	gap: var(--mh-space-md);
	cursor: pointer;
	font-family: var(--mh-font-heading);
	font-size: var(--mh-fs-h4);
	line-height: 1.3;
	color: var(--mh-heading);
	list-style: none;
}

/* Replace the default disclosure marker with a leaf-green plus that turns into
   a minus. ::-webkit-details-marker keeps Safari from drawing its own. */
.mh-faq__question::-webkit-details-marker {
	display: none;
}

.mh-faq__question::after {
	content: "";
	flex: 0 0 auto;
	inline-size: 1rem;
	block-size: 1rem;
	background-color: var(--mh-leaf);
	clip-path: polygon(45% 0, 55% 0, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0 55%, 0 45%, 45% 45%);
}

.mh-faq__item[open] .mh-faq__question::after {
	clip-path: polygon(0 45%, 100% 45%, 100% 55%, 0 55%);
}

.mh-faq__answer {
	padding-block: var(--mh-space-xs) var(--mh-space-sm);
}

.mh-faq__answer p,
.mh-faq__answer ul {
	max-width: var(--mh-measure);
}

.mh-faq__answer ul {
	padding-inline-start: var(--mh-space-lg);
}

.mh-faq__answer>*+* {
	margin-block-start: var(--mh-space-md);
}

.mh-faq__more {
	margin-block-start: var(--mh-space-xl);
	text-align: center;
	max-width: none;
}

/* Tjänstesida ------------------------------------------------------------- */

/*
 * The service header reuses the hero grid. Without a service image there is no
 * media column, so heading and body stack in one column at every width.
 */
.mh-hero--solo .mh-hero__inner {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto;
	grid-template-areas:
		"heading"
		"body";
}

.mh-tjanst__hero .mh-hero__title {
	font-size: var(--mh-fs-h1-service);
}

/*
 * Description beside the image, in Om mig's proportions: one column with the
 * text first on phones, two equal columns from 60rem with the image left. The
 * image (or its placeholder) is the same 1:1, 26rem slot as Om mig's, so
 * choosing a photo in wp-admin swaps it in without the page moving.
 */
.mh-tjanst__intro {
	display: grid;
	gap: var(--mh-space-2xl);
}

.mh-tjanst__figure,
.mh-tjanst__placeholder {
	margin: 0;
	max-inline-size: 26rem;
	margin-inline: auto;
}

.mh-tjanst__img {
	inline-size: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--mh-radius-lg);
	box-shadow: var(--mh-shadow);
}

.mh-tjanst__placeholder {
	aspect-ratio: 1 / 1;
}

@media (min-width: 60rem) {
	.mh-tjanst__intro {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas: "media body";
		column-gap: var(--mh-space-3xl);
		align-items: start;
	}

	.mh-tjanst__body {
		grid-area: body;
	}

	.mh-tjanst__media {
		grid-area: media;
	}

	.mh-tjanst__figure,
	.mh-tjanst__placeholder {
		margin-inline: 0;
	}
}

/*
 * Her text: the opening paragraph at lead size, then the leaf hairline from
 * under the hero credentials before the rest, so it does not read as one
 * block.
 */
.mh-tjanst__text > :first-child {
	font-size: var(--mh-fs-lead);
}

.mh-tjanst__text > :first-child + * {
	margin-block-start: var(--mh-space-lg);
	padding-block-start: var(--mh-space-lg);
	border-block-start: 1px solid var(--mh-leaf);
}

.mh-tjanst__meta {
	font-size: var(--mh-fs-lead);
}

/* The FAQ answer on a service page is the shared .mh-note (components.css). */
.mh-tjanst__faq {
	margin-block-start: var(--mh-space-2xl);
}

/*
 * Price table: two columns, so a long name such as "Prova på, första besöket"
 * has the width it needs at 375px. Length and note sit under the name.
 */
.mh-prices {
	inline-size: 100%;
	border-collapse: collapse;
	line-height: 1.4;
}

.mh-prices th,
.mh-prices td {
	/* A compact list: one rhythm step below the section default. */
	padding-block: var(--mh-space-sm);
	border-block-end: 1px solid var(--mh-border);
	text-align: start;
	vertical-align: baseline;
}

.mh-prices thead th {
	padding-block-start: 0;
	font-size: var(--mh-fs-small);
	font-weight: var(--mh-weight-semibold);
}

.mh-prices tbody th {
	font-weight: var(--mh-weight-regular);
}

.mh-prices__name {
	display: block;
	font-weight: var(--mh-weight-semibold);
	overflow-wrap: break-word;
}

.mh-prices__meta {
	display: block;
	font-size: var(--mh-fs-small);
}

.mh-prices .mh-prices__price {
	padding-inline-start: var(--mh-space-md);
	text-align: end;
	white-space: nowrap;
}

/*
 * Inside the card every cell gets a small inline inset, and the table is
 * pulled out by the same amount, so the text still lines up with the card's
 * padding while a tinted row has room around its words.
 */
.mh-tjanst__prices .mh-prices {
	inline-size: calc(100% + 2 * var(--mh-space-xs));
	margin-inline: calc(-1 * var(--mh-space-xs));
}

.mh-tjanst__prices .mh-prices th,
.mh-tjanst__prices .mh-prices td {
	padding-inline: var(--mh-space-xs);
}

/*
 * The one marked row (its Markering field is filled; today only Individuell
 * coaching's "Prova på"): a sand tint and its label under the name, with a
 * terracotta dot. The label is ink: terracotta is never text.
 */
.mh-prices__first > * {
	background-color: var(--mh-sand);
}

.mh-prices__tag {
	display: flex;
	align-items: center;
	gap: var(--mh-space-xs);
	margin-block-start: var(--mh-space-2xs);
	font-size: var(--mh-fs-eyebrow);
	font-weight: var(--mh-weight-semibold);
	letter-spacing: var(--mh-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--mh-text);
}

.mh-prices__tag::before {
	content: "";
	flex: 0 0 auto;
	inline-size: var(--mh-space-xs);
	block-size: var(--mh-space-xs);
	border-radius: var(--mh-radius-pill);
	background-color: var(--mh-terracotta);
}

.mh-prices td.mh-prices__price {
	font-weight: var(--mh-weight-semibold);
}

/*
 * Prices and her list are single centred columns, like the FAQ list and the
 * process steps on the front page: heading centred above, content centred
 * below at the card's 34rem, so no half of the page sits empty beside them.
 */
.mh-tjanst__col {
	max-inline-size: 34rem;
	margin-inline: auto;
}

/* Prices and her list share one band, a rhythm step apart. */

.mh-tjanst__group + .mh-tjanst__group {
	margin-block-start: var(--mh-space-2xl);
}

/*
 * The price card sits on cream, where the shell fill and the border barely
 * register (the front-page cards sit on sand). The soft shadow already used
 * on the Om mig and service photos makes it read as one object.
 */
.mh-tjanst__prices {
	/* .mh-card fills its grid row so front-page cards line up; this card has
	   no row to match, and 100% of the column (heading included) left an
	   empty band at its foot. */
	block-size: auto;
	box-shadow: var(--mh-shadow);
}

/* Inside the card the edge closes the table, so the last row needs no rule. */
.mh-tjanst__prices tbody:last-child tr:last-child > * {
	border-block-end: 0;
}

/* Packages start after a heavier rule, so the two kinds of price read apart. */
.mh-prices__single + .mh-prices__paket tr:first-child > * {
	border-block-start: 2px solid var(--mh-border);
}

.mh-tjanst__fakta {
	display: grid;
	gap: var(--mh-space-xs);
	margin-block-start: var(--mh-space-2xs);
	padding-inline-start: 0;
	list-style: none;
}

.mh-tjanst__fakta-label {
	font-weight: var(--mh-weight-semibold);
}

/* A footnote to the prices: small, tight, only the card's own gap above it. */
.mh-tjanst__info {
	font-size: var(--mh-fs-small);
	line-height: 1.4;
}

/* Her list: the card's dash bullets at body size. */
.mh-tjanst__list {
	gap: var(--mh-space-sm);
	font-size: var(--mh-fs-body);
}

.mh-tjanst__back {
	margin-block-start: var(--mh-space-2xl);
}

/* In the centred columns, centred like "Se alla frågor" under the FAQ. */
.mh-tjanst__col > .mh-tjanst__back {
	text-align: center;
	max-width: none;
}

/* Boka tid, kontakt (#kontakt) -------------------------------------------- */

/* Kontakt page: room between the page title (h1) and "Skriv till mig" (h2). */
.mh-kontakt__head {
	margin-block-end: var(--mh-space-xl);
}

/* Text and details left, form right from 60rem; stacked, text first, below. */
.mh-kontakt__inner {
	display: grid;
	gap: var(--mh-space-2xl);
}

.mh-kontakt__intro > * + * {
	margin-block-start: var(--mh-space-md);
}

.mh-kontakt__details {
	display: grid;
	gap: var(--mh-space-xs);
	padding-inline-start: 0;
	list-style: none;
	/* A long e-mail address has no break points. */
	overflow-wrap: anywhere;
}

/* Tap targets: the e-mail and phone links get a 44px row. */
.mh-kontakt__details a {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.75rem;
}

.mh-kontakt__form {
	max-inline-size: none;
}

@media (min-width: 60rem) {
	.mh-kontakt__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
		column-gap: var(--mh-space-3xl);
		align-items: start;
	}
}

/* Avslutande uppmaning ---------------------------------------------------- */

.mh-cta__inner {
	text-align: center;
}

.mh-cta .mh-section__header {
	margin-block-end: var(--mh-space-xl);
}

.mh-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mh-space-md);
	justify-content: center;
}

/* Sidfot ------------------------------------------------------------------ */

/*
 * Colours come only from the --mh-footer-* tokens (tokens.css), so trying a
 * different footer is a change of values there. Up to four columns from 64rem, two from
 * 48rem, stacked below that in source order: brand, menu, contact, newsletter.
 * The menu and the newsletter can both be absent, so the column widths are set
 * per count and the row is always full.
 */
.mh-site-footer {
	background-color: var(--mh-footer-bg);
	color: var(--mh-footer-text);
	padding-block: var(--mh-space-3xl) var(--mh-space-xl);
}

.mh-site-footer a {
	color: var(--mh-footer-link);
	text-underline-offset: 0.2em;
}

.mh-site-footer :where(a, button, input):focus-visible {
	outline-color: var(--mh-footer-focus);
}

.mh-site-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mh-space-2xl);
}

.mh-site-footer__col>*+* {
	margin-block-start: var(--mh-space-md);
}

.mh-site-footer__title {
	font-size: var(--mh-fs-body);
	line-height: 1.3;
	color: var(--mh-footer-heading);
}

/*
 * The brand column centres as a unit: logo above, tagline directly beneath it.
 * Flex rather than text-align alone, so the logo centres whatever display its
 * link ends up with, while text-align still carries a tagline that wraps onto a
 * second line. Meny and Kontakt keep their left edge; this is the only column
 * that centres.
 */
.mh-site-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.mh-site-footer__logo-link {
	display: inline-flex;
	border-radius: var(--mh-radius-sm);
	text-decoration: none;
}

/* Sits tight under the logo, closer than the column's usual rhythm. */
.mh-site-footer__col>.mh-site-footer__tagline {
	margin-block-start: var(--mh-space-2xs);
}

.mh-site-footer__tagline {
	font-family: var(--mh-font-heading);
	font-size: var(--mh-fs-lead);
	line-height: 1.3;
	color: var(--mh-footer-tagline);
}

.mh-site-footer__muted {
	font-size: var(--mh-fs-small);
	color: var(--mh-footer-muted);
}

.mh-site-footer__menu,
.mh-site-footer__contact {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mh-site-footer__contact {
	gap: var(--mh-space-xs);
	/* A long e-mail address has no break points; never let it cross into the
	   next column. */
	overflow-wrap: anywhere;
}

/*
 * Full-height rows so each link is a 44px tap target. The list sits closer to
 * its heading so the first link's text lines up with the other columns.
 */
.mh-site-footer__col>.mh-site-footer__menu {
	margin-block-start: var(--mh-space-2xs);
}

.mh-site-footer__menu a {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.75rem;
	text-decoration: none;
}

.mh-site-footer__menu a:hover {
	text-decoration: underline;
}

/* Current page: a thicker underline in the link colour. */
.mh-site-footer__menu .current-menu-item>a,
.mh-site-footer__menu .current-menu-parent>a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* Copyright with the credit on the left, the privacy-policy link on the
   right. On narrow screens the link wraps onto its own line, left-aligned.
   Both are the footer body size and the footer's muted colour. */
.mh-site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mh-space-2xs) var(--mh-space-lg);
	margin-block-start: var(--mh-space-2xl);
	padding-block-start: var(--mh-space-lg);
	border-block-start: 1px solid var(--mh-footer-divider);
	font-size: var(--mh-fs-body);
	color: var(--mh-footer-muted);
}

/* Both links in the row: the link colour, underlined, 44px tap target,
   centred on the line next to the surrounding text. Hover thickens the
   underline rather than changing colour, so it works on any footer tone. */
.mh-site-footer__policy,
.mh-site-footer__credit-link {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.75rem;
	vertical-align: middle;
	color: var(--mh-footer-link);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.mh-site-footer__policy:hover,
.mh-site-footer__credit-link:hover {
	text-decoration-thickness: 2px;
}

@media (min-width: 48rem) {
	.mh-site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--mh-space-2xl) var(--mh-space-xl);
	}

	/* Three columns in a two-track grid: the logo takes the first row on its
	   own, Meny and Kontakt share the second. Otherwise the logo sat beside
	   the tall menu with an empty block under it and Kontakt alone below. */
	.mh-site-footer__grid--3 .mh-site-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (min-width: 64rem) {

	/* Widest track goes to the column with the longest lines: the newsletter
	   form while it is shown, the contact list once it is not. */
	.mh-site-footer__grid--4 {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.3fr);
	}

	.mh-site-footer__grid--3 {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1.1fr);
	}

	.mh-site-footer__grid--3 .mh-site-footer__brand {
		grid-column: auto;
	}

	/* Two columns, the rare case of no menu and no newsletter, keep the pair of
	   equal tracks set at 48rem. */
}

/* Bokning (Boka tid, #boka) ---------------------------------------------- */

/* Without JavaScript the calendar cannot work: show the line pointing to the
   contact form instead of a form that goes nowhere. */
.mh-boka__nojs {
	margin: 0;
}

.mh-js .mh-boka__nojs,
html:not(.mh-js) .mh-boka__form {
	display: none;
}

.mh-boka__form {
	display: grid;
	gap: var(--mh-space-lg);
}

.mh-boka__form[hidden],
.mh-boka__step[hidden] {
	display: none;
}

.mh-boka__step {
	min-inline-size: 0;
	margin: 0;
	padding: var(--mh-space-lg) var(--mh-space-sm);
	background-color: var(--mh-surface);
	border: 1px solid var(--mh-border);
	border-radius: var(--mh-radius);
}

.mh-boka__step-title {
	display: flex;
	align-items: center;
	gap: var(--mh-space-sm);
	margin: 0 0 var(--mh-space-md);
	font-size: var(--mh-fs-h4);
}

/* A finished step: heading and a one-line summary, no gap below. */
.mh-boka__step-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mh-space-xs) var(--mh-space-md);
	margin: 0;
	padding-inline-start: calc(2rem + var(--mh-space-sm));
}

.mh-boka__step-summary[hidden],
.mh-boka__step-body[hidden] {
	display: none;
}

.mh-boka__step-summary-text {
	min-inline-size: 0;
	font-weight: var(--mh-weight-semibold);
	overflow-wrap: break-word;
}

/* A text button, 44px tall to stay above the tap-target floor. */
.mh-boka__change {
	min-block-size: 2.75rem;
	padding-inline: var(--mh-space-xs);
	background: none;
	border: 0;
	color: var(--mh-teal);
	font: inherit;
	font-weight: var(--mh-weight-semibold);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.mh-boka__change:hover {
	color: var(--mh-slate);
}

.mh-boka__progress {
	margin: 0;
	color: var(--mh-leaf-deep);
	font-size: var(--mh-fs-small);
	font-weight: var(--mh-weight-semibold);
}

.mh-boka__progress:empty {
	display: none;
}

.mh-boka__next {
	margin: var(--mh-space-md) 0 0;
}

.mh-boka__step-error:empty {
	display: none;
}

.mh-boka__step-error {
	margin: var(--mh-space-sm) 0 0;
}

/* The same teal circle as the process steps. */
.mh-boka__num {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 2rem;
	block-size: 2rem;
	border: 1px solid var(--mh-teal);
	border-radius: var(--mh-radius-pill);
	background-color: var(--mh-white);
	color: var(--mh-teal);
	font-size: var(--mh-fs-body);
	line-height: 1;
}

.mh-boka__radio {
	flex: none;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	margin: 0;
	accent-color: var(--mh-teal);
}

/* One bookable row: radio, name and detail, price. */
.mh-boka__choice,
.mh-boka__option {
	display: flex;
	align-items: flex-start;
	gap: var(--mh-space-sm);
	min-block-size: 2.75rem;
	padding: var(--mh-space-sm) var(--mh-space-md);
	background-color: var(--mh-white);
	border: 1px solid var(--mh-border);
	border-radius: var(--mh-radius-sm);
	cursor: pointer;
}

.mh-boka__choice .mh-boka__radio,
.mh-boka__option .mh-boka__radio {
	margin-block-start: 0.2em;
}

.mh-boka__choice:has(:checked),
.mh-boka__option:has(:checked) {
	border-color: var(--mh-teal);
	box-shadow: inset 0 0 0 1px var(--mh-teal);
}

/* "Betala nu" while online payment is off. Greyed by a dashed edge and muted
   text, still readable (leaf-deep on the card), because its label carries the
   explanation; the radio itself is disabled, so nothing rests on the look. */
.mh-boka__option:has(:disabled) {
	background-color: var(--mh-surface);
	border-style: dashed;
	color: var(--mh-leaf-deep);
	cursor: not-allowed;
}

/* The one line under the booking that points to the Kontakt page. */
.mh-boka__fragor {
	margin: var(--mh-space-xl) 0 0;
}

.mh-boka__kontakt[hidden],
[data-mh-send][hidden] {
	display: none;
}

.mh-boka__choice-body {
	display: grid;
	flex: 1 1 auto;
	min-inline-size: 0;
}

.mh-boka__choice-name,
.mh-boka__option-title {
	display: block;
	font-weight: var(--mh-weight-semibold);
	overflow-wrap: break-word;
}

.mh-boka__choice-detail,
.mh-boka__option-text {
	display: block;
	font-size: var(--mh-fs-small);
}

/* The package note under a package row: same small print, a little apart. */
.mh-boka__choice-note {
	display: block;
	margin-block-start: var(--mh-space-2xs);
	font-size: var(--mh-fs-small);
}

.mh-boka__choice-price {
	flex: none;
	font-weight: var(--mh-weight-semibold);
	white-space: nowrap;
}

/* Calendar. */
.mh-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mh-space-sm);
	margin-block-end: var(--mh-space-sm);
}

.mh-cal__month {
	margin: 0;
	font-size: var(--mh-fs-body);
	text-transform: capitalize;
}

.mh-cal__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	background-color: var(--mh-white);
	border: 1px solid var(--mh-border);
	border-radius: var(--mh-radius-pill);
	color: var(--mh-teal);
	cursor: pointer;
}

.mh-cal__nav .mh-icon {
	inline-size: 1.1rem;
	block-size: 1.1rem;
}

.mh-cal__nav:disabled {
	color: var(--mh-border);
	cursor: default;
}

.mh-cal__grid {
	inline-size: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.mh-cal__grid th {
	padding-block-end: var(--mh-space-2xs);
	font-size: var(--mh-fs-small);
	font-weight: var(--mh-weight-regular);
	text-align: center;
}

.mh-cal__grid abbr {
	text-decoration: none;
}

.mh-cal__grid td {
	padding: 1px;
	text-align: center;
}

/* At 375px wide the grid is about 311px, so cells stay near the 44px floor. */
.mh-cal__day {
	inline-size: 100%;
	min-block-size: 2.75rem;
	padding: 0;
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: var(--mh-radius-sm);
	color: var(--mh-leaf);
	font: inherit;
	cursor: default;
}

.mh-cal__day.has-times {
	background-color: var(--mh-white);
	border-color: var(--mh-border);
	color: var(--mh-text);
	font-weight: var(--mh-weight-semibold);
	cursor: pointer;
}

.mh-cal__day.has-times:hover {
	border-color: var(--mh-teal);
}

.mh-cal__day[aria-current="date"] {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.mh-cal__day[aria-pressed="true"] {
	background-color: var(--mh-teal);
	border-color: var(--mh-teal);
	color: var(--mh-white);
}

.mh-cal__status {
	min-block-size: 1.5em;
	margin: var(--mh-space-sm) 0 0;
	font-size: var(--mh-fs-small);
}

.mh-boka__times {
	min-inline-size: 0;
	margin: var(--mh-space-lg) 0 0;
	padding: 0;
	border: 0;
}

.mh-boka__times[hidden] {
	display: none;
}

.mh-boka__times-legend {
	margin-block-end: var(--mh-space-sm);
	padding: 0;
	font-weight: var(--mh-weight-semibold);
}

.mh-boka__times-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
	gap: var(--mh-space-xs);
}

.mh-boka__time {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--mh-space-xs);
	min-block-size: 2.75rem;
	padding-inline: var(--mh-space-sm);
	background-color: var(--mh-white);
	border: 1px solid var(--mh-border);
	border-radius: var(--mh-radius-pill);
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.mh-boka__time:has(:checked) {
	border-color: var(--mh-teal);
	box-shadow: inset 0 0 0 1px var(--mh-teal);
	font-weight: var(--mh-weight-semibold);
}

/* Details and payment. */
.mh-boka__summary {
	margin: 0 0 var(--mh-space-md);
	padding: var(--mh-space-sm) var(--mh-space-md);
	background-color: var(--mh-white);
	border-inline-start: 3px solid var(--mh-leaf);
	font-weight: var(--mh-weight-semibold);
}

.mh-boka__note {
	margin: 0 0 var(--mh-space-md);
	max-inline-size: var(--mh-measure);
}

.mh-boka__note[hidden] {
	display: none;
}

.mh-boka__fields {
	display: grid;
	gap: var(--mh-space-sm);
	max-inline-size: 32rem;
	margin-block-end: var(--mh-space-md);
}

.mh-boka__step .mh-field {
	margin-block-end: var(--mh-space-md);
}

.mh-boka__fields .mh-field {
	margin-block-end: 0;
}

.mh-boka__options {
	display: grid;
	gap: var(--mh-space-xs);
	min-inline-size: 0;
	margin: 0 0 var(--mh-space-md);
	padding: 0;
	border: 0;
}

.mh-boka__options[hidden],
.mh-boka__option[hidden] {
	display: none;
}

.mh-boka__options legend {
	margin-block-end: var(--mh-space-xs);
	padding: 0;
}

.mh-field__input--short {
	min-block-size: 6rem;
	resize: vertical;
}

.mh-field__error {
	color: var(--mh-terracotta-hover);
	font-size: var(--mh-fs-small);
	font-weight: var(--mh-weight-semibold);
}

.mh-field__error:empty {
	display: none;
}

.mh-field__input[aria-invalid="true"] {
	border-color: var(--mh-terracotta-hover);
}

.mh-boka__privacy {
	margin: 0 0 var(--mh-space-md);
	font-size: var(--mh-fs-small);
}

/* Consent sentence directly above the submit button. Small but readable:
   ink on the section background, so contrast is the body ratio. */
.mh-boka__consent {
	margin: 0 0 var(--mh-space-md);
	font-size: var(--mh-fs-small);
	color: var(--mh-ink);
}

/* Invoice note, shown while online payment is off. */
.mh-boka__faktura {
	margin: 0 0 var(--mh-space-md);
	font-size: var(--mh-fs-small);
	color: var(--mh-ink);
}

.mh-boka__status {
	margin-block-start: var(--mh-space-sm);
}

.mh-boka__notice {
	margin: 0 0 var(--mh-space-lg);
	padding: var(--mh-space-sm) var(--mh-space-md);
	background-color: var(--mh-surface);
	border-inline-start: 3px solid var(--mh-terracotta);
}

/* After booking, and on the return from Nexi. */
.mh-boka__result {
	padding: var(--mh-space-lg) var(--mh-space-md);
	background-color: var(--mh-surface);
	border: 1px solid var(--mh-border);
	border-radius: var(--mh-radius);
}

.mh-boka__result[hidden] {
	display: none;
}

.mh-boka__result-title {
	margin-block: 0 var(--mh-space-sm);
	font-size: var(--mh-fs-h4);
}

.mh-boka__details {
	margin: var(--mh-space-md) 0 0;
	padding-inline-start: var(--mh-space-lg);
}

.mh-boka__details:empty {
	display: none;
}

@media (min-width: 40rem) {
	.mh-boka__step,
	.mh-boka__result {
		padding: var(--mh-space-xl);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.mh-boka__choice,
	.mh-boka__option,
	.mh-boka__time,
	.mh-cal__day {
		transition: border-color var(--mh-transition), background-color var(--mh-transition);
	}
}

/* Fields sit on the step card, which is the field colour itself. */
.mh-boka__step .mh-field__input {
	background-color: var(--mh-white);
}

/* Boka tid: the title band and the booking are one block. The band keeps its
   top padding and drops the bottom; the booking, on the same background,
   starts close under the title. Two classes, to outrank .mh-light .mh-section
   (the tight section rhythm), which is declared earlier in this file. */
.mh-section.mh-boka-head {
	padding-block-end: 0;
}

.mh-section.mh-boka--joined {
	padding-block-start: var(--mh-space-md);
}

.mh-boka--joined .mh-section__header {
	margin-block-end: var(--mh-space-lg);
}