/* Téma SMT — SMART technológie
 *
 * Jednoduchý, prehľadný vzhľad s navigáciou v hornom paneli.
 * Farby sú vedené ako tokeny v :root, takže sa dajú meniť na jednom mieste.
 */

:root {
  /* Plochy */
  --plocha:          #ffffff;
  --plocha-tlmena:   #f6f7f9;
  --plocha-vyrazna:  #eef0f4;

  /* Text */
  --text:            #16191f;
  --text-tlmeny:     #5a6472;
  --text-slaby:      #8b94a3;

  /* Akcent */
  --akcent:          #1f5fd0;
  --akcent-tmavy:    #17469b;
  --akcent-svetly:   #e8f0fd;

  /* Významové farby blokov */
  --uloha:           #1f5fd0;
  --uloha-plocha:    #eef4fe;
  --upozornenie:     #b4541a;
  --upozornenie-plocha: #fdf2e9;
  --poznamka:        #4a5568;
  --poznamka-plocha: #f3f4f6;
  --riesenie:        #1c7a4f;
  --riesenie-plocha: #ecf7f1;
  --vyucujuci:       #7a3bb5;
  --vyucujuci-plocha:#f4eefb;

  /* Čiary */
  --ciara:           #e2e5ea;
  --ciara-vyrazna:   #cbd1da;

  /* Rozmery.
     Telo stránky má rovnakú šírku ako hlavička a pätička, aby lícovalo
     s navigáciou. Bežný text sa v ňom obmedzuje na --sirka-textu, inak by
     boli riadky na širokom monitore neúmerne dlhé. */
  --sirka-obsahu:    76rem;
  --sirka-panela:    76rem;
  --sirka-textu:     52rem;
  --radius:          8px;
  --radius-maly:     5px;

  --pismo: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pismo-kod: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --tien-panel: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --tien-menu:  0 8px 24px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .08);

  /* Zvýrazňovanie kódu */
  --kod-komentar:  #6a737d;
  --kod-kluc:      #d73a49;
  --kod-retazec:   #22863a;
  --kod-cislo:     #6f42c1;
  --kod-nazov:     #6f42c1;
  --kod-premenna:  #005cc5;
  --kod-vstavane:  #e36209;
}

/* Tmavý režim.
 * Platí v dvoch prípadoch:
 *   1. používateľ si v hlavičke zvolil tmavú tému (data-theme="dark"),
 *   2. nemá zvolené nič a jeho systém je nastavený na tmavý režim.
 * Voľba v hlavičke má vždy prednosť pred systémom. */

