/*
Theme Name:   Progym
Theme URI:    https://progym.se/
Description:  Childtema till GeneratePress för Progym, en oberoende guide till gym- och styrketräning. Grafit, krita och tävlingsskivornas färgkod per avdelning.
Author:       Redaktionen
Template:     generatepress
Version:      1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License:      GPL-2.0-or-later
Text Domain:  progym-child
*/

/* ==================================================================
   1. Färger och typografi
   Avdelningsfärgerna följer tävlingsskivorna: 25 kg röd, 20 kg blå,
   15 kg gul, 10 kg grön, 5 kg vit, 2,5 kg svart.
   ================================================================== */
:root {
	--pg-grafit: #1b1d20;
	--pg-jarn: #2c3036;
	--pg-stal: #4a5059;
	--pg-krita: #f5f3ee;
	--pg-papper: #ffffff;
	--pg-text: #23262a;
	--pg-dampad: #5b6068;
	--pg-linje: #dedad1;
	--pg-linje-mork: #c9c4b8;

	--pg-rod: #c8362b;
	--pg-rod-text: #a82c22;
	--pg-bla: #1f5fa8;
	--pg-gul: #e2aa17;
	--pg-gron: #2f8a4e;
	--pg-vit: #e8e5de;
	--pg-svart: #1b1d20;

	--pg-avd: var(--pg-rod);
	--pg-avd-ljus: #fbeceb;

	--pg-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--pg-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--pg-radie: 6px;
	--pg-las: 760px;

	/* GeneratePress globala färger */
	--contrast: var(--pg-text);
	--contrast-2: var(--pg-dampad);
	--contrast-3: var(--pg-linje-mork);
	--base: var(--pg-linje);
	--base-2: var(--pg-krita);
	--base-3: var(--pg-papper);
	--accent: var(--pg-rod-text);
}

