/*
Theme Name: Karate på Näset
Theme URI: https://www.karatepanaset.se/
Author: Näsets IT
Author URI: https://nasetsit.nu/
Description: Tema för Kyokushin karate på Näset. Informationssida med schema, gradsystem, privatlektioner och intresseanmälan.
Version: 1.2.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: karatepanaset
Tags: karate, kampsport, klubb, foerening
*/

/* =========================================================================
   Designbeslut
   -------------------------------------------------------------------------
   Palett hämtad ur dojons egna material, inte ur en färgpsykologimall:

     gi      oblekt bomull, färgen på en ny dräkt innan den tvättats
     sumi    bläcksvart med en dragning åt blått, inte ren #000
     lack    japanskt lackrött, dovare än signalrött
     tra     golvet
     obi     bältesfärgerna. De är funktionella, inte dekorativa – de
             används bara i gradsystemet där de betyder något.

   Typografi:
     display  Archivo Black, tung och blockig utan att bli affischklichéer
     brod     IBM Plex Sans, aning kantig, bra svensk teckenuppsättning
     data     IBM Plex Mono, för tider och grader där siffror ska ligga i
              kolumn och läsas exakt

   Typsnitten självhostas i assets/fonts/. Tills filerna ligger där faller
   allt tillbaka på systemets egna, och sidan ser fortfarande vettig ut.
   ========================================================================= */

