/*
 * Hamburgermenyn (förslag A, nov 2026).
 * Ren CSS utanför Sass-bygget: laddas efter style.css i head.html.php och kräver inget
 * Grunt/Compass-bygge, så den fungerar likadant lokalt och efter deploy.
 * Svart och vitt, inga feta vikter. Profilens kategorifärger bara som hover-streck.
 */

/* ---------- Headern: Sök, Boka och Meny ---------- */
#header-primary .meny-verktyg {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  height: 90px;
  float: right;
}
#header-primary .meny-verktyg .search-wrapper {
  margin: 0;
  float: none;
}
.meny-boka {
  display: inline-block;
  background: #ffffff;
  color: #111111;
  font-weight: normal;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  padding: 14px 22px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.meny-boka:hover,
.meny-boka:focus {
  background: #dddddd;
  color: #111111;
  text-decoration: none;
}
.meny-oppna {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 12px 0;
  color: #ffffff;
  font-weight: normal;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.meny-oppna:hover,
.meny-oppna:focus-visible {
  color: #bbbbbb;
}
.meny-oppna:focus-visible,
.meny-stang:focus-visible,
.meny-boka:focus-visible,
.meny-panel a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (max-width: 767px) {
  #header-primary .meny-verktyg {
    height: 60px;
    gap: 14px;
    padding-right: 16px;
  }
  .meny-boka {
    padding: 11px 14px;
    font-size: 12px;
  }
  .meny-oppna-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ---------- Panelen ---------- */
.meny-skugga {
  position: fixed;
  inset: 0;
  z-index: 2999;
  background: rgba(17, 17, 17, 0.6);
  opacity: 0;
  transition: opacity 0.3s;
}
.meny-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3000;
  width: 620px;
  max-width: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #ffffff;
  color: #111111;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s ease;
}
/* display: flex ovan tar annars över hidden-attributet: stängd panel ska vara helt borta,
   även för tangentbord och skärmläsare. */
.meny-panel[hidden],
.meny-skugga[hidden] { display: none; }
html.meny-ar-oppen .meny-skugga { opacity: 1; }
html.meny-ar-oppen .meny-panel { transform: translateX(0); }
html.meny-ar-oppen,
html.meny-ar-oppen body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .meny-panel, .meny-skugga { transition: none; }
}

