/* =========================================================================
   TZ_HEADER — boutiqueheader med mega-meny (pass 80, 2026-09-27)

   Markup:     inc/tz-header.php
   JS:         js/tz-header.js
   Brytpunkt:  TZ_HEADER_BRYTPUNKT i inc/tz-header.php. Den skrivs ut
               server-side som --tzmeny-brytpunkt och som data-brytpunkt på
               <header>, så CSS och JS läser samma värde och kan inte glida
               isär. Media-queries kan inte läsa en variabel, så gränsen står
               också litteralt nedan — ändras konstanten måste de fyra
               @media-raderna som är märkta BRYTPUNKT ändras med den.

   TYPSNITT — en mätt begränsning, inte ett tyckande:
   Poppins är självhostad i ENDAST vikt 600 och 700 (css/tz-typografi.css,
   fonts/poppins-600-*.woff2 och poppins-700-*.woff2). Pass 79 föreslog nav i
   Poppins 500. En deklarerad 500 hade renderats som 600 ändå, eftersom
   webbläsaren väljer närmaste tillgängliga vikt. Vi deklarerar därför 600, så
   koden säger det som faktiskt händer. Vill vi ha en äkta 500 krävs en ny
   fontfil — ett eget beslut, inte något som smygs in här.

   IKONER ritas som inline-SVG i PHP. Aldrig ETmodules: det teckensnittet
   laddas inte på alla sidtyper och glyfen renderas då som ett streck.
   ========================================================================= */

:root {
  --tzmeny-topprad-h:   34px;
  --tzmeny-huvudrad-h:  88px;
  --tzmeny-total-h:     122px;

  --tzmeny-maxbredd:    1400px;
  --tzmeny-sidpadding:  clamp(20px, 4vw, 48px);

  --tzmeny-vit:         #ffffff;
  --tzmeny-beige:       #f7f3ec;

  /* Toppradens bakgrund. Egen token och INTE --tzmeny-beige: den används
     också av mobil-drawerns fot, och ägarbeslutet i pass 92 gäller bara
     utility-raden. Samma gröna som den nya sidfoten. Huvudraden under är
     fortsatt vit. Kontrast mot rgba(26,26,26,.72) är 6,0:1 och mot den
     gröna hover-färgen 7,6:1 — båda över AA. */
  --tzmeny-topprad-bg:  #dbe6da;
  --tzmeny-text:        #1a1a1a;
  --tzmeny-text-svag:   rgba(26, 26, 26, 0.72);
  --tzmeny-gron:        #415321;
  --tzmeny-gron-ljus:   rgba(65, 83, 33, 0.12);
  --tzmeny-guld:        #8c6a38;
  --tzmeny-guld-hover:  #75592f;

  --tzmeny-font-rubrik: 'Poppins', Arial, sans-serif;
  --tzmeny-font-brod:   'Roboto', Arial, sans-serif;

  --tzmeny-ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --tzmeny-tap:         48px;
}

/* -------------------------------------------------------------------------
   1. Skalet
   ---------------------------------------------------------------------- */

.tzmeny {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 10000;
  background: var(--tzmeny-vit);
  font-family: var(--tzmeny-font-brod);
  color: var(--tzmeny-text);
  box-shadow: 0 1px 0 rgba(26, 26, 26, 0.08);
  transition: box-shadow 180ms var(--tzmeny-ease);
}

/* Inloggad: WordPress adminrad ligger fixerad överst och skjuter inte
   position:fixed nedåt av sig själv. */
body.admin-bar .tzmeny { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .tzmeny { top: 46px; }
}

.tzmeny.tzmeny-ar-skrollad { box-shadow: 0 6px 20px rgba(26, 26, 26, 0.08); }

/* Distansen har FAST höjd. Toppraden fälls bort vid skroll; utan en distans
   som står still hade innehållet hoppat 34 px. */
.tzmeny__distans { height: var(--tzmeny-total-h); }

.tzmeny__inner {
  max-width: var(--tzmeny-maxbredd);
  margin-inline: auto;
  padding-inline: var(--tzmeny-sidpadding);
  display: flex;
  align-items: center;
}

/* Ankarlänkar ska inte hamna under headern. */
html { scroll-padding-top: calc(var(--tzmeny-huvudrad-h) + 16px); }

/* -------------------------------------------------------------------------
   2. Topprad
   ---------------------------------------------------------------------- */

