/* Ensure header controls have visible focus */
.iw-actions{display:flex;align-items:center;gap:14px}
.iw-actions .btn.btn--order{background:#222753;color:#fff;font-weight:700;box-shadow:0 4px 12px rgba(0,0,0,.25);}
.iw-actions .btn.btn--order:hover{background:#0B1429;text-decoration:none}
.iw-actions .btn.btn--order:active{transform:translateY(1px)}
@media (max-width:820px){
  .iw-actions .btn.btn--order{display:none}
}

.iw-burger:focus-visible,
.iw-close:focus-visible,
.iw-search-toggle:focus-visible,
.iw-actions .btn:focus-visible { outline: 2px solid var(--brand-turq); outline-offset: 2px; }

/* Burger */
.iw-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(255,255,255,.06) !important; color: var(--iw-header-text);
  border: 1px solid rgba(255,255,255,.28); cursor: pointer; padding: 0; line-height: 0;
  backdrop-filter: saturate(140%) blur(4px);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .06s ease, color .2s ease;
}
.iw-burger:hover { border-color: var(--brand-turq); background: rgba(255,255,255,.1) !important; box-shadow: 0 0 0 2px rgba(57,199,206,.22) inset; }
.iw-burger:active { transform: translateY(1px) scale(.99); }
/* When open, reflect state with brand color */
.iw-burger[aria-expanded="true"]{ color: var(--brand-pink); border-color: rgba(213,0,105,.65); background: rgba(213,0,105,.12) !important; box-shadow: 0 0 0 2px rgba(213,0,105,.18) inset; }
@media (min-width: 1024px) { .iw-burger { display: none; } }

/* Search toggle (icon button) */
.iw-search-toggle{
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,.06) !important; color: var(--iw-header-text);
  border: 1px solid rgba(255,255,255,.25); cursor: pointer; padding: 0; line-height: 0;
  backdrop-filter: saturate(140%) blur(4px);
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .06s ease, color .2s ease;
}
.iw-search-icon{
  width: 20px; height: 20px;
  display: inline-block;
  pointer-events: none;
  background: url('https://interwebsite.se/wp-content/uploads/magnifying-glass-search.svg') center/contain no-repeat;
  filter: invert(1) brightness(1.1);
}
.iw-search-toggle:hover{ border-color: var(--brand-turq); background: rgba(255,255,255,.1) !important; box-shadow: 0 0 0 2px rgba(57,199,206,.22) inset; }
.iw-search-toggle:active{ transform: translateY(1px) scale(.99); }
.iw-search-toggle[aria-expanded="true"]{ color: var(--brand-pink); border-color: rgba(213,0,105,.65); background: rgba(213,0,105,.12) !important; box-shadow: 0 0 0 2px rgba(213,0,105,.18) inset; }

/* Accessible burger bars that morph to an X when aria-expanded=true */
.iw-burger { padding: 0; }
.iw-burger-bars{ position:relative; width:30px; height:22px; display:inline-block; }
.iw-burger-bar{
  position:absolute; left:0; right:0; height:3px; background:currentColor; border-radius:1.5px;
  transform-origin:50% 50%;
  transition: transform .25s ease, opacity .2s ease, top .25s ease, bottom .25s ease;
  box-shadow: 0 0 1px rgba(0,0,0,.25);
}
/* Placering av linjer */
.iw-burger-bar:nth-child(1){ top:1px; }
.iw-burger-bar:nth-child(2){ top:50%; transform: translateY(-50%); }
.iw-burger-bar:nth-child(3){ bottom:1px; }

/* Öppen meny (aria-expanded="true") → morpha till X */
.iw-burger[aria-expanded="true"] .iw-burger-bar:nth-child(1){
  top:50%; transform:translateY(-50%) rotate(45deg);
}
.iw-burger[aria-expanded="true"] .iw-burger-bar:nth-child(2){
  opacity:0;
}
.iw-burger[aria-expanded="true"] .iw-burger-bar:nth-child(3){
  bottom:auto; top:50%; transform:translateY(-50%) rotate(-45deg);
}

/* Open state: thinner X lines for a crisper, iconic look */
.iw-burger[aria-expanded="true"] .iw-burger-bar{
  height: 2px;
  border-radius: 1px;
  box-shadow: none;
}

/* Robust rendering: use pseudo-elements for top/bottom, keep middle as the only child bar */
.iw-burger-bars > .iw-burger-bar{ display: none; }
.iw-burger-bars > .iw-burger-bar:nth-child(2){
  display: block;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 30px; height: 2px; background: currentColor; border-radius: 1px;
}
.iw-burger-bars::before,
.iw-burger-bars::after{
  content: ""; position: absolute; left: 50%; width: 30px; height: 2px; background: currentColor; border-radius: 1px;
  transform: translateX(-50%);
  transform-origin: 50% 50%;
  transition: transform .25s ease, opacity .2s ease, top .25s ease, bottom .25s ease;
}
.iw-burger-bars::before{ top: 1px; }
.iw-burger-bars::after{ bottom: 1px; }

/* Morph to X using pseudo-elements; hide middle on open */
.iw-burger[aria-expanded="true"] .iw-burger-bars::before{ top: 50%; transform: translate(-50%, -50%) rotate(45deg); }
.iw-burger[aria-expanded="true"] .iw-burger-bars::after{ bottom: auto; top: 50%; transform: translate(-50%, -50%) rotate(-45deg); }
.iw-burger[aria-expanded="true"] .iw-burger-bars > .iw-burger-bar:nth-child(2){ opacity: 0; }

/* Thin X lines on open (also apply to pseudo-elements) */
.iw-burger[aria-expanded="true"] .iw-burger-bars::before,
.iw-burger[aria-expanded="true"] .iw-burger-bars::after{
  height: 2px; border-radius: 1px; box-shadow: none;
}

/* Mobile ergonomics: keep some breathing room from screen edge */
@media (max-width: 1024px){
  .iw-header .iw-actions{ margin-right: calc(20px + env(safe-area-inset-right, 0px)); }
  .iw-header .iw-container{ padding-right: calc(26px + env(safe-area-inset-right, 0px)); }
}

/* Reduced motion: ingen rotation, bara fade */
@media (prefers-reduced-motion: reduce){
  .iw-burger-bar{ transition:none; }
  .iw-burger[aria-expanded="true"] .iw-burger-bar:nth-child(2){ opacity:0; }
}