/* header.css — fixed + shrink on scroll + mobile hamburger (LEFT drawer)
   + hamburger LEFT + Lidhja.net text in header + Home icon inside drawer (black SVG)
*/

/* ensure hidden works */
[hidden]{ display:none !important; }

:root{
  --lhH: 64px;
  --lhHsmall: 52px;
}

/* ===== Header shell ===== */
.lh-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:999;
  height:var(--lhH);
  display:flex;
  align-items:center;

  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-bottom: 1px solid var(--border, #e6e8ee);
  transition: height .18s ease, box-shadow .18s ease, background .18s ease;
}

.lh-header.is-small{
  height:var(--lhHsmall);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 24px rgba(16,24,40,.06);
}

.lh-inner{
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* spacer: JS will set exact height; fallback */
.lh-header-spacer{ height: var(--lhH); }

/* ===== Left area (hamburger + site name) ===== */
.lh-left{
  display:flex;
  align-items:center;
  gap:12px;
}

.lh-site{
  font:800 16px/1 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#111827;
  text-decoration:none;
  letter-spacing:-.01em;
}

/* ===== Desktop nav ===== */
.lh-nav{
  display:flex;
  gap:8px;
  align-items:center;
}

.lh-link{
  text-decoration:none;
  color: var(--muted, #667085);
  font:600 13px/1 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease, padding .18s ease;
}

.lh-link:hover{
  background:#f2f4f7;
  color:#344054;
}

.lh-link.is-active{
  background:#111827;
  border-color:#111827;
  color:#fff;
}

/* shrink effect: slightly tighter pills */
.lh-header.is-small .lh-link{
  padding:8px 11px;
}

/* ===== Hamburger (3 lines) ===== */
.lh-burger{
  display:none; /* only on mobile */
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid var(--border, #e6e8ee);
  background: rgba(255,255,255,.9);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  touch-action: manipulation;
}

.lh-burger-lines{
  width:18px;
  height:2px;
  background:#111827; /* middle line */
  border-radius:2px;
  display:block;
  position:relative;
}

.lh-burger-lines::before,
.lh-burger-lines::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:2px;
  background:#111827;
  border-radius:2px;
}

.lh-burger-lines::before{ top:-6px; }
.lh-burger-lines::after{ top: 6px; }

/* ===== Overlay + Drawer (LEFT) ===== */
.lh-overlay{
  position:fixed;
  inset:0;
  z-index:998;
  background: rgba(16,24,40,.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.lh-drawer{
  position:fixed;
  top:0;
  left:0;              /* LEFT */
  right:auto;
  height:100vh;
  width:min(86vw, 340px);
  z-index:9999;

  background:#fff;
  border-right:1px solid var(--border, #e6e8ee);
  box-shadow: 18px 0 40px rgba(16,24,40,.14);

  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.lh-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 4px 10px;
  border-bottom:1px solid var(--border, #e6e8ee);
}

/* Home icon inside drawer (modern black SVG) */
.lh-home-icon{
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid var(--border,#e6e8ee);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#111827;
  background:#fff;
  text-decoration:none;
  touch-action: manipulation;
}

.lh-home-icon svg{
  width:20px;
  height:20px;
}

.lh-drawer-close{
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid var(--border, #e6e8ee);
  background:#fff;
  cursor:pointer;
  font:700 16px/1 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  touch-action: manipulation;
}

.lh-drawer-nav{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-top:6px;
}

.lh-drawer-link{
  text-decoration:none;
  color: var(--text, #0b1220);
  font:700 14px/1 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--border, #e6e8ee);
  background:#fff;
}

.lh-drawer-link:hover{
  background:#f8fafc;
}

.lh-drawer-link.is-active{
  background:#111827;
  border-color:#111827;
  color:#fff;
}

/* lock scroll when open */
html.lh-lock,
html.lh-lock body{
  overflow:hidden;
}

/* ===== Mobile breakpoint ===== */
@media (max-width: 720px){
  .lh-nav{ display:none; }
  .lh-burger{ display:inline-flex; }
}

/* Optional: hide site text on very small screens */
@media (max-width: 360px){
  .lh-site{ font-size:14px; }
}

.lh-nav{
  display:flex;
  align-items:center;
  gap:4px;
}

.lh-home-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  padding:8px 10px;
}

.lh-home-svg{
  width:18px;
  height:18px;
  display:block;
}

@media (max-width: 920px){
  .lh-nav{
    display:none;
  }
}