/*
 * Components: buttons, cards, forms, nav.
 * Reusable pieces shared across sections. Built per-component as sections land.
 * All values from tokens.css; motion wrapped in prefers-reduced-motion: no-preference.
 */

/* Buttons --------------------------------------------------------------- */
.mh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mh-space-xs);
	padding: var(--mh-space-sm) var(--mh-space-lg);
	border: 1px solid transparent;
	border-radius: var(--mh-radius-pill);
	font-weight: var(--mh-weight-semibold);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	/* Tap target floor: 44px tall, per the mobile pass. */
	min-block-size: 2.75rem;
}

.mh-btn--primary {
	background-color: var(--mh-terracotta);
	color: var(--mh-white);
}

.mh-btn--primary:hover {
	background-color: var(--mh-terracotta-hover);
	color: var(--mh-white);
}

.mh-btn--secondary {
	background-color: transparent;
	border-color: var(--mh-teal);
	color: var(--mh-teal);
}

.mh-btn--secondary:hover {
	background-color: var(--mh-teal);
	color: var(--mh-white);
}

@media (prefers-reduced-motion: no-preference) {
	.mh-btn {
		transition: background-color var(--mh-transition), color var(--mh-transition);
	}
}

/* Buttons on the terracotta band. */
.mh-btn--on-accent {
	background-color: var(--mh-white);
	color: var(--mh-terracotta);
}

.mh-btn--on-accent:hover {
	background-color: var(--mh-cream);
	color: var(--mh-terracotta-hover);
}

.mh-btn--ghost {
	background-color: transparent;
	border-color: var(--mh-white);
	color: var(--mh-white);
}

.mh-btn--ghost:hover {
	background-color: var(--mh-white);
	color: var(--mh-terracotta-hover);
}

/* Focus ring on a coloured band needs the light side of the palette. */
.mh-section--accent :where(a, button):focus-visible,
.mh-section--dark :where(a, button, input):focus-visible {
	outline-color: var(--mh-white);
}

/* Card ------------------------------------------------------------------ */
.mh-card {
	display: flex;
	flex-direction: column;
	/* Every card fills its grid row, so a short card is as tall as a long one
	   and the buttons line up across the row. */
	block-size: 100%;
	background-color: var(--mh-surface);
	border: 1px solid var(--mh-border);
	border-radius: var(--mh-radius-lg);
	overflow: hidden;
	/* Card text is not body copy: tighter than the 1.7 body line-height. */
	line-height: 1.5;
}

.mh-card__figure {
	margin: 0;
}

.mh-card__img {
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.mh-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--mh-space-sm);
	padding: var(--mh-space-lg);
	flex: 1 1 auto;
}

.mh-card__title {
	font-size: var(--mh-fs-h4);
	line-height: 1.2;
	/*
	 * No automatic hyphenation. It broke "småbarnsföräldrar" mid-word, which
	 * reads as a rendering fault. Long service names get a short card title in
	 * wp-admin instead; overflow-wrap stays as a last resort so an unbroken
	 * string can never run past the card edge.
	 */
	overflow-wrap: break-word;
	text-wrap: balance;
	/*
	 * Two lines' worth of height whatever the title length, so the price lines
	 * align across a row of cards. 2 lines at line-height 1.2.
	 */
	min-block-size: 2.4em;
}

.mh-card__titlelink {
	color: var(--mh-heading);
	text-decoration: none;
}

.mh-card__titlelink:hover {
	color: var(--mh-terracotta);
	text-decoration: underline;
}

.mh-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mh-space-sm);
	align-items: baseline;
	max-width: none;
}

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

/* One part of a price line ("6 träffar à 90 min"): never broken inside, so
   the line wraps only at its " · " separators. */
.mh-card__price-part {
	white-space: nowrap;
}

.mh-card__duration {
	font-size: var(--mh-fs-small);
	color: var(--mh-text);
}

