/*
Theme Name: Vår Framtid
Theme URI: https://varframtid.se
Author: Vår Framtid
Description: Custom theme for Vår Framtid — a civic association and political party in Ånge municipality, Sweden. Delar grafisk profil med partiets valtidning: Playfair Display, Inter, Titillium Web och VF Magenta.
Template: twentytwentyfive
Version: 2.0.0
Requires at least: 6.9
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: varframtid
*/

/* ─── Grundläggande ─────────────────────────────────────────────── */

.wp-site-blocks > .wp-block-template-part + main,
.wp-site-blocks > header + main,
.wp-site-blocks > main + .wp-block-template-part,
.wp-site-blocks > main + footer {
	margin-block-start: 0 !important;
}

body {
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
}

::selection {
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
}

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

/* Magenta ytor: byt fokus-ram till vit så den syns mot accent-1 */
.has-accent-1-background-color a:focus-visible,
.has-accent-1-background-color .wp-block-button__link:focus-visible,
.vf-valband:focus-visible {
	outline-color: var(--wp--preset--color--base);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition: none !important;
	}
}

h1, h2, h3 {
	text-wrap: balance;
}

/* Inline-länkar i löptext får understrykning — nav/knappar/kort inte */
.wp-block-post-content p a,
.wp-block-group p a:not(.wp-block-button__link) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

/* ─── Masthead ──────────────────────────────────────────────────── */

.site-header {
	border-bottom: 2px solid var(--wp--preset--color--accent-1);
}

.vf-lockup {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	text-decoration: none;
}

.vf-lockup .vf-lockup-blomma { height: 46px; width: auto; display: block; }
.vf-lockup .vf-lockup-text   { height: 25px; width: auto; display: block; }

.site-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--accent-1);
}

/* ─── Mobilnav (hamburgare under 768px) ─────────────────────────── */

/*
 * Hamburgaren forceras under 768px (core-navigationens egen brytpunkt är 600px).
 * Mobilens Bli medlem-knapp förutsätter att navigationsmenyn (wp_navigation post 4)
 * innehåller en bli-medlem-länk — tas den bort i wp-admin försvinner mobilens
 * primära CTA.
 */
@media (max-width: 768px) {
	.wp-block-navigation__responsive-container-open {
		display: flex !important;
	}

	.wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	.site-header .wp-block-buttons {
		display: none !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open a[href*="bli-medlem"],
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[href*="bli-medlem"] {
		display: inline-block !important;
		background: var(--wp--preset--color--accent-1) !important;
		color: var(--wp--preset--color--base) !important;
		padding: 0.6rem 1.5rem !important;
		margin-top: 0.5rem;
	}

	.vf-lockup .vf-lockup-blomma { height: 36px; }
	.vf-lockup .vf-lockup-text   { height: 20px; }
}

@media (min-width: 769px) {
	.wp-block-navigation-item a[href*="bli-medlem"] {
		display: none;
	}
}

/* ─── Editorial-komponenter ─────────────────────────────────────── */

.vf-kicker {
	font-family: var(--wp--preset--font-family--label);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-1);
	margin-bottom: 0.9rem;
}

.vf-label-link a,
a.vf-label-link {
	font-family: var(--wp--preset--font-family--label);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none !important;
	color: var(--wp--preset--color--accent-2);
}

.vf-label-link a:hover,
a.vf-label-link:hover {
	color: var(--wp--preset--color--accent-1);
}

.vf-rule {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--accent-6);
	margin: 0;
	width: 100%;
}

/* Teasers med magenta-streck (omslagets teaser-rader) */
.vf-teaser {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	padding-block: 1.05rem;
	margin: 0;
	border-top: 1px solid var(--wp--preset--color--accent-6);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.45;
}

.vf-teaser:last-child {
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

.vf-teaser::before {
	content: "";
	flex: 0 0 26px;
	height: 3px;
	background: var(--wp--preset--color--accent-1);
	transform: translateY(-0.2em);
}

.vf-teaser a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none !important;
	transition: color 0.15s ease;
}

.vf-teaser a:hover {
	color: var(--wp--preset--color--accent-2);
}

/* Hero-foto med faktabärande bildtext */
.vf-hero {
	margin: 0;
}

