/*
Theme Name: Vårdonline (Astra child)
Template: astra
Description: Design layer for vardonline.se on top of Astra. Change log: ~/Projekt/vardonline/changelog.md.
Version: 1.0.0
Text Domain: vardonline-child
*/

/* =========================================================
   Design tokens (current palette; green and amber darkened only
   where the original failed WCAG AA contrast)
   ========================================================= */
:root {
	/* Design system since round 25 (CLAUDE.md, "Design system"). Neutral base + one accent. */
	--vo-ink: #111827;          /* headings, logo, icons: near-black (17.7:1 on white) */
	--vo-text: #374151;         /* body text (10.3:1 on white) */
	--vo-muted: #4b5563;        /* secondary text (7.6:1 on white, 7.0:1 on --vo-bg) */
	--vo-navy: #111827;         /* menu text: same as ink (no second dark colour) */
	--vo-green: #007a52;        /* the accent: links, buttons, active states only (5.4:1 on white, 5.0:1 on --vo-bg) */
	--vo-green-hover: #00633f;
	--vo-amber: #4b5563;        /* retired: maps to muted */
	--vo-focus: #007a52;        /* focus ring in the accent colour */
	--vo-bg: #f7f7f8;           /* page background (light grey) */
	--vo-surface: #ffffff;      /* cards, tables, boxes */
	--vo-border: #e5e7eb;       /* 1 px borders everywhere */
	--vo-border-strong: #d1d5db;/* form fields, labels */
	--vo-radius: 8px;           /* one radius for cards, tables, buttons, fields */
	--vo-measure: 34em;         /* max line length: ~70 characters */
	--vo-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* =========================================================
   1. Header: sticky instead of fixed/transparent so it never
      covers content; compact on mobile; readable hover state.
   ========================================================= */
html body .site-header,
html body.ast-theme-transparent-header #masthead {
	position: sticky !important;
	top: 0;
	z-index: 999;
	width: 100%;
	background: #fff;
}

html body .site-header .ast-main-header-wrap,
html body .site-header .ast-main-header-wrap.active {
	padding: 8px 0 !important;
}

/* Menu links: 44 px tap height, readable hover (old hover #ffdd00 was 1.3:1). */
html body .main-header-menu > .menu-item > .menu-link {
	min-height: 44px;
	display: flex;
	align-items: center;
	color: var(--vo-navy) !important;
}
html body .main-header-menu .menu-item:hover > .menu-link,
html body .main-header-menu .menu-item.current-menu-item > .menu-link {
	color: var(--vo-green) !important;
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
}

/* Search in the header row: icon gets a 44 px tap area. */
html body .site-header .ast-search-menu-icon .search-field {
	min-height: 44px;
}
html body .site-header .ast-search-icon .astra-search-icon,
html body .site-header .ast-search-menu-icon .ast-search-icon {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Mobile: smaller logo, compact bar, 44 px menu toggle. */
@media (max-width: 921px) {
	html body .site-header .custom-logo-link img,
	html body .site-header .custom-logo {
		max-width: 170px !important;
		height: auto;
	}
	html body .site-header .ast-main-header-wrap,
	html body .site-header .ast-main-header-wrap.active {
		padding: 4px 0 !important;
	}
	html body .ast-mobile-menu-trigger-minimal {
		min-height: 44px;
		min-width: 44px;
	}
	html body .ast-mobile-popup-drawer .menu-link,
	html body .ast-header-break-point .main-header-menu .menu-link {
		min-height: 44px;
		display: flex;
		align-items: center;
	}
}

/* =========================================================
   2. Layout
   ========================================================= */

/* Desktop menu on one line next to the search (was padding 0 20px). */
@media (min-width: 922px) {
	html body .main-header-menu {
		flex-wrap: nowrap;
	}
	html body .main-header-menu .menu-item > .menu-link {
		padding: 0 14px !important;
		white-space: nowrap;
	}
}

/* The page content starts with an empty spacer and an empty <p><br></p>
   that only compensated for the old fixed header. Hide them (no text). */
.entry-content > .wp-block-spacer:first-child {
	display: none;
}
.entry-content > .wp-block-spacer:first-child + p:has(> br:only-child) {
	display: none;
}

/* Provider and service pages: one readable column instead of 1120 px. */
.single-vardleverantor .site-main,
.single-vardtjanst .site-main {
	max-width: 760px;
	margin-inline: auto;
}
.single-vardleverantor #primary,
.single-vardtjanst #primary {
	margin-top: 32px;
}
@media (max-width: 544px) {
	.single-vardleverantor #primary,
	.single-vardtjanst #primary {
		margin-top: 16px;
	}
}

/* =========================================================
   3. Contrast (WCAG AA). Same hues, darker shades.
   ========================================================= */
.entry-content a.read-more-link,
a.read-more-link {
	color: var(--vo-green);
	border-color: var(--vo-green);
}
.entry-content a.read-more-link:hover,
a.read-more-link:hover {
	color: var(--vo-green-hover);
	border-color: var(--vo-green-hover);
}
/* The Additional CSS is printed after this file, so these need html body. */
html body .vardonline-filters .filter-submit-button,
html body .vardonline-service-card .service-button {
	background: var(--vo-green);
	background-color: var(--vo-green);
	border-color: var(--vo-green);
	color: #fff;
}
html body .vardonline-filters .filter-submit-button:hover,
html body .vardonline-service-card .service-button:hover {
	background: var(--vo-green-hover);
	background-color: var(--vo-green-hover);
}
.specialty-rating,
.specialty-meta .specialty-rating {
	color: var(--vo-amber);
}

/* =========================================================
   4. Typography: readable size, line height and line length
   ========================================================= */

/* Running text in the intro and long-form boxes (was 13-14 px, 100-110 characters per line). */
html body .entry-content .vardonline-intro-box p,
html body .entry-content .vardonline-intro-box li {
	font-size: 16px;
	line-height: 1.7;
	color: var(--vo-text);
	max-width: var(--vo-measure);
	margin-inline: auto;
}
html body .entry-content .vardonline-intro-box ul,
html body .entry-content .vardonline-intro-box ol {
	max-width: var(--vo-measure);
	margin-inline: auto;
}

/* Other running text in page content keeps the same measure. */
html body .entry-content > p,
html body .entry-content .vardonline-info-section p,
html body .entry-content .wp-block-group p {
	max-width: var(--vo-measure);
}

/* Provider and service pages. */
html body.single-vardleverantor .entry-content p,
html body.single-vardtjanst .entry-content p {
	font-size: 17px;
	line-height: 1.7;
	max-width: var(--vo-measure);
}

