/*
Theme Name: FF Kühwiesen
Theme URI: https://networkx.cc
Description: Child theme for Freiwillige Feuerwehr Kühwiesen - modern dark design
Author: FF Kühwiesen
Author URI: https://networkx.cc
Template: twentytwentyfive
Version: 1.0.0
Text Domain: ff-kuehwiesen
*/

/* ============================================
   FF KÜHWIESEN - CUSTOM CSS
   Primär: #CC0000 | Bg: #0a0a0a | Text: #ffffff
   Font: Inter + Rajdhani
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Rajdhani:wght@400;500;600;700&display=swap');

/* ---- GLOBAL RESET & BASE ---- */
:root {
  --color-primary: #CC0000;
  --color-primary-dark: #990000;
  --color-primary-light: #ff3333;
  --color-bg: #0a0a0a;
  --color-bg-2: #111111;
  --color-bg-3: #1a1a1a;
  --color-bg-card: #161616;
  --color-text: #f0f0f0;
  --color-text-muted: #888888;
  --color-border: #2a2a2a;
  --color-white: #ffffff;
  --font-body: 'Inter', sans-serif;
  --font-heading: 'Rajdhani', sans-serif;
  --border-radius: 8px;
  --shadow-card: 0 4px 20px rgba(0,0,0,0.4);
  --shadow-card-hover: 0 8px 40px rgba(204,0,0,0.2);
  --transition: all 0.3s ease;
}

html, body {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading) !important;
  color: var(--color-white) !important;
  letter-spacing: 0.02em;
}

a { color: var(--color-primary) !important; text-decoration: none; }
a:hover { color: var(--color-primary-light) !important; }

/* ---- HEADER / NAVBAR ---- */
.wp-block-template-part[data-area="header"],
header.wp-block-template-part,
#masthead, .site-header {
  position: sticky !important;
  top: 0;
  z-index: 1000;
  background: rgba(10,10,10,0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(204,0,0,0.3) !important;
  padding: 12px 0 !important;
}

.wp-block-site-title a {
  font-family: var(--font-heading) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--color-white) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Navigation */
.wp-block-navigation a, .nav-menu a {
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 14px !important;
  border-radius: 4px;
  transition: var(--transition);
}
.wp-block-navigation a:hover, .nav-menu a:hover {
  color: var(--color-primary) !important;
  background: rgba(204,0,0,0.1) !important;
}

/* ---- HERO / COVER SECTION ---- */
.wp-block-cover.hero-section {
  min-height: 100vh !important;
  background-color: var(--color-bg) !important;
}
.wp-block-cover.hero-section .wp-block-cover__background {
  background: linear-gradient(135deg, rgba(10,10,10,0.7) 0%, rgba(204,0,0,0.2) 100%) !important;
}

/* ---- CARDS ---- */
.ff-card {
  background: var(--color-bg-card) !important;
  border-radius: var(--border-radius) !important;
  border: 1px solid var(--color-border) !important;
  border-top: 3px solid var(--color-primary) !important;
  box-shadow: var(--shadow-card) !important;
  transition: var(--transition) !important;
  overflow: hidden;
}
.ff-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-card-hover) !important;
  border-top-color: var(--color-primary-light) !important;
}

/* ---- BUTTONS ---- */
.wp-block-button__link,
.wp-element-button {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border-radius: 4px !important;
  transition: var(--transition) !important;
}
.wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(204,0,0,0.4) !important;
}

/* ---- TABLES ---- */
.wp-block-table table {
  background: var(--color-bg-card) !important;
  border-collapse: collapse;
  width: 100%;
}
.wp-block-table th {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  font-family: var(--font-heading) !important;
  padding: 12px 16px;
  text-align: left;
}
.wp-block-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}
.wp-block-table tr:hover td { background: rgba(204,0,0,0.05); }

/* ---- FOOTER ---- */
.wp-block-template-part[data-area="footer"],
footer.wp-block-template-part,
#colophon, .site-footer {
  background: #050505 !important;
  border-top: 1px solid var(--color-primary) !important;
  color: var(--color-text-muted) !important;
}

/* ---- SECTIONS ---- */
.wp-block-group {
  background-color: inherit;
}

/* Alternate section backgrounds */
.section-dark { background: var(--color-bg-2) !important; }
.section-darker { background: var(--color-bg) !important; }

/* ---- BADGES ---- */
.badge-date {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---- STATISTICS ---- */
.stat-number {
  font-family: var(--font-heading) !important;
  font-size: 56px !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
  line-height: 1;
}

/* ---- FADE IN ANIMATIONS ---- */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary-light); }

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  .stat-number { font-size: 36px !important; }
  .wp-block-columns { flex-direction: column; }
}

/* ---- CUSTOM POST TYPE ARCHIVE STYLES ---- */
.cpt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

/* ---- YEAR FILTER ---- */
.year-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
}
.year-filter-btn {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 6px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  transition: var(--transition);
}
.year-filter-btn:hover,
.year-filter-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}