.tzmeny__topprad {
  background: var(--tzmeny-topprad-bg);
  border-bottom: 1px solid var(--tzmeny-gron-ljus);
  height: var(--tzmeny-topprad-h);
  overflow: hidden;
  transition: height 180ms var(--tzmeny-ease), border-color 180ms var(--tzmeny-ease);
}

.tzmeny.tzmeny-ar-skrollad .tzmeny__topprad {
  height: 0;
  border-bottom-color: transparent;
}

.tzmeny__topprad .tzmeny__inner {
  height: var(--tzmeny-topprad-h);
  justify-content: flex-end;
  gap: 20px;
}

.tzmeny__tel,
.tzmeny__sok {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--tzmeny-font-brod);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--tzmeny-text-svag);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color 160ms var(--tzmeny-ease);
}

.tzmeny__tel:hover,
.tzmeny__sok:hover,
.tzmeny__tel:focus-visible,
.tzmeny__sok:focus-visible { color: var(--tzmeny-gron); }

.tzmeny__tel .tzmeny-ikon { width: 16px; height: 16px; }
.tzmeny__sok .tzmeny-ikon { width: 17px; height: 17px; }

/* Språkväljaren.

   GTranslates menyvariant ger ett <li> med aktuellt språk och en undermeny
   med de övriga. Undermenyn styrdes tidigare av Divis menyCSS; här får den
   sin egen, så den inte är beroende av att headern är en Divi-meny.

   Shortcoden [gtranslate] skriver i stället ut ALLA arton flaggor på rad och
   fyllde hela toppraden. Den används bara som reserv. */

.tzmeny__sprak { position: relative; display: inline-flex; align-items: center; line-height: 0; }
.tzmeny__sprak img { display: block; }

.tzmeny-sprak { margin: 0; padding: 0; list-style: none; display: flex; }
.tzmeny-sprak > li { position: relative; margin: 0; padding: 0; list-style: none; }

.tzmeny-sprak a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  font-family: var(--tzmeny-font-brod);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--tzmeny-text-svag);
  text-decoration: none;
  white-space: nowrap;
}

.tzmeny-sprak a:hover,
.tzmeny-sprak a:focus-visible { color: var(--tzmeny-gron); }

.tzmeny-sprak .sub-menu,
.tzmeny-sprak .dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 5;
  min-width: 132px;
  max-height: 60vh;
  overflow-y: auto;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--tzmeny-vit);
  border: 1px solid var(--tzmeny-gron-ljus);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(26, 26, 26, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 160ms var(--tzmeny-ease), transform 160ms var(--tzmeny-ease), visibility 160ms;
}

/* Öppet läge. `.tzmeny-sprak-ar-oppen` sätts av klicket i tz-header.js och
   är det enda som fungerar på en pekskärm — hover finns inte där. Hover och
   focus-within behålls för mus och tangentbord.

   OBSERVERA: att göra listan synlig räcker inte. Den är absolut positionerad
   inuti `.tzmeny__topprad`, som har `overflow: hidden` för att kunna fällas
   ihop vid skroll — så listan klipps bort oavsett z-index. Det är därför
   JS:et flyttar den till `position: fixed` när den öppnas. Se noten i
   tz-header.js. */
.tzmeny-sprak > li:hover > .sub-menu,
.tzmeny-sprak > li:hover > .dropdown-menu,
.tzmeny-sprak > li:focus-within > .sub-menu,
.tzmeny-sprak > li:focus-within > .dropdown-menu,
.tzmeny-sprak > li.tzmeny-sprak-ar-oppen > .sub-menu,
.tzmeny-sprak > li.tzmeny-sprak-ar-oppen > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* HOVER-BRYGGAN.

   JS placerar listan sex pixlar under flaggan (`r.bottom + 6`). På väg ned
   mot språkvalen passerar pekaren alltså en remsa där den varken är över
   knappen eller över listan — `:hover` tappas, och listan försvann under
   fingret. Det var hela hover-problemet i pass 92.

   Pseudo-elementet förlänger listans träffyta uppåt över glappet, så att
   pekarens väg blir obruten. Det syns inte och det fångar inga klick när
   listan är dold, eftersom `visibility: hidden` även gäller pseudo-element.

   Höjden är 10 px mot glappets 6: marginalen gör att en snabb diagonal
   musrörelse inte hinner utanför. */
.tzmeny-sprak .sub-menu::before,
.tzmeny-sprak .dropdown-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}

