/* ============================================================
   nav.css
   Delad navbar-stil: flytande "floating pill"-navbar + emblem-logga
   + fristaende SV-sprakvaljare. Ordagrann utbrytning av de nav-
   relaterade sektionerna ur facelift.css (som bara laddas pa
   index.html) sa att SAMMA navbar kan ateranvandas pa ovriga sidor
   UTAN att dra in index-specifika hero-/innehallsstilar.

   Innehall (kopierat verbatim fran css/facelift.css):
     1. Navbar-logga (emblem)          facelift.css rad 16-33
     7. Flytande pill-navbar           facelift.css rad 201-274
     8. Responsiv pill (hamburgare)    facelift.css rad 276-332
     9. Fristaende SV-sprakvaljare     facelift.css rad 334-423

   Medvetet UTELAMNAT: sektion 10 (scroll-driven hopfallning) som
   kraver js/nav-collapse.js -> pillen ar har ALLTID synlig. Inga
   header.section-hero-regler ingar -> noll paverkan pa sidornas hero.
   ============================================================ */

/* ------------------------------------------------------------
   1. Navbar-logga: sköld/droppe-emblemet i stället för den blå
   platshållar-ikonen. Diskret storlek (~36px) bredvid ordmärket
   "Vattentrygg". Emblemet (images/vattentrygg-emblem.png) är en
   beskuren, nedskalad version av hero-loggan (utan ordmärke/prickar).
   ------------------------------------------------------------ */
/* Scopat till .nav_logo så footerns .logo (som återanvänder samma
   .nav_logo-icon-klass) lämnas helt orörd. */
.nav_logo .nav_logo-icon {
  height: 2.25rem;        /* ~36px; .nav_logo är 2.5rem (40px) hög */
  width: auto;
  align-self: center;
}
.nav_logo .nav_logo-emblem {
  height: 100%;
  width: auto;
  display: block;
}

/* ============================================================
   7. Flytande pill-navbar ("floating hero menu")
   Navbaren tas ur flödet (position: fixed) och blir en svävande,
   frostad pill som följer med vid scroll. ALLT innehåll + i18n är
   orört (logga, länkar, dropdowns, språkväljare, CTA) — bara form,
   position och styling ändras. Ingen show/hide-JS: alltid synlig.

   Scope: bara denna sida. facelift.css laddas enbart på index.html,
   så övriga sidors navbar är oförändrad (flaggat till användaren).

   Struktur (oförändrad): .nav (wrapper, body-barn) > .nav_container
   (.w-nav, flex-raden) > .nav_left (logga) + .nav_right (länkar +
   button-group: CTA/SV/hamburgare). Vi fixerar .nav_container som
   pillen; .nav kollapsar då till 0 px höjd men behåller en hög
   stacking-context så hela navet ligger ovanpå sidan, och sidan
   scrollar under pillen.
   ============================================================ */

/* Wrapper: håll nav-lagret ovanpå allt sidinnehåll. .nav_container är
   nu fixed (ur flödet), så wrappern ska inte ta egen höjd i flödet —
   nollställ höjd/min-höjd så header.section börjar i toppen och
   clearancen styrs helt av hero-paddingen (sektion 5). */
.nav {
  z-index: 1000;
  height: 0;
  min-height: 0;
}

