/* Fonty se načtou z Google Fonts. @import musí být před ostatními pravidly. */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@500;600;700&display=swap");

/* Proměnné: var() níže použije hodnotu uloženou zde. */
:root {
  --dark: #152c3b;
  --light: #fffdf9;
  --surface: #edf2f0;
  --text: #1d2733;
  --muted-text: #66727a;
  --light-text: #c5d1d4;
  --yellow: #f4b544;
  --orange: #b96b20;
  --python: #3776ab;
  /* Barvy různých částí kódu na tmavém pozadí. */
  --code-keyword: #c5a5ff;
  --code-string: #a8dfaa;
  --code-number: #ffd180;
  --code-function: #82d5ee;
  --code-comment: #a7b9c3;
  --body-font: "DM Sans", sans-serif;
  --title-font: "Space Grotesk", sans-serif;
}

/* Základ stránky */
* {
  /* Padding a okraj se započítají do nastavené šířky prvku. */
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--text);
  background: var(--light);
  font-family: var(--body-font);
  line-height: 1.6;
}

h1, h2, h3, p {
  margin-top: 0;
}

h1, h2, h3 {
  font-family: var(--title-font);
  line-height: 1.1;
}

h1 {
  margin-bottom: 25px;
  font-size: 5rem;
  letter-spacing: -2px;
}

h2 {
  margin-bottom: 20px;
  font-size: 3rem;
  letter-spacing: -1px;
}

/* Obsah je vycentrovaný; na široké obrazovce nepřesáhne 1120 px. */
.container {
  width: 90%;
  max-width: 1120px;
  margin: 0 auto;
}

/* Klávesnice: viditelné označení právě vybraného odkazu. */
a:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 4px;
}

/* Navigace a úvod */
.hero {
  padding-bottom: 60px;
  color: var(--light);
  background: var(--dark);
}

.navbar {
  /* Flexbox umístí logo a menu vedle sebe na opačné konce řádku. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 78px;
  border-bottom: 1px solid #294554;
}

.logo {
  color: var(--light);
  font-family: var(--title-font);
  font-size: 2rem;
  font-weight: bold;
  text-decoration: none;
}

.logo span, h1 span {
  color: var(--yellow);
}

.nav-links {
  display: flex;
  gap: 25px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  color: var(--light);
  text-decoration: none;
}

.nav-links a:hover {
  color: var(--yellow);
}

.hero-content {
  padding-top: 55px;
}

.hero-text {
  max-width: 650px;
}

.school-notice {
  margin-bottom: 30px;
  color: var(--light-text);
  font-size: 1rem;
}

.eyebrow {
  margin-bottom: 15px;
  color: var(--orange);
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 2px;
}

.hero .eyebrow {
  color: var(--yellow);
}

.intro {
  max-width: 580px;
  margin-bottom: 30px;
  color: var(--light-text);
}

.button {
  display: inline-block;
  padding: 13px 22px;
  color: var(--dark);
  background: var(--yellow);
  border-radius: 3px;
  font-weight: bold;
  text-decoration: none;
}

/* Vysvětlení tématu */
.about {
  padding: 75px 0;
}

.section-heading, .section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.section-heading p, .small-text {
  max-width: 410px;
  margin-bottom: 0;
  color: var(--muted-text);
}

/* Přehled oborů programování */
.languages {
  padding: 65px 0;
  background: var(--surface);
}

.section-title-row {
  margin-bottom: 35px;
}

/* Rozbalovací témata jsou pod sebou, aby byl otevřený obsah přehledný. */
.topic-list {
  display: grid;
  /* Nulová minimální šířka zabrání tomu, aby dlouhý kód
     roztáhl celý sloupec za okraj mobilní obrazovky. */
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.topic {
  /* Grid položka se smí zmenšit pod přirozenou šířku svého obsahu. */
  min-width: 0;
  background: var(--light);
  border: 1px solid #cbd7d2;
  border-left: 4px solid var(--yellow);
}

/* summary je klikací nadpis prvku details.
   Prohlížeč sám zajistí kliknutí, klávesnici a informaci o otevření. */
.topic summary {
  padding: 20px;
  cursor: pointer;
  color: var(--dark);
  font-family: var(--title-font);
  font-size: 1rem;
  font-weight: bold;
  overflow-wrap: anywhere;
}

/* Ponecháváme nativní trojúhelník ukazující stav rozbalení. */
.topic summary::marker {
  color: var(--orange);
}

.topic summary i {
  margin: 0 10px;
  color: var(--orange);
}

.topic summary:hover {
  background: var(--surface);
}

.topic summary:focus-visible {
  outline: 3px solid var(--python);
  outline-offset: 2px;
}

/* Atribut open přidává prohlížeč, když uživatel téma rozbalí. */
.topic[open] summary {
  border-bottom: 1px solid #cbd7d2;
}

.topic-content {
  padding: 25px;
  /* Dlouhá slova se mohou zalomit, aby nepřetékala na mobilu. */
  overflow-wrap: anywhere;
}

.topic-content p {
  max-width: 850px;
  color: var(--muted-text);
}

/* Loga a názvy zůstávají vedle sebe; flex-wrap zalomí celý štítek. */
.language-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 25px;
  padding: 0;
  list-style: none;
}

.language-logos li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--dark);
  background: var(--surface);
  border-radius: 4px;
  font-weight: bold;
  max-width: 100%;
  min-width: 0;
}