/* Card and listing text: 14 px minimum (was 11-13 px). */
html body .entry-content .vardonline-card-text,
html body .entry-content .vardonline-info-text,
html body .specialty-description,
html body .specialty-meta,
html body .specialty-cta,
html body .service-description,
html body .service-meta,
html body .service-provider,
html body .service-link-cta,
html body .provider-visit-link,
html body .vardonline-service-card .service-description,
html body .vardonline-compact-card .service-description,
html body .vardonline-compact-card .service-meta,
html body .service-clickable-link .service-description,
html body .service-clickable-link .service-meta {
	font-size: 14px;
	line-height: 1.55;
}
html body .specialty-name,
html body .service-link-title {
	font-size: 16px;
}

/* Filters: readable labels; 16 px controls stop iOS zooming in. */
html body .vardonline-filters label {
	font-size: 14px;
	font-weight: 600;
	color: var(--vo-ink);
}
html body .vardonline-filters select,
html body .vardonline-filters .filter-submit-button {
	font-size: 16px;
}
@media (min-width: 922px) {
	html body .vardonline-filters select,
	html body .vardonline-filters .filter-submit-button {
		font-size: 15px;
	}
}

/* Mobile: running text at least 16 px. */
@media (max-width: 544px) {
	html body .entry-content .vardonline-intro-box p,
	html body .entry-content .vardonline-intro-box li,
	html body.single-vardleverantor .entry-content p,
	html body.single-vardtjanst .entry-content p {
		font-size: 16px;
	}
}

/* FAQ block on category pages (white group): same size and measure as running text. */
html body .entry-content .wp-block-group.has-white-background-color p,
html body .entry-content .wp-block-group.has-white-background-color li {
	font-size: 16px;
	line-height: 1.7;
	max-width: var(--vo-measure);
	margin-inline: auto;
}
html body .entry-content .wp-block-group.has-white-background-color :is(h2, h3, h4) {
	max-width: var(--vo-measure);
	margin-inline: auto;
}

/* =========================================================
   5. Tap targets (44 px) and visible focus
   ========================================================= */
html body .vardonline-filters select {
	min-height: 44px;
}
html body .vardonline-filters .filter-submit-button {
	min-height: 44px;
}
/* read-more-link stays inline: one page has an empty read-more-link inside a
   paragraph, and a block/flex box there opened a gap in the text. Vertical
   padding on an inline element enlarges the tap area without moving lines. */
html body a.read-more-link {
	display: inline;
	padding-block: 11px;
}
html body a.provider-visit-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: 8px;
}
html body .site-header .custom-logo-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
html body .post-navigation .nav-links a {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	min-height: 44px;
}
html body .entry-meta a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Visible keyboard focus everywhere (the Additional CSS removed it on the filter selects). */
html body a:focus-visible,
html body button:focus-visible,
html body select:focus-visible,
html body input:focus-visible,
html body [tabindex]:focus-visible {
	outline: 3px solid var(--vo-focus) !important;
	outline-offset: 2px;
}
html body .vardonline-filters select:focus {
	outline: 3px solid var(--vo-focus);
	outline-offset: 2px;
	border-color: var(--vo-focus);
}

/* =========================================================
   6. Mobile menu: full-width rows, separated from the page
   ========================================================= */
@media (max-width: 921px) {
	html body .ast-mobile-header-content {
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
		border-top: 1px solid #e5e7eb;
	}
	html body .ast-mobile-header-content .main-header-menu,
	html body .ast-mobile-header-content .main-header-menu > .menu-item {
		width: 100%;
	}
	html body .ast-mobile-header-content .main-header-menu > .menu-item {
		border-bottom: 1px solid #f1f5f9;
	}
	html body .ast-mobile-header-content .main-header-menu > .menu-item > .menu-link {
		padding: 0 20px !important;
		width: 100%;
		max-width: none; /* Additional CSS capped menu links at 250 px */
		box-sizing: border-box;
	}
}

/* Additional CSS made read-more-link inline-block with margin-top 16px; inside
   a paragraph (empty anchor after the intro text) that broke the line. */
html body .vardonline-intro-box a.read-more-link {
	display: inline;
	margin-top: 0;
	font-size: 15px;
}

/* In-page anchors ("Läs mer" jumps to a section) land below the sticky header. */
html body [id] {
	scroll-margin-top: 120px;
}
@media (max-width: 921px) {
	html body [id] {
		scroll-margin-top: 96px;
	}
}

/* =========================================================
   7. Section titles that were extra h1s on the homepage (now h2,
      one h1 per page). Same look as before: 29/22 px, 700.
   ========================================================= */
html body .entry-content h2.vo-section-title {
	font-size: 29px;
	font-weight: 700;
	color: var(--vo-ink);
	text-align: center;
	margin: 0 0 7px;
	line-height: 1.3;
}
@media (max-width: 768px) {
	html body .entry-content h2.vo-section-title {
		font-size: 22px;
	}
}

/* =========================================================
   8. vardtjanst facts box (provider, fee, contact channels)
   ========================================================= */
html body .vo-service-facts {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 16px 20px;
	margin: 0 0 28px;
	max-width: var(--vo-measure);
}
html body .vo-service-facts dl {
	margin: 0;
	display: grid;
	gap: 10px;
}
html body .vo-service-facts__row {
	display: grid;
	grid-template-columns: 9.5em 1fr;
	gap: 12px;
	align-items: baseline;
}
html body .vo-service-facts dt {
	font-weight: 600;
	color: var(--vo-ink);
	font-size: 15px;
}
html body .vo-service-facts dd {
	margin: 0;
	color: var(--vo-text);
	font-size: 16px;
	line-height: 1.5;
}
html body .vo-service-facts dd a {
	color: var(--vo-green);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	min-width: 44px; /* short names like "Kry" */
	margin-block: -12px; /* keeps the 44 px tap area without adding row height */
}
@media (max-width: 544px) {
	html body .vo-service-facts__row {
		grid-template-columns: 1fr;
		gap: 2px;
	}
}

/* §9 Paid listing label ("Partner · Annons"), next to the provider name. */
html body .vo-partner-label {
	display: inline-block;
	margin-left: 0.5em;
	padding: 0.15em 0.6em;
	border: 1px solid #9ca3af;
	border-radius: 999px;
	background: #f3f4f6;
	color: #1f2937;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.01em;
	white-space: nowrap;
	vertical-align: middle;
	text-transform: none;
}

