/*
  ===============================
  ZÁKLADNÍ NASTAVENÍ PROMĚNNÝCH
  ===============================
  Používáme tzv. CSS custom properties (proměnné).
  Díky nim můžeme barvy snadno přepsat i pro tmavý režim.
*/
:root { 
    /* škály, snadno změníš vzhled na jednom místě */
  --color-primary: #1E3A8A;   /* hluboká modrá – logika */
  --color-tech: #06B6D4;      /* tyrkysová – technologie */
  --color-accent: #F97316;    /* oranžová – experiment */
  --color-nature: #16A34A;    /* zelená – příroda */
  --color-bg: #F9FAFB;        /* pozadí světlé */
  --color-text: #111827;      /* text tmavý */
  --color-card: #FFFFFF;      /* pozadí karet */
  --space: clamp(12px, 2vw, 20px); 
  /*vezmi optimální hodnotu (tady 2vw, tedy 2 % šířky obrazovky), ale nikdy ji nepřekroč přes maximum (20px) a neklesni pod minimum (12px). Používá se na mezery (odsazení, padding, margin), aby stránka byla dobře čitelná na mobilech i monitorech.*/
  --radius: 16px; 
  /* Jednoduchá hodnota poloměru zaoblení rohů (použiješ pro border-radius). Díky proměnné ji pak můžeš nastavit na kartách, tlačítkách nebo boxech a měnit globálně.*/
  --shadow: 10px 10px 10px rgba(0, 0, 0, 0.40); 
  /* Definuje stín (box-shadow) pro prvky, aby vypadaly plasticky. Rozpadne se na: posunX posunY rozmazání barva.
  0 → stín není posunutý do strany.
  10px → posunutí dolů.
  20px → rozmazání.
  rgba(0, 0, 0, 0.25) → barva (černá s 40% průhledností).*/
  --blue-900:#0d47a1; --blue-100:#e3f2fd; --text:#0b1a2b; --muted:#4b5272; 
  /* To jsou také proměnné, ale tentokrát to nejsou paletové barvy podle témat (jako primary/tech/accent), nýbrž technické odstíny: tmavá modrá, světle modrá, barva textu, tlumená šedá. Použijí se jako doplňkové tóny třeba v grafech, hover efektech nebo pro nenápadný text.*/
	--content-max: 960px;
}

/* ZÁKLAD: lepší čitelnost a konzistentní box model */
* { box-sizing: border-box; }
html { line-height: 1.5; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #1f2937;           /* tmavě šedá pro text */
  background: #f0f7ff;      /* velmi světlé pozadí, "čistá" světlemodrá*/
}

/* Pomocná třída pro max. šířku a boční odsazení */
.container {
  max-width: var(--content-max);         /* příjemná čtecí šířka */
  margin: 0 auto;           /* vycentrování */
  padding: 0 16px;          /* vnitřní okraje vlevo/vpravo */
}

/* Skip link pro přístupnost (je vidět po focusu z klávesnice) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #111827;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
}
.skip-link:focus { left: 16px; }

/* HLAVIČKA */
.site-header {
  background: var(--color-primary);
  color: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center; /* všechen text uvnitř hlavičky na střed */
  /* border-bottom: 1px solid #e5e7eb;
   „Spodní okraj“ (čára dole kolem prvku). Parametry se čtou jako:
  1px → tloušťka čáry (1 pixel),
  solid → typ čáry (plná),
  #e5e7eb → barva (světle šedá).
  Výsledek: prvek má pod sebou jemnou oddělovací linku.
  Nakonec jsem nepoužila, působilo to rušivě*/
  margin: 20px; /* vnější mezera kolem prvku */
  padding: 10px;
  /* Vnitřní odsazení (mezera uvnitř prvku, mezi obsahem a jeho okrajem).
Hodnoty:
1 hodnota → všude stejně
2 hodnoty → nahoře+dole | vlevo+vpravo
3 hodnoty → nahoře | vlevo+vpravo | dole
4 hodnoty → nahoře | vpravo | dole | vlevo (jako ciferník hodin)*/
}
.site-title { 
	margin: 0; 
	font-size: 0.9rem;
	font-weight: normal; 
	opacity: 0.5;
}
.site-tagline { 
	margin: 4px 0 0; 
	font-size: 2rem;
	font-weight: bold;
}


/* Navigační menu */
.site-nav {
  background: white;          
  margin: 20px;                 /* mezera kolem menu (jako u hlavičky) */
  border-radius: var(--radius); /* stejné zaoblení */
  box-shadow: var(--shadow);    /* stejný stín */
}

.site-nav ul {
  list-style: none;             /* odstraní puntíky */
  margin: 0;
  padding: 12px 16px;
  display: flex;                /* odkazy do řádku */
  gap: 32px;                    /* mezera mezi položkami */
  justify-content: center;      /* zarovnání na střed */
}

/* určí vzhled odkazů v navigaci*/
.site-nav a {
  color: black;  /* barva textu odkazů bude bílá (na tmavém pozadí navigace*/
  text-decoration: none;   /* odstraní se podtržení odkazu, takže odkazy vypadají jako tlačítka */
  padding: 6px 10px;   /* vnitřní odsazení: 6px nahoře/dole, 10px vlevo/vpravo, tj. vytvoří "klikací plošku" kolem textu*/
  border-radius: 6px;  /* zaoblené rohy "klikací plochy" */
  transition: background 0.3s; /* plynulý přechod barvy pozadí i textu */
}