@font-face {
	font-family: 'Archivo Black';
	src: url('assets/fonts/archivo-black.woff2') format('woff2');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'IBM Plex Sans';
	src: url('assets/fonts/ibm-plex-sans-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'IBM Plex Sans';
	src: url('assets/fonts/ibm-plex-sans-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'IBM Plex Mono';
	src: url('assets/fonts/ibm-plex-mono-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

:root {
	--gi: #e8e3d7;
	--gi-ljus: #f2eee5;
	--sumi: #17181c;
	--sumi-mjuk: #3a3b41;
	--sumi-dampad: #6e6f76;
	--lack: #8e1d22;
	--lack-ljus: #b4292f;
	--tra: #8a6a45;
	--linje: rgba(23, 24, 28, 0.14);
	--linje-ljus: rgba(242, 238, 229, 0.18);

	/* Bältesfärger. Används enbart i gradsystemet. */
	--obi-vit: #f2eee5;
	--obi-orange: #e07b26;
	--obi-bla: #2c5aa0;
	--obi-gul: #e0b62a;
	--obi-gron: #2e7d4f;
	--obi-brun: #6b4a2f;
	--obi-svart: #17181c;

	--font-display: 'Archivo Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--font-brod: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-data: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

	--matt: min(6vw, 4rem);
	--spalt: min(90rem, 100%);
	--text-bredd: 38rem;
	--rytm: clamp(3.5rem, 8vw, 7rem);
}

/* =========================================================================
   Grund
   ========================================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: var(--gi);
	color: var(--sumi);
	font-family: var(--font-brod);
	font-size: clamp(1rem, 0.97rem + 0.15vw, 1.125rem);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover {
	color: var(--lack);
}

:focus-visible {
	outline: 3px solid var(--lack);
	outline-offset: 3px;
}

h1,
h2,
h3 {
	font-family: var(--font-display);
	font-weight: 900;
	line-height: 1.02;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	margin: 0 0 0.6em;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.6rem, 7vw, 5.5rem);
}

h2 {
	font-size: clamp(1.9rem, 4.2vw, 3.2rem);
}

h3 {
	font-size: clamp(1.15rem, 1.8vw, 1.4rem);
	letter-spacing: 0;
}

p {
	margin: 0 0 1.2em;
	max-width: var(--text-bredd);
}

/*
 * Ankarmål ska inte hamna under det klistrade sidhuvudet.
 * Utan detta landar varje hopp från en #-länk med rubriken dold.
 */
:target,
[id] {
	scroll-margin-top: 5.5rem;
}

/* Hoppa till innehåll */

.hoppa-till {
	position: absolute;
	left: -9999px;
	z-index: 100;
	padding: 1rem 1.5rem;
	background: var(--sumi);
	color: var(--gi-ljus);
	font-family: var(--font-data);
}

.hoppa-till:focus {
	left: 1rem;
	top: 1rem;
}

/* =========================================================================
   Struktur
   ========================================================================= */

.omslag {
	width: var(--spalt);
	margin-inline: auto;
	padding-inline: var(--matt);
}

.omslag--smal {
	max-width: 60rem;
}

.sektion {
	padding-block: var(--rytm);
}

.sektion--mork {
	background: var(--sumi);
	color: var(--gi-ljus);
}

.sektion--ljus {
	background: var(--gi-ljus);
}

/* Etikett ovanför rubriker. Berättar vad avsnittet handlar om,
   inte vilken ordning det kommer i. */

.etikett {
	display: block;
	margin-bottom: 1.1rem;
	font-family: var(--font-data);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lack);
}

.sektion--mork .etikett {
	color: var(--obi-orange);
}

.ingress {
	font-size: clamp(1.15rem, 1.8vw, 1.4rem);
	line-height: 1.5;
	max-width: 34rem;
}

/* =========================================================================
   Sidhuvud
   ========================================================================= */

.sidhuvud {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--sumi);
	color: var(--gi-ljus);
	border-bottom: 1px solid var(--linje-ljus);
}

.sidhuvud__inre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	min-height: 4.5rem;
}

.ordmarke {
	order: 1;
}

.huvudnavigering {
	order: 2;
	margin-left: auto;
}

.ordmarke {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	font-family: var(--font-display);
	font-size: 1.0625rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
}

.ordmarke__ort {
	font-family: var(--font-data);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	color: var(--obi-orange);
}

.ordmarke:hover {
	color: inherit;
}

.meny {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2.2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.meny a {
	font-family: var(--font-data);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	padding-block: 0.5rem;
	border-bottom: 2px solid transparent;
}

.meny a:hover,
.meny .current-menu-item > a {
	color: var(--gi-ljus);
	border-bottom-color: var(--lack-ljus);
}

/* Galleriknapp i sidhuvudet */

.sidhuvud__knapp {
	flex: 0 0 auto;
	order: 3;
	padding: 0.5rem 1.1rem;
	border: 1px solid var(--linje-ljus);
	color: var(--gi-ljus);
	font-family: var(--font-data);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 140ms ease, border-color 140ms ease;
}

.sidhuvud__knapp:hover {
	background: var(--lack);
	border-color: var(--lack);
	color: var(--gi-ljus);
}

.meny-knapp {
	display: none;
	background: none;
	border: 1px solid var(--linje-ljus);
	color: inherit;
	font-family: var(--font-data);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.55rem 1rem;
	cursor: pointer;
}

@media (max-width: 56rem) {
	.sidhuvud__inre {
		flex-wrap: wrap;
		gap: 1rem;
	}

	.meny-knapp {
		flex: 0 0 auto;
		order: 4;
		padding: 0.55rem 1rem;
	}

	/*
	 * Knappen visas bara när skriptet tagit bort hidden. Utan JS finns
	 * ingen knapp — och därmed ingen knapp som inte gör något.
	 */
	.meny-knapp:not( [hidden] ) {
		display: block;
	}

	.sidhuvud__knapp {
		padding: 0.5rem 0.85rem;
		font-size: 0.75rem;
		letter-spacing: 0.06em;
	}

	/*
	 * Grundläge, utan JavaScript: menyn ligger synlig i en egen rad
	 * under ordmärket. Sidan är fullt navigerbar även om skriptet
	 * aldrig körs.
	 */
	.huvudnavigering {
		order: 5;
		flex: 1 0 100%;
		margin-left: 0;
	}

	.meny {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-bottom: 0.5rem;
	}

	.meny a {
		display: block;
		padding-block: 0.85rem;
		border-bottom: 1px solid var(--linje-ljus);
	}

	/*
	 * Med JavaScript: menyn lyfts ur flödet och fälls ihop bakom
	 * knappen.
	 */
	html[data-kpt-js] .huvudnavigering {
		flex: 0 0 auto;
	}

	html[data-kpt-js] .meny {
		position: absolute;
		inset: 100% 0 auto;
		padding: 0.5rem var(--matt) 1.5rem;
		background: var(--sumi);
		border-bottom: 1px solid var(--linje-ljus);
	}

	html[data-kpt-js] .meny[data-oppen='false'] {
		display: none;
	}
}

/* =========================================================================
   Hero
   -------------------------------------------------------------------------
   Det första en besökare undrar är inte vad karate är, utan när det är.
   Därför är schemat hjälten på sidan, inte en bild. När fotona kommer
   lägger de sig bakom det här blocket, inte i stället för det.
   ========================================================================= */

.hero {
	position: relative;
	background: var(--sumi);
	color: var(--gi-ljus);
	overflow: hidden;
}

.hero__bakgrund {
	position: absolute;
	inset: 0;
}

/*
 * Skärm mellan bild och text.
 *
 * En jämn opacitet på bilden räcker inte: en vit gi bakom ljus text ger
 * omätbart dålig kontrast oavsett hur mycket hela bilden dämpas. Skärmen
 * mörkar därför mest där texten faktiskt ligger — vänsterkanten där
 * rubriken står och högersidan där schemat står — och släpper fram
 * bilden i mitten.
 */
.hero__bakgrund::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			100deg,
			rgba(23, 24, 28, 0.93) 0%,
			rgba(23, 24, 28, 0.88) 26%,
			rgba(23, 24, 28, 0.54) 40%,
			rgba(23, 24, 28, 0.54) 55%,
			rgba(23, 24, 28, 0.90) 63%,
			rgba(23, 24, 28, 0.93) 100%
		),
		linear-gradient(
			to bottom,
			rgba(23, 24, 28, 0.33),
			rgba(23, 24, 28, 0.43) 55%,
			rgba(23, 24, 28, 0.73)
		);
}

