// ==========================================================================
// Typography - Open Sans Font Face & Base Styles
// ==========================================================================

// --------------------------------------------------------------------------
// @font-face declarations
// Best practices:
// - font-display: swap (show fallback immediately, swap when loaded)
// - local() first (use system-installed font if available)
// - WOFF2 primary (best compression), TTF fallback (broad support)
// --------------------------------------------------------------------------

// Regular (400)
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    local("Open Sans Regular"),
    local("OpenSans-Regular"),
    url("../Fonts/OpenSans-Regular.woff2") format("woff2"),
    url("../Fonts/OpenSans-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src:
    local("Open Sans Italic"),
    local("OpenSans-Italic"),
    url("../Fonts/OpenSans-Italic.woff2") format("woff2"),
    url("../Fonts/OpenSans-Italic.ttf") format("truetype");
}

// SemiBold (600)
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:
    local("Open Sans SemiBold"),
    local("OpenSans-SemiBold"),
    url("../Fonts/OpenSans-SemiBold.woff2") format("woff2"),
    url("../Fonts/OpenSans-SemiBold.ttf") format("truetype");
}

@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src:
    local("Open Sans SemiBold Italic"),
    local("OpenSans-SemiBoldItalic"),
    url("../Fonts/OpenSans-SemiBoldItalic.woff2") format("woff2"),
    url("../Fonts/OpenSans-SemiBoldItalic.ttf") format("truetype");
}

// Bold (700)
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    local("Open Sans Bold"),
    local("OpenSans-Bold"),
    url("../Fonts/OpenSans-Bold.woff2") format("woff2"),
    url("../Fonts/OpenSans-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src:
    local("Open Sans Bold Italic"),
    local("OpenSans-BoldItalic"),
    url("../Fonts/OpenSans-BoldItalic.woff2") format("woff2"),
    url("../Fonts/OpenSans-BoldItalic.ttf") format("truetype");
}

// ExtraBold (800)
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src:
    local("Open Sans ExtraBold"),
    local("OpenSans-ExtraBold"),
    url("../Fonts/OpenSans-ExtraBold.woff2") format("woff2"),
    url("../Fonts/OpenSans-ExtraBold.ttf") format("truetype");
}

@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src:
    local("Open Sans ExtraBold Italic"),
    local("OpenSans-ExtraBoldItalic"),
    url("../Fonts/OpenSans-ExtraBoldItalic.woff2") format("woff2"),
    url("../Fonts/OpenSans-ExtraBoldItalic.ttf") format("truetype");
}

// Material Symbols Outlined (variable font)
@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url("../Fonts/MaterialSymbolsOutlined.woff2") format("woff2");
}

// --------------------------------------------------------------------------
// Base Typography Styles
// --------------------------------------------------------------------------

body {
  font-family: $font-family-base;
  font-size: $font-size-base;
  font-weight: $font-weight-regular;
  line-height: $line-height-base;
  color: $body-color;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// --------------------------------------------------------------------------
// Headings
// --------------------------------------------------------------------------

h1,
.h1 {
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  line-height: $h1-line-height;
  @include media-breakpoint-up(xl) {
    font-size: $block-title-font-size-xxl;
  }
}

h2,
.h2 {
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
  font-weight: $h2-font-weight;
  line-height: $h2-line-height;
}

h3,
.h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: $h3-font-weight;
}

h4,
.h4 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-weight: $h4-font-weight;
}

h5,
.h5 {
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  font-weight: $h5-font-weight;
}
h6,
.h6 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-weight: $h6-font-weight;
}

body {
  @include media-breakpoint-up(xl) {
    font-size: 1.0625rem;
  }
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child,
.h1:first-child,
.h2:first-child,
.h3:first-child,
.h4:first-child,
.h5:first-child,
.h6:first-child {
  margin-top: 0;
}

// --------------------------------------------------------------------------
// Text Utilities (based on NRW Styleguide)
// --------------------------------------------------------------------------

// Lead text (Einleser)
.lead {
  font-size: $font-size-lead;
  font-weight: $font-weight-lead;
  line-height: 1.4;
}

// Infotext
.infotext {
  font-size: $font-size-infotext;
  font-weight: $font-weight-infotext;
  line-height: 1.4;
}

// Caption (Bildunterschrift)
.caption,
figcaption {
  font-size: $font-size-caption;
  font-weight: $font-weight-semibold;
  line-height: 1.4;
  color: #000;
}

// Overline (Obertitel)
.overline {
  font-size: $font-size-meta;
  font-weight: $font-weight-semibold;
  color: $primary;
  margin-bottom: 0.5rem;
}

// Small text
.small,
small {
  font-size: $font-size-sm;
}

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

// --------------------------------------------------------------------------
// Lists
// --------------------------------------------------------------------------

ul,
ol {
  padding-left: 1.5rem;

  li {
    margin-bottom: 0.25rem;
  }
}

// --------------------------------------------------------------------------
// Blockquote
// --------------------------------------------------------------------------

blockquote {
  font-style: italic;
  font-weight: 600;
  color: $primary;

  cite {
    display: block;
    margin-top: 0.5rem;
    font-size: $font-size-sm;
    font-style: normal;
    font-weight: $font-weight-semibold;
  }
}

ol li,
ul li {
  margin-bottom: 15px;
  line-height: 1.56;
}

a strong {
  font-weight: $font-weight-bold !important;
}