/* ============================================================
   VIMAB Prickar — site-wide vertikalt prickband
   Outputtas via wp_footer på alla matchande sidor när bandet är
   aktiverat i Inställningar → VIMAB Prickar.
   Per-instans-värden sätts via inline-CSS (build_inline_css i PHP).
   ============================================================ */

:root {
	/* Defaults — överskrivs av sitewide-classen i PHP */
	--vmsw-svg-width: 60px;
	--vmsw-parallax: 0.5;
	--vmsw-spotlight-size: 25%;
	--vmsw-color: #0071B9;
}

.vmsw-root {
	pointer-events: none;
}

.vmsw {
	position: fixed;
	top: 0;
	width: calc(var(--vmsw-svg-width) + 30px);
	height: 100vh;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
	color: var(--vmsw-color);

	/* Spotlight-zon via mask-gradient — zonen följer scroll */
	--vmsw-spotlight-y: 50%;
	mask-image: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.25) 0%,
		rgba(0, 0, 0, 0.25) calc(var(--vmsw-spotlight-y) - var(--vmsw-spotlight-size)),
		rgba(0, 0, 0, 1)    var(--vmsw-spotlight-y),
		rgba(0, 0, 0, 0.25) calc(var(--vmsw-spotlight-y) + var(--vmsw-spotlight-size)),
		rgba(0, 0, 0, 0.25) 100%
	);
	-webkit-mask-image: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.25) 0%,
		rgba(0, 0, 0, 0.25) calc(var(--vmsw-spotlight-y) - var(--vmsw-spotlight-size)),
		rgba(0, 0, 0, 1)    var(--vmsw-spotlight-y),
		rgba(0, 0, 0, 0.25) calc(var(--vmsw-spotlight-y) + var(--vmsw-spotlight-size)),
		rgba(0, 0, 0, 0.25) 100%
	);
}

/* När spotlight är avstängd — inget mask, bandet jämnt synligt */
.vmsw--no-spotlight {
	mask-image: none;
	-webkit-mask-image: none;
	opacity: 0.7;
}

.vmsw--right { right: 0; }
.vmsw--left  {
	left: 0;
	transform: scaleX(-1); /* spegelvänd så vågmönstret matchar höger sida */
}

