@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,100..900;1,62..125,100..900&display=swap');

.font-archivo {
  font-family: 'Archivo', sans-serif;
}

:root {
  --base-h1: 3rem;
  /* Mobile default */
  /* Mobile default with clamp for min legibility */
  --base-p1: clamp(1rem, calc(var(--base-h1) / var(--ratio) / var(--ratio) / var(--ratio)), 1.5rem);
  --ratio: 1.618;
}

/* sm */
@media (min-width: 576px) {
  :root {
    --base-h1: 4rem;
  }
}

/* md */
@media (min-width: 768px) {
  :root {
    --base-h1: 4.3rem;
  }
}

/* lg */
@media (min-width: 992px) {
  :root {
    --base-h1: 4.6rem;
  }
}

/* xl - Original Base */
@media (min-width: 1200px) {
  :root {
    --base-h1: 4.9rem;
  }
}

/* xxl */
@media (min-width: 1400px) {
  :root {
    --base-h1: 5.2rem;
  }
}

/* Bigboy breakpoint (2700px+) */
@media (min-width: 2700px) {
  :root {
    --base-h1: 5.5rem;
    /* 5rem * 1.2 */
  }
}

/* ── Czech language headings ─────────────────────────────────────────────
   Font-SIZE stays identical to English (--base-h1 unchanged).
   Instead we use a narrower font-stretch so long Czech words like
   "SUPERSCHOPNOSTI" fit comfortably without wrapping. Archivo variable
   font supports wdth axis 62–125; we use ~80% for h1 (was 120%).
   ─────────────────────────────────────────────────────────────────────── */
body.lang-cs h1,
body.lang-cs .h1 {
  font-stretch: 80%;
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin-bottom: 0.5em !important;
}

body.lang-cs h2,
body.lang-cs .h2 {
  font-stretch: 90%;
  line-height: 1.1;
}

body.lang-cs h3,
body.lang-cs .h3 {
  font-stretch: 95%;
}

h1,
.h1 {
  font-size: var(--base-h1);
  font-weight: 900;
  font-stretch: 120%;
  margin-bottom: calc(var(--base-h1) / var(--ratio));
}

h2,
.h2 {
  font-size: calc(var(--base-h1) / var(--ratio));
  font-weight: 700;
  font-stretch: 120%;
  margin-top: calc(var(--base-p1) * 3);
  margin-bottom: calc(var(--base-p1) * 2.5);
}

h3,
.h3 {
  font-size: calc(var(--base-h1) / var(--ratio) / var(--ratio));
  font-weight: 700;
  font-stretch: 120%;
  margin-bottom: 1rem !important;
}

h4,
.h4 {
  font-size: var(--base-p1);
  font-weight: 600;
  font-stretch: 120%;
  margin-bottom: 0.875rem !important;
}

h5,
.h5 {
  font-size: 1rem;
  font-weight: 600;
  font-stretch: 120%;
  margin-bottom: 0.75rem !important;
}

h6,
.h6 {
  font-size: 0.875rem;
  font-weight: 600;
  font-stretch: 120%;
  margin-bottom: 0.625rem !important;
}

p,
li {
  font-size: var(--base-p1);
  font-weight: 400;
  font-stretch: 120%;
  overflow-wrap: break-word;
  hyphens: auto;
}

p {
  margin-bottom: calc(var(--base-p1) * 2.5) !important;
}

p.p-ash1 {
  font-size: var(--base-h1);
  font-weight: 700;
}

p.p-ash2 {
  font-size: calc(var(--base-h1) / var(--ratio));
  font-weight: 700;
  color: rgba(255, 255, 255, 0.2);
  /* Initial dimmed state for scroll reveal */
}

.p_cases {
  font-size: calc(var(--base-h1) / var(--ratio) / var(--ratio));
}

.wdth {
  font-stretch: 120%;
}

@media (max-width: 991.98px) {
  .fw-mobile-h1 {
    font-size: var(--base-h1) !important;
    font-weight: 900;
    font-stretch: 120%;
    margin-bottom: calc(var(--base-h1) / var(--ratio));
  }

  .fw-mobile-h2 {
    font-size: calc(var(--base-h1) / var(--ratio)) !important;
    font-weight: 700;
    font-stretch: 120%;
    margin-top: calc(var(--base-p1) * 3);
    margin-bottom: calc(var(--base-p1) * 2.5);
  }
}