/*!
Theme Name: Kronisk
Theme URI: https://kronisk.dk/
Author: Strange Skov
Author URI: https://kronisk.dk/
Description: Mobilfoerst tema til Kronisk.dk. Bygget paa _s (Underscores). Praesentation kun - post-types, taksonomier og shortcodes ligger i pluginet kronisk-core.
Version: 0.1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kronisk
Tags: mobile-first, accessibility-ready, custom-menu, translation-ready
*/

/* ==========================================================================
   1. Custom properties
   Alle vaerdier samlet et sted. Aendr her, ikke nede i reglerne.
   ========================================================================== */

:root {
	/* Farver. Brand-blaa #069 er fastholdt fra kanal-headeren.
	   Brodtekst er naer-sort (ikke ren sort - giver mindre "halation" ved laesning).
	   Daempet tekst er #5a5a5a, ikke #999 - det holder kontrast over 7:1,
	   hvilket betyder noget for aeldre laesere. */
	--k-brand: #069;
	--k-brand-dark: #004c73;
	--k-text: #1a1a1a;
	--k-text-muted: #5a5a5a;
	--k-bg: #fff;
	--k-surface: #f4f6f8;
	--k-border: #dcdcdc;
	--k-border-strong: #b8bcc0;
	--k-focus: #c2410c;

	/* Skrift. Montserrat til overskrifter, Georgia til brodtekst. */
	--k-font-heading: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--k-font-body: Georgia, Times, "Times New Roman", serif;
	--k-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	/* Typeskala. Basis er 18px paa mobil, ikke 16px.
	   Aeldre laesere er hovedmaalgruppen - laesbarhed vinder over taethed. */
	--k-size-base: 1.125rem;
	--k-size-small: 0.9375rem;
	--k-size-h1: 1.75rem;
	--k-size-h2: 1.375rem;
	--k-size-h3: 1.1875rem;
	--k-leading-body: 1.7;
	--k-leading-heading: 1.25;

	/* Afstand */
	--k-space-xs: 0.5rem;
	--k-space-sm: 0.75rem;
	--k-space-md: 1.25rem;
	--k-space-lg: 2rem;
	--k-space-xl: 3rem;

	/* Layout. Maalebredde ca. 66 tegn - laengere linjer bliver svaere at
	   finde tilbage til ved linjeskift. */
	--k-measure: 38rem;
	--k-gutter: 1.25rem;
	--k-tap: 2.75rem;
}

/* ==========================================================================
   2. Grundlaeggende
   ========================================================================== */

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

body {
	background: var(--k-bg);
	color: var(--k-text);
	font-family: var(--k-font-body);
	font-size: var(--k-size-base);
	line-height: var(--k-leading-body);
	margin: 0;
	overflow-wrap: break-word;
}

/* Fokus skal vaere tydeligt synligt. Fjern det aldrig uden at erstatte det. */
:focus-visible {
	outline: 3px solid var(--k-focus);
	outline-offset: 2px;
}

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

figure {
	margin: var(--k-space-lg) 0;
}

figcaption {
	color: var(--k-text-muted);
	font-family: var(--k-font-ui);
	font-size: var(--k-size-small);
	line-height: 1.5;
	margin-top: var(--k-space-xs);
}

/* ==========================================================================
   3. Typografi
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--k-font-heading);
	font-weight: 600;
	line-height: var(--k-leading-heading);
	margin: var(--k-space-lg) 0 var(--k-space-sm);
	text-wrap: balance;
}

h1 { font-size: var(--k-size-h1); }
h2 { font-size: var(--k-size-h2); }
h3 { font-size: var(--k-size-h3); }
h4, h5, h6 { font-size: var(--k-size-base); }

p,
ul,
ol,
blockquote,
table {
	margin: 0 0 var(--k-space-md);
}

ul,
ol {
	padding-left: 1.5em;
}

li + li {
	margin-top: var(--k-space-xs);
}

a {
	color: var(--k-brand);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

a:hover,
a:focus {
	color: var(--k-brand-dark);
}

blockquote {
	border-left: 4px solid var(--k-brand);
	font-style: italic;
	margin-left: 0;
	padding-left: var(--k-space-md);
}

hr {
	background: var(--k-border);
	border: 0;
	height: 1px;
	margin: var(--k-space-xl) 0;
}

code,
pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

pre {
	background: var(--k-surface);
	overflow-x: auto;
	padding: var(--k-space-md);
}

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

th,
td {
	border-bottom: 1px solid var(--k-border);
	padding: var(--k-space-sm);
	text-align: left;
}

/* ==========================================================================
   4. Tilgaengelighed
   ========================================================================== */

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

