/*
Theme Name: Personal & Ledarskap
Theme URI: https://personal-ledarskap.erik.rabbithole.se/
Author: Erik
Author URI: https://personal-ledarskap.erik.rabbithole.se/
Description: Eget block-tema (Full Site Editing) för personal-ledarskap-sajten. Designsystem (färger, typografi) definieras i theme.json. Fonter självhostas.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: personal-ledarskap
Tags: full-site-editing, block-patterns, custom-colors
*/

/* Egen CSS utöver theme.json — header/footer/hamburgermeny, det som inte
   låter sig uttryckas rent i editor-styles. Hålls medvetet minimal. */

/* Headern har nu två rader (se header.html): en toppzon med logga+burgare,
   och en egen navigeringsrad med kategorier därunder — återspeglar
   skiss-referensen Erik delade 2026-08-17 (mockup: logga överst,
   kategorimeny som egen rad därunder). Kontostyr/sök/prenumeration från
   skissen är INTE med — sajten har inget konto- eller pren-system ännu,
   och det bads inte heller om (bara "toppmenyn med kategorierna"). */
.site-header {
	border-bottom: none;
}

.site-header__brand {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.site-header__brand:hover,
.site-header__brand:focus {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
}

/* Navigeringsraden (egen rad under logga-raden — se header.html). Tunn
   rosa linje under, som i grundspecen, istället för mockupens grå —
   håller kvar temats färgidentitet. */
.site-header__nav-wrap {
	border-bottom: 1px solid var(--wp--preset--color--pink);
}

/* Kategori-meny (core/categories-blocket renderar direkt en <ul>). En enda
   klass-selektor — håll specificiteten låg så att media query-overriden
   nedan (samma specificitet) vinner via source order på mobil. Sentence
   case (inte versaler) — matchar mockupens stil bättre än temats
   ursprungliga versal-länkar. */
.site-header__nav {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 2rem;
	margin: 0;
	padding: var(--wp--preset--spacing--small) 0;
}

.site-header__nav a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}

.site-header__nav a:hover,
.site-header__nav a:focus {
	text-decoration: underline;
}

/* Hamburgermeny (CSS-only, ingen JS/plugin) */
.site-header__nav-toggle {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.site-header__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 28px;
	height: 20px;
	cursor: pointer;
}

.site-header__burger span {
	display: block;
	height: 2px;
	background: var(--wp--preset--color--contrast);
	border-radius: 1px;
}

.wp-block-post-terms {
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Hero-kort — den senast klistrade ("utvalda") artikeln, full bredd.
   Medvetet UTAN färgad bakgrund (till skillnad från de mindre korten) —
   det är kontrasten mot de färgglada korten under som gör att den sticker
   ut som "den viktiga", inte en starkare färg. Vilken artikel som hamnar
   här styrs av en egen WP-fråga (perPage:1, sticky:only) i
   front-page.html — inte CSS-position — så det är alltid den senast
   markerade utvalda artikeln, robust mot ordningsbyten. */
.hero-grid .wp-block-post-template {
	display: block;
}

.hero-grid .wp-block-post-template > li {
	list-style: none;
}

.hero-grid .wp-block-post-template > li > * {
	margin-block-start: var(--wp--preset--spacing--small);
	margin-block-end: 0;
}

.hero-grid .wp-block-post-template > li > *:first-child {
	margin-block-start: 0;
}

.hero-grid .wp-block-post-featured-image {
	border-radius: 2px;
	overflow: hidden;
}

.hero-grid .wp-block-post-featured-image img {
	display: block;
	width: 100%;
}

.hero-grid .wp-block-post-title a {
	text-decoration: none;
}

.hero-grid .wp-block-post-title a:hover,
.hero-grid .wp-block-post-title a:focus {
	text-decoration: underline;
}

/* Artikelkort på startsidan (övriga utvalda + "Senaste artiklar") — Query Loop-block.
   Färgen cyklar automatiskt per kortposition (blå/rosa/mörk grå) i stället för
   att vara ett redaktionellt val eller kopplad till kategori. Enkel nth-child-
   räkning på <li> som Post Template redan genererar — inget extra markup. */
.article-grid .wp-block-post-template {
	gap: var(--wp--preset--spacing--large) !important;
}

.article-grid .wp-block-post-template > li {
	padding: var(--wp--preset--spacing--large);
	color: var(--wp--preset--color--contrast);
}

.article-grid .wp-block-post-template > li > * {
	margin-block-start: var(--wp--preset--spacing--small);
	margin-block-end: 0;
}

.article-grid .wp-block-post-template > li > *:first-child {
	margin-block-start: 0;
}

.article-grid .wp-block-post-template > li:nth-child(3n+1) {
	background-color: var(--wp--preset--color--blue);
}

.article-grid .wp-block-post-template > li:nth-child(3n+2) {
	background-color: var(--wp--preset--color--pink);
}

.article-grid .wp-block-post-template > li:nth-child(3n) {
	background-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--base);
}

