/*
Theme Name: KjG Weitmar
Description: Modernes Block-Theme für die KjG St. Franziskus Bochum-Weitmar. Mit fertigen Bausteinen (Vorlagen) für Startseite, Gruppenstunden, Aktionen und Termine.
Version: 1.2.2
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kjg-weitmar
*/

:root {
	--kjg-radius: 18px;
	--kjg-shadow: 0 6px 24px rgba(30, 42, 18, .08);
}

body { -webkit-font-smoothing: antialiased; }

/* ---------- Header ---------- */
.wp-site-blocks > :has(> .kjg-header) {
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .wp-site-blocks > :has(> .kjg-header) { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .wp-site-blocks > :has(> .kjg-header) { top: 0; } }
.kjg-header {
	background: #fff;
	border-bottom: 1px solid var(--wp--preset--color--linie);
}
.wp-site-blocks > * + * { margin-block-start: 0; }
.kjg-brand .kjg-logo { margin: 0; flex-shrink: 0; }
.kjg-brand .kjg-logo img { display: block; }
.kjg-brand-text p { margin: 0; line-height: 1.15; }
.kjg-brand-titel { font-family: var(--wp--preset--font-family--baloo); font-size: 1.35rem; font-weight: 700; }
.kjg-brand-titel a { color: var(--wp--preset--color--dunkel); text-decoration: none; }
.kjg-brand-sub { font-size: .8rem; color: var(--wp--preset--color--text-weich); font-weight: 700; }
.kjg-header .wp-block-navigation-item__content { padding: 8px 14px; border-radius: 999px; }
.kjg-header .wp-block-navigation-item:not(.wp-block-navigation-submenu__container .wp-block-navigation-item) > .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--gruen-hell); }
.kjg-header .wp-block-navigation .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--linie) !important;
	border-radius: 14px;
	box-shadow: var(--kjg-shadow);
	padding: 8px;
	min-width: 230px;
}
.kjg-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 8px 12px; }
.kjg-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--gruen-hell); }
.kjg-header .wp-block-button__link { padding: .6rem 1.25rem; }
@media (max-width: 600px) { .kjg-header .kjg-header-cta { display: none; } }

/* ---------- Allgemein ---------- */
.wp-block-button__link { transition: transform .15s ease, box-shadow .15s ease, background .15s; }
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .15); }
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; border-color: currentColor; color: inherit; }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--dunkel); border-color: var(--wp--preset--color--dunkel); color: #fff; }
.kjg-eyebrow { font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem !important; color: var(--wp--preset--color--gruen-dunkel); margin-bottom: .25rem !important; }
.kjg-lead { font-size: 1.15rem; color: var(--wp--preset--color--text-weich); }

