/*
Theme Name: Cykelguiden
Theme URI: https://example.dk/cykelguiden
Author: Peter Ejsing Thomsen
Description: Blogtema til et indholdssite om cykler. Sidehoved med navn og undertitel, kategorimenu, feed med billeder og en sidespalte. Bygget som modstykke til pluginnet Cykelguiden.
Version: 3.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cykelguiden-tema
Tags: blog, two-columns, right-sidebar, custom-menu, custom-logo, featured-images, translation-ready
*/

/* Farverne kommer fra det, man kigger på fra sadlen i Danmark: asfaltens
   mørkegrå, den blå maling i krydsene og de hvide striber. Kanterne er
   hårde, som en vejmarkering. */

:root {
	--c-asfalt: #21262b;
	--c-asfalt-dyb: #171b1f;
	--c-blaa: #1f4fd8;
	--c-blaa-lys: #8fb0f5;
	--c-papir: #f4f4f1;
	--c-hvid: #ffffff;
	--c-blaek: #191d21;
	--c-brod: #3a4148;
	--c-orange: #e2662a;
	--c-graa: #6b7178;
	--c-kant: #dedfd9;
	--c-blaa-dyb: #1a43b8;
	--c-bredde: 1240px;
	--c-smal: 66ch;
	--c-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
	--c-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}

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

body {
	margin: 0;
	overflow-x: hidden;
	background: var(--c-papir);
	color: var(--c-brod);
	font-family: var(--c-serif);
	font-size: 1.08rem;
	line-height: 1.68;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--c-blaa);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

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

.t-skip {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--c-blaa);
	color: #fff;
	font-family: var(--c-display);
	font-weight: 700;
}

.t-skip:focus {
	left: 1rem;
	top: 1rem;
}

.skjult {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ------------------------------------------------------------ Typografi -- */

h1,
h2,
h3,
h4 {
	margin: 0 0 0.55em;
	color: var(--c-blaek);
	font-family: var(--c-display);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.022em;
}

h1 {
	font-size: clamp(2.1rem, 5vw, 3.15rem);
	font-weight: 800;
	letter-spacing: -0.03em;
}

h2 {
	margin-top: 2.2em;
	font-size: clamp(1.45rem, 3vw, 1.9rem);
}

h3 {
	margin-top: 1.7em;
	font-size: 1.25rem;
}

p {
	margin: 0 0 1.4em;
}

blockquote {
	margin: 2rem 0;
	padding: 0.25rem 0 0.25rem 1.5rem;
	border-left: 5px solid var(--c-blaa);
	font-size: 1.18rem;
}

code {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 0.92em;
}

pre {
	overflow-x: auto;
	padding: 1.25rem;
	background: var(--c-asfalt);
	color: var(--c-papir);
	font-family: ui-monospace, Menlo, monospace;
}

hr {
	height: 0;
	margin: 3rem 0;
	border: 0;
	border-top: 2px solid var(--c-kant);
}

table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	padding: 0.65rem 0.75rem 0.65rem 0;
	border-bottom: 1px solid var(--c-kant);
	text-align: left;
}

th {
	font-family: var(--c-display);
	font-size: 0.92rem;
	font-weight: 700;
}

/* --------------------------------------------------------------- Layout -- */

.t-ramme {
	width: 100%;
	max-width: var(--c-bredde);
	margin: 0 auto;
	padding: 0 clamp(1.1rem, 4vw, 2.5rem);
}