.vf-hero img {
	width: 100%;
	height: clamp(340px, 46vw, 600px);
	object-fit: cover;
	object-position: 50% 40%;
	display: block;
	background: url("data:image/webp;base64,UklGRrYAAABXRUJQVlA4IKoAAABQBACdASoYABAAPtFUo0uoJKMhsAgBABoJYwC7AdwAuCDBQeZ21UWvJSEAAMsO6Vt4qThg80fogazedi8zJryqDPV4Q2+DKMAQuPPSLOl9Lbs7B5phDAn534HYl1js/P/PgKlWLyd/299qvNeP95qRvKZmuS+nU5KxQPsEnnueXak22Gm0Ds4hN9VO1cU+7rGUi0bizQklKj76F1ClDIzvVucuj/wxXIiAAA==") center 40% / cover no-repeat;
}

.vf-hero figcaption {
	font-style: italic;
	font-size: 0.85rem;
	color: var(--wp--preset--color--accent-3);
	padding: 0.7rem clamp(20px, 4vw, 48px);
	max-width: 1120px;
	margin-inline: auto;
}

/* Valband — tryckta datumpillens eko */
.vf-valband {
	display: block;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	text-align: center;
	text-decoration: none !important;
	font-family: var(--wp--preset--font-family--label);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 1rem 1.5rem;
	transition: background-color 0.15s ease;
}

.vf-valband:hover {
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--base);
}

@media (max-width: 600px) {
	.vf-valband { font-size: 0.75rem; letter-spacing: 0.14em; }
}

/* Faktaruta — papper + magenta vänsterbar */
.vf-faktaruta {
	background: var(--wp--preset--color--accent-5);
	border-left: 3px solid var(--wp--preset--color--accent-1);
	padding: 1.7rem 1.8rem 1.5rem;
	height: 100%;
}

.vf-faktaruta h2,
.vf-faktaruta h3 {
	font-family: var(--wp--preset--font-family--label);
	font-weight: 700;
	font-size: 0.92rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	margin-top: 0;
	margin-bottom: 0.8rem;
}

.vf-faktaruta p {
	font-size: 0.97rem;
	line-height: 1.6;
}

/* Editorial post-rader (ersätter kort-griden) */
.vf-post-item {
	padding-block: 1.4rem;
	border-top: 1px solid var(--wp--preset--color--accent-6);
}

.vf-post-item .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent-2);
}

/* Big numbers-etiketter (siffran stylas i markup med display-font + accent-1) */
.vf-number-label {
	font-size: 0.92rem;
	color: var(--wp--preset--color--contrast);
	margin-top: 0.5rem;
}

/* CTA-mottoremsa (baksidans register) */
.vf-cta-motto {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 35%, transparent);
	padding-top: 1.1rem;
	font-family: var(--wp--preset--font-family--label);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

@media (max-width: 600px) {
	.vf-cta-motto { font-size: 0.72rem; letter-spacing: 0.16em; }
}

/* ─── Sidfot (folio-registret) ──────────────────────────────────── */

.vf-footer-heading {
	font-family: var(--wp--preset--font-family--label) !important;
	font-weight: 700 !important;
	font-size: 0.78rem !important;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-4);
}

.vf-legal {
	font-family: var(--wp--preset--font-family--label);
	font-weight: 700;
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-4);
	margin: 0;
}

footer .wp-block-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

footer .wp-block-list li {
	margin-bottom: 0.55rem;
	font-size: 0.92rem;
}

/* ─── Kategori-chips (Titillium-register, raka hörn) ────────────── */

.category-chips .chip {
	margin: 0;
	line-height: 1;
	font-family: var(--wp--preset--font-family--label);
	font-weight: 700;
	font-size: 0.72rem !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 0 !important;
	transition: background 0.15s ease, color 0.15s ease;
}

.wp-block-group.category-chips .chip a {
	color: var(--wp--preset--color--accent-2);
	text-decoration: none;
}

.wp-block-group.category-chips .chip:hover {
	background: var(--wp--preset--color--accent-1) !important;
}

.wp-block-group.category-chips .chip:hover a {
	color: var(--wp--preset--color--base) !important;
}

.wp-block-group.category-chips .chip-active a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

body.category-debatt .category-chips .chip a[href*="/debatt/"],
body.category-skola .category-chips .chip a[href*="/skola/"],
body.category-vindkraft .category-chips .chip a[href*="/vindkraft/"],
body.category-budget .category-chips .chip a[href*="/budget/"],
body.category-motioner .category-chips .chip a[href*="/motioner/"],
body.category-samhalle .category-chips .chip a[href*="/samhalle/"],
body.category-foreningen .category-chips .chip a[href*="/foreningen/"] {
	color: var(--wp--preset--color--base);
}

