/* =====================================================================
   Lions Club Diez – Design (Stil von lionsclub-limburg.de)
   Offizielle Lions-Farben: Blau & Gold. Klares, helles Layout.
   Greift gezielt in Astra-Klassen ein, damit Header/Menü/Footer
   ohne weitere Customizer-Einstellungen passen.
   ===================================================================== */

/* Figtree – selbst gehostet (exakt wie lionsclub-limburg.de, DSGVO-konform) */
@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/figtree.woff2") format("woff2");
}

/* Offizielle Lions- & Limburg-Farben (1:1 aus lionsclub-limburg.de) */
:root {
	--lions-gold: #ebb700;        /* color-primary  */
	--lions-gold-dark: #c99e00;
	--lions-blue: #00338d;        /* color-quaternary */
	--lions-blue-dark: #0d2240;   /* color-quinary  (dunkle Flächen/Footer) */
	--lions-blue-light: #407cca;  /* color-tertiary */
	--lions-purple: #7a2582;      /* color-secondary */
	--lions-ink: #323235;         /* color-grey-5 */
	--lions-grey: #55565a;        /* color-grey-4 */
	--lions-line: #e2e2e2;
	--lions-bg-soft: #f1f1f1;     /* color-grey-1 */
	--lions-white: #ffffff;
	--lions-radius: 6px;
	--lions-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
	--lions-shadow-strong: 0 10px 40px rgba(0, 0, 0, 0.16);
	--lions-font: "Figtree", "Segoe UI", system-ui, -apple-system,
		"Helvetica Neue", Arial, sans-serif;
}

/* ----------------------------- Basis ------------------------------- */
body.lcd-theme {
	font-family: var(--lions-font);
	color: var(--lions-ink);
	font-size: 17px;
	line-height: 1.7;
	background: var(--lions-white);
}

.lcd-theme h1,
.lcd-theme h2,
.lcd-theme h3,
.lcd-theme h4,
.lcd-theme h5,
.lcd-theme h6 {
	font-family: var(--lions-font);
	color: var(--lions-blue);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.lcd-theme h1 { font-size: clamp(2rem, 4vw, 3rem); }
.lcd-theme h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
.lcd-theme h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

.lcd-theme a {
	color: var(--lions-blue);
	text-decoration: none;
	transition: color 0.18s ease;
}
.lcd-theme a:hover { color: var(--lions-gold-dark); }

.lcd-theme .ast-container,
.lcd-theme .elementor-section.elementor-section-boxed > .elementor-container {
	max-width: 1200px;
}

/* --------------------------- Buttons ------------------------------- */
.lcd-theme .wp-block-button__link,
.lcd-theme .ast-button,
.lcd-theme .menu-link.lcd-cta,
.lcd-theme button.button,
.lcd-theme .button,
.lcd-theme input[type="submit"],
.lcd-theme .elementor-button {
	display: inline-block;
	background: var(--lions-gold);
	color: #1a1a1a !important;
	font-weight: 700;
	letter-spacing: 0.02em;
	border: 0;
	border-radius: var(--lions-radius);
	padding: 0.8em 1.6em;
	text-transform: none;
	box-shadow: 0 2px 0 var(--lions-gold-dark);
	transition: transform 0.15s ease, box-shadow 0.15s ease,
		background 0.15s ease;
}
.lcd-theme .wp-block-button__link:hover,
.lcd-theme .ast-button:hover,
.lcd-theme .button:hover,
.lcd-theme input[type="submit"]:hover,
.lcd-theme .elementor-button:hover {
	background: var(--lions-gold-dark);
	color: #1a1a1a !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 0 var(--lions-gold-dark);
}

.lcd-theme .wp-block-button.is-style-outline .wp-block-button__link,
.lcd-theme .button.lcd-btn-ghost {
	background: transparent;
	color: var(--lions-white) !important;
	border: 2px solid var(--lions-white);
	box-shadow: none;
}
.lcd-theme .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--lions-white);
	color: var(--lions-blue) !important;
}

