/*
 * FHKF theme – responsive layout and light/dark colour schemes.
 *
 * Loaded after style.css, so the legacy rules can be overridden safely.
 * The colour scheme follows prefers-color-scheme until the visitor uses
 * the toggle, which stores an explicit choice in localStorage.
 */

/* --------------------------------------------------
 * Design tokens – light (default)
 * -------------------------------------------------- */
:root {
	--fhkf-bg: #404040;
	--fhkf-page: #ffffff;
	--fhkf-surface-alt: #f2f2f0;
	--fhkf-text: #333333;
	--fhkf-muted: #666666;
	--fhkf-heading: #666666;
	--fhkf-link: #666666;
	--fhkf-accent: #976022;
	--fhkf-border: #111111;
	--fhkf-border-soft: #e3e3e3;
	--fhkf-input-bg: #ffffff;
	--fhkf-content-bullet-image: url(images/link.png);
	--fhkf-sidebar-icon-page: url(images/post_grey.gif);
	--fhkf-sidebar-icon-category: url(images/categories_grey.gif);
	--fhkf-sidebar-icon-subcategory: url(images/sub_categories_grey.gif);
	--fhkf-sidebar-bullet-color: transparent;
	--fhkf-header-image: url(images/fhkf_header.jpg);
	--fhkf-footer-divider: url(images/dotted_line.png);
	--fhkf-arrow-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 1.5L8 8l-6 6.5h3L11 8 5 1.5z' fill='%23cccccc'/%3E%3Crect x='13' y='1.5' width='1.2' height='13' fill='%23cccccc'/%3E%3C/svg%3E");
	--fhkf-arrow-hover-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 1.5L8 8l-6 6.5h3L11 8 5 1.5z' fill='%23976022'/%3E%3Crect x='13' y='1.5' width='1.2' height='13' fill='%23976022'/%3E%3C/svg%3E");
	--fhkf-shadow: rgba(0, 0, 0, 0.45);
	color-scheme: light;
}

/* --------------------------------------------------
 * Design tokens – dark (explicit choice)
 * -------------------------------------------------- */
:root[data-theme="dark"] {
	--fhkf-bg: #0d0f12;
	--fhkf-page: #171a1f;
	--fhkf-surface-alt: #20242b;
	--fhkf-text: #e2e5e9;
	--fhkf-muted: #a6acb6;
	--fhkf-heading: #cdd2d9;
	--fhkf-link: #c7ccd4;
	--fhkf-accent: #dda36a;
	--fhkf-border: #2b3038;
	--fhkf-border-soft: #343a44;
	--fhkf-input-bg: #11141a;
	--fhkf-content-bullet-image: none;
	--fhkf-sidebar-icon-page: none;
	--fhkf-sidebar-icon-category: none;
	--fhkf-sidebar-icon-subcategory: none;
	--fhkf-sidebar-bullet-color: var(--fhkf-muted);
	--fhkf-header-image: url(images/fhkf_header-dark.png);
	--fhkf-footer-divider: url(images/dotted_line-dark.png);
	--fhkf-arrow-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 1.5L8 8l-6 6.5h3L11 8 5 1.5z' fill='%235a616c'/%3E%3Crect x='13' y='1.5' width='1.2' height='13' fill='%235a616c'/%3E%3C/svg%3E");
	--fhkf-arrow-hover-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 1.5L8 8l-6 6.5h3L11 8 5 1.5z' fill='%23dda36a'/%3E%3Crect x='13' y='1.5' width='1.2' height='13' fill='%23dda36a'/%3E%3C/svg%3E");
	--fhkf-shadow: rgba(0, 0, 0, 0.7);
	color-scheme: dark;
}

/* --------------------------------------------------
 * Design tokens – dark (system preference, no JS yet)
 * -------------------------------------------------- */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		--fhkf-bg: #0d0f12;
		--fhkf-page: #171a1f;
		--fhkf-surface-alt: #20242b;
		--fhkf-text: #e2e5e9;
		--fhkf-muted: #a6acb6;
		--fhkf-heading: #cdd2d9;
		--fhkf-link: #c7ccd4;
		--fhkf-accent: #dda36a;
		--fhkf-border: #2b3038;
		--fhkf-border-soft: #343a44;
		--fhkf-input-bg: #11141a;
		--fhkf-content-bullet-image: none;
		--fhkf-sidebar-icon-page: none;
		--fhkf-sidebar-icon-category: none;
		--fhkf-sidebar-icon-subcategory: none;
		--fhkf-sidebar-bullet-color: var(--fhkf-muted);
		--fhkf-header-image: url(images/fhkf_header-dark.png);
		--fhkf-footer-divider: url(images/dotted_line-dark.png);
		--fhkf-arrow-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 1.5L8 8l-6 6.5h3L11 8 5 1.5z' fill='%235a616c'/%3E%3Crect x='13' y='1.5' width='1.2' height='13' fill='%235a616c'/%3E%3C/svg%3E");
		--fhkf-arrow-hover-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 1.5L8 8l-6 6.5h3L11 8 5 1.5z' fill='%23dda36a'/%3E%3Crect x='13' y='1.5' width='1.2' height='13' fill='%23dda36a'/%3E%3C/svg%3E");
		--fhkf-shadow: rgba(0, 0, 0, 0.7);
		color-scheme: dark;
	}
}

