/*
-----------------------------------------
HEADER
Sidhuvudet (källans .navbar): fast, 60 px högt, svart med 80 % täckning. Logotyp till vänster, menyn till höger från 1085 px.
Under 1085 px döljs menyn bakom hamburgarknappen (main.js) och sökfältet ligger som en egen rad i menyn.
-----------------------------------------
*/

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  block-size: var(--size-header-height);
  background: var(--surface-nav);
  backdrop-filter: blur(5px);
}

.site-header__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-inline: var(--space-15);
}

/* Under 1085 px följer logotypen sidans kant (källans navbar-header har marginal -15 px) */
.site-header__brand {
  display: block;
  block-size: var(--size-header-height);
  padding: var(--space-10);
  margin-inline-start: calc(-1 * var(--space-15));
}

.site-header__logo {
  block-size: 2.7rem;
  inline-size: auto;
  margin-block-start: 0.6rem;
}

@media (width >= 768px) {
  .site-header__logo {
    block-size: auto;
    max-block-size: 100%;
    margin-block-start: 0;
  }
}

/* Hamburgarknappen (Bootstrap navbar-toggle) */
.menu-toggle {
  position: relative;
  inline-size: var(--size-toggle-width);
  block-size: var(--size-toggle-height);
  margin-block: 1.3rem;
  padding: 0.9rem var(--space-10);
  border: var(--border-width) solid var(--color-grey-dd);
  border-radius: var(--radius-toggle);
  background: transparent;
}

.menu-toggle:hover,
.menu-toggle:focus {
  background: var(--color-grey-dd);
}

.menu-toggle__bar {
  display: block;
  inline-size: 2.2rem;
  block-size: 0.2rem;
  border-radius: 0.1rem;
  background: var(--color-grey-88);
}

.menu-toggle__bar + .menu-toggle__bar {
  margin-block-start: 0.4rem;
}

/* Menyn */
.site-menu {
  position: absolute;
  inset: var(--size-header-height) 0 auto;
  display: none;
  background: var(--surface-nav);
  box-shadow: inset 0 1px 0 var(--color-white-20);
}

.site-menu.is-open {
  display: block;
}

.site-menu__list {
  margin-block: 0.9rem;
}

.site-menu__link {
  display: block;
  padding: var(--space-10) var(--space-15);
  font: var(--font-nav);
  font-size: var(--fs-12);
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  color: var(--text-inverse);
}

.site-menu__link:hover,
.site-menu__link:focus {
  background: transparent;
  color: var(--color-grey-dd);
  text-decoration: none;
}

.site-menu__link[aria-current] {
  background: var(--surface-nav-active);
  color: var(--text-inverse);
}

@media (width >= 768px) {
  .site-menu__link {
    font-size: var(--fs-10);
  }
}

/* Sökraden i menyn: ligger inne i menyn under 1085 px, rullar ut under ikonen från 1085 px */
.site-search {
  padding: var(--space-10) var(--space-15);
}

.site-search__toggle {
  display: none;
  padding: 1.8rem var(--space-15);
  border: 0;
  background: transparent;
  color: var(--text-link);
  font-size: var(--fs-16);
  line-height: 2.4rem;
}

.site-search__toggle:hover,
.site-search__toggle:focus {
  color: var(--color-orange-soft);
}

.site-search__form {
  position: relative;
  display: block;
}

.site-search__input {
  inline-size: 100%;
  margin-block: 0.4rem;
  padding: 0.8rem 3.4rem 0.8rem 1.1rem;
  border: 0;
  border-radius: var(--radius-search);
  background: var(--color-white-20);
  color: var(--text-inverse);
  font-size: var(--fs-12);
  font-style: italic;
  line-height: 2rem;
}

.site-search__input::placeholder {
  color: var(--text-inverse);
  font-style: italic;
  opacity: 1;
}

.site-search__submit {
  position: absolute;
  inset-block-start: 1.2rem;
  inset-inline-end: 0.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-link);
  font-size: var(--fs-14);
  line-height: 2rem;
}

@media (width >= 1085px) {
  .menu-toggle {
    display: none;
  }

  .site-menu {
    position: static;
    display: block;
    background: none;
    box-shadow: none;
  }

  .site-menu__list {
    display: flex;
    margin: 0;
  }

  .site-menu__link {
    padding-block: 1.8rem;
  }

  .site-menu__item--search {
    position: relative;
  }

  .site-search {
    padding: 0;
  }

  .site-search__toggle {
    display: block;
  }

  .site-search__form {
    position: absolute;
    inset-block-start: var(--size-header-height);
    inset-inline-end: 0;
    display: none;
    inline-size: var(--size-search-width);
    block-size: 4.8rem;
    padding-inline: var(--space-15);
    background: var(--surface-nav);
  }

  .site-search.is-open .site-search__form {
    display: block;
  }

  .site-search__input {
    inline-size: var(--size-search-input);
    background: var(--surface-search);
  }

  .site-search__submit {
    inset-inline-end: 2rem;
  }
}