.mh-card__duration::before {
	content: "";
	display: inline-block;
	inline-size: var(--mh-space-sm);
	block-size: 1px;
	margin-inline-end: var(--mh-space-xs);
	vertical-align: middle;
	background-color: var(--mh-leaf);
}

.mh-card__intro,
.mh-card__list {
	max-width: none;
}

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

.mh-card__list li {
	position: relative;
	padding-inline-start: var(--mh-space-lg);
}

.mh-card__list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.6em;
	inline-size: var(--mh-space-md);
	block-size: 1px;
	background-color: var(--mh-leaf);
}

/*
 * Push the button to the bottom so cards of different length line up, with a
 * guaranteed minimum above it so the fullest card is never cramped.
 */
.mh-card__actions {
	margin-block-start: auto;
	padding-block-start: var(--mh-space-lg);
	max-width: none;
}

/* Icon mark ------------------------------------------------------------- */

/*
 * One icon pattern for the value row, the process steps and the trust band:
 * a 2rem teal mark to the left of the text, aligned to the first line,
 * separated by --mh-space-md. Sections differ by background and content, never
 * by inventing their own icon treatment.
 */
.mh-marked {
	display: flex;
	align-items: flex-start;
	gap: var(--mh-space-md);
}

.mh-mark {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	inline-size: 2rem;
	block-size: 2rem;
	color: var(--mh-teal);
}

.mh-mark svg {
	inline-size: 2rem;
	block-size: 2rem;
}

/* Same box, same gap, but a numbered circle instead of an icon. */
.mh-mark--number {
	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;
}

/* Note ------------------------------------------------------------------- */

/*
 * A quiet supporting note: an FAQ answer shown in full where it matters (the
 * confidentiality answer on ensamstående, the rebooking rule on Boka tid). Not
 * a card: no fill, border or shadow, only a leaf edge on the reading side, so
 * it cannot be mistaken for a price card or a form.
 */
.mh-note {
	padding-block: var(--mh-space-2xs);
	padding-inline-start: var(--mh-space-lg);
	border-inline-start: 2px solid var(--mh-leaf);
}

.mh-note__title {
	font-size: var(--mh-fs-h4);
	margin-block-end: var(--mh-space-md);
}

.mh-note__link {
	margin-block-start: var(--mh-space-md);
}

/* Image placeholder ------------------------------------------------------ */

/*
 * Placeholder for a missing photo: dashed leaf edge, icon, label, one line
 * saying where to upload. Used by Om mig and by each service page. The section
 * sets the aspect ratio of the slot it fills, so uploading an image swaps it
 * out without the page moving. Deliberately reads as a placeholder rather than
 * as a design element.
 */
.mh-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--mh-space-xs);
	inline-size: 100%;
	padding: var(--mh-space-xl);
	background-color: var(--mh-surface);
	border: 1px dashed var(--mh-leaf);
	border-radius: var(--mh-radius-lg);
	text-align: center;
}

.mh-placeholder__icon {
	display: inline-flex;
	color: var(--mh-leaf);
}

.mh-placeholder__icon svg {
	inline-size: 2rem;
	block-size: 2rem;
}

.mh-placeholder__label {
	font-size: var(--mh-fs-eyebrow);
	font-weight: var(--mh-weight-semibold);
	letter-spacing: var(--mh-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--mh-leaf-deep);
	max-width: none;
}

.mh-placeholder__text {
	font-size: var(--mh-fs-small);
	line-height: 1.4;
	color: var(--mh-text);
	max-width: 24ch;
}

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

/*
 * Sticky, and always cream: it reads as part of the page, not a bar floating
 * over it. Scrolling adds a soft shadow (main.js sets .is-scrolled), never a
 * change of tone.
 */
.mh-site-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 100;
	background-color: var(--mh-cream);
}

@media (prefers-reduced-motion: no-preference) {
	.mh-site-header {
		transition: box-shadow var(--mh-transition);
	}
}

.mh-site-header.is-scrolled {
	box-shadow: var(--mh-shadow-header);
}