body.category-debatt .category-chips .chip:has(a[href*="/debatt/"]),
body.category-skola .category-chips .chip:has(a[href*="/skola/"]),
body.category-vindkraft .category-chips .chip:has(a[href*="/vindkraft/"]),
body.category-budget .category-chips .chip:has(a[href*="/budget/"]),
body.category-motioner .category-chips .chip:has(a[href*="/motioner/"]),
body.category-samhalle .category-chips .chip:has(a[href*="/samhalle/"]),
body.category-foreningen .category-chips .chip:has(a[href*="/foreningen/"]) {
	background: var(--wp--preset--color--accent-1) !important;
	border-color: var(--wp--preset--color--accent-1) !important;
}

/* ─── Övrigt ────────────────────────────────────────────────────── */

/* Post-navigering (Föregående/Nästa) i label-registret */
.wp-block-post-navigation-link a {
	font-family: var(--wp--preset--font-family--label);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none !important;
}

/* Sökknapp: matcha temats knappstil */
.wp-block-search .wp-block-search__button,
.wp-block-search__button.wp-element-button {
	border-radius: 0 !important;
	background: var(--wp--preset--color--accent-1) !important;
	color: var(--wp--preset--color--base) !important;
	font-family: var(--wp--preset--font-family--label);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.78rem;
	padding: 0.6rem 1.5rem !important;
	border: none !important;
}

/* Paginering i label-registret */
.wp-block-query-pagination a,
.wp-block-query-pagination .wp-block-query-pagination-numbers {
	font-family: var(--wp--preset--font-family--label);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none !important;
}

/* ─── Medlemsformulär ───────────────────────────────────────────── */

.vf-form {
	max-width: 480px;
}

.vf-form-falt {
	margin: 0 0 1.1rem;
}

.vf-form-falt label {
	display: block;
	font-family: var(--wp--preset--font-family--label, "Titillium Web");
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.75rem;
	margin-bottom: 0.35rem;
}

.vf-form-falt input {
	width: 100%;
	padding: 0.65rem 0.75rem;
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 0;
	background: var(--wp--preset--color--base);
	font: inherit;
}

.vf-form-falt input:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}

/* Honeypot: gömd off-screen (INTE display:none) — botar fyller i, människor ser inte */
.vf-form-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.vf-form-skicka {
	margin: 1.4rem 0 0;
}

.vf-form-knapp {
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	border: none;
	border-radius: 0;
	padding: 0.75rem 1.5rem;
	font-family: var(--wp--preset--font-family--label, "Titillium Web");
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.vf-form-knapp:hover {
	background: var(--wp--preset--color--accent-2);
}

.vf-form-knapp:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

.vf-form-bekraftelse,
.vf-form-fel {
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--wp--preset--color--accent-1);
	background: var(--wp--preset--color--accent-5);
}

.vf-form-bekraftelse p,
.vf-form-fel p {
	margin: 0;
}

/* ─── Grafik (tidningens diagram som webbnativa block) ───────────── */

/*
 * Tillgänglighetsmodell: SVG:erna är ren dekorativ geometri (aria-hidden).
 * All data — procent, etiketter, Mkr-värden — bärs av HTML-texten bredvid.
 */
.vf-grafik { margin: var(--wp--preset--spacing--60) 0; }
.vf-grafik svg { display: block; width: 100%; height: auto; }
.vf-grafik-citat { font-family: var(--wp--preset--font-family--display); font-style: italic; color: var(--wp--preset--color--accent-3); border-left: 3px solid var(--wp--preset--color--accent-1); padding-left: var(--wp--preset--spacing--40); font-size: 1.15rem; }
.vf-grafik-kalla { font-style: italic; font-size: 0.8rem; color: var(--wp--preset--color--accent-4); }

/* Paradox-rader (målstyrning): etikett → pil → utfall, magenta accent på sista raden.
   Pilen ligger i CSS (::before), inte i markup — den är ren dekoration och ska varken
   läsas av skärmläsare eller räknas som tidningskälltext i källtrohets-diffen. */
.vf-paradox { border-left: 3px solid var(--wp--preset--color--accent-1); padding: 0.4em 0 0.4em var(--wp--preset--spacing--50); margin: var(--wp--preset--spacing--60) 0; }
.vf-paradox-rad { display: grid; grid-template-columns: 7.5em auto 1fr; gap: 1em; align-items: center; margin: 0.9em 0; }
.vf-paradox-etikett { font-family: var(--wp--preset--font-family--label); text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.8rem; font-weight: 700; color: var(--wp--preset--color--accent-4); }
.vf-paradox-pil { color: var(--wp--preset--color--accent-1); }
.vf-paradox-pil::before { content: "→"; }
.vf-paradox-utfall { font-size: 1.1rem; }
.vf-paradox-rad.accent .vf-paradox-etikett { color: var(--wp--preset--color--accent-1); }
.vf-paradox-rad.accent .vf-paradox-utfall { font-weight: 600; }
@media (max-width: 600px) { .vf-paradox-rad { grid-template-columns: auto 1fr; } .vf-paradox-pil { display: none; } }

