/** Tillämpa stilen på sidhuvud-elementet  **/

header {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0;
  margin: 0;
}

/** Gäller logotypen **/
.logo {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid var(--brand-divider);
  background-color: var(--brand-surface);
  box-sizing: border-box;
}

/** Gäller navigeringsfältet **/
#nav {
  width: var(--main-w-mobile);
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 0.4rem;
}

/** Gäller navigerinsrutterna **/
#nav ul {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 0.4rem;
}

#nav ul li {
  width: 100%;
  background-color: var(--brand-primary);
  padding: 0.4rem;
  border-radius: 10px 0;
}

/** Ändra stilen på rutterna när de pekas på med musen **/
#nav ul li:hover {
  width: 100%;
  background-color: var(--brand-secondary);
  padding: 0.4rem;
  border-radius: 10px 0;
}

#nav ul li a {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  color: var(--brand-on-primary);
  gap: 0.3rem;
  font-weight: 700;
}

/** Visa en lämplig ikon på vänstra sidan av ett länk-element i navigeringsfältet **/
#study::before {
  display: flex;
  justify-content: center;
  align-items: center;
  content: url('../assets/study.svg');
}

#job::before {
  display: flex;
  justify-content: center;
  align-items: center;
  content: url('../assets/career.svg');
}

#info::before {
  display: flex;
  justify-content: center;
  align-items: center;
  content: url('../assets/info.svg');
}

/** Surfplatta version **/
@media screen and (min-width: 700px) {
  #nav {
    width: var(--main-w-tablet);
  }
}

/** Dator version **/
@media screen and (min-width: 1200px) {
  #nav {
    width: var(--main-w-desktop);
  }
}