/* ============================================================
   VIMAB HEADER — frontend.css
   Lyft från mockups/assets/css/components.css rader 11-296
   plus tokens från mockups/assets/css/tokens.css.
   Plus nya klasser för sticky/hidden, mobile-footer, external.
   ============================================================ */


/* ---- Tokens (scopade till .vm-header för att inte krocka) ---- */
.vm-header,
.vm-mobile-overlay,
.vm-search-overlay {
  --vm-darkblue: #073555;
  --vm-darker: #052944;
  --vm-yellow: #FDC600;
  --vm-yellow-dark: #c79b00;
  --vm-text-dark: rgba(255, 255, 255, 0.92);
  --vm-text-dark-mute: rgba(255, 255, 255, 0.65);
  --vm-line-dark: rgba(255, 255, 255, 0.08);
  --vm-surface-darker-soft: rgba(0, 0, 0, 0.20);
  --vm-yellow-30: rgba(253, 198, 0, 0.30);
  --vm-r-sm: 4px;
  --vm-r-md: 8px;
  --vm-s-3: 0.75rem;
  --vm-s-4: 1rem;
  --vm-s-5: 1.5rem;
  --vm-s-7: 3rem;
  --vm-t-fast: 150ms ease;
  --vm-t-normal: 280ms ease;
  --vm-z-nav: 100;
  --vm-z-overlay: 1000;
  --vm-z-modal: 2000;
}


/* ---- Header ---- */
.vm-header {
  background: var(--vm-darkblue);
  color: var(--vm-text-dark);
  position: sticky;
  top: 0;
  z-index: var(--vm-z-nav);
  border-bottom: 1px solid var(--vm-line-dark);
  transition: transform 200ms ease;
}
.vm-header.is-sticky {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.vm-header.is-hidden {
  transform: translateY(-100%);
}


/* ---- Utility-rad ---- */
.vm-utility {
  background: var(--vm-surface-darker-soft);
  font-size: 0.78rem;
  color: var(--vm-text-dark-mute);
}
/* Utility-raden: backgrounden går utfallande (fullbredd) eftersom .vm-utility
   själv inte har max-width. Innehållet följer samma bredd som .vm-mainnav,
   så länkar linjerar med logga + meny nedanför. Se kommentaren vid
   .vm-mainnav .container för hur max-width räknas fram. */
.vm-utility .container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--vm-s-5);
  max-width: calc(var(--vm-mainnav-max-width, 1400px) + 3rem);
  margin: 0 auto;
  padding: 0.4rem 1.5rem;
  box-sizing: border-box;
}
.vm-utility a {
  color: inherit;
  transition: color var(--vm-t-fast);
  text-decoration: none;
}
.vm-utility a:hover { color: var(--vm-yellow); }

/* Utility-meny (redigerbar via menyplats vimab_header_utility) */
.vm-utility-menu {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
}
.vm-utility-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
/* Prick-separator mellan länkarna */
.vm-utility-menu .vm-utility-link + .vm-utility-link::before {
  content: "·";
  margin: 0 0.6rem;
  color: rgba(255, 255, 255, 0.25);
}
.vm-utility-ext { font-size: 0.85em; opacity: 0.8; }

/* Mobil: göm de inline-länkarna i den trånga toppraden — de visas i
   burger-menyn istället (.vm-mobile-utility). Sök-knappen blir kvar i toppraden. */
@media (max-width: 1100px) {
  .vm-utility-menu { display: none; }
}

/* Sekundär meny inuti mobil-overlayen */
.vm-mobile-utility {
  display: flex;
  flex-direction: column;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--vm-line-dark);
}
.vm-mobile-utility .vm-utility-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0;
  color: var(--vm-text-dark-mute);
  text-decoration: none;
  font-size: 1.05rem;
}
.vm-mobile-utility .vm-utility-link:hover,
.vm-mobile-utility .vm-utility-link:focus-visible { color: var(--vm-yellow); }

.vm-utility-search {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.7rem;
  background: none;
  border: 0;
  cursor: pointer;
}
.vm-utility-search svg { width: 13px; height: 13px; }


