/*
Theme Name:   Svenskaslots Child
Theme URI:    https://svenskaslots.nu/
Description:  Childtema till Neve för svenskaslots.nu – allt om slots och de bästa casinona med svensk licens. "Neonarkaden": kolsvart bas med neonlime, mono-etiketter, skarpa knappar, gradientlinje över menyn och en kortfot med ansvarsfullt spelande-chips (18+, Spelinspektionen, Spelpaus, Stödlinjen) länkade med rel="nofollow". Endast systemtypsnitt. Matchar färgerna i Casino Review Pro-pluginen.
Author:       Svenskaslots.nu
Author URI:   https://svenskaslots.nu/
Template:     neve
Version:      1.0.1
Requires at least: 6.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  svenskaslots
*/

/* =============================================================================
   FÄRGPALETT + TYPOGRAFI – Svenskaslots.nu ("Neonarkaden")
   Kolsvart bas + neonlime accent/CTA (mörk text), oliv för stjärnor/accent på
   ljusa ytor, länkblå på ljus bakgrund. Typografisk identitet S7+M4: system-ui
   med mono-versaletiketter (eyebrows) – inga externa typsnitt.
   Neves globala färgvariabler (--nv-*) överrids så att grundtemats
   komponenter följer paletten.
   ========================================================================== */
:root {
	--svs-dark-950: #06080A;       /* mörkast – reservband */
	--svs-dark-900: #0A0D10;       /* mörka band, CTA-text, emblem */
	--svs-dark-800: #101418;       /* huvudfärg – header, fotkort, rubriker */
	--svs-dark-700: #1B222B;       /* hover/gradientslut på mörk yta */
	--svs-lime:     #B8E62E;       /* accent på MÖRK yta + CTA */
	--svs-lime-light: #CDF25C;     /* hover-accent på mörkt */
	--svs-olive:    #5F7D08;       /* accent på LJUSA ytor – stjärnor, eyebrows */
	--svs-gradient-2: #4ADE80;     /* andra gradientfärgen (nav-signaturen) */
	--svs-link:     #1D4ED8;       /* länkar på ljus yta */
	--svs-link-dark:#1E40AF;       /* länk-hover */
	--svs-cta:      #B8E62E;       /* CTA "Spela nu" – lime */
	--svs-cta-dark: #A3D41F;       /* CTA-hover */
	--svs-bg:       #F6F7F9;       /* ljus sidbakgrund */
	--svs-text:     #1C232B;       /* brödtext */
	--svs-muted:    #5A6672;       /* dämpad text */
	--svs-border:   #DDE2E8;       /* ramar/avdelare */
	--svs-footer-text:  #C4CDD6;   /* text i fotkortet */
	--svs-footer-muted: #94A1AD;   /* disclaimer i fotkortet */
	--svs-font-rubrik: system-ui, "Segoe UI Variable Display", "Segoe UI", Roboto, sans-serif;
	--svs-font-brod:   system-ui, "Segoe UI", Roboto, Arial, sans-serif;
	--svs-font-mono:   ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;

	/* Neves globala palett → sajtens färger */
	--nv-primary-accent:   #1D4ED8;
	--nv-secondary-accent: #1E40AF;
	--nv-site-bg:          #F6F7F9;
	--nv-light-bg:         #FFFFFF;
	--nv-dark-bg:          #101418;
	--nv-text-color:       #1C232B;
	--nv-text-dark-bg:     #E2E8ED;
}

/* =============================================================================
   BAS
   ========================================================================== */
body {
	background-color: var(--svs-bg);
	color: var(--svs-text);
	font-family: var(--svs-font-brod);
	font-size: 17px;
	line-height: 1.7;
}

::selection {
	background: var(--svs-lime);
	color: var(--svs-dark-900);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--svs-font-rubrik);
	font-weight: 700;
	color: var(--svs-dark-800);
	line-height: 1.25;
}
h1 { font-size: 44px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }

/* Mono-eyebrow – typografiska signaturen (M4). Används av komponenter och
   kan läggas på egna element med klassen .svs-eyebrow. */
.svs-eyebrow {
	display: block;
	font-family: var(--svs-font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--svs-olive);
	margin: 0 0 8px;
}

