/*
 * Veriad-anpassad styling av Klaro consent-popup.
 *
 * Lag i en inline <style> i <head> pa varje sida (~15 KB) fram till 2026-09-22.
 * Flyttad hit for att <title>, meta description och canonical ska ligga tidigt
 * i HTML:en. Innehallet ar oforandrat — ingen visuell skillnad.
 *
 * Laddas EFTER /klaro/klaro.min.css, som den overstyr.
 *
 * Fargerna speglar designtokens i src/index.css:
 *   --primary: 203 65% 38%  (Veriad-bla)
 *   --navy:    210 50% 12%
 *   --muted-foreground: 210 18% 38%
 */
/*
 * Veriad-anpassad styling av Klaro consent-popup
 * Färger speglar designtokens i src/index.css:
 *   --primary: 203 65% 38%  (Veriad-blå)
 *   --navy:    210 50% 12%
 *   --muted-foreground: 210 18% 38%
 */

/* Ingen backdrop bakom bannern — sidan syns fullt ut */
#klaro .cookie-notice::before,
#klaro .cookie-notice.cookie-modal-notice::before {
  display: none !important;
}
#klaro .cookie-modal .cm-bg {
  content: "";
  position: fixed !important;
  inset: 0 !important;
  background: hsla(210, 50%, 12%, 0.25) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 0 !important;
}

/* Ta bort browserns default focus-ring på modalen — knappar har egna fokus-stilar */
#klaro .cookie-notice.cookie-modal-notice:focus,
#klaro .cookie-notice.cookie-modal-notice:focus-visible,
#klaro .cookie-modal .cm-modal:focus,
#klaro .cookie-modal .cm-modal:focus-visible {
  outline: none !important;
}
#klaro .cookie-notice .cm-btn:focus-visible,
#klaro .cookie-modal .cm-btn:focus-visible {
  outline: 2px solid hsl(203, 65%, 38%) !important;
  outline-offset: 2px !important;
}

/* Cookie-notisen: list längs nederkanten på mobil, kort i nedre HÖGRA hörnet
 * från lg.
 *
 * VARFÖR HÖGER OCH INTE VÄNSTER (2026-09-28)
 *
 * Kravet är att kortet inte får skymma hero-knapparna eller löftesraden under
 * dem, vid både 1440x900 och 1366x768. Raden slutar y=698 på båda. Ett kort i
 * nedre vänstra hörnet med bottom 24 skulle behöva vara högst 178 px vid
 * 1440x768 och högst 46 px vid 1366x768 för att hamna helt under den — det
 * senare är omöjligt.
 *
 * Raden slutar däremot vid x=784 (1366) respektive x=828 (1440). Till höger om
 * den är det fritt. Kortet ligger därför i höger hörn, och ovanför "?"-knappen
 * (FAB, bottom-right, z-40) så att de inte krockar.
 *
 * Ingenting i Klaros logik är rört: samma tre val, samma consent-signaler,
 * samma 1,5-sekundersfördröjning. Enbart presentation. */
#klaro .cookie-notice,
#klaro .cookie-notice.cookie-modal-notice {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  max-height: 20vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: hsl(210, 50%, 12%) !important;
  box-shadow: 0 -6px 24px hsla(210, 50%, 12%, 0.14) !important;
  padding: 0.75rem 1rem !important;
  font-family: "DM Sans", system-ui, -apple-system, sans-serif !important;
  border: 0 !important;
  border-top: 1px solid hsl(210, 20%, 88%) !important;
  animation: veriadCookieSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Klaro satter fokus pa notisen nar den visas. Som fullbreddsbanner lastes
   webblasarens fokusring som en tunn linje langs overkanten; runt ett kort ramar
   den in hela rutan i blatt och ser ut som ett felmeddelande. Knapparna har egna
   fokusstilar (se :focus-visible ovan), sa inget tangentbordsstod gar forlorat. */
#klaro .cookie-notice:focus,
#klaro .cookie-notice:focus-visible {
  outline: none !important;
}

@keyframes veriadCookieSlideUp {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Titeln injiceras via HTML i description.
 *
 * På mobil är den visuellt dold men KVAR i DOM:en — den bär dialogens
 * tillgängliga namn via aria-labelledby="id-cookie-title". Tas den bort
 * eller sätts till display:none förlorar dialogen sitt namn igen
 * (Lighthouse: "aria-dialog-name"). Clip-tekniken behåller det. */
#klaro .cookie-notice .cn-body .cn-title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
}

@media (min-width: 1024px) {
  #klaro .cookie-notice .cn-body .cn-title {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 0.375rem 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    display: block !important;
    font-family: "Plus Jakarta Sans", "DM Sans", system-ui, sans-serif !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
    color: hsl(210, 50%, 12%) !important;
    letter-spacing: -0.01em;
  }
}

