:root {

  --heading-color: #2c3e50;

}

h1, h2, h3, h4 {

  color: var(--heading-color);

}

@media (prefers-color-scheme: dark) {

  :root {

    --heading-color: #ffffff;

  }

}

/* =============================================================

   JUDr. Petra Chalušová — Web styles (final merged)

   - Sloučeno z původního „style 2 1.css“ + poslední úpravy

   - Hero obrázek nahoře, menší obrázky v textu vpravo

   - Responsivita + základní dark mode

   - Zpětná kompatibilita: .banner, .float-image, plain <header>

   ============================================================= */



/* -----------------------

   Základ & proměnné

----------------------- */

:root{

  --bg: #f7f8fb;            /* pozadí stránky */

  --surface: #ffffff;        /* panely/sekce */

  --text: #2b2f33;           /* text */

  --muted: #566;             /* tlumený text */

  --brand: #0b74de;          /* akcent */

  --brand-dark: #0a5fc0;     /* hover akcent */

  --shadow: 0 2px 6px rgba(0,0,0,.08);

  --radius: 8px;

  --space: clamp(14px, 2.2vw, 20px);

  

}



*{ box-sizing: border-box }

html, body{ margin:0; padding:0 }



body{

  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, system-ui, -apple-system, sans-serif;

  line-height: 1.55;

  color: var(--text);

  background: linear-gradient(180deg, var(--bg), #fff);

  /* Pokud chcete starou „papírovou“ texturu, uložte obrázek lokálně

     (např. ./img/bg-paper-fibers.png) a odkomentujte: */

  /* background-image: url('img/bg-paper-fibers.png'); */

}



img{ max-width:100%; height:auto; display:block }



a{ color:#0066cc; text-decoration:none }

a:hover{ color:var(--brand-dark); text-decoration:underline }

a:focus{ outline:2px solid var(--brand); outline-offset:2px }







/* -----------------------

   Rozvržení / kontejnery

----------------------- */

.container{ max-width:900px; margin:auto; padding:var(--space) }



/* Ponechávám i main z původního CSS, ale sjednoceně */

main{ max-width:900px; margin:auto; padding:var(--space) }

main section{

  background: var(--surface);

  padding: var(--space);

  margin: var(--space) auto;

  border-radius: var(--radius);

  box-shadow: var(--shadow);

}

/* clearfix kvůli floatům uvnitř sekcí */

main section::after{ content:""; display:block; clear:both }



/* -----------------------

   Hlavička & hero

----------------------- */

/* Původní „plain“ header kvůli kompatibilitě */

header{

  text-align:center;

  background-color:#fff;

  padding:20px;

  box-shadow: var(--shadow);

}



/* Novější struktura se .site-header a .hero */

.site-header{ background: var(--surface) }

.hero{ margin:0 }

.hero .banner{ width:100%; height: clamp(220px, 32vh, 420px); object-fit: cover }



.brand-wrap{ padding: calc(var(--space)*.8) var(--space) }

.brand{

  margin:0;

  color:#2c3e50;

  font-size: clamp(1.6rem, 3.2vw, 2rem);

}

.subtitle{ margin:.25rem 0 0; color:#4b5964; font-size:1rem }



/* -----------------------

   Jazykový přepínač (<a> i <button>)

----------------------- */

#language-switch{ position:fixed; top:10px; right:10px; z-index:1000 }

#language-switch a,

#language-switch button{

  display:inline-block; margin-left:6px; padding:6px 10px;

  border:0; cursor:pointer; border-radius:6px;

  background:#2c3e50; color:#fff; font:inherit

}

#language-switch a[aria-current="page"],

#language-switch button.active{ background: var(--brand) }



/* -----------------------

   Obrázky v textu (vpravo)

----------------------- */

/* Základní figure pro malé obrázky */

figure.media{

  margin:0 0 1rem 1rem;     /* mezera vlevo + dole */

  max-width:42%;            /* šířka na desktopu */

  float:right;              /* všechno vpravo */

}

figure.media img{ border-radius:8px; box-shadow: var(--shadow) }



/* Případné staré třídy zachováme, ale všechny vpravo */

.media--right{ float:right; margin:0 0 1rem 1rem }

.media--left { float:right; margin:0 0 1rem 1rem }



/* Zpětná kompatibilita s původním .float-image */

.float-image{ float:right; width:40%; margin:0 0 10px 20px }

.float-image img{ width:100%; height:auto; border-radius:4px }



/* -----------------------

   Odkazy & drobnosti (původní chování)

----------------------- */

a{ color:#0066cc } /* sjednocení s původním CSS */



/* -----------------------

   Patička

----------------------- */

.site-footer{

  color:#5c6670;

  font-size:.95rem;

  padding-bottom: calc(var(--space) * 1.5);

}



/* -----------------------

   Responsivita

----------------------- */

@media (max-width: 900px){

  figure.media{ max-width:48% }

}



@media (max-width: 768px){

  header{ padding:16px }

  main{ padding:16px }

}



@media (max-width: 700px){

  /* Na mobilu bez obtékání – lepší čitelnost */

  figure.media,

  .media--left,

  .media--right{

    float:none;

    margin:.5rem 0 1rem 0;

    max-width:100%;

  }

  .float-image{ float:none; width:100%; margin:10px 0 }

}



/* -----------------------

   Dark mode

----------------------- */

@media (prefers-color-scheme: dark){

  :root {

    --bg: #101215;

    --surface: #161a1d;

    --text: #dfe4ea;

    --muted: #9fb0bd;

    --shadow: none;

  }



  a:hover { text-decoration: none }

  .brand { color: #e8eef5 }

  .subtitle { color: #b7c4cf }



  

}