.tzmeny-sprak .sub-menu li,
.tzmeny-sprak .dropdown-menu li { margin: 0; padding: 0; list-style: none; }

.tzmeny-sprak .sub-menu a,
.tzmeny-sprak .dropdown-menu a { padding: 7px 14px; width: 100%; font-size: 14px; color: var(--tzmeny-text); }

.tzmeny-sprak .sub-menu a:hover,
.tzmeny-sprak .dropdown-menu a:hover { background: rgba(65, 83, 33, 0.06); color: var(--tzmeny-gron); }

/* Reservläget: shortcodens flaggrad skulle annars spränga toppraden. */
.tzmeny__sprak--fallback { max-width: 320px; overflow-x: auto; }

/* -------------------------------------------------------------------------
   3. Huvudrad
   ---------------------------------------------------------------------- */

.tzmeny__huvudrad { background: var(--tzmeny-vit); }

.tzmeny__huvudrad .tzmeny__inner {
  height: var(--tzmeny-huvudrad-h);
  gap: 24px;
  justify-content: space-between;
}

.tzmeny__logo {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
}

/* 289×40 i pass 80, 238×33 i pass 84 på ägarens önskemål: logotypen upplevdes
   något för stor mot navigationen. Det är 17,5 % mindre — mitt i det önskade
   intervallet 15–20 %.

   PROPORTIONEN ÄR BEHÅLLEN: 289/40 = 7,225 mot 238/33 = 7,2121. Avvikelsen är
   0,18 %, alltså under en halv pixel på den här höjden.

   Originalfilen är orörd. Bara den utritade storleken ändras, så skärpan på
   högupplösta skärmar är oförändrad — och eager/fetchpriority=high sitter kvar
   i markupen, logotypen är fortfarande sidans LCP-bild.

   Radhöjden rörs inte. Logotypen får mer luft omkring sig, vilket var hela
   poängen; att krympa raden också hade tagit tillbaka det. */
.tzmeny__logo img {
  width: 238px;
  height: 33px;
  display: block;
}

.tzmeny__hoger {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* -------------------------------------------------------------------------
   4. CTA — headerns enda guldbruna yta. Det är det som ger den prioritet.
   ---------------------------------------------------------------------- */

.tzmeny__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 22px;
  border-radius: 10px;
  background: var(--tzmeny-guld);
  color: #fff !important;
  font-family: var(--tzmeny-font-rubrik);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms var(--tzmeny-ease);
}

.tzmeny__cta:hover,
.tzmeny__cta:focus-visible { background: var(--tzmeny-guld-hover); color: #fff !important; }

/* Ingen pil, ingen ikon, ingen hoveranimation som flyttar något. */
.tzmeny__cta::after,
.tzmeny__cta::before { content: none !important; }

.tzmeny__cta--bred { width: 100%; height: 52px; }

/* -------------------------------------------------------------------------
   5. Desktopnavigation
   ---------------------------------------------------------------------- */

.tzmeny-nav { flex: 1 1 auto; display: flex; justify-content: center; }

.tzmeny-nav__lista {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tzmeny-nav__item { position: static; margin: 0; padding: 0; }

.tzmeny-nav__lank,
.tzmeny-nav__knapp {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--tzmeny-huvudrad-h);
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--tzmeny-font-rubrik);
  font-size: 15px;
  font-weight: 600;      /* se typsnittsnoten överst */
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;  /* gemener. Versaler i navigationen är lyxhotellsklichén */
  color: var(--tzmeny-text);
  text-decoration: none;
  transition: color 160ms var(--tzmeny-ease);
}

/* Understrykningen växer ut från mitten. */
.tzmeny-nav__lank > span::after,
.tzmeny-nav__knapp > span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  height: 2px;
  background: var(--tzmeny-gron);
  transform: scaleX(0);
  transition: transform 180ms var(--tzmeny-ease);
}

.tzmeny-nav__lank > span,
.tzmeny-nav__knapp > span { position: relative; display: inline-block; }

.tzmeny-nav__item:hover > .tzmeny-nav__lank,
.tzmeny-nav__item:hover > .tzmeny-nav__knapp,
.tzmeny-nav__lank:focus-visible,
.tzmeny-nav__knapp:focus-visible,
.tzmeny-nav__item.tzmeny-ar-aktiv > .tzmeny-nav__lank,
.tzmeny-nav__item.tzmeny-ar-aktiv > .tzmeny-nav__knapp,
.tzmeny-nav__item--panel.tzmeny-ar-oppen > .tzmeny-nav__knapp { color: var(--tzmeny-gron); }

