/*
 * KRB Wetterau – theme styles that theme.json cannot express.
 * Colours/typography come from theme.json presets; only use var(--wp--preset--…) here.
 */

:root {
	--krb-gold-text: #7d6226;      /* gold for small text on white/creme (5:1) */
	--krb-gold-hell: #e9d7a8;      /* gold for small text on blue (5:1) */
	--krb-radius: var(--wp--custom--radius, 6px);
	--krb-shadow: var(--wp--preset--shadow--karte);
}

html { scroll-behavior: smooth; }
/* Raleway defaults to old-style figures; dates and results read better with lining ones. */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: lining-nums; }
:where(img) { height: auto; }
::selection { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--navy); }

.krb-skip-link {
	position: absolute; left: -9999px; top: 0.5rem; z-index: 1000;
	background: var(--wp--preset--color--navy); color: #fff; padding: 0.6rem 1rem; border-radius: var(--krb-radius);
}
.krb-skip-link:focus { left: 0.5rem; }

/* ---------- Icons (see icons.css) ---------- */
[class*="krb-icon-"]::before {
	content: "";
	display: inline-block;
	width: 1.15em; height: 1.15em;
	margin-right: 0.45em;
	vertical-align: -0.18em;
	background-color: var(--krb-icon-color, var(--wp--preset--color--gold));
	-webkit-mask: var(--krb-icon) center / contain no-repeat;
	mask: var(--krb-icon) center / contain no-repeat;
	flex: none;
}
.wp-block-group[class*="krb-icon-"]::before,
.wp-block-column[class*="krb-icon-"]::before {
	display: block; width: 2.25rem; height: 2.25rem; margin: 0 0 0.5rem;
}

