/* POZOR - na KONCI jsou zápisy pro DARK MODE: @media (prefers-color-scheme: dark) */




:root {
  --my_color-light: rgb(255,249,240);   /* FloralWhite (#FFFAF0) - prakticky stejná jako moje; AntiqueWhite (#FAEBD7) podstatně tmavší a teple hnědější */
  --my_color-dark: rgb(55,55,55);
  --my_color-midgrey: rgb(150,150,150);
  --my_color-light-grey: rgb(185,185,185);
  --my_color-dark-grey: rgb(115,115,115);
  --my_text-opacity: 0.7;
  --my_image-opacity: 1;  
}

/* 3 různé zápisy výšky stránky kvůli různým prohlížečům; výška definována na plnou výšku obrazovky kvůli obarvenému pozadí a kvůli patičce ůplně dole i při stránce nižší, než je obrazovka (proto taky background "relative", patička "absolute"), jinak byla na spodku intro fotky */
body {
  min-height: 100vh; 
  height: 100%; 
  height: auto; 
  position: relative; 
  background-color: var(--my_color-light);
  color: black;
  transition: all 0.5s ease;
}

/* pokus zrušit oranžové a modré rámečky kolem knoflíků apod. V Android Chrome (zlobilo collapsible) stačí ":focus {outline: none}" */
body, textarea, input, :focus {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important; 
  -webkit-tap-highlight-color: transparent;  /* i.e. Nexus5/Chrome and Kindle Fire HD 7'' */
  -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important; 
  outline: none !important; 
} 

/* původní definice písma
h1 {font: normal normal 500 normal 40px/44px "Playfair Display", sans-serif;}
h2 {font: normal normal 500 normal 32px/35px "Playfair Display", sans-serif;}
h3 {font: normal normal 500 normal 28px/30px "Playfair Display", sans-serif;}
h4 {font: normal normal 500 normal 24px/26px "Playfair Display", sans-serif;}
h5 {font: normal normal 500 normal 20px/22px "Playfair Display", sans-serif;}
h6 {font: normal normal 500 normal 16px/17px "Playfair Display", sans-serif;}

.container {font: normal normal normal normal 16px/24px "Alegreya Sans", sans-serif;}
.lead {font: normal normal normal normal 20px/30px "Alegreya Sans", sans-serif;}
*/

/* moje redefinice písma */
h1 {
  font: normal normal 500 normal 28px/30px "Playfair Display", sans-serif;
}

h2 {
  font: normal normal bold normal 28px/30px "Playfair Display", sans-serif;
}




a:link,
a:visited {
  text-decoration: none; 
  text-decoration-skip: ink; 
  color: peru;
  transition: all 0.3s ease;  
  font-weight: bold;
  outline: none;
}

a:hover {
  text-decoration: underline; 
  text-decoration-skip: ink; 
/*  color: black; */
  transition: all 0.3s ease;  
  font-weight: bold;
  outline: none;
}




/* definice proměnných kvůli vertikální pozici titulu na úvodní fotografii (portrait: titul u horního okraje - kvůli viditelnosti na kartách v iSafari a Opeře. A pak speciality pro rtv */
@media only screen and (orientation: landscape) {
  html { 
  --intro_tit_position: -5vh; 
  
  --intro_tit_position_rtv: 15vh;
  --intro_tit_r_shift_rtv: -12vw;
  --intro_font_size_rtv: 1.36em;
  }
}
@media only screen and (orientation: landscape) AND (max-width: 1000px) {
  html { 
  --intro_tit_position_rtv: 5vh;
  --intro_tit_r_shift_rtv: vw;
  --intro_font_size_rtv: 1em;
  }
}     
@media only screen and (orientation: landscape) AND (max-width: 600px) {
  html { 
  --intro_tit_position_rtv: 5vh;
  --intro_tit_r_shift_rtv: 4vw;
  --intro_font_size_rtv: 1em;
  }
}     
@media only screen and (orientation: portrait) {
  html { 
 --intro_tit_position: -20vh; 
 
 --intro_tit_position_rtv: 1.5vh;
 --intro_tit_r_shift_rtv: vw;
 --intro_font_size_rtv: 1.36em;
  }
} 
@media only screen and (orientation: portrait) AND (max-width: 800px) {
  html { 
  --intro_tit_position_rtv: 1.5vh;
  --intro_tit_r_shift_rtv: 7vw;
  --intro_font_size_rtv: 1em;
  }
}     
@media only screen and (orientation: portrait) AND (max-width: 350px) {
  html { 
  --intro_tit_position_rtv: 1.5vh;
  --intro_tit_r_shift_rtv: vw;
  --intro_font_size_rtv: 1em;
  }
} 
  



