/*
Theme Name: Hubert Kaufmann
Theme URI: https://hubertkaufmann.com
Author: Hubert Kaufmann
Description: Schlankes Block-Theme für hubertkaufmann.com. Ohne Page Builder, ohne jQuery, Schriften lokal.
Version: 1.0.1
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hubertkaufmann
*/

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

html { scrollbar-gutter: stable; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { height: auto; }
strong, b { font-weight: 700; }

/* ---------- Header ---------- */

.hk-header {
	padding-top: 26px;
	padding-bottom: 9px;
	position: relative;
	z-index: 50;
}
.hk-header .wp-block-site-title a { display: inline-block; padding: 17px 0; }

.hk-nav { display: flex; align-items: center; }
.hk-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.hk-nav li { margin: 0; }
.hk-nav a {
	display: block;
	padding: 17px;
	font-family: var(--wp--preset--font-family--outfit);
	font-size: 19px;
	font-weight: 300;
	line-height: 23px;
	letter-spacing: -0.6px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.hk-nav li:last-child > a { padding-right: 0; }
.hk-nav a span,
.hk-nav a .hk-t { position: relative; display: inline-block; }
.hk-nav a .hk-t::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 0;
	height: 2px;
	background: currentColor;
	transition: width .2s;
}
.hk-nav a:hover .hk-t::after,
.hk-nav a:focus-visible .hk-t::after,
.hk-nav .current-menu-item > a .hk-t::after,
.hk-nav .current-menu-parent > a .hk-t::after,
.hk-nav .current-menu-ancestor > a .hk-t::after,
.hk-nav .current_page_item > a .hk-t::after,
.hk-nav .wpml-ls-current-language > a .hk-t::after { width: 100%; }

/* WPML-Farben überschreiben: aktive Sprache schwarz wie die anderen Punkte */
.hk-nav .wpml-ls-item a,
.hk-nav .wpml-ls-current-language > a,
.hk-nav .wpml-ls-item a:hover { color: var(--wp--preset--color--ink) !important; background: none !important; }

/* Untermenüs nicht verwendet: ausblenden */
.hk-nav .sub-menu { display: none; }

/* Mobile Burger */
.hk-burger {
	display: none;
	background: none;
	border: 0;
	padding: 10px 0 10px 10px;
	cursor: pointer;
	color: var(--wp--preset--color--ink);
}
.hk-burger span { display: block; width: 24px; height: 1.5px; background: currentColor; margin: 6px 0; transition: transform .2s, opacity .2s; }

@media (max-width: 767px) {
	.hk-header { padding-top: 14px; padding-bottom: 14px; }
	.hk-burger { display: block; position: relative; z-index: 120; }
	.hk-nav .hk-menu {
		position: fixed;
		inset: 0;
		z-index: 110;
		background: #000;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		gap: 4px;
		padding: 80px 30px;
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s, visibility .25s;
	}
	.hk-nav .hk-menu a,
	.hk-nav .hk-menu .wpml-ls-item a { color: #fff !important; font-size: 36px; line-height: 1.2; letter-spacing: -1px; padding: 6px 0; }
	.hk-nav .hk-menu { flex-flow: row wrap; justify-content: flex-start; align-content: center; }
	.hk-nav .hk-menu > li { flex: 0 0 100%; }
	.hk-nav .hk-menu > li.wpml-ls-item { flex: 0 0 auto; }
	.hk-nav .hk-menu .wpml-ls-item a { font-size: 19px; padding: 24px 24px 0 0; }
	.hk-open .hk-nav .hk-menu { opacity: 1; visibility: visible; }
	.hk-open .hk-burger { color: #fff; position: fixed; top: 24px; right: 20px; }
	.hk-open .hk-burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
	.hk-open .hk-burger span:nth-child(2) { opacity: 0; }
	.hk-open .hk-burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
	.hk-open { overflow: hidden; }
}

/* ---------- Inhalt ---------- */

.hk-main,
.hk-footer { margin-top: 0 !important; }
.hk-main {
	padding-top: clamp(60px, 7vw, 100px);
	padding-bottom: clamp(70px, 8.7vw, 126px);
}
.hk-main > .entry-content > *:first-child,
.hk-main > .wp-block-post-content > *:first-child { margin-top: 0; }

/* Trennlinien: 1px, volle Deckkraft */
hr.wp-block-separator,
hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
	border: 0;
	border-top: 1px solid currentColor;
	opacity: 1;
	height: 0;
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}
.wp-block-separator.has-background:not(.is-style-dots) { border-top: 1px solid; border-top-color: inherit; height: 0; background: none !important; }
.wp-block-separator.has-line-background-color { border-top-color: var(--wp--preset--color--line); }
.wp-block-separator.has-muted-background-color { border-top-color: var(--wp--preset--color--muted); }
.wp-block-separator.has-contrast-background-color { border-top-color: var(--wp--preset--color--contrast); }

/* Bilder */
.wp-block-image { margin-bottom: 0; }
.wp-block-image img,
.wp-block-image a { display: block; }
.wp-block-image figcaption,
.wp-element-caption { margin-top: 4px; margin-bottom: 0; text-align: left; }
.wp-block-image a:hover img { opacity: .85; transition: opacity .2s; }

/* Listenzeilen (Werkgruppen, Ausstellungen, Texte) */
.hk-liste > .hk-zeile { margin-block: 0 !important; }
.hk-bildliste > .hk-zeile { margin-block: 0; }
.hk-bildliste > .hk-zeile + .hk-zeile { margin-top: 50px; }
.hk-zeile .wp-block-column > * { margin-block: 0; }
.hk-zeile .wp-block-column > * + * { margin-top: 0; }
.hk-zeile h6 a { color: inherit; }
.hk-zeile .has-klein-font-size { line-height: 1; }

/* Textlisten mit Linien */
.hk-liste > * { margin-block: 0 !important; }
.hk-liste > .wp-block-separator { margin-block: 15px !important; }
.hk-liste > h6:first-child { margin-bottom: 15px !important; }

/* Infospalte Startseite */
.hk-info p { margin: 0; }

/* Spalten unter 782px: nur stapeln, wo erlaubt */
@media (max-width: 781px) {
	.hk-zeile.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100% !important; }
}

/* ---------- Beiträge (Texte) ---------- */

.hk-kategorie a {
	display: inline-block;
	padding: 6px 16px;
	background: var(--wp--preset--color--label);
	color: #fff !important;
	font-family: var(--wp--preset--font-family--outfit);
	font-size: 11px;
	font-weight: 500;
	line-height: 14px;
	letter-spacing: .8px;
	text-transform: uppercase;
}
.hk-kategorie .wp-block-post-terms__separator { display: none; }
.hk-autor {
	font-family: var(--wp--preset--font-family--outfit);
	font-size: 19px;
	font-weight: 400;
	letter-spacing: .8px;
	text-transform: uppercase;
}
.hk-beitragsnavigation a { color: var(--wp--preset--color--contrast); }
.hk-beitragsnavigation a:hover { color: var(--wp--preset--color--muted); }
.hk-beitragsnavigation .post-navigation-link__label {
	display: block;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--outfit);
	font-weight: 500;
	font-size: 17px;
}
.hk-beitragsnavigation .wp-block-post-navigation-link a {
	font-family: var(--wp--preset--font-family--outfit);
	font-weight: 500;
	font-size: 19px;
	letter-spacing: -0.3px;
}