.hero__bakgrund img,
.hero__bakgrund svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__inre {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: start;
	padding-block: clamp(4rem, 11vw, 8.5rem);
}

@media (max-width: 60rem) {
	.hero__inre {
		grid-template-columns: 1fr;
	}
}

.hero__rubrik {
	margin-bottom: 1.4rem;
}

.hero__rubrik em {
	display: block;
	font-style: normal;
	color: var(--lack-ljus);
}

.hero__ingress {
	color: rgba(242, 238, 229, 0.82);
}

.hero__knappar {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 2rem;
}

/* Schemat i heron */

.schema {
	border-top: 2px solid var(--gi-ljus);
	padding-top: 1.25rem;
}

.schema__rubrik {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
	font-family: var(--font-data);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.schema__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.schema__rad {
	display: grid;
	grid-template-columns: 7rem 1fr;
	gap: 0.35rem 1.25rem;
	padding-block: 0.95rem;
	border-bottom: 1px solid var(--linje-ljus);
}

.schema__dag {
	font-family: var(--font-data);
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--obi-orange);
	align-self: center;
}

.schema__tid {
	font-family: var(--font-data);
	font-size: 1.25rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

.schema__grupp {
	grid-column: 2;
	font-size: 0.9375rem;
	color: rgba(242, 238, 229, 0.7);
	margin: 0;
}

.schema__fot {
	margin: 1.25rem 0 0;
	font-size: 0.875rem;
	color: rgba(242, 238, 229, 0.7);
}

/* Statusrutan, när inga tider finns att visa */

.status__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.status__rad {
	position: relative;
	padding: 0 0 1.1rem 1.75rem;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: rgba(242, 238, 229, 0.86);
}

.status__rad::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 0.6rem;
	height: 2px;
	background: var(--obi-orange);
}

.status__rad:last-child {
	padding-bottom: 0;
}

/* =========================================================================
   Knappar
   ========================================================================= */

.knapp {
	display: inline-block;
	padding: 0.95rem 2.1rem;
	font-family: var(--font-data);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	border: 2px solid transparent;
	background: var(--lack);
	color: var(--gi-ljus);
	transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}

.knapp:hover {
	background: var(--lack-ljus);
	color: var(--gi-ljus);
}

.knapp--tom {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}

.knapp--tom:hover {
	background: var(--gi-ljus);
	border-color: var(--gi-ljus);
	color: var(--sumi);
}

@media (prefers-reduced-motion: reduce) {
	.knapp,
	.sidhuvud__knapp {
		transition: none;
	}
}

/* =========================================================================
   Tre delar: kihon, kata, kumite
   ========================================================================= */

.delar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: clamp(2rem, 4vw, 3.5rem);
	margin-top: 3rem;
}

.del__term {
	font-family: var(--font-display);
	font-size: 1.5rem;
	text-transform: uppercase;
	margin: 0 0 0.15rem;
}

.del__uttal {
	display: block;
	margin-bottom: 0.9rem;
	font-family: var(--font-data);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	color: var(--sumi-dampad);
	border-top: 2px solid var(--lack);
	padding-top: 0.65rem;
}

