/**
 * Header section
 * Modifier-klasser (väljs från DB): --border-1, --border-5, --transparent.
 * Depends: design/tokens.css
 */

.site-header {
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  /* Brand name, slogan, nav links — theme “header text”; fallback keeps legacy purple. */
  --_header-ink: var(--color-header-text, var(--color-purple));
  --header-font-brand: var(--text-base);
  --header-font-nav: var(--text-base);
  --header-font-slogan: var(--text-sm);
  --header-nav-color-light: color-mix(in srgb, var(--_header-ink) 62%, white);
  --header-nav-color: var(--header-nav-color-scrolled, var(--_header-ink));
  --header-nav-hover-color: var(--header-nav-hover-color-scrolled, var(--header-nav-color-light));
  --header-nav-active-color: var(
    --header-nav-active-color-scrolled,
    color-mix(in srgb, var(--_header-ink) 78%, black)
  );
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Border bottom – välj 1px, 5px eller 8px (lämna borta = ingen border) */
.site-header--border-1 {
  border-bottom: 1px solid var(--header-border-color, var(--color-border));
}

.site-header--border-5 {
  border-bottom: 5px solid var(--header-border-color, var(--color-border));
}

.site-header--border-8 {
  border-bottom: 8px solid var(--header-border-color, var(--color-border));
}

/* Transparent från start; får bakgrund när användaren scrollar (kräver header.js) */
.site-header--transparent {
  background-color: transparent;
  border-bottom: 1px solid transparent;
  --header-nav-color: var(--header-nav-color-transparent, var(--_header-ink));
  --header-nav-hover-color: var(--header-nav-hover-color-transparent, var(--header-nav-color-light));
  --header-nav-active-color: var(
    --header-nav-active-color-transparent,
    color-mix(in srgb, var(--_header-ink) 78%, black)
  );
}

.site-header--transparent.site-header--border-1 {
  border-bottom: 1px solid transparent;
}

.site-header--transparent.site-header--border-5 {
  border-bottom: 5px solid transparent;
}

.site-header--transparent.site-header--border-8 {
  border-bottom: 8px solid transparent;
}

.site-header--transparent.site-header--scrolled {
  border-bottom-color: var(--header-border-color, var(--color-border));
  --header-nav-color: var(--header-nav-color-scrolled, var(--_header-ink));
  --header-nav-hover-color: var(--header-nav-hover-color-scrolled, var(--header-nav-color-light));
  --header-nav-active-color: var(
    --header-nav-active-color-scrolled,
    color-mix(in srgb, var(--_header-ink) 78%, black)
  );
}

.site-header--transparent.site-header--scrolled.site-header--border-1 {
  border-bottom: 1px solid var(--header-border-color, var(--color-border));
}

.site-header--transparent.site-header--scrolled.site-header--border-5 {
  border-bottom: 5px solid var(--header-border-color, var(--color-border));
}

.site-header--transparent.site-header--scrolled.site-header--border-8 {
  border-bottom: 8px solid var(--header-border-color, var(--color-border));
}

.site-header__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-4) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.site-header__brand-divider {
  display: none;
  margin: 0 10px;
  color: color-mix(in srgb, var(--color-text) 48%, transparent);
  font-size: var(--text-base);
  line-height: 1;
}

.site-header__logo-img {
  display: block;
  height: 40px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  transition: filter 0.3s ease;
}

/* Transparent logo: hidden by default */
.site-header__logo-img--transparent {
  display: none;
}

/* Only swap logos when a transparent logo actually exists (class set by JS) */
.site-header--has-transparent-logo.site-header--transparent:not(.site-header--scrolled) .site-header__logo-img--transparent {
  display: block;
}

.site-header--has-transparent-logo.site-header--transparent:not(.site-header--scrolled) .site-header__logo-img:not(.site-header__logo-img--transparent) {
  display: none;
}

/* Filter fallback (used when no separate transparent logo is provided) */
.site-header--transparent:not(.site-header--scrolled) .site-header__logo-img {
  filter: var(--header-logo-filter-transparent, none);
}

.site-header__brand-text {
  display: none;
  font-size: var(--header-font-brand);
  font-weight: 600;
  color: var(--header-nav-color);
  text-decoration: none;
  white-space: nowrap;
}

.site-header__slogan {
  display: none;
  font-size: var(--header-font-slogan);
  color: var(--header-nav-color);
  white-space: nowrap;
}

.site-header__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.site-header__nav-list li {
  display: flex;
  align-items: center;
}

.site-header__nav-list a:not(.btn) {
  text-decoration: none;
  font-size: var(--header-font-nav);
  font-weight: 500;
}

.site-header {
  background-color: var(--color-bg);
}

.site-header.site-header--transparent {
  background-color: transparent;
}

.site-header--transparent.site-header--scrolled {
  background-color: var(--color-bg);
}

/* Reveal on scroll up: dölj när man scrollar nedåt, visa igen när man scrollar uppåt */
.site-header--reveal-up.site-header--hidden {
  transform: translateY(-100%);
}

