/* =====================================================================
   ZAAI — desktopnavigation.
   Länkraden ligger centrerad på sidan, loggan till vänster och knapparna
   till höger — men allt ligger i samma flöde i stället för att länkraden
   är absolut centrerad. Absolut centrering vet inget om knapparna och la
   sig ovanpå dem så fort länkarna blev för många (bugg 2026-09-03).
   Endast desktop/tablet (>= 768px). Mobilen har sin egen meny.
   ===================================================================== */

@media (min-width: 768px) {

  #hero-nav .nav-container {
    max-width: 1320px;
    justify-content: space-between;
    padding-left: 32px;
    padding-right: 24px;
  }

  #hero-nav.scrolled .nav-container {
    max-width: 980px;
    padding-left: 20px;
    padding-right: 16px;
  }

  /* Loggan och knapparna tar lika stor andel av sidorna, så länkraden
     hamnar mitt på sidan utan att kunna lägga sig ovanpå något. */
  #hero-nav .nav-logo-link { flex: 1 1 0; min-width: 0; }

  #hero-nav .nav-links-list {
    position: static;
    left: auto;
    transform: none;
    flex: 0 1 auto;
    min-width: 0;
    justify-content: center;
    margin: 0 16px;
    gap: 0;
  }

  /* Behållaren är kapad till 1320px, så länkraden får inte mer plats bara för
     att fönstret är bredare — luften måste räcka på 1320 oavsett skärm.
     Satoshi laddas inte på sajten, så navtexten sätts med olika reservtypsnitt
     på olika datorer och blir olika bred. Med 12px padding låg marginalen till
     knapparna på 16px, vilket räckte här men inte på Mirzas maskin (menyn la
     sig över "Boka ett möte"/"Logga in"). 9px ger ~80px marginal i stället. */
  #hero-nav .nav-links-list > li > a,
  #hero-nav .nav-links-list .nav-dropdown-trigger {
    padding: 8px 9px;
    font-size: 13.5px;
  }

  /* Knapparna hålls längst ut till höger */
  #hero-nav .nav-actions {
    flex: 1 1 0;
    justify-content: flex-end;
    margin-left: 0;
  }

  /* Panelen hänger under sitt eget ord, vänsterankrad som på gsap.com,
     istället för centrerad (som annars kan hamna utanför kanten när
     ordet ligger längst till vänster). */
  #hero-nav .nav-has-dropdown .nav-dropdown-panel {
    left: 0;
    right: auto;
    transform: scale(.96);
    transform-origin: top left;
  }

  #hero-nav .nav-has-dropdown.open .nav-dropdown-panel {
    transform: scale(1);
  }
}

/* Smalare desktop: dra ihop luften innan något börjar trängas */
@media (min-width: 768px) and (max-width: 1279px) {
  #hero-nav .nav-container { padding-left: 20px; padding-right: 16px; }
  #hero-nav .nav-links-list { margin: 0 10px; }
  #hero-nav .nav-links-list > li > a,
  #hero-nav .nav-links-list .nav-dropdown-trigger { padding: 8px 7px; font-size: 13px; }
  #hero-nav .nav-logo-img { height: 76px; }
  #hero-nav.scrolled .nav-logo-img { height: 62px; }
}

/* Ankare för sektionsmenyerna på om oss / integrationer / bloggen —
   fixerad topprad får inte lägga sig över rubriken man hoppar till. */
#allt-hos-ett-bolag, #det-som-driver-oss, #resultat, #grundarna, #kontakt,
#saknar-system, #int-grid, #int-toolbar, #featured-slot, #blog-filters,
#blog-grid, #article-body, #article-sources, #related-grid {
  scroll-margin-top: 120px;
}

@media (min-width: 768px) {

  /* När sidan scrollas krymper toppraden och de sekundära flikarna
     fälls ihop, så bara de viktigaste ligger kvar. Undantag: den flik
     som är den sida man står på (den som bär undermenyn) — den stannar. */
  /* :not(.nav-has-dropdown) är viktigt — overflow:hidden på en flik som
     bär en undermeny klipper bort panelen som hänger under den. */
  #hero-nav .nav-links-list > li.nav-secondary:not(.nav-has-dropdown) {
    max-width: 220px;
    overflow: hidden;
    opacity: 1;
    transition: max-width .35s cubic-bezier(.16, 1, .3, 1),
                opacity .22s ease;
  }

  #hero-nav.scrolled .nav-links-list > li.nav-secondary:not(.nav-has-dropdown) {
    max-width: 0;
    opacity: 0;
    pointer-events: none;
  }
}