.language-logos img {
  /* SVG se vejde do stejného prostoru bez změny poměru stran. */
  object-fit: contain;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

/* Dva stejné sloupce pro použití oboru a doporučený začátek.
   minmax(0, 1fr) zabrání roztahování sloupce dlouhým obsahem. */
.topic-guide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 25px;
  margin: 25px 0;
  padding: 20px;
  background: var(--surface);
  border-left: 3px solid var(--python);
}

.topic-guide h3 {
  margin-top: 0;
}

.topic-guide p, .topic-guide ul {
  margin-bottom: 0;
}

.topic-guide ul {
  padding-left: 20px;
  color: var(--muted-text);
}

.topic-guide li + li {
  /* + vybírá položku, které bezprostředně předchází jiná položka. */
  margin-top: 8px;
}

.topic-content h3 {
  margin: 25px 0 10px;
  font-size: 1rem;
}

.code-note {
  margin-bottom: 15px;
}

pre {
  max-width: 100%;
  margin: 0;
  padding: 20px;
  color: var(--light);
  background: var(--dark);
  border-radius: 3px;
  /* Dlouhý kód se posouvá uvnitř bloku, neroztáhne celou stránku. */
  overflow-x: auto;
}

code {
  font-family: Consolas, monospace;
  font-size: 1rem;
}

/* pre zachová řádky a odsazení příkladu kódu. */
pre code {
  white-space: pre;
}

/* Span obaluje část ukázky a CSS jí pouze přidá barvu.
   Zvýraznění je ručně uložené v HTML, nepotřebuje JavaScript. */
.token-keyword { color: var(--code-keyword); }
.token-string { color: var(--code-string); }
.token-number { color: var(--code-number); }
.token-function { color: var(--code-function); }
.token-comment { color: var(--code-comment); font-style: italic; }

pre:focus-visible {
  /* Focus zvýrazní blok, aby ho šlo posouvat také klávesnicí. */
  outline: 3px solid var(--python);
  outline-offset: 3px;
}

.code-explanation {
  margin: 18px 0 0;
}

/* Zápatí a odkazy na validátory */
footer {
  color: var(--light-text);
  background: var(--dark);
}

.footer-content {
  display: flex;
  /* Když se obsah nevejde, přesune se na další řádek. */
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 25px 0;
}

.footer-content p {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

footer a {
  color: var(--light-text);
  text-decoration: none;
}

footer a:hover {
  color: var(--yellow);
}

#ai, #author {
  font-weight: bold;
}

.validation-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.validation-links a {
  display: flex;
  align-items: center;
  gap: 8px;
}

.validation-links i {
  color: var(--yellow);
  font-size: 2rem;
}

/* @media použije tato pravidla pouze při šířce okna do 850 px. */
@media (max-width: 850px) {
  h1 { font-size: 3rem; }
  h2 { font-size: 2rem; }

  .nav-links span {
    display: none;
  }

  .nav-links i {
    font-size: 2rem;
  }

  .section-heading, .section-title-row {
    display: block;
  }

  .topic-guide {
    grid-template-columns: 1fr;
  }

}

/* Na telefonu zmenšíme vnitřní mezery a seskládáme zápatí. */
@media (max-width: 500px) {
  .navbar {
    min-height: 65px;
  }

  .logo { font-size: 1rem; }
  .nav-links { gap: 8px; }
  .nav-links i { font-size: 1rem; }
  h1 { font-size: 2rem; letter-spacing: 0; }

  .hero-content { padding-top: 35px; }
  .about { padding: 45px 0; }
  .languages { padding: 45px 0; }

  .topic-content {
    padding: 16px;
  }

  .topic-guide {
    padding: 16px;
    gap: 16px;
  }

  .topic summary {
    padding: 16px;
  }

  pre {
    padding: 16px;
  }

  .footer-content {
    flex-direction: column;
    align-items: flex-start;
  }
}