// =============================================================================
//  Typografie und Ueberschriften-System
// -----------------------------------------------------------------------------
//  Das Herzstueck des Manuals:
//    Highlight-Zeile orange in Versalien
//    darunter ein orangener Trenner
//    darunter die Hauptueberschrift
//
//  Umgesetzt ueber die vorhandenen Felder von bootstrap_package:
//    subheader + subheader_class = highlight        -> Highlight-Zeile
//    frame_options switch-headline                  -> Highlight nach oben
//    frame_options border-headline                  -> orangener Trenner
//
//  Diese Kombination existierte im Altbestand bereits, nur unter anderem
//  Namen. Sie wird uebernommen statt neu erfunden.
// =============================================================================

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: $headings-font-family;
  font-weight: $headings-font-weight;
  line-height: $headings-line-height;
  color: $headings-color;
  text-wrap: balance;
}

// -----------------------------------------------------------------------------
//  Highlight-Zeile
// -----------------------------------------------------------------------------

.element-subheader {
  &.highlight {
    @include nees-highlight;
    display: block;
    margin-bottom: .35rem;
  }
}

// -----------------------------------------------------------------------------
//  Reihenfolge tauschen - Highlight ueber die Hauptueberschrift
// -----------------------------------------------------------------------------

.frame-option-switch-headline {
  .frame-header {
    display: flex;
    flex-direction: column;
  }

  .element-subheader {
    order: -1;
  }
}

// -----------------------------------------------------------------------------
//  Orangener Trenner
//  Sitzt unter der Highlight-Zeile, wenn getauscht wurde - sonst unter
//  der Hauptueberschrift.
// -----------------------------------------------------------------------------

.frame-option-border-headline {
  .element-subheader::after {
    @include nees-divider;
  }

  &:not(.frame-option-switch-headline) .element-header::after {
    @include nees-divider;
  }
}

// -----------------------------------------------------------------------------
//  Ueberschrift auf dunklem Grund
// -----------------------------------------------------------------------------

.element-header.inverted {
  color: $nees-white;
}

.element-header.centered,
.element-subheader.centered {
  text-align: center;

  &::after {
    margin-inline: auto;
  }
}

// -----------------------------------------------------------------------------
//  Fliesstext
//  BELEGT: Blocksatz. Silbentrennung ist zwingend dazu, sonst reisst der
//  Browser grosse Wortluecken - besonders in schmalen Spalten.
// -----------------------------------------------------------------------------

.frame-type-text,
.frame-type-textmedia,
.frame-type-textpic {
  p,
  li {
    @include nees-bodytext;
  }
}

// Auf schmalen Viewports wird Blocksatz unleserlich, weil zu wenige
// Woerter je Zeile stehen. Dort linksbuendig.
@include media-breakpoint-down(md) {
  .frame-type-text,
  .frame-type-textmedia,
  .frame-type-textpic {
    p,
    li {
      text-align: left;
    }
  }
}

// -----------------------------------------------------------------------------
//  Aufzaehlung
//  BELEGT: quadratisches Zeichen in Orange, kleiner als die Schrift.
// -----------------------------------------------------------------------------

.frame ul:not(.list-unstyled):not(.nav) {
  list-style: none;
  padding-left: 1.4em;

  > li {
    position: relative;

    &::before {
      content: "";
      position: absolute;
      left: -1.4em;
      top: .62em;
      width: $bullet-size;
      height: $bullet-size;
      background-color: $bullet-color;
    }
  }
}

// -----------------------------------------------------------------------------
//  Links
// -----------------------------------------------------------------------------

a {
  transition: color .15s ease;
}

.frame-background-dark a:not(.btn) {
  color: $nees-white;
  text-decoration-color: $nees-orange;

  &:hover {
    color: $nees-orange;
  }
}