.tzmeny-nav__item:hover > .tzmeny-nav__lank > span::after,
.tzmeny-nav__item:hover > .tzmeny-nav__knapp > span::after,
.tzmeny-nav__lank:focus-visible > span::after,
.tzmeny-nav__knapp:focus-visible > span::after,
.tzmeny-nav__item.tzmeny-ar-aktiv > .tzmeny-nav__lank > span::after,
.tzmeny-nav__item.tzmeny-ar-aktiv > .tzmeny-nav__knapp > span::after,
.tzmeny-nav__item--panel.tzmeny-ar-oppen > .tzmeny-nav__knapp > span::after { transform: scaleX(1); }

.tzmeny-nav__knapp .tzmeny-ikon--chevron {
  width: 11px;
  height: 12px;
  transition: transform 180ms var(--tzmeny-ease);
}

.tzmeny-nav__item--panel.tzmeny-ar-oppen > .tzmeny-nav__knapp .tzmeny-ikon--chevron { transform: rotate(180deg); }

/* Premiumaccent — en varm hårstrecksram, inte en prick.
   En cirkel före ordet läses som notifieringsbadge; det var ägarens
   uttryckliga invändning. En tunn guldram runt posten säger "eget segment"
   utan att påstå "oläst meddelande". */
.tzmeny-nav__item--premium > .tzmeny-nav__lank,
.tzmeny-nav__item--premium > .tzmeny-nav__knapp {
  height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(140, 106, 56, 0.45);
  border-radius: 999px;
  transition: color 160ms var(--tzmeny-ease), border-color 160ms var(--tzmeny-ease), background-color 160ms var(--tzmeny-ease);
}

.tzmeny-nav__item--premium > .tzmeny-nav__lank > span::after,
.tzmeny-nav__item--premium > .tzmeny-nav__knapp > span::after { content: none; }

.tzmeny-nav__item--premium:hover > .tzmeny-nav__lank,
.tzmeny-nav__item--premium > .tzmeny-nav__lank:focus-visible,
.tzmeny-nav__item--premium.tzmeny-ar-aktiv > .tzmeny-nav__lank {
  border-color: var(--tzmeny-guld);
  background: rgba(140, 106, 56, 0.06);
  color: var(--tzmeny-guld);
}

/* -------------------------------------------------------------------------
   6. Mega-menypanel
   ---------------------------------------------------------------------- */

.tzmeny-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--tzmeny-vit);
  border-top: 1px solid rgba(65, 83, 33, 0.10);
  border-radius: 0 0 14px 14px;
  box-shadow: 0 18px 40px rgba(26, 26, 26, 0.12);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 200ms var(--tzmeny-ease), transform 200ms var(--tzmeny-ease);
}

.tzmeny-mega[hidden] { display: none; }

.tzmeny-nav__item--panel.tzmeny-ar-oppen .tzmeny-mega {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.tzmeny-mega__inner {
  max-width: var(--tzmeny-maxbredd);
  margin-inline: auto;
  padding: 28px var(--tzmeny-sidpadding) 24px;
  max-height: min(62vh, 620px);
  overflow-y: auto;
}

.tzmeny-mega__rutnat {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px 28px;
  align-items: start;
}

/* Europa har ensam fler självklara resmål än flera andra regioner
   tillsammans och spänner därför över två kolumner, med sin egen lista i två
   spalter. Klassen sätts på menyposten i wp-admin: tz-kol-bred. */
.tzmeny-mega__kol--bred { grid-column: span 2; }
.tzmeny-mega__kol--bred .tzmeny-mega__lista { columns: 2; column-gap: 28px; }

.tzmeny-mega__rubrik {
  margin: 0 0 10px;
  font-family: var(--tzmeny-font-rubrik);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tzmeny-gron);
  text-decoration: none;
  display: block;
}

a.tzmeny-mega__rubrik--lank:hover,
a.tzmeny-mega__rubrik--lank:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

.tzmeny-mega__lista { margin: 0; padding: 0; list-style: none; }

.tzmeny-mega__lista li { margin: 0; padding: 0; break-inside: avoid; }

.tzmeny-mega__lista a {
  display: block;
  padding: 5px 0;
  min-height: 24px;
  font-family: var(--tzmeny-font-brod);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--tzmeny-text);
  text-decoration: none;
  transition: color 140ms var(--tzmeny-ease);
}