/* zobrazení obrázků v oknech s různou šířkou (iP13ProMax = 2778 × 1284  */
@media only screen and (orientation: landscape) {
  html { 
  --my_width: 40%; 
  --my_margin-bottom: 4vw;
  }
}
@media only screen and (orientation: portrait) {
  html { 
  --my_width: 40%; 
  --my_margin-bottom: 3vw;
  }
}        
@media only screen and (orientation: portrait) AND (max-width: 1000px) {
  html { 
  --my_width: 100%; 
  --my_margin-bottom: 20vw;
  }
}     




.menu-button {
  z-index: 1;
  position: fixed;
  bottom: 10%;
  right: 3vw;
  color: var(--my_color-dark);
  font-size: 2rem;
  opacity: 0.7;
  padding: 9px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.menu-button-shadow {
  z-index: 0.9;
  position: fixed;
  bottom: 9.8%;
  right: 3vw;
  color: var(--my_color-light);
  font-size: 2rem;
  opacity: 0.7;
  padding: 9px;
  transition: all 0.3s ease;
  cursor: pointer;  
}

.menu-button a {
  display: block;
  text-align: center;
  padding: 9px;
  transition: all 0.3s ease;
}




.sidenav {
  background-color: var(--my_color-light);
  opacity: 0.94;  
  border-left: 1px solid rgba(0,0,0,0.05);
  height: 100%;
  width: 0;
  position: fixed;
  top: 0;
  right: 0%;
  z-index: 1;
  overflow-x: auto;
  transition: all 0.5s ease;
}

.sidenav a {
  padding: 0 16px 0 0;
  text-decoration: none;
  color: peru;
  transition: all 0.3s ease;
}

.sidenav-content {
  opacity: 0;
  transition:all 0.5s ease;
}

.sidenav-content-visible {
  opacity: 1;
  transition:all 0.5s ease;
}

.sidenav .menu-item {
  padding: 0 0px 0 0;
  text-decoration: none;
  color: peru;
  transition: all 0.3s ease;
}

.sidenav .menu-item:after {
  content: '\00a0 \00a0 •';   /* 00a0 = nbsp */
  padding: 0 19px 0 0;        /* kvůli zarovnání středové tečky ne pravým okrajem, ale středem */
  color: peru;
  font-weight: bold;
  float: right;
  margin-left: 0px;
  transition: all 0.3s ease;  
}

.sidenav .togglebtn {
  padding: 0 16px 0 0;
  border: none;
  outline: none;
  background-color: var(--my_color-light);
  transition: all 0.5s ease;
}

.sidenav .togglebtn img {
  display: block;
  height: 30px;  
  width: 30px;
}

.sidenav .closebtn {
  padding: 0 19px 0 0;
  width: 100%;                /* je to pak klikací až k levému okraji */
  border: none;
  outline: none;
  background-color: var(--my_color-light);
  font-size: 2.6em;  
  font-weight: bold;
  text-align: right;
  color: var(--my_color-midgrey);
  cursor: pointer;
  transition: all 0.5s ease;
}




.collapsible {
  background-color: var(--my_color-light);
  color: peru;
  font-weight: bold;
  cursor: pointer;
  padding: 0 16px 0 0;
  border: none;
  text-align: right;
  outline: none;
  transition: all 0.5s ease;
}

.collapsible:after {
  content: '\00a0 \00a0 \003c';   /* content: nbsp 00a0, + 002B, ∨ 2228, ⋁ 22C1, < 003C */
  color: peru;
  font-weight: normal;
  float: right;
  margin-left: 0px;
  transition: all 0.5s ease;
}

.collapsible-active {
  /* width: 100%; 
  text-align: left; */
  padding: 10px 64px 0 16px;
  color: var(--my_color-dark-grey);
  transition: all 0.5s ease;
}

.collapsible-active:after {
  content: "\00a0 \00a0 \003e";   /* content: nbsp 00a0, - 2212, ∧ 2227, ⋀ 22C0, > 003E */
  color: var(--my_color-dark-grey);
  transition: all 0.5s ease;
}

.collapsible-content {
  padding: 0 0px 0 0;
  background-color: var(--my_color-light);
  max-height: 0;
  overflow: hidden;
  transition: all 0.5s ease;
}




@media only screen and (prefers-color-scheme: dark), (light-level: dim) {
  body {
    background-color: var(--my_color-dark);
    color: var(--my_color-light);
    --my_image-opacity: 0.8;
  } 
  a:hover {
  color: var(--my_color-light);
  }
  .menu-button {
  color: var(--my_color-light);
  }
  .menu-button-shadow {
  color: var(--my_color-dark);
  } 
  .sidenav {
  background-color: var(--my_color-dark);
  border-left: 1px solid rgba(0,0,0,0.1);
  }
  .sidenav .togglebtn {
  background-color: var(--my_color-dark);
  }
  .sidenav .closebtn {
  background-color: var(--my_color-dark);
  }
  .collapsible {
  background-color: var(--my_color-dark);
  }
  .collapsible-active {
  color: var(--my_color-light-grey);
  }  
  .collapsible-active:after {
  color: var(--my_color-light-grey);
  }  
  .collapsible-content {
  background-color: var(--my_color-dark);
  }  
}