.vmsw-track {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	transform: translateY(var(--vmsw-parallax-y, 0px));
	will-change: transform;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.vmsw-track svg {
	width: var(--vmsw-svg-width);
	height: auto;
	flex-shrink: 0;
	display: block;
}


/* ============================================================
   Stora dekorativa cirkeln (klarblå) — som brandbookens framsida
   ============================================================ */

.vmsw-bigcircle {
	position: fixed;
	left: -260px;
	bottom: -180px;
	width: 720px;
	height: 720px;
	border-radius: 50%;
	background: var(--vmsw-color);
	pointer-events: none;
	z-index: 0;
	transform: translateY(var(--vmsw-circle-y, 0px));
	will-change: transform;
	opacity: 0.85;
}


/* ============================================================
   Mobil: dölj allt
   ============================================================ */
@media (max-width: 900px) {
	.vmsw, .vmsw-bigcircle { display: none; }
}


/* ============================================================
   SEKTION-DEKORATION via CSS-klass
   Klistra in en av dessa klasser i en BB-rads "Advanced → CSS Classes"-fält:
     vimab-band-right    — band på radens högerkant
     vimab-band-left     — band på radens vänsterkant
     vimab-band-both     — band på båda sidor (spegelvänd vänster)

   Anpassa per rad genom att överskugga CSS-variablerna i radens
   "Advanced → Custom CSS"-fält:
     --vimab-band-color: #FDC600;
     --vimab-band-width: 60px;
     --vimab-band-opacity: 0.4;
   ============================================================ */

/* Defaults på :root så de kan overridas av inline-CSS från settings.
   ::before/::after på rader cascade:r ner via var(). */
:root {
	--vimab-band-color: #0071B9;
	--vimab-band-width: 60px;
	--vimab-band-svg-width: 90px;
	--vimab-band-opacity: 0.5;
}

/* Layout-egenskaper som måste sitta på radelementet självt */
[class*="vimab-band-"] {
	position: relative;
	overflow: hidden;
	/* JS-uppdaterade per-rad-värden — defaults så CSS funkar utan JS */
	--vimab-band-progress: 1;
	--vimab-band-mask-y: 0px;
}

/* Höger sida (::after) */
.vimab-band-right::after,
.vimab-band-both::after {
	content: '';
	position: absolute;
	/* display: block tvingar bort BB:s clearfix display:table på .fl-row::after
	   — ett absolut display:table-element sträcker sig INTE mellan top/bottom
	   i Safari (höjd 0). top+bottom istället för height:100% är extra robust. */
	display: block;
	top: 0;
	bottom: 0;
	right: 0;
	width: var(--vimab-band-svg-width);
	background-color: var(--vimab-band-color);
	-webkit-mask-image: url(../assets/prickar-band-vertical.svg?v=146);
	mask-image: url(../assets/prickar-band-vertical.svg?v=146);
	-webkit-mask-repeat: repeat-y;
	mask-repeat: repeat-y;
	-webkit-mask-size: var(--vimab-band-width) auto;
	mask-size: var(--vimab-band-width) auto;
	-webkit-mask-position: center var(--vimab-band-mask-y, 0px);
	mask-position: center var(--vimab-band-mask-y, 0px);
	opacity: calc(var(--vimab-band-opacity) * var(--vimab-band-progress, 1));
	pointer-events: none;
	z-index: 1;
	transition: opacity 200ms linear;
}

/* Vänster sida (::before) — spegelvänd så vågmönstret matchar höger */
.vimab-band-left::before,
.vimab-band-both::before {
	content: '';
	position: absolute;
	/* se höger-bandet: display:block + top/bottom (BB clearfix-skydd) */
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--vimab-band-svg-width);
	background-color: var(--vimab-band-color);
	-webkit-mask-image: url(../assets/prickar-band-vertical.svg?v=146);
	mask-image: url(../assets/prickar-band-vertical.svg?v=146);
	-webkit-mask-repeat: repeat-y;
	mask-repeat: repeat-y;
	-webkit-mask-size: var(--vimab-band-width) auto;
	mask-size: var(--vimab-band-width) auto;
	-webkit-mask-position: center top;
	mask-position: center top;
	transform: scaleX(-1);
	opacity: calc(var(--vimab-band-opacity) * var(--vimab-band-progress, 1));
	pointer-events: none;
	z-index: 1;
	transition: opacity 200ms linear;
}

/* ============================================================
   HORISONTELLA BAND
   .vimab-band-top       — band längs sektionens överkant
   .vimab-band-bottom    — band längs sektionens underkant
   .vimab-band-topbottom — band längs både topp och botten

   Använder originalet prickar-band.svg (horisontellt vågmönster).
   Storleksmodifierarna (--small/--medium/--large/--xl) styr nu
   bandets HÖJD via --vimab-band-svg-width — dot-storleken skalas
   proportionellt med höjden eftersom mask-size: auto 100%.
   ============================================================ */

/* Toppband (::before) */
.vimab-band-top::before,
.vimab-band-topbottom::before {
	content: '';
	position: absolute;
	display: block; /* skydd mot BB clearfix display:table */
	top: 0;
	left: 0;
	right: auto;
	bottom: auto;
	width: 100%;
	height: var(--vimab-band-svg-width);
	background-color: var(--vimab-band-color);
	-webkit-mask-image: url(../assets/prickar-band.svg?v=146);
	mask-image: url(../assets/prickar-band.svg?v=146);
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: auto 100%;
	mask-size: auto 100%;
	-webkit-mask-position: 0 center;
	mask-position: 0 center;
	transform: none;
	opacity: calc(var(--vimab-band-opacity) * var(--vimab-band-progress, 1));
	pointer-events: none;
	z-index: 1;
	transition: opacity 200ms linear;
}