.del p {
	margin-bottom: 0;
	max-width: none;
}

/* =========================================================================
   Gradsystemet – sidans signaturelement
   -------------------------------------------------------------------------
   Numreringen räknar nedåt, från 10 kyu till 1 kyu, eftersom det är så
   graderna faktiskt går. Ordningen bär information och är inte pynt.
   ========================================================================= */

.grader {
	margin-top: 3rem;
	border-top: 1px solid var(--linje);
}

.grad {
	display: grid;
	grid-template-columns: 4.5rem 1fr minmax(0, 22rem);
	align-items: center;
	gap: 1.5rem;
	padding-block: 1.15rem;
	border-bottom: 1px solid var(--linje);
}

@media (max-width: 46rem) {
	.grad {
		grid-template-columns: 3.5rem 1fr;
		align-items: start;
	}

	.grad__text {
		grid-column: 2;
	}
}

.grad__kyu {
	font-family: var(--font-data);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--sumi-dampad);
	font-variant-numeric: tabular-nums;
}

.grad__balte {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-family: var(--font-display);
	font-size: 1.0625rem;
	text-transform: uppercase;
}

.grad__remsa {
	width: clamp(3rem, 9vw, 7rem);
	height: 0.9rem;
	flex: 0 0 auto;
	border: 1px solid rgba(23, 24, 28, 0.28);
	background: var(--obi-farg, var(--obi-vit));
}

.grad__text {
	font-size: 0.9375rem;
	color: var(--sumi-mjuk);
	margin: 0;
	max-width: none;
}

.grader__fot {
	margin-top: 1.75rem;
	font-size: 0.875rem;
	color: var(--sumi-dampad);
}

/* =========================================================================
   Dojo kun
   ========================================================================= */

.dojokun__lista {
	counter-reset: kun;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
	max-width: 44rem;
}

.dojokun__rad {
	position: relative;
	padding: 0 0 1.4rem 3.25rem;
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	line-height: 1.5;
}

.dojokun__rad::before {
	counter-increment: kun;
	content: counter( kun );
	position: absolute;
	left: 0;
	top: 0.15em;
	font-family: var(--font-data);
	font-size: 0.8125rem;
	color: var(--obi-orange);
}

/* =========================================================================
   Bilder och platshållare
   ========================================================================= */

.bildband {
	margin-block: 0;
}

.bildband__figur {
	margin: 0;
}

.bildband__bildtext {
	width: var(--spalt);
	margin-inline: auto;
	padding: 0.9rem var(--matt) 0;
	font-family: var(--font-data);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: var(--sumi-dampad);
}

.platshallare {
	display: block;
	width: 100%;
	height: auto;
	background: var(--sumi-mjuk);
}

.platshallare__ram {
	display: block;
	position: relative;
}

/* Notlappen syns bara för inloggade redaktörer. Besökare ser bara
   mönstret, aldrig texten om vilken bild som saknas. */

.platshallare__not {
	position: absolute;
	left: 0.75rem;
	right: 0.75rem;
	bottom: 0.75rem;
	padding: 0.5rem 0.75rem;
	background: var(--lack);
	color: var(--gi-ljus);
	font-family: var(--font-data);
	font-size: 0.6875rem;
	line-height: 1.45;
	letter-spacing: 0.02em;
	text-wrap: pretty;
}

/* Notis som bara inloggade redaktörer ser */

.redaktorsnotis {
	margin-top: 2.5rem;
	padding: 1.25rem 1.5rem;
	border-left: 3px solid var(--lack-ljus);
	background: rgba(180, 41, 47, 0.12);
	font-size: 0.9375rem;
}

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

/* =========================================================================
   Galleri
   ========================================================================= */

.galleri__rutnat {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1rem;
	margin: 3rem 0 0;
	padding: 0;
	list-style: none;
}

.galleri__rutnat--utan-rubrik {
	margin-top: 0;
}

.innehall--kort {
	padding-bottom: 0;
}

.galleri__ruta {
	margin: 0;
}

.galleri__knapp {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	border: 0;
	background: var(--sumi);
	cursor: pointer;
	overflow: hidden;
	line-height: 0;
}

.galleri__knapp img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 220ms ease, opacity 220ms ease;
}

.galleri__knapp:hover img,
.galleri__knapp:focus-visible img {
	transform: scale(1.03);
	opacity: 0.82;
}

