/* ====== 251125 ====== */
body {
  margin: 0;
  padding: 0;
  background-color: #DCD1C4;
}

.container {
  max-width: 1238px;
  margin: 0 auto;
  background-color: #EEE8E1;
  border-left: 1px solid rgba(0,0,0,.25);
  border-right: 1px solid rgba(0,0,0,.25);
  padding: 10px 20px;	
  z-index: 997;
}

.site-header {
  position: sticky;
  top: 0;
  background-color: #DCD1C4;
  z-index: 1000;
}
.site-header .container {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(0,0,0,.25);
}
/* Header positioning */
.site-header .container { position: relative; z-index: 1001; }

/* Mobile-first: desktop-nav gömd, hamburgare på */
.desktop-nav { display: none; }
.menu-icon { display: inline-flex; font-size: 36px; cursor: pointer; }

/* Logotyp (SVG) */
.logo .site-logo { display: block; width: 146px; height: auto; max-width: 100%; }

/* Grid (mobile first) */
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,
.col-7,.col-8,.col-9,.col-10,.col-11,.col-12 {
  width: 100%;
  max-width: 100%;
  padding: 5px;
  box-sizing: border-box;
}

/* Boxar & text */
.box {
  background-color: #DCD1C5;
  border-radius: 5px;
  padding: 25px;
  box-sizing: border-box;
  margin-bottom: 15px;
  outline: 1px solid rgba(0, 0, 0, 0.25);
}
.box p { line-height: 1.8; }

.section-box {
  background-color: #EEE8E1;
  border-radius: 5px;
  padding: 5px 15px;
  box-sizing: border-box;
  margin-bottom: 15px;
  outline: 1px solid rgba(0, 0, 0, 0.1);
}

/* 15px marginal mellan fält och själva bilden */
.hero-frame {
  position: relative;
  padding: 0px;
}

/* HERO-YTA */
.hero-slider {
  position: relative;
  overflow: hidden;   /* behövs för att croppa top/bottom när bredden fylls */
  width: 100%;
  aspect-ratio: 5 / 2;   /* desktop & tablet */
  border-radius: 5px;
  background: #EEE8E1;   /* valfri "letterbox"-färg bakom */
}

/* Bas för alla slides – centrera med transform */
.hero-slider .slide {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  max-width: none;
  max-height: none;
  width: auto;
  height: auto;

  opacity: 0;
  transition: opacity 2s ease;
  z-index: 1;
  visibility: hidden;  /* undvik blink innan klassning */
}

.hero-slider .slide.is-active {
  opacity: 1;
}

/* Orienteringsklasser (bas) */
.hero-slider .slide.landscape {
  width: 100% !important;
  height: auto !important;
}

.hero-slider .slide.portrait {
  height: 100% !important;
  width: auto !important;
}


/* Overlay ligger ovanpå bilderna och ankrar 15px innanför bildytan */
.hero-overlay {
  position: absolute;
  z-index: 2;
  max-width: min(520px, 90%);
  background: rgba(255,255,255,.88);
  padding: 10px 15px;
  border-radius: 5px;
  line-height: 1.35;
  outline: 1px solid rgba(0, 0, 0, 0.1);	
}
.hero-overlay--top-right   { top: 15px;   right: 15px; }
.hero-overlay--bottom-left { bottom: 15px; left: 15px; }
/* Ta bort onödig topp/botten-marginal från första/sista elementet i overlay */
.hero-overlay > :first-child { margin-top: 0; }
.hero-overlay > :last-child  { margin-bottom: 0; }
/* Top-right overlay: tajtare rubrik + copy */
.hero-overlay--top-right h1 {
  margin: 0 0 10px 0;  /* var 0 0 20px 0 via h1,h2-regeln */
}

.hero-overlay--top-right p {
  margin: 6px 0 0 0;   /* var margin-top: 10px */
}

.hero-overlay--top-right h5 {
  margin: 10px 0 0 0;   /* h5 hade ingen margin-regel, men kan få default i vissa browsers */
}