:root[data-theme="dark"] {
    --plocha:          #14171c;
    --plocha-tlmena:   #1b1f26;
    --plocha-vyrazna:  #242932;

    --text:            #e8eaee;
    --text-tlmeny:     #a3abb8;
    --text-slaby:      #78808d;

    --akcent:          #6fa3f5;
    --akcent-tmavy:    #9ec1f9;
    --akcent-svetly:   #1d2a40;

    --uloha:           #6fa3f5;
    --uloha-plocha:    #1a2436;
    --upozornenie:     #e0955a;
    --upozornenie-plocha: #2d2218;
    --poznamka:        #aab2bf;
    --poznamka-plocha: #1f232b;
    --riesenie:        #5fc394;
    --riesenie-plocha: #16271f;
    --vyucujuci:       #c093e8;
    --vyucujuci-plocha:#241c33;

    --ciara:           #2a2f38;
    --ciara-vyrazna:   #3a414d;

    --tien-panel: 0 1px 2px rgba(0, 0, 0, .4);
    --tien-menu:  0 8px 24px rgba(0, 0, 0, .5);

    /* Zvýrazňovanie kódu */
    --kod-komentar:  #7d8590;
    --kod-kluc:      #ff7b72;
    --kod-retazec:   #7ee787;
    --kod-cislo:     #d2a8ff;
    --kod-nazov:     #d2a8ff;
    --kod-premenna:  #79c0ff;
    --kod-vstavane:  #ffa657;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --plocha:          #14171c;
    --plocha-tlmena:   #1b1f26;
    --plocha-vyrazna:  #242932;

    --text:            #e8eaee;
    --text-tlmeny:     #a3abb8;
    --text-slaby:      #78808d;

    --akcent:          #6fa3f5;
    --akcent-tmavy:    #9ec1f9;
    --akcent-svetly:   #1d2a40;

    --uloha:           #6fa3f5;
    --uloha-plocha:    #1a2436;
    --upozornenie:     #e0955a;
    --upozornenie-plocha: #2d2218;
    --poznamka:        #aab2bf;
    --poznamka-plocha: #1f232b;
    --riesenie:        #5fc394;
    --riesenie-plocha: #16271f;
    --vyucujuci:       #c093e8;
    --vyucujuci-plocha:#241c33;

    --ciara:           #2a2f38;
    --ciara-vyrazna:   #3a414d;

    --tien-panel: 0 1px 2px rgba(0, 0, 0, .4);
    --tien-menu:  0 8px 24px rgba(0, 0, 0, .5);

    /* Zvýrazňovanie kódu */
    --kod-komentar:  #7d8590;
    --kod-kluc:      #ff7b72;
    --kod-retazec:   #7ee787;
    --kod-cislo:     #d2a8ff;
    --kod-nazov:     #d2a8ff;
    --kod-premenna:  #79c0ff;
    --kod-vstavane:  #ffa657;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--plocha);
  color: var(--text);
  font-family: var(--pismo);
  font-size: 17.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------------------------------------------------------------- Hlavička */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--plocha);
  border-bottom: 1px solid var(--ciara);
  box-shadow: var(--tien-panel);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: var(--sirka-panela);
  margin: 0 auto;
  padding: 0 1.5rem;
  min-height: 56px;
}

.course-title__link {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}

.course-title__acronym {
  font-size: 1rem;
  letter-spacing: .04em;
  padding: .15rem .45rem;
  border-radius: var(--radius-maly);
  background: var(--akcent);
  color: #fff;
}

.course-title__full {
  font-size: .95rem;
  color: var(--text-tlmeny);
  font-weight: 500;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-left: auto;
}

.actions__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-maly);
  color: var(--text-tlmeny);
  text-decoration: none;
  transition: background .15s, color .15s;
}

.actions__link:hover { background: var(--plocha-vyrazna); color: var(--text); }
.actions__link.is-active { background: var(--akcent-svetly); color: var(--akcent); }

/* Prepínač témy. V svetlom režime ponúka mesiac (prepni na tmavú),
   v tmavom slnko (prepni na svetlú). */
.theme-toggle { position: relative; border: 0; background: none; cursor: pointer; padding: 0; }

.theme-toggle__sun { display: none; }
.theme-toggle__moon { display: block; }

:root[data-theme="dark"] .theme-toggle__sun { display: block; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle__moon { display: none; }
}

.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2;
        stroke-linecap: round; stroke-linejoin: round; }
.icon--large { width: 22px; height: 22px; }
.icon--inline { width: 14px; height: 14px; vertical-align: -2px; }

/* --------------------------------------------------------- Horná navigácia */

.topnav { margin-right: auto; }

