Typografie

/* Google Fonts */
@import url("https://fonts.googleapis.com/
  css2?family=Inter:wght@400;500;700");
body { font-family: 'Inter', sans-serif; }

/* Systémový font stack (doporučeno) */
body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
}

/* Monospace stack pro kód */
code, pre {
  font-family:
    'JetBrains Mono',
    'Fira Code',
    Consolas,
    'Courier New',
    monospace;
}

/* Variable font — jeden soubor */
@font-face {
  font-family: 'Inter';
  src: url('Inter.woff2') format('woff2');
  font-weight: 100 900; /* rozsah vah */
  font-style: normal;
  font-display: swap; /* zabrání FOIT */
}

/* Víc fontů na jedné stránce */
h1, h2, h3 {
  font-family: 'Playfair Display', serif;
}
body {
  font-family: 'Source Sans Pro', sans-serif;
}

/* REM — doporučeno */
body  { font-size: 1rem; }     /* 16px */
h1    { font-size: 2.5rem; }   /* 40px */
h2    { font-size: 1.875rem; } /* 30px */
small { font-size: 0.875rem; } /* 14px */

/* Fluid typography s clamp */
h1 {
  font-size: clamp(1.75rem, 5vw, 3.5rem);
  /* min: 28px, preferred: 5vw, max: 56px */
}

p {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  /* Jemně roste s viewportem */
}

/* EM pro komponenty (škáluje s rodiče) */
.btn {
  font-size: 1rem;
  padding: 0.75em 1.5em; /* roste s btn font-size */
}
.btn-large { font-size: 1.25rem; }
/* padding se automaticky přizpůsobí! */

/* Typografická škála s CSS proměnnými */
:root {
  --text-xs: clamp(0.75rem, 1vw, 0.875rem);
  --text-sm: clamp(0.875rem, 1.2vw, 1rem);
  --text-base: clamp(1rem, 1.5vw, 1.125rem);
  --text-lg: clamp(1.125rem, 2vw, 1.25rem);
  --text-xl: clamp(1.25rem, 2.5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 4vw, 2rem);
  --text-3xl: clamp(1.875rem, 5vw, 3rem);
}

/* Google Fonts — specifikovat váhy */
@import url(".../css2?family=Inter:wght@300;400;500;600;700");

body    { font-weight: 400; }
.label  { font-weight: 500; }
.btn    { font-weight: 600; }
h1, h2  { font-weight: 700; }
.display { font-weight: 800; }

/* Variable font — animovatelné */
@font-face {
  font-family: 'Inter';
  src: url('Inter-Variable.woff2')
    format('woff2');
  font-weight: 100 900;
}

/* Hover efekt na font-weight */
.nav-link {
  font-weight: 400;
  transition: font-weight 0.15s;
}
.nav-link:hover { font-weight: 600; }
/* Pozor: může způsobit layout shift! */
/* Řešení: font-variation-settings nebo */
/* -webkit-text-stroke místo weight */

/* Globální nastavení */
body { line-height: 1.6; }

/* Nadpisy — těsnější */
h1, h2, h3 { line-height: 1.2; }
h4, h5, h6 { line-height: 1.3; }

/* Tlačítka */
.btn { line-height: 1; }

/* Článkový text */
.article-body { line-height: 1.75; }

/* WCAG minimum */
.accessible-text { line-height: 1.5; }

/* ❌ Fixní px — neškáluje */
p { line-height: 24px; }

/* ✅ Bezjednotkové — škáluje */
p { line-height: 1.6; }

/* Uppercase label — klasický UI */
.label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Tight heading — moderní */
.hero-title {
  font-size: clamp(2rem, 8vw, 6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* Display — velký text */
.display-text {
  font-size: 4rem;
  letter-spacing: -0.05em;
}

/* Monospace kód */
code {
  font-family: monospace;
  letter-spacing: 0.02em; /* trochu více prostoru */
}

/* word-spacing */
.spaced-words {
  word-spacing: 0.3em;
}

/* Uppercase badges a labely */
.badge, .tag {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  font-weight: 700;
}

/* Navigace */
.nav a {
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

/* Nadpisy jako uppercase */
h6 {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #888;
}

/* Dynamická data zachovají case v DOM */
/* Screen reader: "Jana Nováková"      */
/* Vizuálně:     "JANA NOVÁKOVÁ"       */
.username {
  text-transform: uppercase;
}

/* Čistý odkaz */
a {
  text-decoration: none;
  color: #2563EB;
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Vlastní stylované podtržení */
.fancy-link {
  text-decoration: underline;
  text-decoration-color: #F59E0B;
  text-decoration-style: wavy;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Shorthand */
.link {
  text-decoration: underline dotted #888;
}

/* Přeškrtnutá cena */
.old-price {
  text-decoration: line-through;
  color: #999;
}

/* Zkratka s dotted */
abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

/* Přepsat barvu dekorace */
.highlight {
  color: #333;
  text-decoration-color: #F59E0B;
  text-decoration-line: underline;
}

/* Text zarovnání */
.left    { text-align: left; }
.center  { text-align: center; }
.right   { text-align: right; }
.justify { text-align: justify; }

/* RTL-friendly (moderní) */
.content { text-align: start; }

/* Ellipsis — zkrácení textu */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* Víceřádkový ellipsis */
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Zachovat formátování (komentáře, kód) */
.user-content {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Nepřerušit text (tagline, nadpis) */
.no-break { white-space: nowrap; }

/* word-break pro dlouhá slova / URL */
.url-display {
  word-break: break-all;
  overflow-wrap: anywhere;
}