/* Bottom-left overlay: tajtare rubrik + brödtext */
.hero-overlay--bottom-left h3 {
  margin: 0 0 6px 0;   /* säkerställ att h3 inte skapar luft uppåt */
}

.hero-overlay--bottom-left p {
  margin: 0;           /* ta bort extra top-marginal i overlay */
}
/* Centrera meta-raden (h5) i top-right boxen */
.hero-overlay--top-right h5{
  text-align: center;
}

/* Desktop/surfplatta: låt top-right-boxen växa efter innehållet så att
   taglinen ryms på en rad (ingen radbrytning). På mobil (<801px) tillåts
   radbrytning så texten inte svämmar över den smalare boxen. */
@media (min-width: 801px) {
  .hero-overlay--top-right { width: max-content; max-width: min(760px, 92%); }
  .hero-overlay--top-right p { white-space: nowrap; }
}

.next-slide {
  position: absolute;
  right: 15px;
  bottom: 15px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 1001;
}

.next-slide img {
  width: 26px;
  height: 26px;
  display: block;
  background: none;
}
.next-slide:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

.hero + .button-container {
  margin-top: 15px;
}

@media (pointer: coarse){
  .next-slide{ width: 26px; height: 26px; }
  .next-slide img{ width: 26px; height: 26px; }
}

.button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: stretch;
  margin-top: 40px;
  width: 100%;
}