.menu {
  display: flex;
  align-items: center;
  gap: .15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu__top { position: relative; }

/* Položka prvej úrovne: priamy odkaz alebo tlačidlo sekcie */
.menu__top > .menu__item,
.menu__subtitle {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .45rem .7rem;
  border: 0;
  border-radius: var(--radius-maly);
  background: none;
  color: var(--text-tlmeny);
  font: inherit;
  font-size: .93rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}

.menu__top > .menu__item:hover,
.menu__subtitle:hover { background: var(--plocha-vyrazna); color: var(--text); }

.menu__top > .menu__link.is-active,
.menu__top--folder.is-active > .menu__subtitle {
  color: var(--akcent);
  background: var(--akcent-svetly);
}

.menu__chevron { transition: transform .18s; opacity: .6; }
.menu__top--folder.is-open .menu__chevron { transform: rotate(180deg); }

/* Rozbaľovacia ponuka sekcie */
.menu__submenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 200;
  display: none;
  min-width: 22rem;
  max-width: min(30rem, calc(100vw - 2rem));
  max-height: min(70vh, 34rem);
  overflow-y: auto;
  margin: 0;
  padding: .35rem;
  list-style: none;
  background: var(--plocha);
  border: 1px solid var(--ciara);
  border-radius: var(--radius);
  box-shadow: var(--tien-menu);
}

.menu__top--folder.is-open .menu__submenu { display: block; }

.menu__submenu .menu__item {
  display: block;
  padding: .45rem .6rem;
  border-radius: var(--radius-maly);
  color: var(--text-tlmeny);
  font-size: .9rem;
  line-height: 1.45;
  text-decoration: none;
  transition: background .12s, color .12s;
}

/* Hlavička tematického celku v rozbaľovacom menu */
.menu__group {
  padding: .7rem .6rem .3rem;
  color: var(--text-slaby);
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.4;
}

.menu__group:not(:first-child) {
  margin-top: .3rem;
  border-top: 1px solid var(--ciara);
}

.menu__submenu .menu__link:hover { background: var(--plocha-vyrazna); color: var(--text); }
.menu__submenu .menu__link.is-active { background: var(--akcent-svetly); color: var(--akcent); font-weight: 500; }

/* Skrytá stránka — viditeľná, ale neklikateľná */
.menu__item--disabled {
  color: var(--text-slaby);
  cursor: not-allowed;
}

.menu__item--disabled .menu__label::after {
  content: "skryté";
  margin-left: .5rem;
  padding: .05rem .35rem;
  border: 1px solid var(--ciara-vyrazna);
  border-radius: 3px;
  font-size: .68rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  vertical-align: 1px;
}

.menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-maly);
  background: none;
  color: var(--text);
  cursor: pointer;
}

/* ------------------------------------------------------------------ Obsah */

.content {
  flex: 1;
  width: 100%;
  max-width: var(--sirka-obsahu);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.scenario-title {
  overflow-wrap: break-word;
  margin: 0 0 2.25rem;
  padding-bottom: 1.1rem;
  border-bottom: 2px solid var(--ciara);
  font-size: 2.9rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.03em;
}

.content h2, .section__header {
  overflow-wrap: break-word;
  margin: 3rem 0 1.1rem;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.content h3 {
  margin: 2.25rem 0 .8rem;
  font-size: 1.3rem;
  font-weight: 600;
}

.content h4 { margin: 1.6rem 0 .5rem; font-size: 1.1rem; font-weight: 600; }

/* Plynulý text držíme v čitateľnej šírke. Tabuľky, kód, obrázky a bloky
   úloh túto hranicu zámerne prekračujú a idú cez celú šírku obsahu. */
.content p,
.content ul,
.content ol,
.content blockquote,
.content h3,
.content h4 { max-width: var(--sirka-textu); }

.content p { margin: 0 0 1.1rem; }

.content a { color: var(--akcent); text-decoration: none; border-bottom: 1px solid transparent; }
.content a:hover { border-bottom-color: currentColor; }

.content ul, .content ol { margin: 0 0 1.1rem; padding-left: 1.4rem; }
.content li { margin-bottom: .35rem; }

.content hr { margin: 2.5rem 0; border: 0; border-top: 1px solid var(--ciara); }

.content blockquote {
  margin: 1.25rem 0;
  padding: .1rem 0 .1rem 1rem;
  border-left: 3px solid var(--ciara-vyrazna);
  color: var(--text-tlmeny);
}

/* Sekcie stránky */
.section { margin-bottom: .5rem; }
.section--objectives .objectives { padding-left: 1.3rem; }
.section--objectives li.objective { margin-bottom: .4rem; }

/* Nadpis „Postup" generuje builder automaticky vždy, keď na stránke nájde
   krok. V cvičeniach dáva zmysel, v učive nie — tam sa kroky používajú len
   na zoskupenie kontrolných otázok. */
.sekcia--ucivo .section--instructions > .section__header { display: none; }

/* Kroky scenára */
.step { margin: 2.25rem 0; }

.step__header {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: 0 0 .9rem;
  font-size: 1.45rem;
  font-weight: 650;
  letter-spacing: -.01em;
}

.step__keyword { color: var(--text-tlmeny); font-weight: 600; }
.step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 .4rem;
  border-radius: 999px;
  background: var(--akcent);
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
}
.step__colon { display: none; }
.step__title { font-weight: 650; }

/* Bloky úloh, poznámok a riešení */
.task, .admonition {
  margin: 1.25rem 0;
  border: 1px solid var(--ciara);
  border-left: 3px solid var(--ciara-vyrazna);
  border-radius: var(--radius-maly);
  background: var(--plocha-tlmena);
  overflow: hidden;
}

.task__header, .admonition__header {
  margin: 0;
  padding: .6rem .9rem .1rem;
  font-size: .8rem;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-tlmeny);
}