/* --------------------------------------------------
 * Colours
 * -------------------------------------------------- */
body {
	background-color: var(--fhkf-bg);
	color: var(--fhkf-text);
}

h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a {
	color: var(--fhkf-heading);
}

a {
	color: var(--fhkf-link);
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
a:hover {
	color: var(--fhkf-accent);
}

#container,
#header,
#footer {
	background-color: var(--fhkf-page);
	border-color: var(--fhkf-border);
}

#header {
	background-image: var(--fhkf-header-image);
}

#footer {
	background-image: var(--fhkf-footer-divider);
}

#content {
	background-color: transparent;
}

#subcontent {
	color: var(--fhkf-muted);
	border-right-color: var(--fhkf-border-soft);
}

#subcontent ul li {
	border-bottom-color: var(--fhkf-border-soft);
}

#subcontent ul li:hover {
	border-bottom-color: var(--fhkf-accent);
}

#level1highlight,
#level2highlight,
#level3highlight,
#level1current,
#level2current,
#level3current {
	color: var(--fhkf-accent);
}

blockquote {
	background-color: var(--fhkf-surface-alt);
}

pre,
code,
kbd {
	background-color: var(--fhkf-surface-alt);
	color: var(--fhkf-text);
}

pre {
	max-width: 100%;
	overflow-x: auto;
}

.wp-caption {
	background-color: var(--fhkf-surface-alt);
	border-color: var(--fhkf-border-soft);
	max-width: 100%;
	box-sizing: border-box;
}

.landingsites,
.catinfo {
	border-color: var(--fhkf-border-soft);
}

#footertext {
	color: var(--fhkf-muted);
}

#contactsubmit {
	background-color: var(--fhkf-surface-alt);
	color: var(--fhkf-text);
	border-color: var(--fhkf-border-soft);
	border-radius: 4px;
}

/* Recolour the legacy GIF/PNG bullet so it stays subtle in dark mode. */
.post,
.headline,
.post:hover,
.headline:hover {
	background-image: none;
}

.post,
.headline {
	position: relative;
}

.post::before,
.headline::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 0;
	width: 16px;
	height: 16px;
	background-image: var(--fhkf-arrow-image);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	pointer-events: none;
}

.post:hover::before,
.headline:hover::before {
	background-image: var(--fhkf-arrow-hover-image);
}

/* Theme-aware list markers (the legacy icons have white backgrounds). */
#content ul li {
	list-style-image: var(--fhkf-content-bullet-image);
}

#subcontent ul.pages li,
#subcontent ul.posts li {
	background-image: var(--fhkf-sidebar-icon-page);
}

#subcontent ul.categories li,
#subcontent ul.months li {
	background-image: var(--fhkf-sidebar-icon-category);
}

#subcontent ul.categories li li,
#subcontent ul.pages li li {
	background-image: var(--fhkf-sidebar-icon-subcategory);
}

#subcontent ul.pages li,
#subcontent ul.posts li,
#subcontent ul.categories li,
#subcontent ul.months li,
#subcontent ul.categories li li,
#subcontent ul.pages li li {
	position: relative;
}

#subcontent ul.pages li::before,
#subcontent ul.posts li::before,
#subcontent ul.categories li::before,
#subcontent ul.months li::before,
#subcontent ul.categories li li::before,
#subcontent ul.pages li li::before {
	content: "";
	position: absolute;
	top: 0.62em;
	left: 2px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--fhkf-sidebar-bullet-color);
	pointer-events: none;
}

/* --------------------------------------------------
 * Form controls
 * -------------------------------------------------- */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="password"],
input[type="number"],
textarea,
select {
	background-color: var(--fhkf-input-bg);
	color: var(--fhkf-text);
	border: 1px solid var(--fhkf-border-soft);
	border-radius: 4px;
	padding: 6px 8px;
	max-width: 100%;
	box-sizing: border-box;
}

#navigation #s {
	background-color: var(--fhkf-input-bg);
	color: var(--fhkf-text);
	border-color: var(--fhkf-border-soft);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--fhkf-accent);
	outline-offset: 2px;
}

/* --------------------------------------------------
 * Media and wide content
 * -------------------------------------------------- */
