/* ==========================================================================
   Typography — Lora for headings, Manrope for body/UI.
   Font files are self-hosted; see assets/fonts/README.txt.
   ========================================================================== */

/* --- Lora ---------------------------------------------------------------- */
@font-face {
  font-family: "Lora";
  src: url("../../fonts/lora-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lora";
  src: url("../../fonts/lora-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --- Manrope ------------------------------------------------------------- */
@font-face {
  font-family: "Manrope";
  src: url("../../fonts/manrope-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../../fonts/manrope-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../../fonts/manrope-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --- Base ---------------------------------------------------------------- */
body {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-text);
  background-color: var(--c-bg);
}

/* --- Headings ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ff-heading);
  font-weight: var(--fw-regular);
  color: var(--c-primary);
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* German compounds ("Espagnolettverschlüsse") are wider than a 360px phone
   at heading size; hyphenate rather than push the page sideways.
   German only — Czech and English headings fit and read worse hyphenated. */
@media (max-width: 640px) {
  :lang(de) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    hyphens: auto;
  }
}

h1, .h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

h2, .h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

h3, .h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

h4, .h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

h5, .h5 {
  font-size: var(--fs-h5);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

h6, .h6 {
  font-size: var(--fs-h6);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h6);
}

/* --- Body text ----------------------------------------------------------- */
p {
  text-wrap: pretty;
}

.text-secondary {
  font-size: var(--fs-body-sm);
}

.text-small {
  font-size: var(--fs-small);
}

.text-muted {
  color: var(--c-text-muted);
}

/* Eyebrow — the small uppercase label above most section headings. */
.trustav-eyebrow {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  color: var(--c-secondary);
}

/* Section eyebrows are widely letter-spaced; on a phone they wrap and leave
   an orphan like "· ČR" on its own line. */
.trustav-eyebrow,
[class*="__eyebrow"] {
  text-wrap: balance;
}

/* --- Links --------------------------------------------------------------- */
a {
  color: var(--c-link);
  transition: color var(--dur) var(--ease);
}

a:hover,
a:focus-visible {
  color: var(--c-link-hover);
}

/* --- Rich text (WYSIWYG output) ------------------------------------------ */
.trustav-rte > * + * {
  margin-top: var(--space-md);
}

.trustav-rte h2,
.trustav-rte h3,
.trustav-rte h4 {
  margin-top: var(--space-xl);
}

.trustav-rte ul,
.trustav-rte ol {
  padding-left: var(--space-lg);
}

.trustav-rte li + li {
  margin-top: var(--space-xs);
}

.trustav-rte a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.trustav-rte strong {
  font-weight: var(--fw-semibold);
}

/* --- Selection ----------------------------------------------------------- */
::selection {
  background: var(--c-accent);
  color: var(--c-neutral-5);
}