/* Reset a základ */
body {
  margin: 0;
  font-family: 'Roboto', Arial, sans-serif;
  background-color: #bbbbbb;
  color: #111;
  line-height: 1.5;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #bbbbbb;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
 
}

html, body {
  height: 100%;       /* celé okno */
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;  /* hlavní kontejner zabere celé okno */
}

/* poloprůhledné logo v pozadí */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("images/ssgihockey.jpg") no-repeat center center;
  background-size: 800px; /* velikost loga */
  opacity: 0.1; /* tady nastavíš průhlednost (zkus 0.03 – 0.1) */
  z-index: -1; /* logo jde za obsah */
}


/* === Hlavička a navigace === */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background-color: #111;
  color: #fff;
}

.site-title {
  font-size: 1.8em;
  font-weight: bold;
}

.nav {
  display: flex;
  align-items: center;
  gap: 30px; /* mezery mezi odkazy */
}

.nav a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  padding: 5px 10px;
  transition: color 0.3s;
}

.nav a:hover {
  color: #e60000; /* červená při hoveru */
}

.nav-logo {
  height: 40px;       /* velikost loga na PC */
  margin-left: 700px;  /* mezera mezi logem a posledním odkazem */
}

/* === Responzivní zobrazení === */
@media (max-width: 600px) {
   .header {
    flex-direction: column;      /* nadpis nahoře, navigace a logo pod ním */
    align-items: center;
    gap: 10px;                   /* mezery mezi nadpisem, navigací a logem */
  }

  .nav {
    flex-direction: row;  /* stále v řádku */
    flex-wrap: nowrap;      /* pokud se nevejdou, zalomí se */
    justify-content: center;
    gap: 10px;            /* menší mezery */
  }

  .nav-logo {
    height: 25px;         /* menší logo na mobilu */
    margin-left: 0;
  }
}

 
/* Hlavní obsah */
main {
  padding: 20px 30px; /* odsazení textu od okraje */
  max-width: 1200px;
  margin: auto;
  flex: 1;
}

main h2 {
  text-align: center;
  margin: 40px 0 20px;
  color: #E10600;
}

/* Odkazy na úvodní stránce (SSGI, Pohybové dovednosti, Tejpování, Akce na ledě) */
.odkazy {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 30px;
}

.odkaz a {
  font-family: 'Arial Black', sans-serif; /* výrazný font */
  color: #E10600; /* červená */
  font-size: 1.3em;
  text-decoration: none;
  
}

.odkaz a:hover {
  color: #b80000;
}

.odkaz p {
  font-family: 'Roboto', sans-serif;
  color: #111;
  font-size: 1em;
  margin-top: 5px;
}

/* Trenéři */
.treneri {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.trener {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-align: center;
  padding: 15px;
  width: 220px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}

.trener:hover {
  transform: translateY(-5px);
}

.trener img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.trener h3 {
  color: #E10600;
  margin: 10px 0 5px;
}

.trener p {
  font-size: 0.95em;
  color: #333;
}

/* Rezervace */
.rezervace-form {
  display: none; /* formulář skrytý */
}

/* Footer */
footer {
  background-color: #000;
  color: #fff;
  text-align: center;
  padding: 15px;
  margin-top: 40px;
  font-size: 0.9em;
  position: relative;
  z-index: 1;
}

/* Responsivní design */
@media (max-width: 768px) {
  nav {
    flex-direction: row;
  }

  .treneri {
    flex-direction: column;
    align-items: center;
  }

  header h1 {
    font-size: 1.5em;
  }
}
/* === Kontakt na Filipa Marka - Akce na ledě === */
.contact-filipa {
  margin-top: 400px;    /* odsazení od předchozího textu */
  font-weight: bold;
  color: #e60000;      /* červená barva, aby vynikl */
}

@media (max-width: 600px) {
  body::before {
    background-size: 300px; /* menší logo pro mobil */
    opacity: 0.05;          /* můžeš upravit průhlednost */
  }
}