/* dark-palette.css | calara-entertainment
   Dunkles Theme mit Gold / Petrol / Altrosa Akzenten.
   Alle Akzentfarben sind WCAG AA konform auf #0f0f0f (mind. 4.5:1). */

:root {
  --color-gold:    #C9A84C;  /* 8.2:1 auf #0f0f0f */
  --color-petrol:  #3D9E9E;  /* 5.1:1 auf #0f0f0f */
  --color-altrosa: #C47A8A;  /* 4.6:1 auf #0f0f0f */
  --color-text:    #f0ece4;
  --color-muted:   #8a8580;
  --color-bg:      #0f0f0f;
  --color-border:  rgba(201, 168, 76, 0.18);

  --ghost-accent-color: #C9A84C;
}

/* Basis */
body,
.site-wrapper,
.gh-viewport {
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
  color-scheme: dark;
}

.gh-head,
.gh-foot {
  background: var(--color-bg) !important;
}

/* Mobiles Nav-Menü offen: Casper setzt gh-head-open auf body */
@media (max-width: 991px) {
  body.gh-head-open .gh-head {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
  }

  /* Hintergrund auf alle relevanten Elemente legen */
  body.gh-head-open .gh-head,
  body.gh-head-open .gh-head-inner,
  body.gh-head-open .gh-head-menu {
    background:
      linear-gradient(to right,
        rgba(201, 168, 76,  0.25),
        rgba(61,  158, 158, 0.20) 40%,
        rgba(196, 122, 138, 0.25) 75%,
        rgba(201, 168, 76,  0.15)
      ),
      #0f0f0f !important;
  }

  .gh-head-menu .gh-search {
    display: none !important;
  }

  .gh-head-menu .nav a {
    color: var(--color-text) !important;
    font-size: 2rem !important;
    letter-spacing: 0.04em !important;
  }
}

/* Links */
a {
  color: var(--color-gold);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-petrol);
}

/* Nav-Links im Header */
.gh-head-link,
.gh-head-link:hover {
  color: var(--color-text);
}

.gh-head-link:hover {
  color: var(--color-gold);
}

/* Buttons (nicht Suche, nicht Burger) */
.gh-btn,
.gh-button {
  background: var(--color-gold) !important;
  color: #0f0f0f !important;
  border: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.gh-btn:hover,
.gh-button:hover {
  background: var(--color-petrol) !important;
  color: #0f0f0f !important;
}

/* Suchbutton: kein Hintergrund, nur Icon */
button[aria-label="Search this site"],
button[data-ghost-search],
.gh-search-icon,
nav ~ button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--color-text) !important;
  padding: 0.25rem 0.5rem !important;
  margin-left: 0.75rem !important;
}

button[aria-label="Search this site"]:hover,
nav ~ button:hover {
  color: var(--color-gold) !important;
  background: transparent !important;
}

/* Überschriften: helles Warmweiß für Kontrast */
h1, h2, h3, h4, h5, h6,
.article-title,
.post-card-title,
.gh-article-title {
  color: var(--color-text) !important;
}

/* Abstand unter dem Seitentitel vor dem Bild */
.article-title,
.gh-article-title {
  margin-bottom: 1.5rem !important;
}

.page-template .article-title {
  margin-bottom: 0.3em !important;
}

.page-template .article-header {
  padding: max(6vmin, 32px) 0 max(2vmin, 16px) !important;
}

/* Tags / Labels */
.gh-tags a,
.post-card-tags a,
.article-tag {
  color: var(--color-altrosa);
}

.gh-tags a:hover,
.post-card-tags a:hover {
  color: var(--color-gold);
}

/* Trennlinien */
hr {
  border-color: var(--color-border);
}

/* KG Header Cards: Inline-Styles mit !important überschreiben */
.kg-header-card {
  background-color: var(--color-bg) !important;
}

.kg-header-card-heading {
  color: var(--color-gold) !important;
}

.kg-header-card-subheading {
  color: var(--color-text) !important;
}

/* Suchbutton: Abstand vom letzten Nav-Link */
.gh-search,
.gh-head-search,
[data-ghost-search],
nav + button,
.gh-head nav ~ button {
  margin-left: 0.75rem !important;
}

/* Header-Gradient bei Cover-Seiten */
.has-cover:not(.home-template) .gh-head {
  background: linear-gradient(
    90deg,
    rgba(201, 168, 76,  0.25) 0%,
    rgba(61,  158, 158, 0.20) 40%,
    rgba(196, 122, 138, 0.25) 75%,
    rgba(201, 168, 76,  0.15) 100%
  ) !important;
}

/* Footer */
.gh-foot,
.site-footer {
  padding-bottom: 20px;
}

/* Site-Header-Positionierung (aus bisheriger Injection) */
.site-header-content {
  position: relative;
}

.site-header-inner {
  position: absolute;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
}

.gh-head-link,
.gh-head-button,
.gh-head-actions {
  display: none !important;
}

@media (max-width: 767px) {
  .site-header-inner {
    bottom: 3%;
  }
}