@import "slovenscina-elements.scss";

body {
  background: $white;
}

header {
  position:fixed;
  top:0;
  width:100%;
  height:4rem;
  background:$blue;
  z-index: 1000000;
  box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.2);
}

header {
  .logo {
    display: inline-block;
    padding:0.5rem 1.5rem;
    img {
      height:3rem;
    }
  }
  .menu-items {
    float:right;
    padding: 1.5rem 1.5rem;
    display: inline-block;
    a {
      margin-left:2rem;
      display: inline-block;
      color:white;
      text-decoration: none;
    }
  }
}

.tab-nav {
  margin-top:2rem;
  border-bottom:1px solid $grey-dark;
  a {
    position:relative;
    top:1px;
    display: inline-block;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 1.125rem;
    padding: 0.25rem 2rem;
    text-decoration: none;
    color: $grey-dark;
    transition: color 0.3s ease-out;
    &.active,&:hover {
      color:$blue;
      border-bottom: 4px solid $blue;
    }
  }
}

h1.title {
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.75rem;
  margin:0;
  color: $blue;
}
p.subtitle {
  font-size: 14px;
  line-height: 150%;
  margin-top:0.5rem;
}


/* Style The Dropdown Button */
.dropbtn {
  color: white;
  line-height:4rem;
  border: none;
  cursor: pointer;
  background:none;
  padding:0 1rem;
  img {
    position:relative;
    top:0.75rem;
  }
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  margin-right:1rem;
  float:right;
  display: inline-block;
  position:relative;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  right:0;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content {
  a {
    color: $grey-dark;
    padding: 0.5rem 1rem;
    text-decoration: none;
    display: block;
    &:hover {
      background-color: #f1f1f1;
      cursor:pointer;
    }
  }
  hr {
    margin-top:0;
    margin-bottom:0;
    border-top: 1px solid $grey-border;
  }
}


/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background:rgba(0,0,0,0.2);
}