.skip-link {
	background: var(--k-bg);
	color: var(--k-brand);
	font-family: var(--k-font-ui);
	left: var(--k-space-sm);
	padding: var(--k-space-sm) var(--k-space-md);
	position: absolute;
	top: -100px;
	z-index: 100;
}

.skip-link:focus {
	top: var(--k-space-sm);
}

/* ==========================================================================
   5. Layout
   ========================================================================== */

.k-wrap {
	margin: 0 auto;
	max-width: var(--k-measure);
	padding: 0 var(--k-gutter);
}

.k-site-main {
	padding: var(--k-space-lg) 0 var(--k-space-xl);
}

/* ==========================================================================
   6. Header og navigation
   Burger-menuen bruger WP's indbyggede menusystem. Knappen er 44px hoej -
   det er minimumsmaalet for et paalideligt trykfelt paa mobil.
   ========================================================================== */

.k-site-header {
	border-bottom: 1px solid var(--k-border);
	padding: var(--k-space-sm) 0;
}

.k-header-inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--k-space-md);
	justify-content: space-between;
	margin: 0 auto;
	max-width: var(--k-measure);
	padding: 0 var(--k-gutter);
}

/* Kanalsiden er bredere end resten af sitet, saa headeren foelger med. */
.k-kanal .k-header-inner {
	max-width: 1024px;
}

.k-kanal-sti {
	color: var(--k-text-muted);
	font-weight: 400;
}

