/* =========================================================
   KalkylKoll — Header UI (header only)
   - Desktop: logo + search + categories dropdown
   - Mobile/tablet: hamburger drawer + search overlay
   - Autosuggest panel styling
   ========================================================= */

/* Tokens (header) */
:root{
  --kk-ink:#0f172a;
  --kk-muted:#64748b;
  --kk-soft:#f7f8fb;
  --kk-stroke:#e5e7eb;
  --kk-header-bg:#ffffff;
  --kk-panel-border:#e5e7eb;
  --kk-drawer-bg:#f6f7fb;

  --kk-accent:#111827;
  --kk-accent-rgb:17 24 39;

  --kk-drawer-w: min(86vw, 520px);
  --kk-drawer-dur: .24s;
  --kk-drawer-ease: cubic-bezier(.2,.8,.2,1);
}

/* Basic safety */
.site-header *{ box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
.site-header a{ color:inherit; text-decoration:none; }
.site-header button{ font:inherit; }

/* Sticky header base */
.site-header{
  background:var(--kk-header-bg);
  border-bottom:1px solid var(--kk-panel-border);
  position:sticky; top:0; z-index:100;
  box-shadow:0 1px 4px rgba(15,23,42,.05);
  overflow:visible;
}
.site-header__inner{
  max-width:1200px;
  margin:0 auto;
  padding:8px 20px;
  display:flex;
  align-items:center;
  gap:20px;
}

/* Logo */
.logo{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  flex:0 0 auto;
}
.logo-text{
  display:inline-block;
  color:var(--kk-ink);
  font-weight:740;
  letter-spacing:-.02em;
  line-height:1.1;
  font-size:clamp(1.6rem, 1.1rem + 1vw, 2.1rem);
}

/* Desktop search */
.search{
  width:100%;
  position:relative;
}
.search--desktop{
  flex:1 1 auto;
  min-width:320px;
}
.search__input{
  width:100%;
  height:38px;
  border:1px solid color-mix(in oklab, var(--kk-accent) 18%, #cfd8e3 62%);
  background:#fff;
  border-radius:999px;
  padding:0 16px 0 40px;
  font:inherit;
  font-size:.95rem;
  caret-color:rgb(var(--kk-accent-rgb));
  box-shadow:none;
  background-image:none;
}
.search__input::placeholder{ color:#9ca3af; }
.search__input:focus{
  outline:2px solid rgba(var(--kk-accent-rgb), .20);
  outline-offset:2px;
  border-color: color-mix(in oklab, var(--kk-accent) 26%, #cbd5e1 60%);
}

/* Search icon */
.search__icon{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  pointer-events:none;
  color:var(--kk-muted);
}
.search__icon svg{ width:18px; height:18px; display:block; }

/* Autosuggest panel */
.search__suggestions{
  position:absolute;
  left:0; right:0;
  top:calc(100% + 6px);
  background:#fff;
  border:1px solid var(--kk-stroke);
  border-radius:12px;
  box-shadow:0 18px 44px rgba(0,0,0,.12);
  display:none;
  max-height:340px;
  overflow:auto;
  z-index:120;
}
.search__suggestions mark{
  background:#fff59d;
  border-radius:3px;
  padding:0 1px;
}
.search__item{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  cursor:pointer;
}
.search__item:hover,
.search__item.is-active{
  background:var(--kk-soft);
}
.search__title{ font-weight:740; min-width:0; }
.search__meta{
  font-size:.9rem;
  color:#374151;
  opacity:.95;
  min-width:84px;
  text-align:right;
  font-weight:640;
  white-space:nowrap;
}
.search__meta::before{ content:"#"; opacity:.6; margin-right:2px; }

/* Desktop categories dropdown */
.header-calcdrop-wrapper{
  position:relative;
  flex:0 0 auto;
}
.header-calcdrop{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:38px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid #cbd5e1;
  background:#ffffff;
  font-size:.9rem;
  font-weight:600;
  line-height:1;
  color:#111827;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .08s ease;
}
.header-calcdrop__chevron{
  font-size:.7rem;
  margin-top:1px;
  transition:transform .12s ease, opacity .12s ease;
}
.header-calcdrop:hover{
  background:#f9fafb;
  border-color:#94a3b8;
  box-shadow:0 3px 6px rgba(15,23,42,.10);
  transform:translateY(-1px);
}
.header-calcdrop:active{
  transform:translateY(0);
  box-shadow:0 1px 3px rgba(15,23,42,.16);
}
.header-calcdrop[aria-expanded="true"] .header-calcdrop__chevron{
  transform:translateY(1px) rotate(180deg);
}

/* Dropdown card */
.header-calcdrop-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:240px;
  border-radius:14px;
  border:1px solid var(--kk-panel-border);
  background:#ffffff;
  box-shadow:0 20px 45px rgba(15,23,42,.16);
  padding:6px 0;
  z-index:130;
}
.header-calcdrop-menu[hidden]{ display:none; }
.header-calcdrop-menu a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 16px;
  text-decoration:none;
  color:#111827;
  font-size:.94rem;
  font-weight:500;
}
.header-calcdrop-menu a span:first-child{
  width:24px;
  text-align:center;
  font-size:1.15rem;
}
.header-calcdrop-menu a:hover{ background:#f9fafb; }

/* =========================================================
   MOBILE + TABLETS (same rules as your TPD: <=1200 or coarse)
   ========================================================= */
@media (max-width:1200px), (hover:none) and (pointer:coarse){
  button,input,select,textarea{ font-size:16px; }

  .site-header .search,
  .header-calcdrop-wrapper{
    display:none !important;
  }

  .site-header{
    background:#f5f7fb !important;
    border-bottom:1px solid var(--kk-panel-border);
    box-shadow:0 1px 6px rgba(0,0,0,.04);
    overflow:visible;
  }
  .site-header__inner{
    max-width:100%;
    margin:0;
    padding:12px 12px 8px;
    display:grid;
    grid-template-columns:auto auto 1fr auto; /* menu | logo | space | search */
    align-items:center;
    column-gap:14px;
  }

  .m-nav-toggle{
    appearance:none;
    background:none;
    border:0;
    padding:6px;
    display:inline-flex;
    flex-direction:column;
    gap:4px;
    grid-column:1;
  }
  .m-nav-toggle__bar{
    width:20px;
    height:2px;
    background:#111827;
    border-radius:2px;
    display:block;
  }

  .m-search-toggle{
    appearance:none;
    background:none;
    border:0;
    padding:6px;
    color:#111827;
    display:inline-flex;
    align-items:center;
    grid-column:4;
    justify-self:flex-end;
    margin-left:6px;
  }

  .logo{
    justify-self:start;
    grid-column:2;
  }
  .logo-text{
    font-weight:720;
    letter-spacing:-.01em;
    font-size:clamp(1.2rem, 1rem + 2vw, 1.6rem);
    line-height:1.1;
  }

  :root{
    --kk-m-search-h:48px;
    --kk-m-search-top:12px;
  }

  .m-search[hidden]{ display:none !important; }
  .m-search{
    position:absolute;
    left:calc(env(safe-area-inset-left,0px) + 16px);
    right:calc(env(safe-area-inset-right,0px) + 16px);
    top:calc(env(safe-area-inset-top,0px) + var(--kk-m-search-top));
    z-index:200;
    display:none;
  }
  body.search-open .m-search{ display:block; }

  body.search-open .site-header{
    background:#f5f7fb !important;
    border-bottom:0 !important;
    box-shadow:none !important;
    padding-bottom: calc(var(--kk-m-search-h) + var(--kk-m-search-top) + 8px);
  }

  .m-search__back{
    position:absolute;
    left:10px;
    top:50%;
    transform:translateY(-50%);
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    border:0;
    color:#111827;
  }

  .m-search__input{
    display:block;
    width:100%;
    height:var(--kk-m-search-h);
    border-radius:999px;
    padding-left:46px;
    padding-right:52px;
    border:1px solid rgba(17,24,39,.16);
    background:#fff;
    color:#0f172a;
    caret-color: rgb(var(--kk-accent-rgb));
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2364788B' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;
    background-size:22px 22px;
    outline:none;
    transition:border-color .15s ease;
    -webkit-appearance:none;
  }
  .m-search__input::placeholder{ color:#6b7280; }
  .m-search__input:focus{
    border-color: color-mix(in oklab, var(--kk-accent) 28%, #cbd5e1 60%);
    box-shadow:none;
    outline:0;
  }

  .m-search__suggestions{
    position:absolute;
    left:calc(env(safe-area-inset-left,0px) + 16px);
    right:calc(env(safe-area-inset-right,0px) + 16px);
    top:calc(env(safe-area-inset-top,0px) + var(--kk-m-search-top) + var(--kk-m-search-h) + 6px);
    max-height:55vh;
    overflow:auto;
    background:#fff;
    border:1px solid rgba(17,24,39,.12);
    border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    z-index:210;
  }

  body.search-open main,
  body.search-open footer,
  body.search-open .drawer{
    pointer-events:none;
  }
}

/* HARD STOP: real desktop only */
@media (min-width:1201px) and (hover:hover) and (pointer:fine){
  .m-nav-toggle,
  .m-search-toggle,
  .m-search{
    display:none !important;
    visibility:hidden !important;
  }
  .site-header .search{ display:block !important; }
}

/* =========================================================
   MOBILE DRAWER
   ========================================================= */
.drawer{
  position:fixed;
  inset:0;
  z-index:180;
  pointer-events:none;
  display:block;
}
.drawer:not([hidden]){ pointer-events:auto; }

.drawer__backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.45);
  backdrop-filter: blur(2px);
  opacity:0;
  transition: opacity var(--kk-drawer-dur) var(--kk-drawer-ease);
  touch-action:none;
}
.drawer:not([hidden]) .drawer__backdrop{ opacity:1; }

.drawer__sheet{
  position:absolute;
  top:0; left:0; height:100%;
  width:var(--kk-drawer-w);
  background:var(--kk-drawer-bg) !important;
  border-right:1px solid var(--kk-panel-border) !important;
  border-top-right-radius:22px;
  border-bottom-right-radius:22px;
  box-shadow:0 18px 40px rgba(15,23,42,.22);
  transform: translateX(-102%);
  transition: transform var(--kk-drawer-dur) var(--kk-drawer-ease);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  will-change: transform;
  backface-visibility: hidden;
  contain: layout paint style;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 18px 18px;
}
.drawer__sheet.is-open{ transform: translateX(0); }

/* Top row with title + close */
.drawer__toprow{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin:0 0 10px 0;
  padding:0 0 10px 0;
  border-bottom:1px solid var(--kk-panel-border) !important;
}
.drawer__toprow::before{
  content:"Kategorier";
  font-weight:800;
  font-size:1.35rem;
  letter-spacing:-.01em;
  color:var(--kk-ink);
}

/* Close button */
.drawer__close{
  position:absolute;
  top:calc(env(safe-area-inset-top,0px) + 12px);
  right:10px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  background:#ffffff;
  border:1px solid var(--kk-panel-border) !important;
  border-radius:999px;
  font-size:18px;
  line-height:1;
  box-shadow:0 6px 18px rgba(15,23,42,.16);
}

/* Visually hide original title but keep for aria-labelledby */
.drawer__title{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.drawer__scroll{
  flex:1 1 auto;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:10px 0 12px;
  background:transparent !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.drawer__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}
.drawer__list a{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:52px;
  padding:12px 14px;
  background:#fff;
  border:1px solid var(--kk-panel-border);
  border-radius:14px;
  color:var(--kk-ink);
  font-weight:700;
  box-shadow:0 4px 16px rgba(15,23,42,.10);
  position:relative;
}
.drawer__list a::after{
  content:"›";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  font-weight:800;
  opacity:.45;
}
.drawer__list a:hover{
  background:#f9fafb;
  border-color:#e7ebf0;
}
.drawer__list a:active{ transform:translateY(1px); }

/* Prevent background scroll when drawer/search open */
body.no-scroll{ overflow:hidden; touch-action:none; }

/* If your page uses .desktop-only helper */
.desktop-only{ display:none; }
@media (min-width:721px){ .desktop-only{ display:block; } }