/*
Theme Name: Lions Modern
Theme URI: https://wp-dev.ts.ai-mx.de
Description: Modernes PWA-fähiges Theme für den Lions Club Koblenz Rhein-Mosel. Child-Theme von Twenty Twenty-Four mit Lions-Markenfarben und schlanker Typographie.
Author: Lions Club Koblenz Rhein-Mosel
Template: twentytwentyfour
Version: 0.3.2
Text Domain: lions-modern
*/

:root {
  --lions-blue: #00338D;
  --lions-yellow: #EBB700;
}

body { -webkit-font-smoothing: antialiased; }
.wp-block-button__link { transition: transform .12s ease, box-shadow .12s ease; }
.wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.12); }

/* ─── Header (fixed, sicher gegen Mobile-Scroll-Bugs) ─────────────────── */
/* WP Block-Theme rendert um den Template-Part einen <header class="wp-block-template-part">.
   Den machen wir fixed. iOS-Notch via safe-area-inset-top. */
header.wp-block-template-part {
  position: fixed !important;
  top: env(safe-area-inset-top, 0) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  background: #ffffff;
  border-bottom: 1px solid #e3e8f0;
  box-shadow: 0 4px 14px rgba(7,25,47,.08);
  margin: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* Inner muss static sein, sonst doppelt-fixed-Konflikt. */
header.wp-block-template-part > .lions-header,
header.wp-block-template-part > header.lions-header {
  position: static !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* WordPress-Admin-Bar (Desktop): Header darunter ansetzen.
   Mobile-Admin-Bar ist in functions.php komplett versteckt → kein Mobile-Offset nötig. */
@media (min-width: 783px) {
  body.admin-bar header.wp-block-template-part { top: 32px !important; }
}

/* ─── Homepage: transparent über Hero, beim Scroll wird's weiß ───────── */
body.home header.wp-block-template-part,
body.page-id-8 header.wp-block-template-part {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
body.home header.wp-block-template-part.is-scrolled,
body.page-id-8 header.wp-block-template-part.is-scrolled {
  background: #ffffff;
  border-bottom-color: #e3e8f0;
  box-shadow: 0 4px 14px rgba(7,25,47,.08);
}

/* Transparent-Variante: gelbes Logo + weiße Schrift mit Text-Shadow für Lesbarkeit */
body.home header.wp-block-template-part:not(.is-scrolled) .lions-header__logo--blue,
body.page-id-8 header.wp-block-template-part:not(.is-scrolled) .lions-header__logo--blue {
  display: none !important;
}
body.home header.wp-block-template-part:not(.is-scrolled) .lions-header__logo--yellow,
body.page-id-8 header.wp-block-template-part:not(.is-scrolled) .lions-header__logo--yellow {
  display: block !important;
}
body.home header.wp-block-template-part:not(.is-scrolled) .lions-header__title-line1 a,
body.home header.wp-block-template-part:not(.is-scrolled) .lions-header__title-line2,
body.home header.wp-block-template-part:not(.is-scrolled) .wp-block-navigation a,
body.page-id-8 header.wp-block-template-part:not(.is-scrolled) .lions-header__title-line1 a,
body.page-id-8 header.wp-block-template-part:not(.is-scrolled) .lions-header__title-line2,
body.page-id-8 header.wp-block-template-part:not(.is-scrolled) .wp-block-navigation a {
  color: #ffffff !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
}

/* Mobile-Hamburger-Icon weiß im transparent-Modus über dem Hero. */
body.home header.wp-block-template-part:not(.is-scrolled) .wp-block-navigation__responsive-container-open,
body.page-id-8 header.wp-block-template-part:not(.is-scrolled) .wp-block-navigation__responsive-container-open,
body.home header.wp-block-template-part:not(.is-scrolled) .wp-block-navigation__responsive-container-open svg,
body.page-id-8 header.wp-block-template-part:not(.is-scrolled) .wp-block-navigation__responsive-container-open svg {
  color: #ffffff !important;
  fill: #ffffff !important;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.5));
}
/* Im gescrollten Zustand: dunkles Hamburger-Icon. */
body.home header.wp-block-template-part.is-scrolled .wp-block-navigation__responsive-container-open,
body.page-id-8 header.wp-block-template-part.is-scrolled .wp-block-navigation__responsive-container-open,
body.home header.wp-block-template-part.is-scrolled .wp-block-navigation__responsive-container-open svg,
body.page-id-8 header.wp-block-template-part.is-scrolled .wp-block-navigation__responsive-container-open svg {
  color: #07192f !important;
  fill: #07192f !important;
  filter: none;
}

/* Content auf Standard-Seiten unter den fixed Header schieben (Templates haben
   eigenes Padding-Top; dies ist nur ein Fallback für Pages ohne eigenes Template). */
body:not(.home):not(.page-id-8) > main:not([style*="padding-top"]) { padding-top: 110px; }
/* Default-Header: blaues Logo, blaue Schrift (auf weißem Background).
   !important damit es nicht vom Parent-Theme (img-Selektor) überschrieben wird. */
.lions-header__logo            { width: 54px !important; height: 54px !important; }
.lions-header__logo--yellow    { display: none !important; }
.lions-header__logo--blue      { display: block !important; }
.lions-header__brand img       { border-radius: 0; }
.lions-header__title-line1 a  { color: #00338D; text-decoration: none; }
.lions-header__title-line2    { color: #5b6478; }

/* Block-Navigation generell ohne Underline, Hover blau. */
.lions-header .wp-block-navigation a { text-decoration: none; color: #07192f; }
.lions-header .wp-block-navigation a:hover { color: #00338D; }

/* ─── Login-Status-Pin im Header ─────────────────────────────────────── */
.lions-login-pin {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  right: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #e3e8f0;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #07192f;
  text-decoration: none;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(7,25,47,.08);
  white-space: nowrap;
}
.lions-login-pin__dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.lions-login-pin--in  .lions-login-pin__dot { background: #00e676; box-shadow: 0 0 0 3px rgba(0,230,118,.22); }
.lions-login-pin--out .lions-login-pin__dot { background: #ff3b30; box-shadow: 0 0 0 3px rgba(255,59,48,.22); }
.lions-login-pin--out:hover { background: #fff5f5; }
.lions-login-pin strong { font-weight: 800; color: #00338D; }

/* Auf transparenter Header-Variante (Homepage über Hero): durchscheinend mit weißer Schrift */
body.home header.wp-block-template-part:not(.is-scrolled) .lions-login-pin,
body.page-id-8 header.wp-block-template-part:not(.is-scrolled) .lions-login-pin {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.30);
  color: #fff;
  backdrop-filter: blur(6px);
}
body.home header.wp-block-template-part:not(.is-scrolled) .lions-login-pin strong,
body.page-id-8 header.wp-block-template-part:not(.is-scrolled) .lions-login-pin strong { color: #EBB700; }

/* Mobile (<= 640): Pin kompakter, aber Name bleibt lesbar */
@media (max-width: 640px) {
  .lions-login-pin {
    top: auto;
    bottom: -16px;            /* unterhalb des Headers, schwebt halb drüber */
    padding: 5px 12px;
    font-size: 0.78rem;
    gap: 6px;
  }
  .lions-login-pin__text { display: inline; }
}

/* Extra schmal (≤380): "Eingeloggt als" weglassen, nur Name + Punkt */
@media (max-width: 380px) {
  .lions-login-pin--in .lions-login-pin__text { font-size: 0; }
  .lions-login-pin--in .lions-login-pin__text strong { font-size: 0.85rem; color: #00338D; }
  body.home  header.wp-block-template-part:not(.is-scrolled) .lions-login-pin--in .lions-login-pin__text strong,
  body.page-id-8 header.wp-block-template-part:not(.is-scrolled) .lions-login-pin--in .lions-login-pin__text strong { color: #EBB700; }
}

/* Im Druck verstecken */
@media print { .lions-login-pin { display: none !important; } }

/* Front-Page-Main: Hero MUSS bündig oben, damit das Video direkt unter dem
   transparenten Header anfängt (Header schwebt drüber). */
.lions-front-main { padding: 0 !important; margin: 0 !important; }
.lions-front-main > .wp-block:first-child,
.lions-front-main > .alignfull:first-child { margin-top: 0 !important; }

/* alignfull innerhalb der Front-Page über das Constrained-Layout ziehen. */
.lions-front-main .alignfull {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  max-width: 100vw !important;
}

/* alignwide-Sections (Aktuelles, Veranstaltungen, Drei Säulen) bekommen
   ordentlichen Außenabstand zum Browserrand. */
.lions-front-main .alignwide {
  max-width: 1280px !important;
  width: calc(100% - 64px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 3vw, 32px) !important;
  padding-right: clamp(16px, 3vw, 32px) !important;
  box-sizing: border-box !important;
}
@media (max-width: 760px) {
  .lions-front-main .alignwide {
    width: calc(100% - 32px) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* Verschachtelte alignwide innerhalb eines alignfull-Covers
   (z.B. „Was wir bewirken" Festungsbild mit Columns) — gleicher Abstand. */
.lions-front-main .alignfull > .wp-block-cover__inner-container > .alignwide,
.lions-front-main .wp-block-cover.alignfull .alignwide {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 3vw, 28px) !important;
  padding-right: clamp(16px, 3vw, 28px) !important;
}

/* ─── Front-Page: Header schwebt transparent über dem Hero-Video ─────── */
/* Transparent-Variante bewusst entfernt — Header bleibt überall weiß für klare Lesbarkeit. */
body.home .lions-header .lions-header__logo--yellow,
body.page-id-8 .lions-header .lions-header__logo--yellow { display: block !important; }
body.home .lions-header .lions-header__logo--blue,
body.page-id-8 .lions-header .lions-header__logo--blue   { display: none !important; }
body.home .lions-header .lions-header__title-line1 a,
body.home .lions-header .lions-header__title-line2,
body.home .lions-header .wp-block-navigation a,
body.page-id-8 .lions-header .lions-header__title-line1 a,
body.page-id-8 .lions-header .lions-header__title-line2,
body.page-id-8 .lions-header .wp-block-navigation a {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.45);
}

/* is-scrolled-Klasse hat keinen Effekt mehr — Header ist immer weiß. */

/* Standard-Page-Inhalt: ordentlicher Abstand vom Rand. */
body:not(.home):not(.page-id-8) main .wp-block-group,
body:not(.home):not(.page-id-8) main > .alignwide,
body:not(.home):not(.page-id-8) main > .wp-block-heading,
body:not(.home):not(.page-id-8) main > p {
  padding-left: clamp(20px, 4vw, 56px);
  padding-right: clamp(20px, 4vw, 56px);
}
/* Für direkte main-Children — robuster Default. */
body:not(.home):not(.page-id-8) main {
  padding-left: clamp(8px, 2vw, 24px);
  padding-right: clamp(8px, 2vw, 24px);
}

/* Mobile-Bump (<1100 px Viewport): Senior-XL für allgemeine Seiten.
   Breakpoint absichtlich oberhalb 980 px (iOS-Safari-Desktop-Modus-Schutz). */
@media (max-width: 1099px) {
  body { font-size: 1.375rem !important; line-height: 1.55 !important; }
  h1, h2, h3 { line-height: 1.25 !important; }
  .wp-block-button__link { font-size: 1.2rem !important; padding: 14px 22px !important; }
}

/* === lions-login-pin-override: Desktop über Menü, mobil nur Punkt === */
@media (min-width: 600px) { .lions-login-pin { display: none !important; } }
@media (max-width: 599px) {
  .lions-login-pin {
    position: absolute; top: 20px; right: 64px; left: auto; bottom: auto;
    transform: none; background: none !important; border: none !important;
    box-shadow: none !important; padding: 0 !important; margin: 0; z-index: 1001;
  }
  .lions-login-pin__text { display: none !important; }
  .lions-login-pin__dot { width: 14px; height: 14px; }
}

/* ─── Header-Lesbarkeit-Fix (2026-05-30) ───────────────────────────────── */
/* Gescrollt (weißer Header): Schrift garantiert dunkel — überschreibt das
   inline color:inherit am Titel-Link und etwaige geerbte helle Farben. */
body.home header.wp-block-template-part.is-scrolled .lions-header__title-line1 a,
body.page-id-8 header.wp-block-template-part.is-scrolled .lions-header__title-line1 a {
  color: #00338D !important;
  text-shadow: none !important;
}
body.home header.wp-block-template-part.is-scrolled .lions-header__title-line2,
body.page-id-8 header.wp-block-template-part.is-scrolled .lions-header__title-line2 {
  color: #5b6478 !important;
  text-shadow: none !important;
}
body.home header.wp-block-template-part.is-scrolled .wp-block-navigation a,
body.page-id-8 header.wp-block-template-part.is-scrolled .wp-block-navigation a {
  color: #07192f !important;
  text-shadow: none !important;
}
/* Nicht gescrollt (transparent über Hero): dunkler Verlaufs-Scrim hinter dem
   Header, damit weiße Schrift auch über hellen Hero-Bildern lesbar bleibt. */
body.home header.wp-block-template-part:not(.is-scrolled)::before,
body.page-id-8 header.wp-block-template-part:not(.is-scrolled)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(7,25,47,.50), rgba(7,25,47,0));
  pointer-events: none;
  z-index: -1;
}