/* Barrierefreiheit */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.screen-reader-text:focus { clip: auto; width: auto; height: auto; padding: 10px 16px; background: #fff; z-index: 999; top: 10px; left: 10px; }
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}

/* ---------- Abschnitte (Muster) ---------- */

hr.wp-block-separator.is-style-hell { border-top-color: var(--wp--preset--color--line) !important; }
hr.wp-block-separator.is-style-grau { border-top-color: var(--wp--preset--color--muted) !important; }

.hk-linkbutton a,
.is-style-linkbutton a {
	font-family: var(--wp--preset--font-family--outfit);
	font-weight: 500;
	font-size: 17px;
	line-height: 20px;
	color: var(--wp--preset--color--contrast);
}
.hk-linkbutton a::after,
.is-style-linkbutton a::after { content: "→"; display: inline-block; margin-left: 10px; font-weight: 400; transition: transform .2s; }
.hk-linkbutton a:hover::after,
.is-style-linkbutton a:hover::after { transform: translateX(4px); }
.hk-linkbutton a:hover,
.is-style-linkbutton a:hover { color: var(--wp--preset--color--muted); }

.hk-lh1 { line-height: 1 !important; }
.hk-lh-text { line-height: 28px !important; }

/* Startseite: aktuelle Ausstellung */
.hk-hero .wp-block-column:first-child { padding-top: 7px; }
.hk-info > * { margin: 0 !important; }
.hk-info p { line-height: 1.6; }
.hk-info .wp-block-separator { margin: 15px 0 !important; }
.hk-trenner > .wp-block-separator { margin: 0; }