#content img,
#subcontent img,
.entry img,
.landingsites img,
.catinfo img,
.wp-caption img {
	max-width: 100%;
	height: auto;
}

#content iframe,
#content embed,
#content object,
#content video {
	max-width: 100%;
}

#content table {
	max-width: 100%;
}

#content {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* --------------------------------------------------
 * Screen-reader text + skip link
 * -------------------------------------------------- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link:focus {
	background-color: var(--fhkf-page);
	color: var(--fhkf-text);
	clip: auto;
	clip-path: none;
	display: block;
	height: auto;
	left: 12px;
	padding: 10px 16px;
	top: 12px;
	width: auto;
	z-index: 100000;
	border: 2px solid var(--fhkf-accent);
	border-radius: 4px;
}

body.admin-bar .skip-link:focus {
	top: 44px;
}

/* --------------------------------------------------
 * Header tools (theme + menu buttons)
 * -------------------------------------------------- */
#header {
	position: relative;
}

#header > * {
	position: relative;
	z-index: 1;
}

.header-tools {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	gap: 8px;
	z-index: 3;
}

.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--fhkf-border-soft);
	border-radius: 999px;
	background-color: var(--fhkf-page);
	color: var(--fhkf-heading);
	cursor: pointer;
	line-height: 1;
	-webkit-appearance: none;
	appearance: none;
	transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.icon-btn:hover {
	color: var(--fhkf-accent);
	border-color: var(--fhkf-accent);
}

.icon-btn svg {
	display: block;
	width: 20px;
	height: 20px;
	pointer-events: none;
}

.theme-toggle {
	display: none;
}

html.ready .theme-toggle {
	display: inline-flex;
}

.theme-toggle .icon-sun {
	display: none;
}

html[data-theme="dark"] .theme-toggle .icon-sun {
	display: block;
}

html[data-theme="dark"] .theme-toggle .icon-moon {
	display: none;
}

.menu-toggle {
	display: none;
}

.menu-close {
	display: none;
}

/* Desktop: keep the bat watermark subtle in dark mode too. */
html[data-theme="dark"] #subcontent {
	background-color: var(--fhkf-page);
	background-blend-mode: multiply;
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme]) #subcontent {
		background-color: var(--fhkf-page);
		background-blend-mode: multiply;
	}
}

/* --------------------------------------------------
 * Desktop: keep the original 922px frame, but fluid
 * -------------------------------------------------- */
@media (min-width: 961px) {
	#header,
	#container,
	#footer {
		width: min(922px, 100%);
		box-sizing: border-box;
	}
}

/* --------------------------------------------------
 * Tablet / mobile layout
 * -------------------------------------------------- */