/* Titel i den fulla detaljmodalen ("Anpassa") */
#klaro .cookie-modal .cm-modal .cm-header h1,
#klaro .cookie-modal .cm-modal .cm-header h2 {
  font-family: "Plus Jakarta Sans", "DM Sans", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  line-height: 1.3 !important;
  color: hsl(210, 50%, 12%) !important;
  margin: 0 !important;
  letter-spacing: -0.01em;
}

/* Brödtext. Mindre grad i kortet än i modalen — 420 px är en smalare spalt. */
#klaro .cookie-notice .cn-body p {
  font-size: 0.8125rem !important;
  line-height: 1.5 !important;
  color: hsl(210, 18%, 38%) !important;
  margin: 0 !important;
}
#klaro .cookie-modal .cm-modal p {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: hsl(210, 18%, 38%) !important;
  margin: 0 0 1rem 0 !important;
}

/* Länkar (t.ex. integritetspolicy) */
#klaro .cookie-notice a,
#klaro .cookie-modal a {
  color: hsl(203, 65%, 38%) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
#klaro .cookie-notice a:hover,
#klaro .cookie-modal a:hover { text-decoration: underline !important; }

/* Knapp-rad-layout i kortet — allt på en rad, som i den tidigare bannern.
 *
 * Neka och Acceptera delar bredd lika; det ska inte vara lättare att samtycka
 * än att neka. Anpassa ligger kvar som diskret länkknapp längst till vänster.
 * En enda rad håller kortet lågt nog att hero-CTA:erna syns ovanför det. */
#klaro .cookie-notice .cn-ok {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 0.875rem !important;
  gap: 0.5rem !important;
}
#klaro .cookie-notice .cn-buttons {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-wrap: nowrap !important;
  gap: 0.5rem !important;
}
#klaro .cookie-notice .cn-buttons .cm-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
#klaro .cookie-modal .cm-footer-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.625rem !important;
  justify-content: flex-end !important;
}

/* Knappar — gemensam bas */
#klaro .cookie-notice .cm-btn,
#klaro .cookie-modal .cm-btn {
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  padding: 0.875rem 1.5rem !important;
  border-radius: 9px !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

/* Primärknapp — Acceptera alla (Veriad-blå) */
#klaro .cookie-notice .cm-btn.cm-btn-success,
#klaro .cookie-notice .cm-btn.cm-btn-accept-all,
#klaro .cookie-modal .cm-btn.cm-btn-success,
#klaro .cookie-modal .cm-btn.cm-btn-accept-all,
#klaro .cookie-modal .cm-btn.cm-btn-accept {
  background: hsl(203, 65%, 38%) !important;
  color: #ffffff !important;
  border-color: hsl(203, 65%, 38%) !important;
}
#klaro .cookie-notice .cm-btn.cm-btn-success:hover,
#klaro .cookie-notice .cm-btn.cm-btn-accept-all:hover,
#klaro .cookie-modal .cm-btn.cm-btn-success:hover,
#klaro .cookie-modal .cm-btn.cm-btn-accept-all:hover,
#klaro .cookie-modal .cm-btn.cm-btn-accept:hover {
  background: hsl(203, 65%, 32%) !important;
  border-color: hsl(203, 65%, 32%) !important;
}

/* Sekundärknapp — Neka alla (vit med ram) */
#klaro .cookie-notice .cm-btn.cn-decline,
#klaro .cookie-notice .cm-btn.cm-btn-decline,
#klaro .cookie-notice .cm-btn.cm-btn-danger,
#klaro .cookie-modal .cm-btn.cm-btn-decline,
#klaro .cookie-modal .cm-btn.cm-btn-danger {
  background: #ffffff !important;
  color: hsl(210, 50%, 12%) !important;
  border: 1px solid hsl(210, 20%, 80%) !important;
}
#klaro .cookie-notice .cm-btn.cn-decline:hover,
#klaro .cookie-notice .cm-btn.cm-btn-decline:hover,
#klaro .cookie-notice .cm-btn.cm-btn-danger:hover,
#klaro .cookie-modal .cm-btn.cm-btn-decline:hover,
#klaro .cookie-modal .cm-btn.cm-btn-danger:hover {
  background: hsl(210, 20%, 97%) !important;
  border-color: hsl(210, 20%, 65%) !important;
}

/* Tertiär — Anpassa (learnMore) — diskret länk-knapp till vänster */
#klaro .cookie-notice .cm-btn.cm-btn-info,
#klaro .cookie-notice .cm-btn.cm-btn-lern-more,
#klaro .cookie-notice .cn-learn-more {
  background: transparent !important;
  color: hsl(203, 65%, 38%) !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  padding: 0.875rem 0.5rem !important;
}
#klaro .cookie-notice .cm-btn.cm-btn-info:hover,
#klaro .cookie-notice .cm-btn.cm-btn-lern-more:hover,
#klaro .cookie-notice .cn-learn-more:hover {
  background: transparent !important;
  color: hsl(203, 65%, 32%) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* Knapparna i kortet är nättare än modalens — spalten är 420 px, inte 640.
   Ligger sist av knappreglerna: samma specificitet som baserna ovan, så det är
   källordningen som avgör. Modalens knappar är orörda. */