.site-header__nav-list a:not(.btn) {
  color: var(--header-nav-color);
}

.site-header__nav-list a:not(.btn):hover {
  color: var(--header-nav-hover-color);
}

.site-header__nav-list a:not(.btn)[aria-current="page"],
.site-header__nav-list a:not(.btn).is-active {
  color: var(--header-nav-active-color);
  font-weight: 600;
}

.site-header__cart-link {
  display: inline-flex;
  align-items: center;
}

/* —— Hamburger / mobilmeny (aktiveras med .site-header--nav-mobile via header.js) —— */
.site-header__nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--header-nav-color);
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
}

.site-header__nav-toggle:focus-visible {
  outline: 2px solid var(--_header-ink);
  outline-offset: 2px;
}

.site-header__nav-toggle-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 6px;
  width: 24px;
}

/* Tre identiska streck (2px); inga rundningar som ger illusion av olika tjocklek */
.site-header__nav-toggle-bars span {
  display: block;
  flex: 0 0 2px;
  height: 2px;
  min-height: 2px;
  max-height: 2px;
  background: currentColor;
  border-radius: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* gap 6px + 2px streck → centrum 8px mellan yttre linjers mittpunkter → X */
.site-header--nav-open .site-header__nav-toggle-bars span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.site-header--nav-open .site-header__nav-toggle-bars span:nth-child(2) {
  opacity: 0;
}

.site-header--nav-open .site-header__nav-toggle-bars span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.site-header--nav-mobile .site-header__nav-toggle {
  display: inline-flex;
}

.site-header--nav-mobile .site-header__inner {
  position: relative;
  z-index: 1002;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

/* Utfälld meny: färger via --header-mobile-overlay-bg, --header-mobile-nav-color m.m. (site settings / inline på .site-header) */
.site-header--nav-mobile .site-header__nav {
  --header-mobile-link: var(--header-mobile-nav-color, var(--header-nav-color));
  --header-mobile-link-hover: var(--header-mobile-nav-hover-color, var(--header-nav-hover-color));
  --header-mobile-link-active: var(--header-mobile-nav-active-color, var(--header-nav-active-color));
  position: fixed;
  top: var(--site-header-overlay-top, 5rem);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  margin: 0;
  padding: var(--space-6) var(--content-gutter);
  overflow-y: auto;
  background-color: var(--header-mobile-overlay-bg, var(--color-bg));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-text) 12%, transparent);
}

/* Enkel regel: hela utfällda ytan finns bara efter klick (.site-header--nav-open sätts i header.js) – inget “spöke” vid resize */
.site-header--nav-mobile:not(.site-header--nav-open) .site-header__nav {
  display: none;
}

/* Öppen mobilmeny: hel skärm; header-raden döljs (logotyp m.m.); stäng-knappen flyttas upp fixed */
.site-header--nav-mobile.site-header--nav-open .site-header__nav {
  display: block;
  top: 0;
  padding-top: max(var(--space-8), calc(env(safe-area-inset-top, 0px) + 3.25rem));
  z-index: 1004;
}

.site-header--nav-mobile.site-header--nav-open .site-header__inner {
  height: 0;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  overflow: visible;
  gap: 0;
  border: none;
  background: transparent;
}

.site-header--nav-mobile.site-header--nav-open .site-header__logo {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header--nav-mobile.site-header--nav-open .site-header__nav-toggle {
  position: fixed;
  top: max(var(--space-4), env(safe-area-inset-top, 0px));
  right: var(--content-gutter);
  z-index: 1005;
  color: var(--header-mobile-toggle-color, var(--header-mobile-nav-color, var(--header-nav-color)));
}

.site-header--nav-mobile.site-header--nav-open {
  background: transparent;
  box-shadow: none;
}

.site-header--nav-mobile.site-header--nav-open.site-header--border-1,
.site-header--nav-mobile.site-header--nav-open.site-header--border-5,
.site-header--nav-mobile.site-header--nav-open.site-header--border-8 {
  border-bottom-color: transparent;
}

.site-header--nav-mobile.site-header--nav-open.site-header--transparent:not(.site-header--scrolled) {
  background-color: transparent;
}

.site-header--nav-mobile .site-header__nav-list {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--space-4);
  align-items: center;
  text-align: center;
}

.site-header--nav-mobile .site-header__nav-list a:not(.btn) {
  display: inline-block;
  padding: var(--space-2) 0;
  color: var(--header-mobile-link);
}

.site-header--nav-mobile .site-header__nav-list a:not(.btn):hover {
  color: var(--header-mobile-link-hover);
}

.site-header--nav-mobile .site-header__nav-list a:not(.btn)[aria-current="page"],
.site-header--nav-mobile .site-header__nav-list a:not(.btn).is-active {
  color: var(--header-mobile-link-active);
}

.site-header--nav-mobile[data-nav-mobile-align="left"] .site-header__nav-list {
  align-items: flex-start;
  text-align: left;
}