/* The WP admin bar is fixed from 601px up; below that it scrolls away. */
@media (min-width: 37.5625rem) {
	.admin-bar .mh-site-header {
		inset-block-start: var(--wp-admin--admin-bar--height, 0px);
	}
}

.mh-site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mh-space-sm) var(--mh-space-lg);
	max-width: var(--mh-container-header);
	margin-inline: auto;
	padding-inline: var(--mh-gutter);
	padding-block: var(--mh-space-sm);
}

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

/* Fixed height, width from the file: a square tree mark lands at 64 x 64. */
.mh-logo {
	display: block;
	block-size: var(--mh-logo-height);
	inline-size: auto;
	max-inline-size: none;
}

/*
 * The footer's own lockup: name and line beneath the mark, so much wider than
 * tall. Capped on both axes with the other dimension auto, which keeps the
 * aspect ratio and lets whichever limit bites first decide the size. Width
 * matters because the brand column is only about 380px at its widest, and the
 * file she uploads could be any size.
 */
.mh-logo--lockup {
	block-size: auto;
	max-block-size: var(--mh-logo-footer-height);
	max-inline-size: 100%;
}

/*
 * Stand-in for the logo, the same 64 x 64 square the tree mark will fill, so
 * choosing the file in Webbplatsinställningar causes no shift. Dashed leaf
 * border and caption, the same placeholder language as the Om mig image.
 */
.mh-logo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--mh-logo-height);
	block-size: var(--mh-logo-height);
	padding: var(--mh-space-2xs);
	background-color: var(--mh-surface);
	border: 1px dashed var(--mh-leaf);
	border-radius: var(--mh-radius-sm);
}

.mh-logo-placeholder__text {
	font-size: var(--mh-fs-micro);
	font-weight: var(--mh-weight-semibold);
	line-height: 1.15;
	color: var(--mh-text);
	text-align: center;
}

/* Menu toggle: only exists when JS can drive it. */
.mh-nav-toggle {
	display: none;
}

.mh-js .mh-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mh-space-xs);
	min-block-size: 2.75rem;
	min-inline-size: 2.75rem;
	margin-inline-start: auto;
	padding-inline: var(--mh-space-md);
	background-color: transparent;
	border: 1px solid var(--mh-border);
	border-radius: var(--mh-radius-pill);
	color: var(--mh-heading);
	font: inherit;
	font-weight: var(--mh-weight-semibold);
	cursor: pointer;
}

.mh-nav-toggle__icon {
	display: inline-flex;
}

.mh-nav-toggle__icon svg {
	inline-size: 1.5rem;
	block-size: 1.5rem;
}

.mh-nav-toggle[aria-expanded="true"] .mh-nav-toggle__icon--open,
.mh-nav-toggle[aria-expanded="false"] .mh-nav-toggle__icon--close {
	display: none;
}

/*
 * Narrow layout. Without JS the menu is a plain list under the logo, so it is
 * never out of reach. With JS it is a full-screen cream panel below the header
 * bar, booking button first, opened by the toggle.
 */
.mh-nav {
	flex: 1 1 100%;
	display: flex;
	flex-direction: column;
	gap: var(--mh-space-lg);
}

.mh-js .mh-nav {
	display: none;
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	inset-block-start: var(--mh-panel-top, var(--mh-header-height));
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-block: var(--mh-space-lg) var(--mh-space-2xl);
	padding-inline: var(--mh-gutter);
	background-color: var(--mh-cream);
	border-block-start: 1px solid var(--mh-border);
}

.mh-js .mh-site-header.is-open .mh-nav {
	display: flex;
}

/* The page behind the open panel does not scroll. */
.mh-nav-open {
	overflow: hidden;
}

.mh-nav__cta {
	max-width: none;
	margin: 0;
}

.mh-nav__cta .mh-btn {
	inline-size: 100%;
	white-space: nowrap;
}

