/* ==========================================================================
   Elektronické portfolio praxí — základ
   Písmo, reset, výchozí typografie, stav focus, pomocné třídy.
   Vyžaduje tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Písmo — hostované lokálně
   Záměrně ne z Google Fonts CDN: aplikace musí fungovat offline (PWA)
   a nemá odesílat IP adresy studentů a mentorů třetí straně, což by
   zbytečně komplikovalo DPIA. Variabilní řezy 400–700 v jednom souboru.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/noto-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Latin-ext nese ě š č ř ž ů ď ť ň — bez něj se čeština rozsype. */
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/noto-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "Noto Sans Display";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/noto-sans-display-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Noto Sans Display";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/noto-sans-display-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   Reset
   Selektory jsou v :where(), aby měly nulovou specificitu — tento soubor
   se nebude přetahovat se stávajícím CSS modulárního systému 2lf.cz.
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:where(
    body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol,
    fieldset, legend
  ) {
  margin: 0;
  padding: 0;
}

:where(ul, ol)[class] {
  list-style: none;
}

:where(fieldset) {
  border: 0;
  min-width: 0;
}

:where(img, svg, video, canvas) {
  display: block;
  max-width: 100%;
}

:where(img, svg) {
  height: auto;
}

:where(input, button, textarea, select) {
  font: inherit;
  color: inherit;
}

:where(textarea) {
  resize: vertical;
}

:where(table) {
  border-collapse: collapse;
  border-spacing: 0;
}

:where(th) {
  text-align: left;
  font-weight: var(--ep-weight-bold);
}

:where(button) {
  background: none;
  border: 0;
  cursor: pointer;
}

:where(summary) {
  cursor: pointer;
}

:where([hidden]) {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Dokument
   -------------------------------------------------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Plynulé posouvání jen pro ty, kdo o animace stojí. */
  scroll-behavior: smooth;
}