/* §10 Subheadings (h3) in the long-form boxes line up with the running text. */
html body .entry-content .vardonline-intro-box h3 {
	max-width: var(--vo-measure);
	margin-inline: auto;
}

/* §11 External rating on listing cards ("4,5 på Google (239 omdömen, kontrollerat …)"). Plain text, no stars. */
html body .vardonline-service-card .vo-external-rating {
	margin: 0.25rem 0 0.5rem;
	color: #374151;
	font-size: 0.875rem;
	line-height: 1.5;
}

/* §12 Comparison table ([vardonline_jamforelse], plugin includes/service-facts.php).
   Desktop: one row per provider, same columns for all. ≤921 px: one card per provider,
   fields in the same order (labels from data-label). No horizontal scroll at any width. */
html body .vo-compare-section {
	max-width: 1200px;
	margin: 0 auto;
}
html body .vo-compare-section > h2 {
	text-align: center;
}
html body .entry-content .vo-compare-section > p {
	margin-inline: auto;
}
html body .vo-compare {
	margin: 24px 0 0;
}
html body .vo-compare__table {
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--vo-text);
	overflow-wrap: break-word;
	margin: 0;
}
/* Column widths by content: short Ja/Nej columns narrow, text columns wide.
   Set per field class, so a table with fewer columns (fields="…") still adds up. */
html body .vo-compare__col--provider { width: 10%; }
html body .vo-compare__col--fee { width: 15%; }
html body .vo-compare__col--frikort { width: 7%; }
html body .vo-compare__col--channels { width: 16%; }
html body .vo-compare__col--hours { width: 12%; }
html body .vo-compare__col--children { width: 17%; }
html body .vo-compare__col--prescription { width: 8%; }
html body .vo-compare__col--bankid { width: 15%; }
/* Six fields (no prescription column): 100 % without it. */
html body .vo-compare--6 .vo-compare__col--provider { width: 12%; }
html body .vo-compare--6 .vo-compare__col--fee { width: 18%; }
html body .vo-compare--6 .vo-compare__col--frikort { width: 8%; }
html body .vo-compare--6 .vo-compare__col--channels { width: 17%; }
html body .vo-compare--6 .vo-compare__col--hours { width: 13%; }
html body .vo-compare--6 .vo-compare__col--children { width: 18%; }
html body .vo-compare--6 .vo-compare__col--bankid { width: 14%; }
/* Five fields (no hours, no prescription; /sjukgymnast-online/): 100 %. */
html body .vo-compare--5 .vo-compare__col--provider { width: 14%; }
html body .vo-compare--5 .vo-compare__col--fee { width: 22%; }
html body .vo-compare--5 .vo-compare__col--frikort { width: 9%; }
html body .vo-compare--5 .vo-compare__col--channels { width: 22%; }
html body .vo-compare--5 .vo-compare__col--children { width: 18%; }
html body .vo-compare--5 .vo-compare__col--bankid { width: 15%; }
/* Pharmacies (group="apotek"; /apotek-online/): provider, delivery, delivery time, e-recept, Läkemedelsverket. */
html body .vo-compare--apotek .vo-compare__col--provider { width: 15%; }
html body .vo-compare--apotek .vo-compare__col--shipping { width: 14%; }
html body .vo-compare--apotek .vo-compare__col--free_shipping { width: 12%; }
html body .vo-compare--apotek .vo-compare__col--delivery { width: 27%; }
html body .vo-compare--apotek .vo-compare__col--delivery_time { width: 31%; }
html body .vo-compare--apotek .vo-compare__col--erecept { width: 11%; }
html body .vo-compare--apotek .vo-compare__col--lmv { width: 16%; }
html body .vo-compare__caption {
	caption-side: top;
	text-align: left;
	padding: 0 0 10px;
	font-size: 15px;
	color: var(--vo-muted);
}
html body .vo-compare__table th,
html body .vo-compare__table td {
	padding: 12px 14px;
	text-align: left;
	vertical-align: top;
	border: 0;
	border-top: 1px solid #e2e8f0;
}
html body .vo-compare__table thead th {
	border-top: 0;
	background: #f8fafc;
	color: var(--vo-ink);
	font-weight: 600;
	font-size: 14px;
}
html body .vo-compare__table thead th:first-child { border-top-left-radius: 10px; }
html body .vo-compare__table thead th:last-child { border-top-right-radius: 10px; }
html body .vo-compare__table tbody th {
	font-weight: 600;
	color: var(--vo-ink);
}
html body .vo-compare__table tbody th a,
html body .vo-compare__table td a.vo-compare__factlink {
	color: var(--vo-green);
	text-decoration: underline;
	text-underline-offset: 3px;
	/* 44 px tap target */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	min-width: 44px;
	margin: -11px 0;
}
html body .vo-compare__table tbody th a:hover,
html body .vo-compare__table td a.vo-compare__factlink:hover {
	color: var(--vo-green-hover);
}
html body .vo-compare__missing {
	color: var(--vo-muted);
	font-style: italic;
}
html body .vo-compare__checked {
	margin: 12px 0 0;
	font-size: 14px;
	color: var(--vo-muted);
	max-width: none;
}
html body .vo-compare__sources {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--vo-muted);
}
html body .vo-compare__sources summary {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	color: var(--vo-green);
	text-decoration: underline;
	text-underline-offset: 3px;
}
html body .vo-compare__sources ul {
	margin: 4px 0 0 1.2em;
	padding: 0;
}
html body .vo-compare__sources li {
	margin: 0 0 10px;
	overflow-wrap: break-word;
}
html body .vo-compare__sources a {
	color: var(--vo-green);
}

@media (max-width: 921px) {
	html body .vo-compare__table,
	html body .vo-compare__table tbody,
	html body .vo-compare__table tr,
	html body .vo-compare__table th,
	html body .vo-compare__table td {
		display: block;
		width: auto;
	}
	html body .vo-compare__table {
		border: 0;
		background: transparent;
	}
	html body .vo-compare__caption {
		display: block;
	}
	/* Column headers are repeated as labels in each card. */
	html body .vo-compare__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	html body .vo-compare__table tbody tr {
		background: #fff;
		border: 1px solid #e2e8f0;
		border-radius: 10px;
		padding: 6px 16px;
		margin: 0 0 16px;
	}
	html body .vo-compare__table tbody th {
		border-top: 0;
		padding: 10px 0;
		font-size: 18px;
	}
	html body .vo-compare__table tbody th a {
		margin: 0;
	}
	/* Pharmacy labels are long ("Tillstånd från Läkemedelsverket"): label above value, no mid-word breaks. */
	html body .vo-compare--apotek .vo-compare__table td {
		grid-template-columns: 1fr;
		gap: 2px;
	}
	html body .vo-compare__table td a.vo-compare__factlink {
		margin: -11px 0;
		justify-self: start;
	}
	html body .vo-compare__table td {
		display: grid;
		grid-template-columns: minmax(7.5em, 38%) 1fr;
		gap: 12px;
		padding: 10px 0;
	}
	html body .vo-compare__table td::before {
		content: attr(data-label);
		font-weight: 600;
		color: var(--vo-ink);
	}
}