.task__content, .admonition__content { padding: .1rem .9rem .55rem; }
.task__content > *:last-child, .admonition__content > *:last-child { margin-bottom: 0; }

.task__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  margin-right: .4rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--uloha);
  color: #fff;
  font-size: .75rem;
}

.task { border-left-color: var(--uloha); background: var(--uloha-plocha); }
.task .task__header { color: var(--uloha); }

.admonition--warning { border-left-color: var(--upozornenie); background: var(--upozornenie-plocha); }
.admonition--warning .admonition__header { color: var(--upozornenie); }

/* Poznámka sa v HTML volá "note". */
.admonition--note { border-left-color: var(--poznamka); background: var(--poznamka-plocha); }

/* Príklad a nesprávny príklad */
.example {
  margin: 1.25rem 0;
  border: 1px solid var(--ciara);
  border-left: 3px solid var(--riesenie);
  border-radius: var(--radius-maly);
  background: var(--riesenie-plocha);
  overflow: hidden;
}

.example__header {
  margin: 0;
  padding: .6rem .9rem .1rem;
  font-size: .8rem;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--riesenie);
}

.example__title { text-transform: none; letter-spacing: 0; font-weight: 500; }
.example__content { padding: .1rem .9rem .55rem; }
.example__content > *:last-child { margin-bottom: 0; }

.example--wrong { border-left-color: var(--upozornenie); background: var(--upozornenie-plocha); }
.example--wrong .example__header { color: var(--upozornenie); }

/* Riešenie a Výsledok */
.solution {
  margin: 1.25rem 0;
  border: 1px solid var(--ciara);
  border-left: 3px solid var(--riesenie);
  border-radius: var(--radius-maly);
  background: var(--riesenie-plocha);
  overflow: hidden;
}

.solution__header {
  margin: 0;
  padding: .6rem .9rem .1rem;
  font-size: .8rem;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--riesenie);
}

.solution__content { padding: .1rem .9rem .55rem; }
.solution__content > *:last-child { margin-bottom: 0; }

/* Materiál pre vyučujúceho — len v učiteľskej verzii */
.lecturer {
  margin: 1.25rem 0;
  border: 1px dashed var(--vyucujuci);
  border-radius: var(--radius-maly);
  background: var(--vyucujuci-plocha);
  overflow: hidden;
}

.lecturer__header {
  margin: 0;
  padding: .6rem .9rem .1rem;
  font-size: .8rem;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--vyucujuci);
}