/* Själva pillen. */
.nav_container.w-nav {
  position: fixed;
  top: 18px;                  /* svävar en bit ned från skärmkanten */
  /* Höger-ankrad geometri (matematiskt pixel-identisk med den tidigare
     left:24/right:24/margin:auto/max-width:1280-modellen vid ALLA bredder),
     men uttryckt med KONKRET width som går att animera. Vänsterkanten
     härleds ur right+width (left:auto), så när pillen krymper i collapsed-
     läge (sektion 10) dras den ihop mot HÖGERkanten -> hamburgare i hörnet,
     inte mot mitten. Högerkanten pinnas vid pillens nuvarande högerkant:
       vw<=1328: right=24         -> högerkant = vw-24    (full bredd)
       vw>1328 : right=50vw-640px -> högerkant = vw/2+640 (kapad/centrerad)
     width: full bredd (100vw-48) tills max-width 1280 tar vid vid vw>1328. */
  left: auto;
  right: max(24px, 50vw - 640px);
  width: min(100vw - 48px, 1280px);
  margin: 0;
  z-index: 1000;
  padding: 0.75rem 1.75rem;   /* 12px 28px — luft för pill-ändarna */
  border-radius: 9999px;      /* äkta stadium/pill */
  background-color: rgba(255, 255, 255, 0.72);   /* ljus, lätt transparent */
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);     /* diskret frosted */
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);    /* lyfter från sidan */
  border: 1px solid rgba(22, 40, 80, 0.06);      /* hårfin navy-kant mot vitt */
  overflow: visible;          /* dropdowns måste kunna spilla ut nedåt */
  /* Mjuk hopfällning -> hamburgare (sektion 10). Bara width animeras här
     (billigt, ej reflow-hackigt); barnens opacity animeras i sektion 10.
     prefers-reduced-motion stänger av denna övergång (sektion 10). */
  transition: width 360ms cubic-bezier(0.16, 1, 0.3, 1),
              right 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dropdowns måste fortsätta fungera under den fixerade pillen:
   ankra varje dropdown-lista till SIN toggle (position: relative)
   och lägg listan ovanpå sidinnehållet (z-index över pillen). */
.nav_container.w-nav .nav_dropdown-menu.w-dropdown {
  position: relative;
}
.nav_container.w-nav .w-dropdown-list {
  z-index: 1001;
  /* Listan ankras under sin toggle, som sitter INNE i pillen. Skjut ned
     den så den klarar pillens nederkant och läser som ett eget svävande
     kort UNDER pillen (toggle-botten ~79px, pill-botten ~103px). */
  margin-top: 2.25rem;
}

/* ============================================================
   8. Pill-navbar: responsiv hopfällning (hamburgare <=991px)
   Webflow fäller .nav_menu (länkarna) till en overlay som
   hamburgaren öppnar, OCH stackar .button-group vertikalt
   (flex-direction:column) på smala skärmar. Den vertikala
   stacken sprängde pillen: nav_right blev ~115px hög, loggan
   sträcktes och CTA/SV/hamburgare hamnade på höjden -> pillen
   blev 141px hög och stack ut. Här hålls pill-innehållet som EN
   centrerad rad. På telefon (<=767px) komprimeras pillen så
   logga + CTA + SV + hamburgare ryms utan överspill.
   Innehåll/i18n orört — bara layout. Hamburgaren/overlay
   fungerar precis som i Webflow-grunden.
   ============================================================ */

/* <=991px (hamburgaren visas): tvinga tillbaka button-group till en
   horisontell, vertikalt centrerad rad (övermannar Webflows column-
   stack) och centrera pillens flex-rad så loggan inte sträcks. */
@media screen and (max-width: 991px) {
  .nav_container.w-nav {
    align-items: center;
  }
  .nav_container.w-nav .button-group {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0;
    width: auto;
  }
}

/* <=767px (telefon): kompakt pill. Mindre svävmarginal + padding och
   nedskalad CTA. Loggan visar bara EMBLEMET här — ordmärket
   "Vattentrygg" döljs för att ge plats, så de funktionella delarna
   (språkväljaren SV på en tvåspråkig sajt + CTA:n) får plats på en rad
   utan överspill ända ned till ~360px. Emblemet bär varumärket. i18n
   är orört (vi döljer bara elementet). FLAGGAT till användaren — vill
   man ha ordmärket kvar på telefon tas .nav_logo [data-brand-name]-
   regeln nedan bort (men då blir raden trång under ~390px). */
@media screen and (max-width: 767px) {
  .nav_container.w-nav {
    top: 12px;
    left: auto;                 /* höger-ankrad (matchar bas-modellen) */
    right: 12px;
    width: calc(100vw - 24px);  /* = tidigare left:12+right:12 (vänsterkant 12) */
    padding: 0.5rem 0.875rem;   /* 8px 14px — slimmad pill */
  }
  /* Endast emblem på telefon (ordmärket döljs visuellt, i18n orört). */
  .nav_logo [data-brand-name] {
    display: none;
  }
  /* Kompakt CTA så högerklustret ryms bredvid hamburgaren. */
  .nav_container.w-nav .button-group .button {
    padding: 9px 14px;
    font-size: 0.875rem;
  }
}