.entry-content a:not(.svs-btn):not(.fcrp-visit-btn):not(.wp-block-button__link),
.site-main a:not(.svs-btn):not(.fcrp-visit-btn):not(.wp-block-button__link):not(.crp-compare-btn) {
	color: var(--svs-link);
}
.entry-content a:not(.svs-btn):not(.fcrp-visit-btn):not(.wp-block-button__link):hover,
.site-main a:not(.svs-btn):not(.fcrp-visit-btn):not(.wp-block-button__link):not(.crp-compare-btn):hover {
	color: var(--svs-link-dark);
}

blockquote {
	border-left: 4px solid var(--svs-olive);
	background: #F3F7E6;
	padding: 16px 20px;
	margin-left: 0;
}

.entry-meta,
.entry-meta a {
	color: var(--svs-muted);
}

/* Egen breddwrapper (Neves .container lämnas orörd) */
.svs-container {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* =============================================================================
   FOKUS + TILLGÄNGLIGHET
   Oliv på ljusa ytor (lime är för ljus mot vitt), lime på mörka ytor.
   ========================================================================== */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
	outline: 3px solid var(--svs-olive);
	outline-offset: 2px;
	border-radius: 3px;
}
.hfg_header a:focus-visible,
.hfg_header button:focus-visible,
.svs-footer a:focus-visible,
.svs-footer button:focus-visible {
	outline-color: var(--svs-lime);
}

/* =============================================================================
   HEADER + NAVIGATION (Neve HFG)
   Signatur: 3px gradientlinje (lime → grön) längs headerns överkant.
   Aktiv/hovrad menypunkt får limefärgad text.
   ========================================================================== */
.hfg_header {
	position: relative;
}
.hfg_header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--svs-lime) 0%, var(--svs-gradient-2) 100%);
	z-index: 5;
}
.hfg_header .header--row-inner,
.hfg_header .header-main-inner,
.hfg_header .header-top-inner,
.hfg_header .header-bottom-inner {
	background-color: var(--svs-dark-800);
}

.hfg_header .site-title,
.hfg_header .site-title a,
.hfg_header .site-title a:visited {
	font-family: var(--svs-font-rubrik);
	color: #ffffff;
}
.hfg_header .site-title a:hover {
	color: var(--svs-lime-light);
}
.hfg_header .site-tagline,
.hfg_header .site-description {
	color: #9AAAB6;
}

.hfg_header .nv-nav-wrap .nav-ul li > a,
.hfg_header .nv-nav-wrap .nav-ul li > a:visited {
	color: #E4EAEF;
	font-family: var(--svs-font-rubrik);
	font-weight: 600;
}
.hfg_header .nv-nav-wrap .nav-ul li:hover > a,
.hfg_header .nv-nav-wrap .nav-ul li > a:focus,
.hfg_header .nv-nav-wrap .nav-ul li.current-menu-item > a,
.hfg_header .nv-nav-wrap .nav-ul li.current_page_item > a {
	color: var(--svs-lime);
}
.hfg_header .nv-nav-wrap .sub-menu {
	background-color: var(--svs-dark-800);
	box-shadow: 0 8px 22px rgba(6, 8, 10, .5);
}
.hfg_header .nv-nav-wrap .sub-menu li > a {
	color: #E4EAEF;
}
.hfg_header .nv-nav-wrap .sub-menu li:hover > a,
.hfg_header .nv-nav-wrap .sub-menu li.current-menu-item > a {
	color: var(--svs-lime);
	background-color: var(--svs-dark-700);
}

/* Mobilmeny: toggle och logotyp får ALDRIG döljas (funktionsbasen §3).
   Neves toggleknapp får limefärg och synlig fokusram. */
.menu-mobile-toggle .navbar-toggle,
.menu-mobile-toggle .navbar-toggle:hover,
.menu-mobile-toggle .navbar-toggle:focus {
	color: var(--svs-lime);
}
.menu-mobile-toggle .icon-bar {
	background-color: var(--svs-lime);
}
.menu-mobile-toggle .nav-toggle-label {
	color: #E4EAEF;
}
.hfg_header .header-menu-sidebar,
.hfg_header .header-menu-sidebar-bg {
	background-color: var(--svs-dark-900);
}
.hfg_header .header-menu-sidebar .nav-ul li > a {
	color: #E4EAEF;
	min-height: 44px;
}

/* =============================================================================
   KNAPPAR – skarp 2px, lime med mörk text, versal
   ========================================================================== */