.tzmeny-mega__lista a:hover,
.tzmeny-mega__lista a:focus-visible { color: var(--tzmeny-gron); }
.tzmeny-mega__lista a.tzmeny-ar-aktiv { color: var(--tzmeny-gron); font-weight: 500; }

.tzmeny-mega__fot {
  grid-column: -2 / -1;
  align-self: end;
  display: flex;
  justify-content: flex-end;
}

.tzmeny-mega__sealla {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--tzmeny-font-rubrik);
  font-size: 14px;
  font-weight: 600;
  color: var(--tzmeny-gron);
  text-decoration: none;
}

.tzmeny-mega__sealla .tzmeny-ikon { width: 16px; height: 16px; transition: transform 180ms var(--tzmeny-ease); }
.tzmeny-mega__sealla:hover .tzmeny-ikon,
.tzmeny-mega__sealla:focus-visible .tzmeny-ikon { transform: translateX(3px); }

/* -------------------------------------------------------------------------
   7. Hamburgare och drawer
   ---------------------------------------------------------------------- */

.tzmeny__burgare {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--tzmeny-tap);
  height: var(--tzmeny-tap);
  border: 0;
  background: none;
  color: var(--tzmeny-text);
  cursor: pointer;
  border-radius: 8px;
}

.tzmeny__burgare .tzmeny-ikon { width: 24px; height: 24px; }

.tzmeny-drawer[hidden] { display: none; }

.tzmeny-drawer {
  position: fixed;
  inset: 0;
  z-index: 10001;
}

.tzmeny-drawer__bakgrund {
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 16, 0.55);
  opacity: 0;
  transition: opacity 260ms var(--tzmeny-ease);
}

.tzmeny-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 92%;
  max-width: 420px;
  background: var(--tzmeny-vit);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 260ms var(--tzmeny-ease);
  overscroll-behavior: contain;
}

.tzmeny-drawer.tzmeny-ar-oppen .tzmeny-drawer__bakgrund { opacity: 1; }
.tzmeny-drawer.tzmeny-ar-oppen .tzmeny-drawer__panel { transform: none; }

body.admin-bar .tzmeny-drawer__panel { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .tzmeny-drawer__panel { top: 46px; }
}

.tzmeny-drawer__topp {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 12px 0 20px;
  border-bottom: 1px solid var(--tzmeny-gron-ljus);
}

.tzmeny-drawer__titel {
  font-family: var(--tzmeny-font-rubrik);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tzmeny-gron);
}

.tzmeny-drawer__stang {
  width: var(--tzmeny-tap);
  height: var(--tzmeny-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: var(--tzmeny-text);
  cursor: pointer;
  border-radius: 8px;
}

.tzmeny-drawer__stang .tzmeny-ikon { width: 22px; height: 22px; }

.tzmeny-drawer__sok {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 20px 6px;
  padding: 0 14px;
  min-height: var(--tzmeny-tap);
  border: 2px solid rgba(26, 26, 26, 0.14);
  border-radius: 10px;
  background: none;
  font-family: var(--tzmeny-font-brod);
  font-size: 15px;
  color: var(--tzmeny-text-svag);
  cursor: pointer;
  text-align: left;
}

.tzmeny-drawer__sok .tzmeny-ikon { width: 19px; height: 19px; color: var(--tzmeny-gron); flex: 0 0 auto; }

.tzmeny-drawer__lista {
  flex: 1 1 auto;
  overflow-y: auto;
  margin: 6px 0 0;
  padding: 0 8px;
  list-style: none;
  -webkit-overflow-scrolling: touch;
}

.tzmeny-drawer__item { margin: 0; padding: 0; }

.tzmeny-drawer__lank {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 0 12px;
  border: 0;
  background: none;
  font-family: var(--tzmeny-font-rubrik);
  font-size: 17px;
  font-weight: 600;
  color: var(--tzmeny-text);
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  border-radius: 8px;
}

.tzmeny-drawer__lank .tzmeny-ikon--chevron { width: 13px; height: 14px; flex: 0 0 auto; transition: transform 200ms var(--tzmeny-ease); }
.tzmeny-drawer__lank[aria-expanded="true"] { color: var(--tzmeny-gron); }
.tzmeny-drawer__lank[aria-expanded="true"] .tzmeny-ikon--chevron { transform: rotate(180deg); }

.tzmeny-drawer__item--premium > .tzmeny-drawer__lank { color: var(--tzmeny-guld); }

.tzmeny-drawer__sub[hidden] { display: none; }
.tzmeny-drawer__sub ul { margin: 0 0 8px; padding: 0 0 0 12px; list-style: none; border-left: 2px solid rgba(65, 83, 33, 0.22); }

.tzmeny-drawer__sub a {
  display: flex;
  align-items: center;
  min-height: var(--tzmeny-tap);
  padding: 0 12px;
  font-family: var(--tzmeny-font-brod);
  font-size: 16px;
  font-weight: 400;
  color: var(--tzmeny-text);
  text-decoration: none;
}

.tzmeny-drawer__sub a:hover,
.tzmeny-drawer__sub a:focus-visible { color: var(--tzmeny-gron); }

.tzmeny-drawer__grupp {
  padding: 14px 12px 4px;
  font-family: var(--tzmeny-font-rubrik);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tzmeny-gron);
}