/* §13 Footer company line and links, contact form (/kontakt/, inc/contact-form.php). Round 17. */
html body .ast-footer-copyright .vo-footer__company,
html body .ast-footer-copyright .vo-footer__links {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--vo-text);
	text-align: center;
}
html body .ast-footer-copyright .vo-footer__links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: 4px;
	color: var(--vo-green);
	text-decoration: underline;
}
html body .ast-footer-copyright .vo-footer__links a:hover {
	color: var(--vo-green-hover);
}
html body .vo-kontakt {
	max-width: var(--vo-measure);
}
html body .vo-kontakt p {
	margin: 0 0 20px;
}
html body .vo-kontakt label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	color: var(--vo-ink);
}
html body .vo-kontakt input[type="text"],
html body .vo-kontakt input[type="email"],
html body .vo-kontakt textarea {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	font-size: 16px; /* no zoom on iOS */
	color: var(--vo-ink);
	background: #fff;
	border: 1px solid #64748b; /* 4.8:1 against white, visible field edge */
	border-radius: 6px;
}
html body .vo-kontakt [aria-invalid="true"] {
	border-color: #b91c1c;
	border-width: 2px;
}
html body .vo-kontakt__help {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	color: var(--vo-muted);
}
html body .vo-kontakt__error {
	margin: 6px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: #b91c1c; /* 6.5:1 on white */
}
html body .vo-kontakt > .vo-kontakt__error {
	margin: 0 0 20px;
}
html body .vo-kontakt__ok {
	padding: 16px;
	border-left: 4px solid var(--vo-green);
	background: #f0fdf4;
	color: var(--vo-ink);
}
html body .vo-kontakt__privacy {
	font-size: 14px;
	color: var(--vo-muted);
}
html body .vo-kontakt button[type="submit"] {
	min-height: 44px;
	padding: 10px 28px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	background: var(--vo-green);
	border: 0;
	border-radius: 6px;
	cursor: pointer;
}
html body .vo-kontakt button[type="submit"]:hover {
	background: var(--vo-green-hover);
}
html body .vo-kontakt__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
/* Text pages (/om-oss/, /kontakt/): one column at reading width. */
/* !important: an older Additional CSS rule sets every content group to full width with margin 0. Scoped to .vo-prose only. */
html body .entry-content > .vo-prose {
	max-width: var(--vo-measure) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
html body .vo-prose h1 {
	margin-bottom: 24px;
}
html body .vo-prose .vo-kontakt {
	max-width: none;
}
/* Footer: the copyright item is the only one, so let its column span the row instead of a third of it. */
html body .site-primary-footer-inner-wrap .site-footer-primary-section-2 {
	grid-column: 1 / -1;
}
html body .site-primary-footer-inner-wrap .site-footer-primary-section-1,
html body .site-primary-footer-inner-wrap .site-footer-primary-section-3 {
	display: none;
}
html body .ast-footer-copyright {
	padding-inline: 16px;
}
html body .vo-nowrap {
	white-space: nowrap;
}

/* §14 Category pages (round 18): the comparison table comes first, the service listing follows under its own
   h2 (.vo-listing-heading), centred like the other section headings. */
html body .entry-content .vo-listing-heading {
	text-align: center;
	margin-bottom: 24px;
}
html body .entry-content .vo-compare-section > p:last-child {
	margin-top: 24px;
}
/* The filter form reloads to #vardonline-listing-N: keep the filters clear of the sticky header. */
html body .vardonline-service-listing {
	scroll-margin-top: 120px;
}

/* §15 Headings (round 19, 2026-11-10).
   Line-height 1.25 for all h1–h4. The Additional CSS sets line-height: 0.5 and margin-bottom: 7px on
   ".entry-content .vardonline-intro-box h2" (the long text sections on the category pages and the homepage),
   which made two-line headings overlap on mobile; the selectors below out-rank it.
   Content headings in those text sections are left-aligned like the body text. Hero titles (h1 in the intro box),
   section titles (.vo-section-title, .has-text-align-center, comparison and listing headings) stay centred. */
html body :is(h1, h2, h3, h4),
html body .entry-header .entry-title,
html body .entry-content :is(h1, h2, h3, h4),
html body .entry-content .vardonline-intro-box :is(h1, h2, h3, h4) {
	line-height: 1.25;
	text-wrap: balance;
}
/* Same column as the running text (34em at the 16 px body size = 544 px), so heading and text share a left edge. */
html body .entry-content .vardonline-intro-box > h2:not(.vo-section-title):not(.has-text-align-center) {
	text-align: left;
	text-wrap: pretty;
	height: auto;
	max-width: calc(34 * 16px);
	margin: 40px auto 12px;
}
html body .entry-content .vardonline-intro-box > h3:not(.has-text-align-center) {
	text-align: left;
	text-wrap: pretty;
	height: auto;
	max-width: calc(34 * 16px);
	margin: 28px auto 8px;
}
/* Section titles inside a text box ("Våra kategorier" on the homepage): more space above than below. */
html body .entry-content .vardonline-intro-box > h2.vo-section-title {
	margin: 48px auto 0;
}
html body .entry-content .vardonline-intro-box > h2.vo-section-title + h2 {
	margin-top: 24px;
}
/* Hero title: a little more space before the intro text (was 7 px). */
html body .entry-content .vardonline-intro-box > h1 {
	margin-bottom: 12px;
}
html body .entry-content .vardonline-intro-box > :is(h2, h3):first-child {
	margin-top: 0;
}
/* Listing card titles (plugin CSS sets 1.3 with a more specific selector). */
html body .vardonline-service-listing :is(h3, h4) {
	line-height: 1.25;
}

/* §16 SEO round 20 (2026-11-11): guides box on category pages, guide pages, provider page links. */
html body .entry-content .vo-guides {
	max-width: var(--vo-measure) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
html body .entry-content .vo-guides ul {
	margin: 16px 0 0 1.2em;
}
html body .entry-content .vo-guides li {
	margin-bottom: 8px;
	line-height: 1.6;
}
/* List links (guides box, sources): 44 px tap targets. Links inside running text stay inline so they wrap. */
html body .entry-content .vo-guides li > a,
html body .vo-prose .vo-sources li > a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
html body .entry-content .vo-guides li,
html body .vo-prose .vo-sources li {
	margin-bottom: 0;
}
/* Guide fact table: three short columns, readable at 390 px without horizontal scroll. */
html body .vo-guide-table {
	margin: 24px 0 32px;
}
html body .vo-guide-table table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.45;
}
html body .vo-guide-table caption {
	text-align: left;
	font-size: 14px;
	color: #4b5563;
	padding-bottom: 8px;
}
html body .vo-guide-table th,
html body .vo-guide-table td {
	border: 0;
	border-bottom: 1px solid #e5e7eb;
	padding: 10px 8px 10px 0;
	text-align: left;
	vertical-align: top;
	overflow-wrap: break-word;
}
html body .vo-guide-table thead th {
	font-weight: 600;
	border-bottom: 2px solid #d1d5db;
}
html body .vo-guide-table tbody th {
	font-weight: 600;
	width: 30%;
}
/* ≤480 px: the row label spans the row, the two values sit side by side under the column headings. */
@media (max-width: 480px) {
	html body .vo-guide-table table {
		font-size: 14px;
	}
	html body .vo-guide-table thead tr,
	html body .vo-guide-table tbody tr {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 12px;
		border-bottom: 1px solid #e5e7eb;
	}
	html body .vo-guide-table thead th:first-child {
		display: none;
	}
	html body .vo-guide-table tbody th {
		grid-column: 1 / -1;
		width: auto;
		padding-bottom: 0;
	}
	html body .vo-guide-table th,
	html body .vo-guide-table td {
		border-bottom: 0;
	}
	html body .vo-guide-table thead tr {
		border-bottom: 2px solid #d1d5db;
	}
}
html body .vo-prose .vo-sources-heading {
	font-size: 20px;
	margin-top: 40px;
}
html body .vo-prose .vo-sources-note,
html body .vo-prose .vo-sources {
	font-size: 14px;
}
/* Provider pages: category and guide links after the text. */
html body .vo-provider-links {
	margin-top: 32px;
	padding-top: 16px;
	border-top: 1px solid #e5e7eb;
	max-width: var(--vo-measure);
}
html body .vo-provider-links p {
	margin: 0 0 8px;
}

/* §17 Cookie consent (round 21, 2026-11-13, inc/consent.php, js/consent.js). Fixed bar at the bottom, shown only
   until the visitor has chosen. "Ja" and "Nej" look the same: neither choice is pushed. */
html body .vo-consent {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 100000;
	padding: 16px;
	background: #fff;
	border-top: 1px solid #cbd5e1;
	box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.12);
	color: var(--vo-text);
}
html body .vo-consent[hidden] {
	display: none;
}
html body .vo-consent__inner {
	max-width: 960px;
	margin: 0 auto;
}
html body .vo-consent__title {
	margin: 0 0 4px;
	font-weight: 600;
	color: var(--vo-ink);
	line-height: 1.4;
}
html body .vo-consent__text {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.6;
}
html body .vo-consent__text a {
	color: var(--vo-green);
	text-decoration: underline;
}
html body .vo-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}
html body .vo-consent__btn {
	min-height: 44px;
	padding: 10px 20px;
	border: 2px solid var(--vo-green);
	border-radius: 6px;
	background: #fff;
	color: var(--vo-green);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}