body {
  font-family: var(--ep-font-sans);
  font-size: var(--ep-text-base);
  line-height: var(--ep-leading-normal);
  font-weight: var(--ep-weight-normal);
  color: var(--ep-text);
  background-color: var(--ep-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Čísla v tabulkách a součtech musí být pod sebou. */
  font-variant-numeric: tabular-nums;
  /* Spolehlivý podklad i pod systémovými lištami telefonu. */
  min-height: 100%;
}

/* --------------------------------------------------------------------------
   Typografie
   Kurzivu logomanuál nedoporučuje u žádného z povolených fontů,
   proto ji tu nikde nepoužíváme.
   -------------------------------------------------------------------------- */

.ep-display,
.ep-h1,
.ep-h2 {
  font-family: var(--ep-font-display);
  letter-spacing: var(--ep-tracking-tight);
  line-height: var(--ep-leading-tight);
  font-weight: var(--ep-weight-bold);
  /* Dlouhá česká slova typu „neschopenka“ se v úzkém sloupci musí zlomit. */
  overflow-wrap: break-word;
}

.ep-display {
  font-size: var(--ep-text-6xl);
}

.ep-h1 {
  font-size: var(--ep-text-4xl);
}

.ep-h2 {
  font-size: var(--ep-text-2xl);
  letter-spacing: normal;
  line-height: var(--ep-leading-snug);
}

.ep-h3 {
  font-size: var(--ep-text-xl);
  font-weight: var(--ep-weight-bold);
  line-height: var(--ep-leading-snug);
}

.ep-h4 {
  font-size: var(--ep-text-lg);
  font-weight: var(--ep-weight-bold);
  line-height: var(--ep-leading-snug);
}

/* Nadřazený popisek sekce. Velká písmena s prostrkáním — nejmenší
   velikost, u které ještě obstojí kontrast i čitelnost. */
.ep-eyebrow {
  font-size: var(--ep-text-xs);
  font-weight: var(--ep-weight-bold);
  letter-spacing: var(--ep-tracking-wider);
  text-transform: uppercase;
  color: var(--ep-text-muted);
}

.ep-eyebrow--accent {
  color: var(--ep-action);
}

.ep-lead {
  font-size: var(--ep-text-xl);
  line-height: var(--ep-leading-snug);
  font-weight: var(--ep-weight-semibold);
}

.ep-prose {
  max-width: var(--ep-prose-max);
  line-height: var(--ep-leading-relaxed);
}

.ep-prose > * + * {
  margin-top: var(--ep-space-5);
}

.ep-text-sm {
  font-size: var(--ep-text-md);
  line-height: var(--ep-leading-normal);
}

.ep-text-xs {
  font-size: var(--ep-text-sm);
  line-height: var(--ep-leading-normal);
}

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

.ep-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

code,
kbd,
samp,
.ep-code {
  font-family: var(--ep-font-mono);
  font-size: 0.9em;
}

/* --------------------------------------------------------------------------
   Odkazy
   -------------------------------------------------------------------------- */

:where(a) {
  color: var(--ep-action);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

:where(a):hover {
  color: var(--ep-action-hover);
}

/* --------------------------------------------------------------------------
   Focus
   Vlastní prstenec v modré, ne v červené: musí být vidět i na červeném
   tlačítku. Platí pro klávesnici; myš prstenec nedostane.
   -------------------------------------------------------------------------- */

:focus {
  outline: none;
}

:focus-visible {
  outline: var(--ep-focus-width) solid var(--ep-focus);
  outline-offset: var(--ep-focus-offset);
  border-radius: var(--ep-radius-xs);
}

/* Na tmavě červené výplni by modrá splývala — tam bílý prstenec. */
.ep-btn--primary:focus-visible,
.ep-chip--alert:focus-visible {
  outline-color: var(--ep-surface);
  box-shadow: 0 0 0 calc(var(--ep-focus-width) + var(--ep-focus-offset) + 1px)
    var(--ep-focus);
}

/* --------------------------------------------------------------------------
   Přístupnost
   -------------------------------------------------------------------------- */

/* Jen pro tisk. Odkryje je print.css uvnitř @media print.

   Pravidlo musí být tady, ne v print.css: ten se připojuje s media="print",
   takže na obrazovce se neuplatní vůbec — a tiskové hlavičky by zůstaly
   viset uprostřed stránky. */
.ep-print-only {
  display: none;
}

/* Jen pro čtečky obrazovky. */
.ep-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skok na obsah — první prvek na stránce, vidět až při tabování. */
.ep-skip {
  position: absolute;
  left: var(--ep-space-3);
  top: var(--ep-space-3);
  z-index: var(--ep-z-toast);
  transform: translateY(-200%);
  background: var(--ep-surface);
  color: var(--ep-action);
  font-weight: var(--ep-weight-bold);
  padding: var(--ep-space-4) var(--ep-space-6);
  border-radius: var(--ep-radius-md);
  box-shadow: var(--ep-shadow-overlay);
  text-decoration: none;
}

.ep-skip:focus-visible {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Režim vynucených barev (Windows High Contrast). Systém přebarví vše sám;
   naším úkolem je jen nenechat zmizet obrysy, které kreslíme pozadím. */
@media (forced-colors: active) {
  .ep-btn,
  .ep-chip,
  .ep-card,
  .ep-note,
  .ep-stat,
  .ep-field__input {
    border: 1px solid currentColor;
  }

  .ep-meter__fill,
  .ep-cell {
    forced-color-adjust: none;
  }
}

/* --------------------------------------------------------------------------
   Pomocné rozvržení
   -------------------------------------------------------------------------- */

.ep-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ep-space-5);
}

.ep-stack--tight {
  gap: var(--ep-space-3);
}

.ep-stack--loose {
  gap: var(--ep-space-8);
}

.ep-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ep-space-5);
}

.ep-row--between {
  justify-content: space-between;
}

.ep-grow {
  flex: 1 1 auto;
  min-width: 0;
}

.ep-fixed {
  flex: none;
}

/* Vodorovné posouvání pro široké tabulky. Má tabindex, aby se dalo
   posouvat i klávesnicí. */
.ep-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ep-divider {
  height: 1px;
  background: var(--ep-border);
  border: 0;
  margin: 0;
}