.svs-btn,
input[type="submit"],
input[type="button"],
input[type="reset"],
button:not(.navbar-toggle):not(.fcrp-visit-btn):not(.crp-compare-btn):not(.crp-cf-bar-clear):not(.crp-cf-bar-remove):not(.crp-cf-modal-close),
.wp-block-button__link {
	display: inline-block;
	background-color: var(--svs-cta);
	color: var(--svs-dark-900);
	border: 2px solid transparent;
	border-radius: 2px;
	padding: 11px 22px;
	min-height: 44px;
	font-family: var(--svs-font-rubrik);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease;
	box-sizing: border-box;
}
.svs-btn:hover,
.svs-btn:focus,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
button:not(.navbar-toggle):not(.fcrp-visit-btn):not(.crp-compare-btn):not(.crp-cf-bar-clear):not(.crp-cf-bar-remove):not(.crp-cf-modal-close):hover,
.wp-block-button__link:hover {
	background-color: var(--svs-cta-dark);
	color: var(--svs-dark-900);
}
.svs-btn--sekundar {
	background-color: transparent;
	border-color: var(--svs-olive);
	color: var(--svs-olive);
}
.svs-btn--sekundar:hover,
.svs-btn--sekundar:focus {
	background-color: var(--svs-olive);
	color: #ffffff;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
	border-color: var(--svs-link);
	outline: 2px solid rgba(29, 78, 216, .3);
	outline-offset: 0;
}

/* =============================================================================
   TABELLER + MOBILA INFORMATIONSKORT (funktionsbasen §5.3)
   assets/js/tabeller.js sätter data-label från rubrikraden.
   ========================================================================== */