/* efekt při přejetí myší */
.site-nav a:hover,
.site-nav a:focus {
  background: var(--color-tech); /* tyrkysová */
  color: var(--color-text) /*tmavý text*/
}

/* aktivní položka menu (aktuální stránka) */
.site-nav a.active {
  background: var(--color-primary);  /* tmavě modrá */
  color: white;
}

 /* PATIČKA */
.site-footer {
  padding: 40px 0;      /* Více prostoru nad a pod textem */
  color: #64748b;       /* Jemná břidlicová šedá */
  text-align: center;   /* Vrátíme to na střed */
  font-size: 0.9rem;
}

/* --- ÚPRAVA ODKAZŮ V BOČNÍM PANELU --- */

/* Seznam v aside bez puntíků */
aside ul {
  list-style: none;      /* Sbohem, puntíky! */
  padding: 0;            /* Resetujeme vnitřní odsazení */
  margin: 0;
}

/* Mezery mezi jednotlivými řádky odkazů */
aside li {
  margin-bottom: 12px;
}

/* 3) Samotný vzhled odkazů */
aside a {
  text-decoration: none;        /* Bez podtržení */
  color: var(--color-primary);  /* Použijeme vaši tmavě modrou */
  font-weight: 500;
  transition: color 0.3s;       /* Plynulá změna barvy */
}

/* Efekt při najetí myší */
aside a:hover {
  color: var(--color-tech);     /* Při najetí zmodrá/tyrkysová jako v menu */
  text-decoration: underline;   /* Decentní podtržení jen při hoveru */
}

/* Seznam souborů ke stžení na stránce Matematika */
.download-list {
  list-style: none;      /* Seznam bez puntíků */
  padding: 0;           /* Zarovná seznam k okraji textu */
  margin: 1.5rem 0;
}

.download-list li {
  background-color: #f0f7ff; /* Stejná barva jako pozadí webu, nebo o chlup světlejší */
  border: 1px solid #e2e8f0;  /* Jemný rámeček pro definici tvaru */
  border-radius: 8px;         /* Zakulacené rohy ladící s navigací */
  margin-bottom: 0.5rem;      /* Mezera mezi kartičkami */
  transition: all 0.2s ease;  /* Aby byl pohyb a změna barvy plynulá */
}

.download-list li a {
  display: block;             /* Odkaz vyplní celou plochu řádku */
  padding: 12px 16px;         /* Větší plocha pro kliknutí prstem/myší */
  text-decoration: none;      /* Smaže podtržení, vypadá to čistěji */
  color: var(--color-primary);    
  font-weight: 500;
}

/* Interaktivní efekt při najetí myší */
.download-list li:hover {
  background-color: #ffffff;  /* Na bílé kartě to "vyskočí" */
  transform: translateX(8px); /* Jemný posun doprava - velmi efektní! */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* Přidá lehký stín */
	text-decoration: underline;   /* Decentní podtržení jen při hoveru */
}

.download-box {
	margin-top: 2rem; 
	padding: 1.5rem; 
	background-color: var(--color-bg); 
	border-radius: var(--radius); 
	border: 2px dashed var(--color-tech)
}

/* Styl pro hlavní nadpisy v obsahu (na všech stránkách) */
article h2 {
    border-bottom: 2px solid var(--color-primary); /* Linka v barvě webu */
    padding-bottom: 0.5rem;                  /* Mezera mezi textem a linkou */
    margin-bottom: 1.5rem;                   /* Mezera pod linkou */
    color: var(--color-primary);             /* Tmavší modrá pro lepší čitelnost */
    letter-spacing: 0.5px                   /* Trošku vzdušnější písmo */
}

.foto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 2rem;
}

.foto-grid figure {
  margin: 0;
  background: white;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.foto-grid figcaption {
  text-align: center;
  font-size: 0.9rem;
  margin-top: 8px;
  color: var(--muted);
}

.foto-grid video {
  width: 100%;
  border-radius: 8px; /* Aby video mělo stejně kulaté rohy jako fotky */
  display: block;
}

/*pro kontrolu při prvotním návrhu stránky*/
.debug{
  border: 1px solid transparent;
  padding: 5px;
  margin: 5px;
  text-align: left;
}

.layout_2sl {
  display: grid;
  grid-template-columns: 1fr;      /* přístup Mobile First - na úzkém displeji se budou sloupce skládta pod sebe*/
  gap: var(--space);
  max-width: var(--content-max);
  margin: 0 auto;                      /* centrování gridu */
}

img {
  max-width: 100%;   /* nikdy nepřesáhne šířku sloupce */
  height: auto;      /* výška se dopočítá podle poměru stran */
  border-radius: 8px; /* volitelné: zaoblení rohů */
}

figure img {
  max-width: 100%;
}

/* 8) DROBNÁ RESPONSIVITA (přizpůsobení monitorům) */
@media (min-width: 720px) {
  .hero { padding: 32px; }
  .layout_2sl { grid-template-columns: 3fr 1fr;}
}