.mh-nav__list {
	display: flex;
	flex-direction: column;
	/* At least 8px between adjacent tap targets. */
	gap: var(--mh-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mh-nav__list a {
	display: flex;
	align-items: center;
	min-block-size: 3rem;
	padding-inline: var(--mh-space-xs);
	color: var(--mh-heading);
	font-size: var(--mh-fs-lead);
	text-decoration: none;
}

.mh-nav__list a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.35em;
}

/*
 * Current page: slate text, terracotta underline. The one place terracotta
 * marks a word, as an accent, never as text colour. WordPress's own classes;
 * current-menu-parent is set on Tjänster while a single service is open.
 */
.mh-nav__list .current-menu-item > a,
.mh-nav__list .current-menu-parent > a {
	text-decoration: underline;
	text-decoration-color: var(--mh-terracotta);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

/*
 * Sub-list (Tjänster lists every service). In the panel it opens inline under
 * its parent, indented, by the chevron button next to the link; the link itself
 * still goes to the parent page. Without JS there is no button and the sub-list
 * simply shows.
 */
.mh-nav__list .menu-item-has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--mh-space-xs);
}

.mh-nav__list .menu-item-has-children > a {
	flex: 0 1 auto;
}

.mh-nav__sub-toggle {
	display: none;
}

.mh-js .mh-nav__sub-toggle {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	background-color: transparent;
	border: 1px solid var(--mh-border);
	border-radius: var(--mh-radius-pill);
	color: var(--mh-heading);
	cursor: pointer;
}

.mh-nav__sub-icon {
	inline-size: 1rem;
	block-size: 1rem;
}

.mh-nav__sub-toggle[aria-expanded="true"] .mh-nav__sub-icon {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: no-preference) {
	.mh-nav__sub-icon {
		transition: transform var(--mh-transition);
	}
}

.mh-nav__list .sub-menu {
	display: flex;
	flex: 1 1 100%;
	flex-direction: column;
	gap: var(--mh-space-xs);
	margin: 0;
	padding-block: var(--mh-space-2xs) 0;
	padding-inline: var(--mh-space-lg) 0;
	list-style: none;
}

.mh-js .mh-nav__list .sub-menu {
	display: none;
}

.mh-js .mh-nav__list .is-sub-open > .sub-menu {
	display: flex;
}

.mh-nav__list .sub-menu a {
	font-size: var(--mh-fs-body);
}

/*
 * Wide layout: logo left, menu then booking button on the right, all on one
 * line. Applies only while the header is not .is-compact: main.js adds that
 * class when the items no longer fit (a seventh item, a longer label, a wider
 * logo), and the header falls back to the toggle at any width.
 */