html body .vo-consent__btn:hover,
html body .vo-consent__btn[aria-pressed="true"] {
	background: var(--vo-green);
	color: #fff;
}
html body .vo-consent__btn:focus-visible {
	outline: 3px solid var(--vo-focus);
	outline-offset: 2px;
}
html body .vo-cookieval {
	margin: 0 0 24px;
}
html body .vo-cookieval__status {
	margin: 0 0 12px;
	font-weight: 600;
}
@media (max-width: 480px) {
	html body .vo-consent__btn {
		flex: 1 1 100%;
	}
}
/* Footer links wrap as whole items; separators only between items on one line (round 21). */
html body .ast-footer-copyright .vo-footer__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 12px;
}
html body .ast-footer-copyright .vo-footer__links > span[aria-hidden] {
	display: none;
}

/* §18 Outbound buttons "Till {provider}" (round 23, 2026-11-13, inc/outbound.php): comparison tables, facts boxes on
   service and provider pages. Same look everywhere; "Annonslänk" next to affiliate links. */
html body .vo-cta {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
}
html body .vo-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 8px 16px;
	border-radius: 6px;
	background: var(--vo-green);
	color: #fff;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
}
html body .vo-cta__btn:hover,
html body .vo-cta__btn:focus {
	background: var(--vo-green-hover);
	color: #fff;
}
html body .vo-cta__btn:focus-visible {
	outline: 3px solid var(--vo-focus);
	outline-offset: 2px;
}
html body .vo-ad-label {
	font-size: 13px;
	line-height: 1.3;
	color: var(--vo-muted);
	white-space: nowrap;
}
/* Table: last column. */
html body .vo-compare__col--cta { width: 13%; }
html body .vo-compare__table td.vo-compare__cta .vo-cta {
	flex-direction: column;
	align-items: stretch;
}
html body .vo-compare__table td.vo-compare__cta .vo-cta__btn {
	padding: 8px 10px;
	font-size: 14px;
}
html body .vo-compare__table td.vo-compare__cta .vo-ad-label {
	text-align: center;
}
/* Facts boxes: button below the facts. */
html body .vo-service-facts .vo-cta {
	margin-top: 12px;
}
html body .vo-service-facts > .vo-cta:first-child {
	margin-top: 0;
}
@media (max-width: 921px) {
	/* Mobile card: full-width button at the bottom of each card. */
	html body .vo-compare__table td.vo-compare__cta {
		display: block;
		padding: 12px 0 10px;
	}
	html body .vo-compare__table td.vo-compare__cta::before {
		content: none;
	}
	html body .vo-compare__table td.vo-compare__cta .vo-cta,
	html body .vo-compare__table td.vo-compare__cta .vo-cta__btn {
		display: flex;
		width: 100%;
	}
	html body .vo-compare__table td.vo-compare__cta .vo-cta__btn {
		font-size: 16px;
	}
}
@media (max-width: 480px) {
	html body .vo-service-facts .vo-cta,
	html body .vo-service-facts .vo-cta__btn {
		display: flex;
		width: 100%;
	}
}
/* Column widths with the button column (vo-compare--cta), so headers like "Vårdgivare" and "Frikort" don't break. */
html body .vo-compare--cta.vo-compare--7 .vo-compare__col--provider { width: 11%; }
html body .vo-compare--cta.vo-compare--7 .vo-compare__col--fee { width: 12%; }
html body .vo-compare--cta.vo-compare--7 .vo-compare__col--frikort { width: 8%; }
html body .vo-compare--cta.vo-compare--7 .vo-compare__col--channels { width: 12%; }
html body .vo-compare--cta.vo-compare--7 .vo-compare__col--hours { width: 10%; }
html body .vo-compare--cta.vo-compare--7 .vo-compare__col--children { width: 14%; }
html body .vo-compare--cta.vo-compare--7 .vo-compare__col--prescription { width: 8%; }
html body .vo-compare--cta.vo-compare--7 .vo-compare__col--bankid { width: 13%; }
html body .vo-compare--cta.vo-compare--7 .vo-compare__col--cta { width: 12%; }
html body .vo-compare--cta.vo-compare--6 .vo-compare__col--provider { width: 12%; }
html body .vo-compare--cta.vo-compare--6 .vo-compare__col--fee { width: 16%; }
html body .vo-compare--cta.vo-compare--6 .vo-compare__col--frikort { width: 8%; }
html body .vo-compare--cta.vo-compare--6 .vo-compare__col--channels { width: 15%; }
html body .vo-compare--cta.vo-compare--6 .vo-compare__col--hours { width: 11%; }
html body .vo-compare--cta.vo-compare--6 .vo-compare__col--children { width: 15%; }
html body .vo-compare--cta.vo-compare--6 .vo-compare__col--bankid { width: 12%; }
html body .vo-compare--cta.vo-compare--6 .vo-compare__col--cta { width: 11%; }
html body .vo-compare--cta.vo-compare--5 .vo-compare__col--provider { width: 14%; }
html body .vo-compare--cta.vo-compare--5 .vo-compare__col--fee { width: 20%; }
html body .vo-compare--cta.vo-compare--5 .vo-compare__col--frikort { width: 9%; }
html body .vo-compare--cta.vo-compare--5 .vo-compare__col--channels { width: 20%; }
html body .vo-compare--cta.vo-compare--5 .vo-compare__col--children { width: 16%; }
html body .vo-compare--cta.vo-compare--5 .vo-compare__col--bankid { width: 11%; }
html body .vo-compare--cta.vo-compare--5 .vo-compare__col--cta { width: 10%; }
/* Round 24: button text is the provider name plus an arrow (no "Till"). */
html body .vo-cta__arrow {
	margin-left: 6px;
	font-weight: 400;
}
/* Round 24: health-check table (group blodprov, 6 fields + button). Long names ("Testmottagningen",
   "Universitetslaboratoriet") need room: 14 px text, tighter padding, soft hyphens in labels and values. */
