/*
 * Clicdesign Theme
 *
 * CD-09  Alle Designwerte stammen aus theme.json. Die --cd-* Tokens sind
 *        nur lesbare Namen fuer die Presets, die WordPress daraus erzeugt.
 * CD-11  Keine Inline-Styles.
 * CD-12  Kundenanpassungen gehoeren ins Child-Theme, nicht hierhin.
 *
 * 1  Tokens
 * 2  Grundlagen
 * 3  Hilfsklassen und Zugaenglichkeit
 * 4  Layout
 * 5  Kopf und Navigation
 * 6  Fuss
 * 7  Freigegebene Core Blocks
 * 8  Archive, Teaser, Suche
 */

/* ------------------------------------------------------------------ *
 * 1  Tokens
 * ------------------------------------------------------------------ */

:root {
	/* Schrift. Platzhalter bis Fonts und Palette festgelegt sind. */
	--cd-font-head: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--cd-font-text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Abstaende - Spiegel der spacingSizes aus theme.json */
	--cd-space-xs: var(--wp--preset--spacing--xs, 12px);
	--cd-space-sm: var(--wp--preset--spacing--sm, 24px);
	--cd-space-md: var(--wp--preset--spacing--md, 48px);
	--cd-space-lg: var(--wp--preset--spacing--lg, 80px);
	--cd-space-xl: var(--wp--preset--spacing--xl, 128px);

	/* Farben - Spiegel der palette aus theme.json */
	--cd-color-primary:    var(--wp--preset--color--primary, #1a1a1a);
	--cd-color-secondary:  var(--wp--preset--color--secondary, #6b6b6b);
	--cd-color-text:       var(--wp--preset--color--text, #1a1a1a);
	--cd-color-text-muted: var(--wp--preset--color--text-muted, #6b6b6b);
	--cd-color-bg:         var(--wp--preset--color--background, #fff);
	--cd-color-surface:    var(--wp--preset--color--surface, #f4f4f2);
	--cd-color-inverse:    var(--wp--preset--color--inverse, #1a1a1a);
	--cd-color-border:     var(--wp--preset--color--border, #e0e0dd);

	/* Typografie */
	--cd-text:  var(--wp--preset--font-size--medium, clamp(17px, 1.2vw, 20px));
	--cd-lead:  var(--wp--preset--font-size--large, clamp(20px, 1.6vw, 26px));
	--cd-small: var(--wp--preset--font-size--small, clamp(15px, 1vw, 16px));

	/* Layout */
	--cd-container: 1180px;
	--cd-container-wide: 1400px;
	--cd-measure: 68ch;

	/* Kopfzeile */
	--cd-header-height: 80px;

	/* Bewegung */
	--cd-transition: 200ms ease;
}

/* ------------------------------------------------------------------ *
 * 2  Grundlagen
 * ------------------------------------------------------------------ */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--cd-header-height) + var(--cd-space-sm));
}

body {
	margin: 0;
	font-family: var(--cd-font-text);
	font-size: var(--cd-text);
	line-height: 1.6;
	color: var(--cd-color-text);
	background-color: var(--cd-color-bg);
	-webkit-font-smoothing: antialiased;
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--cd-font-head);
	font-weight: 600;
	line-height: 1.1;
	text-wrap: balance;
	margin-block: 0 var(--cd-space-sm);
}

p {
	margin-block: 0 var(--cd-space-sm);
}

:where(p, li) {
	text-wrap: pretty;
}

a {
	color: currentColor;
}

/* CD-19: Fokus muss immer sichtbar sein. */
:focus-visible {
	outline: 2px solid var(--cd-color-primary);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ------------------------------------------------------------------ *
 * 3  Hilfsklassen und Zugaenglichkeit
 * ------------------------------------------------------------------ */

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

.cd-skip-link:focus {
	position: fixed !important;
	top: var(--cd-space-xs);
	left: var(--cd-space-xs);
	z-index: 999;
	width: auto;
	height: auto;
	padding: var(--cd-space-xs) var(--cd-space-sm);
	clip-path: none;
	color: var(--cd-color-bg);
	background: var(--cd-color-primary);
	text-decoration: none;
}

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

.cd-container {
	width: 100%;
	max-width: var(--cd-container);
	margin-inline: auto;
	padding-inline: var(--cd-space-sm);
}

.cd-main {
	display: block;
	min-height: 40vh;
}

/*
 * Inhaltslayout.
 *
 * In einem klassischen Theme erzeugt WordPress um the_content() keinen
 * Layout-Container. Die Breitenbegrenzung machen wir deshalb selbst -
 * das ist die Entsprechung zu layout.contentSize aus theme.json.
 *
 * Seiten beginnen bewusst buendig unter dem Kopf: Sections bringen ihre
 * eigene vertikale Luft mit.
 */

.cd-page__content > *,
.cd-single__content > * {
	max-width: var(--cd-container);
	margin-inline: auto;
	padding-inline: var(--cd-space-sm);
}

.cd-page__content > .alignwide,
.cd-single__content > .alignwide {
	max-width: var(--cd-container-wide);
}

.cd-page__content > .alignfull,
.cd-single__content > .alignfull {
	max-width: none;
	padding-inline: 0;
}

/*
 * Fliesstext im Beitrag bekommt eine lesbare Zeilenlaenge.
 * Muss nach der Regel oben stehen, sonst gewinnt die Containerbreite.
 */
.cd-single__content > :where(p, ul, ol, h2, h3, h4, blockquote) {
	max-width: var(--cd-measure);
}

/* ------------------------------------------------------------------ *
 * 5  Kopf und Navigation
 * ------------------------------------------------------------------ */

.cd-header {
	position: relative;
	z-index: 100;
	border-bottom: 1px solid var(--cd-color-border);
	background: var(--cd-color-bg);
}

.cd-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cd-space-sm);
	max-width: var(--cd-container);
	min-height: var(--cd-header-height);
	margin-inline: auto;
	padding-inline: var(--cd-space-sm);
}

.cd-header__title {
	margin: 0;
	font-family: var(--cd-font-head);
	font-size: 1.25rem;
	font-weight: 600;
}

.cd-header__title a {
	text-decoration: none;
}

.cd-header__branding img,
.cd-header__branding .custom-logo {
	max-height: calc(var(--cd-header-height) - var(--cd-space-sm));
	width: auto;
}

/* Burger */

.cd-header__burger {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: inherit;
}

.cd-header__burger-box {
	position: relative;
	display: block;
	width: 24px;
	height: 2px;
}

.cd-header__burger-line,
.cd-header__burger-line::before,
.cd-header__burger-line::after {
	position: absolute;
	left: 0;
	width: 24px;
	height: 2px;
	background: currentColor;
	transition: transform var(--cd-transition), opacity var(--cd-transition);
}

.cd-header__burger-line {
	top: 0;
}

.cd-header__burger-line::before,
.cd-header__burger-line::after {
	content: "";
}

.cd-header__burger-line::before {
	top: -7px;
}

.cd-header__burger-line::after {
	top: 7px;
}

.cd-header__burger[aria-expanded="true"] .cd-header__burger-line {
	background: transparent;
}

.cd-header__burger[aria-expanded="true"] .cd-header__burger-line::before {
	top: 0;
	transform: rotate(45deg);
}

.cd-header__burger[aria-expanded="true"] .cd-header__burger-line::after {
	top: 0;
	transform: rotate(-45deg);
}

/* Navigation - Listen */

.cd-nav__list,
.cd-nav__submenu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cd-nav a {
	display: block;
	text-decoration: none;
	padding-block: var(--cd-space-xs);
}

.cd-nav a[aria-current] {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.cd-nav__toggle {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.cd-nav__chevron {
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--cd-transition);
}

.cd-nav__toggle[aria-expanded="true"] .cd-nav__chevron {
	transform: translateY(2px) rotate(-135deg);
}

/*
 * Der Umbruchpunkt steht bewusst hart im Stylesheet:
 * CSS-Variablen funktionieren in Media Queries nicht.
 */

/* Mobile: Panel */
@media (max-width: 899px) {

	.cd-nav {
		position: fixed;
		inset: var(--cd-header-height) 0 0 0;
		display: none;
		padding: var(--cd-space-md) var(--cd-space-sm);
		overflow-y: auto;
		background: var(--cd-color-bg);
	}

	.cd-nav.is-open {
		display: block;
	}

	.cd-nav__list > li {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		border-bottom: 1px solid var(--cd-color-border);
	}

	.cd-nav__list > li > a {
		font-family: var(--cd-font-head);
		font-size: var(--cd-lead);
		padding-block: var(--cd-space-sm);
	}

	.cd-nav__submenu {
		display: none;
		grid-column: 1 / -1;
		padding-bottom: var(--cd-space-sm);
		padding-left: var(--cd-space-sm);
	}

	.cd-nav__submenu.is-open {
		display: block;
	}

	body.cd-nav-open {
		overflow: hidden;
	}
}

/* Desktop: Zeile mit Dropdown */
@media (min-width: 900px) {

	.cd-header__burger {
		display: none;
	}

	.cd-nav__list {
		display: flex;
		align-items: center;
		gap: var(--cd-space-sm);
	}

	.cd-nav__list > li {
		position: relative;
		display: flex;
		align-items: center;
	}

	.cd-nav__submenu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 10;
		display: none;
		min-width: 220px;
		padding: var(--cd-space-xs);
		border: 1px solid var(--cd-color-border);
		background: var(--cd-color-bg);
	}

	.cd-nav__submenu.is-open {
		display: block;
	}

	.cd-nav__submenu a {
		padding: var(--cd-space-xs);
	}

	.cd-nav__toggle {
		width: 28px;
		height: 28px;
	}
}

/* ------------------------------------------------------------------ *
 * 6  Fuss
 * ------------------------------------------------------------------ */

.cd-footer {
	margin-top: var(--cd-space-xl);
	padding-block: var(--cd-space-md);
	border-top: 1px solid var(--cd-color-border);
	font-size: var(--cd-small);
}

.cd-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cd-space-sm);
	max-width: var(--cd-container);
	margin-inline: auto;
	padding-inline: var(--cd-space-sm);
}

.cd-footer__copyright {
	margin: 0;
	color: var(--cd-color-text-muted);
}

.cd-footer__nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cd-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ------------------------------------------------------------------ *
 * 7  Freigegebene Core Blocks
 *
 * 'wp-block-styles' ist bewusst nicht aktiviert. Was hier nicht
 * gestaltet ist, ist auch nicht freigegeben.
 * ------------------------------------------------------------------ */

.wp-block-button__link {
	display: inline-block;
	font-family: var(--cd-font-head);
	line-height: 1.2;
	text-decoration: none;
	transition: opacity var(--cd-transition);
}

.wp-block-button__link:hover {
	opacity: 0.85;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid currentColor;
	color: var(--cd-color-primary);
	background: transparent;
}

.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cd-space-xs);
}