.svs-table-wrap { overflow-x: auto; margin: 1.5em 0; }
.entry-content table { border-collapse: collapse; width: 100%; }
.entry-content th, .entry-content td { padding: 10px 14px; text-align: left; }
.entry-content thead th {
	background: var(--svs-dark-800);
	color: #fff;
	font-family: var(--svs-font-rubrik);
}
.entry-content tbody th[scope="row"] {
	background: transparent;
	color: var(--svs-dark-800);
	font-weight: 700;
}
.entry-content td { border-bottom: 1px solid var(--svs-border); }
.entry-content tbody tr:nth-child(even) td { background: #FBFCFD; }

@media (max-width: 700px) {
	.svs-table-cards { display: block; width: 100%; }
	.svs-table-cards thead { position: absolute; width: 1px; height: 1px;
		overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* dold men tillganglig */
	/* box-sizing MASTE sattas explicit: annars laggs cellpadding ovanpa
	   width:100% och korten sticker ut over hogerkanten (verifierat fel). */
	.svs-table-cards tbody, .svs-table-cards tr, .svs-table-cards td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	.svs-table-cards tr {
		border: 1px solid var(--svs-border);
		border-radius: 10px;
		background: #fff;
		margin: 0 0 14px;
		padding: 6px 14px 10px;
	}
	.svs-table-cards td {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		padding: 8px 0;
		border: 0;
		border-bottom: 1px solid var(--svs-border);
		overflow-wrap: anywhere; /* langa varden bryter i stallet for att spranga kortet */
	}
	.svs-table-cards tr td:last-child { border-bottom: 0; }
	.svs-table-cards td::before {
		content: attr(data-label);
		flex: 0 0 42%;
		font-weight: 700;
		color: var(--svs-dark-800);
	}
	.svs-table-cards td[data-label=""]::before,
	.svs-table-cards td:not([data-label])::before { content: none; }
	.svs-table-cards .svs-card-title {
		display: block;
		width: 100%;
		box-sizing: border-box;
		font-size: 17px;
		font-weight: 700;
		padding: 6px 0 10px;
		border-bottom: 2px solid var(--svs-olive);
		background: transparent;
	}
	/* .svs-table-wrap behaller overflow-x:auto aven har - smala tabeller
	   som inte blir kort ska kunna scrollas i stallet for att bredda sidan. */
}

/* =============================================================================
   SIDFOT – "Kortfot" (variant D)
   Mörkt kort som svävar på ljusa sidbakgrunden. Ordning: varumärke →
   widgetkolumner → ansvarsfullt spelande-chips → telefonrad → disclaimer.
   Neves copyright-rad ligger under kortet på ljus bakgrund.
   ========================================================================== */
.svs-footer {
	padding: 48px 0 26px;
}
.svs-footer__kort {
	background: var(--svs-dark-800);
	border-radius: 18px;
	padding: 42px 40px 28px;
	box-shadow: 0 18px 44px rgba(6, 8, 10, .2);
	color: var(--svs-footer-text);
	font-size: 15px;
	line-height: 1.7;
}

/* --- Varumärke --- */
.svs-footer__brand {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 18px;
	margin: 0 0 8px;
}
.svs-footer__emblem {
	flex: 0 0 auto;
}
.svs-footer__wordmark {
	font-family: var(--svs-font-rubrik);
	font-size: 26px;
	margin: 0;
	color: #ffffff;
}
.svs-footer__wordmark em {
	font-style: italic;
	font-weight: 800;
	letter-spacing: .01em;
}
.svs-logo-tld {
	color: var(--svs-lime);
	opacity: .8;
	font-size: .62em;
	font-weight: 700;
	font-style: normal;
	margin-left: 2px;
}
.svs-footer__about {
	flex: 1 1 100%;
	max-width: 680px;
	margin: 0;
	font-size: 14px;
	color: var(--svs-footer-text);
}

/* --- Widgetkolumner (alltid ovanför RG-sektionen) --- */
.svs-footer__widgets {
	display: grid;
	gap: 30px;
	margin: 30px 0 34px;
}
.svs-footer__widgets--1 { grid-template-columns: 1fr; }
.svs-footer__widgets--2 { grid-template-columns: repeat(2, 1fr); }
.svs-footer__widgets--3 { grid-template-columns: repeat(3, 1fr); }
.svs-footer__widgets--4 { grid-template-columns: repeat(4, 1fr); }
.svs-footer__widgets--5 { grid-template-columns: repeat(5, 1fr); }

.svs-footer__title {
	font-family: var(--svs-font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--svs-lime);
	margin: 0 0 12px;
}

/* Vertikala länklistor – en länk per rad, inga separatorer (§4.2) */
.svs-footer__widget ul { list-style: none; margin: 0; padding: 0; }
.svs-footer__widget li { margin: 0 0 8px; padding: 0; border: 0; }
.svs-footer__widget li::before,
.svs-footer__widget li::after { content: none; }  /* stoppar ärvda streck */
.svs-footer__widget li + li { border-top: 0; }
.svs-footer__widget a {
	display: inline-block;
	color: var(--svs-footer-text);
	text-decoration: none;
	transition: color .15s ease;
}
.svs-footer__widget a:hover {
	color: var(--svs-lime-light);
}
.svs-footer__widget,
.svs-footer__widget p {
	color: var(--svs-footer-text);
}

/* --- Ansvarsfullt spelande: transparenta logotyper direkt på ytan ---
   Inga plattor eller chips bakom bilderna. Mörka fotkortet får de vita
   transparenta originalen; shortcodens ljusa variant får mörka/färgade
   transparenta varianter. */
.svs-footer__rgsektion {
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding-top: 26px;
	text-align: center;
}
.svs-rg {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 18px 40px;
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}
.svs-rg li { margin: 0; padding: 0; }
.svs-rg__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.svs-rg__item img {
	display: block;
	width: auto;
	opacity: .95;
	transition: opacity .15s ease;
}
.svs-rg__item a {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}
.svs-rg__item a:hover img,
.svs-rg__item a:focus img { opacity: 1; }
.svs-rg__badge span {
	font-family: var(--svs-font-rubrik);
	font-weight: 600;
	font-size: 14px;
}
.svs-rg--mork .svs-rg__badge span { color: var(--svs-footer-text); }
.svs-rg__badge img { height: 32px; }
.svs-rg__spelinspektionen img { height: 44px; border-radius: 4px; }
.svs-rg__spelpaus img { height: 26px; }
.svs-rg__stodlinjen img { height: 24px; }

/* Ljus variant för shortcoden [svs_ansvarsfullt] på innehållssidor –
   tunn ram runt hela raden, ingen fyllnad bakom logotyperna */
.svs-rg--ljus {
	margin: 1.5em 0;
	border: 1px solid var(--svs-border);
	border-radius: 10px;
	padding: 20px 24px;
}
.svs-rg--ljus .svs-rg__badge span { color: var(--svs-dark-800); }
.svs-rg--ljus .svs-rg__spelpaus img { height: 30px; }

/* Stödlinjens telefonrad – lime-kontur, skarpa hörn som knapparna */
.svs-rg__phone {
	text-align: center;
	margin: 0 0 4px;
}
.svs-rg__phone a {
	display: inline-block;
	color: var(--svs-lime-light);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	border: 1px solid rgba(184, 230, 46, .5);
	border-radius: 2px;
	padding: 10px 24px;
	transition: background-color .15s ease, color .15s ease;
}
.svs-rg__phone a:hover,
.svs-rg__phone a:focus {
	background: rgba(184, 230, 46, .12);
	color: #ffffff;
}

/* --- Disclaimer --- */
.svs-footer__disclaimer {
	border-top: 1px solid rgba(255, 255, 255, .08);
	margin-top: 22px;
	padding-top: 20px;
}
.svs-footer__disclaimer p {
	max-width: 940px;
	margin: 0 auto;
	text-align: center;
	font-size: 12.5px;
	line-height: 1.75;
	color: var(--svs-footer-muted);
}

/* --- Neves fotrad under kortet: ljus, diskret ©-rad --- */
footer.site-footer {
	background: transparent;
}
.hfg_footer .header--row-inner {
	background: transparent;
}
.hfg_footer {
	color: var(--svs-muted);
	font-size: 13px;
	text-align: center;
}
.hfg_footer p { margin: 0; }
.hfg_footer a {
	color: var(--svs-link);
	text-decoration: none;
}
.hfg_footer a:hover {
	color: var(--svs-link-dark);
}

/* =============================================================================
   KOMPONENTER (shortcodes + rena HTML-klasser, klassiska redigeraren)
   ========================================================================== */

/* Faktaruta */
.svs-fakta {
	border: 1px solid var(--svs-border);
	border-left: 4px solid var(--svs-olive);
	background: #F3F7E6;
	border-radius: 2px;
	padding: 18px 22px;
	margin: 1.5em 0;
}
.svs-fakta__titel {
	font-family: var(--svs-font-mono);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--svs-olive);
	margin: 0 0 8px;
}
.svs-fakta__text p:last-child { margin-bottom: 0; }

/* Fördelar / nackdelar */
.svs-proscons {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin: 1.5em 0;
}
.svs-proscons .svs-lista { margin: 0; }
.svs-lista {
	border: 1px solid var(--svs-border);
	border-radius: 2px;
	background: #ffffff;
	padding: 16px 20px;
	margin: 1.5em 0;
}
.svs-lista__rubrik {
	margin: 0 0 10px;
	font-size: 16px;
}
.svs-lista--plus .svs-lista__rubrik { color: var(--svs-olive); }
.svs-lista--minus .svs-lista__rubrik { color: #B91C1C; }
.svs-lista ul { list-style: none; margin: 0; padding: 0; }
.svs-lista li {
	position: relative;
	padding: 4px 0 4px 26px;
	margin: 0;
}
.svs-lista--plus li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--svs-olive);
	font-weight: 700;
}
.svs-lista--minus li::before {
	content: '✕';
	position: absolute;
	left: 0;
	color: #B91C1C;
	font-weight: 700;
}