.lecturer__content { padding: .1rem .9rem .55rem; }
.lecturer__content > *:last-child { margin-bottom: 0; }

/* Skladacie bloky (Riešenie*, Výsledok*).
 * Rozbaľovanie rieši collapsible.js zo spoločnej témy — nastavuje max-height
 * a triedu "visible". CSS tu len dopĺňa vzhľad zbaleného stavu. */
.solution--hideable { cursor: pointer; user-select: none; }

.solution--hideable .solution__content {
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  transition: max-height .2s ease-out;
}

.solution--hideable.visible .solution__content {
  padding-bottom: .55rem;
}

/* Znamienko +/− dodáva collapsible.css zo spoločnej témy. Tu ho len
 * umiestnime tak, aby sadlo do hlavičky bloku. */
.solution--hideable .solution__header::after {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  right: .7rem;
  top: .45rem;
  color: var(--riesenie);
}

/* Kód */
code {
  font-family: var(--pismo-kod);
  font-size: .875em;
  padding: .12em .35em;
  border-radius: 4px;
  background: var(--plocha-vyrazna);
}

pre {
  position: relative;
  margin: 1.25rem 0;
  padding: 0;
  border: 1px solid var(--ciara);
  border-radius: var(--radius-maly);
  background: var(--plocha-tlmena);
  overflow: hidden;
}

/* Tlačidlo na skopírovanie bloku kódu, dopĺňa ho light.js. */
.kod__kopiruj {
  position: absolute;
  top: .4rem;
  right: .4rem;
  padding: .22rem .55rem;
  border: 1px solid var(--ciara-vyrazna);
  border-radius: 4px;
  background: var(--plocha);
  color: var(--text-tlmeny);
  font-family: var(--pismo);
  font-size: .74rem;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, color .15s, border-color .15s;
}

pre:hover .kod__kopiruj,
.kod__kopiruj:focus-visible { opacity: 1; }

.kod__kopiruj:hover { color: var(--akcent); border-color: var(--akcent); }
.kod__kopiruj.is-done { color: var(--riesenie); border-color: var(--riesenie); opacity: 1; }

/* Na dotykových displejoch nie je hover, tlačidlo necháme viditeľné. */
@media (hover: none) {
  .kod__kopiruj { opacity: 1; }
}

pre code {
  display: block;
  padding: .9rem 1rem;
  overflow-x: auto;
  background: none;
  font-size: .85rem;
  line-height: 1.6;
  /* Žiaci kód kopírujú, odsadenie musí zostať nedotknuté. */
  tab-size: 2;
}

/* Zvýrazňovanie kódu.
 * Z CDN sa načítava svetlá téma highlight.js (github). Farby tokenov vedieme
 * ako premenné, aby ich stačilo prepnúť na jednom mieste spolu so zvyškom témy. */
pre code.hljs { background: none; color: var(--text); }

.hljs-comment, .hljs-quote { color: var(--kod-komentar); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-type { color: var(--kod-kluc); }
.hljs-string, .hljs-attr, .hljs-addition { color: var(--kod-retazec); }
.hljs-number, .hljs-symbol, .hljs-bullet { color: var(--kod-cislo); }
.hljs-title, .hljs-section, .hljs-name, .hljs-selector-id { color: var(--kod-nazov); }
.hljs-attribute, .hljs-variable, .hljs-template-variable { color: var(--kod-premenna); }
.hljs-built_in, .hljs-class .hljs-title { color: var(--kod-vstavane); }
.hljs-meta, .hljs-deletion { color: var(--kod-kluc); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }

/* Prepojenie cieľov a krokov — značku dopĺňa objectives.js zo spoločnej témy. */
.badge {
  display: inline-block;
  margin-left: .4rem;
  padding: .05rem .45rem;
  border: 1px solid var(--ciara-vyrazna);
  border-radius: 999px;
  background: var(--plocha-tlmena);
  color: var(--text-tlmeny);
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
  cursor: help;
  vertical-align: 1px;
}

.badge:hover { border-color: var(--akcent); color: var(--akcent); }

/* Bublina s prepojením (tippy.js) */
.tippy-tooltip { font-size: .85rem !important; }

/* Tabuľky */
.content table {
  width: 100%;
  margin: 1.25rem 0;
  border-collapse: collapse;
  font-size: .93rem;
}

.content th, .content td {
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--ciara);
  text-align: left;
  vertical-align: top;
}

