/* tab-switching routine */
.tabs.primary {
  --color: var(--primary-color);
  --fsize: 1.4em;
  --sticky-top: 0px;
}
.tabs.secondary {
  --color: var(--secondary-color);
  --fsize: 1em;
  --sticky-top: 3.5em;
}

.tabs.final {
  --color: var(--secondary-color-dark);
  --fsize: 0.9em;
  --sticky-top: 6.7em;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  column-gap: 5px;
  font-family: var(--font-subtitle);
}

.tabs .tab-label input {
  display: none;
}
.tabs .tab-label {
  order: -1;
  padding: 0.4em 1em;
  transition: 0.2s;
  flex-grow: 1;
  cursor: pointer;
  transition: 0.2s;
  flex-grow: 1;
  background-color: #ebebeb;
  text-align: center;
  font-size: var(--fsize);
  position: sticky;
  top: var(--sticky-top);
  z-index: 50;
  border-left: 5px solid white;
  border-right: 5px solid white;
  min-width: 175px;
}

@media (max-width: 799px) {
  .tabs .tab-label {
    width: 100%;
  }
}

.tabs .tab-label:before {
  content: " ";
  display: inline-flex;
  width: 20px;
  justify-content: flex-end;
}
.tabs .tab-label:hover,
.tabs .tab-label:hover *:not(input),
.tabs .tab-label:has(input:checked),
.tabs .tab-label:has(input:checked) *:not(input) {
  color: #fff;
  background-color: var(--color);
}
.tabs .tab-label:has(input:checked) {
  z-index: 1000;

  border: none;
}

.tabs .tab-label:hover:before,
.tabs .tab-label:has(input:checked):before {
  content: "➧";
}

.tabs .tab-content {
  width: 100%;
  display: none;
  border-top: 6px solid var(--color);
  padding-top: 1em;
}
.tabs .tab-label:has(input:checked) + .tab-content {
  display: block;
}