@media (min-width: 72rem) {
	.mh-site-header:not(.is-compact) .mh-site-header__inner {
		flex-wrap: nowrap;
	}

	.mh-site-header:not(.is-compact) .mh-nav-toggle {
		display: none;
	}

	.mh-site-header:not(.is-compact) .mh-nav {
		position: static;
		display: flex;
		flex: 0 1 auto;
		flex-direction: row;
		align-items: center;
		gap: var(--mh-space-lg);
		margin-inline-start: auto;
		padding: 0;
		overflow: visible;
		background-color: transparent;
		border: 0;
	}

	.mh-site-header:not(.is-compact) .mh-nav__cta {
		order: 2;
	}

	.mh-site-header:not(.is-compact) .mh-nav__cta .mh-btn {
		inline-size: auto;
	}

	.mh-site-header:not(.is-compact) .mh-nav__list {
		flex-direction: row;
		gap: var(--mh-space-2xs);
		white-space: nowrap;
	}

	.mh-site-header:not(.is-compact) .mh-nav__list a {
		min-block-size: 2.75rem;
		padding-inline: var(--mh-space-sm);
		font-size: var(--mh-fs-body);
	}

	/*
	 * The sub-list becomes a dropdown under its parent, opened by click (never
	 * hover). Shell panel with the card's edge and the header's shadow, one
	 * 44px row per service. Anchored to the parent's left edge; Tjänster sits
	 * far enough from the right that a 16rem panel stays inside the header,
	 * which the fit check in main.js relies on. Closed unless main.js opens it:
	 * without JavaScript the parent link still leads to every service.
	 */
	.mh-site-header:not(.is-compact) .mh-nav__list .menu-item-has-children {
		position: relative;
		flex-wrap: nowrap;
		column-gap: 0;
	}

	/*
	 * Link and chevron read as one control: the link drops its end padding and
	 * the glyph sits --mh-space-2xs inside the button's left edge, 4px from the
	 * word. On this layout the button is as wide as its padding makes it
	 * (4px, the 16px glyph, 12px: 32px), so the space after the chevron
	 * matches the space between the other items. It keeps the 44px height;
	 * 32x44 is above the 24px minimum of WCAG 2.2 target size (2.5.8, AA). The
	 * narrow panel keeps the full 44x44.
	 */
	.mh-site-header:not(.is-compact) .mh-nav__list .menu-item-has-children > a {
		padding-inline-end: 0;
	}

	.mh-site-header:not(.is-compact) .mh-nav__sub-toggle {
		justify-content: flex-start;
		inline-size: auto;
		padding-inline: var(--mh-space-2xs) var(--mh-space-sm);
		border-color: transparent;
	}

	.mh-site-header:not(.is-compact) .mh-nav__list .sub-menu {
		display: none;
		position: absolute;
		inset-block-start: 100%;
		inset-inline-start: 0;
		z-index: 1;
		min-inline-size: 16rem;
		margin-block-start: var(--mh-space-xs);
		padding: var(--mh-space-xs);
		gap: 0;
		background-color: var(--mh-surface);
		border: 1px solid var(--mh-border);
		border-radius: var(--mh-radius);
		box-shadow: var(--mh-shadow-header);
	}

	.mh-site-header:not(.is-compact) .mh-nav__list .is-sub-open > .sub-menu {
		display: flex;
	}

	.mh-site-header:not(.is-compact) .mh-nav__list .sub-menu a {
		padding-inline: var(--mh-space-sm);
		border-radius: var(--mh-radius-sm);
	}
}

/* Forms ------------------------------------------------------------------ */

.mh-form {
	display: grid;
	gap: var(--mh-space-sm);
	max-inline-size: 28rem;
}

.mh-field {
	display: grid;
	gap: var(--mh-space-2xs);
	max-width: none;
	margin: 0;
}

.mh-field__label {
	font-size: var(--mh-fs-small);
	font-weight: var(--mh-weight-semibold);
}

/* Inherits the body size (17px and up), so iOS does not zoom on focus. */
.mh-field__input {
	inline-size: 100%;
	min-block-size: 2.75rem;
	padding-block: var(--mh-space-xs);
	padding-inline: var(--mh-space-sm);
	background-color: var(--mh-surface);
	border: 1px solid var(--mh-border);
	border-radius: var(--mh-radius-sm);
	color: var(--mh-text);
	font: inherit;
}

.mh-field__input--textarea {
	min-block-size: 10rem;
	resize: vertical;
}

.mh-form__actions {
	max-width: none;
	margin: 0;
}

.mh-form__status {
	max-width: none;
	margin: 0;
	font-size: var(--mh-fs-small);
	font-weight: var(--mh-weight-semibold);
}

/* The newsletter form sits in the footer: its labels follow the footer text. */
.mh-form--on-dark .mh-field__label,
.mh-form--on-dark .mh-form__status {
	color: var(--mh-footer-text);
}

/* Logo placeholder in the footer: same box, in the footer's colours. */
.mh-logo-placeholder--footer {
	background-color: transparent;
	border-color: var(--mh-footer-divider);
}

.mh-logo-placeholder--footer .mh-logo-placeholder__text {
	color: var(--mh-footer-text);
}