.galleri__text {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 2.5rem 0.9rem 0.75rem;
	background: linear-gradient(to top, rgba(23, 24, 28, 0.88), transparent);
	color: var(--gi-ljus);
	font-family: var(--font-data);
	font-size: 0.75rem;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-align: left;
}

/* Galleriteaser på startsidan */

.teaser__huvud {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
}

.teaser__huvud h2 {
	margin-bottom: 0;
}

.teaser__knapp {
	flex: 0 0 auto;
}

.teaser__rad {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.75rem;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 60rem) {
	.teaser__rad {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Femte bilden ryms inte i tre kolumner utan att bli udda. */
	.teaser__rad li:nth-child(n+4) {
		display: none;
	}
}

@media (max-width: 34rem) {
	.teaser__rad {
		grid-template-columns: repeat(2, 1fr);
	}

	.teaser__rad li:nth-child(n+3) {
		display: none;
	}
}

.teaser__rad a {
	display: block;
	line-height: 0;
	overflow: hidden;
	background: var(--sumi);
}

.teaser__rad img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 220ms ease, opacity 220ms ease;
}

.teaser__rad a:hover img,
.teaser__rad a:focus-visible img {
	transform: scale(1.04);
	opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
	.teaser__rad img {
		transition: none;
	}

	.teaser__rad a:hover img,
	.teaser__rad a:focus-visible img {
		transform: none;
	}
}

/* Ljuslåda */

.ljuslada {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ljuslada[hidden] {
	display: none;
}

.ljuslada__bakgrund {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 12, 0.94);
	border: 0;
}

.ljuslada__inre {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: min(96vw, 78rem);
	padding: 1rem;
}

.ljuslada__figur {
	flex: 1 1 auto;
	margin: 0;
	min-width: 0;
	text-align: center;
}

.ljuslada__bild {
	max-width: 100%;
	max-height: 78vh;
	margin-inline: auto;
	object-fit: contain;
}

.ljuslada__bildtext {
	margin-top: 1rem;
	font-family: var(--font-data);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: rgba(242, 238, 229, 0.75);
}

.ljuslada__knapp {
	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
	border: 1px solid var(--linje-ljus);
	background: rgba(23, 24, 28, 0.6);
	color: var(--gi-ljus);
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 140ms ease;
}

.ljuslada__knapp:hover {
	background: var(--lack);
}

.ljuslada__knapp--stang {
	position: absolute;
	top: -0.5rem;
	right: 0.5rem;
	z-index: 2;
	font-size: 1.5rem;
}

@media (max-width: 46rem) {
	.ljuslada__inre {
		flex-direction: column;
		padding: 3.5rem 0.75rem 1rem;
	}

	.ljuslada__knapp--forra {
		position: absolute;
		left: 0.5rem;
		top: 50%;
	}

	.ljuslada__knapp--nasta {
		position: absolute;
		right: 0.5rem;
		top: 50%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.galleri__knapp img {
		transition: none;
	}

	.galleri__knapp:hover img,
	.galleri__knapp:focus-visible img {
		transform: none;
	}
}

/* =========================================================================
   Uppmaning och privatlektioner
   ========================================================================= */

.tvaspalt {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: center;
}

.faktalista {
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--linje);
}

.sektion--mork .faktalista {
	border-color: var(--linje-ljus);
}

.faktalista li {
	display: grid;
	grid-template-columns: minmax(7rem, auto) 1fr;
	gap: 1.5rem;
	padding-block: 0.85rem;
	border-bottom: 1px solid var(--linje);
	font-size: 0.9375rem;
}

.sektion--mork .faktalista li {
	border-color: var(--linje-ljus);
}

.faktalista dt,
.faktalista .faktalista__namn {
	font-family: var(--font-data);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sumi-dampad);
}

.sektion--mork .faktalista__namn {
	color: rgba(242, 238, 229, 0.6);
}

/* Textspalt utan bild: smalare kolumner, ingen vertikal centrering */

.tvaspalt--text {
	align-items: start;
	margin-top: 2.5rem;
}

.tvaspalt--text .faktalista {
	margin-top: 0;
}

/* =========================================================================
   Instruktörer
   -------------------------------------------------------------------------
   Porträtten ligger i rad med identisk beskärning. Att de har samma
   avstånd och samma ljus är viktigare än att var och en är perfekt –
   en rad porträtt som inte matchar ser slarvig ut oavsett hur bra
   enskilda bilder är.
   ========================================================================= */

