/*
Theme Name: Stay Safe Claude Design
Theme URI: https://ss-erstehilfe-frankfurt.de
Author: Kevin Brandt
Author URI: https://ss-erstehilfe-frankfurt.de
Description: 1:1-Nachbau des Claude-Design-Entwurfs fuer Stay Safe Erste-Hilfe Frankfurt. Eigenstaendiges, separates Theme - unabhaengig vom aktuell aktiven Theme. Nicht aktivieren ohne vorherige Pruefung/Vorschau.
Version: 1.0.0
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: stay-safe-cd
*/

body {
  margin: 0;
  background: oklch(1 0 0);
  font-family: 'IBM Plex Sans', sans-serif;
  color: oklch(0.22 0.01 50);
}
a { color: oklch(0.52 0.22 25); text-decoration: none; }
a:hover { color: oklch(0.42 0.22 25); }
* { box-sizing: border-box; }
img { max-width: 100%; }

/* ===== Kurse-Dropdown im Hauptmenue (Hover Desktop, Klick auf Touch) ===== */
.kurse-nav-item { position: relative; }
.kurse-nav-item .kurse-dropdown {
  opacity: 0;
  visibility: hidden;
  left: 50%;
  transform: translate(-50%, 4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  pointer-events: none;
  max-width: calc(100vw - 24px);
}
.kurse-nav-item:hover .kurse-dropdown,
.kurse-nav-item:focus-within .kurse-dropdown,
.kurse-nav-item.open .kurse-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

/* ===== "Jetzt anrufen" Telefonnummer-Popup ===== */
.ss-call-wrap { position: relative; }
.ss-call-popup {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: oklch(0.2 0.015 30);
  color: white;
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.18);
  z-index: 60;
}
.ss-call-popup.show { display: block; }

/* ===== FAQ-Akkordeon (natives <details>) ===== */
.ss-faq-item summary {
  list-style: none;
  cursor: pointer;
}
.ss-faq-item summary::-webkit-details-marker { display: none; }
.ss-faq-item summary::marker { content: ''; }
.ss-faq-symbol::before { content: '+'; }
.ss-faq-item[open] .ss-faq-symbol::before { content: '\2013'; }

/* ===== Responsive Feinschliff ===== */
@media (max-width: 640px) {
  header nav { justify-content: flex-start !important; }

  .kurse-nav-item .kurse-dropdown {
    left: 0;
    transform: translate(0, 4px);
  }
  .kurse-nav-item:hover .kurse-dropdown,
  .kurse-nav-item:focus-within .kurse-dropdown,
  .kurse-nav-item.open .kurse-dropdown {
    transform: translate(0, 0);
  }
}