/* ==========================================================
   JÖNKÖPINGS KOMMUN – STARTSIDANS HUVUDINGÅNGAR
   Version: moderniserade kort

   Behåller befintlig Sitevision-disposition.
   Påverkar endast området .c33346 på startsidan.

   Färger:
   Midnattsblå:       #183C49
   Vätterblå webb:    #00659E
   Mörk Vätterblå:    #004D74
   Varmgrå:           #EDEAE4
   ========================================================== */


/* ==========================================================
   1. VARIABLER
   ========================================================== */

html.sv-template-startsida-ny {
  --jk-midnight: #183C49;
  --jk-blue: #00659E;
  --jk-blue-dark: #004D74;

  --jk-warm-grey: #EDEAE4;
  --jk-white: #FFFFFF;
  --jk-text: #202020;

  --jk-border: rgba(24, 60, 73, 0.16);
  --jk-border-hover: #00659E;

  --jk-radius: 10px;

  --jk-shadow:
    0 1px 2px rgba(24, 60, 73, 0.04),
    0 3px 8px rgba(24, 60, 73, 0.055);

  --jk-shadow-hover:
    0 2px 4px rgba(24, 60, 73, 0.06),
    0 8px 18px rgba(24, 60, 73, 0.09);
}


/* ==========================================================
   2. SEKTIONENS BAKGRUND

   Vi ändrar inte bredd, grid eller kolumner.
   Sitevision får fortsatt styra dispositionen.
   ========================================================== */

html.sv-template-startsida-ny body .c33346 {
  background-color: var(--jk-warm-grey) !important;
}


/* ==========================================================
   3. AVSTÅND MELLAN BEFINTLIGA RADER
   ========================================================== */

html.sv-template-startsida-ny body .c33346 .sv-row {
  margin-bottom: 0.9rem !important;
}

html.sv-template-startsida-ny body .c33346 .sv-row:last-child {
  margin-bottom: 0 !important;
}


/* ==========================================================
   4. KORTEN
   ========================================================== */

html.sv-template-startsida-ny body .c33346 a {
  position: relative !important;

  width: 100% !important;
  min-height: 76px !important;

  padding-top: 0.9rem !important;
  padding-right: 3.6rem !important;
  padding-bottom: 0.9rem !important;
  padding-left: 1.1rem !important;

  display: flex !important;
  align-items: center !important;

  gap: 1rem !important;

  /*
   Viktigt:
   background-color används separat så att background-image
   med pilen inte skrivs över.
  */
  background-color: var(--jk-white) !important;

  /*
   Inbäddad SVG-pil.
   Ingen extern ikonfil behöver laddas.
   Pilen är dekorativ och tillför ingen text för skärmläsare.
  */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20' viewBox='0 0 12 20' fill='none'%3E%3Cpath d='M2 2L10 10L2 18' stroke='%2300659E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;

  background-repeat: no-repeat !important;

  background-position:
    right 1.35rem center !important;

  background-size:
    9px 15px !important;

  color: var(--jk-text) !important;

  border:
    1px solid
    var(--jk-border) !important;

  border-radius:
    var(--jk-radius) !important;

  box-shadow:
    var(--jk-shadow) !important;

  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;

  text-decoration: none !important;

  cursor: pointer !important;

  overflow: hidden !important;

  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease,
    color 160ms ease,
    background-position 160ms ease !important;
}


/* ==========================================================
   5. IKONER

   Ingen färgad ruta/platta bakom ikonen.
   ========================================================== */

html.sv-template-startsida-ny body .c33346 a img {
  flex: 0 0 auto !important;

  width: 43px !important;
  height: 43px !important;

  max-width: 43px !important;
  max-height: 43px !important;

  padding: 0 !important;
  margin: 0 !important;

  object-fit: contain !important;

  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;
}


/* Om någon ikon ligger som SVG direkt i länken */

html.sv-template-startsida-ny body .c33346 a > svg {
  flex: 0 0 auto !important;

  width: 43px !important;
  height: 43px !important;

  max-width: 43px !important;
  max-height: 43px !important;

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;
}


/* ==========================================================
   6. STÄNG AV EVENTUELLA BEFINTLIGA PSEUDOPILAR

   Vi använder SVG-bakgrunden i stället.
   ========================================================== */

html.sv-template-startsida-ny body .c33346 a::after {
  content: none !important;
  display: none !important;
}


/* ==========================================================
   7. HOVER

   Kortet lyfter bara mycket diskret.
   ========================================================== */

html.sv-template-startsida-ny body .c33346 a:hover {
  background-color: var(--jk-white) !important;

  /*
   Flyttar pilen något åt höger.
  */
  background-position:
    right 1.05rem center !important;

  color: var(--jk-midnight) !important;

  border-color:
    var(--jk-border-hover) !important;

  box-shadow:
    var(--jk-shadow-hover) !important;

  transform:
    translateY(-2px) !important;

  text-decoration: none !important;
}


/* ==========================================================
   8. TANGENTBORDSFOKUS

   Ska vara tydligare än hover.
   ========================================================== */