#klaro .cookie-notice .cm-btn {
  font-size: 0.875rem !important;
  padding: 0.625rem 0.75rem !important;
}
#klaro .cookie-notice .cm-btn.cm-btn-info,
#klaro .cookie-notice .cm-btn.cm-btn-lern-more,
#klaro .cookie-notice .cn-learn-more {
  padding: 0.625rem 0.25rem !important;
}

/* Detaljmodal (när "Anpassa" klickats) */
#klaro .cookie-modal .cm-modal {
  border-radius: 16px !important;
  max-width: 640px !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
  background: #ffffff !important;
  color: hsl(210, 50%, 12%) !important;
  box-shadow:
    0 25px 60px -15px hsla(210, 50%, 12%, 0.35),
    0 10px 25px -10px hsla(210, 50%, 12%, 0.20) !important;
}
#klaro .cookie-modal .cm-header { padding: 1.5rem 1.5rem 1rem !important; }
#klaro .cookie-modal .cm-body { padding: 0 1.5rem !important; }
#klaro .cookie-modal .cm-footer { padding: 1rem 1.5rem 1.5rem !important; }

/* Tjänstetoggles */
#klaro .cookie-modal .cm-list-title {
  color: hsl(210, 50%, 12%) !important;
  font-weight: 600 !important;
}
#klaro .cookie-modal .cm-list-description { color: hsl(210, 18%, 38%) !important; }

/* Toggle-färg när tillåten = Veriad-blå (default Klaro-grön) */
#klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider,
#klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider {
  background-color: hsl(203, 65%, 38%) !important;
}

/* MOBIL OCH SURFPLATTA (< 1024 px) — listen.
 *
 * Höjdtaket är 20 vh, alltså 168 px vid 844. Det är vad som krävs för att
 * löftesraden under hero-knapparna ska synas hel ovanför vecket: raden slutar
 * y=622, och 844 − 168 = 676 px synlig yta.
 *
 * Brödtexten får intern scroll om den ändå inte ryms, så att titeln och alla
 * tre valen alltid är synliga. Ingen scroll-låsning på sidan bakom, ingen
 * mörkläggning. */
@media (max-width: 1023px) {
  #klaro .cookie-notice,
  #klaro .cookie-notice.cookie-modal-notice {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  #klaro .cookie-notice .cn-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  #klaro .cookie-notice .cn-body p {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    font-size: 0.8125rem !important;
    line-height: 1.45 !important;
  }
  /* Anpassa till vänster, Neka och Acceptera till höger med samma bredd.
     Ingen av dem får vara svagare än den andra — se knappstilarna ovan. */
  #klaro .cookie-notice .cn-ok {
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    gap: 0.75rem !important;
  }
  /* Knapparna tar den bredd som blir över när Anpassa fått sin, och delar den
     lika. Med fast bredd kapades "Acceptera alla" på 390 px. */
  #klaro .cookie-notice .cn-buttons {
    flex: 1 1 auto !important;
  }
  #klaro .cookie-notice .cn-buttons .cm-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  #klaro .cookie-notice .cm-btn {
    padding: 0.5rem 0.625rem !important;
    font-size: 0.8125rem !important;
  }
  #klaro .cookie-notice .cn-learn-more {
    flex: 0 0 auto !important;
    padding: 0.5rem 0 !important;
  }
  /* Modalen bakom "Anpassa" staplar sina knappar på smal skärm. */
  #klaro .cookie-modal .cm-footer-buttons {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #klaro .cookie-modal .cm-btn {
    width: 100% !important;
  }
}

/* DESKTOP (≥ 1024 px) — kort i nedre HÖGRA hörnet, ovanför "?"-knappen.
 * Se resonemanget överst i filen om varför det inte kan ligga till vänster. */
@media (min-width: 1024px) {
  #klaro .cookie-notice,
  #klaro .cookie-notice.cookie-modal-notice {
    bottom: 6rem !important;      /* ovanför FAB:en, som är 56 px + 24 px marginal */
    right: 1.5rem !important;
    left: auto !important;
    width: calc(100% - 3rem) !important;
    max-width: 360px !important;
    max-height: none !important;
    border-radius: 0.5rem !important;
    border: 1px solid hsl(210, 20%, 90%) !important;
    border-top: 1px solid hsl(210, 20%, 90%) !important;
    box-shadow: 0 18px 44px hsla(210, 50%, 12%, 0.18) !important;
    padding: 1rem 1.125rem !important;
  }
}