.meny-panel-topp {
  flex: 1;
  padding: 30px 64px 40px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.meny-panel-rad {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* Profilens kategorifärger. Sätts som CSS-klass på menyposten i WP-admin
   (Utseende › Menyer, "CSS-klasser" under Skärmalternativ), t.ex. farg-energi. */
.farg-energi    { --farg: #F3A300; }  /* Aktivitet/event */
.farg-aubergine { --farg: #6C065A; }  /* Mat/restaurang */
.farg-midnatt   { --farg: #568EBE; }  /* Hotell/boende */
.farg-kunskap   { --farg: #009088; }  /* Konferens */
.farg-natur     { --farg: #BFBD00; }  /* Transport */
.farg-sand      { --farg: #D2BE7D; }  /* Technical visits */

.meny-boka-svart {
  background: #111111;
  color: #ffffff;
}
.meny-boka-svart:hover,
.meny-boka-svart:focus {
  background: #444444;
  color: #ffffff;
}
.meny-stang {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 10px 0;
  color: #111111;
  font-weight: normal;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.meny-stang:hover { color: #666666; }

.meny-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.meny-panel a span { display: inline; }

/* Stora länkar för besökaren: tunna versaler som raden under startsidans bild.
   Korta streck mellan länkarna (sajtens strecktema, liggande eftersom listan är lodrät).
   Hover: texten får kategorins färg (CSS-klassen på menyposten, t.ex. farg-energi). */
.meny-stora {
  display: flex;
  flex-direction: column;
}
.meny-stora li {
  position: relative;
  padding: 18px 0;
}
.meny-stora li + li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 1px;
  background: #111111;
}
.meny-stora a {
  display: inline-block;
  color: #111111;
  font-weight: normal;
  font-size: 30px;
  line-height: 1.15;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s;
}
.meny-stora a:hover,
.meny-stora a:focus-visible,
.meny-stora .current-menu-item > a {
  color: var(--farg-text, var(--farg, #009088));
  text-decoration: none;
}
/* Energi-gult som text på vitt når bara kontrast 2:1. En mörkare ton av samma gul (3:1)
   används för texten i panelen; övriga kategorifärger klarar vit bakgrund som de är. */
.meny-stora .farg-energi { --farg-text: #C98700; }
.meny-stora .farg-sand   { --farg-text: #8C7A3E; }
.meny-stora .farg-natur  { --farg-text: #7A7900; }

/* Rader med pil: arrangörer och destination */
.meny-rader {
  border-top: 1px solid #dddddd;
}
.meny-rader a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid #dddddd;
  color: #111111;
  font-weight: normal;
  font-size: 20px;
  text-decoration: none;
}
.meny-rader li:last-child a { border-bottom: 1px solid #dddddd; }
.meny-rader a svg { flex: none; transition: transform 0.2s; }
.meny-rader a:hover { color: #111111; text-decoration: none; }
.meny-rader a:hover svg { transform: translateX(4px); }

/* Svarta fältet längst ner */
.meny-panel-fot {
  background: #111111;
  color: #ffffff;
  padding: 36px 64px 40px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
/* Rubriker och länkar i det svarta fältet: samma som i sajtens sidfot (.footer-menu),
   så att menyn och sidfoten hänger ihop. 14 px, fet rubrik med kort vitt streck under. */
.meny-etikett {
  position: relative;
  display: inline-block;
  padding-bottom: 20px;
  margin-bottom: 30px;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
}
.meny-etikett::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 70px;
  height: 2px;
  background: #ffffff;
}
.meny-fotlankar {
  display: flex;
  flex-direction: column;
}
.meny-fotlankar li { padding: 3px 0; }
.meny-fotlankar a {
  color: #ffffff;
  font-size: 14px;
  text-decoration: none;
}
.meny-fotlankar a:hover,
.meny-fotlankar a:focus-visible {
  color: #ffffff;
  text-decoration: underline;
}
.meny-kontakt {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: #bbbbbb;
}
.meny-kontakt p { margin: 0; }
.meny-kontakt p:empty,
.meny-kontakt p:first-child + p { display: none; }
.meny-kontakt a { color: #bbbbbb; }

@media (max-width: 767px) {
  .meny-panel { width: 100%; }
  .meny-panel-topp { padding: 18px 24px 32px; gap: 28px; }
  .meny-stora a { font-size: 24px; }
  .meny-stora li { padding: 14px 0; }
  .meny-rader a { font-size: 17px; padding: 16px 0; }
  .meny-panel-fot { padding: 24px 24px 32px; grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

/* Sociala medier: samma ikoner som sidfoten */
.meny-sociala {
  display: flex;
  gap: 14px;
}
.meny-sociala a {
  display: block;
  width: 30px;
  height: 30px;
  transition: opacity 0.2s;
}
.meny-sociala a:hover { opacity: 0.7; }
.meny-sociala img { display: block; width: 30px; height: 30px; }

/* ---------- Sidfoten (nov 2026) ---------- */
/* Rubriken i kolumnen "Besök Växjö" är ingen länk: samma utseende som de andra kolumnrubrikerna, utan pekare. */
#footer-primary .footer-menu > li > a:not([href]) { cursor: default; }

#footer-primary .sidfot-botten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px 32px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid #444444;
  font-size: 14px;
}
#footer-primary .sidfot-juridik {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#footer-primary .sidfot-juridik a { color: #bbbbbb; }
#footer-primary .sidfot-juridik a:hover { color: #ffffff; text-decoration: underline; }
#footer-primary .sidfot-sociala {
  display: flex;
  align-items: center;
  gap: 14px;
}
#footer-primary .sidfot-sociala span {
  margin-right: 6px;
  color: #bbbbbb;
}
#footer-primary .sidfot-sociala a { display: block; transition: opacity 0.2s; }
#footer-primary .sidfot-sociala a:hover { opacity: 0.7; }
#footer-primary .sidfot-sociala img { display: block; width: 26px; height: 26px; }

/* Startsidan: raden Möten | Evenemang | Destination ligger kvar under bilden, men temats
   main.js flyttar upp den i headern när man scrollar förbi bilden. Där ska den inte synas. */
#header-primary .center-container nav:not(.original-nav) { display: none !important; }

/* Startsidans slogan i headern ("Arrangera dina möten & evenemang i Växjö") visas inte.
   Elementet ligger kvar i koden eftersom main.js använder det för att känna igen startsidan;
   utan det flyttar skriptet startsidans rad till en ny mörk rad under headern. */
#header-primary .center-container h2 { display: none !important; }

/* Startsidans rad under bilden: temat gör länken fet vid hover, vilket gör texten bredare
   och knuffar hela raden i sidled. Understrykning i stället, den ändrar inte bredden. */
html.home .overlay-nav.real-nav .background-wrapper .inner-wrapper nav ul li:hover a,
html.home .overlay-nav.real-nav .background-wrapper .inner-wrapper nav ul li a:focus-visible {
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-color: var(--farg, #ffffff);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}
/* Aubergine är för mörk för att synas mot den svarta raden: en ljusare ton av samma färg där. */
html.home .overlay-nav.real-nav .farg-aubergine { --farg: #A84C96; }

/* Sidfotens länkar under rubrikerna: understrykning vid hover, samma som i menyns svarta fält. */
#footer-primary .black-part .footer-menu .sub-menu a:hover,
#footer-primary .black-part .footer-menu .sub-menu a:focus-visible {
  color: #ffffff;
  text-decoration: underline;
}