.tzmeny-drawer__sealla a { font-weight: 500; color: var(--tzmeny-gron); gap: 6px; }
.tzmeny-drawer__sealla .tzmeny-ikon { width: 16px; height: 16px; }

.tzmeny-drawer__fot {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--tzmeny-gron-ljus);
  background: var(--tzmeny-beige);
}

.tzmeny-drawer__tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tzmeny-tap);
  font-family: var(--tzmeny-font-brod);
  font-size: 16px;
  font-weight: 500;
  color: var(--tzmeny-text);
  text-decoration: none;
}

.tzmeny-drawer__tel .tzmeny-ikon { width: 18px; height: 18px; color: var(--tzmeny-gron); }
.tzmeny-drawer__sprak { min-height: var(--tzmeny-tap); display: flex; align-items: center; }

/* -------------------------------------------------------------------------
   8. Fokus — synligt överallt, aldrig bara hover
   ---------------------------------------------------------------------- */

.tzmeny :focus-visible,
.tzmeny-drawer :focus-visible {
  outline: 3px solid var(--tzmeny-gron);
  outline-offset: 3px;
  border-radius: 4px;
}

.tzmeny__cta:focus-visible { outline-color: var(--tzmeny-gron); }

/* -------------------------------------------------------------------------
   9. BRYTPUNKT — under detta värde: hamburgare och drawer.
      Måste matcha TZ_HEADER_BRYTPUNKT i inc/tz-header.php.
   ---------------------------------------------------------------------- */

@media (max-width: 1179px) {               /* BRYTPUNKT */
  .tzmeny-nav { display: none; }
  .tzmeny__burgare { display: inline-flex; }
  .tzmeny__huvudrad .tzmeny__inner { gap: 16px; }
}

@media (min-width: 1180px) {               /* BRYTPUNKT */
  .tzmeny-drawer { display: none !important; }
}

/* Smalare telefoner: CTA:n i huvudraden tar för mycket plats bredvid
   logotypen. Den finns kvar längst ned i drawern, alltid nåbar. */
@media (max-width: 599px) {
  .tzmeny__huvudrad .tzmeny__cta { display: none; }
  .tzmeny__logo img { width: 217px; height: 30px; }
  .tzmeny__topprad .tzmeny__inner { gap: 14px; }
  .tzmeny__tel span { display: none; }
}

@media (max-width: 380px) {
  .tzmeny__sok span { display: none; }
}

/* -------------------------------------------------------------------------
   10. Rörelsekänslighet
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .tzmeny,
  .tzmeny *,
  .tzmeny-drawer,
  .tzmeny-drawer * {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}

/* -------------------------------------------------------------------------
   11. Divi-avstängningar

   Temats egen header.php och Divis moduler ska inte kunna rita en andra
   header, en andra hamburgare eller en andra sökikon ovanpå vår.
   ---------------------------------------------------------------------- */

body #page-container > #main-header,
body #page-container > #top-header,
body #page-container > .et-l--header { display: none !important; }

/* zmart-nav-overlägget kopplas bort i functions.php. Regeln här är en
   säkerhetslina om komponenten skulle återaktiveras av misstag — två
   hamburgare på samma sida är värre än ingen. */
body .zmart-nav,
body .zmart-nav--detached { display: none !important; }

/* Divi lägger annars på ett toppmarginal-offset för sin fasta header. */
body #page-container { padding-top: 0 !important; }