/* =====================================================
   ARV FRÅN DET GAMLA TEMAT
   =====================================================

   Sidorna på sjrental.se är byggda med vanliga Gutenberg-block, men FÄRGERNA
   valdes ur Blocksys palett. Det syns i markupen som klasser i stil med
   `has-palette-color-7-color` och variabler som `--theme-palette-color-7`.

   När Blocksy slutar vara aktivt tema försvinner reglerna bakom de klasserna,
   och varje sådan text faller tillbaka på brödtextens färg. Konkret: hjältetexten
   på startsidan var nästan vit mot ett foto och blev plötsligt mörkgrå mot samma
   foto - oläslig, utan att någon rört innehållet.

   Alternativet vore att gå igenom varje sida och välja om färgerna för hand.
   Den här filen gör det onödigt: den definierar samma variabler och klasser med
   Blocksys FÖRVALDA värden (temat körde aldrig en egen palett - kontrollerat i
   theme_mods, där colorPalette saknas helt, och värdena är hämtade ur
   blocksy/inc/classes/colors.php).

   DEN HÄR FILEN ÄR TÄNKT ATT KRYMPA. Allt eftersom sidorna görs om till temats
   egna färger kan raderna tas bort. Den är en brygga, inte ett designsystem -
   det ligger i main.css.
   ===================================================== */

:root {
	--theme-palette-color-1: #2872fa;
	--theme-palette-color-2: #1559ed;
	--theme-palette-color-3: #3a4f66;
	--theme-palette-color-4: #192a3d;
	--theme-palette-color-5: #e1e8ed;
	--theme-palette-color-6: #f2f5f7;
	--theme-palette-color-7: #fafbfc;
	--theme-palette-color-8: #ffffff;

	/* Blocksy exponerar dessutom några härledda namn som blocken kan peka på. */
	--theme-text-color: var(--theme-palette-color-3);
	--theme-headings-color: var(--theme-palette-color-4);
	--theme-link-initial-color: var(--theme-palette-color-1);
	--theme-link-hover-color: var(--theme-palette-color-2);
	--theme-border-color: var(--theme-palette-color-5);
	--theme-content-spacing: 1.5em;
}

/* Textfärg och bakgrund ur paletten. */
.has-palette-color-1-color { color: var(--theme-palette-color-1); }
.has-palette-color-2-color { color: var(--theme-palette-color-2); }
.has-palette-color-3-color { color: var(--theme-palette-color-3); }
.has-palette-color-4-color { color: var(--theme-palette-color-4); }
.has-palette-color-5-color { color: var(--theme-palette-color-5); }
.has-palette-color-6-color { color: var(--theme-palette-color-6); }
.has-palette-color-7-color { color: var(--theme-palette-color-7); }
.has-palette-color-8-color { color: var(--theme-palette-color-8); }

.has-palette-color-1-background-color { background-color: var(--theme-palette-color-1); }
.has-palette-color-2-background-color { background-color: var(--theme-palette-color-2); }
.has-palette-color-3-background-color { background-color: var(--theme-palette-color-3); }
.has-palette-color-4-background-color { background-color: var(--theme-palette-color-4); }
.has-palette-color-5-background-color { background-color: var(--theme-palette-color-5); }
.has-palette-color-6-background-color { background-color: var(--theme-palette-color-6); }
.has-palette-color-7-background-color { background-color: var(--theme-palette-color-7); }
.has-palette-color-8-background-color { background-color: var(--theme-palette-color-8); }

/* Blocksy definierade även rena svart/vitt som egna slugs. */
.has-white-color { color: #ffffff; }
.has-white-background-color { background-color: #ffffff; }
.has-black-color { color: #000000; }
.has-black-background-color { background-color: #000000; }

/* Innehållsklasser som sidorna använder och som låg i det gamla barntemat.
   Bevarade med samma värden, inte omtolkade. */
.text-balance {
	text-wrap: balance;
}

.hero-header {
	font-family: var(--sj-font-rubrik);
	letter-spacing: 0.02em;
}

.head-banner,
.head-banner--account {
	background-color: var(--sj-yta-banner);
	padding-block: 150px 70px;
	text-align: center;
}

/* Startsidans hjältebild låg bakom en egen klass i det gamla temat. Utan höjd
   kollapsade den till bildens egen proportion och texten hamnade utanför. */
.heroload.wp-block-cover {
	min-height: clamp(360px, 46vw, 560px);
}

/* Ikonerna i kortraden på startsidan är svarta SVG:er från svgrepo, valda när
   sidan hade ljus bakgrund. Mot temats mörka kort blev de nästan osynliga -
   tre svarta silhuetter på #222a35.

   `brightness(0)` plattar först ut allt till svart oavsett källfärg, `invert(1)`
   vänder det till rent vitt. Det fungerar därför lika bra om någon byter ut en
   ikon mot en färgad, utan att filen behöver röras.

   Avgränsat till SVG inuti kolumner med flit: fotografier på sidan är .jpg och
   .png, så regeln kan inte träffa dem. En färgad SVG som INTE är en ikon skulle
   plattas till vit - finns en sådan får den en egen klass som undantag. */
.wp-block-column img[src$=".svg"] {
	filter: brightness(0) invert(1);
}