/*
Theme Name:  Soul Family Child
Theme URI:   https://soulfamilygathering.de
Description: Child Theme für das Soul Family Gathering – basierend auf Astra
Author:      Soul Family
Author URI:  https://soulfamilygathering.de
Template:    astra
Version:     1.0.0
License:     GNU General Public License v2 or later
Text Domain: soul-family-child
*/

/* ================================================================
   DESIGN TOKENS
   Alle Farben, Schriften und Abstände zentral definiert.
   Änderungen hier wirken sich auf die gesamte Seite aus.
   ================================================================ */

:root {
  /* Farben */
  --sf-bg:          #0D0905;
  --sf-bg2:         #18100A;
  --sf-bg3:         #221508;
  --sf-gold:        #C8943A;
  --sf-gold-light:  #E8C06A;
  --sf-gold-pale:   #F5E4B8;
  --sf-green:       #4E7A5C;
  --sf-cream:       #F0E2C4;
  --sf-fire:        #D9622A;
  --sf-brown:       #7A4E28;
  --sf-muted:       rgba(240, 226, 196, 0.55);
  --sf-glow:        rgba(200, 148, 58, 0.25);

  /* Schriften */
  --sf-font-display: 'Cinzel Decorative', Georgia, serif;
  --sf-font-heading: 'Cinzel', Georgia, serif;
  --sf-font-body:    'Cormorant Garamond', Georgia, serif;

  /* Abstände */
  --sf-space-xs:  0.5rem;
  --sf-space-sm:  1rem;
  --sf-space-md:  2rem;
  --sf-space-lg:  4rem;
  --sf-space-xl:  7rem;

  /* Rahmen */
  --sf-border:     1px solid rgba(200, 148, 58, 0.15);
  --sf-border-mid: 1px solid rgba(200, 148, 58, 0.3);
}

/* ================================================================
   BASIS-TYPOGRAFIE
   ================================================================ */

body {
  background-color: var(--sf-bg);
  color: var(--sf-cream);
  font-family: var(--sf-font-body);
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.8;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sf-font-heading);
  font-weight: 400;
  color: var(--sf-cream);
  letter-spacing: 0.05em;
  line-height: 1.2;
}

/* Display-Überschriften (H1, H2 mit Klasse) */
h1,
h2.display,
.wp-block-heading.is-style-display {
  font-family: var(--sf-font-display);
}

p { color: var(--sf-muted); }

a {
  color: var(--sf-gold);
  text-decoration: none;
  transition: color 0.3s;
}

a:hover { color: var(--sf-gold-light); }

strong, b { color: var(--sf-cream); font-weight: 500; }

em, i { color: var(--sf-gold-pale); }

/* ================================================================
   ASTRA OVERRIDES – Hintergrund & Struktur
   ================================================================ */

/* Header */
.site-header,
#masthead,
.ast-primary-header-bar {
  background-color: rgba(13, 9, 5, 0.85) !important;
  backdrop-filter: blur(8px);
  border-bottom: var(--sf-border);
}

/* Logo Text (falls kein Bild-Logo) */
.site-title a,
.ast-site-name {
  font-family: var(--sf-font-heading) !important;
  font-size: 1rem !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: var(--sf-gold) !important;
}

/* Navigation */
.main-navigation a,
.ast-primary-nav a,
#site-navigation a {
  font-family: var(--sf-font-heading) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--sf-muted) !important;
  transition: color 0.3s !important;
}

.main-navigation a:hover,
.ast-primary-nav a:hover {
  color: var(--sf-gold-light) !important;
}

/* Footer */
.site-footer,
#colophon,
.ast-footer-overlay {
  background-color: var(--sf-bg2) !important;
  border-top: var(--sf-border);
  color: var(--sf-muted);
}

/* Main content area */
.site-content,
#content,
.ast-container {
  background: transparent !important;
}

/* ================================================================
   BUTTONS
   ================================================================ */

.wp-block-button__link,
.ast-button,
.button,
button[type="submit"] {
  font-family: var(--sf-font-heading) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, var(--sf-gold-light), var(--sf-gold)) !important;
  color: var(--sf-bg) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 1rem 2.5rem !important;
  box-shadow: 0 4px 24px rgba(200, 148, 58, 0.3) !important;
  transition: transform 0.3s, box-shadow 0.3s !important;
}

.wp-block-button__link:hover,
.ast-button:hover,
.button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 32px rgba(200, 148, 58, 0.5) !important;
  color: var(--sf-bg) !important;
}

/* Outline-Variante */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--sf-gold) !important;
  border: 1px solid rgba(200, 148, 58, 0.4) !important;
  box-shadow: none !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(200, 148, 58, 0.08) !important;
  border-color: var(--sf-gold) !important;
}

/* ================================================================
   GRAIN OVERLAY (dezentes Textur-Overlay über der ganzen Seite)
   ================================================================ */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: 9999;
}

/* ================================================================
   GUTENBERG BLOCK OVERRIDES
   ================================================================ */

/* Trennlinie */
.wp-block-separator {
  border-color: rgba(200, 148, 58, 0.2) !important;
}

/* Zitat */
.wp-block-quote {
  border-left: 2px solid var(--sf-gold) !important;
  font-style: italic;
  color: var(--sf-cream);
  font-size: 1.2rem;
  padding-left: 1.5rem;
}

/* Tabelle */
.wp-block-table td,
.wp-block-table th {
  border-color: rgba(200, 148, 58, 0.15) !important;
}

.wp-block-table thead {
  background: var(--sf-bg2);
  color: var(--sf-gold-pale);
  font-family: var(--sf-font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* ================================================================
   HILFSKLASSEN
   Können direkt im Block-Editor als "Zusätzliche CSS-Klasse"
   eingetragen werden.
   ================================================================ */

/* Goldener Label-Text (z.B. für Abschnittsbezeichnungen) */
.sf-label {
  font-family: var(--sf-font-heading);
  font-size: 0.65rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--sf-gold);
}

/* Zentrierter Abschnitt mit max. Breite */
.sf-centered {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Goldene Trennlinie mit Rauten-Ornament */
.sf-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 2rem auto;
}

.sf-ornament::before,
.sf-ornament::after {
  content: '';
  width: 60px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(200,148,58,0.4));
}

.sf-ornament::after {
  background: linear-gradient(to left, transparent, rgba(200,148,58,0.4));
}

/* Dunkle Karte (für Prinzipien, Info-Boxen etc.) */
.sf-card {
  background: var(--sf-bg2);
  border: var(--sf-border);
  padding: 2.5rem 2rem;
  transition: background 0.4s;
}

.sf-card:hover {
  background: var(--sf-bg3);
}

/* Vollbreiter dunkler Abschnitt */
.sf-section-dark {
  background: var(--sf-bg2);
  padding: var(--sf-space-xl) var(--sf-space-md);
}