/* Bottenband (::after) — spegelvänt vertikalt så vågmönstret reflekterar topp */
.vimab-band-bottom::after,
.vimab-band-topbottom::after {
	content: '';
	position: absolute;
	display: block; /* skydd mot BB clearfix display:table */
	top: auto;
	left: 0;
	right: auto;
	bottom: 0;
	width: 100%;
	height: var(--vimab-band-svg-width);
	background-color: var(--vimab-band-color);
	-webkit-mask-image: url(../assets/prickar-band.svg?v=146);
	mask-image: url(../assets/prickar-band.svg?v=146);
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: auto 100%;
	mask-size: auto 100%;
	-webkit-mask-position: 0 center;
	mask-position: 0 center;
	transform: scaleY(-1);
	opacity: calc(var(--vimab-band-opacity) * var(--vimab-band-progress, 1));
	pointer-events: none;
	z-index: 1;
	transition: opacity 200ms linear;
}


/* På mobil — byt vertikalt band mot en mini-pil i övre högra hörnet.
   Återanvänder samma färg/opacitet-variabler så modifier-klasserna ger
   samma utseende bara i miniatyr. ::before (vänster/topp-band) döljs
   helt och ::after omvandlas till mini-pil oavsett vilken bas-klass. */
@media (max-width: 900px) {
	[class*="vimab-band-"]::before {
		display: none;
	}

	[class*="vimab-band-"]::after {
		content: '';
		display: block;
		position: absolute;
		top: 12px;
		right: 12px;
		left: auto;
		bottom: auto;
		width: 70px;
		height: auto;
		aspect-ratio: 140.54 / 94.55;
		background-color: var(--vimab-band-color);
		-webkit-mask-image: url(../assets/prickar-pil-mask.svg?v=146);
		mask-image: url(../assets/prickar-pil-mask.svg?v=146);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-position: center;
		mask-position: center;
		transform: none;
		opacity: calc(var(--vimab-band-opacity) * var(--vimab-band-progress, 1));
	}
}


/* ============================================================
   MODIFIER-KLASSER för snabba varianter
   Kombinera med bas-klassen, t.ex.:
     vimab-band-right vimab-band--yellow vimab-band--large

   Färger: --blue (default) --yellow --darkblue --white --black
   Storlek: --small (40) --medium (80) --large (140) --xl (220)
   Opacitet: --subtle --normal (default) --strong --solid
   Position-justering: --inset (band 30 px in från kanten)
   Speciella: --pulse (sakta puls i opacity)
   ============================================================ */

