/*
Theme Name:   Fanfarenzug St. Florian
Theme URI:    https://fanfarenzug-stflorian.de
Description:  Astra Child Theme für den Fanfarenzug St. Florian Ravensburg e.V. – Blau & Gold, Cormorant Garamond + Source Sans 3.
Author:       Fanfarenzug St. Florian
Template:     astra
Version:      1.0.0
Text Domain:  fanfarenzug-stflorian-child
*/

/* ══════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES – alle Farben & Schriften
   ══════════════════════════════════════════════════════════ */
:root {
  /* Farben */
  --fz-navy:    #192F6E;   /* Überschriften, Sekundärer Hintergrund */
  --fz-blue:    #2845AB;   /* Marke / Primärfarbe */
  --fz-blue-l:  #4067D4;   /* Hellblau */
  --fz-pale:    #E8EEFB;   /* Dezenter Hintergrund */
  --fz-gold:    #A8811E;   /* Alternative Marke / CTA */
  --fz-gold-l:  #F5E4A8;   /* Helles Gold */
  --fz-cream:   #FAF8F2;   /* Alternativer Hintergrund */
  --fz-bd:      #DDE3F2;   /* Rahmen / Trennlinien */
  --fz-dark:    #111827;
  --fz-text:    #1E293B;
  --fz-muted:   #5A6A80;
  --fz-white:   #FFFFFF;

  /* Schriften */
  --fz-serif: 'Cormorant Garamond', Georgia, serif;
  --fz-sans:  'Source Sans 3', system-ui, sans-serif;
}

/* ── Basisschriften ─────────────────────────────────────── */
body,
.ast-single-post .entry-content,
p,
.entry-content,
.ast-container {
  font-family: var(--fz-sans) !important;
  color: var(--fz-text);
  line-height: 1.75;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.ast-blog-post-title,
.wp-block-heading,
.wp-block-post-title {
  font-family: var(--fz-serif) !important;
  color: var(--fz-navy) !important;
  line-height: 1.15;
}

/* ── Links ──────────────────────────────────────────────── */
a { color: var(--fz-blue); }
a:hover { color: var(--fz-navy); }

/* ══ HEADER ════════════════════════════════════════════════ */
.main-header-bar {
  background: var(--fz-white) !important;
  border-bottom: 1px solid var(--fz-bd);
  box-shadow: 0 1px 4px rgba(40,69,171,.08);
}

/* Logo-Größe */
.custom-logo { height: 58px !important; width: auto !important; }
.ast-site-identity img { max-height: 58px; width: auto; }

/* Seitenname neben Logo */
.ast-site-title,
.site-title a {
  font-family: var(--fz-serif) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--fz-navy) !important;
}
.ast-site-description { font-size: 11px; letter-spacing: .08em; color: var(--fz-muted); }

/* Navigation */
.main-header-menu .menu-item > a,
.ast-header-navigation .menu-link {
  font-family: var(--fz-sans);
  font-size: 14.5px;
  color: var(--fz-muted) !important;
  font-weight: 400;
  padding: 10px 13px;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.main-header-menu .menu-item:hover > a,
.main-header-menu .current-menu-item > a {
  color: var(--fz-blue) !important;
  border-bottom-color: var(--fz-blue);
  font-weight: 600;
}

/* CTA-Button im Header */
.ast-header-break-point .ast-custom-button,
.ast-button-wrap .ast-custom-button,
.main-header-menu .menu-item.menu-item-cta > a {
  background: var(--fz-gold) !important;
  color: #fff !important;
  border-radius: 3px !important;
  font-weight: 700 !important;
  padding: 9px 20px !important;
  border-bottom: none !important;
  margin-left: 10px;
}
.ast-button-wrap .ast-custom-button:hover { filter: brightness(1.08); }

/* Mobiles Hamburger-Menü */
.ast-mobile-header-wrap .ast-mobile-nav-wrap {
  background: var(--fz-navy);
}
.ast-mobile-header-wrap .main-header-menu .menu-item > a {
  color: rgba(255,255,255,.85) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* ══ BUTTONS ═══════════════════════════════════════════════ */
.wp-element-button,
.wp-block-button__link,
.ast-default-btn,
.fz-btn {
  border-radius: 3px;
  font-weight: 700;
  font-family: var(--fz-sans);
  font-size: 15px;
  transition: filter .15s, transform .15s;
  cursor: pointer;
  text-decoration: none;
}
.wp-element-button:hover,
.wp-block-button__link:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Gold-Button (Standard) */
.wp-block-button .wp-block-button__link,
.ast-default-btn {
  background: var(--fz-gold) !important;
  color: #fff !important;
  border: none !important;
}
/* Outline-Button (blaue Variante) */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--fz-blue) !important;
  border: 2px solid var(--fz-blue) !important;
}
/* Weißer Outline-Button (auf dunklem Grund) */
.wp-block-button.is-style-outline-white .wp-block-button__link {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.6) !important;
}