html body .vo-compare--blodprov.vo-compare--cta .vo-compare__col--provider { width: 14%; }
html body .vo-compare--blodprov.vo-compare--cta .vo-compare__col--package { width: 19%; }
html body .vo-compare--blodprov.vo-compare--cta .vo-compare__col--sampling_fee { width: 13%; }
html body .vo-compare--blodprov.vo-compare--cta .vo-compare__col--labs { width: 13%; }
html body .vo-compare--blodprov.vo-compare--cta .vo-compare__col--doctor { width: 9%; }
html body .vo-compare--blodprov.vo-compare--cta .vo-compare__col--result_time { width: 10%; }
html body .vo-compare--blodprov.vo-compare--cta .vo-compare__col--age { width: 7%; }
html body .vo-compare--blodprov.vo-compare--cta .vo-compare__col--login { width: 8%; }
html body .vo-compare--blodprov.vo-compare--cta .vo-compare__col--cta { width: 16%; }
@media (min-width: 922px) {
	/* All tables with the button column (round 24): 14 px text and tighter padding, so the extra column fits. */
	html body .vo-compare--cta .vo-compare__table { font-size: 14px; }
	html body .vo-compare--cta .vo-compare__table th,
	html body .vo-compare--cta .vo-compare__table td { padding-left: 10px; padding-right: 10px; }
	html body .vo-compare--cta .vo-compare__table td.vo-compare__cta .vo-cta__btn { padding: 8px; font-size: 13px; }
}
@media (max-width: 921px) {
	/* Long values (package, sampling fee): label above value on mobile cards. */
	html body .vo-compare--blodprov .vo-compare__table td {
		grid-template-columns: 1fr;
		gap: 2px;
	}
}

/* =========================================================
   §19 Design refresh (round 25, 2026-11-14). Rules in CLAUDE.md, "Design system".
   One typeface (Inter 400/600), neutral base, one accent, flat cards with 1 px borders, one radius,
   one primary and one secondary button, Lucide outline icons. Overrides Astra, the Customizer CSS
   and the plugin CSS (hence html body selectors). Text and structure are unchanged.
   ========================================================= */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/inter-latin-600-normal.woff2") format("woff2");
}

/* Type: one family, two weights, one scale. */
html body,
html body button,
html body input,
html body select,
html body textarea,
html body .main-header-menu,
html body .ast-builder-menu,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .entry-content :where(h1, h2, h3, h4, h5, h6),
html body .site-title {
	font-family: var(--vo-font);
}
html body {
	background: var(--vo-bg);
	color: var(--vo-text);
	font-size: 16px;
	line-height: 1.65;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}
html body strong, html body b, html body th, html body dt, html body label { font-weight: 600; }
html body h1, html body .entry-content h1, html body .entry-content .vardonline-intro-box h1 {
	font-size: 32px; font-weight: 600; letter-spacing: -0.02em; color: var(--vo-ink);
}
html body h2, html body .entry-content h2, html body .entry-content .vardonline-intro-box h2 {
	font-size: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--vo-ink);
}
html body h3, html body .entry-content h3, html body .entry-content .vardonline-intro-box h3 {
	font-size: 18px; font-weight: 600; color: var(--vo-ink);
}
html body h4, html body .entry-content h4 { font-size: 16px; font-weight: 600; color: var(--vo-ink); }
@media (max-width: 544px) {
	html body h1, html body .entry-content h1, html body .entry-content .vardonline-intro-box h1 { font-size: 26px; }
	html body h2, html body .entry-content h2, html body .entry-content .vardonline-intro-box h2 { font-size: 21px; }
	html body h3, html body .entry-content h3 { font-size: 17px; }
}
html body .entry-content p,
html body .entry-content li,
html body .entry-content .vardonline-intro-box p { color: var(--vo-text); }

