/* === HLAVIČKA === */

header {

  position: relative;

  text-align: center;

  padding: 22px 10px 0;

  background: linear-gradient(180deg, #6eb8ff 0%, #84bfff 70%, #ffffff 100%);

}



/* Logo ZIMNÍ LIGA */

.title {

  position: relative;

  width: min(720px, 88%);

  height: auto;

  z-index: 1;

  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .25));

}



/* ❤️🦁 postavičky – VŽDY NAD MENU, ale neblokují klikání */

.heart,

.lion {

  position: absolute;

  z-index: 999;

  pointer-events: none;

  transition: all 0.3s ease;

}



/* Desktop pozice */

.heart {

  left: 22px;

  top: 42px;

  width: 145px;

  transform: translateY(48px);

}

.lion {

  right: 34px;

  top: 110px;

  width: 165px;

  transform: translateY(8px);

}



/* Pokud je menu samostatně za headerem */

header + nav {

  margin-top: -35px;

  position: relative;

  z-index: 2;

}



/* === MENU (společné) === */

nav {

  background: linear-gradient(90deg, #0b50c2, #004bb7);

  text-align: center;

  box-shadow: 0 8px 16px rgba(0,0,0,.25);

  position: relative;

  z-index: 2;

}



nav ul {

  list-style: none;

  margin: 0;

  padding: 0;

  display: inline-flex;

  gap: 22px;

}



nav li {

  position: relative;

}



nav a {

  color: #fff;

  text-decoration: none;

  font-weight: 800;

  font-size: 18px;

  padding: 12px 14px;

  display: inline-block;

  border-radius: 8px;

  transition: .2s;

}



nav a:hover {

  background: rgba(255,255,255,.22);

}



/* Submenu – desktop (hover) */

.submenu {

  position: absolute;

  display: none;

  flex-direction: column;

  background: rgba(0,75,183,0.85);

  border-radius: 8px;

  padding: 6px;

  top: 100%;

  left: 0;

  box-shadow: 0 6px 10px rgba(0,0,0,.15);

}



.dropdown:hover > .submenu {

  display: flex;

}



/* === MOBILNÍ MENU === */

.menu-toggle {

  display: none;

  background: linear-gradient(90deg, #0b50c2, #004bb7);

  color: #fff;

  text-align: center;

  font-weight: 800;

  font-size: 18px;

  cursor: pointer;

  padding: 10px;

}



@media (max-width: 820px) {



  /* Postavičky – mobil */

  .heart,

  .lion {

    transform: none;

    width: 70px;

    top: auto;

    bottom: -6px;

    opacity: 0.9;

  }

  .heart { left: -6px; }

  .lion { right: -6px; }



  /* Hamburger */

  .menu-toggle {

    display: block;

  }



  /* Základ mobilního menu */

  nav ul {

    display: none;

    flex-direction: column;

    background: linear-gradient(180deg, #0b50c2, #004bb7);

    width: 100%;

  }



  nav ul.open {

    display: flex;

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    box-shadow: 0 8px 20px rgba(0,0,0,.25);

    z-index: 3;

  }



  nav a {

    display: block;

    padding: 12px;

    font-size: 17px;

  }



  /* Submenu – mobil (klikem) */

  .submenu {

    display: none;

    position: static;

    background: rgba(255,255,255,0.1);

    border-radius: 0;

    box-shadow: none;

    padding: 0;

  }



  .dropdown.open > .submenu {

    display: flex;

  }

}



/* Logo (brand) má být klikatelné */

header .brand {

  display: inline-block;

  position: relative;

  z-index: 2;

}



header .brand img.title {

  display: block;

}



/* Dekorace nesmí blokovat klikání */

header img.heart,

header img.lion,

.header-decor,

#lvicek,

#srdce,

img.decoration {

  pointer-events: none;

}



/* === SOCIÁLNÍ IKONY === */

.header-socials {

  position: absolute;

  top: 18px;

  right: 26px;

  display: flex;

  align-items: center;

  gap: 10px;

  z-index: 1000;

}



.header-socials a {

  display: inline-flex;

  align-items: center;

  justify-content: center;

}



.header-socials img {

  width: 24px;

  height: 24px;

  max-width: 24px;

  max-height: 24px;

  display: block;

  opacity: .9;

  transition: transform .2s ease, opacity .2s ease;

}



@media (hover: hover){

  .header-socials a:hover img{

    transform: scale(1.15);

    opacity: 1;

  }

}



/* 📱 menší mobily */

@media (max-width: 768px){

  .header-socials{

    top: 14px;

    right: 16px;

    gap: 8px;

  }



  .header-socials img{

    width: 20px;

    height: 20px;

    max-width: 20px;

    max-height: 20px;

  }

}