/* Hundralappen — staplad andelsgraf + linjerad etikettlista */
.vf-hundralapp-lista {
	display: flex;
	flex-direction: column;
}

.vf-grafik .vf-hundralapp-svg {
	width: auto;
	height: 220px;
	margin: 0 auto var(--wp--preset--spacing--30);
}

.vf-hundralapp-rad {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.35rem 0;
	border-top: 1px solid var(--wp--preset--color--accent-6);
}

.vf-hundralapp-rad:first-child { border-top: 0; }

.vf-hundralapp-procent {
	flex: 0 0 auto;
	min-width: 2.7em;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.3rem;
	line-height: 1;
	color: var(--wp--preset--color--accent-3);
}

.vf-hundralapp-etikett {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9rem;
	line-height: 1.3;
}

.vf-stor .vf-hundralapp-procent {
	color: var(--wp--preset--color--accent-1);
	font-size: 1.7rem;
}

.vf-stor .vf-hundralapp-etikett { font-weight: 600; }

/* Från 782px (WP-kärnans kolumn-staplingsbrytpunkt): stapel och lista delar exakt
   höjd så banden linjerar med raderna. Under 782px staplar WP kolumnerna med
   !important — då gäller INTE den fasta clamp-höjden, utan svg/lista flödar
   naturligt (svg 220px, listan auto), vilket är rätt för det staplade läget. */
@media (min-width: 782px) {
	.vf-hundralapp .wp-block-columns {
		align-items: stretch;
		gap: clamp(18px, 3vw, 32px);
	}

	.vf-hundralapp .wp-block-column:first-child { flex: 0 0 auto; }
	.vf-hundralapp .wp-block-column:last-child { flex: 1 1 auto; }

	.vf-grafik .vf-hundralapp-svg {
		height: clamp(300px, 34vw, 400px);
		margin: 0;
	}

	.vf-hundralapp-lista { height: clamp(300px, 34vw, 400px); }
}

/* Fastighets-staplarna — rubriken är en <h2> i faktarutan (stylas av .vf-faktaruta h2);
   här: etikett/värde-rader + dekorativa track-barer */
.vf-fastighet-rad {
	margin: 0 0 0.4rem;
	font-size: 0.97rem;
}

.vf-fastighet-rad strong { font-weight: 700; }

.vf-fastighet-stapel { margin-bottom: 1.1rem; }

.vf-grafik-callout {
	font-style: italic;
	color: var(--wp--preset--color--accent-4);
	font-size: 0.95rem;
	margin: 0.4rem 0 1.1rem;
}

.vf-fastighet-fakta {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.3rem 0.9rem;
	margin: 0 0 1.1rem;
}

.vf-fastighet-fakta-rad { display: contents; }
.vf-fastighet-fakta dt { font-weight: 700; }
.vf-fastighet-fakta dd { margin: 0; }

/* ─── Kandidat-grid (representant-sidan) ─────────────────────────── */

/* Flat register: hårlinje över varje kandidat, inga kort-skuggor, inga rundade hörn. */
.vf-kandidat {
	border-top: 1px solid var(--wp--preset--color--accent-6);
	padding-top: var(--wp--preset--spacing--40);
}

.vf-kandidat .wp-block-image {
	margin: 0;
}

.vf-kandidat img {
	width: 100%;
	height: auto;
	display: block;
}

.vf-kandidat-nr {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--accent-1);
	font-size: 1.6rem;
	line-height: 1;
	margin: var(--wp--preset--spacing--30) 0 0;
}

/* Namnet är en H3 (skärmläsarnavigering över kandidatlistan) men ska rendera som
   brödtext-semibold — därför explicit override av temats Playfair-rubriktypografi. */
.vf-kandidat-namn {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.3;
	letter-spacing: 0;
	margin: 0.2em 0 0;
}

.vf-kandidat-ort {
	font-family: var(--wp--preset--font-family--label);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.75rem;
	color: var(--wp--preset--color--accent-4);
	margin: 0 0 0.6em;
}

/* Pull quote — tidningens register (stil 8: Playfair italic, teal, centrerad).
   Utan regeln föll blocket till WP-default: stor svart sans ("blobben").
   Citattecknen ligger i innehållet (” = källtroget mot trycket) — ingen dekoration här. */