/* ------------------- Servicebar / Top-Header ----------------------- */
/* Astra "Above Header" – wird zur dunklen Servicebar (Sekundärmenü). */
.lcd-theme .ast-above-header-wrap,
.lcd-theme .ast-above-header {
	background: var(--lions-blue-dark);
}
.lcd-theme .ast-above-header .menu-link,
.lcd-theme .ast-above-header a {
	color: #dbe4f5 !important;
	font-size: 0.9rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.lcd-theme .ast-above-header .menu-link:hover {
	color: var(--lions-gold) !important;
}

/* ---------------------- Hauptheader / Logo ------------------------- */
.lcd-theme .ast-primary-header-bar,
.lcd-theme .site-header,
.lcd-theme .main-header-bar {
	background: var(--lions-white);
	border-bottom: 3px solid var(--lions-gold);
	box-shadow: 0 2px 14px rgba(0, 35, 102, 0.06);
}

/* ------------------- Sticky Header (immer sichtbar) ----------------- */
/* Der komplette Kopf (Servicebar + Hauptmenü) bleibt beim Scrollen oben
   stehen. Astra Free hat dafür keine Einstellung – daher hier per CSS. */
.lcd-theme .site-header {
	position: sticky;
	position: -webkit-sticky;
	top: 0;
	z-index: 999;
}


/* Hauptmenü: leichter Zoom beim Überfahren */
.lcd-theme .main-header-menu > .menu-item > .menu-link {
	display: inline-block;
	transform-origin: center;
	transition: transform .18s ease, color .15s ease;
}

.lcd-theme .main-header-menu > .menu-item > .menu-link:hover {
	transform: scale(1.09);
}


/* Astra setzt body { overflow-x: hidden }. Das macht den Body zum
   Scroll-Container und hebelt position: sticky komplett aus.
   'clip' schneidet genauso ab, erzeugt aber KEINEN Scroll-Container –
   damit funktioniert sticky wieder, ohne horizontalen Scrollbalken. */
body.lcd-theme {
	overflow-x: clip;
	overflow-y: visible;
}

/* Eltern-Container dürfen sticky ebenfalls nicht abschneiden. */
.lcd-theme #page,
.lcd-theme .site,
.lcd-theme #content {
	overflow: visible;
}

/* Eingeloggt schiebt die WP-Adminleiste den Header nach unten. */
.lcd-theme.admin-bar .site-header { top: 32px; }

@media (max-width: 782px) {
	.lcd-theme.admin-bar .site-header { top: 46px; }
}

/* Sprungmarken (#anker) nicht unter den Header rutschen lassen. */
.lcd-theme :target { scroll-margin-top: 140px; }

.lcd-theme .site-title a,
.lcd-theme .site-title {
	color: var(--lions-blue) !important;
	font-weight: 800;
	letter-spacing: -0.01em;
}
.lcd-theme .site-logo-img img,
.lcd-theme .custom-logo {
	max-height: 76px;
	width: auto;
}