/* Innehållsförteckning */
.svs-toc {
	border: 1px solid var(--svs-border);
	border-radius: 2px;
	background: #ffffff;
	padding: 18px 22px;
	margin: 1.5em 0;
}
.svs-toc__titel {
	font-family: var(--svs-font-mono);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--svs-olive);
	margin: 0 0 10px;
}
.svs-toc__lista {
	margin: 0;
	padding: 0 0 0 20px;
}
.svs-toc__lista li { margin: 0 0 6px; }
.svs-toc__lista .svs-toc__niva3 { margin-left: 18px; list-style-type: circle; }
.svs-toc__lista a { color: var(--svs-link); text-decoration: none; }
.svs-toc__lista a:hover { color: var(--svs-link-dark); text-decoration: underline; }

/* FAQ (details/summary – fungerar utan JS) */
.svs-faq { margin: 1.5em 0; }
.svs-faq__item {
	border: 1px solid var(--svs-border);
	border-radius: 2px;
	background: #ffffff;
	margin: 0 0 10px;
	padding: 0;
}
.svs-faq__item summary {
	cursor: pointer;
	padding: 14px 18px;
	font-family: var(--svs-font-rubrik);
	font-weight: 700;
	color: var(--svs-dark-800);
	list-style-position: inside;
}
.svs-faq__item summary:hover { color: var(--svs-olive); }
.svs-faq__item[open] summary { border-bottom: 1px solid var(--svs-border); }
.svs-faq__svar { padding: 12px 18px; }
.svs-faq__svar p:last-child { margin-bottom: 0; }