/* ---- Huvudraden ---- */
/* Huvudmenyns max-bredd. Värdet anger INNEHÅLLSBREDDEN (logga till CTA),
   och ska matcha Beaver Builders globala radbredd så att headern linjerar
   med allt sidinnehåll. BB:s row_width är 1400px (BB > Tools > Global
   Settings), därav fallbacken nedan.

   Eftersom containern är border-box äter paddingen inåt, så de 2 x 1.5rem
   läggs till ovanpå innehållsbredden via calc() — annars blir headern
   3rem smalare än innehållet.

   1) --vm-mainnav-max-width (sätts inline om redaktören valt eget värde)
   2) 1400px                 (fallback = BB:s radbredd)

   OBS: tidigare låg --ast-content-width med som mellansteg. Temat är
   cotheme-child, inte Astra, så variabeln definieras aldrig — och om den
   någon gång dök upp skulle den tysta tillbaka headern till 1240px. */
.vm-mainnav .container {
  display: flex;
  align-items: center;
  max-width: calc(var(--vm-mainnav-max-width, 1400px) + 3rem);
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  box-sizing: border-box;
  gap: var(--vm-s-5);
  padding-top: var(--vm-s-3);
  padding-bottom: var(--vm-s-3);
}

.vm-logo {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  flex-shrink: 0;
  text-decoration: none;
}
.vm-logo img,
.vm-logo svg {
  height: var(--vm-logo-height, 38px);
  width: auto;
}

.vm-nav {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.vm-nav-item {
  position: relative;
}

.vm-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: var(--vm-s-3) var(--vm-s-3);
  font-size: var(--vm-nav-link-size, 15px);
  font-weight: 500;
  color: var(--vm-text-dark);
  white-space: nowrap;
  /* Sträckad linje under texten (inte under hela boxen) — text-decoration
     följer textens bredd. !important slår Astras menylänk-styling. */
  text-decoration: underline dashed transparent !important;
  text-underline-offset: 7px;
  text-decoration-thickness: 1px !important;
  text-decoration-skip-ink: none;
  transition: color var(--vm-t-fast), text-decoration-color 350ms ease-out;
}
.vm-nav-link:hover {
  color: var(--vm-yellow);
  text-decoration-color: var(--vm-yellow) !important;
}
.vm-nav-link[aria-current="page"] {
  color: var(--vm-yellow);
  text-decoration-color: var(--vm-yellow) !important;
}

.vm-nav-link::after {
  content: "";
  display: none;
}
.vm-nav-item--has-mega .vm-nav-link::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.6;
  transition: transform var(--vm-t-fast);
}
.vm-nav-item:hover .vm-nav-link::after,
.vm-nav-item.is-open .vm-nav-link::after,
.vm-nav-item:focus-within .vm-nav-link::after {
  transform: rotate(-135deg) translateY(2px);
}


/* ---- Mega-meny (desktop) — kompakt lista (variant A från meny-lab):
   en kolumn, bara rubriker, smal panel vänsterställd under menypunkten ---- */
.vm-mega {
  position: absolute;
  top: 100%;
  left: 0;
  transform: translateY(8px);
  min-width: 280px;
  background: var(--vm-mega-bg, var(--vm-darker));
  border: 1px solid var(--vm-line-dark);
  border-radius: var(--vm-r-md);
  padding: var(--vm-s-2, 0.5rem) 0;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--vm-t-fast), transform var(--vm-t-fast), visibility 0s linear var(--vm-t-fast);
}
/* Högerställd panel för menypunkter nära högerkanten (t.ex. Om oss) */
.vm-mega--right {
  left: auto;
  right: 0;
}
.vm-nav-item:hover .vm-mega,
.vm-nav-item.is-open .vm-mega,
.vm-nav-item:focus-within .vm-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.vm-mega-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vm-s-4);
  padding: 0.65rem var(--vm-s-4) 0.65rem calc(var(--vm-s-4) + 2px);
  font-size: var(--vm-mega-title-size, 14px);
  font-weight: 500;
  color: var(--vm-text-dark);
  white-space: nowrap;
  border-left: 2px solid transparent;
  transition: all var(--vm-t-fast);
  text-decoration: none;
}
.vm-mega-link:hover {
  color: var(--vm-mega-title-color, var(--vm-yellow));
  border-left-color: var(--vm-mega-title-color, var(--vm-yellow));
  background: rgba(255, 255, 255, 0.03);
}

/* Pil-prickar som tonar in vid hover */
.vm-mega-link .arrow-dots {
  display: inline-flex;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--vm-t-fast);
}
.vm-mega-link .arrow-dots span {
  width: 3px;
  height: 3px;
  background: var(--vm-mega-title-color, var(--vm-yellow));
  border-radius: 50%;
}
.vm-mega-link .arrow-dots span:nth-child(1) { opacity: 0.4; }
.vm-mega-link .arrow-dots span:nth-child(2) { opacity: 0.7; }