/* Links: accent, underlined in running text. */
html body .entry-content a:not([class]),
html body .entry-content .read-more-link,
html body .vardonline-intro-box .read-more-link,
html body .vo-provider-links a,
html body .vo-guides a {
	color: var(--vo-green);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}
html body .entry-content a:not([class]):hover,
html body .vardonline-intro-box .read-more-link:hover { color: var(--vo-green-hover); }
html body :focus-visible { outline: 2px solid var(--vo-focus); outline-offset: 2px; }

/* Header: white, thin bottom border, wordmark, near-black menu with accent active state. */
html body .site-header,
html body .ast-primary-header-bar,
html body .main-header-bar {
	background: var(--vo-surface);
	box-shadow: none;
	border-bottom: 1px solid var(--vo-border);
}
html body .site-header .custom-logo-link img.vo-logo__img,
html body header .custom-logo-link img {
	width: auto;
	max-width: none;
	height: 26px;
}
@media (max-width: 544px) {
	html body .site-header .custom-logo-link img.vo-logo__img,
	html body header .custom-logo-link img { height: 22px; }
}
html body .main-header-menu .menu-link,
html body .ast-builder-menu .menu-link,
html body .ast-header-break-point .main-header-menu .menu-link {
	color: var(--vo-ink);
	font-weight: 400;
	font-size: 15px;
}
html body .main-header-menu .current-menu-item > .menu-link,
html body .main-header-menu .menu-link:hover {
	color: var(--vo-green);
}
html body .main-header-menu .current-menu-item > .menu-link {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
	border-bottom: 0;
}
html body .ast-mobile-menu-trigger-minimal,
html body .menu-toggle,
html body .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg,
html body .ast-button-wrap .mobile-menu-wrap .mobile-menu,
html body .ast-header-break-point .ast-button-wrap .menu-toggle,
html body .ast-header-search .astra-search-icon,
html body .ast-search-menu-icon .search-field + .search-submit,
html body .ast-header-search a { color: var(--vo-ink); }

/* Cards and boxes: white, 1 px border, one radius, no shadow. */
html body .entry-content .vardonline-intro-box,
html body .entry-content .vardonline-card,
html body .entry-content .vardonline-info-section,
html body .vardonline-service-card,
html body .vardonline-expanded-card,
html body .vardonline-compact-card,
html body .vo-service-facts,
html body .vardonline-service-listing .vardonline-filters,
html body .entry-content .wp-block-group.has-white-background-color {
	background: var(--vo-surface);
	border: 1px solid var(--vo-border);
	border-radius: var(--vo-radius);
	box-shadow: none;
}
html body .entry-content .vardonline-card:hover,
html body .vardonline-service-card:hover,
html body .vardonline-expanded-card:hover,
html body .vardonline-compact-card:hover {
	box-shadow: none;
	border-color: var(--vo-border-strong);
	transform: none;
}
html body .specialty-item,
html body .service-clickable-link {
	background: var(--vo-surface);
	border: 1px solid var(--vo-border);
	border-radius: var(--vo-radius);
	box-shadow: none;
}
html body .specialty-item:hover,
html body .service-clickable-link:hover {
	background: var(--vo-surface);
	border-color: var(--vo-green);
	box-shadow: none;
}
html body .vardonline-service-card .service-logo,
html body .vardonline-compact-card .service-logo { background: transparent; }
html body .entry-content .vardonline-card-title,
html body .entry-content .vardonline-info-title,
html body .vardonline-service-card .service-title,
html body .expanded-card-header .provider-name,
html body .specialty-name,
html body .service-link-title,
html body .specialties-title { color: var(--vo-ink); font-weight: 600; }
html body .entry-content .vardonline-card-text,
html body .entry-content .vardonline-info-text,
html body .specialty-description,
html body .vardonline-service-card .service-description,
html body .service-clickable-link .service-description { color: var(--vo-muted); }
html body .specialty-price,
html body .vardonline-service-card .service-price,
html body .service-clickable-link .service-price { color: var(--vo-ink); font-weight: 600; }
html body .specialty-cta,
html body .service-link-cta,
html body .vardonline-compact-card .provider-visit-link,
html body .provider-visit-link { color: var(--vo-green); text-decoration: underline; text-underline-offset: 2px; }

/* Icons: Lucide outline, 32 px, stroke 1.5, one colour (ink). */
html body .vo-icon {
	width: 32px;
	height: 32px;
	stroke: var(--vo-ink);
	stroke-width: 1.5;
	fill: none;
	flex: none;
}
html body .entry-content .vo-icon.vardonline-card-icon,
html body .entry-content .vo-icon.vardonline-info-icon {
	display: block;
	margin: 0 auto 16px;
	width: 32px;
	height: 32px;
}