.content th { font-weight: 650; background: var(--plocha-tlmena); }
.content tbody tr:last-child td { border-bottom: 0; }

/* Obrázky a médiá */
.content img { max-width: 100%; height: auto; border-radius: var(--radius-maly); }
.content figure { margin: 1.5rem 0; }
.content figcaption {
  margin-top: .5rem;
  font-size: .85rem;
  color: var(--text-tlmeny);
  text-align: center;
}
.content iframe, .content video { max-width: 100%; border-radius: var(--radius-maly); }

/* Prehľady kurzu */
.overview__col-link { color: var(--akcent); text-decoration: none; }
.overview__col-link.disabled { color: var(--text-slaby); pointer-events: none; }

/* ------------------------------------------------------------------ Pätička */

.footer {
  border-top: 1px solid var(--ciara);
  background: var(--plocha-tlmena);
  color: var(--text-tlmeny);
  font-size: .82rem;
  line-height: 1.6;
}

.footer__inner {
  max-width: var(--sirka-panela);
  margin: 0 auto;
  padding: 1.75rem 1.5rem;
  text-align: center;
}

.footer p { margin: 0 0 .4rem; }
.footer p:last-child { margin-bottom: 0; }
.footer a { color: var(--text-tlmeny); text-decoration: underline; text-underline-offset: 2px; }
.footer a:hover { color: var(--akcent); }

/* ------------------------------------------------------------- Malé displeje */

@media (max-width: 900px) {
  .course-title__full { display: none; }
  .menu__submenu { min-width: 18rem; }
}

@media (max-width: 760px) {
  .menu-button { display: inline-flex; }

  .topnav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    padding: .5rem;
    background: var(--plocha);
    border-bottom: 1px solid var(--ciara);
    box-shadow: var(--tien-menu);
  }

  .page--menu-displayed .topnav { display: block; }

  .menu { flex-direction: column; align-items: stretch; gap: 0; }

  .menu__top > .menu__item,
  .menu__subtitle { width: 100%; justify-content: space-between; padding: .65rem .75rem; }

  /* Na mobile sú sekcie rozbalené v toku stránky, nie ako plávajúce menu. */
  .menu__submenu {
    position: static;
    display: none;
    min-width: 0;
    max-width: none;
    max-height: none;
    overflow: visible;
    margin: 0 0 .35rem .5rem;
    padding: 0 0 0 .5rem;
    border: 0;
    border-left: 2px solid var(--ciara);
    border-radius: 0;
    box-shadow: none;
  }

  .menu__top--folder.is-open .menu__submenu { display: block; }

  .content { padding: 1.75rem 1.15rem 3rem; }
  .scenario-title { font-size: 2rem; }
  .content h2, .section__header { font-size: 1.45rem; }
  .content h3 { font-size: 1.2rem; }
  .header__inner { gap: .75rem; padding: 0 1rem; }
  .footer__inner { padding: 1.5rem 1rem; }
}

@media (max-width: 460px) {
  body { font-size: 16.5px; }
  .scenario-title { font-size: 1.7rem; }
  .content h2, .section__header { font-size: 1.3rem; }
  .content h3 { font-size: 1.12rem; }
  .step__header { font-size: 1.2rem; flex-wrap: wrap; }
  .content { padding: 1.5rem 1rem 2.5rem; }
}

@media print {
  .header, .footer, .menu-button { display: none; }
  .content { max-width: none; padding: 0; }
  .lecturer { display: none; }
}