/* =======================================================
   🚆 TABS – BASIS
   Versie: 2.0
   Datum: februari 2026

   ✔ Scoped naar frontend (body.site)
   ✔ Geen invloed op JCE editor
   ✔ Neutrale donkere stijl
   ✔ Geschikt voor alle varianten

   Bevat:
   - tabs
   - subtabs
   - sub-subtabs
   ======================================================= */


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

body.site .tabs {
  margin: 20px 0;
  font-family: Arial, sans-serif;
}

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

body.site .tab-headers,
body.site .subtab-headers,
body.site .subsubtab-headers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px 0;
  padding: 0;
  list-style: none;

  border-bottom: 2px solid #333;
  background: linear-gradient(180deg, #111 0%, #000 100%);

  justify-content: flex-start; /* 🔥 links uitlijnen */
}

/* =======================================================
   TAB BUTTONS
======================================================= */

body.site .tab-header,
body.site .subtab-header,
body.site .subsubtab-header {
  padding: 10px 18px;
  cursor: pointer;

  border: 1px solid #333;
  border-bottom: none;

  background: linear-gradient(180deg, #1a1a1a 0%, #000 100%);
  color: #ffffff;

  font-weight: 600;
  text-align: center;
  white-space: nowrap;

  border-top-left-radius: 6px;
  border-top-right-radius: 6px;

  transition:
    background 0.25s ease,
    border 0.25s ease,
    transform 0.15s ease;
}


/* Hover */
body.site .tab-header:hover,
body.site .subtab-header:hover,
body.site .subsubtab-header:hover {
  background: linear-gradient(180deg, #222 0%, #111 100%);
}


/* Actief */
body.site .tab-header.active,
body.site .subtab-header.active,
body.site .subsubtab-header.active {
  background: linear-gradient(180deg, #2a2a2a 0%, #111 100%);
  border-color: #666;
}


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

body.site .tab-content,
body.site .subtab-content,
body.site .subsubtab-content {
  display: none;

  padding: 16px;

  border: 1px solid #333;
  margin-top: -1px;

  background: #111;
  color: #ffffff;
}


/* Actief zichtbaar */
body.site .tab-content.active,
body.site .subtab-content.active,
body.site .subsubtab-content.active {
  display: block;
}


/* =======================================================
   AFBEELDINGEN FIX
======================================================= */

body.site .tab-content img,
body.site .subtab-content img,
body.site .subsubtab-content img {
  display: block;
  max-width: 100%;
  height: auto;
}


/* =======================================================
   BREEDTE & UITLIJNING
======================================================= */

body.site .tabs .tab-header {
  flex: 0 0 auto;
  min-width: 120px;
}


/* =======================================================
   SUBTAB VERFIJNING (iets compacter)
======================================================= */

body.site .subtab-header {
  padding: 8px 14px;
  font-size: 0.9rem;
}

body.site .subsubtab-header {
  padding: 6px 12px;
  font-size: 0.85rem;
}


/* =======================================================
   EINDE – Tabs basis v2.0
======================================================= */