/*
Theme Name:   Hallo-Opa Child
Theme URI:    https://hallo-opa.de
Description:  Kadence Child Theme für Hallo-Opa.de – Waldgrün & Gold Editorial Design
Author:       Hallo-Opa.de
Template:     kadence
Version:      1.0.0
Text Domain:  hallo-opa-child
*/

/* ═══════════════════════════════════════════
   GOOGLE FONTS
═══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Source+Sans+3:wght@300;400;600&display=swap');

/* ═══════════════════════════════════════════
   FARBPALETTE (CSS-Variablen)
   → Hier kannst du später alle Farben ändern
═══════════════════════════════════════════ */
:root {
  --ho-gruen:       #1B4332;   /* Waldgrün – Hauptfarbe     */
  --ho-gold:        #D4860A;   /* Gold – Akzentfarbe        */
  --ho-creme:       #F6FAF4;   /* Cremig – Seitenhintergrund */
  --ho-sand:        #D8EDD0;   /* Sand – Karten & Trennlinien */
  --ho-text-dunkel: #0D2818;   /* Sehr dunkles Grün – Fließtext */
  --ho-text-mitte:  #2D6A4F;   /* Mittelgrün – Sekundärtext  */
  --ho-text-hell:   #74B08A;   /* Hellgrün – Metainfo        */
  --ho-weiss:       #FFFFFF;
}

/* ═══════════════════════════════════════════
   GLOBALE BASIS-STILE
═══════════════════════════════════════════ */
body {
  font-family: 'Source Sans 3', sans-serif;
  background-color: var(--ho-creme);
  color: var(--ho-text-dunkel);
  font-size: 17px;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  color: var(--ho-text-dunkel);
  line-height: 1.25;
}

a {
  color: var(--ho-gruen);
  transition: color 0.2s;
}
a:hover {
  color: var(--ho-gold);
}

/* ═══════════════════════════════════════════
   HEADER & NAVIGATION
═══════════════════════════════════════════ */
.site-header,
.kadence-header {
  background-color: var(--ho-weiss) !important;
  border-bottom: 2px solid var(--ho-sand);
}

/* Logo */
.site-branding .site-title,
.site-branding .site-title a {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--ho-gruen) !important;
  text-decoration: none;
}

/* Navigationslinks */
.main-navigation a,
.kadence-navigation a,
#site-navigation a {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ho-text-mitte) !important;
  text-decoration: none;
  transition: color 0.2s;
}
.main-navigation a:hover,
.kadence-navigation a:hover,
#site-navigation a:hover {
  color: var(--ho-gold) !important;
}

/* Newsletter-Button in der Navigation */
.nav-cta,
.menu-item-newsletter a {
  background-color: var(--ho-gold) !important;
  color: var(--ho-weiss) !important;
  padding: 0.4rem 1rem;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.wp-block-button__link,
.button,
button[type="submit"],
input[type="submit"] {
  background-color: var(--ho-gold) !important;
  color: var(--ho-weiss) !important;
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  padding: 0.7rem 1.8rem;
  letter-spacing: 0.04em;
  transition: background 0.2s;
}
.wp-block-button__link:hover,
.button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background-color: #b86e08 !important;
}

/* ═══════════════════════════════════════════
   BEITRÄGE & SEITEN
═══════════════════════════════════════════ */

/* Beitragstitel */
.entry-title,
.entry-title a {
  font-family: 'Playfair Display', serif;
  color: var(--ho-text-dunkel);
}
.entry-title a:hover {
  color: var(--ho-gruen);
}

/* Kategorie-Labels */
.entry-meta,
.cat-links,
.posted-in {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ho-gold);
}

/* Beitrags-Karten */
.kadence-posts .entry,
article.post {
  background: var(--ho-weiss);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(27, 67, 50, 0.08);
  transition: transform 0.2s;
}
.kadence-posts .entry:hover,
article.post:hover {
  transform: translateY(-3px);
}

/* Trennlinien */
hr,
.wp-block-separator {
  border-color: var(--ho-sand);
}

/* ═══════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════ */
.widget-area .widget {
  background: var(--ho-weiss);
  border: 1px solid var(--ho-sand);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.widget-title {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ho-text-mitte);
  border-bottom: 2px solid var(--ho-gold);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
.site-footer,
.kadence-footer {
  background-color: var(--ho-text-dunkel) !important;
  color: rgba(255, 255, 255, 0.7);
}

.site-footer a,
.kadence-footer a {
  color: rgba(255, 255, 255, 0.6);
}
.site-footer a:hover,
.kadence-footer a:hover {
  color: var(--ho-gold);
}

.site-footer .widget-title,
.kadence-footer .widget-title {
  color: var(--ho-weiss);
  border-bottom-color: var(--ho-gold);
}

/* ═══════════════════════════════════════════
   KATEGORIE-FARBEN (Rubriken)
═══════════════════════════════════════════ */
.tag-cloud-link,
.wp-block-tag-cloud a {
  background: var(--ho-sand);
  color: var(--ho-gruen);
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  font-size: 0.85rem !important;
  font-weight: 600;
  text-decoration: none;
}
.tag-cloud-link:hover,
.wp-block-tag-cloud a:hover {
  background: var(--ho-gruen);
  color: var(--ho-weiss);
}

/* ═══════════════════════════════════════════
   BLOCK EDITOR AKZENTE
═══════════════════════════════════════════ */
.wp-block-pullquote,
blockquote {
  border-left: 4px solid var(--ho-gold);
  font-family: 'Playfair Display', serif;
  font-style: italic;
  color: var(--ho-gruen);
}

.wp-block-quote cite,
blockquote cite {
  font-family: 'Source Sans 3', sans-serif;
  font-style: normal;
  font-size: 0.85rem;
  color: var(--ho-text-hell);
}

/* ═══════════════════════════════════════════
   RESPONSIV
═══════════════════════════════════════════ */
@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
}