/*
Theme Name: Medarbetar-BOOST 2026
Theme URI: https://www.posh.se/hjartat/
Author: Farre
Description: Skraddarsytt WordPress-tema for Apotek Hjartats interna kampanj "Medarbetar-BOOST 2026".
Version: 0.7
*/

/*
Version 0.6: allt justerat mot skisser-plattform-08 (uppmatt,
omraknat till 1440 px bredd):
  - Menyn: morkgrona lankar, storre text, storre avstand, mindre logotyp.
  - Knappar: 166 x 45 px, storre text.
  - Login: vansterstallt och hogre upp, smalare inputfalt.
  - Kortet (Lagnamn m.fl.): storre rubrik och brodtext.
Version 0.7: nytt avsnitt 10, film med play-knapp (Valkommen m.fl.).
*/


/* ==========================================================
   1. TYPSNITT (@font-face)
   ========================================================== */

/* ICA Rubrik Bold: rubriker, knappar och meny */
@font-face {
	font-family: 'ICA Rubrik';
	src: url('fonts/ICARubrik-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ICA Text Ny Regular: vanlig brodtext */
@font-face {
	font-family: 'ICA Text Ny';
	src: url('fonts/ICATextNy-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ICA Text Ny Bold: fetstil (<strong>) i texter fran WordPress */
@font-face {
	font-family: 'ICA Text Ny';
	src: url('fonts/ICATextNy-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}


/* ==========================================================
   2. FÄRGER OCH MÅTT (CSS-variabler)
   ========================================================== */
:root {
	--farg-morkgron-text: #175d30;
	--farg-ljusgron-knapp: #9fca9e;
	--farg-ljusgron-bakgrund: #e9f3e4;
		--farg-ljusgron-svarsruta: #eff7ee; /* Uppmatt i skissen, sida 6 */
	--farg-ljusgron-ruta: #d7ead5; /* Inputfalt och ljus ruta i kortet */
	--farg-rosa-accent: #ef7e7b;

	--bredd-container: 1440px;
	--bredd-innehall: 1280px;
}


/* ==========================================================
   3. GRUNDSTILAR
   ========================================================== */
html {
	box-sizing: border-box;
}
*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	margin: 0;
	background-color: var(--farg-ljusgron-bakgrund);
	color: var(--farg-morkgron-text);
	font-family: 'ICA Text Ny', sans-serif;
}

h1,
h2,
h3 {
	font-family: 'ICA Rubrik', sans-serif;
	font-weight: 700;
}


/* ==========================================================
   4. CONTAINER-KLASSER
   ========================================================== */
.container {
	max-width: var(--bredd-container);
	margin-inline: auto;
	min-height: 100vh;

	/* Bakgrundsbilden sjalv satts per sida med "style=" i header.php
	   (via PHP-variabeln $sidbakgrund). Har satter vi bara HUR den
	   visas: hela bredden, naturlig proportion, ingen upprepning,
	   borja fran toppen. */
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% auto;
}

.innehall {
	max-width: var(--bredd-innehall);
	margin-inline: auto;
}


/* ==========================================================
   5. HEADER / MENY
   ==========================================================
   Skissen: menyn ar 1280 px bred, 60 px hog, 80 px fran toppen.
*/
.site-header {
	max-width: var(--bredd-innehall);
	margin-inline: auto;
	padding: 80px 0 24px;
}

.meny {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;

	background-color: #ffffff;
	border-radius: 999px;
	min-height: 60px;
	padding: 0 36px;
}

.meny-vanster,
.meny-hoger {
	display: flex;
	align-items: center;
	gap: 36px;
}

.meny-projektnamn,
.meny-lank,
.meny-leaderboard {
	font-family: 'ICA Rubrik', sans-serif;
	font-weight: 700;
	font-size: 1.3125rem; /* 21 px */
	white-space: nowrap;
	text-decoration: none;
}

.meny-projektnamn,
.meny-avdelare,
.meny-lank {
	color: var(--farg-morkgron-text);
}

.meny-avdelare {
	font-size: 1.3125rem;
}

.meny-lank.aktiv,
.meny-leaderboard {
	color: var(--farg-rosa-accent);
}

.meny-logotyp {
	height: 24px;
	width: auto;
}


/* ==========================================================
   6. KNAPPAR
   ==========================================================
   En delad knappstil for hela sajten ("Logga in", "Skicka in",
   "Borja nu", "Ga vidare" osv.). Skissen: 166 x 45 px.
   Fungerar bade pa <button> och <a class="knapp">.
*/
.knapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 166px;
	height: 45px;
	padding: 0 32px;
	font-family: 'ICA Rubrik', sans-serif;
	font-weight: 700;
	font-size: 1.25rem; /* 20 px */
	color: var(--farg-morkgron-text);
	background-color: var(--farg-ljusgron-knapp);
	border: none;
	border-radius: 999px;
	cursor: pointer;
	text-decoration: none;
}


/* ==========================================================
   7. LOGIN-SIDAN
   ==========================================================
   Skissen: innehallet ar vansterstallt i linje med menyns text
   (36 px in), och "Lite mer..." borjar ca 240 px fran toppen.

   OBS: "Lite mer... BOOST fran (hjarta)" ar tillfallig text.
   Byts mot en SVG-bild (vit version) fran Farre.
*/
.login-innehall {
	padding: 64px 36px 120px;
}

.login-rad {
	color: #ffffff;
	font-family: 'ICA Rubrik', sans-serif;
	font-weight: 700;
	font-size: 2rem;
	margin: 0;
}

.login-boost {
	color: #ffffff;
	font-family: 'Permanent Marker', cursive; /* Tillfallig, se ovan */
	font-size: 4.5rem;
	line-height: 1;
	margin: 0 0 0 32px;
}

.login-fran {
	margin-bottom: 64px;
}

.login-form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

.login-input {
	width: 282px;
	height: 45px;
	padding: 0 24px;
	font-family: 'ICA Text Ny', sans-serif;
	font-size: 1rem;
	border: none;
	border-radius: 999px;
	background-color: #ffffff;
	color: var(--farg-morkgron-text);
}


/* ==========================================================
   8. KORTET (gemensamt)
   ==========================================================
   Vitt kort med text till vanster och en 16:9-ruta till hoger.
   Anvands pa Lagnamn, Valkommen och kapitelsidorna.
*/

/* Avstand fran menyn ner till kortet (38 px i skissen) */
.kort-sida {
	padding-top: 14px;
	padding-bottom: 60px;
}

.kort {
	display: grid;
	grid-template-columns: 380px 1fr;
	column-gap: 88px;
	align-items: start;
	background-color: #ffffff;
	border-radius: 36px;
	padding: 45px 42px 45px 36px;
}

.kort-vanster {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.kort-rubrik {
	color: var(--farg-morkgron-text);
	font-size: 2rem; /* 32 px */
	line-height: 1.1;
	margin: 0 0 24px 0;
}

.kort-brodtext {
	color: var(--farg-morkgron-text);
	font-family: 'ICA Text Ny', sans-serif;
	font-size: 1.125rem; /* 18 px */
	line-height: 1.25;
	margin: 0 0 48px 0;
}

/* Hogerrutan: 16:9, raka horn */
.kort-hoger {
	aspect-ratio: 16 / 9;
	background-color: var(--farg-ljusgron-ruta);
	overflow: hidden;
}

/* Smala skarmar: spalterna hamnar under varandra */
@media (max-width: 1000px) {
	.kort {
		grid-template-columns: 1fr;
		row-gap: 36px;
		padding: 36px;
	}
}


/* ==========================================================
   9. LAGNAMN-SIDAN
   ========================================================== */
.lagnamn-form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.lagnamn-input {
	width: 282px;
	height: 45px;
	border: none;
	border-radius: 999px;
	padding: 0 24px;
	font-family: 'ICA Text Ny', sans-serif;
	font-size: 1rem;
	background-color: var(--farg-ljusgron-ruta);
	color: var(--farg-morkgron-text);
}

/* Dekorgrafiken i hogerrutan. Tillfallig text, byts mot en
   SVG-bild (morkgron version) fran Farre. */
.lagnamn-dekor {
	display: flex;
	align-items: center;
	justify-content: center;
}

.lagnamn-dekor-block p {
	margin: 0;
	color: var(--farg-morkgron-text);
}

.lagnamn-dekor-rad {
	font-family: 'ICA Rubrik', sans-serif;
	font-weight: 700;
	font-size: 2rem;
	line-height: 1;
}

.lagnamn-dekor-block .lagnamn-dekor-boost {
	font-family: 'Permanent Marker', cursive;
	font-size: 5rem;
	line-height: 1;
	margin-left: 53px;
	transform: rotate(-6deg);
}

.lagnamn-dekor-block .lagnamn-dekor-fran {
	margin-left: 220px;
}

.lagnamn-dekor-hjarta {
	font-size: 3rem;
	vertical-align: middle;
}


/* ==========================================================
   10. FILM I KORTET (Valkommen och kapitelsidorna)
   ==========================================================
   Skissen: play-knappen ar en vit ring med en triangel,
   ca 150 px stor, mitt i bilden.
*/

/* Texten fran WordPress kommer som ett eller flera <p> */
.kort-brodtext p {
	margin: 0 0 1em 0;
}

.kort-brodtext p:last-child {
	margin-bottom: 0;
}

/* Rutan ar referenspunkt for knappen som ligger ovanpa */
.film {
	position: relative;
}

/* Filmen fyller hela 16:9-rutan */
.film-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.film-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 150px;
	height: 150px;
	padding: 0;
	border: none;
	background: none;
	color: rgba(255, 255, 255, 0.85);
	cursor: pointer;
}

.film-play svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Dold medan filmen spelas (satts av JavaScript i sidmallen) */
.film-play[hidden] {
	display: none;
}



/* ==========================================================
   11. QUIZ "SANT ELLER MYT" (uppdrag 1.1)
   ==========================================================
   Samma vita kort, men med tre spalter:
   text (380 px) | kortleken (341 px) | fragan (resten).
   Matt fran skissen, sida 5.
*/

/* Ljusrosa bakgrund till Myt-knappen (uppmatt i skissen) */
:root {
	--farg-rosa-ljus: #fbd6cb;
}

/* Fem spalter i rutnatet: text | luft | kortlek | luft | fraga.
   Luftspalterna ar tomma, de ger exakt avstand enligt skissen. */
.kort-quiz {
	grid-template-columns: 400px 68px 341px 65px 285px;
	column-gap: 0;
}

.kort-quiz .kort-vanster {
	grid-column: 1;
}

.kort-quiz .quiz-kortlek {
	grid-column: 3;
}

.kort-quiz .quiz-fraga {
	grid-column: 5;
}


/* Timern ovanfor rubriken, stor och rosa */
.timer {
	font-family: 'ICA Rubrik', sans-serif;
	font-weight: 700;
	font-size: 3.25rem; /* 52 px */
	line-height: 1;
	color: var(--farg-rosa-accent);
	margin: 0 0 12px 0;
}

/* Det grona kortet. Skuggorna ritar kanterna till vanster och
   nedtill, sa att det ser ut som en kortlek. */
.quiz-kortlek {
	height: 449px;
	background-color: var(--farg-ljusgron-ruta);
	border-radius: 10px;
	box-shadow:
		-4px 4px 0 #ffffff,
		-10px 10px 0 #00451d;
}

/* Hoger spalt: raknare och pastaende */
.quiz-text {
	margin: 0;
	font-family: 'ICA Text Ny', sans-serif;
	font-size: 1.125rem; /* 18 px */
	line-height: 1.25;
	color: var(--farg-morkgron-text);
}

/* Sant/Myt-knapparna under varandra */
.quiz-svar {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 40px;
}

.quiz-val {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 146px;
	height: 40px;
	padding: 0 3px;
	border-radius: 999px;
	font-family: 'ICA Rubrik', sans-serif;
	font-weight: 700;
	font-size: 1.25rem; /* 20 px */
	cursor: pointer;
}

.quiz-val-sant {
	background-color: var(--farg-ljusgron-knapp);
	color: var(--farg-morkgron-text);
}

.quiz-val-myt {
	background-color: var(--farg-rosa-ljus);
	color: var(--farg-rosa-accent);
}

/* Den riktiga radioknappen gors osynlig men finns kvar,
   sa att den fortfarande fungerar med tangentbord och skarmlasare. */
.quiz-val input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* Den vita cirkeln */
.quiz-cirkel {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: #ffffff;
}

/* Pricken i cirkeln syns bara pa det valda svaret.
   Den far samma farg som texten (gron for Sant, rosa for Myt). */
.quiz-val input:checked + .quiz-cirkel::after {
	content: '';
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background-color: currentColor;
}


/* ==========================================================
   12. RANGORDNING "FRAMTIDENS KUND" (uppdrag 2.1)
   ==========================================================
   Samma vita kort, tre spalter:
   text (400) | luft | platserna 1-3 (353) | luft | korten (321).
   Kortens och platsernas storlek (321 x 92 px) ar tagen fran
   Farres material "Pastaenden framtid".
*/

/* Rosa bakgrund till korten for aldre kunder (fran materialet) */
:root {
	--farg-rosa-kort: #f5caba;
}

.kort-rangordna {
	grid-template-columns: 400px 68px 353px 53px 321px;
	column-gap: 0;
}

.kort-rangordna .kort-vanster {
	grid-column: 1;
}

.kort-rangordna .rangordna-platser {
	grid-column: 3;
}

.kort-rangordna .rangordna-kortlista {
	grid-column: 5;
}

/* Rubriken "Yngre kunder (25-35 ar)" ovanfor platserna */
.rangordna-grupp {
	margin: 0 0 12px 32px;
	font-size: 1.3125rem; /* 21 px */
	line-height: 1;
	color: var(--farg-morkgron-text);
}

/* Listorna far ingen egen punkt eller indrag */
.rangordna-lista,
.rangordna-kortlista {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 13px;
}

/* Hogerspalten borjar i hojd med den forsta platsen */
.rangordna-kortlista {
	padding-top: 33px;
}

/* En rad = siffran till vanster + den streckade platsen */
.rangordna-rad {
	display: flex;
	align-items: center;
}

.rangordna-nummer {
	width: 32px;
	font-family: 'ICA Rubrik', sans-serif;
	font-weight: 700;
	font-size: 1.3125rem; /* 21 px */
	color: var(--farg-morkgron-text);
}

/* Den streckade platsen. Strecken ritas med en liten SVG-bild,
   eftersom CSS egna streckade kanter far for korta streck. */
.rangordna-plats {
	width: 321px;
	height: 92px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='321' height='92'%3E%3Crect x='0.5' y='0.5' width='320' height='91' rx='21' fill='none' stroke='%23175d30' stroke-dasharray='12 12'/%3E%3C/svg%3E");
}

/* Ett pastaendekort */
.rangordna-kort {
	width: 321px;
	height: 92px;
	padding: 14px;
	border-radius: 21px;
	font-family: 'ICA Text Ny', sans-serif;
	font-size: 0.84375rem; /* 13,5 px */
	line-height: 17px;
	color: var(--farg-morkgron-text);
}

.rangordna-kort-yngre {
	background-color: var(--farg-ljusgron-knapp);
}

.rangordna-kort-aldre {
	background-color: var(--farg-rosa-kort);
}


/* Rubriken ska sta pa en rad, som i skissen */
.kort-rangordna .kort-rubrik {
	white-space: nowrap;
}



/* ==========================================================
   13. TEXTSVAR (uppdrag 1.2, 2.2 och 3.2)
   ==========================================================
   Samma vita kort: text (400) | luft (68) | textrutan (resten).
   Matt fran skissen, sida 6.
*/
.kort-textsvar {
	grid-template-columns: 400px 68px 1fr;
	column-gap: 0;
}

.kort-textsvar .kort-vanster {
	grid-column: 1;
}

.kort-textsvar .textsvar {
	grid-column: 3;
}

/* Knappen under textrutan */
.textsvar {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 28px;
}

/* Den stora ljusgrona textrutan */
.textsvar-ruta {
	width: 100%;
	height: 339px;
	padding: 28px 30px;
	border: none;
	border-radius: 36px;
	resize: none; /* laget kan inte dra rutan storre */
	background-color: var(--farg-ljusgron-svarsruta);
	font-family: 'ICA Text Ny', sans-serif;
	font-size: 1.125rem; /* 18 px */
	line-height: 1.25;
	color: var(--farg-morkgron-text);
}

/* Platshallartexten far samma farg som i skissen */
.textsvar-ruta::placeholder {
	color: var(--farg-morkgron-text);
	opacity: 1;
}

/* Tydlig markering nar man klickat i rutan */
.textsvar-ruta:focus {
	outline: 2px solid var(--farg-ljusgron-knapp);
}



/* ==========================================================
   16. DRA-OCH-SLAPP (uppdrag 2.1)
   ========================================================== */

/* Korten gar att ta tag i. "touch-action: none" gor att sidan inte
   scrollar nar man drar med fingret pa en surfplatta. */
.rangordna-kort {
	cursor: grab;
	touch-action: none;
	user-select: none;
}

/* Kortet pa sin ursprungliga plats blir svagt medan man drar det */
.rangordna-dras {
	opacity: 0.3;
}

/* Kopian som foljer musen. "pointer-events: none" gor den osynlig
   for musen, sa att sidan ser vad som ligger under. */
.rangordna-svavar {
	position: fixed;
	z-index: 1000;
	pointer-events: none;
	cursor: grabbing;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}



/* ==========================================================
   17. PUSSEL (uppdrag 3.1)
   ==========================================================
   Samma vita kort: text (400) | luft (68) | pusselytan (resten).
   Bitarnas farg ar samma ljusrosa som Myt-knappen (#fbd6cb),
   uppmatt i Farres bilder.
*/
.kort-pussel {
	grid-template-columns: 400px 68px 1fr;
	column-gap: 0;
}

.kort-pussel .kort-vanster {
	grid-column: 1;
}

.kort-pussel .pussel-yta {
	grid-column: 3;
	display: block;
	width: 100%;
	height: auto;
	touch-action: none; /* sidan scrollar inte nar man drar med fingret */
	user-select: none;
}

/* Den tomma kvadraten */
.pussel-ram {
	fill: #ffffff;
	stroke: var(--farg-morkgron-text);
	stroke-width: 3;
}

/* En pusselbit */
.pussel-bit polygon {
	fill: var(--farg-rosa-ljus);
	stroke: #e8b4a6;
	stroke-width: 3;
	stroke-linejoin: round;
	cursor: grab;
}

/* Den runda pilen pa biten */
.pussel-pil {
	cursor: pointer;
}

.pussel-pil path {
	fill: none;
	stroke: #000000;
	stroke-width: 8;
}

.pussel-pil polygon {
	fill: #000000;
	stroke: none;
	cursor: pointer;
}

/* Text nar pusslet ar klart eller tiden ar slut */
.pussel-status {
	margin: 0 0 24px 0;
	font-family: 'ICA Rubrik', sans-serif;
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--farg-rosa-accent);
}



/* ==========================================================
   18. BILDER I QUIZET (uppdrag 1.1)
   ==========================================================
   Bilderna har kortlekens kanter inbyggda till vanster och nedtill.
   De ligger i samma spalt som det gamla CSS-kortet, men flyttas
   12 px at vanster sa att sjalva bilden hamnar dar kortet lag.
*/
.kort-quiz .quiz-bild {
	grid-column: 3;
	display: block;
	width: 360px;
	height: auto;
	margin-left: -12px;
}



/* ==========================================================
   19. FELMEDDELANDEN (Login och Lagnamn)
   ========================================================== */
.login-fel,
.lagnamn-fel {
	margin: 0 0 12px 0;
	font-family: 'ICA Rubrik', sans-serif;
	font-weight: 700;
	font-size: 1rem;
}

/* Login: vit text mot bakgrundsbilden */
.login-fel {
	color: #ffffff;
}

/* Lagnamn: rosa text i det vita kortet */
.lagnamn-fel {
	color: var(--farg-rosa-accent);
}


/* ==========================================================
   20. BOOST-BILDERNA (Login och Lagnamn)
   ========================================================== */
.login-bild {
	display: block;
	width: 369px;
	height: auto;
	margin-bottom: 48px;
}


.lagnamn-bild {
	display: block;
	width: 369px;
	height: auto;
}


/* ==========================================================
   21. RATT ELLER FEL I QUIZET (uppdrag 1.1)
   ==========================================================
   Bilden ligger nu i en ruta (.quiz-kortyta), och resultatet
   visas ovanpa bilden i en sekund efter varje svar.
*/
.kort-quiz .quiz-kortyta {
	grid-column: 3;
	position: relative;
	width: 360px;
	margin-left: -12px;
}

/* Bilden fyller rutan (flytten at vanster gors nu av rutan) */
.kort-quiz .quiz-kortyta .quiz-bild {
	width: 100%;
	margin-left: 0;
}

/* Resultatet tacker sjalva kortet, men inte kortlekens kanter */
.quiz-resultat {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 12px;
	left: 12px;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #ffffff;
}

.quiz-resultat-ratt {
	background-color: rgba(23, 93, 48, 0.9);    /* morkgron */
}

.quiz-resultat-fel {
	background-color: rgba(239, 126, 123, 0.95); /* rosa */
}

.quiz-resultat p {
	margin: 0;
}

.quiz-resultat-rubrik {
	font-family: 'ICA Rubrik', sans-serif;
	font-weight: 700;
	font-size: 4rem;
	line-height: 1;
}

.quiz-resultat-text {
	margin-top: 12px !important;
	font-family: 'ICA Rubrik', sans-serif;
	font-weight: 700;
	font-size: 1.5rem;
}