@media (max-width: 960px) {
	body {
		padding: 0;
		font-size: 100%;
		line-height: 1.65;
	}

	#header,
	#container,
	#footer {
		width: 100%;
		box-sizing: border-box;
		border-left: 0;
		border-right: 0;
	}

	#header {
		display: flex;
		flex-direction: column;
		height: auto;
		min-height: 0;
		padding: 12px 16px 0;
		background-image: none;
		border-top: 0;
	}

	#header::before {
		content: "";
		display: block;
		order: 3;
		width: 100%;
		aspect-ratio: 902 / 95;
		margin-top: 12px;
		background-image: var(--fhkf-header-image);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	#header > div:first-child {
		float: none !important;
		order: 2;
		width: 100%;
	}

	.header-tools {
		position: static;
		order: 1;
		align-self: flex-end;
		margin: 0 0 8px;
	}

	.icon-btn {
		width: 44px;
		height: 44px;
	}

	.icon-btn svg {
		width: 22px;
		height: 22px;
	}

	#header h1 {
		padding: 0;
		font-size: clamp(1.25rem, 5.6vw, 1.7rem);
		line-height: 1.25;
	}

	#startseite {
		padding: 6px 0 0;
		font-size: 0.95em;
	}

	#container {
		padding-top: 0;
	}

	#content {
		float: none;
		width: auto;
		margin: 0;
		padding: 16px;
		text-align: left;
		box-sizing: border-box;
	}

	#hello,
	#eventbox {
		float: none;
		width: auto;
	}

	#eventbox {
		margin: 20px 0 0;
		padding: 14px 0 0;
		border-left: 0;
		border-top: 1px dotted var(--fhkf-border-soft);
	}

	#content h2 {
		float: none;
		font-size: 1.4em;
		line-height: 1.3;
	}

	h2.pagetitle {
		font-size: 1.4em;
	}

	.post {
		height: auto;
		min-height: 0;
		overflow: visible;
		padding-bottom: 10px;
	}

	div .title {
		height: auto;
		min-height: 0;
		padding-bottom: 4px;
	}

	/* The legacy templates use <br> tags for desktop float spacing. */
	div .title br {
		display: none;
	}

	.archivinfo {
		float: none;
		margin-top: 4px;
	}

	#info {
		width: auto;
		height: auto;
	}

	/* Image alignment inside posts */
	img.alignleft,
	img.alignright {
		max-width: 100%;
		height: auto;
	}

	/* Contact form */
	#contactform {
		width: 100%;
	}

	label.contactleft {
		float: none;
		width: auto;
		margin-top: 10px;
		text-align: left;
	}

	.contactright,
	.contactselect {
		float: none;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	#contactsubmit {
		width: auto;
		min-width: 50%;
		padding: 10px 18px;
	}

	/* Footer */
	#footer {
		height: auto;
		padding: 0 0 16px;
		padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	}

	#footertext {
		padding: 14px 16px;
		line-height: 1.7;
	}

	/* Search */
	#navigation fieldset {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 0;
		line-height: normal;
	}

	#navigation #s {
		flex: 1 1 auto;
		width: auto;
		height: 42px;
		margin: 0;
		padding: 8px 12px;
		font-size: 16px;
	}

	#navigation fieldset input[type="image"] {
		flex: 0 0 auto;
		width: 42px;
		height: 42px;
		padding: 10px;
		box-sizing: border-box;
		border: 1px solid var(--fhkf-border-soft);
		border-radius: 6px;
		background-color: var(--fhkf-input-bg);
	}

	/* Comfortable tap targets in the navigation */
	#subcontent ul.pages > li > a,
	#subcontent ul.categories > li > a {
		padding-top: 6px;
		padding-bottom: 6px;
	}

	/* --------------------------------------------------
	 * Sidebar as a slide-in drawer (JS enhancement)
	 * -------------------------------------------------- */
	html.ready #subcontent {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 99990;
		display: block;
		float: none;
		width: min(22rem, 86vw);
		max-width: 100%;
		margin: 0;
		padding: 16px 20px 32px;
		padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
		overflow-y: auto;
		overscroll-behavior: contain;
		border-top: 0;
		border-right: 1px solid var(--fhkf-border-soft);
		background-color: var(--fhkf-page);
		box-shadow: 0 0 40px var(--fhkf-shadow);
		transform: translateX(-102%);
		visibility: hidden;
		transition: transform 0.22s ease, visibility 0.22s ease;
		box-sizing: border-box;
	}

	html.ready.menu-open #subcontent {
		transform: translateX(0);
		visibility: visible;
	}

	html.ready.menu-open,
	html.ready.menu-open body {
		overflow: hidden;
	}

	html.ready.menu-open .header-tools {
		visibility: hidden;
	}

	#nav-overlay {
		display: none;
	}

	html.ready.menu-open #nav-overlay {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 99980;
		background-color: rgba(0, 0, 0, 0.55);
	}

	.menu-close {
		display: none;
	}

	html.ready #subcontent .menu-close {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		margin: 0 0 14px;
		padding: 10px 14px;
		border: 1px solid var(--fhkf-border-soft);
		border-radius: 6px;
		background-color: var(--fhkf-surface-alt);
		color: var(--fhkf-text);
		font: inherit;
		cursor: pointer;
	}

	html.ready #subcontent .menu-close svg {
		width: 18px;
		height: 18px;
	}

	html.ready .menu-toggle {
		display: inline-flex;
	}

	/* Without JavaScript the sidebar simply follows the content. */
	html:not(.ready) #subcontent {
		position: static;
		float: none;
		width: auto;
		margin: 0;
		padding: 16px;
		border-top: 1px solid var(--fhkf-border-soft);
		border-right: 0;
		box-shadow: none;
		transform: none;
		visibility: visible;
	}
}

/* Keep the drawer below the WordPress admin bar. */
@media (max-width: 782px) {
	html.ready body.admin-bar #subcontent,
	html.ready body.admin-bar #nav-overlay {
		top: 46px;
	}
}

@media (min-width: 783px) {
	html.ready body.admin-bar #subcontent,
	html.ready body.admin-bar #nav-overlay {
		top: 32px;
	}
}

/* --------------------------------------------------
 * Small phones
 * -------------------------------------------------- */
@media (max-width: 600px) {
	.alignleft,
	.alignright,
	img.alignleft,
	img.alignright {
		float: none;
		display: block;
		margin-left: auto;
		margin-right: auto;
		max-width: 100%;
	}

	.landingsites {
		background-image: none;
	}

	.post h2,
	#content h2 {
		font-size: 1.3em;
	}

	ol.snap_nav li {
		padding: 0 10px 8px 0;
	}

	#footertext a {
		display: inline-block;
		padding: 2px 0;
	}
}

/* --------------------------------------------------
 * Reduced motion
 * -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.icon-btn,
	html.ready #subcontent {
		transition: none;
	}
}