/* Hög-specificitets-override för att slå tema-CSS som sätter länk-color
   på sajt-bredd (t.ex. CoTheme/Astra). Specificitet: 0,3,1 + !important. */
.vm-header .vm-mainnav .vm-mega-link,
.vm-mobile-overlay .vm-mobile-nav .vm-mega-link {
  color: var(--vm-text-dark) !important;
  font-size: var(--vm-mega-title-size, 14px) !important;
}
.vm-header .vm-mainnav .vm-mega-link:hover,
.vm-mobile-overlay .vm-mobile-nav .vm-mega-link:hover {
  color: var(--vm-mega-title-color, var(--vm-yellow)) !important;
}

.vm-mega-link.is-external .vm-mega-link-tag {
  display: inline;
  font-size: 0.85em;
  color: var(--vm-yellow);
  font-style: normal;
}

/* Samlande länk i botten av panelen */
.vm-mega-foot {
  margin-top: var(--vm-s-2, 0.5rem);
  padding: var(--vm-s-2, 0.5rem) var(--vm-s-4) var(--vm-s-2, 0.5rem);
  border-top: 1px solid var(--vm-line-dark);
}
.vm-mega-foot .btn-tertiary {
  color: var(--vm-yellow);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.vm-mega-foot .arrow-dots {
  display: inline-flex;
  gap: 2px;
}
.vm-mega-foot .arrow-dots span {
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
}
.vm-mega-foot .arrow-dots span:nth-child(1) { opacity: 0.4; }
.vm-mega-foot .arrow-dots span:nth-child(2) { opacity: 0.7; }


/* ---- CTA-knapp i nav ---- */
.vm-nav-cta {
  background: var(--vm-yellow);
  color: var(--vm-darkblue);
  padding: 0.6rem 1.1rem;
  border-radius: var(--vm-r-md);
  font-weight: 700;
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: transform var(--vm-t-fast);
  text-decoration: none;
}
.vm-nav-cta:hover { transform: translateY(-1px); }

/* Lite extra luft mellan sista menylänken och CTA-knappen */
.vm-nav-item--cta {
  margin-left: 0.9rem;
}


/* ---- Mobile burger (visas under 1100px) ---- */
.vm-burger {
  display: none;
  width: 36px;
  height: 36px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  margin-left: auto;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.vm-burger span {
  display: block;
  height: 2px;
  background: white;
  border-radius: 2px;
  transition: transform var(--vm-t-fast), opacity var(--vm-t-fast);
}


/* ---- Mobile overlay ---- */
.vm-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--vm-darkblue);
  flex-direction: column;
  /* Topp-padding var 3rem. Stängknappen är absolut positionerad och behöver
     inget flöde, så utrymmet gick bara åt att putta ner menyn. */
  padding: var(--vm-s-5) var(--vm-s-5) var(--vm-s-5);
  overflow-y: auto;
  z-index: var(--vm-z-overlay);
}
/* Body-class istället för sibling-selektor — robust mot BB:s wrapper-divar
   som annars kan bryta sibling-relationen mellan .vm-header och .vm-mobile-overlay. */
body.has-mobile-open .vm-mobile-overlay {
  display: flex;
}

/* Stängknapp uppe i höger hörn av mobilmenyn. */
.vm-mobile-close {
  position: absolute;
  top: var(--vm-s-4);
  right: var(--vm-s-4);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--vm-line-dark);
  border-radius: 50%;
  color: var(--vm-text-dark);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  z-index: 1;
  transition: border-color var(--vm-t-fast), color var(--vm-t-fast);
}
.vm-mobile-close:hover {
  border-color: var(--vm-yellow);
  color: var(--vm-yellow);
}
.vm-mobile-close span {
  display: block;
  margin-top: -3px; /* optisk centrering av × */
}

.vm-mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Tightare än desktop-avståndet: utility-menyn nedanför bidrar redan med
     margin-top + padding-top, så 3rem här blev dubbelt tomrum. */
  margin-bottom: var(--vm-s-4);
}

/* CTA-menyobjektet (klassen vm-nav-cta i WP-menyn) hör hemma i desktop-headern.
   I mobilmenyn dyker samma knapp upp mitt i navlistan, indragen av sitt
   margin-left, samtidigt som mobil-footern redan har en "Kontakta oss"-knapp.
   Vi visar bara footerns — den ligger där man förväntar sig den. */
