/*
 * Gemeinsamer Seitenkopf fuer WordPress und die eigenen PHP-Seiten.
 * HTML: data/php/kopfbereich.php (SKKopf::Html)
 */

@font-face {
	font-family: Cardo;
	font-style: normal;
	font-weight: 400;
	font-display: fallback;
	src: url('/wp/wp-content/themes/twentytwentyfour/assets/fonts/cardo/cardo_normal_400.woff2') format('woff2');
}

@font-face {
	font-family: Cardo;
	font-style: normal;
	font-weight: 700;
	font-display: fallback;
	src: url('/wp/wp-content/themes/twentytwentyfour/assets/fonts/cardo/cardo_normal_700.woff2') format('woff2');
}

@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 300 900;
	font-display: fallback;
	src: url('/wp/wp-content/themes/twentytwentyfour/assets/fonts/inter/Inter-VariableFont_slnt,wght.woff2') format('woff2');
}

.sk-kopf {
	/* durchgehendes, deckendes Band ueber die volle Fensterbreite: die Eltern (WP: header,
	   PHP: body) haben je 3mm Rand, der hier ausgeglichen wird */
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0 -3mm;
	padding: 10px 24px 11px 24px;
	background: #fffdf8;
	border-bottom: 3px solid #8c7a63;
	box-shadow: 0 3px 10px rgba(60, 45, 30, 0.12);
	font-family: Inter, sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: #3b2f22;
}

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

/* Bootstrap 3 (PHP-Seiten) setzt html auf 10px und eigene Linkfarben: hier alles fest vorgeben */
.sk-kopf a,
.sk-kopf a:link,
.sk-kopf a:visited,
.sk-kopf a:hover,
.sk-kopf a:focus {
	color: inherit;
	text-decoration: none;
	outline: none;
}

/* Logo */
.sk-kopf-logo {
	flex: 0 0 auto;
	display: block;
	line-height: 0;
}

.sk-kopf-logo img {
	width: 96px;
	height: 96px;
	object-fit: contain;
	filter: drop-shadow(0 2px 3px rgba(60, 45, 30, 0.18));
}

/* Vereinsname + Flyer */
.sk-kopf-verein {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 7.2px;
}

.sk-kopf-name {
	font-family: Cardo, Georgia, "Times New Roman", serif;
	font-size: clamp(26px, 2.6vw, 36px); /* bei mittlerer Breite kleiner, damit er einzeilig bleibt */
	white-space: nowrap;
	font-weight: 700;
	line-height: 1.05;
	color: #2b2118;
	letter-spacing: 0.01em;
}

.sk-kopf a.sk-kopf-name:link,
.sk-kopf a.sk-kopf-name:visited,
.sk-kopf a.sk-kopf-name:hover {
	color: #2b2118;
	text-decoration: none;
}

.sk-kopf-flyer {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 5.6px;
	font-size: 13.6px;
	color: #5b4a37;
	padding: 2px 10px;
	border: 1px solid #d8cdb8;
	border-radius: 999px;
	background: #fff;
}

.sk-kopf a.sk-kopf-flyer:link,
.sk-kopf a.sk-kopf-flyer:visited {
	color: #5b4a37;
}

.sk-kopf a.sk-kopf-flyer:hover {
	background: #fff;
	color: #3b2f22;
	text-decoration: none;
}

.sk-kopf-flyer img {
	display: block;
}

/* Kasten mit den naechsten Terminen */
.sk-kopf-box {
	flex: 0 1 420px;
	min-width: 260px;
	margin-left: auto;
	background: #f7f1e5;
	border: 1px solid #e3d9c6;
	border-left: 4px solid #8c7a63;
	border-radius: 8px;
	padding: 7px 14px 8px 14px;
}

.sk-kopf-label {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8c7a63;
	margin-bottom: 2px;
}

.sk-kopf-box ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sk-kopf-box li {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 2px 0;
	font-size: 15px;
	line-height: 1.35;
}

.sk-kopf-box li + li {
	border-top: 1px dotted #e3d9c6;
}

.sk-kopf-datum {
	flex: 0 0 auto;
	min-width: 5.6em;
	color: #7a6a55;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.sk-kopf-wtag {
	font-weight: 600;
}

.sk-kopf-titel {
	font-weight: 500;
	color: #3b2f22;
}

.sk-kopf .sk-kopf-titel a,
.sk-kopf .sk-kopf-titel a:link,
.sk-kopf .sk-kopf-titel a:visited {
	color: #3b2f22;
	text-decoration: underline dotted #b9a78c;
	text-underline-offset: 3px;
}

.sk-kopf .sk-kopf-titel a:hover {
	color: #000;
	text-decoration: underline;
}

.sk-kopf a.sk-kopf-kurs,
.sk-kopf a.sk-kopf-kurs:link,
.sk-kopf a.sk-kopf-kurs:visited {
	font-weight: 600;
	color: #5b4a37;
}

.sk-kopf a.sk-kopf-kurs:hover {
	text-decoration: underline;
}

/* PHP-Seiten: keine Trennlinie unter dem Kopf (wie bei WordPress) */
.sk_header ~ div.end_header {
	border: 0;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 20px; /* Luft zwischen Kopf-Band und Seiteninhalt */
}

/* Handy: kompaktes Band - kleines Logo, Name daneben, Termine als schmaler Block darunter */
@media (max-width: 767px) /* wie Bootstrap-Menue */ {
	.sk-kopf {
		display: grid;
		grid-template-columns: 56px 1fr;
		column-gap: 12px;
		row-gap: 8px;
		align-items: center;
		padding: 8px 12px 10px 12px;
	}
	.sk-kopf-logo img {
		width: 56px;
		height: 56px;
	}
	.sk-kopf-verein {
		gap: 2px;
	}
	.sk-kopf-name {
		font-size: 20px;
		line-height: 1.15;
		white-space: normal;
	}
	.sk-kopf-flyer {
		padding: 0;
		border: 0;
		background: none;
		font-size: 12px;
	}
	.sk-kopf-flyer img {
		width: 12px;
		height: 12px;
	}
	.sk-kopf-box {
		grid-column: 1 / -1;
		min-width: 0;
		margin-left: 0;
		padding: 4px 10px;
		border-left-width: 3px;
	}
	.sk-kopf-label {
		display: none;
	}
	.sk-kopf-box li {
		gap: 8px;
		padding: 2px 0;
		font-size: 14px;
	}
	.sk-kopf-datum {
		min-width: 4.6em;
	}
	.sk-kopf a.sk-kopf-kurs {
		display: block;
		padding: 2px 0;
		font-size: 14px;
	}
}

@media print {
	.sk-kopf-box,
	.sk-kopf-flyer {
		display: none;
	}
}

/* WordPress: Band direkt unter der Menueleiste, ohne Abstand */
header.wp-block-template-part:has(.sk-kopf) {
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
}

/* WordPress: gleiche Luft zwischen Kopf-Band und Inhalt wie auf den PHP-Seiten */
header.wp-block-template-part:has(.sk-kopf) + * {
	margin-top: 20px;
}