/* ══ SEKTIONEN / BLÖCKE ════════════════════════════════════ */

/* Stats-Streifen */
.fz-stats-strip {
  background: var(--fz-blue);
  padding: 26px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}
.fz-stats-strip .fz-stat-num {
  font-family: var(--fz-serif);
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  display: block;
  line-height: 1;
}
.fz-stats-strip .fz-stat-lbl {
  font-size: 12.5px;
  color: rgba(255,255,255,.72);
  margin-top: 5px;
  display: block;
}

/* Probezeiten-Shortcode [probezeiten] */
.fz-probe-strip {
  background: var(--fz-pale);
  border-top: 2px solid var(--fz-blue);
  padding: 18px 0;
}
.fz-probe-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.fz-probe-label {
  font-family: var(--fz-serif);
  font-size: 18px;
  color: var(--fz-navy);
  font-weight: 600;
  flex-shrink: 0;
}
.fz-probe-loc { color: var(--fz-muted); font-size: 14px; }
.fz-btn {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.fz-btn-blue { background: var(--fz-blue); color: #fff; }

/* Eyebrow-Text (goldene Beschriftung über Überschriften) */
.fz-eyebrow,
.wp-block-paragraph.has-eyebrow-style {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  color: var(--fz-gold);
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* Cover / Hero Block */
.wp-block-cover {
  min-height: 480px;
}
.wp-block-cover .wp-block-cover__inner-container {
  max-width: 580px;
}

/* Karten / Cover-Gruppen */
.fz-card {
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(40,69,171,.09);
}

/* Termin-Karte */
.fz-event-card {
  background: #fff;
  border-radius: 4px;
  display: flex;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(40,69,171,.1);
}
.fz-event-date {
  background: var(--fz-navy);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 66px;
  color: #fff;
}
.fz-event-date-num {
  font-family: var(--fz-serif);
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
}
.fz-event-date-mon { font-size: 10px; letter-spacing: .1em; opacity: .8; margin-top: 2px; }

/* News-Badge */
.fz-badge {
  display: inline-block;
  background: var(--fz-pale);
  color: var(--fz-blue);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 2px;
}

/* ══ FOOTER ════════════════════════════════════════════════ */
.ast-footer-overlay,
#ast-footer-overlay,
footer.site-footer,
.footer-widget-area {
  background: #0D1A3A !important;
  color: rgba(255,255,255,.5);
}
.site-footer a,
.footer-widget-area a { color: rgba(255,255,255,.5); text-decoration: none; }
.site-footer a:hover,
.footer-widget-area a:hover { color: #fff; }
.ast-footer-copyright {
  background: #0D1A3A !important;
  border-top: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.25);
  font-size: 12px;
}
.footer-widget-area .widget-title {
  font-family: var(--fz-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .13em;
  color: rgba(255,255,255,.28) !important;
  text-transform: uppercase;
}

/* ══ TIPPS: GUTENBERG ABSTAND-KLASSEN ══════════════════════
   In Gutenberg → Block → Erweitert → Zusätzliche CSS-Klasse
   eintragen, um Sektionen einzufärben:
   - fz-bg-navy   → navy Hintergrund, weißer Text
   - fz-bg-blue   → blau, weißer Text
   - fz-bg-pale   → blassblau
   - fz-bg-cream  → creme
   ═══════════════════════════════════════════════════════════ */
.fz-bg-navy  { background: var(--fz-navy)  !important; color: #fff; }
.fz-bg-navy h1,.fz-bg-navy h2,.fz-bg-navy h3 { color: #fff !important; }
.fz-bg-blue  { background: var(--fz-blue)  !important; color: #fff; }
.fz-bg-blue  h1,.fz-bg-blue  h2,.fz-bg-blue  h3 { color: #fff !important; }
.fz-bg-pale  { background: var(--fz-pale)  !important; }
.fz-bg-cream { background: var(--fz-cream) !important; }

/* ══ TEXT AUF DUNKLEN HINTERGRÜNDEN ═══════════════════════
   Astra überschreibt Farben mit hoher Spezifität –
   hier erzwingen wir Vererbung auf dark-BG-Containern.
   ══════════════════════════════════════════════════════════ */
body .fz-bg-navy { color: rgba(255,255,255,.88) !important; }
body .fz-bg-blue  { color: rgba(255,255,255,.88) !important; }

body .fz-bg-navy .wp-block-heading,
body .fz-bg-navy .wp-block-paragraph,
body .fz-bg-navy p, body .fz-bg-navy li, body .fz-bg-navy span,
body .fz-bg-blue .wp-block-heading,
body .fz-bg-blue .wp-block-paragraph,
body .fz-bg-blue p, body .fz-bg-blue li, body .fz-bg-blue span {
  color: inherit !important;
}
body .fz-bg-navy h1, body .fz-bg-navy h2, body .fz-bg-navy h3,
body .fz-bg-navy h4, body .fz-bg-navy h5, body .fz-bg-navy h6,
body .fz-bg-blue h1, body .fz-bg-blue h2, body .fz-bg-blue h3,
body .fz-bg-blue h4, body .fz-bg-blue h5, body .fz-bg-blue h6 {
  color: #fff !important;
}

/* ══ COVER BLOCK – weiß auf dunkel (hohe Spezifität gegen Astra) ══
   Astra: body .wp-block-cover:not(...) p { color: #1E293B }  → 0,3,2
   Unsere Regel: body.ast-plain-container .entry-content .wp-block-cover.is-dark
   → Spezifität 0,4,2 + !important → schlägt Astra absolut
   ══════════════════════════════════════════════════════════════════ */
body.ast-plain-container .entry-content .wp-block-cover.is-dark,
body.ast-plain-container .entry-content .wp-block-cover.alignfull {
  color: #fff !important;
}
body.ast-plain-container .entry-content .wp-block-cover.is-dark p,
body.ast-plain-container .entry-content .wp-block-cover.is-dark li,
body.ast-plain-container .entry-content .wp-block-cover.is-dark span,
body.ast-plain-container .entry-content .wp-block-cover.is-dark h1,
body.ast-plain-container .entry-content .wp-block-cover.is-dark h2,
body.ast-plain-container .entry-content .wp-block-cover.is-dark h3,
body.ast-plain-container .entry-content .wp-block-cover.is-dark h4,
body.ast-plain-container .entry-content .wp-block-cover.is-dark h5,
body.ast-plain-container .entry-content .wp-block-cover.is-dark h6,
body.ast-plain-container .entry-content .wp-block-cover.is-dark .wp-block-heading,
body.ast-plain-container .entry-content .wp-block-cover.is-dark .wp-block-paragraph,
body.ast-plain-container .entry-content .wp-block-cover.alignfull p,
body.ast-plain-container .entry-content .wp-block-cover.alignfull li,
body.ast-plain-container .entry-content .wp-block-cover.alignfull span,
body.ast-plain-container .entry-content .wp-block-cover.alignfull h1,
body.ast-plain-container .entry-content .wp-block-cover.alignfull h2,
body.ast-plain-container .entry-content .wp-block-cover.alignfull h3,
body.ast-plain-container .entry-content .wp-block-cover.alignfull h4,
body.ast-plain-container .entry-content .wp-block-cover.alignfull h5,
body.ast-plain-container .entry-content .wp-block-cover.alignfull h6,
body.ast-plain-container .entry-content .wp-block-cover.alignfull .wp-block-heading,
body.ast-plain-container .entry-content .wp-block-cover.alignfull .wp-block-paragraph {
  color: #fff !important;
}
body.ast-plain-container .entry-content .wp-block-cover.is-dark .fz-eyebrow,
body.ast-plain-container .entry-content .wp-block-cover.alignfull .fz-eyebrow {
  color: var(--fz-gold-l) !important;
}

/* Astra entry-title ausblenden – Cover-Hero zeigt Titel bereits */
body:not(.home) .entry-header {
  display: none;
}

/* Spalten mit has-text-color erben korrekt */
.wp-block-column.has-text-color .wp-block-heading,
.wp-block-column.has-text-color .wp-block-paragraph,
.wp-block-column.has-text-color p,
.wp-block-column.has-text-color h1,
.wp-block-column.has-text-color h2,
.wp-block-column.has-text-color h3 {
  color: inherit !important;
}

/* Stats-Streifen: Spalten-Text weiß */
.fz-bg-blue .wp-block-column .wp-block-heading,
.fz-bg-blue .wp-block-column .wp-block-paragraph {
  color: #fff !important;
}
.fz-bg-blue .wp-block-column .has-text-align-center {
  color: rgba(255,255,255,.72) !important;
}
.fz-bg-blue .wp-block-column h3.wp-block-heading {
  color: #fff !important;
}

/* ══ CUSTOM FOOTER ════════════════════════════════════════ */
.fz-footer {
  background: #0D1A3A;
  color: rgba(255,255,255,.5);
  font-family: var(--fz-sans);
}
.fz-foot-main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 24px;
}

/* Logo-Zeile */
.fz-foot-logo-link {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  margin-bottom: 18px;
}
.fz-foot-name {
  font-family: var(--fz-serif);
  font-size: 17px;
  color: #fff;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
}
.fz-foot-name small {
  font-family: var(--fz-sans);
  font-size: 10px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.35);
  font-style: normal;
}
.fz-foot-info {
  font-size: 13px;
  line-height: 1.9;
  color: rgba(255,255,255,.4);
  margin-bottom: 16px;
}
.fz-foot-info a {
  color: rgba(255,255,255,.4);
  text-decoration: none;
}
.fz-foot-info a:hover { color: #fff; }

/* Social-Buttons */
.fz-foot-soc { display: flex; gap: 7px; flex-wrap: wrap; }
.fz-foot-soc a {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 3px;
  padding: 6px 12px;
  font-size: 12px;
  color: rgba(255,255,255,.6);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.fz-foot-soc a:hover {
  background: rgba(255,255,255,.14);
  color: #fff;
}

/* Navigations-Spalten */
.fz-foot-col h4 {
  font-family: var(--fz-sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .13em;
  color: rgba(255,255,255,.28) !important;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.fz-foot-col a {
  color: rgba(255,255,255,.5);
  font-size: 13px;
  text-decoration: none;
  display: block;
  margin-bottom: 9px;
  transition: color .15s;
}
.fz-foot-col a:hover { color: #fff; }

/* Footer-Bar (unten) */
.fz-foot-bar {
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 18px 24px;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  color: rgba(255,255,255,.3);
  font-size: 12px;
}
.fz-foot-bar a {
  color: rgba(255,255,255,.3);
  text-decoration: none;
  transition: color .15s;
}
.fz-foot-bar a:hover { color: rgba(255,255,255,.7); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .fz-stats-strip { grid-template-columns: 1fr 1fr; gap: 20px 0; padding: 30px 0; }
  .wp-block-cover { min-height: 340px !important; }
  .fz-probe-inner { gap: 12px; }
  .fz-foot-main { grid-template-columns: 1fr 1fr; gap: 32px; }
  .fz-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .fz-stats-strip { grid-template-columns: 1fr 1fr; }
  .wp-block-cover { min-height: 260px !important; }
  .custom-logo { height: 44px !important; }
  .fz-foot-main { grid-template-columns: 1fr; }
  .fz-foot-brand { grid-column: auto; }
}