.instruktorer {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: clamp(2rem, 4vw, 3.5rem);
	margin-top: 3rem;
}

/* En ensam instruktör får inte spänna över hela bredden. */
.instruktorer--1 {
	grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
	align-items: start;
}

@media (max-width: 46rem) {
	.instruktorer--1 {
		grid-template-columns: 1fr;
	}
}

.instruktor__figur {
	margin: 0 0 1.5rem;
}

.instruktor__figur img,
.instruktor__figur .platshallare {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* Håller raden jämn även om en uppladdad bild är mindre än 900x1125 och
   WordPress därför faller tillbaka på originalformatet. */
.instruktor__figur .platshallare__ram {
	display: block;
	line-height: 0;
}

.instruktor__namn {
	font-size: 1.25rem;
	margin-bottom: 0.35rem;
}

/*
 * Klickbara kort. Porträttlänken är aria-hidden och tabindex="-1" så
 * att skärmläsare och tangentbord bara möter en länk per instruktör,
 * inte två som pekar på samma ställe.
 */
.instruktor__namn a {
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: border-color 140ms ease;
}

.instruktor__namn a:hover {
	color: inherit;
	border-bottom-color: var(--lack-ljus);
}

.instruktor--lankad .instruktor__figur a {
	display: block;
	overflow: hidden;
	line-height: 0;
}

.instruktor--lankad .instruktor__figur img {
	transition: transform 260ms ease, opacity 260ms ease;
}

.instruktor--lankad:hover .instruktor__figur img {
	transform: scale( 1.03 );
	opacity: 0.88;
}

@media (prefers-reduced-motion: reduce) {
	.instruktor__namn a,
	.instruktor--lankad .instruktor__figur img {
		transition: none;
	}

	.instruktor--lankad:hover .instruktor__figur img {
		transform: none;
	}
}

.instruktor__grad {
	margin-bottom: 1.1rem;
	font-family: var(--font-data);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--obi-orange);
}

.instruktor__text {
	font-size: 0.9375rem;
	color: rgba(242, 238, 229, 0.82);
	max-width: none;
}

/* =========================================================================
   Formulärsektionen
   ========================================================================= */

.anmalan__inre {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: start;
}

@media (max-width: 60rem) {
	.anmalan__inre {
		grid-template-columns: 1fr;
	}
}

/* Ger pluginets formulär temats färger utan att röra pluginets CSS. */

.anmalan .kpn-formular,
.anmalan .kpn-kvitto {
	--kpn-blackink: var(--sumi);
	--kpn-bone: var(--gi-ljus);
	--kpn-rod: var(--lack);
	--kpn-linje: var(--linje);
	--kpn-dampad: var(--sumi-dampad);
	--kpn-radie: 0;
	max-width: none;
}

.anmalan .kpn-knapp {
	font-family: var(--font-data);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.anmalan .kpn-falt__etikett {
	font-family: var(--font-data);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* =========================================================================
   B.O.B.
   ========================================================================= */

.bob-hero {
	position: relative;
	background: var(--sumi);
	color: var(--gi-ljus);
	overflow: hidden;
}

.bob-hero__bakgrund {
	position: absolute;
	inset: 0;
}

.bob-hero__bakgrund img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
}

.bob-hero__bakgrund::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			100deg,
			rgba(23, 24, 28, 0.94) 0%,
			rgba(23, 24, 28, 0.88) 34%,
			rgba(23, 24, 28, 0.58) 60%,
			rgba(23, 24, 28, 0.82) 100%
		),
		linear-gradient(to bottom, rgba(23, 24, 28, 0.35), rgba(23, 24, 28, 0.75));
}

.bob-hero__inre {
	position: relative;
	padding-block: clamp(4rem, 10vw, 7.5rem);
}

.bob-hero__rubrik {
	font-size: clamp(4rem, 16vw, 11rem);
	letter-spacing: -0.03em;
	margin-bottom: 0.3em;
}

.bob-hero__ingress {
	color: rgba(242, 238, 229, 0.85);
}

/* Förkortningen */

.bob-forkortning {
	margin: 2.5rem 0;
	padding: 0;
	border-top: 1px solid var(--linje);
}

