/* =======================================================
   📸 Accordion – HUISSTIJL
   Versie: 1.0 (premium goud / zwart)
   Datum: februari 2026

   Afhankelijk van:
   - accordion-basis.css v1.1

   Bevat:
   - Zwarte basis
   - Goud accent (liquid stijl)
   - Subtiele glow & hover lift
   - Luxe uitstraling (geen harde randen)
   ======================================================= */

:root{
  --ts-gold: #f8bb19;
  --ts-gold-soft: rgba(248,187,25,0.25);
  --ts-black-deep: #0d0d0d;
  --ts-black-mid: #1a1a1a;
}

/* =========================
   CONTAINER
========================= */

.accordion.treinspotten {
  max-width: 760px;
  margin: 20px auto;

  padding: 0;
  border: none;
  background: transparent;
}

/* =========================
   ITEM (zachte luxe kaart)
========================= */

.accordion.treinspotten .accordion-item {
  border-radius: 14px;

  background: linear-gradient(
    180deg,
    var(--ts-black-mid) 0%,
    var(--ts-black-deep) 100%
  );

  border: 1px solid rgba(198,168,79,0.25);

  transition: all 0.25s ease;
}

/* Hover = lichte lift + goud gloed */
.accordion.treinspotten .accordion-item:hover {
  transform: translateY(-2px);

  box-shadow:
    0 6px 18px rgba(0,0,0,0.6),
    0 0 12px var(--ts-gold-soft);
}

/* =========================
   HEADER
========================= */

.accordion.treinspotten .accordion-header {
  background: transparent;
  color: #ffffff;

  font-weight: 600;

  padding: 14px 18px;
}

/* Gouden accent links (subtiel) */
.accordion.treinspotten .accordion-header::before {
  background: var(--ts-gold);
  width: 4px;
}

/* Hover */
.accordion.treinspotten .accordion-header:hover {
  color: var(--ts-gold);
}

/* =========================
   OPEN – PREMIUM EFFECT
========================= */

.accordion.treinspotten .accordion-header[aria-expanded="true"] {
  color: var(--ts-gold);

  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;

  box-shadow:
    inset 0 -1px 0 rgba(198,168,79,0.3);
}

/* =========================
   PANEL (liquid zwart)
========================= */

.accordion.treinspotten .accordion-panel-inner {
  background: linear-gradient(
    180deg,
    #111111 0%,
    #0a0a0a 100%
  );

  color: #e7e7e7;

  border-top: 1px solid rgba(198,168,79,0.25);

  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

/* Tekst */
.accordion.treinspotten .accordion-panel-inner p,
.accordion.treinspotten .accordion-panel-inner li {
  color: #dddddd;
}

/* =========================
   OPEN – subtiele goud glow
========================= */

.accordion.treinspotten .accordion-panel[aria-hidden="false"] .accordion-panel-inner {
  box-shadow:
    0 8px 24px rgba(0,0,0,0.7),
    0 0 12px rgba(198,168,79,0.15);
}

/* =========================
   GEEN BASIS CONFLICTEN
========================= */

.accordion.treinspotten {
  padding: 0 !important;
  background: none !important;
}

.accordion.treinspotten .accordion-item {
  border-radius: 14px !important;
}