.k-site-title {
	font-family: var(--k-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.k-site-title a {
	color: var(--k-text);
	text-decoration: none;
}

.k-site-description {
	color: var(--k-text-muted);
	font-family: var(--k-font-ui);
	font-size: var(--k-size-small);
	margin: 0.15rem 0 0;
}

.k-menu-toggle {
	align-items: center;
	background: none;
	border: 1px solid var(--k-border-strong);
	border-radius: 4px;
	color: var(--k-text);
	cursor: pointer;
	display: flex;
	flex-shrink: 0;
	font-family: var(--k-font-ui);
	font-size: var(--k-size-small);
	gap: 0.5em;
	min-height: var(--k-tap);
	padding: 0 var(--k-space-sm);
}

.k-menu-toggle-icon {
	display: block;
	height: 2px;
	position: relative;
	width: 20px;
	background: currentColor;
}

.k-menu-toggle-icon::before,
.k-menu-toggle-icon::after {
	background: currentColor;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	width: 100%;
}

.k-menu-toggle-icon::before { top: -6px; }
.k-menu-toggle-icon::after { top: 6px; }

.k-main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.k-main-navigation {
	display: none;
	flex-basis: 100%;
	margin: 0 calc(var(--k-gutter) * -1);
}

.k-main-navigation.is-open {
	display: block;
}

.k-main-navigation li + li {
	margin-top: 0;
}

.k-main-navigation a {
	border-top: 1px solid var(--k-border);
	display: block;
	font-family: var(--k-font-ui);
	padding: var(--k-space-sm) var(--k-gutter);
	text-decoration: none;
}

.k-main-navigation .current-menu-item > a {
	font-weight: 600;
}

/* ==========================================================================
   7. Indhold
   ========================================================================== */

.k-entry + .k-entry {
	border-top: 1px solid var(--k-border);
	margin-top: var(--k-space-xl);
	padding-top: var(--k-space-xl);
}

.k-entry-title {
	margin-top: 0;
}

.k-entry-title a {
	color: var(--k-text);
	text-decoration: none;
}

.k-entry-title a:hover,
.k-entry-title a:focus {
	color: var(--k-brand);
	text-decoration: underline;
}

.k-entry-meta {
	color: var(--k-text-muted);
	font-family: var(--k-font-ui);
	font-size: var(--k-size-small);
	margin: 0 0 var(--k-space-md);
}

.k-entry-meta a {
	color: inherit;
}

.k-more-link {
	display: inline-block;
	font-family: var(--k-font-ui);
	font-weight: 600;
	margin-top: var(--k-space-xs);
}

/* Vedhaeftede/udvalgte billeder gaar til kanten paa mobil - de er ofte det
   foerste laeseren ser, og margener stjaeler af den lille skaerm. */
.k-featured-image {
	margin: 0 calc(var(--k-gutter) * -1) var(--k-space-md);
}

.k-featured-image img {
	display: block;
	width: 100%;
}

.k-page-title {
	border-bottom: 1px solid var(--k-border);
	margin-top: 0;
	padding-bottom: var(--k-space-sm);
}

/* ==========================================================================
   7b. Kanal
   To spalter paa laptop, under hinanden paa mobil.
   Taleboblen gaar helt ud til kanten - den er kanalens ansigt, og margener
   ville goere den til en boks blandt andre bokse.
   ========================================================================== */

.k-kanal-wrap {
	margin: 0 auto;
	max-width: 1024px;
}

.k-kanal-indhold,
.k-kanal-klump {
	padding: 0 var(--k-gutter);
}

/* Taleboblen. Portraettet flyder til hoejre, saa teksten loeber udenom -
   ikke to soejler ved siden af hinanden, men een sammenhaengende blok. */
.k-boble {
	background: var(--k-brand);
	color: #fff;
	margin-bottom: var(--k-space-lg);
	overflow: hidden;
	padding: var(--k-space-md);
}

.k-boble-portraet {
	float: right;
	margin: calc(var(--k-space-md) * -1) calc(var(--k-space-md) * -1) var(--k-space-sm) var(--k-space-md);
	width: 38%;
}

.k-boble-portraet img {
	aspect-ratio: 3 / 4;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.k-boble-tekst p {
	font-size: var(--k-size-small);
	line-height: 1.5;
	margin: 0 0 var(--k-space-sm);
}

.k-boble-tekst p:last-child {
	margin-bottom: 0;
}

.k-boble-tekst a {
	color: #fff;
}

/* Udfold-knappen. Staar nederst til hoejre, under portraettet. */
.k-boble-mere {
	clear: both;
	margin: var(--k-space-sm) 0 0;
	text-align: right;
}

.k-mere-knap {
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.6);
	color: #fff;
	font-size: var(--k-size-small);
	letter-spacing: 0.03em;
	min-height: var(--k-tap);
	padding: 0 var(--k-space-md);
	text-transform: uppercase;
}

.k-mere-knap:hover,
.k-mere-knap:focus {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
}

/* Klumpen. Foldet sammen paa mobil, altid synlig paa laptop. */
.k-kanal-klump {
	display: none;
	margin-bottom: var(--k-space-lg);
	position: relative;
}

.k-kanal-klump.is-open {
	display: block;
}

.k-klump-luk {
	background: none;
	border: 0;
	color: var(--k-text-muted);
	font-size: 1.75rem;
	line-height: 1;
	min-height: var(--k-tap);
	min-width: var(--k-tap);
	padding: 0;
	position: absolute;
	right: var(--k-space-xs);
	top: 0;
}

.k-klump-luk:hover,
.k-klump-luk:focus {
	background: none;
	color: var(--k-text);
}

.k-kanal-klump img {
	height: auto;
	max-width: 100%;
}

/* ==========================================================================
   7c. Opslag i kanalen
   ========================================================================== */

.k-opslag + .k-opslag {
	border-top: 1px solid var(--k-border);
	margin-top: var(--k-space-lg);
	padding-top: var(--k-space-lg);
}

/* Plads over ankeret, saa overskriften ikke rammer toppen af skaermen. */
.k-opslag {
	scroll-margin-top: var(--k-space-md);
}

.k-opslag-dato {
	margin: 0 0 var(--k-space-xs);
}

.k-opslag-dato a {
	color: var(--k-text-muted);
	font-family: var(--k-font-ui);
	font-size: var(--k-size-small);
	text-decoration: none;
}

.k-opslag-dato a:hover,
.k-opslag-dato a:focus {
	text-decoration: underline;
}

.k-opslag-titel {
	font-size: var(--k-size-h3);
	margin: 0 0 var(--k-space-sm);
}

.k-opslag-billede {
	margin: 0 calc(var(--k-gutter) * -1) var(--k-space-md);
}

.k-opslag-billede img {
	display: block;
	width: 100%;
}

.k-opslag-cta {
	margin: var(--k-space-md) 0 0;
}

/* Klumper indsat med [klump]. */
.k-klump + .k-klump {
	margin-top: var(--k-space-md);
}

/* ==========================================================================
   8. Navigation mellem indlaeg og sider
   ========================================================================== */

.k-post-navigation,
.k-posts-navigation {
	border-top: 1px solid var(--k-border);
	font-family: var(--k-font-ui);
	margin-top: var(--k-space-xl);
	padding-top: var(--k-space-md);
}

.k-post-navigation .nav-links,
.k-posts-navigation .nav-links {
	display: flex;
	flex-direction: column;
	gap: var(--k-space-sm);
}

.k-post-navigation a,
.k-posts-navigation a {
	display: block;
	min-height: var(--k-tap);
	padding: var(--k-space-xs) 0;
}

/* ==========================================================================
   9. Formularer
   Felter er mindst 16px for at undroe iOS' auto-zoom ved fokus.
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
	background: var(--k-bg);
	border: 1px solid var(--k-border-strong);
	border-radius: 4px;
	color: var(--k-text);
	font-family: var(--k-font-ui);
	font-size: 1rem;
	min-height: var(--k-tap);
	padding: var(--k-space-xs) var(--k-space-sm);
	width: 100%;
}

textarea {
	min-height: 8rem;
}

label {
	display: block;
	font-family: var(--k-font-ui);
	font-size: var(--k-size-small);
	font-weight: 600;
	margin-bottom: 0.25rem;
}

button,
input[type="submit"],
.k-button {
	background: var(--k-brand);
	border: 0;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-family: var(--k-font-ui);
	font-size: 1rem;
	font-weight: 600;
	min-height: var(--k-tap);
	padding: var(--k-space-xs) var(--k-space-md);
	text-decoration: none;
}

button:hover,
input[type="submit"]:hover,
.k-button:hover {
	background: var(--k-brand-dark);
	color: #fff;
}

.k-search-form {
	display: flex;
	gap: var(--k-space-xs);
}

/* ==========================================================================
   10. Footer
   ========================================================================== */

.k-site-footer {
	background: var(--k-surface);
	border-top: 1px solid var(--k-border);
	font-family: var(--k-font-ui);
	font-size: var(--k-size-small);
	padding: var(--k-space-lg) 0;
}

.k-site-footer a {
	color: var(--k-brand-dark);
}

.k-footer-nav ul {
	list-style: none;
	margin: 0 0 var(--k-space-md);
	padding: 0;
}

.k-footer-nav a {
	display: block;
	min-height: var(--k-tap);
	padding: var(--k-space-xs) 0;
}

/* ==========================================================================
   11. WordPress' egne klasser
   ========================================================================== */

.alignleft,
.alignright,
.aligncenter,
.alignnone {
	display: block;
	height: auto;
	margin: var(--k-space-md) auto;
}

.wp-caption {
	margin-bottom: var(--k-space-md);
	max-width: 100%;
}

.wp-caption-text {
	color: var(--k-text-muted);
	font-family: var(--k-font-ui);
	font-size: var(--k-size-small);
	margin-top: var(--k-space-xs);
}

.sticky .k-entry-title::after {
	content: " \2605";
	color: var(--k-brand);
}

.k-pagination {
	font-family: var(--k-font-ui);
	margin-top: var(--k-space-xl);
}

.k-pagination .page-numbers {
	display: inline-block;
	min-width: var(--k-tap);
	padding: var(--k-space-xs);
	text-align: center;
}

/* ==========================================================================
   12. Breakpoint: 1024px
   Alt ovenfor er mobil-portraet. Herunder justeres kun det noedvendige,
   saa tablet og laptop virker ordentligt - de er ikke maalet.
   Vaerdien skal matche KRONISK_BREAKPOINT i functions.php.
   ========================================================================== */

@media (min-width: 1024px) {
	:root {
		--k-size-h1: 2.25rem;
		--k-size-h2: 1.625rem;
		--k-size-h3: 1.25rem;
		--k-gutter: 2rem;
	}

	.k-menu-toggle {
		display: none;
	}

	.k-main-navigation {
		display: block;
		flex-basis: auto;
		margin: 0;
	}

	.k-main-navigation ul {
		display: flex;
		gap: var(--k-space-md);
	}

	.k-main-navigation a {
		border-top: 0;
		font-size: var(--k-size-small);
		font-weight: 600;
		letter-spacing: 0.02em;
		padding: var(--k-space-xs) 0;
		text-transform: uppercase;
	}

	/* Kanalen: smal spalte til venstre, opslag til hoejre.
	   Hoejre spalte lander omkring 600px, altsaa naesten praecis den
	   laesebredde resten af sitet bruger. */
	.k-kanal-wrap {
		align-items: start;
		display: grid;
		gap: var(--k-space-lg);
		grid-template-columns: 340px minmax(0, 1fr);
		padding: 0 var(--k-gutter);
	}

	.k-kanal-side,
	.k-kanal-indhold {
		min-width: 0;
	}

	.k-kanal-indhold,
	.k-kanal-klump {
		padding: 0;
	}

	/* Klumpen staar altid aaben; knapperne hoerer mobilen til. */
	.k-kanal-klump {
		display: block;
	}

	.k-boble-mere,
	.k-klump-luk {
		display: none;
	}

	.k-featured-image,
	.k-opslag-billede {
		margin-left: 0;
		margin-right: 0;
	}

	.k-post-navigation .nav-links,
	.k-posts-navigation .nav-links {
		flex-direction: row;
		justify-content: space-between;
	}
}

/* ==========================================================================
   13. Print og reduceret bevaegelse
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

@media print {
	.k-site-header,
	.k-site-footer,
	.k-post-navigation,
	.k-posts-navigation,
	.skip-link {
		display: none;
	}

	body {
		color: #000;
		font-size: 12pt;
	}
}