/* =========================
   Header (layout)
========================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--vcom-border);
}
body { padding-top: var(--vcom-header-h, 72px); }

/* ============================================
   TOPBAR – tydlig, centrerad och stabil
============================================ */
.topbar {
  background: #111;
  color: #fff;
  font-size: 0.95rem;           /* större, lättläst text */
  position: relative;
  z-index: 10;
}

.topbar__inner {
  display: flex;
  justify-content: center;      /* centrerar texten direkt */
  align-items: center;          /* vertikal centrering */
  height: 36px;                 /* ge topbaren fast höjd */
  padding: 0 1rem;
  position: relative;
}

.topbar__msg {
  font-weight: 500;
  text-align: center;
  width: 100%;
  pointer-events: none;
}


/* Se till att headern inte täcks */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--vcom-border);
}

/* Ge kroppen plats för hela headern inkl. topbar */
body {
  padding-top: var(--vcom-header-h, 100px); /* öka vid behov */
}


.mobile-toggle { order:-1; }
.branding      { order:0; }
.primary-nav   { order:1; flex:1 1 auto; }
.header-actions{ order:2; margin-left:auto; }

/* Branding */
.branding img { max-height:48px; width:auto; }
.site-title    { font-weight:700; text-decoration:none; color:inherit; }

/* Mobile toggle */
.mobile-toggle {
  display:none;
  font-size:1.6rem;
  background:transparent;
  border:0;
  cursor:pointer;
  line-height:1;
  color:#111;
}
.mobile-toggle svg { width:24px; height:24px; display:block; }
.mobile-toggle path { stroke:currentColor; }

@media (max-width:960px){
  .mobile-toggle { display:inline-flex; order:-1; }
}

/* Adminbar-kompensation (WP) */
@media (min-width:783px){ body.admin-bar .site-header { top:32px; } }
@media (max-width:782px){ body.admin-bar .site-header { top:46px; } }

/* =========================
   Search drawer (full overlay)
========================= */
.vc-drawer--full {
  position: fixed;
  inset: 0; /* täcker hela viewport */
  background: rgba(255,255,255,0.98);
  z-index: 2000;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  display: none; /* default hidden */
}
.vc-drawer--full[aria-hidden="false"] {
  display: block;
  transform: translateY(0);
}

/* Inre container */
.vc-drawer--full .vc-drawer__inner {
  max-width: 960px;
  margin: 120px auto;
  padding: 20px;
  position: relative;
}
.vc-drawer--full .vc-drawer__close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 2rem;
  background: none;
  border: none;
  cursor: pointer;
}

/* Ajax Search Pro i overlay */
.vc-drawer--full .asp_w_container {
  width: 100% !important;
  max-width: 100% !important;
}
.vc-drawer--full .asp_m {
  width: 100% !important;
  max-width: 100% !important;
  height: 50px !important;       /* lite större i overlay */
  border-radius: 8px !important;
}

/* =========================
   Search (desktop vs mobil)
========================= */
.desktop-only { display:block; }
.mobile-only  { display:none; }

@media (max-width:960px){
  .desktop-only { display:none; }
  .mobile-only  { display:block; }
}

/* Inline sökruta på desktop */
.header-search {
  flex: 1;
  max-width: 420px;
  margin-left: 2rem;
}
.header-search .asp_m {
  height: 40px !important;        /* smalare i header */
  border-radius: 6px !important;
}

/* Stäng-knappen i fullbredds-sök */
.vc-drawer--full .vc-drawer__close {
  position: fixed;       /* gör den oberoende av sökrutan */
  top: 30px;
  right: 40px;
  font-size: 2.2rem;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 2100;         /* högre än själva sökrutan */
  color: #333;           /* matcha din design */
  transition: opacity 0.2s ease;
}
.vc-drawer--full .vc-drawer__close:hover {
  opacity: 0.7;
}

/* Flytta ner huvudinnehållet så det inte hamnar bakom headern */
main.site-main,
#main-content,
#primary {
  margin-top: 20px; /* justera tills rubriken hamnar rätt */
}