.pg-avd-traningsprogram { --pg-avd: var(--pg-rod);   --pg-avd-ljus: #fbeceb; }
.pg-avd-ovningar        { --pg-avd: var(--pg-bla);   --pg-avd-ljus: #e9f0f8; }
.pg-avd-traningslara    { --pg-avd: var(--pg-gul);   --pg-avd-ljus: #fdf5df; }
.pg-avd-gymguide        { --pg-avd: var(--pg-gron);  --pg-avd-ljus: #e8f4ec; }
.pg-avd-kost            { --pg-avd: #8c877c;         --pg-avd-ljus: #f1efea; }
.pg-avd-bodybuilding    { --pg-avd: var(--pg-svart); --pg-avd-ljus: #ecebe8; }

body {
	background: var(--pg-krita);
	color: var(--pg-text);
	font-family: var(--pg-sans);
	font-size: 18px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.entry-title {
	font-family: var(--pg-sans);
	color: var(--pg-grafit);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.2;
}

h1, .entry-title { font-size: clamp(2rem, 4.4vw, 2.9rem); }
h2 { font-size: clamp(1.5rem, 3vw, 1.95rem); margin: 2.4em 0 0.7em; }
h3 { font-size: 1.28rem; margin: 1.8em 0 0.5em; }
h4 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.06em; }

a { color: var(--pg-rod-text); text-underline-offset: 0.18em; }
a:hover, a:focus { color: var(--pg-grafit); }

:focus-visible { outline: 3px solid var(--pg-gul); outline-offset: 2px; }

/* ==================================================================
   2. Sidhuvud och meny
   ================================================================== */
.site-header {
	background: var(--pg-grafit);
	border-bottom: 4px solid var(--pg-rod);
}
.site-header .inside-header { padding-top: 14px; padding-bottom: 14px; }

.main-title { font-size: 1.55rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1; }
.main-title a,
.main-title a:hover {
	color: var(--pg-krita);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.pg-logo-mark { flex: 0 0 auto; display: block; }
.site-description { color: #b9b5ac; font-size: 0.85rem; }

body .main-navigation,
body .main-navigation ul ul {
	background: var(--pg-grafit);
}
body .main-navigation .main-nav ul li a,
body .main-navigation .menu-toggle,
body .main-navigation .menu-bar-items {
	color: var(--pg-krita);
	font-weight: 700;
	font-size: 0.95rem;
}
body .main-navigation .main-nav ul li:hover > a,
body .main-navigation .main-nav ul li.current-menu-item > a,
body .main-navigation .main-nav ul li.current-menu-ancestor > a,
body .main-navigation .main-nav ul li.current-page-ancestor > a {
	color: #ffffff;
	background: var(--pg-jarn);
	box-shadow: inset 0 -3px 0 var(--pg-rod);
}
body .main-navigation ul ul li a { font-weight: 600; }

/* ==================================================================
   3. Innehållsytan
   ================================================================== */
.separate-containers .inside-article,
.one-container .container,
.inside-article {
	background: var(--pg-papper);
}
.inside-article {
	border-top: 6px solid var(--pg-avd);
	border-radius: 0 0 var(--pg-radie) var(--pg-radie);
}

.entry-header,
.entry-content > *:not(.pg-bred):not(.alignwide):not(.alignfull) {
	max-width: var(--pg-las);
	margin-left: auto;
	margin-right: auto;
}
.entry-content > .pg-bred { max-width: 1100px; margin-left: auto; margin-right: auto; }

.entry-content p,
.entry-content li { color: var(--pg-text); }
.entry-content ul, .entry-content ol { margin-left: 1.3em; padding-left: 0; }
.pg-toc ol, .pg-kallor ol, .pg-lanksbox ul { padding-left: 0; }
.entry-content li { margin-bottom: 0.35em; }
.entry-content li::marker { color: var(--pg-avd); font-weight: 700; }
.entry-content strong { color: var(--pg-grafit); }

.entry-content h2 {
	padding-left: 16px;
	border-left: 6px solid var(--pg-avd);
}

.entry-content img { border-radius: var(--pg-radie); }
.entry-content figure figcaption,
.wp-caption-text { color: var(--pg-dampad); font-size: 0.85rem; }

.entry-content blockquote {
	border-left: 4px solid var(--pg-linje-mork);
	background: var(--pg-krita);
	padding: 1em 1.3em;
	font-style: normal;
	margin: 1.6em 0;
}

/* Skivstången som avdelare: <hr class="pg-stang"> eller vanlig <hr> */
.entry-content hr {
	border: 0;
	height: 22px;
	margin: 2.6em auto;
	background:
		linear-gradient(var(--pg-avd), var(--pg-avd)) left center / 10px 22px no-repeat,
		linear-gradient(var(--pg-avd), var(--pg-avd)) right center / 10px 22px no-repeat,
		linear-gradient(var(--pg-stal), var(--pg-stal)) left 14px center / 6px 14px no-repeat,
		linear-gradient(var(--pg-stal), var(--pg-stal)) right 14px center / 6px 14px no-repeat,
		linear-gradient(var(--pg-linje-mork), var(--pg-linje-mork)) center / 100% 4px no-repeat;
	max-width: 260px;
}

/* Inbäddad video i 16:9 */
.entry-content iframe[src*="youtube"],
.entry-content iframe[src*="vimeo"] {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--pg-radie);
	display: block;
}

/* ==================================================================
   4. Brödsmulor och metarad
   ================================================================== */
.pg-smulor ol {
	list-style: none;
	margin: 0 0 0.9em;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	font-size: 0.82rem;
	color: var(--pg-dampad);
}
.pg-smulor li { margin: 0; }
.pg-smulor li + li::before { content: "/"; margin: 0 0.5em; color: var(--pg-linje-mork); }
.pg-smulor a { color: var(--pg-dampad); text-decoration: none; }
.pg-smulor a:hover { color: var(--pg-rod-text); text-decoration: underline; }

.pg-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.5em;
	margin: 0.8em 0 0;
	font-size: 0.86rem;
	color: var(--pg-dampad);
}
.pg-meta__av { font-weight: 700; color: var(--pg-grafit); }
.pg-meta__sep { color: var(--pg-linje-mork); }

/* ==================================================================
   5. Byggstenar i artiklarna
   ================================================================== */

/* Direktsvar överst: <div class="pg-direktsvar"><p>…</p></div> */
.pg-direktsvar {
	background: var(--pg-avd-ljus);
	border-left: 6px solid var(--pg-avd);
	border-radius: 0 var(--pg-radie) var(--pg-radie) 0;
	padding: 1.1em 1.4em;
	margin: 1.4em 0 1.8em;
	font-size: 1.05rem;
}
.pg-direktsvar p:last-child { margin-bottom: 0; }

/* Ingress: <p class="pg-ingress"> */
.pg-ingress { font-size: 1.18rem; line-height: 1.6; color: var(--pg-jarn); }

/* Rutor: [pg_ruta typ="tips|varning|fakta|sakerhet"] */
.pg-ruta {
	border: 1px solid var(--pg-linje);
	border-radius: var(--pg-radie);
	padding: 1em 1.3em 0.4em;
	margin: 1.8em 0;
	background: var(--pg-krita);
	position: relative;
}
.pg-ruta__rubrik {
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	margin-bottom: 0.4em;
	display: flex;
	align-items: center;
	gap: 8px;
}
.pg-ruta__rubrik::before {
	content: "";
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--pg-ruta, var(--pg-gron));
	box-shadow: inset 0 0 0 4px rgba(255,255,255,.35);
}
.pg-ruta--tips     { --pg-ruta: var(--pg-gron); }
.pg-ruta--varning  { --pg-ruta: var(--pg-gul); background: #fdf8ea; border-color: #f0dfaa; }
.pg-ruta--fakta    { --pg-ruta: var(--pg-bla); background: #f1f5fa; border-color: #d3e0ef; }
.pg-ruta--sakerhet { --pg-ruta: var(--pg-rod); background: #fcf1f0; border-color: #efcdca; }

/* Tabeller, också träningsprogram: <table class="pg-program"> */
.pg-tabell { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.6em 0; }
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
	background: var(--pg-papper);
	font-variant-numeric: tabular-nums;
	margin: 0;
	border: 1px solid var(--pg-linje);
}
.entry-content th {
	background: var(--pg-grafit);
	color: var(--pg-krita);
	font-weight: 700;
	text-align: left;
	padding: 0.65em 0.8em;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	border: 0;
}
.entry-content td {
	padding: 0.6em 0.8em;
	border: 0;
	border-bottom: 1px solid var(--pg-linje);
	vertical-align: top;
}
.entry-content tbody tr:nth-child(even) td { background: #faf9f6; }
.entry-content table caption {
	caption-side: top;
	text-align: left;
	font-weight: 800;
	color: var(--pg-grafit);
	padding-bottom: 0.4em;
}
/* Programtabell: dagrad som mellanrubrik <tr class="pg-dag"><td colspan="4">Dag A</td></tr> */
.pg-program tr.pg-dag td {
	background: var(--pg-avd-ljus) !important;
	font-weight: 800;
	color: var(--pg-grafit);
	border-left: 5px solid var(--pg-avd);
}
.pg-program td:nth-child(n+2) { white-space: nowrap; }

/* Faktaruta med nyckeltal: <dl class="pg-fakta"><div><dt>Pass</dt><dd>3 per vecka</dd></div>…</dl> */
.pg-fakta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	background: var(--pg-linje);
	border: 1px solid var(--pg-linje);
	border-radius: var(--pg-radie);
	overflow: hidden;
	margin: 1.6em 0;
}
.pg-fakta > div { background: var(--pg-papper); padding: 0.8em 1em; }
.pg-fakta dt {
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--pg-dampad);
	font-weight: 700;
}
.pg-fakta dd { margin: 0.15em 0 0; font-size: 1.15rem; font-weight: 800; color: var(--pg-grafit); }

/* Steg: <ol class="pg-steg"><li><strong>Rubrik</strong> text</li></ol> */
.entry-content ol.pg-steg { list-style: none; counter-reset: pgsteg; margin-left: 0; padding: 0; }
.entry-content ol.pg-steg > li {
	counter-increment: pgsteg;
	position: relative;
	padding: 0 0 1.1em 3.1em;
	margin: 0;
	min-height: 2.2em;
}
.entry-content ol.pg-steg > li::before {
	content: counter(pgsteg);
	position: absolute;
	left: 0;
	top: 0;
	width: 2.1em;
	height: 2.1em;
	border-radius: 50%;
	background: var(--pg-grafit);
	color: var(--pg-krita);
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
	box-shadow: 0 0 0 3px var(--pg-avd);
}

/* Vertikal tidslinje: <ol class="pg-tidslinje"><li><span class="pg-tid">Vecka 1-4</span> text</li></ol> */
.entry-content ol.pg-tidslinje {
	list-style: none;
	margin: 1.6em 0;
	padding: 0 0 0 1.6em;
	border-left: 4px solid var(--pg-linje);
}
.entry-content ol.pg-tidslinje > li { position: relative; margin: 0 0 1.3em; }
.entry-content ol.pg-tidslinje > li::before {
	content: "";
	position: absolute;
	left: calc(-1.6em - 11px);
	top: 0.35em;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--pg-avd);
	box-shadow: inset 0 0 0 5px rgba(255,255,255,.4);
}
.pg-tid { display: block; font-weight: 800; color: var(--pg-grafit); font-size: 0.9rem; }

/* Vanliga frågor: <div class="pg-faq"><details><summary>Fråga</summary><p>Svar</p></details></div> */
.pg-faq details {
	border: 1px solid var(--pg-linje);
	border-radius: var(--pg-radie);
	margin: 0 0 0.6em;
	background: var(--pg-papper);
}
.pg-faq summary {
	cursor: pointer;
	padding: 0.85em 2.6em 0.85em 1.1em;
	font-weight: 700;
	color: var(--pg-grafit);
	list-style: none;
	position: relative;
}
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary::after {
	content: "+";
	position: absolute;
	right: 1em;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.3rem;
	color: var(--pg-avd);
	font-weight: 800;
}
.pg-faq details[open] summary::after { content: "−"; }
.pg-faq details > *:not(summary) { padding: 0 1.1em; }

/* Källor: <div class="pg-kallor"><p>Källor</p><ol>…</ol></div> */
.pg-kallor {
	border-top: 1px solid var(--pg-linje);
	margin-top: 3em;
	padding-top: 1em;
	font-size: 0.86rem;
	color: var(--pg-dampad);
}
.pg-kallor > p:first-child {
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.76rem;
	color: var(--pg-grafit);
}
.pg-kallor li { color: var(--pg-dampad); }

/* Internlänksbox: <div class="pg-lanksbox"><p>Läs också</p><ul>…</ul></div> */
.pg-lanksbox {
	background: var(--pg-grafit);
	color: var(--pg-krita);
	border-radius: var(--pg-radie);
	padding: 1.1em 1.4em 0.6em;
	margin: 2em 0;
}
.pg-lanksbox > p:first-child {
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.76rem;
	color: var(--pg-gul);
	margin-bottom: 0.4em;
}
.pg-lanksbox ul { margin-left: 1.1em; }
.pg-lanksbox li { color: var(--pg-krita); }
.pg-lanksbox li::marker { color: var(--pg-rod); }
.pg-lanksbox a { color: #ffffff; font-weight: 600; }
.pg-lanksbox a:hover { color: var(--pg-gul); }

/* Innehållsförteckning: [pg_innehall] */
.pg-toc { display: none; }
.pg-toc.is-klar {
	display: block;
	border: 1px solid var(--pg-linje);
	border-radius: var(--pg-radie);
	background: var(--pg-krita);
	padding: 0.9em 1.3em 0.5em;
	margin: 1.6em auto 2em;
	font-size: 0.95rem;
}
.pg-toc__rubrik {
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.76rem;
	margin-bottom: 0.4em;
}
.pg-toc ol { margin: 0 0 0 1.3em; }
.pg-toc li { margin-bottom: 0.25em; }
.pg-toc a { color: var(--pg-text); text-decoration: none; }
.pg-toc a:hover { color: var(--pg-rod-text); text-decoration: underline; }

h2[id] { scroll-margin-top: 90px; }

/* ==================================================================
   6. Kort: avdelningar och undersidor
   ================================================================== */
.pg-avdelningar {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 16px;
	margin: 1.8em auto;
	max-width: 1100px !important;
}
.pg-avdkort {
	--pg-k: var(--pg-avd);
	display: grid;
	grid-template-columns: 56px 1fr;
	grid-template-rows: auto 1fr;
	column-gap: 14px;
	padding: 1.1em 1.2em;
	background: var(--pg-papper);
	border: 1px solid var(--pg-linje);
	border-radius: var(--pg-radie);
	text-decoration: none;
	color: var(--pg-text);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
a.pg-avdkort:hover, a.pg-avdkort:focus {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(27,29,32,.10);
	border-color: var(--pg-avd);
	color: var(--pg-text);
}
.pg-skiva {
	grid-row: 1 / span 3;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--pg-avd);
	color: #ffffff;
	font-weight: 900;
	font-size: 0.95rem;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	box-shadow: inset 0 0 0 7px rgba(255,255,255,.18), inset 0 0 0 8px rgba(0,0,0,.08);
}
.pg-avd-traningslara .pg-skiva { color: var(--pg-grafit); }
.pg-avd-kost .pg-skiva { background: var(--pg-vit); color: var(--pg-grafit); box-shadow: inset 0 0 0 7px rgba(0,0,0,.05), inset 0 0 0 1px var(--pg-linje-mork); }
.pg-avdkort__namn { font-weight: 800; font-size: 1.12rem; color: var(--pg-grafit); line-height: 1.25; }
.pg-avdkort__text { font-size: 0.9rem; color: var(--pg-dampad); line-height: 1.5; margin-top: 0.25em; }
.pg-avdkort--snart { opacity: .72; }
.pg-snart {
	grid-column: 2;
	justify-self: start;
	margin-top: 0.5em;
	font-size: 0.7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	background: var(--pg-krita);
	border: 1px solid var(--pg-linje-mork);
	border-radius: 99px;
	padding: 0.15em 0.7em;
	color: var(--pg-dampad);
}

.pg-undersidor { margin: 2em 0; }
.pg-undersidor__rubrik { font-weight: 800; font-size: 1.2rem; color: var(--pg-grafit); }
.entry-content ul.pg-kortlista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}
.entry-content ul.pg-kortlista li { margin: 0; }
.pg-kortlista a {
	display: block;
	height: 100%;
	padding: 0.9em 1em;
	border: 1px solid var(--pg-linje);
	border-top: 4px solid var(--pg-avd);
	border-radius: var(--pg-radie);
	background: var(--pg-papper);
	text-decoration: none;
	transition: box-shadow .15s ease;
}
.pg-kortlista a:hover { box-shadow: 0 6px 18px rgba(27,29,32,.09); }
.pg-kortlista__titel { display: block; font-weight: 800; color: var(--pg-grafit); line-height: 1.3; }
.pg-kortlista__text { display: block; font-size: 0.86rem; color: var(--pg-dampad); line-height: 1.5; margin-top: 0.3em; }

/* ==================================================================
   7. Startsidan
   ================================================================== */
.home .inside-article { border-top: 0; padding-top: 0; }
.home .entry-header {
	max-width: none;
	background: var(--pg-grafit);
	color: var(--pg-krita);
	margin: 0 -40px 2em;
	padding: 3.2em 40px 2.8em;
	position: relative;
	overflow: hidden;
}
.home .entry-header::after {
	/* Skivstång i hörnet */
	content: "";
	position: absolute;
	right: -40px;
	bottom: -40px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: var(--pg-rod);
	box-shadow: inset 0 0 0 26px rgba(255,255,255,.08), inset 0 0 0 70px rgba(0,0,0,.12);
	opacity: .9;
}
.home .entry-title {
	color: #ffffff;
	max-width: var(--pg-las);
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
.home .entry-content .pg-ingress { font-size: 1.22rem; }

/* ==================================================================
   8. Sidfot
   ================================================================== */
.site-footer .site-info {
	background: var(--pg-grafit);
	color: #b9b5ac;
	border-top: 4px solid var(--pg-rod);
}
.site-footer .site-info a { color: var(--pg-krita); }
.pg-fot { display: block; font-size: 0.84rem; line-height: 1.6; max-width: 760px; margin: 0 auto; }
.footer-widgets { background: var(--pg-jarn); color: #d6d2c9; }
.footer-widgets a { color: #ffffff; }
.footer-widgets .widget-title { color: #ffffff; font-weight: 800; }

/* ==================================================================
   9. Mobil
   ================================================================== */
@media (max-width: 768px) {
	body { font-size: 17px; }
	.home .entry-header { margin: 0 -30px 1.6em; padding: 2.4em 30px 2.2em; }
	.home .entry-header::after { width: 150px; height: 150px; right: -40px; bottom: -50px; }
	.entry-content h2 { padding-left: 12px; border-left-width: 5px; }
	.pg-avdkort { grid-template-columns: 48px 1fr; }
	.pg-skiva { width: 48px; height: 48px; font-size: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}

@media print {
	.site-header, .main-navigation, .site-footer, .pg-toc, .pg-smulor { display: none !important; }
	.inside-article { border: 0; }
}