/* CSS for the header */
 /* The header orientates on the school website of brg-judenburg.ac.at */

 /* prepare everything for full-width */
 body, header, main {
    margin: 0px;
    padding: 0px;
    font-family: Roboto, sans-serif;
    color: #54595F;
 }

 main {
    padding: 0px 30px;
 }

 /* header is full width */
 /* header {
    margin-bottom: 30px;
 } */

 /* Flex-Container for all elements */
 #headerwrapper {
   height: 100%;
   margin: 0px;
   padding-right: 30px;
   background-image: url('../images/links_1.svg'), url('../images/Oben_mitte.svg');
   background-position: center left, top center;
   background-size: contain, max(6%, 50px);
   background-repeat: no-repeat;
   display: grid;
   grid-template-areas:   "logo logo2 loggedin"
                        "logo logo2 menu";
   grid-template-columns: max-content auto 1fr;
   align-items: stretch;
 }

 /* BRG-Logo on the left - about a third on big screen */
 #logo {
   margin-left: 30px;
   min-width: 200px;
   background-image: url('../images/Logo-Unesco-HD1transparent1.png');
   background-repeat: no-repeat;
   background-position: center left;
   background-size: contain;
   grid-area: logo;
 }

  /* BRG-Logo on the left - about a third on big screen */
 #logo-workshop {
   margin-left: 30px;
   min-width: 150px;
   background-image: url('../images/Logo3.jpg');
   background-repeat: no-repeat;
   background-position: center left;
   background-size: contain;
   grid-area: logo2;
 }


/* logged in message */
#loggedinmessage {
   grid-area: loggedin;
   text-align: end;
   padding-right: 20px;
   padding-top: 30px;
   letter-spacing: 0.1em;
}

#loggedinmessage p {
   padding: 0px;
   margin: 0px;
}

 /* typical horizontal menu */
 nav {
    text-align: right;
    letter-spacing: 0.1em;  /* similar look to normal homepage */
    grid-area: menu;
 }
header nav ul {
    list-style-type: none;
    margin: 0px;
    text-align: right;
 }

 nav li { 
    display: inline-block;
 }

 nav a {
    display: block;
    padding: 10px 20px;
    border-bottom: white solid 2px;
    transition: border-bottom 0.3s, color 0.3s;
    text-decoration: none;
    color: #54595F;
 }

 nav a:hover {
    color: #EC5B57;
    border-bottom: #EC5B57 solid 2px;
    transition: border-bottom 0.3s, color 0.3s;
 }

 nav .dropdown {
   position: relative;
   display: inline-block;
 }
 
 nav .dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   padding: 12px 16px;
   z-index: 1;
 }
 
nav .dropdown-content a{
   text-align: left;
 }

nav .icon {
   display: none;
   position: relative;
}

.icon-burger {
   background: url('/images/burger-simple.svg');
   background-size: cover;
   width: 20px;
   height: 20px;
   display: block;
   transition: transform 0.5s, opacity 2s;
}

.icon-close {
   background: url('/images/burger-close.svg');
   background-size: contain;
   display: block;
   position: absolute;
   top: 10px;
   width: 20px;
   height: 20px;
   background-repeat: no-repeat;
   opacity: 0;
   transition: transform 0.5s, opacity 0.5s;

}

 a.fill-div {
   display: block;
   height: 100%;
   width: 100%;
   text-decoration: none;
}

.no-touch-device{
   display: block;
}

.touch-device-only {
   display: none;
}

@media (hover: none) and (pointer: coarse){
   .touch-device-only {
      display: block;
   }

   .no-touch-device {
      display: none;
   }

   .showdropdown .dropdown-content {
      display: block;
   }
}

@media screen and (max-width: 1000px) {
   #logo {
      background-size: 100%;
      overflow: visible;
      padding-right: 30px;
      margin-right: -30px;
   }
 }

@media screen and (max-width: 700px){
   #headerwrapper {
      grid-template-areas:   "logo"
                              "loggedin"
                              "menu";
      align-content: end;
      align-items: end;
   }

   #loggedinmessage {
      padding-top: 0px;
   }

   #logo {
      padding:0px;
      margin-right: 20px;
      min-height: 50px;
      background-size: contain;
      background-position: right;
      margin-right: 0px;
   }

   header nav {
      position: relative;
      min-height: 45.5px;
   }
   
   header nav .dropdown{
      display: block;
   }

   header nav li { 
      display: block;
      width: fit-content;
   }

   header nav ul {
      display: none;
      background-color: #f9f9f9;
      padding: 0px 20px;
   }

   header nav a.icon {
     float: right;
     display: block;
     padding-bottom: 8px;
   }
   .responsive .icon-burger {
      transform: rotate(180deg);
      opacity: 0;
      transition: all 0.5s;
   }
   .responsive .icon-close {
      transform: rotate(180deg);
      opacity: 1;
      transition: transform 0.5s, opacity 2s;
   }

   header nav.responsive {position: relative;}
   header nav.responsive a.icon {
     position: absolute;
     right: 0;
     top: 0;
   }

   header nav.responsive ul {
     display: block;
     float: right;
     position: absolute;
     right: 0px;
   }
 }