.wp-block-image figcaption,
.wp-block-gallery figcaption {
	margin-top: var(--cd-space-xs);
	font-size: var(--cd-small);
	color: var(--cd-color-text-muted);
}

.wp-block-quote {
	margin-inline: 0;
	padding-left: var(--cd-space-sm);
	border-left: 2px solid var(--cd-color-border);
	font-size: var(--cd-lead);
}

.wp-block-quote cite {
	display: block;
	margin-top: var(--cd-space-xs);
	font-size: var(--cd-small);
	font-style: normal;
	color: var(--cd-color-text-muted);
}

.wp-block-separator {
	height: 0;
	margin-block: var(--cd-space-md);
	border: 0;
	border-top: 1px solid var(--cd-color-border);
}

.wp-block-columns {
	gap: var(--cd-space-md);
}

/* ------------------------------------------------------------------ *
 * 8  Archive, Teaser, Suche
 * ------------------------------------------------------------------ */

.cd-archive,
.cd-single,
.cd-error {
	padding-block: var(--cd-space-lg);
}

.cd-archive__header,
.cd-single__header {
	margin-bottom: var(--cd-space-lg);
}

.cd-archive__list {
	display: grid;
	gap: var(--cd-space-md);
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}

.cd-teaser__media img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

.cd-teaser__title {
	margin-block: var(--cd-space-xs) var(--cd-space-xs);
	font-size: var(--cd-lead);
}