/* ---------- Hero ---------- */
.kjg-hero h1 { text-shadow: 0 2px 20px rgba(0, 0, 0, .3); }
.kjg-hero .wp-block-cover__background { background: linear-gradient(180deg, rgba(20, 30, 10, .05) 20%, rgba(20, 30, 10, .8) 100%) !important; opacity: 1 !important; }
.kjg-hero .is-style-outline > .wp-block-button__link { color: #fff; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .7); backdrop-filter: blur(4px); }

/* ---------- Fakten ---------- */
.kjg-fact p { margin: 0; }
.kjg-fact .kjg-fact-zahl { font-family: var(--wp--preset--font-family--baloo); font-size: 2rem; line-height: 1; font-weight: 800; }
.kjg-fact .kjg-fact-text { font-weight: 700; font-size: .95rem; line-height: 1.4; }

/* ---------- Karten (Kacheln, Aktionen, Gruppen, Räume) ---------- */
.kjg-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--kjg-radius);
	box-shadow: var(--kjg-shadow);
	transition: transform .2s, border-color .2s, opacity .2s, box-shadow .2s;
	height: 100%;
}
.kjg-card:hover { border-color: var(--wp--preset--color--gruen); }
.kjg-tile:hover { transform: translateY(-4px); }
.kjg-icon {
	width: 58px; height: 58px; border-radius: 16px; margin: 0 !important;
	background: var(--wp--preset--color--gruen-hell);
	display: grid; place-items: center; font-size: 1.8rem; line-height: 1;
}
.kjg-mehr a { font-weight: 800; text-decoration: none; }
.kjg-mehr a:hover { text-decoration: underline; }
.kjg-action { overflow: hidden; display: flex; flex-direction: column; }
.kjg-action .wp-block-image, .kjg-action .kjg-action-bild { margin: 0 !important; }
.kjg-action .wp-block-image img { border-radius: 0; aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.kjg-action-emoji { aspect-ratio: 4/3; display: grid; place-items: center; font-size: 3.4rem; margin: 0 !important; }
.kjg-wann { font-size: .8rem !important; font-weight: 800; color: var(--wp--preset--color--gruen-dunkel); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 0 !important; }
.kjg-card h3 { margin-top: .2rem; }

/* ---------- Termine ---------- */
.kjg-termine { display: grid; gap: 14px; }
.kjg-termin {
	display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 22px;
	background: #fff; border-radius: var(--kjg-radius); padding: 16px 24px 16px 16px; box-shadow: var(--kjg-shadow);
	text-decoration: none; color: var(--wp--preset--color--dunkel); transition: transform .2s;
}
a.kjg-termin:hover { transform: translateY(-2px); color: var(--wp--preset--color--dunkel); }
.kjg-datum { background: var(--wp--preset--color--dunkel); color: #fff; border-radius: 14px; text-align: center; padding: 10px 0; }
.kjg-datum b { display: block; font-family: var(--wp--preset--font-family--baloo); font-size: 1.9rem; line-height: 1; }
.kjg-datum small { font-weight: 800; text-transform: uppercase; font-size: .75rem; letter-spacing: .06em; color: var(--wp--preset--color--gruen); }
.kjg-termin h3 { margin: 0 0 2px; font-size: 1.35rem; }
.kjg-termin p { margin: 0; color: var(--wp--preset--color--text-weich); font-size: .95rem; }
.kjg-tag { font-size: .78rem; font-weight: 800; background: var(--wp--preset--color--gruen-hell); color: var(--wp--preset--color--gruen-dunkel); padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.kjg-termine-leer { background: #fff; border-radius: var(--kjg-radius); padding: 24px; text-align: center; font-weight: 700; color: var(--wp--preset--color--text-weich); }
@media (max-width: 600px) { .kjg-termin { grid-template-columns: 70px 1fr; } .kjg-termin .kjg-tag { display: none; } }

/* ---------- Leitungsrunde-Bilder ---------- */
.kjg-bilder-versetzt .wp-block-image img { aspect-ratio: 3/4; object-fit: cover; width: 100%; }
.kjg-bilder-versetzt > .wp-block-column:nth-child(2) { transform: translateY(32px); }
.kjg-checks { list-style: none; padding-left: 0; }
.kjg-checks li { padding-left: 34px; position: relative; margin-bottom: 10px; font-weight: 600; }
.kjg-checks li::before {
	content: "✓"; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%;
	background: var(--wp--preset--color--gruen); display: grid; place-items: center; font-size: .8rem; font-weight: 900;
}

/* ---------- Mitmachen-Box ---------- */
.kjg-cta { position: relative; overflow: hidden; border-radius: 28px; }
.kjg-cta::after {
	content: ""; position: absolute; right: -40px; bottom: -60px; width: 160px; height: 260px;
	background: url(assets/images/kjg-logo.png) center/contain no-repeat; opacity: .12; pointer-events: none;
}
.kjg-cta a:not(.wp-block-button__link) { color: var(--wp--preset--color--gruen); }
.kjg-cta .is-style-outline > .wp-block-button__link { color: #fff; border-color: rgba(255, 255, 255, .6); }

/* ---------- Seitenkopf (Titelbalken) ---------- */
.kjg-page-head { position: relative; overflow: hidden; }
.kjg-page-head::after {
	content: ""; position: absolute; right: 4%; top: -30px; width: 175px; height: 300px;
	background: url(assets/images/kjg-logo.png) center/contain no-repeat; opacity: .18; filter: brightness(0); pointer-events: none;
}
.kjg-page-head > * { position: relative; z-index: 1; }

/* ---------- Gruppenstunden ---------- */
.kjg-finder {
	background: #fff; border-radius: var(--kjg-radius); box-shadow: var(--kjg-shadow); border: 2px solid var(--wp--preset--color--gruen);
	padding: 28px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-top: var(--wp--preset--spacing--40) !important;
}
.kjg-finder label { font-family: var(--wp--preset--font-family--baloo); font-size: 1.3rem; font-weight: 700; }
.kjg-finder select { font: inherit; font-weight: 700; padding: 11px 16px; border-radius: 12px; border: 2px solid var(--wp--preset--color--linie); background: var(--wp--preset--color--hintergrund); min-width: 170px; }
.kjg-finder-ergebnis { font-weight: 700; color: var(--wp--preset--color--gruen-dunkel); flex-basis: 100%; min-height: 1.6em; margin: 0; }
.kjg-gruppe { position: relative; border-width: 2px; }
.kjg-gruppe.is-match { border-color: var(--wp--preset--color--gruen); transform: scale(1.02); box-shadow: 0 10px 30px rgba(153, 203, 45, .35); }
.kjg-gruppe.is-dim { opacity: .4; }
.kjg-gruppe .kjg-jahrgaenge { font-weight: 800; color: var(--wp--preset--color--gruen-dunkel); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }
.kjg-gruppe .kjg-details p { margin: 0 0 6px; font-weight: 600; }

/* ---------- Infobox ---------- */
.kjg-infobox { border-radius: var(--kjg-radius); }

/* ---------- Footer ---------- */
.kjg-footer a { text-decoration: none; color: var(--wp--preset--color--text-weich); }
.kjg-footer a:hover { color: var(--wp--preset--color--gruen-dunkel); }
.kjg-footer .kjg-footer-links p { margin: 0 0 6px; }

/* ---------- Beitrags-/Seiteninhalt ---------- */
.wp-block-post-content > .wp-block-image img,
.entry-content .wp-block-image img { border-radius: var(--kjg-radius); }
.kjg-post-card { padding: 0 !important; overflow: hidden; }
.kjg-post-card .wp-block-post-featured-image img { border-radius: 0; aspect-ratio: 16/10; object-fit: cover; }

.kjg-logo img { border-radius: 0 !important; width: auto; }
.kjg-card h3 a { color: var(--wp--preset--color--dunkel); text-decoration: none; }
.kjg-card h3 a:hover { color: var(--wp--preset--color--gruen-dunkel); }
.kjg-instagram-platzhalter { margin-top: var(--wp--preset--spacing--40); }

/* ---------- Korrekturen 1.0.1 ---------- */
.wp-block-cover.kjg-hero .wp-block-cover__inner-container { width: 100% !important; max-width: none !important; }
.kjg-hero .wp-block-cover__inner-container > * { max-width: 1160px; margin-left: auto !important; margin-right: auto !important; }
.kjg-brand-text p, .kjg-header .wp-block-button__link { white-space: nowrap; }
/* Klappmenü schon unter 1100px statt erst unter 600px */
@media (min-width: 600px) and (max-width: 1100px) {
	.kjg-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.kjg-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.kjg-header .wp-block-navigation__responsive-container.is-menu-open { display: flex; position: fixed; inset: 0; z-index: 100000; }
	.kjg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { display: flex; }
}
/* Geöffnetes Klappmenü: links ausgerichtet, schlicht */
.kjg-header .wp-block-navigation__responsive-container.is-menu-open { box-sizing: border-box; background: #fff; }
.kjg-header .is-menu-open .wp-block-navigation__responsive-container-content,
.kjg-header .is-menu-open .wp-block-navigation__container,
.kjg-header .is-menu-open .wp-block-navigation-item,
.kjg-header .is-menu-open .wp-block-navigation__submenu-container { align-items: flex-start !important; text-align: left; }
.kjg-header .is-menu-open .wp-block-navigation__container { flex-direction: column; gap: .35rem !important; }
.kjg-header .is-menu-open .wp-block-navigation-item__content { font-size: 1.2rem; padding: 4px 0 !important; }
.kjg-header .is-menu-open .wp-block-navigation__submenu-container {
	position: static !important; opacity: 1 !important; visibility: visible !important; width: auto !important; height: auto !important;
	border: 0 !important; box-shadow: none !important; padding: .25rem 0 .25rem 1rem !important; min-width: 0 !important;
}
.kjg-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 1rem; font-weight: 600; }
.kjg-header .is-menu-open .wp-block-navigation__submenu-icon { display: none; }

/* ---------- Korrekturen 1.0.3 (bereits live als „Zusätzliches CSS“) ---------- */
@media (max-width: 1000px) {
	.is-layout-grid:has(> .kjg-tile), .is-layout-grid:has(> .kjg-action), .is-layout-grid:has(> .kjg-gruppe), .is-layout-grid:has(> .kjg-card) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.kjg-facts .is-layout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
	.is-layout-grid:has(> .kjg-tile), .is-layout-grid:has(> .kjg-action), .is-layout-grid:has(> .kjg-gruppe), .is-layout-grid:has(> .kjg-card) { grid-template-columns: minmax(0, 1fr) !important; }
	.kjg-facts .is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.kjg-facts .kjg-fact:last-child { grid-column: 1 / -1; }
}
/* Terminkalender (The Events Calendar) in KjG-Farben */
:root:root {
	--tec-color-accent-primary: #99CB2D;
	--tec-color-accent-primary-hover: #8AB828;
	--tec-color-accent-primary-active: #8AB828;
	--tec-color-accent-primary-background: #EEF6DA;
	--tec-color-button-primary: #99CB2D;
	--tec-color-button-primary-hover: #8AB828;
	--tec-color-button-primary-active: #8AB828;
	--tec-color-link-accent: #5B8A14;
	--tec-color-link-accent-hover: #1E2A12;
	--tec-font-family-sans-serif: Nunito, system-ui, sans-serif;
}
.tribe-common .tribe-common-c-btn, .tribe-common a.tribe-common-c-btn, .tribe-events .tribe-events-c-search__button { color: #1E2A12 !important; border-radius: 999px !important; font-weight: 800; }
/* Aktions-Karten: „Mehr erfahren“ immer unten */
.kjg-action > .wp-block-group { flex: 1; display: flex; flex-direction: column; }
.kjg-action .kjg-mehr { margin-top: auto !important; padding-top: .5rem; }
/* Leitungsrunde: Personen-Karten */
.kjg-person { overflow: hidden; }
.kjg-person .kjg-person-foto { margin: 0 !important; }
.kjg-person .kjg-person-foto img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 0 !important; display: block; }
.kjg-person .kjg-platzhalter img { object-fit: contain; padding: 22% 26%; box-sizing: border-box; background: var(--wp--preset--color--gruen-hell); }
.kjg-person h3 { margin: 0 !important; padding: .8rem 1rem 1rem; font-size: 1.25rem; }
@media (max-width: 1000px) { .is-layout-grid.kjg-team { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 600px) { .is-layout-grid.kjg-team { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* ---------- „Heute“-Leiste, Countdown, Kalender-Abo (1.1.0) ---------- */
.kjg-heute {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px;
	background: #fff; border: 1px solid var(--wp--preset--color--linie); border-radius: var(--kjg-radius);
	box-shadow: var(--kjg-shadow); padding: 16px 22px;
}
.kjg-heute-gruppen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; flex: 1 1 420px; }
.kjg-heute-label {
	font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
	background: var(--wp--preset--color--gruen-hell); color: var(--wp--preset--color--gruen-dunkel); padding: 5px 12px; border-radius: 999px;
}
.kjg-heute-label--live { background: var(--wp--preset--color--gruen); color: var(--wp--preset--color--dunkel); }
.kjg-heute-label--live::first-letter { animation: kjg-blinken 1.4s ease-in-out infinite; }
.kjg-heute-label--ferien { background: var(--wp--preset--color--sonne); color: #7a5a00; }
@keyframes kjg-blinken { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .kjg-heute-label--live::first-letter { animation: none; } }
.kjg-heute-text { font-size: .98rem; }
.kjg-heute-gruppe { display: inline-block; margin-right: 14px; }
.kjg-heute-countdown a {
	display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--wp--preset--color--dunkel);
	background: var(--wp--preset--color--dunkel); color: #fff; padding: 8px 16px; border-radius: 999px; font-size: .95rem; white-space: nowrap;
}
.kjg-heute-countdown a:hover { background: var(--wp--preset--color--gruen-dunkel); color: #fff; }
.kjg-heute-zahl { color: var(--wp--preset--color--gruen); font-family: var(--wp--preset--font-family--baloo); font-size: 1.25rem; line-height: 1; }
@media (max-width: 600px) { .kjg-heute-countdown a { white-space: normal; } }

.kjg-abo {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
	background: #fff; border-radius: var(--kjg-radius); padding: 18px 22px; margin-top: 18px; border: 2px dashed var(--wp--preset--color--gruen);
}
.kjg-abo-text { display: flex; flex-direction: column; gap: 2px; }
.kjg-abo-text span { color: var(--wp--preset--color--text-weich); font-size: .92rem; }
.kjg-abo-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.kjg-abo-knopf {
	display: inline-block; text-decoration: none; font-weight: 800; font-size: .92rem; padding: 9px 18px; border-radius: 999px;
	background: var(--wp--preset--color--gruen); color: var(--wp--preset--color--dunkel) !important;
}
.kjg-abo-knopf:hover { background: var(--wp--preset--color--dunkel); color: #fff !important; }
.kjg-heute[hidden] { display: none !important; }

/* ---------- Fahrt-Countdown (1.2.0) ---------- */
.kjg-countdown {
	display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
	background: var(--wp--preset--color--dunkel); color: #fff; border-radius: 24px; padding: 28px 32px;
	position: relative; overflow: hidden; margin: var(--wp--preset--spacing--40) 0;
}
.kjg-countdown::after {
	content: ""; position: absolute; right: -30px; bottom: -50px; width: 150px; height: 240px;
	background: url(assets/images/kjg-logo.png) center/contain no-repeat; opacity: .15; pointer-events: none;
}
.kjg-countdown[hidden] { display: none; }
.kjg-countdown-zahl {
	display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
	background: var(--wp--preset--color--gruen); color: var(--wp--preset--color--dunkel);
	border-radius: 20px; min-width: 150px; padding: 16px 20px; line-height: 1.05;
}
.kjg-countdown-zahl b { font-family: var(--wp--preset--font-family--baloo); font-size: 3.6rem; font-weight: 800; line-height: 1; }
.kjg-countdown-zahl span { font-weight: 800; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; }
.kjg-countdown-info { flex: 1 1 260px; position: relative; z-index: 1; }
.kjg-countdown-info small { display: inline-block; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: var(--wp--preset--color--gruen); margin-bottom: 4px; }
.kjg-countdown-info h3 { color: #fff; font-size: 1.9rem; margin: 0 0 .4rem; }
.kjg-countdown-info p { margin: 0 0 .8rem; color: #D6DDCB; }
.kjg-countdown-info a { color: var(--wp--preset--color--gruen); font-weight: 800; text-decoration: none; }
.kjg-countdown-info a:hover { text-decoration: underline; }
@media (max-width: 600px) { .kjg-countdown { padding: 22px; } .kjg-countdown-zahl { width: 100%; flex-direction: row; gap: 10px; } .kjg-countdown-zahl b { font-size: 2.8rem; } }