/* ----------------------- Hauptnavigation --------------------------- */
.lcd-theme .main-header-menu .menu-link,
.lcd-theme .ast-builder-menu-1 .menu-link,
.lcd-theme .main-navigation a {
	color: var(--lions-blue) !important;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.95rem;
	letter-spacing: 0.03em;
	position: relative;
}
.lcd-theme .main-header-menu .menu-link:hover,
.lcd-theme .ast-builder-menu-1 .current-menu-item > .menu-link,
.lcd-theme .main-header-menu .current-menu-item > .menu-link {
	color: var(--lions-gold-dark) !important;
}
/* Goldener Unterstrich beim aktiven/hover Menüpunkt (wie Limburg). */
.lcd-theme .main-header-menu > .menu-item > .menu-link::after,
.lcd-theme .ast-builder-menu-1 .menu-item > .menu-link::after {
	content: "";
	position: absolute;
	left: 0.8em;
	right: 0.8em;
	bottom: 0.35em;
	height: 3px;
	background: var(--lions-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.18s ease;
}
.lcd-theme .main-header-menu > .menu-item:hover > .menu-link::after,
.lcd-theme .main-header-menu > .current-menu-item > .menu-link::after,
.lcd-theme .ast-builder-menu-1 .menu-item:hover > .menu-link::after {
	transform: scaleX(1);
}

/* Untermenüs */
.lcd-theme .sub-menu,
.lcd-theme .children {
	border-top: 3px solid var(--lions-gold);
	box-shadow: var(--lions-shadow);
}

/* --------------------------- Hero ---------------------------------- */
.lcd-hero {
	position: relative;
	background: var(--lions-blue-dark);
	color: var(--lions-white);
	padding: 6rem 1.5rem;
	text-align: center;
	background-size: cover;
	background-position: center;
}
.lcd-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 39, 102, 0.78),
		rgba(0, 39, 102, 0.62)
	);
}
.lcd-hero > * { position: relative; z-index: 1; }
.lcd-hero h1,
.lcd-hero .lcd-hero-title {
	color: var(--lions-white);
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	margin: 0 0 0.4em;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
}
.lcd-hero .lcd-hero-kicker {
	display: inline-block;
	color: var(--lions-gold);
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 0.8rem;
	font-size: 0.95rem;
}
.lcd-hero p {
	font-size: 1.25rem;
	max-width: 720px;
	margin: 0 auto 1.8rem;
	color: #eaf0fb;
}
.lcd-hero .lcd-hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* --------------------- Abschnitte / Layout ------------------------- */
.lcd-section { padding: 4rem 1.5rem; }
.lcd-section--soft { background: var(--lions-bg-soft); }
.lcd-section--blue { background: var(--lions-blue); color: #fff; }
.lcd-section--blue h1,
.lcd-section--blue h2,
.lcd-section--blue h3 { color: #fff; }

.lcd-section-head { text-align: center; max-width: 760px; margin: 0 auto 2.5rem; }
.lcd-section-head .lcd-kicker {
	color: var(--lions-gold-dark);
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: 0.85rem;
}
.lcd-section-head h2 { margin: 0.3em 0 0.4em; }

/* Goldener Trennstrich unter Überschriften */
.lcd-rule::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	background: var(--lions-gold);
	border-radius: 4px;
	margin: 0.8rem auto 0;
}

/* --------------------------- Karten -------------------------------- */
.lcd-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.6rem;
	max-width: 1200px;
	margin: 0 auto;
}
.lcd-card {
	background: var(--lions-white);
	border: 1px solid var(--lions-line);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: var(--lions-shadow);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	display: flex;
	flex-direction: column;
}
.lcd-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--lions-shadow-strong);
}
.lcd-card img { width: 100%; height: 200px; object-fit: cover; display: block; }
/* Startseite: gleiche Bildhöhe in Activities-Slider und "Unser Engagement" */
body.home .lcd-hscroll .lcd-card img,
body.home .lcd-grid .lcd-card:not(.lcd-event-card) img {
	height: 200px;
	object-fit: cover;
}
.lcd-card .lcd-card-body { padding: 1.4rem 1.5rem 1.6rem; }
.lcd-card h3 { margin: 0 0 0.5rem; }
.lcd-card p { color: var(--lions-grey); margin: 0 0 1rem; }
.lcd-card .lcd-card-tag {
	display: inline-block;
	background: rgba(245, 168, 0, 0.16);
	color: var(--lions-gold-dark);
	font-weight: 700;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.25em 0.7em;
	border-radius: 999px;
	margin-bottom: 0.8rem;
}

/* Info-/Kontaktbox */
.lcd-infobox {
	background: var(--lions-bg-soft);
	border-left: 5px solid var(--lions-gold);
	border-radius: var(--lions-radius);
	padding: 1.4rem 1.6rem;
	margin: 1.5rem 0;
}
.lcd-infobox h3 { margin-top: 0; }

/* Termin-/Eventliste */
.lcd-events { list-style: none; margin: 0; padding: 0; max-width: 800px; }
.lcd-events li {
	display: flex;
	gap: 1.2rem;
	align-items: baseline;
	padding: 1rem 0;
	border-bottom: 1px solid var(--lions-line);
}
.lcd-events .lcd-date {
	flex: 0 0 auto;
	font-weight: 800;
	color: var(--lions-gold-dark);
	min-width: 120px;
}