/* Knapparna ska vara block och fylla cellen */
.custom-button {
  background-color: #5c7d5c;
  color: #fff;
  text-align: center;
  text-decoration: none;
  padding: 30px 20px;
  border-radius: 5px;
  flex: 1 1 100%;
  min-width: 200px;
  transition: background-color .3s ease, transform .2s ease;
  width: 100%;
  box-sizing: border-box;
}
.custom-button h3 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 400;
  font-family: 'Kiwi Maru', serif;
  letter-spacing: .5px;
  color: #fff;
}
.custom-button:hover { background-color: #C5007C; transform: translateY(-2px); }

/* Typsnitt & text */
h1, h2 {
  font-family: 'Kiwi Maru', serif;
  color: #685338;
  margin: 0 0 20px 0;
}
h1 { font-size: 2em; font-weight: normal; text-align: center; }
h2 { font-size: 1.8em; font-weight: normal; text-align: center; }
h3 {
  color: #685338;
  font-family: "Kiwi Maru";
  font-size: 28px;
  font-style: normal;
  font-weight: 300;
  line-height: 150%;
}
h4 {
  font-family: "Kiwi Maru";
  color: #685338;
  font-size: 1.1em;
  font-weight: normal;
}
h5 { 
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: #685338;
}
h5-white { 
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: #FFFFFF;
}

p, ul, ol {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 300;
  margin-top: 10px;
  align-self: stretch;
}

/* Länkar i desktopnav */
.desktop-nav a {
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  color: #685338;
  font-weight: 500;
  font-size: .9em;
}
.desktop-nav a:hover { text-decoration: underline; color: #5c4330; transition: all .2s ease; }
.desktop-nav a.active { background-color: #DCD1C4; border-radius: 5px; }

/* ====== Språkväxlare: flagga (aktuellt språk) + pil ====== */
.lang-switch { position: relative; display: inline-flex; align-items: center; }
.lang-hint { display: inline-flex; align-items: center; pointer-events: none; }

/* Flaggor – visa den som matchar aktuellt språk (styrs av <html lang>).
   Båda flaggorna har exakt samma storlek (samma box, fyller helt). */
.lang-flag { display: inline-flex; line-height: 0; }
.lang-flag .flag {
  width: 22px; height: 14px; display: none;
  border: 1px solid rgba(0,0,0,.25);
  border-radius: 2px;
}
.lang-flag .flag-se { display: block; }               /* default: svenska */
:root[lang="en"] .lang-flag .flag-se { display: none; }
:root[lang="en"] .lang-flag .flag-gb { display: block; }

/* Desktop: flaggan klistrad mot headerns topp, pilen längst ner (precis
   ovanför språklänken) så den signalerar "tryck här för att byta språk".
   left och height sätts av site.js. Påverkar inte nav-radens layout. */
.desktop-nav .lang-switch { position: static; }
.desktop-nav .lang-hint {
  position: absolute;
  top: 0;                          /* flaggan klistrad mot toppen */
  transform: translateX(-50%);     /* left sätts av site.js */
  flex-direction: column;
  align-items: center;
  justify-content: space-between;   /* flagga upptill, pil nedtill nära länken */
  gap: 0;
  margin: 0;
  /* height sätts av site.js så pilen hamnar precis ovanför länken */
}
.desktop-nav .lang-arrow {
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 6px solid #685338;   /* pil uppåt */
}

/* Mobil: flagga + pil inline till vänster om språklänken */
.mobile-nav .lang-switch { display: flex; align-items: center; gap: 8px; }
.mobile-nav .lang-hint { flex-direction: row; gap: 6px; }
.mobile-nav .lang-arrow {
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 6px solid #685338;   /* pil uppåt */
}

/* Bilder */
img { vertical-align: middle; }
.col-4 img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
.row img { display: block; margin: 0 auto; }
.ux-case-img {
  display: block;
  margin: 0 auto 15px;
  max-height: 300px;
  width: auto;
  height: auto;
}
.responsive-img { width: auto; display: block; margin-bottom: 25px; }

/* Innehållswrapper & containers */
.content-wrapper { max-width: 1120px; margin: 0 auto; }
.site-content .container { padding: 20px 20px; }

/* Footer */
.site-footer { background-color: #DCD1C4; }
.site-footer .container {
  text-align: center;
  font-size: 14px;
  color: #333;
  padding: 20px;
}

/* project-dropdown */
.project-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 15px;
  width: 383px;
  background: #DCD1C4;
  padding: 15px;
  border-left: 1px solid rgba(0,0,0,.25);
  border-right: 1px solid rgba(0,0,0,.25);
  border-bottom: 1px solid rgba(0,0,0,.25);
  z-index: 1100;
}
.project-dropdown.open { display: block; }
.project-menu-item {
  background: #EEE8E1;
  padding: 10px 15px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #685338;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,.25);
}
.project-dropdown .project-menu-item a {
  text-decoration: none;
  color: #685338;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  display: block;
  width: 100%;
}

/* Submenyer (desktop/mobil gemensamt) */
.sub-menu {
  display: none;
  flex-direction: column;
  margin-top: 10px;
}
.sub-menu a {
  padding: 10px 15px;
  background: #DCD1C4;
  text-decoration: none;
  color: #685338;
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
  border-bottom: 1px solid rgba(0,0,0,.25);
}
.sub-menu a:last-child { border-bottom: none; }
.sub-menu.show { display: flex; animation: slideDown .3s ease; }
@keyframes slideDown { from {opacity:0; transform: translateY(-5px);} to {opacity:1; transform:none;} }
.submenu-indent { margin-left: 15px; padding-left: 0; }

.arrow-icon { font-size: 20px; transition: transform .3s ease; }

/* ====== Mobilmeny (transform-lösning) ====== */
.mobile-nav {
  position: fixed;
  top: 59px; left: 5px; right: 5px;
  background: #EAE1D6;
  display: flex;
  flex-direction: column;
  padding: 40px 30px 20px 20px;
  transform: translateY(-100%);
  transition: transform .3s ease;
  z-index: 999;
  border-left: 1px solid rgba(0,0,0,.25);
  border-right: 1px solid rgba(0,0,0,.25);
  border-bottom: 1px solid rgba(0,0,0,.25);
}
.mobile-nav a {
  display: block;
  padding: 10px 0;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  color: #685338;
  font-weight: 500;
  font-size: 16px;
  border-bottom: 1px solid rgba(0,0,0,.2);
  transition: background-color .2s ease, color .2s ease;
}
.mobile-nav a:hover { background-color: rgba(92,67,48,.1); color: #5c4330; text-decoration: none; }
.mobile-nav a.active { background-color: #DCD1C4; border-radius: 5px; color: #5c4330; font-weight: 600; }
.mobile-nav.open, .mobile-nav.show { transform: translateY(0); }

/* Overlay (kan användas om du vill dimma bakgrunden) */
.mobile-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100vh;
  background: rgba(0,0,0,.5);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
  z-index: 998;
}
.mobile-overlay.show { opacity: 1; pointer-events: auto; }

/* Mobil: extra nav-detaljer */
.mobile-nav a.dropdown-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}
#projects-sub-menu-mobile { margin-top: 0; padding: 0; }
#ux-sub-menu-mobile { margin-top: 0; padding: 0; }
#ux-sub-menu-mobile a { padding: 10px 30px; }

/* ====== Breakpoints ====== */

/* Desktop (1220px+) */
@media only screen and (min-width: 1220px) {
  .desktop-nav { display: flex; gap: 20px; }
  .menu-icon, .mobile-nav { display: none !important; }

  .button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }

  /* Bas: alla knappar flexar jämnt */
  .button-container .custom-button {
    flex: 1 1 calc((100% - 40px) / 3);
    min-width: 0;
    max-width: calc((100% - 40px) / 3);
  }

  /* Om bara 1 knapp */
  .button-container .custom-button:only-child {
    flex: 1 1 100%;
    max-width: 100%;
  }

  /* Om 2 knappar – fyll 50% var */
  .button-container .custom-button:first-child:nth-last-child(2),
  .button-container .custom-button:first-child:nth-last-child(2) ~ .custom-button {
    flex: 1 1 calc((100% - 20px) / 2);
    max-width: calc((100% - 20px) / 2);
  }

  .content-wrapper { max-width: none; padding: 20px; }

  .row {
    display: flex; flex-wrap: wrap;
    justify-content: flex-start; align-items: flex-start;
    margin-left: -15px; margin-right: -15px;
  }
  [class*="col-"] {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
  }
  .col-1  { flex: 0 0 8.3333%;  max-width: 8.3333%;  }
  .col-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-3  { flex: 0 0 25%;      max-width: 25%;      }
  .col-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .col-6  { flex: 0 0 50%;      max-width: 50%;      }
  .col-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-9  { flex: 0 0 75%;      max-width: 75%;      }
  .col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .col-12 { flex: 0 0 100%;     max-width: 100%;     }
}

/* Mellanläge (801–1219px) */
@media only screen and (min-width: 801px) and (max-width: 1219px) {
  .desktop-nav { display: flex; gap: 20px; }
  .menu-icon, .mobile-nav { display: none !important; }

  .button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }

  .button-container .custom-button {
    flex: 1 1 calc((100% - 40px) / 3);
    min-width: 0;
    max-width: calc((100% - 40px) / 3);
  }

  .button-container .custom-button:only-child {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .button-container .custom-button:first-child:nth-last-child(2),
  .button-container .custom-button:first-child:nth-last-child(2) ~ .custom-button {
    flex: 1 1 calc((100% - 20px) / 2);
    max-width: calc((100% - 20px) / 2);
  }

  .container { padding: 0; }
  .content-wrapper { padding: 0; }

  /* Stapla kolumner */
  .row { display: block; }
  [class*="col-"] {
    flex: none;
    width: 100%;
    max-width: 100%;
    padding: 15px;
    text-align: center;
    box-sizing: border-box;
  }

  .site-content .container { padding: 20px 20px; }
  .image-column { flex: 50%; max-width: 50%; }

  /* Mindre hero-overlay specifikt på tablet: gör fälten lägre */
  .hero-overlay {
    padding: 6px 10px;
    line-height: 1.25;
  }
  .hero-overlay h3 {
    font-size: 20px;
    line-height: 1.3;
    margin-bottom: 6px;
  }
  .hero-overlay p {
    font-size: 13px;
    line-height: 1.4;
    margin-top: 6px;
  }
}

/* Mobil (285–800px) – grund (portrait-optimerad) */
@media only screen and (min-width: 285px) and (max-width: 800px) {
  .desktop-nav { display: none; }
  .menu-icon { display: block; }

  .logo img, .logo .site-logo { width: 110px; height: auto; }

  .container, .content-wrapper, .site-content .container { padding: 0; }
  .content-wrapper { padding: 20px 10px; }

  h1 { font-size: 1.2em; }
  h3 { font-size: 1em; }	

  .row { display: block; }
  .col-8 { padding: 0; }

  [class*="col-"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    width: 100%;
  }

  .button-container {
    flex-direction: column;
    gap: 20px;
    align-items: center;
    width: 100%;
  } 
  .custom-button { 
    width: 100%;
    max-width: 90%;
    padding: 10px 10px !important;
  }

  .col-4 img { width: 100%; height: auto; display: block; }
  .col-4 { margin-bottom: 20px; }

  .ux-case-img { max-height: 150px !important; }

  /* Mobil submenyer – struktur/indrag */
  .mobile-nav .project-menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    background-color: #EEE8E1;
    padding: 10px 0;
    margin: 0;
    border: none;
  }
  .mobile-nav .project-menu-item.submenu-indent { margin-left: 0; }
  .mobile-nav .project-menu-item.submenu-indent a {
    flex: 1;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    text-decoration: none;
    color: inherit;
  }

  /* Mobil hero – portrait-optimerad (grund) */
  .hero-slider {
    aspect-ratio: 2 / 3; /* hög hero i stående läge */
  }

  .hero-slider .slide.landscape {
    width: auto !important;
    height: 100% !important;
  }

  .hero-slider .slide.portrait {
    height: 100% !important;
    width: auto !important;
  }

  .hero-overlay {
    width: 90% !important;
    max-width: 90% !important;
    left: 50% !important;
    transform: translateX(-50%);
    right: auto !important;
    text-align: center;
  }

  .hero-overlay--top-right {
    top: 15px;
  }
  .hero-overlay--bottom-left {
    bottom: 15px;
  }
  .next-slide {
    display: none !important;
  }	
}

/* Listor med egna bullets */
.checklist { list-style: none; padding-left: 1.2em; }
.checklist li::marker { content: "\2705 "; }

.bulblist { list-style: none; padding-left: 1.2em; }
.bulblist li::marker { content: "\1F4A1 "; }

/* Länk som text (vit) – används på knappar etc. */
.link-as-text {
  color: white;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  transition: all .2s ease;
}
a.link-as-text:hover { text-decoration: underline; font-weight: 600; }

/* ====== EXTRA: MOBIL LANDSCAPE-ANPASSNING ====== */
/* När mobilen är under 800px bred men i liggande läge
   gör vi hero:n lägre, overlay mindre och högerjusterad i top-läget */
@media only screen and (max-width: 800px) and (orientation: landscape) {
  .hero-slider {
    aspect-ratio: 16 / 9;  /* lägre hero i landscape */
  }

  /* Använd desktop-lik logik för landskapsbilder */
  .hero-slider .slide.landscape {
    width: 100% !important;
    height: auto !important;
  }

  /* Porträttbilder fyller höjden (men nu är höjden mindre) */
  .hero-slider .slide.portrait {
    height: 100% !important;
    width: auto !important;
  }

  /* Overlay mer som tablet/desktop – mindre och i hörn */
  .hero-overlay {
    width: auto !important;
    max-width: min(520px, 90%) !important;
    padding: 6px 10px !important;
    line-height: 1.25 !important;
    left: auto !important;
    transform: none !important; /* ta bort centrerings-regeln från mobilportrait */
    text-align: left !important;
  }

  .hero-overlay h3 {
    font-size: 20px !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
  }

  .hero-overlay p {
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin-top: 6px !important;
  }

  /* Top-overlay – högerjusterad som tablet/desktop */
  .hero-overlay--top-right {
    top: 15px !important;
    right: 15px !important;
    left: auto !important;
    bottom: auto !important;
  }

  /* Bottom-overlay – nere till vänster som tablet/desktop */
  .hero-overlay--bottom-left {
    bottom: 15px !important;
    left: 15px !important;
    right: auto !important;
    top: auto !important;
  }

  /* Visa pilen i landscape om du vill navigera */
  .next-slide {
    display: block !important;
  }
}