/* ════════════════════════════════════════════════════════════════════
   KL Pages — Shared Design System
   Loaded via functions.php with priority 9999 to override all theme CSS.
   Scoped to .kl-page wrapper used by all interactive page templates.
   ════════════════════════════════════════════════════════════════════ */

/* ── CSS Variables ── */
.kl-page {
  --kl-brown-dark: #1a0f0a;
  --kl-brown: #3b2318;
  --kl-brown-medium: #5c3a2a;
  --kl-brown-light: #8b6545;
  --kl-cream: #faf6f0;
  --kl-cream-dark: #f0e8db;
  --kl-gold: #c9a84c;
  --kl-gold-light: #e8d48b;
  --kl-gold-glow: rgba(201,168,76,0.15);
  --kl-green: #2e7d32;
  --kl-red: #c62828;
  --kl-text: #2c1810;
  --kl-text-light: #6b5344;
  --kl-white: #ffffff;
  --kl-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --kl-font-serif: Georgia, 'Times New Roman', serif;
  --kl-radius: 12px;
  --kl-shadow: 0 4px 24px rgba(26,15,10,0.08);
  --kl-shadow-lg: 0 8px 40px rgba(26,15,10,0.12);
  --kl-transition: 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* ── Base Resets ── */
.kl-page, .kl-page * { box-sizing: border-box; }

/* ── Typography: override Shopkeeper's bare h1-h6{color:#000;font-family:NeueEinstellung} ── */
.kl-page h1, .kl-page h2, .kl-page h3,
.kl-page h4, .kl-page h5, .kl-page h6 {
  color: #2c1810 !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}
.kl-page p {
  color: #2c1810 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* ── Links: override Shopkeeper's a{color:#EC7A5C} ── */
.kl-page a {
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: none !important;
}
.kl-page a:hover, .kl-page a:focus {
  opacity: 1 !important;
}

/* ── Buttons: DARK text on GOLD background ── */
/* Override Shopkeeper's .button,button{background-color:#EC7A5C !important;font-family:NeueEinstellung} */
.kl-page .kl-btn,
.kl-page a.kl-btn,
.kl-page button.kl-btn,
.kl-page input.kl-btn {
  color: #1a0f0a !important;
  background: #c9a84c !important;
  background-color: #c9a84c !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0.5px !important;
  text-decoration: none !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: 8px !important;
  padding: 14px 32px !important;
  display: inline-block !important;
  cursor: pointer !important;
  transition: background 0.3s ease !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
.kl-page .kl-btn:hover,
.kl-page a.kl-btn:hover,
.kl-page button.kl-btn:hover,
.kl-page input.kl-btn:hover {
  color: #1a0f0a !important;
  background: #e8d48b !important;
  background-color: #e8d48b !important;
  opacity: 1 !important;
}

/* Outline variant */
.kl-page .kl-btn--outline,
.kl-page a.kl-btn--outline,
.kl-page .kl-btn.kl-btn--outline,
.kl-page a.kl-btn.kl-btn--outline {
  color: #c9a84c !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 2px solid #c9a84c !important;
}
.kl-page .kl-btn--outline:hover,
.kl-page a.kl-btn--outline:hover,
.kl-page .kl-btn.kl-btn--outline:hover,
.kl-page a.kl-btn.kl-btn--outline:hover {
  color: #1a0f0a !important;
  background: #c9a84c !important;
  background-color: #c9a84c !important;
}

/* ── Button elements (FAQ accordions, toggles) ── */
/* Override Shopkeeper's button{background-color:#EC7A5C !important} */
.kl-page button {
  background: none !important;
  background-color: transparent !important;
  color: #2c1810 !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
.kl-page button:hover {
  color: #c9a84c !important;
  background: none !important;
  background-color: transparent !important;
}

/* ── Hero Section ── */
.kl-page .kl-hero h1 {
  color: #faf6f0 !important;
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
}
.kl-page .kl-hero p,
.kl-page .kl-hero .kl-subtitle,
.kl-page .kl-hero .kl-section-intro {
  color: #e8d48b !important;
}
.kl-page .kl-hero .kl-meta,
.kl-page .kl-hero .kl-hero-badge {
  color: #8b6545 !important;
}

/* ── Section Labels ── */
.kl-page .kl-section-label {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  color: #c9a84c !important;
}

/* ── Section Titles ── */
.kl-page .kl-section-title {
  font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
}

/* ── Dark/Brown Sections ── */
.kl-page .kl-section--dark h1, .kl-page .kl-section--dark h2,
.kl-page .kl-section--dark h3, .kl-page .kl-section--dark h4,
.kl-page .kl-section--brown h1, .kl-page .kl-section--brown h2,
.kl-page .kl-section--brown h3, .kl-page .kl-section--brown h4 {
  color: #faf6f0 !important;
}
.kl-page .kl-section--dark p,
.kl-page .kl-section--brown p {
  color: #8b6545 !important;
}
.kl-page .kl-section--dark a,
.kl-page .kl-section--brown a {
  color: #c9a84c !important;
}
.kl-page .kl-section--dark .kl-section-label,
.kl-page .kl-section--brown .kl-section-label {
  color: #c9a84c !important;
}
.kl-page .kl-section--dark button,
.kl-page .kl-section--brown button {
  color: #faf6f0 !important;
}
.kl-page .kl-section--dark button:hover,
.kl-page .kl-section--brown button:hover {
  color: #c9a84c !important;
}

/* Buttons on dark backgrounds */
.kl-page .kl-section--dark .kl-btn,
.kl-page .kl-section--dark a.kl-btn,
.kl-page .kl-section--brown .kl-btn,
.kl-page .kl-section--brown a.kl-btn,
.kl-page .kl-hero .kl-btn,
.kl-page .kl-hero a.kl-btn,
.kl-page .kl-bottom-cta .kl-btn,
.kl-page .kl-bottom-cta a.kl-btn {
  color: #1a0f0a !important;
  background: #c9a84c !important;
  background-color: #c9a84c !important;
}

/* ── Bottom CTA ── */
.kl-page .kl-bottom-cta h2,
.kl-page .kl-bottom-cta h3 {
  color: #faf6f0 !important;
}
.kl-page .kl-bottom-cta p {
  color: #8b6545 !important;
}
.kl-page .kl-bottom-cta a {
  color: #c9a84c !important;
}

/* ── Inline-style dark backgrounds (fallback) ── */
.kl-page [style*="background-color: #1a0f0a"] h1,
.kl-page [style*="background-color: #1a0f0a"] h2,
.kl-page [style*="background-color: #1a0f0a"] h3,
.kl-page [style*="background-color: #3b2318"] h1,
.kl-page [style*="background-color: #3b2318"] h2,
.kl-page [style*="background-color: #3b2318"] h3,
.kl-page [style*="background: #1a0f0a"] h1,
.kl-page [style*="background: #1a0f0a"] h2,
.kl-page [style*="background: #1a0f0a"] h3,
.kl-page [style*="background: #3b2318"] h1,
.kl-page [style*="background: #3b2318"] h2,
.kl-page [style*="background: #3b2318"] h3 {
  color: #faf6f0 !important;
}
.kl-page [style*="background-color: #1a0f0a"] p,
.kl-page [style*="background-color: #3b2318"] p,
.kl-page [style*="background: #1a0f0a"] p,
.kl-page [style*="background: #3b2318"] p {
  color: #8b6545 !important;
}
.kl-page [style*="background-color: #1a0f0a"] a,
.kl-page [style*="background-color: #3b2318"] a,
.kl-page [style*="background: #1a0f0a"] a,
.kl-page [style*="background: #3b2318"] a {
  color: #c9a84c !important;
}
.kl-page [style*="background-color: #1a0f0a"] button,
.kl-page [style*="background-color: #3b2318"] button,
.kl-page [style*="background: #1a0f0a"] button,
.kl-page [style*="background: #3b2318"] button {
  color: #faf6f0 !important;
  background: none !important;
  background-color: transparent !important;
}

/* ── FAQ Items ── */
.kl-page .kl-faq-q,
.kl-page [class*="faq-q"] {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: #2c1810 !important;
  background: none !important;
  background-color: transparent !important;
}
.kl-page .kl-faq-q:hover,
.kl-page [class*="faq-q"]:hover {
  color: #c9a84c !important;
  background: none !important;
  background-color: transparent !important;
}
.kl-page .kl-faq-a p,
.kl-page [class*="faq-a"] p,
.kl-page [class*="faq-a-inner"] {
  color: #6b5344 !important;
}
.kl-page [class*="faq-a"] a,
.kl-page [class*="faq-a-inner"] a {
  color: #c9a84c !important;
}

/* ── Hide WordPress page title (we use our own hero) ── */
body[class*="page-template-"] .entry-header {
  display: none !important;
}

/* ── Safety/Info Cards on dark backgrounds ── */
.kl-page .kl-safety-item h4,
.kl-page .kl-info-card h3 {
  color: #faf6f0 !important;
}
.kl-page .kl-safety-item p,
.kl-page .kl-info-card p {
  color: #8b6545 !important;
}