/*
Theme Name: Kompass Neustart (GeneratePress Child)
Template: generatepress
Description: Child-Theme für kompass-neustart.com. Warme, zurückhaltende Naturfarbwelt, Fraunces/Karla-Typografie, eigene Block-Stile für Boxen, Callouts und Buttons.
Version: 1.0
*/

/* ==========================================================
   Design-Tokens
   ========================================================== */
:root {
  --kn-warm-white: #FAF8F4;
  --kn-greige: #EEE7DE;
  --kn-greige-alt: #F3EEE7;
  --kn-sand: #DED1C3;
  --kn-sand-alt: #E7DDD0;
  --kn-anthracite: #302D2A;
  --kn-petrol: #496C69;
  --kn-petrol-dark: #3a5754;
  --kn-line: #CFC6BB;
}

/* ==========================================================
   Grundtypografie
   ========================================================== */
body {
  background: var(--kn-warm-white);
  color: var(--kn-anthracite);
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.entry-title {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-weight: 600;
  color: var(--kn-anthracite);
  line-height: 1.22;
}

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

/* Content-Bereich etwas mehr Weißraum */
.site-content .content-area,
.entry-content { line-height: 1.65; }

hr, .wp-block-separator {
  border-top: 1px solid var(--kn-line);
  opacity: 1;
}
.wp-block-separator.is-style-kn-line {
  border-top: 1px solid var(--kn-line);
  max-width: 100%;
}

/* ==========================================================
   Buttons (core/button Stile "Kompass Primär" / "Kompass Outline")
   ========================================================== */
.wp-block-button .wp-block-button__link {
  border-radius: 3px;
  font-weight: 600;
  padding: 12px 22px;
}

.wp-block-button.is-style-kn-primary .wp-block-button__link {
  background-color: var(--kn-petrol);
  color: var(--kn-warm-white);
  border: none;
}
.wp-block-button.is-style-kn-primary .wp-block-button__link:hover {
  background-color: var(--kn-petrol-dark);
}

.wp-block-button.is-style-kn-ghost .wp-block-button__link {
  background-color: transparent;
  color: var(--kn-anthracite);
  border: 1px solid var(--kn-anthracite);
}
.wp-block-button.is-style-kn-ghost .wp-block-button__link:hover {
  color: var(--kn-petrol);
  border-color: var(--kn-petrol);
}

/* ==========================================================
   Gruppen-Block-Stile: Boxen, Callout, Dunkel-Streifen
   ========================================================== */
.wp-block-group.is-style-kn-box {
  background: var(--kn-greige-alt);
  border-left: 3px solid var(--kn-petrol);
  border-radius: 3px;
  padding: 26px 28px;
}

.wp-block-group.is-style-kn-box-sand {
  background: var(--kn-sand-alt);
  border-left: 3px solid var(--kn-anthracite);
  border-radius: 3px;
  padding: 26px 28px;
}

.wp-block-group.is-style-kn-callout {
  background: var(--kn-greige);
  border-radius: 3px;
  padding: 22px 28px;
}
.wp-block-group.is-style-kn-callout p:first-child {
  font-family: "Fraunces", serif;
  font-size: 1.2rem;
  color: var(--kn-petrol-dark);
  font-weight: 600;
}

.wp-block-group.is-style-kn-info-strip {
  background: var(--kn-anthracite);
  color: var(--kn-warm-white);
  padding: 40px 32px;
  border-radius: 3px;
}
.wp-block-group.is-style-kn-info-strip h2,
.wp-block-group.is-style-kn-info-strip h3 { color: var(--kn-warm-white); }
.wp-block-group.is-style-kn-info-strip a { color: var(--kn-sand); }

/* Häkchen-Listen innerhalb unserer Boxen */
.wp-block-group.is-style-kn-box ul,
.wp-block-group.is-style-kn-box-sand ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wp-block-group.is-style-kn-box li,
.wp-block-group.is-style-kn-box-sand li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
}
.wp-block-group.is-style-kn-box li::before,
.wp-block-group.is-style-kn-box-sand li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--kn-petrol);
  font-weight: 700;
}

/* ==========================================================
   Absatz-Block-Stile
   ========================================================== */
p.is-style-kn-lede {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--kn-petrol-dark);
}

p.is-style-kn-eyebrow {
  color: var(--kn-petrol);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

p.is-style-kn-section-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kn-petrol);
}

p.is-style-kn-small {
  font-size: 0.88rem;
  color: #565048;
}

/* ==========================================================
   Kopfbereich / Site-Branding
   ========================================================== */
.site-header,
#masthead.site-header {
  background: var(--kn-warm-white);
  border-bottom: 1px solid var(--kn-line);
}
.site-title a {
  font-family: "Fraunces", serif;
  font-weight: 600;
  color: var(--kn-anthracite) !important;
}
.site-description {
  color: var(--kn-petrol);
}

/* ==========================================================
   Hauptnavigation
   (Selektoren gemäß GeneratePress-Dokumentation)
   ========================================================== */
.main-navigation,
.main-navigation .inside-navigation {
  background: var(--kn-warm-white);
}
.main-navigation .main-nav ul li a {
  color: var(--kn-anthracite);
  font-size: 0.94rem;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a {
  color: var(--kn-petrol);
}

/* Optionaler Kontakt-Button als letzter Menüpunkt:
   im Menü-Editor dem gewünschten Menüpunkt die CSS-Klasse
   "nav-button" geben (siehe Anleitung), dann greift dies: */
.main-navigation .main-nav ul li.nav-button > a {
  background-color: var(--kn-petrol);
  color: var(--kn-warm-white) !important;
  padding: 8px 16px;
  border-radius: 3px;
}
.main-navigation .main-nav ul li.nav-button > a:hover {
  background-color: var(--kn-petrol-dark);
  color: var(--kn-warm-white) !important;
}

/* ==========================================================
   Footer
   ========================================================== */
.site-footer,
.site-footer-container,
.footer-widgets {
  background: var(--kn-warm-white);
  border-top: 1px solid var(--kn-line);
  color: #565048;
}
.site-footer a,
.footer-widgets a { color: var(--kn-petrol); }

.site-info { color: #565048; font-size: 0.85rem; }

/* ==========================================================
   Standard-Seitentitel etwas zurückhaltender
   ========================================================== */
.page .entry-header { margin-bottom: 1.5rem; }