/* Werkgruppe / Ausstellung */
.hk-kopf { margin-top: 45px; }
.hk-kopf > * { margin-block: 0; }
.hk-kopf > * + * { margin-top: 20px; }
.hk-werkkopf .wp-block-column > * { margin-block: 0; }
.hk-werkkopf .wp-block-column > * + * { margin-top: 20px; }
.hk-werkkopf .wp-block-column:last-child > * + * { margin-top: 0; }
.hk-werkkopf .wp-block-separator { margin: 15px 0 !important; }
.hk-bild-gross .wp-block-image { max-width: 1024px; }
.hk-serie .hk-zitat { margin-top: 150px; margin-bottom: 0; }
.hk-serie .hk-linkbutton { margin-top: 30px; }
.hk-mehrinfo .wp-block-column > * { margin-block: 0; }
.hk-mehrinfo .wp-block-separator { margin: 15px 0 !important; }
.hk-mehrinfo .hk-linkbutton { margin-top: 20px !important; }
.hk-bilder-zwei .wp-element-caption,
.hk-bild-gross .wp-element-caption { font-size: 10px; font-weight: 400; line-height: 1; color: var(--wp--preset--color--caption); margin-top: 4px; }

/* Info */
.hk-infokopf .wp-block-column:first-child h1 { margin-bottom: 20px; }
.hk-infokopf .wp-block-column:first-child p { margin-top: 0; margin-bottom: 26px; }
.hk-infokopf .wp-block-column:last-child > * { margin-block: 0; }
.hk-infokopf .wp-block-column:last-child .wp-block-separator { margin: 15px 0 !important; }

@media (max-width: 781px) {
	.hk-serie .wp-block-column:empty,
	.hk-mehrinfo .wp-block-column:empty { display: none; }
	.hk-serie .hk-zitat { margin-top: 60px; }
}

/* Absatzabstand wie bisher */
.is-layout-flow > p + p,
.is-layout-constrained > p + p { margin-block-start: 26px; }

/* ---------- Größen Tablet / Mobil (wie bisher) ---------- */

@media (max-width: 1279px) {
	:root:root { --wp--preset--font-size--riesig: 46px; --wp--preset--font-size--logo: 22px; }
	h1.wp-block-heading, h1.wp-block-post-title { letter-spacing: -1px; }
}
@media (max-width: 767px) {
	:root:root {
		--wp--preset--font-size--riesig: 26px;
		--wp--preset--font-size--gross: 24px;
		--wp--preset--font-size--mittel: 18px;
		--wp--preset--font-size--logo: 19px;
		--wp--preset--font-size--normal: 16px;
	}
	h1.wp-block-heading, h1.wp-block-post-title, h2.wp-block-heading { letter-spacing: normal; }
	h6.wp-block-heading { letter-spacing: -0.1px; }
	.hk-main { padding-top: 50px; }
	.hk-kopf { margin-top: 0; }
	.hk-start { margin-top: 0 !important; }

	/* Startseite: beide Bilder nebeneinander, Infos darunter */
	.hk-ausstellung { flex-wrap: wrap !important; gap: 20px !important; }
	.hk-ausstellung > .wp-block-column:nth-child(1) { flex-basis: calc(69% - 10px) !important; }
	.hk-ausstellung > .wp-block-column:nth-child(2) { flex-basis: calc(31% - 10px) !important; }
	.hk-ausstellung > .wp-block-column:nth-child(3) { flex-basis: 100% !important; margin-top: 30px; }

	/* Listen: Titel dürfen umbrechen, Angaben rechts schmal */
	.hk-zeile > .wp-block-column:first-child[style*="105px"] { flex-basis: 26% !important; flex-shrink: 0; }
	.hk-zeile { gap: 15px !important; }
	.hk-zeile > .wp-block-column { min-width: 0; word-break: normal; overflow-wrap: normal; }
	.hk-zeile > .wp-block-column:not([style]) ,
	.hk-zeile > .wp-block-column[style*="55%"] { flex: 1 1 0 !important; }
	.hk-zeile > .wp-block-column:last-child[style] { flex: 0 0 auto !important; max-width: 40%; }
	.hk-zeile > .wp-block-column:first-child[style*="105px"] { flex: 0 0 26% !important; }
	/* Textliste: Titel oben, Autor und "lesen" darunter */
	.hk-zeile:has(> [style*="55%"]) { flex-wrap: wrap !important; row-gap: 6px !important; }
	.hk-zeile:has(> [style*="55%"]) > [style*="55%"] { flex: 0 0 100% !important; }
	.hk-zeile:has(> [style*="55%"]) > .wp-block-column:not([style]) { flex: 1 1 0 !important; }
	.hk-liste .hk-zeile > .wp-block-column:first-child[style*="105px"] { flex-basis: 12% !important; }
	.hk-zeile h6 { hyphens: auto; }
	.hk-header { padding-top: 10px; padding-bottom: 10px; }
	.hk-header .wp-block-site-title a { padding: 10px 0; }
}