/* ---------- Header ---------- */
.krb-header {
	position: sticky; top: 0; z-index: 50;
	/* solid background on purpose: backdrop-filter would trap the fixed mobile-menu overlay inside the header */
	background: #fff;
	border-bottom: 1px solid var(--wp--preset--color--linie);
}
.admin-bar .krb-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .krb-header { top: 0; } }
.krb-header .wp-block-site-logo img { max-height: 58px; width: auto; }
.krb-brand { gap: 0.75rem !important; text-decoration: none; }
.krb-brand__name { margin: 0; line-height: 1.05; font-family: var(--wp--preset--font-family--serif); font-weight: 600; color: var(--wp--preset--color--navy); font-size: 1.2rem; }
.krb-brand__name a { color: inherit; text-decoration: none; }
.krb-brand__name small { display: block; font-size: 0.8em; font-weight: 500; color: var(--wp--preset--color--blau); }
.krb-header .wp-block-navigation-item__content { text-decoration: none; padding: 0.4rem 0; border-bottom: 2px solid transparent; }
.krb-header .wp-block-navigation-item__content:hover,
.krb-header .current-menu-item > .wp-block-navigation-item__content,
.krb-header .current-menu-ancestor > .wp-block-navigation-item__content,
.krb-header .wp-block-navigation-item__content[aria-current="page"] { border-bottom-color: var(--wp--preset--color--gold); color: var(--wp--preset--color--navy); }
.krb-header .wp-block-button__link { padding: 0.55rem 1.1rem; }
@media (max-width: 781px) {
	.krb-header .krb-header__kontakt { display: none; }
	.krb-brand__name { font-size: 1.05rem; }
	.krb-header .wp-block-site-logo img { max-height: 46px; }
}
/* Mobile menu overlay: left-aligned, compact, sub-pages indented */
.wp-block-navigation__responsive-container.is-menu-open { padding: 1.25rem 1.5rem 2rem; }
.wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__responsive-container-content, .wp-block-navigation__container, .wp-block-navigation-item) { align-items: flex-start !important; text-align: left; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.1rem !important; width: 100%; padding-top: 1rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.3rem; font-family: var(--wp--preset--font-family--serif); border-bottom: 0 !important; padding: 0 !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { padding: 0.5rem 0 0 1rem !important; gap: 0.55rem !important; border-left: 2px solid var(--wp--preset--color--linie) !important; margin-top: 0.4rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 1.05rem; font-family: var(--wp--preset--font-family--sans); font-weight: 500; color: var(--wp--preset--color--grau); }
.wp-block-navigation__responsive-container.is-menu-open :is(.current-menu-item, .current-menu-ancestor) > .wp-block-navigation-item__content { color: var(--krb-gold-text) !important; }

/* ---------- Hero / cover ---------- */
.krb-hero { position: relative; }
.wp-block-cover.krb-hero .wp-block-cover__inner-container,
.wp-block-cover.krb-hero.has-custom-content-position .wp-block-cover__inner-container { width: 100% !important; }
.krb-hero h1, .krb-hero .wp-block-post-title { color: #fff; text-wrap: balance; text-shadow: 0 1px 12px rgba(10, 37, 64, 0.35); }
.krb-hero p { color: #fff; }
/* Caveat is opt-in per heading (Typografie → Schriftart) and looks about 25 % smaller than Raleway. */
.has-handschrift-font-family { font-weight: 600; letter-spacing: 0; line-height: 1.1; }
.krb-hero h1.has-handschrift-font-family { font-size: calc(var(--wp--preset--font-size--huge) * 1.25) !important; }
.krb-hero .is-style-dachzeile { color: var(--krb-gold-hell) !important; }
.krb-hero--seite { min-height: clamp(220px, 32vw, 360px) !important; }
.krb-hero--seite .wp-block-post-excerpt__excerpt { font-size: var(--wp--preset--font-size--large); color: #fff; max-width: 40ch; margin: 0; }
/* pages without a featured image: solid blue band instead of a gradient into white */
.krb-hero--seite:not(:has(.wp-block-cover__image-background)) { background: var(--wp--preset--color--blau); }
.krb-hero--seite:not(:has(.wp-block-cover__image-background)) .wp-block-cover__background { opacity: 0.35 !important; }

/* ---------- Home: news + upcoming dates side by side ---------- */
.krb-zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem); gap: var(--wp--preset--spacing--50); align-items: start; }
.krb-zweispaltig:not(:has(> .krb-termine)) { grid-template-columns: minmax(0, 1fr); }
.krb-zweispaltig > * { margin-block-start: 0 !important; }
@media (max-width: 960px) { .krb-zweispaltig { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Eyebrow, headings ---------- */
.is-style-dachzeile {
	font-family: var(--wp--preset--font-family--sans) !important;
	font-size: 0.8125rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--krb-gold-text);
	margin-bottom: 0.25rem !important;
}
.wp-block-heading.is-style-mit-linie::after {
	content: ""; display: block; width: 56px; height: 3px; margin-top: 0.6rem;
	background: var(--wp--preset--color--gold); border-radius: 2px;
}
.wp-block-heading.is-style-mit-linie.has-text-align-center::after { margin-inline: auto; }
.is-style-einleitung { font-size: var(--wp--preset--font-size--large); line-height: 1.5; color: var(--wp--preset--color--text); }

/* ---------- Bands ---------- */
.is-style-band-blau { background: var(--wp--preset--color--blau); color: #fff; }
.is-style-band-blau :where(h1, h2, h3, h4, p, li) { color: #fff; }
.is-style-band-blau a:where(:not(.wp-element-button)) { color: #fff; }
.is-style-band-blau .is-style-dachzeile { color: var(--krb-gold-hell); }
.is-style-band-blau { --krb-icon-color: var(--krb-gold-hell); }
.is-style-band-creme { background: var(--wp--preset--color--creme); }

/* ---------- Cards ---------- */
.is-style-karte, .is-style-karte-link {
	background: #fff;
	border-radius: var(--krb-radius);
	box-shadow: var(--krb-shadow);
	overflow: hidden;
}
.is-layout-grid > .is-style-karte, .is-layout-grid > .is-style-karte-link { height: 100%; }
.is-style-karte > .wp-block-image:first-child,
.is-style-karte-link > .wp-block-image:first-child,
.is-style-karte > .wp-block-cover:first-child,
.is-style-karte-link > .wp-block-cover:first-child { margin: 0; }
.is-style-karte > .wp-block-image:first-child img,
.is-style-karte-link > .wp-block-image:first-child img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.is-style-karte-link { position: relative; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.is-style-karte-link:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(10, 37, 64, 0.08), 0 16px 36px rgba(10, 37, 64, 0.14); }
/* the first link inside the card stretches over the whole card */
.is-style-karte-link :where(h2, h3, h4) a { text-decoration: none; color: inherit; }
.is-style-karte-link :where(h2, h3, h4) a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.is-style-karte-link :where(h2, h3, h4) a:focus-visible { outline: none; }
.is-style-karte-link:focus-within { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 3px; }
/* arrow always on its own line, so cards in a row look the same whatever the title length */
.is-style-karte-link :where(h2, h3, h4)::after {
	content: ""; display: block; width: 0.9em; height: 0.9em; margin-top: 0.35em;
	background: var(--wp--preset--color--gold); -webkit-mask: var(--krb-icon-pfeil) center / contain no-repeat; mask: var(--krb-icon-pfeil) center / contain no-repeat;
	transition: transform 0.2s ease;
}
.is-style-karte-link:hover :where(h2, h3, h4)::after { transform: translateX(4px); }

/* Image cards with text on the photo (Schnellzugang) */
.krb-kachel.wp-block-cover { border-radius: var(--krb-radius); overflow: hidden; min-height: 210px !important; align-items: flex-end !important; transition: transform 0.2s ease; }
.krb-kachel.wp-block-cover:hover { transform: translateY(-3px); }
.krb-kachel h3 { color: #fff; margin: 0; font-size: var(--wp--preset--font-size--large); }
.krb-kachel h3 a { color: inherit; text-decoration: none; }
.krb-kachel h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
/* two lines reserved for the subtitle, so the titles of neighbouring tiles line up */
.krb-kachel p { color: rgba(255, 255, 255, 0.92); margin: 0.25rem 0 0; font-size: var(--wp--preset--font-size--small); line-height: 1.4; min-height: 2.8em; }
.krb-kachel:focus-within { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 3px; }

/* ---------- Buttons ---------- */
.wp-block-button.is-style-umriss .wp-block-button__link {
	background: transparent; color: var(--wp--preset--color--blau); border-color: var(--wp--preset--color--blau);
}
.wp-block-button.is-style-umriss .wp-block-button__link:hover { background: var(--wp--preset--color--blau); color: #fff; }
.wp-block-button.is-style-umriss-hell .wp-block-button__link {
	background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.85);
}
.wp-block-button.is-style-umriss-hell .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--navy); border-color: #fff; }
.wp-block-button.is-style-link-pfeil .wp-block-button__link {
	background: none; border: 0; padding: 0; color: var(--wp--preset--color--blau); text-decoration: none;
}
.wp-block-button.is-style-link-pfeil .wp-block-button__link::after {
	content: ""; display: inline-block; width: 1em; height: 1em; margin-left: 0.35em; vertical-align: -0.12em;
	background: currentColor; -webkit-mask: var(--krb-icon-pfeil) center / contain no-repeat; mask: var(--krb-icon-pfeil) center / contain no-repeat;
	transition: transform 0.2s ease;
}
.wp-block-button.is-style-link-pfeil .wp-block-button__link:hover::after { transform: translateX(4px); }
.is-style-band-blau .wp-block-button.is-style-link-pfeil .wp-block-button__link { color: #fff; }

/* ---------- Lists ---------- */
.wp-block-list.is-style-haken { list-style: none; padding-left: 0; }
.wp-block-list.is-style-haken li { position: relative; padding-left: 1.8em; margin-bottom: 0.4em; }
.wp-block-list.is-style-haken li::before {
	content: ""; position: absolute; left: 0; top: 0.25em; width: 1.1em; height: 1.1em;
	background: var(--wp--preset--color--gold); -webkit-mask: var(--krb-icon-haken) center / contain no-repeat; mask: var(--krb-icon-haken) center / contain no-repeat;
}
.wp-block-list.is-style-fakten { list-style: none; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--wp--preset--color--linie); }
.wp-block-list.is-style-fakten li { padding: 0.7rem 0; border-bottom: 1px solid var(--wp--preset--color--linie); display: grid; grid-template-columns: minmax(8rem, 30%) 1fr; gap: 1rem; }
.wp-block-list.is-style-fakten li strong:first-child { color: var(--wp--preset--color--navy); }
@media (max-width: 600px) { .wp-block-list.is-style-fakten li { grid-template-columns: 1fr; gap: 0.1rem; } }

/* ---------- Images ---------- */
.wp-block-image.is-style-abgerundet img, .wp-block-cover.is-style-abgerundet { border-radius: var(--krb-radius); }
.wp-block-image figcaption.wp-element-caption { text-align: left; }

/* ---------- Tables ---------- */
.wp-block-table.is-style-krb table { border-collapse: collapse; width: 100%; }
.wp-block-table.is-style-krb :where(th, td) { border: 0; border-bottom: 1px solid var(--wp--preset--color--linie); padding: 0.65rem 0.75rem 0.65rem 0; text-align: left; vertical-align: top; }
.wp-block-table.is-style-krb thead th { border-bottom: 2px solid var(--wp--preset--color--navy); color: var(--wp--preset--color--navy); font-weight: 700; }
.wp-block-table.is-style-krb thead { border-bottom: 0; }
.wp-block-table.is-style-krb td a { word-break: break-word; }
@media (max-width: 781px) {
	.wp-block-table.is-style-krb { overflow-x: visible; }
	.wp-block-table.is-style-krb table, .wp-block-table.is-style-krb tbody, .wp-block-table.is-style-krb tr, .wp-block-table.is-style-krb td { display: block; width: 100%; }
	.wp-block-table.is-style-krb thead { position: absolute; left: -9999px; }
	.wp-block-table.is-style-krb tr { padding: 0.75rem 0; border-bottom: 1px solid var(--wp--preset--color--linie); }
	.wp-block-table.is-style-krb td { border: 0; padding: 0.1rem 0; }
	.wp-block-table.is-style-krb td:first-child { font-weight: 700; color: var(--wp--preset--color--navy); }
}

/* ---------- Kennzahlen ---------- */
.krb-kennzahl { text-align: center; }
.krb-kennzahl .krb-kennzahl__wert { font-family: var(--wp--preset--font-family--serif); font-weight: 600; font-size: var(--wp--preset--font-size--xx-large); line-height: 1; color: var(--wp--preset--color--blau); margin: 0; }
.krb-kennzahl .krb-kennzahl__label { margin: 0.35rem 0 0; font-weight: 600; color: var(--wp--preset--color--grau); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8125rem; }
.is-style-band-blau .krb-kennzahl .krb-kennzahl__wert { color: #fff; }
.is-style-band-blau .krb-kennzahl .krb-kennzahl__label { color: var(--krb-gold-hell); }
.krb-kennzahl::before { margin: 0 auto 0.6rem !important; }

/* ---------- News (query loop) ---------- */
.krb-news .wp-block-post { display: flex; }
.krb-news .wp-block-post > .wp-block-group { width: 100%; }
.krb-news .wp-block-post-featured-image { margin: 0; background: var(--wp--preset--color--creme); }
.krb-news .wp-block-post-featured-image img { aspect-ratio: 3 / 2; object-fit: cover; object-position: top center; width: 100%; }
.krb-news .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--navy); }
.krb-news .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.krb-news .wp-block-post-excerpt__excerpt { margin: 0; color: var(--wp--preset--color--text); }
.krb-news .wp-block-post-excerpt__more-text { display: none; }
.krb-news-liste .wp-block-post { padding: 1rem 0; border-bottom: 1px solid var(--wp--preset--color--linie); }
.krb-news-liste .wp-block-post-title a { text-decoration: none; }
.wp-block-query-pagination { gap: 0.5rem; }
.wp-block-query-pagination .page-numbers { padding: 0.35rem 0.7rem; border-radius: var(--krb-radius); text-decoration: none; }
.wp-block-query-pagination .page-numbers.current { background: var(--wp--preset--color--blau); color: #fff; }
.krb-meldung .wp-block-post-featured-image img { border-radius: var(--krb-radius); box-shadow: var(--krb-shadow); }
@media (min-width: 782px) { .krb-meldung .wp-block-post-featured-image { max-width: 320px; margin-inline-start: auto; } }
.wp-block-post-terms a { text-decoration: none; font-weight: 700; color: var(--krb-gold-text); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8125rem; }

/* ---------- Footer ---------- */
.krb-footer { color: rgba(255, 255, 255, 0.9); }
.krb-footer a { color: #fff; text-decoration: none; }
.krb-footer a:hover { text-decoration: underline; }
.krb-footer h2, .krb-footer h3 { color: #fff; }
.krb-footer .krb-footer__titel { font-family: var(--wp--preset--font-family--sans); font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--krb-gold-hell); margin-bottom: 0.75rem; }
.krb-footer .wp-block-image img { max-width: 170px; }
.krb-footer__unten { border-top: 1px solid rgba(255, 255, 255, 0.2); font-size: var(--wp--preset--font-size--small); }
.krb-footer ul { list-style: none; padding: 0; margin: 0; }
.krb-footer li { margin: 0 0 0.4rem; }
.krb-footer { --krb-icon-color: var(--krb-gold-hell); }
/* contact column takes the width of "Kreisreiterbund Wetterau e.V." so the name stays on one line */
@media (min-width: 1000px) { .krb-footer .krb-footer__kontakt { flex: 0 0 auto !important; white-space: nowrap; } }
.krb-footer__social p { margin: 0; }

/* ---------- Misc ---------- */
.wp-block-separator.is-style-default { width: 56px; border-top-width: 3px; border-color: var(--wp--preset--color--gold); opacity: 1; margin-left: 0; }
.wp-block-details { border: 1px solid var(--wp--preset--color--linie); border-radius: var(--krb-radius); padding: 0.75rem 1rem; }
.wp-block-details summary { font-weight: 700; color: var(--wp--preset--color--navy); cursor: pointer; }
.krb-person p { margin: 0; }
.krb-person .krb-person__rolle { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--krb-gold-text); }
.krb-person .krb-person__name { font-family: var(--wp--preset--font-family--serif); font-size: var(--wp--preset--font-size--large); font-weight: 600; color: var(--wp--preset--color--navy); }
.krb-person a { text-decoration: none; }
.wpcf7-form label { display: block; font-weight: 600; color: var(--wp--preset--color--navy); }
.wpcf7-form :where(input[type="text"], input[type="email"], textarea) {
	width: 100%; box-sizing: border-box; margin-top: 0.3rem; padding: 0.7rem 0.8rem; font: inherit;
	border: 1px solid #b9c2cd; border-radius: var(--krb-radius); background: #fff;
}
.wpcf7-form :where(input, textarea):focus { outline: 2px solid var(--wp--preset--color--gold); border-color: var(--wp--preset--color--navy); }
.wpcf7-form input[type="submit"] {
	background: var(--wp--preset--color--gold); color: var(--wp--preset--color--navy); border: 0; border-radius: var(--krb-radius);
	padding: 0.85rem 1.6rem; font: inherit; font-weight: 700; cursor: pointer;
}
.wpcf7-form input[type="submit"]:hover { background: var(--wp--preset--color--gold-dunkel); }
.wpcf7-acceptance .wpcf7-list-item { margin: 0; font-weight: 400; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}