/*
Layer: 05-blocks
Datei: accordion.css
*/

/* =====================================================
   🧱 Adiumento Accordion – Glass Glow (native <details>)
   ===================================================== */

/* Basiswerte */
.wp-block-coblocks-accordion {
  --accordion-radius: 0.9rem;
  --accordion-gap: 1.2rem;
  --accordion-speed: 0.45s;
  --accordion-blur: 0px;
  --accordion-bg: rgba(255, 255, 255, 0.12);
  --accordion-border: rgba(255, 255, 255, 0.18);
  --accordion-text: #ffffff;
  --accordion-heading: #ffffff;
  --accordion-icon: #00AEEF;
  --accordion-glow: rgba(14, 42, 60, 0.12);
}

/* ===== Farbvarianten nach Sektion ===== */
.is-style-section-light .wp-block-coblocks-accordion,
.is-style-section-neutral .wp-block-coblocks-accordion,
.service-split-accordion .wp-block-coblocks-accordion,
.service-page-topics .wp-block-coblocks-accordion {
  --accordion-bg: rgba(255, 255, 255, 0.65);
  --accordion-border: rgba(0, 0, 0, 0.08);
  --accordion-text: #0E2A3C;
  --accordion-heading: #0066B3;
  --accordion-icon: #F05A28;
  --accordion-glow: rgba(240, 90, 40, 0.25);
}

.is-style-section-light,
.is-style-section-neutral {
  --accordion-bg: rgba(255, 255, 255, 0.65);
  --accordion-border: rgba(0, 0, 0, 0.08);
  --accordion-text: #0E2A3C;
  --accordion-heading: #0066B3;
  --accordion-icon: #F05A28;
  --accordion-glow: rgba(240, 90, 40, 0.25);
}

.is-style-section-accent,
.is-style-section-accent-light {
  --accordion-bg: rgba(255, 255, 255, 0.12);
  --accordion-border: rgba(255, 255, 255, 0.25);
  --accordion-text: #ffffff;
  --accordion-heading: #ffffff;
  --accordion-icon: #00AEEF;
  --accordion-glow: rgba(255, 255, 255, 0.25);
}

.is-style-section-dark,
.is-style-section-secondary {
  --accordion-bg: rgba(255, 255, 255, 0.08);
  --accordion-border: rgba(255, 255, 255, 0.2);
  --accordion-text: #ffffff;
  --accordion-heading: #00AEEF;
  --accordion-icon: #F05A28;
  --accordion-glow: rgba(0, 174, 239, 0.25);
}

/* =====================================================
   Container
   ===================================================== */
.wp-block-coblocks-accordion-item,
.wp-block-details.wp-block-coblocks-accordion-item {
  margin-bottom: var(--accordion-gap);
  border-radius: var(--accordion-radius);
  box-shadow: 0 8px 22px rgba(14, 42, 60, 0.06);
  overflow: hidden;
}

/* <details> Styling (Core: details-Element ist der Block selbst) */
.wp-block-coblocks-accordion-item details,
.wp-block-details.wp-block-coblocks-accordion-item {
  background: var(--accordion-bg);
  border: 1px solid var(--accordion-border);
  border-radius: var(--accordion-radius);
  transition: all var(--accordion-speed) ease;
}

/* Hover – leichtes Anheben */
.wp-block-coblocks-accordion-item details:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(14, 42, 60, 0.08);
}

/* =====================================================
   Summary (Titel)
   ===================================================== */
.wp-block-coblocks-accordion-item summary,
.wp-block-coblocks-accordion-item__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  padding: 1.1rem 1.4rem;
  color: var(--accordion-heading);
  font-weight: 600;
  font-size: var(--adi-font-emphasis);
  cursor: pointer;
  transition: background var(--accordion-speed), color var(--accordion-speed);
  position: relative;
  z-index: 2; /* verhindert dunkle Linien bei Overlaps */
  background: transparent; /* entfernt mittleren Streifen */
}

.wp-block-coblocks-accordion-item summary::-webkit-details-marker,
.wp-block-coblocks-accordion-item__title::-webkit-details-marker {
  display: none;
}

/* Pfeil / Icon */
.wp-block-coblocks-accordion-item summary::after,
.wp-block-coblocks-accordion-item__title::after {
  content: "▸";
  font-size: 1.3rem;
  color: var(--accordion-icon);
  transition: transform var(--accordion-speed) ease, color var(--accordion-speed);
}

/* Offen = Pfeil drehen */
.wp-block-coblocks-accordion-item details[open] > .wp-block-coblocks-accordion-item summary::after,
.wp-block-coblocks-accordion-item__title::after {
  transform: rotate(90deg);
  color: var(--accordion-heading);
}

/* Hover-Effekt */
.wp-block-coblocks-accordion-item__title:hover {
  background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
}

/* =====================================================
   Inhalt (sanftes Auf- und Zuklappen)
   ===================================================== */

/* Grundzustand */
.wp-block-coblocks-accordion-item details > .wp-block-coblocks-accordion-item__content,
.wp-block-coblocks-accordion-item details > div {
  color: var(--accordion-text);
  line-height: 1.6;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  background: transparent;
  padding: 0 1.4rem;
  transition:
    max-height var(--accordion-speed) ease,
    opacity var(--accordion-speed) ease,
    padding var(--accordion-speed) ease;
}

/* Aufklappen */
.wp-block-coblocks-accordion-item details[open] > .wp-block-coblocks-accordion-item__content,
.wp-block-coblocks-accordion-item details[open] > div {
  max-height: 600px;
  opacity: 1;
  padding: 0 1.4rem 1.2rem;
}

/* Zuklappen mit leichtem Delay – für flüssigen Effekt */
.wp-block-coblocks-accordion-item details:not([open]) > div {
  transition:
    max-height var(--accordion-speed) ease,
    opacity 0.3s ease 0.15s,
    padding var(--accordion-speed) ease;
}

/* Paragraphen-Abstand */
.wp-block-coblocks-accordion-item details > div p {
  margin: 0.4rem 0 0;
}

/* =====================================================
   ✨ Adiumento Accordion – Glow Pulse & Motion Upgrade
   ===================================================== */

/* Ruhiger Standard: keine Pulse-/Fade-Up-Animationen */

/* 🔹 Übergänge flüssiger */
.wp-block-coblocks-accordion-item details > .wp-block-coblocks-accordion-item__content {
  transition:
    max-height 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
    opacity 0.45s ease,
    padding 0.45s ease;
}

/* Entfernt den blauen Standard-Fokusrahmen nur bei Maus-Klicks */
.wp-block-coblocks-accordion-item__title:focus {
  outline: none;
  box-shadow: none;
}

/* Option: Fokus bleibt sichtbar bei Tastaturnavigation (barrierefrei) */
.wp-block-coblocks-accordion-item__title:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accordion-icon);
  border-radius: var(--accordion-radius);
}

/* =====================================================
   CoBlocks: Accordion Item (Placeholder, 1:1)
   ===================================================== */

.wp-block-coblocks-accordion-item {
    /* Custom Styles */
}

/* 🔹 Typografie */
.wp-block-coblocks-accordion-item h2,
.wp-block-coblocks-accordion-item p {
    /* Schriftgröße, Farbe, etc. */
}

/* 🔹 Responsive Anpassungen */
@media (max-width: 768px) {
    .wp-block-coblocks-accordion-item {
        /* Mobile Styles */
    }
}