/* Buttons. Primary: filled accent. Secondary: white with accent border. Same radius, height and weight. */
html body .vo-cta__btn,
html body .vo-kontakt button[type="submit"],
html body .vardonline-filters .filter-submit-button,
html body .entry-content .vardonline-card::after,
html body .entry-content .vardonline-category-cards .vardonline-card::after {
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid var(--vo-green);
	border-radius: var(--vo-radius);
	background: var(--vo-green);
	background-color: var(--vo-green);
	color: #fff;
	font-family: var(--vo-font);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
	box-shadow: none;
	text-decoration: none;
	transition: background-color 0.15s ease;
}
html body .vo-cta__btn:hover,
html body .vo-kontakt button[type="submit"]:hover,
html body .vardonline-filters .filter-submit-button:hover,
html body .entry-content .vardonline-card:hover::after,
html body .entry-content .vardonline-category-cards .vardonline-card:hover::after {
	background: var(--vo-green-hover);
	background-color: var(--vo-green-hover);
	border-color: var(--vo-green-hover);
	color: #fff;
}
html body .vo-consent__btn {
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid var(--vo-green);
	border-radius: var(--vo-radius);
	background: var(--vo-surface);
	color: var(--vo-green);
	font-weight: 600;
	font-size: 15px;
}
html body .vo-consent__btn:hover,
html body .vo-consent__btn[aria-pressed="true"] { background: var(--vo-green); color: #fff; }
html body .vo-cta__arrow { display: none; }
html body .vo-cta__btn .vo-icon { width: 16px; height: 16px; stroke: currentColor; margin-left: 6px; }

/* Labels: "Partner · Annons" and "Annonslänk" share one quiet style. */
html body .vo-partner-label,
html body .vo-ad-label {
	display: inline-block;
	padding: 1px 6px;
	border: 1px solid var(--vo-border-strong);
	border-radius: 4px;
	background: var(--vo-surface);
	color: var(--vo-muted);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0;
	white-space: nowrap;
	vertical-align: middle;
}

/* Tables: same surface, border and radius as cards; light grey header row. */
@media (min-width: 922px) {
	html body .vo-compare__table {
		border: 1px solid var(--vo-border);
		border-radius: var(--vo-radius);
		box-shadow: none;
	}
}
html body .vo-compare__table thead th {
	background: var(--vo-bg);
	color: var(--vo-ink);
	font-weight: 600;
	border-bottom: 1px solid var(--vo-border);
}
html body .vo-compare__table thead th:first-child { border-top-left-radius: var(--vo-radius); }
html body .vo-compare__table thead th:last-child { border-top-right-radius: var(--vo-radius); }
html body .vo-compare__table tbody th,
html body .vo-compare__table td { border-top: 1px solid var(--vo-border); }
html body .vo-compare__table tbody th a { color: var(--vo-green); font-weight: 600; }
@media (max-width: 921px) {
	html body .vo-compare__table tbody tr {
		border: 1px solid var(--vo-border);
		border-radius: var(--vo-radius);
		box-shadow: none;
	}
}

/* Form fields. */
html body .vardonline-filters select,
html body .vo-kontakt input[type="text"],
html body .vo-kontakt input[type="email"],
html body .vo-kontakt textarea {
	border: 1px solid var(--vo-border-strong);
	border-radius: var(--vo-radius);
	box-shadow: none;
	color: var(--vo-ink);
}

/* Cookie banner: flat, top border, same buttons as the rest. */
html body .vo-consent {
	border-top: 1px solid var(--vo-border);
	box-shadow: none;
	background: var(--vo-surface);
}
html body .vo-consent__title { color: var(--vo-ink); font-weight: 600; }

/* Footer: white with a top border. */
html body .site-footer,
html body .site-below-footer-wrap,
html body .ast-footer-copyright {
	background: var(--vo-surface);
}
html body .site-below-footer-wrap { border-top: 1px solid var(--vo-border); }

/* More room between sections: content spacers grow by a third on desktop. */
@media (min-width: 922px) {
	html body .entry-content .wp-block-spacer[style*="height:60px"] { height: 80px !important; }
	html body .entry-content .wp-block-spacer[style*="height:56px"] { height: 64px !important; }
}
/* Only two weights: the leftovers at 500 (listing "klicka här", post navigation) go to 400. */
html body .specialty-cta,
html body .service-link-cta,
html body .post-navigation a,
html body .ast-post-navigation a { font-weight: 400; }
/* Single pages (services, providers, guides): same light grey page, white article card; footer all white.
   Astra's own palette (blue links, grey boxes) is mapped onto the design tokens. */
html:root {
	--ast-global-color-0: #007a52;
	--ast-global-color-1: #00633f;
}
html body.wp-singular,
html body.single,
html body.page { background: var(--vo-bg); }
html body.single .site-content article.ast-article-single,
html body.single .ast-article-single,
html body.single .ast-separate-container .ast-article-single {
	background: var(--vo-surface);
	border: 1px solid var(--vo-border);
	border-radius: var(--vo-radius);
	box-shadow: none;
}
html body .site-primary-footer-wrap,
html body .site-footer .ast-builder-grid-row-container { background: var(--vo-surface); }
html body .entry-meta,
html body .entry-meta a,
html body .entry-meta .posted-by,
html body .entry-meta .author-name { color: var(--vo-muted); font-weight: 400; }
html body .mobile-menu-wrap,
html body .mobile-menu,
html body .menu-toggle .mobile-menu { color: var(--vo-ink); font-weight: 400; }
html body .ast-mobile-svg { fill: var(--vo-ink); }
html body .entry-meta time,
html body .entry-meta .posted-on,
html body .entry-meta .posted-on a,
html body .entry-meta .published { color: var(--vo-muted); font-weight: 400; }
@media (max-width: 1279px) {
	/* The wordmark has no built-in margin (the old PNG did): same 16 px gutter as the content (mobile header up to 1279 px). */
	html body .site-header .site-branding { padding-left: 16px; }
}

/* §20 Product pilot (round 26): product facts and the pharmacies that sell it (inc/products.php). Design system §19. */
html body .vo-product {
	margin: 0 0 40px;
	padding: 24px;
	background: var(--vo-surface);
	border: 1px solid var(--vo-border);
	border-radius: var(--vo-radius);
}
html body .entry-content .vo-product__title {
	margin: 0 0 16px;
	font-size: 20px;
	text-align: left;
}
html body .vo-product__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px 24px;
	margin: 0 0 20px;
}
html body .vo-product__facts dt { font-size: 13px; font-weight: 400; color: var(--vo-muted); }
html body .vo-product__facts dd { margin: 0; font-weight: 600; color: var(--vo-ink); overflow-wrap: anywhere; }
html body .vo-offers {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--vo-border);
}
html body .vo-offers__row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 8px 16px;
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid var(--vo-border);
}
html body .vo-offers__name { font-weight: 600; color: var(--vo-ink); }
html body .vo-offers__status { font-size: 14px; color: var(--vo-muted); }
html body .vo-offers__row .vo-cta__btn { min-width: 9em; justify-content: center; }
html body .vo-products__checked { font-size: 14px; color: var(--vo-muted); }
@media (max-width: 544px) {
	html body .vo-product { padding: 16px; }
	html body .vo-offers__row { grid-template-columns: 1fr auto; }
	html body .vo-offers__row .vo-cta { grid-column: 1 / -1; }
	html body .vo-offers__row .vo-cta,
	html body .vo-offers__row .vo-cta__btn { display: flex; width: 100%; }
}
/* Mobile header up to 1279 px (inc/design.php, astra_header_break_point): Astra's own CSS switches at 922 px. */
@media (min-width: 922px) and (max-width: 1279px) {
	html body #ast-desktop-header { display: none !important; }
	html body #ast-mobile-header { display: block !important; }
	/* Astra hides the mobile menu's navigation from 922 px; show it when the menu button is open. */
	html body #ast-mobile-header .main-header-bar-navigation.toggle-on .main-navigation { display: block !important; }
	html body #ast-mobile-header .main-header-bar-navigation.toggle-on .main-header-menu { display: block; }
}