/* Betygsruta – stjärnor i oliv (grå bas), samma teknik som pluginen */
.svs-betyg {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	border: 1px solid var(--svs-border);
	border-radius: 2px;
	background: #ffffff;
	padding: 10px 16px;
	margin: 1em 0;
}
.svs-betyg__etikett {
	font-family: var(--svs-font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--svs-muted);
}
.svs-betyg__stjarnor {
	display: inline-block;
	position: relative;
	width: 100px;
	height: 18px;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><g fill="%23dcdcdc"><polygon points="10,1 12,7 18,7 13,11 15,17 10,14 5,17 7,11 2,7 8,7"/><polygon points="30,1 32,7 38,7 33,11 35,17 30,14 25,17 27,11 22,7 28,7"/><polygon points="50,1 52,7 58,7 53,11 55,17 50,14 45,17 47,11 42,7 48,7"/><polygon points="70,1 72,7 78,7 73,11 75,17 70,14 65,17 67,11 62,7 68,7"/><polygon points="90,1 92,7 98,7 93,11 95,17 90,14 85,17 87,11 82,7 88,7"/></g></svg>') no-repeat left center;
	background-size: 100px 18px;
}
.svs-betyg__fyllnad {
	display: block;
	height: 100%;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><g fill="%235F7D08"><polygon points="10,1 12,7 18,7 13,11 15,17 10,14 5,17 7,11 2,7 8,7"/><polygon points="30,1 32,7 38,7 33,11 35,17 30,14 25,17 27,11 22,7 28,7"/><polygon points="50,1 52,7 58,7 53,11 55,17 50,14 45,17 47,11 42,7 48,7"/><polygon points="70,1 72,7 78,7 73,11 75,17 70,14 65,17 67,11 62,7 68,7"/><polygon points="90,1 92,7 98,7 93,11 95,17 90,14 85,17 87,11 82,7 88,7"/></g></svg>') no-repeat left center;
	background-size: 100px 18px;
	overflow: hidden;
}
.svs-betyg__siffra {
	font-family: var(--svs-font-rubrik);
	font-weight: 700;
	font-size: 16px;
	color: var(--svs-dark-800);
}

/* =============================================================================
   EDITOR-PALETT (Gutenberg) – frontend-klasser
   ========================================================================== */
.has-svs-dark-color { color: var(--svs-dark-800); }
.has-svs-dark-background-color { background-color: var(--svs-dark-800); }
.has-svs-lime-color { color: var(--svs-lime); }
.has-svs-lime-background-color { background-color: var(--svs-lime); }
.has-svs-olive-color { color: var(--svs-olive); }
.has-svs-olive-background-color { background-color: var(--svs-olive); }
.has-svs-blue-color { color: var(--svs-link); }
.has-svs-blue-background-color { background-color: var(--svs-link); }
.has-svs-light-color { color: var(--svs-bg); }
.has-svs-light-background-color { background-color: var(--svs-bg); }
.has-svs-text-color { color: var(--svs-text); }
.has-svs-text-background-color { background-color: var(--svs-text); }

/* =============================================================================
   RESPONSIVT
   ========================================================================== */
@media (max-width: 980px) {
	h1 { font-size: 36px; }
	.svs-footer__widgets--3,
	.svs-footer__widgets--4,
	.svs-footer__widgets--5 {
		grid-template-columns: repeat(2, 1fr);
	}
	.svs-footer__kort { padding: 34px 28px 24px; }
}

@media (max-width: 640px) {
	h1 { font-size: 30px; }
	h2 { font-size: 24px; }
	.svs-footer { padding: 32px 0 20px; }
	.svs-footer__kort { padding: 28px 20px 20px; border-radius: 14px; }
	.svs-footer__widgets--2,
	.svs-footer__widgets--3,
	.svs-footer__widgets--4,
	.svs-footer__widgets--5 {
		grid-template-columns: 1fr;
	}
	.svs-footer__wordmark { font-size: 22px; }
	.svs-proscons { grid-template-columns: 1fr; }
	.svs-rg { gap: 14px 24px; }
	.svs-rg--ljus { padding: 16px 14px; }
	.svs-rg__spelinspektionen img { height: 38px; }
	.svs-rg__phone a { font-size: 13px; padding: 9px 18px; }
	.svs-footer__disclaimer p { font-size: 12px; }
}