/* Spendenbanner */
.lcd-cta-banner {
	background: var(--lions-blue);
	color: #fff;
	text-align: center;
	padding: 3.5rem 1.5rem;
	border-radius: 12px;
}
.lcd-cta-banner h2 { color: #fff; }
.lcd-cta-banner p { color: #dbe4f5; max-width: 640px; margin: 0.5rem auto 1.5rem; }

/* --------------------------- Footer -------------------------------- */
.lcd-theme .site-footer,
.lcd-theme .ast-small-footer,
.lcd-theme footer.site-footer {
	background: var(--lions-blue-dark);
	color: #c9d4ea;
}
.lcd-theme .site-footer a { color: #dbe4f5; }
.lcd-theme .site-footer a:hover { color: var(--lions-gold); }
.lcd-theme .site-footer h2,
.lcd-theme .site-footer h3,
.lcd-theme .site-footer .widget-title {
	color: #fff;
	font-size: 1.05rem;
	letter-spacing: 0.02em;
}
.lcd-theme .ast-small-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	background: #001b4d;
	font-size: 0.9rem;
}

/* --------------------------- Tabellen ------------------------------ */
.lcd-theme table.lcd-roster {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
	box-shadow: var(--lions-shadow);
	border-radius: 8px;
	overflow: hidden;
}
.lcd-theme table.lcd-roster th {
	background: var(--lions-blue);
	color: #fff;
	text-align: left;
	padding: 0.8em 1em;
	font-size: 0.95rem;
}
.lcd-theme table.lcd-roster td {
	padding: 0.75em 1em;
	border-bottom: 1px solid var(--lions-line);
}
.lcd-theme table.lcd-roster tr:nth-child(even) td { background: var(--lions-bg-soft); }

/* --------------------------- Responsiv ----------------------------- */
@media (max-width: 768px) {
	body.lcd-theme { font-size: 16px; }
	.lcd-section { padding: 3rem 1.2rem; }
	.lcd-hero { padding: 4rem 1.2rem; }
}

/* =====================================================================
   Dropdown-Untermenü (Stil wie Limburg)
   ===================================================================== */
.lcd-theme .main-header-menu .sub-menu,
.lcd-theme .main-navigation .sub-menu {
	background: #fff;
	border-top: 3px solid var(--lions-gold);
	box-shadow: var(--lions-shadow);
	min-width: 240px;
	padding: 0.4rem 0;
}
.lcd-theme .main-header-menu .sub-menu .menu-link {
	color: var(--lions-blue) !important;
	text-transform: none;
	font-size: 0.95rem;
	letter-spacing: 0;
	padding: 0.6em 1.1em;
}
.lcd-theme .main-header-menu .sub-menu .menu-link::after { display: none; }
.lcd-theme .main-header-menu .sub-menu .menu-link:hover {
	background: var(--lions-bg-soft);
	color: var(--lions-gold-dark) !important;
}
/* Caret-Pfeil an Menüpunkten mit Untermenü */
.lcd-theme .menu-item-has-children > .menu-link::before {
	content: "";
}

/* =====================================================================
   Slider – Hero (eine Folie sichtbar, Auto-Play, Pfeile, Punkte)
   ===================================================================== */
.lcd-slider { position: relative; overflow: hidden; }
.lcd-slider-track {
	display: flex;
	transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}
.lcd-hero-slider .lcd-slide {
	position: relative;
	flex: 0 0 100%;
	min-height: 880px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-size: cover;
	background-position: center;
	color: #fff;
	padding: 4rem 1.5rem;
}
.lcd-hero-slider .lcd-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(13,34,64,0.10), rgba(13,34,64,0.58))
}
.lcd-hero-slider .lcd-slide-inner { position: relative; z-index: 2; max-width: 800px; }
.lcd-hero-slider .lcd-slide-title {
	color: #fff;
	font-size: clamp(2.2rem, 5vw, 4rem);
	margin: 0.2em 0 0.3em;
	text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.lcd-hero-slider .lcd-slide-sub {
	color: #f0f3fa;
	font-size: 1.25rem;
	margin: 0 auto 1.6rem;
	max-width: 640px;
}

/* Slider-Bedienelemente (für Hero und Karten-Slider) */
.lcd-theme .lcd-slider-prev, .lcd-theme .lcd-slider-next,
.lcd-theme .lcd-hscroll-prev, .lcd-theme .lcd-hscroll-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	/* Astra gibt Buttons ein padding von 15px 30px. Unter box-sizing: border-box
	   kann die Breite das Padding nicht unterschreiten – der Button wurde dadurch
	   60px breit bei 48px Höhe, also oval. Padding-Reset = wieder exakt rund. */
	padding: 0;
	width: 48px; height: 48px;
	min-width: 0; max-width: none;
	box-sizing: border-box;
	display: flex; align-items: center; justify-content: center;
	border: 0; border-radius: 50%;
	background: rgba(255,255,255,0.92);
	color: var(--lions-blue);
	font-size: 1.6rem; line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0,0,0,0.18);
	transition: background 0.15s ease, transform 0.15s ease;
}
.lcd-slider-prev:hover, .lcd-slider-next:hover,
.lcd-hscroll-prev:hover, .lcd-hscroll-next:hover {
	background: var(--lions-gold); color: #1a1a1a;
}
.lcd-slider-prev, .lcd-hscroll-prev { left: 16px; }
.lcd-slider-next, .lcd-hscroll-next { right: 16px; }
.lcd-slider-dots {
	position: absolute; left: 0; right: 0; bottom: 18px;
	display: flex; gap: 10px; justify-content: center; z-index: 5;
}
.lcd-slider-dots button {
	width: 12px; height: 12px; border-radius: 50%;
	border: 2px solid #fff; background: transparent; cursor: pointer; padding: 0;
}
.lcd-slider-dots button.is-active { background: var(--lions-gold); border-color: var(--lions-gold); }