.site-header--nav-mobile[data-nav-mobile-align="right"] .site-header__nav-list {
  align-items: flex-end;
  text-align: right;
}

/* li med submeny behöver vara full bredd så att den dolda submenyn
   (display:block; max-height:0) inte påverkar li-bredden */
.site-header--nav-mobile .site-header__nav-list > li.has-submenu {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-header--nav-mobile[data-nav-mobile-align="left"] .site-header__nav-list > li.has-submenu {
  align-items: flex-start;
}

.site-header--nav-mobile[data-nav-mobile-align="right"] .site-header__nav-list > li.has-submenu {
  align-items: flex-end;
}

@media (prefers-reduced-motion: reduce) {
  .site-header__nav-toggle-bars span,
  .site-header--nav-mobile .site-header__subnav {
    transition: none;
  }
}

/* ===========================
   Submeny / dropdown
   =========================== */

.site-header__nav-list > li.has-submenu {
  position: relative;
}

.site-header__nav-parent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: var(--header-font-nav);
  font-weight: 500;
  color: var(--header-nav-color);
  user-select: none;
}

.site-header__nav-parent:hover {
  color: var(--header-nav-hover-color);
}

.site-header__nav-caret {
  font-size: 0.7em;
  opacity: 0.75;
  transition: transform 0.2s ease;
}

.site-header__subnav {
  list-style: none;
  margin: 0;
  padding: 0;
  --subnav-parent-gap: 14px;
}

/* Desktop: absolut dropdown på hover / focus-within */
.site-header:not(.site-header--nav-mobile) .site-header__subnav {
  position: absolute;
  top: calc(100% + var(--subnav-parent-gap));
  left: 0;
  right: auto;
  /* Tydlig minbredd, växer med innehåll; extra marginal i max så scrollbaren inte klämmer panelen */
  width: max-content;
  min-width: 240px;
  max-width: min(22rem, calc(100vw - 2.25rem));
  max-width: min(22rem, calc(100dvw - 2.25rem));
  padding: 12px 0;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-sm, 6px);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--color-text) 12%, transparent);
  display: none;
  z-index: 1001;
  box-sizing: border-box;
}

/* Brygga i gapet mellan förälder och undermeny (behåller hover) */
.site-header:not(.site-header--nav-mobile) .site-header__subnav::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--subnav-parent-gap);
}

/* Nära höger kant: fäll ut åt vänster (ankras mot förälderns högerkant) */
.site-header:not(.site-header--nav-mobile) .site-header__nav-list > li.has-submenu.has-submenu--subnav-end > .site-header__subnav {
  left: auto;
  right: 0;
}

.site-header:not(.site-header--nav-mobile) .site-header__nav-list > li.has-submenu:hover > .site-header__subnav,
.site-header:not(.site-header--nav-mobile) .site-header__nav-list > li.has-submenu:focus-within > .site-header__subnav {
  display: block;
}

.site-header:not(.site-header--nav-mobile) .site-header__subnav li {
  display: block;
}

.site-header:not(.site-header--nav-mobile) .site-header__subnav a {
  display: block;
  padding: 10px 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--header-font-nav);
}

/* Mobile: inline expand under parent — luft under förälder + mer luft mot högerkant */
.site-header--nav-mobile .site-header__subnav {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  max-height: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: max(2rem, env(safe-area-inset-right, 0px));
  padding-left: max(1rem, env(safe-area-inset-left, 0px));
  opacity: 0;
  transition:
    max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.22s ease,
    margin-top 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    padding-top 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    padding-bottom 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header--nav-mobile .site-header__nav-list > li.has-submenu.is-open > .site-header__subnav {
  max-height: 600px;
  margin-top: 12px;
  padding-top: 6px;
  padding-bottom: 10px;
  opacity: 1;
}

.site-header--nav-mobile .site-header__subnav li {
  justify-content: center;
}

.site-header--nav-mobile .site-header__subnav a:not(.btn) {
  padding: var(--space-2) 0;
  padding-right: 0.75rem;
  font-size: var(--header-font-nav);
  opacity: 0.9;
  color: var(--header-mobile-link);
}

.site-header--nav-mobile[data-nav-mobile-align="left"] .site-header__subnav a:not(.btn) {
  padding-right: 2rem;
}

.site-header--nav-mobile[data-nav-mobile-align="right"] .site-header__subnav a:not(.btn) {
  padding-left: 1rem;
  padding-right: 2.25rem;
}

.site-header--nav-mobile[data-nav-mobile-align="center"] .site-header__subnav a:not(.btn) {
  padding: var(--space-2) 2.35rem var(--space-2) 1.5rem;
}

.site-header--nav-mobile .site-header__nav-list > li.has-submenu.is-open > .site-header__nav-caret,
.site-header--nav-mobile .site-header__nav-list > li.has-submenu.is-open > a .site-header__nav-caret,
.site-header--nav-mobile .site-header__nav-list > li.has-submenu.is-open > .site-header__nav-parent .site-header__nav-caret {
  transform: rotate(180deg);
}