.wp-block-pullquote {
	border: none;
	padding: var(--wp--preset--spacing--50) 0;
	margin: var(--wp--preset--spacing--50) auto;
	text-align: center;
}
.wp-block-pullquote blockquote {
	margin: 0;
}
.wp-block-pullquote p {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: clamp(1.35rem, 3.4vw, 1.75rem);
	line-height: 1.35;
	color: var(--wp--preset--color--accent-3);
	hyphens: none;
	margin: 0 auto;
	max-width: 26em;
}

/* ─── Hela listan — vallistans 32 namn som ett lag (tidningens sid 14) ──── */

/* Rubriken behåller temats Playfair-rubrikregister (till skillnad från
   .vf-kandidat-namn, som medvetet återförs till brödtext-sans). */
.vf-roster-rubrik {
	margin-top: var(--wp--preset--spacing--60);
}

.vf-roster-ingress {
	max-width: 40em;
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Flat roster: en enda lista, alla 32 jämställda — inga hårlinjer, inga kort,
   samma tysta register som tryckets civic roster. Fyra kolumner på desktop,
   två på surfplatta/mobil; radordning = nummerordning (radvis vänster→höger). */
.vf-roster {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: clamp(1rem, 2.5vw, 2rem);
	row-gap: 0.35rem;
}

.vf-roster-rad {
	display: flex;
	align-items: baseline;
	gap: 0.55rem;
	margin: 0;
}

/* Numret i Playfair, VF Text (inte magenta) — trycket reserverar magentan här,
   och på webben skiljer det rosterns tysta register från fotokortens magenta-nr. */
.vf-roster-nr {
	flex: 0 0 auto;
	min-width: 1.7em;
	text-align: right;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1rem;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
	font-variant-numeric: lining-nums tabular-nums;
}

.vf-roster-namn {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
	line-height: 1.35;
	hyphens: none;
}

/* Hela-kommunen-deklarationen: kort magenta accentlinje (tryckets 2 pt-streck),
   sedan påståendet i Playfair kursiv teal, vänsterställt. */
.vf-roster-deklaration {
	margin-top: var(--wp--preset--spacing--50);
}

.vf-roster-linje {
	width: 64px;
	height: 2px;
	background: var(--wp--preset--color--accent-1);
	margin-bottom: var(--wp--preset--spacing--40);
}

.vf-roster-slogan {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	color: var(--wp--preset--color--accent-3);
	font-size: clamp(1.3rem, 3vw, 1.5rem);
	line-height: 1.3;
	hyphens: none;
	margin: 0 0 0.7rem;
}

.vf-roster-foljd {
	max-width: 40em;
	margin: 0;
}

@media (max-width: 900px) {
	.vf-roster {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ─── Kandidat-grid + roster: bredare desktop-yta ─────────────────── */

/* Sidan bor i en 720px-constrained innehållslayout. Gruppen är alignwide
   (temats wideSize = 1120px), men den yttre mallens 720-wrapper kapar den —
   så på breda skärmar bryter vi ut gruppen symmetriskt till 1120px. Läs-
   texten hålls kvar på 720 (gruppens egen constrained-layout centrerar den),
   medan kort-kolumnerna och rostern (alignwide-barn) fyller 1120 och ger
   långa namn (rad 25, Angelica Göransson Malkusson) mer plats. Grinden på
   1240px lämnar breakouten innanför mallens sidmarginal (ingen overflow). */
@media (min-width: 1240px) {
	.wp-block-group.vf-kandidater {
		width: 1120px;
		max-width: none;
		margin-inline: calc((100% - 1120px) / 2);
	}
}

/* Bryggmening (sajt-egen övergång kort → roster) — läsmått, tyst ton. */
.vf-sajtcopy {
	max-width: 40em;
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: 0;
}

/* Ankarmål: liten luft ovanför när man hoppar hit via "Se alla 32 …". */
#hela-listan {
	scroll-margin-top: 1.5rem;
}

/* ─── Uppdrag (sittande representanter) — platt civic-register ─────── */

/* De nästlade WP-listorna (organ → ledamöter) renderade punkt-tunga och
   trånga, särskilt på mobil. Här plattas de till ett tyst register:
   organnamnet som halvfet etikett, ledamöterna som rena indenterade rader
   utan dubbla punkter. Hårlinjer skiljer organen; inga rutor. */
.vf-uppdrag ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vf-uppdrag > ul > li {
	font-weight: 600;
	padding-top: 0.7rem;
	margin-top: 0.7rem;
	border-top: 1px solid var(--wp--preset--color--accent-6);
}

.vf-uppdrag > ul > li:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.vf-uppdrag ul ul {
	margin-top: 0.35rem;
}

.vf-uppdrag ul ul li {
	font-weight: 400;
	padding-left: 1rem;
	line-height: 1.55;
}