/**
 * hofmanns.digital — Dark Mode CSS
 * Einbinden in Child-Theme: style.css oder per wp_enqueue_style()
 * Arbeitet mit data-color-scheme Attribut vom Toggle-Script
 * UND mit prefers-color-scheme als Fallback
 */

/* ─── CSS Custom Properties — Light (Default) ─────────────────────── */
:root {
  --hd-bg:          #DEE8E8;
  --hd-bg-alt:      #F5ECD7;
  --hd-surface:     #FFFFFF;
  --hd-text:        #1B4242;
  --hd-text-muted:  #175B5Faa;
  --hd-primary:     #175B5F;
  --hd-accent:      #F0C767;
  --hd-star:        #C0392B;
  --hd-border:      #175B5F22;
  --hd-card-bg:     #F0C767;
  --hd-footer-bg:   #1B4242;
  --hd-footer-text: #DEE8E8;
}

/* ─── Dark Mode via Toggle ─────────────────────────────────────────── */
[data-color-scheme="dark"] {
  --hd-bg:          #1B4242;
  --hd-bg-alt:      #0D2626;
  --hd-surface:     #175B5F;
  --hd-text:        #DEE8E8;
  --hd-text-muted:  #DEE8E8aa;
  --hd-primary:     #F0C767;
  --hd-accent:      #F0C767;
  --hd-star:        #C0392B;
  --hd-border:      #DEE8E822;
  --hd-card-bg:     #175B5F;
  --hd-footer-bg:   #0D2626;
  --hd-footer-text: #DEE8E8;
}

/* ─── Dark Mode via System (Fallback ohne Toggle) ──────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme="light"]) {
    --hd-bg:          #1B4242;
    --hd-bg-alt:      #0D2626;
    --hd-surface:     #175B5F;
    --hd-text:        #DEE8E8;
    --hd-text-muted:  #DEE8E8aa;
    --hd-primary:     #F0C767;
    --hd-accent:      #F0C767;
    --hd-star:        #C0392B;
    --hd-border:      #DEE8E822;
    --hd-card-bg:     #175B5F;
    --hd-footer-bg:   #0D2626;
    --hd-footer-text: #DEE8E8;
  }
}

/* ─── Anwendung der Variablen ──────────────────────────────────────── */
body {
  background-color: var(--hd-bg);
  color: var(--hd-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.wp-block-group,
.wp-block-cover {
  transition: background-color 0.3s ease;
}

/* Toggle-Button */
#hd-dark-toggle {
  background: var(--hd-primary);
  border: 1.5px solid var(--hd-primary);
  border-radius: 2rem;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
  font-size: 1rem;
  color: var(--hd-bg);
  transition: all 0.2s ease;
}

#hd-dark-toggle:hover {
  background: var(--hd-primary);
  color: var(--hd-bg);
  border-color: var(--hd-primary);
}

/* Stern-Element */
.hd-stern {
  color: var(--hd-star);
  font-family: 'Fira Code', monospace;
}

/* Cards */
.hd-card {
  background: var(--hd-card-bg);
  border-radius: 1.2rem;
  transition: background-color 0.3s ease;
}

/* Footer */
.wp-block-template-part[data-slug="footer"] {
  background: var(--hd-footer-bg);
  color: var(--hd-footer-text);
}
/* ─── Dark Mode: Elementfarben ───────────────────────────── */

/* Site-Titel → Mist */
[data-color-scheme="dark"] .wp-block-site-title a {
    color: var(--hd-text);
    text-decoration: none;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-color-scheme="light"]) .wp-block-site-title a {
        color: var(--hd-text);
        text-decoration: none;
    }
}

/* Tagline → Gold */
[data-color-scheme="dark"] .wp-block-site-tagline {
    color: var(--hd-accent);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-color-scheme="light"]) .wp-block-site-tagline {
        color: var(--hd-accent);
    }
}

/* Navigation → Gold */
[data-color-scheme="dark"] .wp-block-navigation a {
    color: var(--hd-accent);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-color-scheme="light"]) .wp-block-navigation a {
        color: var(--hd-accent);
    }
}

/* Fließtext → Mist */
[data-color-scheme="dark"] .wp-block-paragraph {
    color: var(--hd-text);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-color-scheme="light"]) .wp-block-paragraph {
        color: var(--hd-text);
    }
}
/* ─── Header Layout ───────────────────────────────────────── */
.wp-block-template-part[data-slug="header"] .wp-block-row,
.wp-block-template-part[data-slug="header"] .wp-block-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Site-Titel → links */
.wp-block-template-part[data-slug="header"] .wp-block-site-title {
    flex: 1;
    text-align: left;
}

/* Navigation → Mitte */
.wp-block-template-part[data-slug="header"] .wp-block-navigation {
    flex: 1;
    text-align: center;
    justify-content: center;
}

/* Toggle Button → rechts */
.wp-block-template-part[data-slug="header"] #hd-dark-toggle {
    flex: 1;
    text-align: right;
    display: flex;
    justify-content: flex-end;
}