.cd-teaser__title a {
	text-decoration: none;
}

.cd-teaser__title a:hover {
	text-decoration: underline;
}

.cd-entry__date {
	display: block;
	font-size: var(--cd-small);
	color: var(--cd-color-text-muted);
}

.cd-single__image {
	margin: var(--cd-space-md) 0;
}

.cd-search {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cd-space-xs);
	margin-top: var(--cd-space-sm);
}

.cd-search__field {
	flex: 1 1 220px;
	padding: 12px var(--cd-space-xs);
	border: 1px solid var(--cd-color-border);
	font: inherit;
	color: inherit;
	background: var(--cd-color-bg);
}

.cd-search__submit {
	padding: 12px var(--cd-space-sm);
	border: 0;
	font-family: var(--cd-font-head);
	color: var(--cd-color-bg);
	background: var(--cd-color-primary);
	cursor: pointer;
}

.wp-block-post-navigation-link,
.wp-pagenavi,
.navigation.pagination {
	margin-top: var(--cd-space-lg);
}

.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cd-space-xs);
}

.navigation.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: var(--cd-space-xs);
	border: 1px solid var(--cd-color-border);
	text-decoration: none;
}

.navigation.pagination .page-numbers.current {
	color: var(--cd-color-bg);
	background: var(--cd-color-primary);
	border-color: var(--cd-color-primary);
}