.t-indhold {
	min-height: 45vh;
	padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.t-smal {
	max-width: var(--c-smal);
}

.t-forside {
	padding: clamp(2rem, 4vw, 3.25rem) 0 0;
}

/* Artikelspalten får luft omkring sig, også på små skærme. */
.t-indhold > .t-ramme > article,
.t-indhold > .t-ramme > .t-liste {
	padding-bottom: 1rem;
}

/* ------------------------------------------------------------ Sidehoved -- */

.t-hoved { background: var(--c-asfalt); color: var(--c-papir); }
.t-hoved__inder { padding-top: 1.6rem; padding-bottom: 1.6rem; text-align: center; }

.t-dato {
	margin: 0 0 0.9rem;
	font-family: var(--c-display);
	font-size: 0.8rem; font-weight: 600;
	letter-spacing: 0.1em; text-transform: uppercase; color: #7f878e;
}

.t-maerke__navn {
	margin: 0 0 0.35rem;
	font-family: var(--c-display);
	font-size: clamp(1.85rem, 4.5vw, 2.9rem);
	font-weight: 800; letter-spacing: -0.035em; line-height: 1;
}
.t-maerke__navn a { color: var(--c-papir); text-decoration: none; }
.t-maerke__under { margin: 0; font-family: var(--c-serif); font-size: 1.02rem; color: #a9b0b7; }
.t-maerke img, .custom-logo { display: inline-block; max-height: 64px; width: auto; }

/* --------------------------------------------------------------- Menuen -- */

.t-navbar { position: sticky; top: 0; z-index: 50; background: var(--c-blaa); }
.t-navbar__inder { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: 52px; }

.t-menu ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.t-menu li { position: relative; margin: 0; list-style: none; }
.t-menu a {
	display: block; padding: 0.95rem;
	color: #fff; font-family: var(--c-display);
	font-size: 0.97rem; font-weight: 600; text-decoration: none;
}
.t-menu a:hover, .t-menu .current-menu-item > a { background: var(--c-blaa-dyb); }
.t-menu .sub-menu {
	display: none; position: absolute; top: 100%; left: 0; z-index: 60;
	flex-direction: column; min-width: 260px; background: var(--c-blaa-dyb);
}
.t-menu li:hover > .sub-menu, .t-menu li:focus-within > .sub-menu { display: flex; }

.t-navbar__soeg { flex-shrink: 0; }
.t-navbar__soeg .t-soeg { max-width: 250px; }
.t-navbar__soeg input[type="search"] {
	padding: 0.42rem 0.7rem; border-color: rgba(255,255,255,.4);
	background: rgba(255,255,255,.12); color: #fff; font-size: 0.92rem;
}
.t-navbar__soeg input[type="search"]::placeholder { color: #cfd9f7; }
.t-navbar__soeg button { padding: 0.42rem 0.8rem; border-color: #fff; background: #fff; color: var(--c-blaa); font-size: 0.88rem; }

.t-menu-knap {
	display: none; padding: 0.45rem 0.85rem;
	border: 2px solid rgba(255,255,255,.5); background: transparent; color: #fff;
	font-family: var(--c-display); font-size: 0.92rem; font-weight: 700; cursor: pointer;
}

/* --------------------------------------------------------------- Layout -- */

.t-indhold { padding: clamp(2rem, 4vw, 3rem) 0 0; }
.t-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: clamp(2rem,4vw,3.25rem); align-items: start; }

.t-sektionstitel {
	margin: 0 0 1.5rem; padding-bottom: 0.7rem;
	border-bottom: 3px solid var(--c-asfalt);
	font-family: var(--c-display); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em;
}
.t-arkivhoved { margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 3px solid var(--c-asfalt); }
.t-arkivhoved h1 { margin: 0; }

/* ----------------------------------------------------------- Velkomsten -- */

.t-velkomst {
	display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2rem; align-items: center;
	margin: 0 0 2.5rem; padding: clamp(1.75rem, 3.5vw, 2.75rem);
	background: var(--c-hvid); border: 2px solid var(--c-kant); border-left: 8px solid var(--c-blaa);
}
.t-velkomst h1 { margin: 0 0 0.75rem; }
.t-velkomst__manchet { margin: 0 0 1rem; max-width: 62ch; font-size: 1.1rem; line-height: 1.6; }
.t-velkomst__af { margin: 0; font-family: var(--c-display); font-size: 0.95rem; color: var(--c-graa); }
.t-velkomst__foto img { display: block; width: 150px; height: 150px; object-fit: cover; border-radius: 50%; }

/* --------------------------------------------------------------- Feedet -- */

.t-feed { display: grid; gap: 1.5rem; margin-bottom: 2.5rem; }
.t-kort {
	display: grid; grid-template-columns: 260px minmax(0,1fr);
	background: var(--c-hvid); border: 2px solid var(--c-kant); overflow: hidden;
}
.t-kort__billede { display: block; line-height: 0; height: 100%; }
.t-kort__billede img { width: 100%; height: 100%; min-height: 190px; object-fit: cover; }
.t-kort__tom {
	display: block; width: 100%; height: 100%; min-height: 190px;
	background: repeating-linear-gradient(45deg,#eceef0,#eceef0 12px,#e4e7ea 12px,#e4e7ea 24px);
}
.t-kort__krop { padding: 1.4rem 1.6rem; }
.t-kort__kat { margin: 0 0 0.45rem; font-family: var(--c-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.t-kort__kat a { color: var(--c-blaa); text-decoration: none; }
.t-kort__titel { margin: 0 0 0.5rem; font-size: 1.32rem; line-height: 1.22; }
.t-kort__titel a { color: var(--c-blaek); text-decoration: none; }
.t-kort__titel a:hover { text-decoration: underline; text-decoration-color: var(--c-blaa); text-decoration-thickness: 2px; }
.t-kort__meta { margin: 0 0 0.7rem; font-family: var(--c-display); font-size: 0.85rem; color: var(--c-graa); }
.t-kort__resume { margin: 0 0 0.7rem; font-size: 1rem; line-height: 1.55; }
.t-kort__link { margin: 0; font-family: var(--c-display); font-size: 0.95rem; font-weight: 700; }
.t-kort__link a { text-decoration: none; }
.t-kort__link a::after { content: " \2192"; }

.t-feed--tre { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.t-feed--tre .t-kort { grid-template-columns: 1fr; }
.t-feed--tre .t-kort__billede img, .t-feed--tre .t-kort__tom { min-height: 0; aspect-ratio: 16/10; }
.t-ogsaa { margin: clamp(2.5rem, 5vw, 4rem) 0 0; }

/* ---------------------------------------------------------- Sidespalten -- */

.t-sidebar { position: sticky; top: 72px; display: grid; gap: 1.5rem; }
.t-widget { padding: 1.35rem 1.5rem; background: var(--c-hvid); border: 2px solid var(--c-kant); }
.t-widget__titel {
	margin: 0 0 1rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--c-kant);
	font-family: var(--c-display); font-size: 1.02rem; font-weight: 800; letter-spacing: -0.01em;
}
.t-widget p { margin: 0 0 0.9rem; font-size: 1rem; line-height: 1.55; }
.t-widget__liste, .t-widget__nummer, .t-widget ul { margin: 0; padding: 0; list-style: none; }
.t-widget__nummer { counter-reset: guide; }
.t-widget__liste li, .t-widget ul li {
	display: flex; justify-content: space-between; gap: 0.75rem;
	padding: 0.55rem 0; border-bottom: 1px solid var(--c-kant);
	font-family: var(--c-display); font-size: 0.97rem;
}
.t-widget__liste li:last-child, .t-widget ul li:last-child { border-bottom: 0; }
.t-widget__liste span { color: var(--c-graa); font-size: 0.88rem; }
.t-widget__nummer li {
	counter-increment: guide; position: relative; display: block;
	padding: 0.6rem 0 0.6rem 2rem; border-bottom: 1px solid var(--c-kant);
	font-family: var(--c-display); font-size: 0.97rem; line-height: 1.35;
}
.t-widget__nummer li:last-child { border-bottom: 0; }
.t-widget__nummer li::before {
	content: counter(guide); position: absolute; left: 0; top: 0.55rem;
	width: 1.4rem; height: 1.4rem; display: grid; place-items: center;
	background: var(--c-blaa); color: #fff; font-size: 0.78rem; font-weight: 800;
}
.t-widget a { color: var(--c-brod); text-decoration: none; }
.t-widget a:hover { color: var(--c-blaa); text-decoration: underline; }
.t-widget__portraet img { display: block; width: 100%; height: auto; margin-bottom: 0.9rem; }

/* -------------------------------------------------------------- Artiklen -- */

.t-artikel { padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--c-hvid); border: 2px solid var(--c-kant); }
.t-artikel__hoved { margin-bottom: 1.5rem; }
.t-artikel__hoved h1 { margin: 0; }
.t-artikel__billede { margin: 0 0 2rem; line-height: 0; }
.t-artikel__billede img { width: 100%; height: auto; }
.t-artikel__billede figcaption { margin-top: 0.6rem; font-family: var(--c-display); font-size: 0.88rem; line-height: 1.45; color: var(--c-graa); }

.t-brodtekst { max-width: 68ch; font-size: 1.13rem; }
.t-brodtekst ul, .t-brodtekst ol { margin: 0 0 1.35em; padding-left: 1.3em; }
.t-brodtekst li { margin-bottom: 0.5em; }
.t-brodtekst a { color: var(--c-blaa); text-decoration: underline; text-decoration-thickness: 2px; }
.t-brodtekst a:hover { color: var(--c-orange); }

.t-tags { margin: 2rem 0 0; font-family: var(--c-display); font-size: 0.9rem; color: var(--c-graa); }
.t-naviger {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.25rem;
	margin-top: 2.5rem; padding-top: 1.5rem; border-top: 2px solid var(--c-kant);
	font-family: var(--c-display); font-size: 0.96rem; font-weight: 600;
}
.t-sider { margin: 0 0 2.5rem; font-family: var(--c-display); font-weight: 600; }
.t-sider .page-numbers {
	display: inline-block; margin-right: 0.35rem; padding: 0.5rem 0.9rem;
	border: 2px solid var(--c-kant); background: var(--c-hvid); text-decoration: none;
}
.t-sider .page-numbers.current { border-color: var(--c-blaa); background: var(--c-blaa); color: #fff; }

/* ------------------------------------------------------------------ Søg -- */

.t-soeg { display: flex; gap: 0.4rem; width: 100%; }
.t-soeg input[type="search"] {
	flex: 1; min-width: 0; padding: 0.6rem 0.8rem;
	border: 2px solid var(--c-kant); border-radius: 0; background: var(--c-hvid);
	color: var(--c-blaek); font-family: var(--c-serif); font-size: 0.98rem;
}
.t-soeg input[type="search"]:focus { border-color: var(--c-blaa); }
.t-knap, .t-soeg button {
	padding: 0.6rem 1.1rem; border: 2px solid var(--c-asfalt); border-radius: 0;
	background: var(--c-asfalt); color: var(--c-papir);
	font-family: var(--c-display); font-size: 0.95rem; font-weight: 700; text-decoration: none; cursor: pointer;
}
.t-knap--lille { padding: 0.45rem 0.9rem; font-size: 0.88rem; }
.t-knap:hover, .t-soeg button:hover { background: transparent; color: var(--c-asfalt); }

/* -------------------------------------------------------------- Sidefod -- */

.t-fod { margin-top: clamp(3rem,6vw,4.5rem); padding: clamp(2.5rem,5vw,3.5rem) 0 2rem; background: var(--c-asfalt); color: #b6bcc2; }
.t-fod a { color: var(--c-papir); }
.t-fod__kolonner { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px,1fr)); gap: 2rem; margin-bottom: 2.5rem; }
.t-fod h2, .t-fod .widget-title {
	margin: 0 0 0.9rem; color: var(--c-blaa-lys); font-family: var(--c-display);
	font-size: 1rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.t-fod ul { margin: 0; padding: 0; list-style: none; }
.t-fod li { margin-bottom: 0.5rem; font-family: var(--c-display); font-size: 0.97rem; }
.t-fod__bund { padding-top: 1.5rem; border-top: 1px solid rgba(244,244,241,.16); font-family: var(--c-display); font-size: 0.9rem; color: #8d959c; }
.t-fod .t-soeg input[type="search"] { border-color: rgba(244,244,241,.3); background: transparent; color: var(--c-papir); }
.t-fod .t-soeg input[type="search"]::placeholder { color: #8d959c; }
.t-fod .t-soeg button { border-color: var(--c-blaa); background: var(--c-blaa); color: #fff; }

/* ----------------------------------------------------------- Responsivt -- */

@media (max-width: 1024px) {
	.t-layout { grid-template-columns: 1fr; }
	.t-sidebar { position: static; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
}

@media (max-width: 860px) {
	.t-kort { grid-template-columns: 1fr; }
	.t-kort__billede img, .t-kort__tom { min-height: 0; aspect-ratio: 16/9; }
	.t-velkomst { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
	.t-navbar { position: static; }
	.t-navbar__inder { flex-wrap: wrap; padding-top: 0.6rem; padding-bottom: 0.6rem; }
	.t-menu-knap { display: inline-block; }
	.t-menu { display: none; order: 3; flex-basis: 100%; }
	.t-menu.er-aaben { display: block; }
	.t-menu ul { flex-direction: column; }
	.t-menu .sub-menu { position: static; display: flex; min-width: 0; padding-left: 1rem; }
	.t-navbar__soeg .t-soeg { max-width: 190px; }
}

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