/* ============================================================
   9. Fristående språkväljare (SV) — fixerad uppe till höger.
   Den SERVADE switchern (public/lang-switcher.js) bygger en
   native <select id="lang-select"> i en .lang-switcher-wrapper.
   Den lades tidigare sist i .nav (pickSafeContainer) -> den lilla
   grå "SV"-fliken högst upp, avklippt. Nu monteras den i
   #lang-switcher-mount (body-nivå, UTANFÖR .nav) och selecten
   stylas till en diskret pill med egen chevron. Optionslistan är
   native (öppnas under knappen, aldrig avklippt). Endast
   startsidan. Språklogik/översättningar orörda — bara mountpunkt
   (public/lang-switcher.js) + styling.
   ============================================================ */
#lang-switcher-mount {
  position: absolute;         /* statiskt uppe i hornet -> scrollar bort med sidan (INTE fixed) */
  /* Uppe i hogra hornet, i niva med navbaren. Pa skarmar med sidogutter
     (vw >= ~1329px) hamnar SV snyggt vid pillens hogerkant. Pa smalare
     bredder ar pillen full-bredd och dess "Fa en offert"-CTA sitter i
     hornet -> guard-regeln nedan (max-width:1328) tuckar da SV strax under
     pillen sa att CTA:n aldrig tacks over. */
  top: 34px;                  /* i niva med navbaren (pill-topp 18px) */
  right: 24px;                /* indragen fran kanten, matchar pillens sidomarginal */
  z-index: 1100;              /* över hero; pillen ligger på 1000 */
}
#lang-switcher-mount .lang-switcher {
  margin: 0 !important;       /* nollställ inline-stilens margin-left:8px */
  display: inline-block;
}

/* Native <select> -> liten, diskret pill: frostat vitt, navy "SV",
   egen chevron till höger. */
#lang-switcher-mount #lang-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 8px 34px 8px 14px;   /* extra höger-padding ger plats åt chevron */
  font-family: "Work Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: #162850;
  background-color: rgba(255, 255, 255, 0.78);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20'%3E%3Cpath d='M5.8 7.5l4.2 4.2 4.2-4.2' fill='none' stroke='%23162850' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
#lang-switcher-mount #lang-select:hover {
  background-color: rgba(255, 255, 255, 0.94);
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
#lang-switcher-mount #lang-select:focus,
#lang-switcher-mount #lang-select:focus-visible {
  outline: none;
  border-color: rgba(31, 157, 217, 0.55);    /* vatten-accent vid fokus */
  box-shadow: 0 0 0 3px rgba(31, 157, 217, 0.16);
}
/* Läsbara rader i webbläsare som respekterar option-styling. */
#lang-switcher-mount #lang-select option {
  color: #162850;
  background-color: #ffffff;
}

/* Full-bredds-pill (ingen sidogutter, vw <= 1328px): pillen spanner nastan
   kant-till-kant och dess "Fa en offert"-CTA upptar hogra hornet, sa en
   corner-SV skulle tacka over den. Tucka da SV tatt under pillen, flush
   hoger. Fortfarande position:absolute -> scrollar bort med sidan. */
@media screen and (max-width: 1328px) {
  #lang-switcher-mount {
    top: 99px;
    right: 24px;
  }
}

/* Mobil: pillen är full-bredd och hero-rubriken börjar tätt under den
   (H1-topp ~116px, pill-botten ~78px -> bara ~38px glugg). En full-stor
   SV (34px) skulle nudda rubrikens övre högra hörn. Gör SV något kompaktare
   och lägg den i gluggen mellan pillen och rubriken: kollisionsfri mot både
   pill och rubriktext. Samma design, bara nedskalad för liten skärm. */
@media screen and (max-width: 767px) {
  #lang-switcher-mount {
    top: 84px;
    right: 16px;
  }
  #lang-switcher-mount #lang-select {
    padding: 6px 30px 6px 12px;
    font-size: 12px;
    background-position: right 10px center;
  }
}