.bob-forkortning__rad {
	display: grid;
	grid-template-columns: 3.5rem 1fr;
	align-items: baseline;
	gap: 1.5rem;
	padding-block: 0.9rem;
	border-bottom: 1px solid var(--linje);
}

.bob-forkortning dt {
	font-family: var(--font-display);
	font-size: 2rem;
	line-height: 1;
	color: var(--lack);
}

.bob-forkortning dd {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

.bob-portratt {
	margin: 0;
}

.bob-portratt img {
	width: 100%;
}

.bob-portratt figcaption {
	margin-top: 0.9rem;
	font-family: var(--font-data);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: var(--sumi-dampad);
}

/* Legenden */

.legend {
	counter-reset: legend;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
}

.legend__rad {
	position: relative;
	padding: 0 0 1.5rem 3.5rem;
	font-size: clamp(1.05rem, 1.5vw, 1.2rem);
	line-height: 1.55;
	color: rgba(242, 238, 229, 0.9);
}

.legend__rad::before {
	counter-increment: legend;
	content: counter( legend, upper-roman );
	position: absolute;
	left: 0;
	top: 0.2em;
	font-family: var(--font-data);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	color: var(--obi-orange);
}

.legend__fot {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--linje-ljus);
	font-size: 0.9375rem;
	color: rgba(242, 238, 229, 0.6);
}

/* =========================================================================
   Sidfot
   ========================================================================= */

.sidfot {
	background: var(--sumi);
	color: rgba(242, 238, 229, 0.75);
	padding-block: var(--rytm) 3rem;
	font-size: 0.9375rem;
}

.sidfot__inre {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 2.5rem;
}

.sidfot h2 {
	font-size: 0.8125rem;
	font-family: var(--font-data);
	font-weight: 500;
	letter-spacing: 0.16em;
	color: var(--gi-ljus);
	margin-bottom: 1rem;
}

.sidfot p {
	margin-bottom: 0.5rem;
}

.sidfot a {
	color: var(--gi-ljus);
}

.sidfot__kedja {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-data);
	font-size: 0.8125rem;
	line-height: 1.9;
}

.sidfot__genvagar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--linje-ljus);
	font-family: var(--font-data);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sidfot__genvagar a {
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 0.15rem;
}

.sidfot__genvagar a:hover {
	border-bottom-color: var(--lack-ljus);
}

/* B.O.B. är ett internskämt och ska inte konkurrera med resten. */
.sidfot__bob {
	color: rgba(242, 238, 229, 0.45) !important;
}

.sidfot__bob:hover {
	color: var(--gi-ljus) !important;
}

.sidfot__genvagar + .sidfot__botten {
	/* Genvägarna har redan en skiljelinje ovanför, så bottenraden
	   behöver mindre luft när de ligger direkt före. */
	margin-top: 2rem;
}

.sidfot__botten {
	margin-top: 3.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--linje-ljus);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	font-family: var(--font-data);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
}

/* =========================================================================
   Innehållssidor
   ========================================================================= */

.sidhuvud-sida {
	background: var(--sumi);
	color: var(--gi-ljus);
	padding-block: clamp(3rem, 7vw, 5.5rem);
}

.innehall {
	padding-block: var(--rytm);
}

.innehall h2,
.innehall h3 {
	margin-top: 2.5rem;
}

.innehall ul,
.innehall ol {
	max-width: var(--text-bredd);
	padding-left: 1.25rem;
}

.innehall li {
	margin-bottom: 0.5rem;
}

.innehall blockquote {
	margin: 2rem 0;
	padding-left: 1.5rem;
	border-left: 3px solid var(--lack);
	font-size: 1.125rem;
}

.innehall table {
	border-collapse: collapse;
	width: 100%;
	margin-block: 2rem;
	font-size: 0.9375rem;
}

.innehall th,
.innehall td {
	text-align: left;
	padding: 0.75rem 1rem 0.75rem 0;
	border-bottom: 1px solid var(--linje);
}

.innehall th {
	font-family: var(--font-data);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* WordPress-standardklasser */

.alignleft {
	float: left;
	margin: 0.5rem 2rem 1.5rem 0;
}

.alignright {
	float: right;
	margin: 0.5rem 0 1.5rem 2rem;
}

.aligncenter {
	margin-inline: auto;
}

.wp-caption-text,
.wp-element-caption {
	font-family: var(--font-data);
	font-size: 0.8125rem;
	color: var(--sumi-dampad);
	margin-top: 0.5rem;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}