/* =========================================================
   Typography for subpages (loaded last in head.inc.php)

   - Startseite is excluded on purpose (main.page-startseite).
   - Selectors are wrapped in :where() so they add no specificity beyond
     "main + element": components with their own classes
     (cards, accordions, veranstaltung, standorte, ...) keep their styles.
   ========================================================= */

/* ---------- Body text ---------- */
main:where(:not(.page-startseite)) {
  --ty-text: #2d333d;
  --ty-h1: #168BE5;            /* large text, 3:1 is enough */
  --ty-h2: #1272bb;
  --ty-h3: #1E5799;
  --ty-measure: 42rem;         /* ~75 characters per line */
  --ty-body: 1.125rem;         /* 18px */
  color: var(--ty-text);
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}

main:where(:not(.page-startseite)) :where(p, li, dd, blockquote) {
  font-size: var(--ty-body);
  line-height: 1.65;
  color: var(--ty-text);
  overflow-wrap: break-word;
}

/* comfortable line length for running text (not for elements with own layout classes) */
main:where(:not(.page-startseite)) :where(p, ul, ol, blockquote):not([class]) {
  max-width: var(--ty-measure);
}

main:where(:not(.page-startseite)) p {
  margin: 0 0 1em;
}
/* page styles add top margins between paragraphs – one rhythm instead */
main:where(:not(.page-startseite)) p + p {
  margin-top: 0;
}

main:where(:not(.page-startseite)) :where(ul, ol):not([class]) {
  margin: 0 0 1.25em;
  padding-left: 1.25em;
}
main:where(:not(.page-startseite)) :where(ul, ol):not([class]) > li {
  margin-bottom: .4em;
}
main:where(:not(.page-startseite)) :where(ul, ol):not([class]) > li::marker {
  color: var(--ty-h2);
}

/* ---------- Headings ---------- */
main:where(:not(.page-startseite)) :where(h1, h2, h3, h4) {
  text-wrap: balance;
  hyphens: manual;
  overflow-wrap: break-word;
  text-shadow: none;
}

main:where(:not(.page-startseite)) h1 {
  color: var(--ty-h1);
  font-size: clamp(1.9rem, 1.35rem + 1.6vw, 2.5rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin: 2.25rem 0 1.25rem;
}

main:where(:not(.page-startseite)) h2 {
  color: var(--ty-h2);
  font-size: clamp(1.35rem, 1.15rem + .6vw, 1.65rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  margin: 2.5rem 0 .65rem;
  max-width: var(--ty-measure);
}

main:where(:not(.page-startseite)) h3 {
  color: var(--ty-h3);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 1.9rem 0 .5rem;
  max-width: var(--ty-measure);
}

main:where(:not(.page-startseite)) h4 {
  color: var(--ty-h3);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 1.5rem 0 .4rem;
}

/* h2 directly under the page title reads as a subtitle */
main:where(:not(.page-startseite)) h1 + h2 {
  margin-top: -.25rem;
  color: var(--ty-text);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem);
  line-height: 1.4;
}

/* heading followed by heading: keep them together */
main:where(:not(.page-startseite)) :where(h2, h3) + :where(h2, h3) {
  margin-top: .5rem;
}

/* ---------- Spacing around separators and old <br><br> spacing ---------- */
main:where(:not(.page-startseite)) hr {
  margin: 2rem 0;
  border-color: rgba(30, 87, 153, .15);
  max-width: none;
}
main:where(:not(.page-startseite)) hr + :where(h2, h3) {
  margin-top: 0;
}

/* ---------- Emphasis ---------- */
main:where(:not(.page-startseite)) :where(strong, b) {
  font-weight: 600;
  color: inherit;
}
/* blue lead sentences used on several pages */
main:where(:not(.page-startseite)) p.sp_blau,
main:where(:not(.page-startseite)) .sp_blau {
  font-weight: 600;
}

/* ---------- Small screens ---------- */
@media (max-width: 575.98px) {
  main:where(:not(.page-startseite)) {
    --ty-body: 1.0625rem;      /* 17px */
  }
  /* narrow column: hyphenate long German words only, to avoid big gaps */
  main:where(:not(.page-startseite)) :where(p, li, dd, blockquote) {
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
  }
  /* long German words: no uppercase, slightly bolder instead */
  main:where(:not(.page-startseite)) h1 {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    font-size: 1.75rem;
    margin-top: 1.5rem;
  }
  main:where(:not(.page-startseite)) h2 {
    margin-top: 2rem;
  }
}