.vm-mobile-nav .vm-nav-item--cta {
  display: none;
}
.vm-mobile-nav .vm-nav-link {
  /* 0.55rem ger 46px tryckyta — under 0.5rem hamnar vi under 44px, som är
     minsta rekommenderade träffyta för fingrar. */
  padding: 0.55rem 0;
  font-size: 1.1rem;
}
/* Mobil: tillåt radbrytning på långa rubriker i accordionen */
.vm-mobile-overlay .vm-mega-link {
  white-space: normal;
}

/* Mobil-mega: tvinga static-layout med !important för att nuke:a desktop-CSS:ens
   position:absolute + left:50% + transform:translateX(-50%) som annars puttar
   elementet ~165px utanför viewport. Cachad/inärvd tema-CSS kan annars vinna. */
.vm-mobile-nav .vm-mega--mobile {
  display: none;
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  translate: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  box-shadow: none;
  background: transparent;
  border: 0;
  padding: 0 0 var(--vm-s-4) var(--vm-s-4);
  opacity: 1;
  visibility: visible;
}
.vm-mobile-nav .vm-nav-item.is-open .vm-mega--mobile {
  display: block !important;
}

.vm-mobile-footer {
  margin-top: auto;
  padding-top: var(--vm-s-5);
  border-top: 1px solid var(--vm-line-dark);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vm-s-3);
}
/* Etiketten över direktkontakt-länkarna. Var tidigare en <h3>, se frontend.php.
   line-height sätts explicit: som rubrik ärvde den temats rubrik-line-height
   (1.2), och utan den här raden hade bytet till <p> ändrat radhöjden. */
.vm-mobile-footer-rubrik {
  margin: 0 0 var(--vm-s-3) 0;
  font-size: 0.78rem;
  line-height: 1.2;
  color: var(--vm-text-dark-mute);
  font-family: "JetBrains Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.vm-mobile-tel,
.vm-mobile-mail {
  color: var(--vm-text-dark);
  font-size: 1.05rem;
  text-decoration: none;
}
.vm-mobile-tel:hover,
.vm-mobile-mail:hover { color: var(--vm-yellow); }
.vm-mobile-cta {
  margin-top: var(--vm-s-3);
}
.vm-mobile-logo {
  margin-top: var(--vm-s-5);
  height: 32px;
  width: auto;
  opacity: 0.7;
}


/* ---- Sök-overlay ---- */
.vm-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 53, 85, 0.96);
  z-index: var(--vm-z-modal);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 18vh;
}
.vm-search-overlay.is-open { display: flex; }
.vm-search-box {
  width: 100%;
  max-width: 700px;
  padding: 0 var(--vm-s-5);
}
/* Scopat under .vm-search-overlay (två klasser) så det slår temats
   input[type="search"]-stil, som annars ger vit bakgrund + vit text och
   webbläsarens egna sök-dekorationer. */
.vm-search-overlay .vm-search-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--vm-yellow);
  border-radius: 0;
  color: #fff;
  caret-color: var(--vm-yellow);
  font-size: 2rem;
  font-weight: 300;
  padding: var(--vm-s-3) 0;
  outline: none;
  box-shadow: none;
}
.vm-search-overlay .vm-search-input::placeholder { color: rgba(255, 255, 255, 0.4); }
/* Ta bort webbläsarens inbyggda rensa-kryss i type="search". */
.vm-search-overlay .vm-search-input::-webkit-search-cancel-button,
.vm-search-overlay .vm-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
.vm-search-hint {
  margin-top: var(--vm-s-3);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  color: var(--vm-text-dark-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vm-search-close {
  position: absolute;
  top: var(--vm-s-5);
  right: var(--vm-s-5);
  /* Centrera krysset och nollställ temats knapp-padding så cirkeln blir helt
     rund. Utan box-sizing/padding-reset töjer temats button-padding bredden. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
  color: white;
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 1px solid var(--vm-yellow-30);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}


/* ---- Screen-reader text ---- */
.vm-mobile-tel .screen-reader-text,
.vm-mobile-mail .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ---- Responsiv: under 1100px ---- */
@media (max-width: 1100px) {
  .vm-burger { display: flex; }
  .vm-nav { display: none; }   /* Desktop-nav göms — mobil-nav i overlay tar över */
}


/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .vm-header,
  .vm-nav-link,
  .vm-mega,
  .vm-mega-link,
  .vm-nav-cta,
  .vm-burger span {
    transition: none !important;
  }
}