/* =====================================================================
   Karten-Slider (Activities) – horizontales Scroll-Snap
   ===================================================================== */
.lcd-hscroll-wrap { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 8px; }
.lcd-hscroll {
	display: flex;
	gap: 1.4rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 0.5rem 0.5rem 1.5rem;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.lcd-hscroll::-webkit-scrollbar { display: none; }
.lcd-hscroll-item {
	scroll-snap-align: start;
	flex: 0 0 320px;
	max-width: 320px;
}
@media (max-width: 480px) {
	.lcd-hscroll-item { flex-basis: 82%; max-width: 82%; }
}

/* =====================================================================
   Termine mit Bild (Event-Karten)
   ===================================================================== */
.lcd-event-card { position: relative; }
.lcd-event-card .lcd-date-badge {
	position: absolute; top: 12px; left: 12px; z-index: 2;
	background: var(--lions-gold); color: #1a1a1a;
	font-weight: 800; font-size: 0.85rem;
	padding: 0.35em 0.7em; border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.lcd-event-card .lcd-card-meta {
	color: var(--lions-grey); font-size: 0.88rem; margin: 0 0 0.6rem;
}

/* Termine: Überschriften und Texte auf gleicher Höhe */
.lcd-event-card .lcd-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.lcd-event-card .lcd-card-body h3 {
	line-height: 1.35;
	min-height: 2.7em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lcd-event-card .lcd-card-body p:not(.lcd-card-meta) {
	line-height: 1.6;
	min-height: 4.8em;
	margin-top: auto;
	margin-bottom: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.lcd-event-card img {
	height: 350px;
	object-fit: cover;
}

/* =====================================================================
   Mitglieder-Raster
   ===================================================================== */
.lcd-members {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.4rem; max-width: 1100px; margin: 0 auto;
}
.lcd-member {
	background: #fff; border: 1px solid var(--lions-line);
	border-radius: 10px; padding: 1.6rem 1.2rem; text-align: center;
	box-shadow: var(--lions-shadow);
}
.lcd-member img {
	width: 120px; height: 120px; object-fit: cover;
	border-radius: 50%; margin: 0 auto 1rem;
	border: 4px solid var(--lions-bg-soft); display: block;
}
.lcd-member .lcd-member-name { font-weight: 800; color: var(--lions-blue); font-size: 1.1rem; }
.lcd-member .lcd-member-role { color: var(--lions-gold-dark); font-weight: 700; font-size: 0.9rem; }

/* Hinweis-/Leerzustand für Shortcodes ohne Inhalte */
.lcd-empty {
	border: 2px dashed var(--lions-line); border-radius: 10px;
	padding: 1.4rem; text-align: center; color: var(--lions-grey);
	background: var(--lions-bg-soft);
}

/* =====================================================================
   Eigener Footer (vom Child-Theme automatisch ausgegeben)
   ===================================================================== */
.lcd-theme .lcd-footer { background: var(--lions-blue-dark); color: #c9d4ea; }
.lcd-theme .lcd-footer a { color: #c9d4ea; }
.lcd-theme .lcd-footer a:hover { color: var(--lions-gold); }
.lcd-theme .lcd-footer h3 { color: #fff; font-size: 1.05rem; margin: 0 0 0.6rem; }
.lcd-footer-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 2rem; max-width: 1200px; margin: 0 auto;
	padding: 3.2rem 1.5rem 2rem;
}
.lcd-footer-cols ul { list-style: none; margin: 0; padding: 0; line-height: 2; }
.lcd-footer-cols p { margin: 0.5rem 0 0; }
.lcd-footer-bar {
	background: #081a33; color: #9fb3d9;
	text-align: center; padding: 1rem 1.5rem; font-size: 0.85rem;
}