/* =====================================================
   🚆 TABS – HUISSTIJL v1.0
   Gebaseerd op treinspot stijl (zwart/goud)

   ✔ Werkt met tabs-basis.css
   ✔ GEEN JS nodig
   ✔ Alleen styling
===================================================== */

/* =====================================================
   VARIABELEN
===================================================== */

.tabs.huisstijl {
  --huis-goud: #f8bb19;
  --huis-zwart: #000;
  --huis-bg: #080808;
}

/* =====================================================
   TAB HEADERS (alle niveaus)
===================================================== */

.tabs.huisstijl .tab-header,
.tabs.huisstijl .subtab-header,
.tabs.huisstijl .subsubtab-header {

  background: linear-gradient(180deg, #111 0%, #000 100%);
  color: #fff;

  border: 2px solid var(--huis-goud);
  border-bottom: none;

  transition: all 0.25s ease;
}

/* Hover */
.tabs.huisstijl .tab-header:hover,
.tabs.huisstijl .subtab-header:hover,
.tabs.huisstijl .subsubtab-header:hover {
  background: rgba(248,187,25,0.15);
}

/* =====================================================
   ACTIVE STATES (🔥 belangrijk!)
===================================================== */

.tabs.huisstijl .tab-header.active {
  box-shadow: inset 0 -4px 0 var(--huis-goud);
  font-weight: 700;
}

.tabs.huisstijl .subtab-header.active {
  box-shadow: inset 0 -3px 0 var(--huis-goud);
  font-weight: 700;
}

.tabs.huisstijl .subsubtab-header.active {
  box-shadow:
    inset 0 -2px 0 var(--huis-goud),
    0 0 6px rgba(248,187,25,0.4);
}

/* =====================================================
   TAB CONTENT BLOKKEN
===================================================== */

.tabs.huisstijl .tab-content,
.tabs.huisstijl .subtab-content,
.tabs.huisstijl .subsubtab-content {

  background: var(--huis-bg);
  color: #fff;

  border: 2px solid var(--huis-goud);
  border-radius: 10px;

  padding: 18px;
  margin-bottom: 25px;
}

/* =====================================================
   HEADER LIJN (mooie aansluiting tabs)
===================================================== */

.tabs.huisstijl .tab-headers,
.tabs.huisstijl .subtab-headers,
.tabs.huisstijl .subsubtab-headers {

  border-bottom: 2px solid var(--huis-goud);
}

/* =====================================================
   GLOW EFFECT (subtiel luxe)
===================================================== */

.tabs.huisstijl .tab-header.active,
.tabs.huisstijl .subtab-header.active {
  box-shadow:
    inset 0 -3px 0 var(--huis-goud),
    0 0 6px rgba(248,187,25,0.25);
}

/* =====================================================
   RESPONSIVE (optioneel netjes)
===================================================== */

@media (max-width: 600px) {

  .tabs.huisstijl .tab-header,
  .tabs.huisstijl .subtab-header,
  .tabs.huisstijl .subsubtab-header {
    width: 100%;
    text-align: center;
  }

}