.article-grid .wp-block-post-template > li:nth-child(3n) a {
	color: var(--wp--preset--color--base);
}

.article-grid .wp-block-post-title a {
	text-decoration: none;
}

.article-grid .wp-block-post-title a:hover,
.article-grid .wp-block-post-title a:focus {
	text-decoration: underline;
}

.article-grid .wp-block-read-more {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* Artikelkortens bild (post-featured-image i Query Loop-korten på
   startsidan). Beskuren till 16:9 via blockets eget aspectRatio-attribut
   (WP genererar object-fit:cover automatiskt) — vi behöver bara runda
   hörnen lite och säkra att bilden inte trycker ut korten. Saknas
   featured image renderar blocket ingenting (WP-kärnbeteende) — kortets
   färgade bakgrund får vara den visuella fallbacken tills Erik sätter bilder.*/
.article-grid .wp-block-post-featured-image {
	margin: 0;
	border-radius: 2px;
	overflow: hidden;
}

.article-grid .wp-block-post-featured-image img {
	display: block;
	width: 100%;
}

/* Arkivlistans bild — mindre, begränsad bredd så den inte tar över den
   läsorienterade listvyn. */
.archive-list-image .wp-block-post-featured-image {
	max-width: 480px;
	border-radius: 2px;
	overflow: hidden;
}

.archive-list-image .wp-block-post-featured-image img {
	display: block;
	width: 100%;
}

/* "Senaste artiklar" — kompakt rad-lista (alternativ A, ersätter det
   tidigare kortrutnätet 2026-08-17 på Eriks önskan: nu när startsidan har
   en hero + färgade utvalda-kort ovanför blev listan här nedan
   för likadan — en enklare radlista ger tydligare visuell hierarki och
   får plats med fler artiklar (8 istället för 6) utan att bli lång).
   Liten kvadratisk tumnagel till vänster (ingen färgcykel, ingen
   ingress, ingen "Läs mer"-länk — rubriken är länken). */
.latest-list .wp-block-post-template {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.latest-list .wp-block-post-template > li {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--medium);
	padding: var(--wp--preset--spacing--medium) 0;
	border-bottom: 1px solid #e2e2e2;
	list-style: none;
}

.latest-list .wp-block-post-template > li:first-child {
	padding-top: 0;
}

.latest-list .wp-block-post-featured-image {
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	margin: 0;
	border-radius: 2px;
	overflow: hidden;
}

.latest-list .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
}

.latest-list__meta {
	flex: 1 1 auto;
	min-width: 0;
}

.latest-list__meta > * {
	margin-block-start: 0.25rem;
	margin-block-end: 0;
}

.latest-list__meta > *:first-child {
	margin-block-start: 0;
}

.latest-list .wp-block-post-title {
	line-height: 1.3;
}

.latest-list .wp-block-post-title a {
	text-decoration: none;
}

.latest-list .wp-block-post-title a:hover,
.latest-list .wp-block-post-title a:focus {
	text-decoration: underline;
}

.latest-list .wp-block-post-date {
	color: var(--wp--preset--color--dark);
	opacity: 0.7;
}

@media (max-width: 480px) {
	.latest-list .wp-block-post-featured-image {
		width: 72px;
		height: 72px;
	}
}

@media (max-width: 768px) {
	.site-header__burger {
		display: flex;
	}

	.site-header__nav-wrap {
		display: none;
	}

	.site-header__nav {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
		width: 100%;
		padding: 1rem 0 1.5rem;
	}

	.site-header__nav-toggle:checked ~ .site-header__nav-wrap {
		display: block;
	}
}

/* Anfang — första ordet i artikeltexten (single.html). Ordet wrappas i
   <span class="anfang"> server-side (se functions.php,
   personal_ledarskap_anfang) eftersom CSS inte har något ::first-word.
   Samma teknik som en klassisk drop cap: floata spannet till vänster så
   får brödtexten flyta runt det på första raden och fortsätta från
   vanlig vänsterkant på raderna därefter. Testfunktion — ta bort
   .anfang-reglerna + filtret i functions.php om Erik inte gillar den. */
.wp-block-post-content .anfang {
	float: left;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 3.25rem;
	line-height: 0.85;
	padding-right: 0.2rem;
	padding-top: 0.1rem;
}