/*
-----------------------------------------
SIDHUVUD (Figma: Sidhuvud)
1. Bred layout: logotyp till vänster, övre länkar och huvudmeny till höger
2. Under 1024 px: hamburgermeny och sidopanel (kräver JavaScript, annars ligger menyn under logotypen)
-----------------------------------------
*/

/* ---- Bred layout --------------------------------------------------------------- */

.site-header {
  background: var(--surface-page);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  min-block-size: var(--size-header-height);
}

.site-header__logo {
  display: block;
  flex: none;
}

.site-header__logo-img {
  inline-size: var(--size-logo-width);
  block-size: var(--size-logo-height);
  max-inline-size: none;
  object-fit: cover;
}

.menu-toggle,
.menu-close,
.site-menu__bar {
  display: none;
}

.site-menu__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-24);
}

.site-menu__top {
  display: flex;
  align-items: center;
  gap: var(--space-28);
}

.site-menu__link {
  font: var(--font-nav-secondary);
  color: var(--text-body);
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

.site-menu__actions {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.main-nav {
  display: flex;
  gap: var(--space-36);
  font: var(--font-nav-primary);
  color: var(--text-heading);
  text-transform: uppercase;
}

@media (hover: hover) {
  .main-nav__link:hover,
  .site-menu__link:hover {
    color: var(--text-accent);
  }
}

/* ---- Hamburgermeny och sidopanel ------------------------------------------------ */

html.menu-open {
  overflow: hidden;
}

@media (width < 64rem) {
  .site-header__inner {
    flex-wrap: wrap;
    padding-block: var(--space-16);
    min-block-size: 0;
  }

  .site-menu {
    flex-basis: 100%;
  }

  /* Med JavaScript ligger menyn i en panel utanför flödet: logotyp och menyknapp delar en rad som aldrig bryts, och logotypen krymper på smala skärmar (320 px) */
  .js .site-header__inner {
    flex-wrap: nowrap;
  }

  .site-header__logo {
    flex-shrink: 1;
    min-inline-size: 0;
  }

  .site-header__logo-img {
    max-inline-size: 100%;
    block-size: auto;
  }

  /* Utan JavaScript finns ingen panel: menyn ligger under logotypen */
  .site-menu__panel {
    align-items: stretch;
  }

  .site-menu__top {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-menu__actions {
    flex-wrap: wrap;
  }

  .main-nav {
    flex-direction: column;
    gap: var(--space-8);
  }

  .main-nav__link {
    display: block;
    padding-block: var(--space-8);
  }

  .js .menu-toggle {
    display: grid;
    place-items: center;
    inline-size: var(--size-tap-target);
    block-size: var(--size-tap-target);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-heading);
    cursor: pointer;
  }

  .menu-toggle__icon {
    inline-size: var(--size-menu-icon-width);
    block-size: var(--size-menu-icon-height);
    background:
      linear-gradient(currentColor, currentColor) top left / 100% var(--size-menu-icon-bar) no-repeat,
      linear-gradient(currentColor, currentColor) center left / 100% var(--size-menu-icon-bar) no-repeat,
      linear-gradient(currentColor, currentColor) bottom left / 100% var(--size-menu-icon-bar) no-repeat;
  }

  /* Sidopanelen glider in från höger över ett mörkt lager. Lagret är klickbart bara när menyn är öppen. */
  .js .site-menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    background: var(--surface-transparent);
    visibility: hidden;
    pointer-events: none;
    transition: background-color var(--duration-menu) var(--ease-standard), visibility 0s linear var(--duration-menu);
  }

  .js .site-menu.is-open {
    background: var(--color-overlay);
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .js .site-menu__panel {
    inline-size: min(var(--size-menu-drawer), 100%);
    block-size: 100%;
    margin-inline-start: auto;
    padding: var(--space-24);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--surface-page);
    transform: translateX(100%);
    transition: transform var(--duration-menu) var(--ease-standard);
  }

  .js .site-menu.is-open .site-menu__panel {
    transform: none;
  }

  .js .site-menu__bar {
    display: flex;
    justify-content: flex-end;
  }

  .menu-close {
    display: grid;
    place-items: center;
    inline-size: var(--size-tap-target);
    block-size: var(--size-tap-target);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-heading);
    cursor: pointer;
  }

  /* Krysset: två streck som ligger i samma cell och vrids */
  .menu-close::before,
  .menu-close::after {
    content: "";
    grid-area: 1 / 1;
    inline-size: var(--size-menu-icon-width);
    block-size: var(--size-menu-icon-bar);
    background: currentColor;
  }

  .menu-close::before {
    rotate: 45deg;
  }

  .menu-close::after {
    rotate: -45deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .site-menu,
  .js .site-menu__panel {
    transition: none;
  }
}