/* Färger */
.vimab-band--yellow   { --vimab-band-color: #FDC600; }
.vimab-band--blue     { --vimab-band-color: #0071B9; }
.vimab-band--darkblue { --vimab-band-color: #073555; }
.vimab-band--white    { --vimab-band-color: #FFFFFF; }
.vimab-band--black    { --vimab-band-color: #000000; }

/* Storlekar — påverkar både container-bredd och prickbredd proportionellt */
.vimab-band--small  { --vimab-band-svg-width:  60px; --vimab-band-width:  40px; }
.vimab-band--medium { --vimab-band-svg-width: 110px; --vimab-band-width:  80px; }
.vimab-band--large  { --vimab-band-svg-width: 180px; --vimab-band-width: 140px; }
.vimab-band--xl     { --vimab-band-svg-width: 260px; --vimab-band-width: 220px; }

/* Opacitet */
.vimab-band--subtle { --vimab-band-opacity: 0.25; }
.vimab-band--normal { --vimab-band-opacity: 0.5; }
.vimab-band--strong { --vimab-band-opacity: 0.8; }
.vimab-band--solid  { --vimab-band-opacity: 1; }

/* Inset — bandet 30 px in från radens kant istället för flush */
.vimab-band--inset.vimab-band-right::after,
.vimab-band--inset.vimab-band-both::after  { right: 30px; }
.vimab-band--inset.vimab-band-left::before,
.vimab-band--inset.vimab-band-both::before { left: 30px; }

/* Pulse — bandet andas mellan opacitet 70% och 100% av sin grundopacitet */
.vimab-band--pulse::before,
.vimab-band--pulse::after {
	animation: vimab-band-pulse 4s ease-in-out infinite;
}

@keyframes vimab-band-pulse {
	0%, 100% { opacity: calc(var(--vimab-band-opacity) * var(--vimab-band-progress, 1)); }
	50%      { opacity: calc(var(--vimab-band-opacity) * var(--vimab-band-progress, 1) * 0.65); }
}

@media (prefers-reduced-motion: reduce) {
	.vimab-band--pulse::before,
	.vimab-band--pulse::after {
		animation: none;
	}
}


/* ============================================================
   PIL-DEKORATION (5-prick-pil från logo, variant 1 från brandbooken)
   Bas-klasser för hörn-placering eller centrerat. Återanvänder samma
   --vimab-band-color / --vimab-band-opacity som band-klasserna så
   modifier-klasserna funkar likadant.

   Storlek styrs av --vimab-pil-size eller modifier-klasserna
   vimab-pil--small/medium/large/xl.
   ============================================================ */

[class*="vimab-pil-"]:not([class*="vimab-pil--"]) {
	position: relative;
	overflow: hidden;
}

[class*="vimab-pil-"] {
	--vimab-pil-size: 200px;
	--vimab-pil-offset: 32px;
}

.vimab-pil-tr::after,
.vimab-pil-tl::after,
.vimab-pil-br::after,
.vimab-pil-bl::after,
.vimab-pil-center::after {
	content: '';
	position: absolute;
	display: block; /* skydd mot BB clearfix display:table */
	width: var(--vimab-pil-size);
	aspect-ratio: 140.54 / 94.55;
	background-color: var(--vimab-band-color);
	-webkit-mask-image: url(../assets/prickar-pil-mask.svg?v=146);
	mask-image: url(../assets/prickar-pil-mask.svg?v=146);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	opacity: calc(var(--vimab-band-opacity) * var(--vimab-band-progress, 1));
	pointer-events: none;
	z-index: 1;
	transition: opacity 200ms linear;
}

.vimab-pil-tr::after { top: var(--vimab-pil-offset); right: var(--vimab-pil-offset); }
.vimab-pil-tl::after { top: var(--vimab-pil-offset); left: var(--vimab-pil-offset); transform: scaleX(-1); }
.vimab-pil-br::after { bottom: var(--vimab-pil-offset); right: var(--vimab-pil-offset); transform: scaleY(-1); }
.vimab-pil-bl::after { bottom: var(--vimab-pil-offset); left: var(--vimab-pil-offset); transform: scale(-1, -1); }

.vimab-pil-center::after {
	top: 50%;
	left: 50%;
	width: clamp(200px, 50%, 600px);
	transform: translate(-50%, -50%);
	opacity: calc(var(--vimab-band-opacity, 0.15) * 0.5 * var(--vimab-band-progress, 1));
	z-index: 0;
}

/* Storleks-modifierare för pil — påverkar både hörn-pilen (--vimab-pil-size)
   och bakgrundsvarianten (--vimab-pil-bg-size). */
.vimab-pil--small  { --vimab-pil-size: 120px; --vimab-pil-bg-size: clamp(180px, 35%, 320px); }
.vimab-pil--medium { --vimab-pil-size: 200px; --vimab-pil-bg-size: clamp(260px, 55%, 600px); }
.vimab-pil--large  { --vimab-pil-size: 320px; --vimab-pil-bg-size: clamp(360px, 70%, 800px); }
.vimab-pil--xl     { --vimab-pil-size: 480px; --vimab-pil-bg-size: clamp(480px, 85%, 1000px); }

/* Pulse — pilen andas */
.vimab-pil--pulse::after {
	animation: vimab-pil-pulse 4s ease-in-out infinite;
}

@keyframes vimab-pil-pulse {
	0%, 100% { opacity: calc(var(--vimab-band-opacity) * var(--vimab-band-progress, 1)); }
	50%      { opacity: calc(var(--vimab-band-opacity) * var(--vimab-band-progress, 1) * 0.55); }
}

/* Mobil — skala ned till "glimt"-storlek och behåll placering */
@media (max-width: 900px) {
	[class*="vimab-pil-"] {
		--vimab-pil-size: 70px;
		--vimab-pil-offset: 12px;
	}
	.vimab-pil--small  { --vimab-pil-size: 50px;  --vimab-pil-bg-size: clamp(140px, 50%, 240px); }
	.vimab-pil--medium { --vimab-pil-size: 70px;  --vimab-pil-bg-size: clamp(180px, 65%, 320px); }
	.vimab-pil--large  { --vimab-pil-size: 100px; --vimab-pil-bg-size: clamp(220px, 80%, 380px); }
	.vimab-pil--xl     { --vimab-pil-size: 140px; --vimab-pil-bg-size: clamp(280px, 95%, 460px); }
	.vimab-pil-center::after {
		width: clamp(100px, 50%, 200px);
	}
}


/* ============================================================
   PIL BAKGRUNDSVARIANT — vimab-pil--bg
   Modifier-klass som flyttar pilen till övre högra hörnet av raden
   (med lite bleed över kanten) som en watermark bakom innehållet.
   Större och mer närvarande än hörn-glimten men fortfarande bakom
   text — opaciteten styrs direkt av vimab-band--subtle/--normal/
   --strong/--solid utan extra dämpning.

   Funkar både desktop och mobil.

   Exempel:
     vimab-pil-tr vimab-pil--bg vimab-band--yellow
     ↳ gul pil i övre högra hörnet bakom innehållet

     vimab-band-right vimab-pil--bg vimab-band--yellow vimab-band--strong
     ↳ samma men tydligare närvarande (80% opacitet)
   ============================================================ */

.vimab-pil--bg::after {
	top: -6%;
	right: -4%;
	left: auto;
	bottom: auto;
	width: var(--vimab-pil-bg-size, clamp(260px, 55%, 600px));
	transform: none;
	opacity: calc(var(--vimab-band-opacity, 0.5) * var(--vimab-band-progress, 1));
	z-index: 0;
	animation: vimab-pil-bg-drift 22s ease-in-out infinite;
}

/* Drift — translate + tilt så pilen "andas" och rör sig på sin plats.
   Tydligare räckvidd (~20 px / 2.5°) men fortfarande lugn cykel. */
@keyframes vimab-pil-bg-drift {
	0%, 100% {
		transform: translate(0, 0) rotate(0deg);
	}
	25% {
		transform: translate(-14px, 10px) rotate(-2deg);
	}
	50% {
		transform: translate(-18px, -8px) rotate(-2.5deg);
	}
	75% {
		transform: translate(10px, -12px) rotate(1.8deg);
	}
}

/* Kombineras med vimab-pil--pulse: opacity-pulse läggs ovanpå drift */
.vimab-pil--bg.vimab-pil--pulse::after {
	animation:
		vimab-pil-bg-drift 22s ease-in-out infinite,
		vimab-pil-pulse 4s ease-in-out infinite;
}

@media (max-width: 900px) {
	.vimab-pil--bg::after {
		top: -4%;
		right: -3%;
		left: auto;
		bottom: auto;
		width: var(--vimab-pil-bg-size, clamp(180px, 65%, 320px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.vimab-pil--bg::after,
	.vimab-pil--bg.vimab-pil--pulse::after {
		animation: none;
		transform: none;
	}
}


@media (prefers-reduced-motion: reduce) {
	.vimab-pil--pulse::after {
		animation: none;
	}
}


/* ============================================================
   Tillgänglighet: respektera prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.vmsw-track, .vmsw-bigcircle {
		transform: none !important;
		transition: none !important;
	}
	.vmsw {
		mask-image: none !important;
		-webkit-mask-image: none !important;
		opacity: 0.6;
	}
}