/* ZÁKLADNÍ RESET */
* {
  box-sizing: border-box;
}

body {
  font-family: Roboto, sans-serif;
  background-color: #FFFFFF;
  margin: 0;
  text-align: left;
}

img {
  border-style: none;
  width: 100%;
  height: auto;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* HLAVNÍ KONTEJNER STRÁNKY – GRID LAYOUT */
#stranka {
  max-width: 1200px;
  margin: 0 auto;
  background-color: #F5F8FF;

  display: grid;
  grid-template-columns: 20% 80%;
  grid-template-areas:
    "header header"
    "nav    article"
    "footer footer";
  column-gap: 0.1rem;
}

/* HLAVIČKA */
header {
  grid-area: header;
  position: relative;
  z-index: 1500; /* ← bude nad menu, ale pod Fancyboxem */
}

.parent {
  position: relative;
}

.image2 {
  position: absolute;
  display: block;
  top: 55%;
  left: 0;
  border: 0;
  border-radius: 50%;
  max-width: 20%;
}

.image3 {
  position: absolute;
  display: block;
  top: 88%;
  left: 22%;
  border: 0;
  max-width: 60%;
}

.image-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.image-hover:hover {
  opacity: 1;
}

header .parent {
  position: relative;

}

/* NAVIGACE – MENU VLEVO, STICKY */
nav {
  grid-area: nav;
  background: #A0BEFA;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;      /* ← DŮLEŽITÉ pro viditelné zaoblení */

  margin-top: 8px;	/* ← POSUN MENU DOLŮ */

  position: sticky;
  top: 0;
  align-self: start;
  z-index: 1000;
}


.menu {
  width: 100%;
}

/* TLAČÍTKO (HAMBURGER) */
.menu button {
  background: #0D6AB7;
  border: 0;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
  display: none;
  text-align: center;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-radius: 7px;
}

.menu button:hover,
.menu button:focus {
  background: #1081DD;
}

/* VNITŘEK MENU */
.menu menu {
  display: block;
}

.menu a {
  display: block;
  font-family: Roboto, sans-serif;
  font-size: 1.2em;
  border-style: none;
  color: #FFFFFF;
  padding: 0.2em 0.5em;
  width: 100%;
  text-align: left;
  text-decoration: none;
  background: #A0BEFA;
  transition: color 0s, box-shadow 0s;
  box-shadow: inset 0px 0 0 0 #0D6AB7;
}

.menu a:hover {
  box-shadow: inset 1200px 0 0 0 #0D6AB7;
  color: #FFFFFF;
  background: #A0BEFA;
}

.imagelock {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  max-width: 100%;
  float: right;
  margin: 3px 10px 0 0;
}

/* MOBILNÍ MENU (DO 800 PX) */
@media screen and (max-width: 800px) {

  #stranka {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "nav"
      "article"
      "footer";
  }

  nav {
    width: 100%;
  }

  .menu button {
    display: block;
  }

  .menu menu {
    display: none;
  }

  .menu.zobrazit menu {
    display: block;
  }
}

/* DESKTOP: PO SCROLLU ZOBRAZIT HAMBURGER */
@media screen and (min-width: 801px) {

  /* schovat klasické menu */
  .menu.scrolled menu {
    display: none;
  }

  /* zobrazit hamburger */
  .menu.scrolled button {
    display: block;
  }

  /* pokud je menu otevřené, zobrazit ho i při scrollu */
  .menu.scrolled.zobrazit menu {
    display: block;
  }

  /* a schovat hamburger */
  .menu.scrolled.zobrazit button {
    display: none;
  }
}

/* OBSAH */
article {
  grid-area: article;
  padding: 0.6em;
  background-color: #FFFFFF;
}

/* FOOTER */
footer {
  grid-area: footer;
}

footer p {
  text-align: center;
  font-size: 0.8rem;
  color: #515151;
}

.fancybox__container {
  z-index: 99999 !important;
}