/*
Theme Name: DigitalneUmenia
Author: MatejNovotny
Author URI: https://digitalneumenia.sk
Version: 2.0
 */ 
 
 @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap');

 :root {
  --cyan: #2EB3A3;     /* #55ffff;*/
  --magenta: #bc4ecc;    /* #e065ff;*/
  --yellow: #c87e39;  /* #ff9c40;*/
  --red: #e33535;     /* #ff5555;*/
  --green: #4ba618;   /* #55ff55;*/
  --blue: #5555ff;  
  --white: #E2E2E2;
  --black: #101010; 
  --grey: #353535;
  --lightgrey: #777777;
}

html
{
  font-size: 1vw;
  font-weight: 400;  
}
body
{
  background-color: var(--black);
  color: var(--white);   
  font-family: "Manrope", sans-serif;
  padding:0; margin:0;
}

/*
 Calendar header with week days 
*/
div.cal_week.header
{
  height:auto;
}
div.cal_week.header > div
{
  flex:1 0 10%;
  text-align: center;
}

/*
 Common calendar styles for all media queries
*/

div.cal_day
{
  position:relative;
  overflow: hidden;  
}
div.cal_cell
{
  box-sizing: border-box;
  display:flex;
  flex-flow: column nowrap;
  gap:1px;
  border: 1px solid #292929;
  border-radius: 0.2rem;
}

div.cal_day.today
{
  border-width:2px;
  border-color: var(--white);
  border-style: solid;
  box-sizing: border-box;
  border-radius: 0.2rem;
}

div.cal_event
{
  flex: 1 0 0;
  width:100%;
  height:10%;
  background-color:var(--magenta);
  font-size:16px;
  padding:0.26em;
  box-sizing:border-box;
  border-radius: 0.2rem;
  border: 1px solid var(--magenta);
  cursor: pointer;
  position:relative;
}

div.cal_event p
{
  margin:0;
  padding:0;
  font-weight: 400;  
}
div.cal_event span.reservations
{
  position:absolute;right:5px;bottom:5px;
}

div.cal_details
{
  position:fixed;
  left:0; right:0; top:0; bottom:0;
  display:none;
  z-index:100;
}
  div.cal_details.visible
  {
    display:block;
  }
  div.cal_details .veil
  {
    position:absolute;
    left:0; right:0; top:0; bottom:0;
    background-color:rgba(0, 0, 0, 0.8);  
  }

div.cal_detail
{
  position: fixed;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap:15px;
  background:var(--grey);
  padding:40px;
  box-sizing: border-box;
  border-radius: 0.2rem;
  display:none;
}
  div.cal_detail.visible
  {
    display:flex;
  }

  div.cal_detail > div
  {
    display:flex;
    flex-direction: row;
    gap:15px;
    font-size:18px;
    flex-wrap:nowrap;
  }
    div.cal_detail > div span
    {
      display:block;
    }
  div.cal_detail h2
  {
    margin-top:0;
  }
  div.cal_detail a, div.cal_detail a:visited, div.cal_detail a:hover
  {
    color:white;
  }
  div.cal_detail i.lni
  {
    position:relative;
    top:0.2em;
  }
  div.cal_detail .closeBtn
  {
    position:absolute;
    right:10px;
    top:10px;
    cursor:pointer;
  }

/*
  Mobile version
*/
@media (max-width: 1023px)
{
  div.cal
  {
    width:95%;
    font-size:0.8rem;
    margin: 0 auto;
  }

  div.cal_week.header
  {
    display:none;
  }

  div.cal_week
  {
    margin:5rem auto 0 auto;
  }

  div.cal_month
  {
    height:0;
    position:relative;
    padding-left:8rem;
    width:100%;
    box-sizing: content-box;
    overflow:visible;
  }
    div.cal_month span.month
    {
      position:absolute; 
      left:50%;
      font-size:14px;     
      display:block;
      background-color:var(--black);
      padding:0.25rem 3rem;
      box-sizing: border-box;
      z-index:2;
      transform:translate(-50%,-50%);
      border:1px solid var(--grey);
      border-radius:0.2rem;
    }

  div.date
  {
    position:absolute;
    left:0; top:1.5rem;
    width:10rem;
    height:10rem;
    font-weight: normal;
    text-align:center;
  }
    div.date .month
    {
      display:none;
    }
    div.date span.day
    {
      display:block;
      font-size: 4rem;
      line-height: 4rem;
    }
    div.date span.weekday
    {
      display:block;
      font-size: 2rem;
      line-height: 2rem;
      text-transform: uppercase;
    }

  div.cal_day
  {
    width:100%;
    border: none;
    position:relative;
    overflow: hidden;
    margin-bottom:2px;
  }
  div.cal_day.today div.cal_cell
  {
    margin-left:calc(10rem - 2px);
  }

  div.cal_cell
  {
    min-height:10rem;
    margin-left:10rem;
    box-sizing: border-box;
  }

  div.cal_detail
  {
    width: 80%;
    left: 10%;
    top: 50%;  
  }

}

/*
  Tablet version
*/  
@media (min-width: 1024px)
{
  div.cal
  {
    width:95%;  
    margin:3rem auto;
    max-width:1600px;
  }

  div.cal_week
  {
    display:flex;
    margin:0 auto;
    flex-flow: row nowrap;  
    justify-content: flex-start;
    gap: 0px;
    height: 8rem;
  }
  div.cal_month
  {
    display: none;
  }
  div.cal_day
  {
    flex: 1 0 10% ;

  }  
  div.cal_cell
  {
    width:100%;
    height:100%;
  }
  div.cal_event:first-child
  {
    padding-top:1.3rem;
  }  
  div.date
  {
    position:absolute;
    right:0.26rem; 
    top:0.12rem;
    font-size:1.2rem;
    font-weight: bold;
  }
  div.date span.weekday
  {
    display:none;
  }
  div.cal_event
  {
    font-size:1rem;
  }

  div.cal_detail
  {
    width: 50%;
    left: 25%;
    top: 50%;  
  }
}

/*
 Desktop version
*/ 
@media (min-width: 1680px)
{
  div.cal
  {
    width:80%;  
  }
  div.cal_event
  {
    font-size:15px;
  }
  div.cal_week
  {
    height:7em;
  }
  div.date
  {
    font-size:18px;
  }
}


  div.cal_event.cyan { background-color:var(--cyan); border-color: var(--cyan);}
  div.cal_event.magenta { background-color:var(--magenta); border-color: var(--magenta)}
  div.cal_event.yellow { background-color:var(--yellow); border-color: var(--yellow)}
  div.cal_event.red { background-color:var(--red); border-color: var(--red)}
  div.cal_event.green { background-color:var(--green); border-color: var(--green)}
  div.cal_event.blue { background-color:var(--blue); border-color: var(--blue)}
  div.cal_event.grey { background-color:var(--grey); border-color: var(--grey)}
  div.cal_event.lightgrey { background-color:var(--lightgrey); border-color: var(--lightgrey); color:black}