html.sv-template-startsida-ny body .c33346 a:focus-visible {
  background-color:
    var(--jk-white) !important;

  background-position:
    right 1.35rem center !important;

  color:
    var(--jk-midnight) !important;

  border-color:
    var(--jk-blue-dark) !important;

  outline:
    3px solid
    var(--jk-blue-dark) !important;

  outline-offset:
    3px !important;

  box-shadow:
    none !important;

  transform:
    none !important;

  text-decoration:
    none !important;
}


/* ==========================================================
   9. KLICK / ACTIVE
   ========================================================== */

html.sv-template-startsida-ny body .c33346 a:active {
  transform:
    translateY(0) !important;

  box-shadow:
    0 1px 3px
    rgba(24, 60, 73, 0.08) !important;
}


/* ==========================================================
   10. EVENTUELLA TEXTELEMENT INUTI LÄNKEN

   Säkerställer att Sitevisions egna textstilar
   inte färgar eller understryker texten annorlunda.
   ========================================================== */

html.sv-template-startsida-ny body .c33346 a span,
html.sv-template-startsida-ny body .c33346 a strong,
html.sv-template-startsida-ny body .c33346 a p {
  color: inherit !important;

  font-weight: inherit !important;
  line-height: inherit !important;

  text-decoration: none !important;
}


/* Undvik extra marginal om texten ligger i <p> */

html.sv-template-startsida-ny body .c33346 a p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* ==========================================================
   11. SURFPLATTA

   Sitevision styr fortfarande om kolumnerna går från
   tre till två etc.
   ========================================================== */

@media (max-width: 900px) {

  html.sv-template-startsida-ny body .c33346 a {
    min-height: 72px !important;

    padding-top: 0.8rem !important;
    padding-right: 3.25rem !important;
    padding-bottom: 0.8rem !important;
    padding-left: 1rem !important;

    gap: 0.9rem !important;

    background-position:
      right 1.15rem center !important;

    font-size: 1rem !important;
  }


  html.sv-template-startsida-ny body .c33346 a img,
  html.sv-template-startsida-ny body .c33346 a > svg {
    width: 40px !important;
    height: 40px !important;

    max-width: 40px !important;
    max-height: 40px !important;
  }


  html.sv-template-startsida-ny body .c33346 a:hover {
    background-position:
      right 0.95rem center !important;
  }
}


/* ==========================================================
   12. MOBIL
   ========================================================== */

@media (max-width: 640px) {

  html.sv-template-startsida-ny body .c33346 .sv-row {
    margin-bottom: 0.75rem !important;
  }


  html.sv-template-startsida-ny body .c33346 a {
    min-height: 68px !important;

    padding-top: 0.75rem !important;
    padding-right: 3rem !important;
    padding-bottom: 0.75rem !important;
    padding-left: 0.9rem !important;

    gap: 0.8rem !important;

    background-position:
      right 1rem center !important;

    background-size:
      8px 14px !important;

    border-radius:
      8px !important;

    font-size:
      1rem !important;
  }


  html.sv-template-startsida-ny body .c33346 a img,
  html.sv-template-startsida-ny body .c33346 a > svg {
    width: 38px !important;
    height: 38px !important;

    max-width: 38px !important;
    max-height: 38px !important;
  }


  html.sv-template-startsida-ny body .c33346 a:hover {
    background-position:
      right 0.8rem center !important;
  }
}


/* ==========================================================
   13. SMALA MOBILER / HÖG ZOOM

   Hjälper vid reflow och förstoring.
   ========================================================== */

@media (max-width: 400px) {

  html.sv-template-startsida-ny body .c33346 a {
    min-height: 64px !important;

    padding-top: 0.7rem !important;
    padding-right: 2.8rem !important;
    padding-bottom: 0.7rem !important;
    padding-left: 0.8rem !important;

    gap: 0.7rem !important;

    background-position:
      right 0.9rem center !important;

    font-size:
      1rem !important;
  }


  html.sv-template-startsida-ny body .c33346 a img,
  html.sv-template-startsida-ny body .c33346 a > svg {
    width: 36px !important;
    height: 36px !important;

    max-width: 36px !important;
    max-height: 36px !important;
  }
}


/* ==========================================================
   14. TOUCH-ENHETER

   Hoverförflyttningen behövs inte när hover saknas.
   ========================================================== */

@media (hover: none) {

  html.sv-template-startsida-ny body .c33346 a:hover {
    transform: none !important;

    background-position:
      right 1.35rem center !important;

    box-shadow:
      var(--jk-shadow) !important;
  }
}


/* ==========================================================
   15. REDUCERAD RÖRELSE

   Respekterar användarens systeminställning.
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  html.sv-template-startsida-ny body .c33346 a {
    transition: none !important;
  }


  html.sv-template-startsida-ny body .c33346 a:hover,
  html.sv-template-startsida-ny body .c33346 a:active {
    transform:
      none !important;
  }


  html.sv-template-startsida-ny body .c33346 a:hover {
    background-position:
      right 1.35rem center !important;
  }
}