/*
-------------------------------------------
style.css
-------------------------------------------

  Beskrivning: Grundläggande strilregler
	Skapad av: Webbfröken AB
  Webbadress: https://webbfroken.se

------------------------------------------- */

html {
  font-size: 10px;
}

html:not(.sv-edit-mode) {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

[id^="h-"] {
  scroll-margin-top: var(--wf-spacing-80);
}


/*
-------------------------------------------
Focus visible
------------------------------------------- */

html:not(.sv-edit-mode) :focus-visible {
  box-shadow: 0 0 0 var(--env-focus-offset) var(--env-focus-inner-color);
  outline: var(--env-focus-size) solid var(--env-focus-outline-color);
  outline-offset: var(--env-focus-offset);
}


/*
-------------------------------------------
Layout & avstånd
------------------------------------------- */

main {
  margin: var(--wf-spacing-80) var(--wf-page-edge-spacing) 0;
}

main *:has(+ .wf-more-info),
main *:has(+ .sv-marketplace-limepark-page-feedback) {
  margin-bottom: var(--wf-spacing-80);
}


/* Avstånd nertill i innehållsytor */
.pagecontent > .sv-portlet,
.pagecontent > .sv-layout,
.pagecontent > .sv-custom-module,
.pagecontent > .sv-collapsible-content,
.sv-login-form,
[class*='wf-box-'] {
  margin-bottom: var(--wf-spacing-40);
}


/* Extra avstånd under knappar */
.pagecontent .sv-marketplace-sitevision-button {
  margin-bottom: var(--wf-spacing-80);
}


/* Mellanrum för horizontella layouter */
.sv-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wf-spacing-20);
}

.sv-horizontal:after {
  display: none; /* Nolla Sitevisions clearfix */
}

.sv-horizontal:has(a.env-button) {
  margin-bottom: var(--wf-spacing-80);
}

.sv-horizontal:has(a.env-button) .sv-marketplace-sitevision-button {
  margin-bottom: 0;
}


/* Maxbredd för ingresser i mallar med full bredd */
.sv-column-12 .pagecontent .sv-font-ingress {
  max-width: var(--wf-grid-8-col);
}

/* Fix för push/pull som inte tar plats utan innehåll */
.sv-push-6 {
  min-height: 1px;
}

/* Minbredd för sidinnehållet i en 6-kolumnare */
@media screen and (min-width: 767px) {
  .sv-row > .sv-column-6:only-child:not([class*='sv-push-']) {
    min-width: 767px;
  }
}

/* Fix för avstånd i Mina sidor-box på självservicesidan */
.sv-template-all-sjalvservice .wf-box-deco-standard:has(.wf-deco-btn-my-pages) p.normal {
  margin-bottom: 1em;
}


/*
-------------------------------------------
Textstorlekar
------------------------------------------- */

.env-ui-text-heading {
  font-size: var(--wf-font-size-h1);
  line-height: 1.2;
}

.env-ui-text-sectionheading {
  font-size: var(--wf-font-size-h2);
  line-height: 1.2;
}

.env-ui-text-subheading {
  font-size: var(--wf-font-size-h3);
  line-height: 1.2;
}

.sv-font-rubrik-4 {
  font-size: var(--wf-font-size-h4);
  line-height: 1.2;
  font-family: var(--env-ui-text-subheading-font-family);
  font-weight: var(--env-ui-text-subheading-font-weight);
  color: var(--env-ui-text-subheading-font-color);
}

.sv-font-ingress {
  font-size: var(--wf-font-size-preamble);
}

.normal {
  font-size: var(--wf-font-size-normal);
}

.sv-font-liten-text {
  font-size: var(--wf-font-size-small);
}


/*
-------------------------------------------
Typografi
------------------------------------------- */

.pagecontent .env-ui-text-heading,
.pagecontent .env-ui-text-sectionheading {
  margin-bottom: var(--wf-spacing-20) !important;
}

.pagecontent .env-ui-text-subheading,
.pagecontent .sv-font-rubrik-4 {
  margin-bottom: var(--wf-spacing-10) !important;
}

.pagecontent .sv-font-ingress {
  margin: 0 0 var(--wf-spacing-40) !important;
}

.pagecontent .sv-font-liten-text {
  font-size: var(--wf-font-size-small);
}

.pagecontent p.normal,
.pagecontent .sv-use-margins p.normal:last-child {
  margin: 0 0 var(--wf-spacing-40);
}


/*
-------------------------------------------
Login
------------------------------------------- */

.sv-login-portlet fieldset {
  padding: 0;
}


/*
-------------------------------------------
Kaklösning
------------------------------------------- */

body > .env-modal-dialog .env-modal-dialog__content {
  background-color: #fff;
}

body > .env-modal-dialog .env-modal-dialog__content > header {
  padding: var(--wf-spacing-60) var(--wf-spacing-40) 0;
  border: none;
}

body > .env-modal-dialog .env-modal-dialog__content > .env-modal-dialog__body {
  padding: var(--wf-spacing-20) var(--wf-spacing-40);
}

body > .env-modal-dialog .env-modal-dialog__content >  footer {
  padding: var(--wf-spacing-20) var(--wf-spacing-40) var(--wf-spacing-60);
  border: none;
}

body > .env-modal-dialog .env-modal-dialog__header__title {
  font-family: var(--wf-heading-font);
  color: var(--june-asfalt);
  font-weight: bold;
}


/*
-------------------------------------------
iFrame
------------------------------------------- */

iframe {
  border: none;
}


/*
-------------------------------------------
Länk med pil
------------------------------------------- */

.wf-link-chevron a {
  align-items: center;
  display: flex;
  font-family: var(--wf-heading-font);
  font-size: var(--wf-font-size-normal-small);
  font-weight: 500;
  color: var(--june-asfalt);

  gap: var(--wf-spacing-10);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.wf-link-chevron a::after {
  background-image: var(--wf-chevron-right-june-asfalt);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  display: block;
  height: 1em;
  width: 1em;
}

.env-block-secondary .wf-link-chevron a::after {
  background-image: var(--wf-chevron-right-212121);
}

/* Hover */
.wf-link-chevron a:hover {
  text-decoration-thickness: 2px;
}

/* Specifikt för länk i dekorationen uppmaning */
.wf-box-deco-warning .wf-link-chevron a {
  color: var(--wf-color-222);
}

/* Specifikt för alla länkar med pil på startsidan */
.sv-template-startsida .wf-link-chevron p.normal {
  margin-bottom: 0;
}


/* Animering */
@media (prefers-reduced-motion: no-preference) {
  .wf-link-chevron a::after {
    transition: transform 0.3s ease;
  }
  
  .wf-link-chevron a:hover::after {
    transform: translateX(.1em);
  }
}


/*
-------------------------------------------
Bilder
------------------------------------------- */

.pagecontent > .sv-image-portlet img {
  border-radius: var(--wf-radius-large);
}

/* Bildtext */
p.sv-portlet-image-caption {
  font-size: var(--wf-font-size-small);
  margin-top: .5em;
}


/*
-------------------------------------------
Publiceringsdatum
------------------------------------------- */

.wf-publish-date {
  background-color: var(--june-sand-05);
  border-radius: 0 0 var(--wf-radius-large) 0;
  display: inline-block;
  margin-bottom: var(--wf-spacing-80);
  position: relative;
  padding-right: var(--wf-spacing-40);
  padding-top: var(--wf-spacing-20);
  padding-bottom: var(--wf-spacing-20);
  z-index: 1;
}

.wf-publish-date::before {
  content: '';
  margin-left: -100vw;
  height: 100%;
  width: 100vw;
  background-color: var(--june-sand-05);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.wf-publish-date > p {
  line-height: 1;
  margin: 0;
  padding-right: var(--wf-spacing-40);
  font-size: var(--wf-font-size-normal);
}


/* Specifikt för mallen Driftinfo */
.sv-template-driftinfo .wf-publish-date {
  margin-bottom: var(--wf-spacing-40);
}


/*
-------------------------------------------
Punkt- och numrerad lista
------------------------------------------- */

/* Avstånd */
.pagecontent ul.normal,
.pagecontent ol.normal,
.pagecontent ul.normal:last-child,
.pagecontent ol.normal:last-child,
.pagecontent ul.sv-font-ingress,
.pagecontent ol.sv-font-ingress,
.pagecontent ul.sv-font-ingress:last-child,
.pagecontent ol.sv-font-ingress:last-child {
  margin-bottom: var(--wf-spacing-40);
}

.pagecontent ul.normal,
.pagecontent ol.normal,
.pagecontent ul.sv-font-ingress,
.pagecontent ol.sv-font-ingress {
  padding-left: calc(var(--wf-spacing-40) + 1em);
}

.pagecontent ul.normal li,
.pagecontent ol.normal li,
.pagecontent ul.sv-font-ingress li,
.pagecontent ol.sv-font-ingress li {
  margin: var(--wf-spacing-20) 0;
  padding-left: .25em;
}

.pagecontent ul.normal li:last-child,
.pagecontent ol.normal li:last-child,
.pagecontent ol.sv-font-ingress li:last-child,
.pagecontent ol.sv-font-ingress li:last-child {
  margin-bottom: 0;
}


/* Punktlista */
.pagecontent ul.normal li,
.pagecontent ul.sv-font-ingress li {
  list-style: none;
  position: relative;
}

.pagecontent ul.normal li:before,
.pagecontent ul.sv-font-ingress li:before {
  background-color: var(--june-mossa);
  border-radius: var(--wf-radius-small) 0 var(--wf-radius-small) 0;
  content: '';
  display: inline;
  height: calc(var(--wf-radius-small) * 2);
  left: -.75em;
  position: absolute;
  top: 0.6em;
  width: calc(var(--wf-radius-small) * 2);
}


/* Numrerad lista */
.pagecontent ol.normal li::marker,
.pagecontent ol.sv-font-ingress li::marker {
  color: var(--june-mossa);
  font-family: var(--wf-heading-font);
  font-weight: bold;
}

.pagecontent ol.normal ol, 
.pagecontent ol.sv-font-ingress ol {
  list-style: circle;
}


/* Förtydligad numrerad lista */
.pagecontent ol.wf-ol-decorated {
  list-style: circle;
}
.pagecontent ol.wf-ol-decorated.normal {
  list-style: none;
  counter-reset: level1;
  padding-left: var(--wf-spacing-120);
}

.pagecontent ol.wf-ol-decorated.normal > li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 3em;
}

.pagecontent ol.wf-ol-decorated.normal > li::before {
  content: counter(level1);
  counter-increment: level1;
  background-color: var(--june-mossa-10);
  border-radius: 50%;
  font-family: var(--wf-heading-font);
  font-weight: bold;
  font-size: var(--wf-font-size-h4);
  color: var(--june-mossa);
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--wf-spacing-80);
  width: var(--wf-spacing-80);
  position: absolute;
  left: calc(var(--wf-spacing-120) * -1 + .5em);
}

/* Punkt- och numrerad lista - Mobil */
@media screen and (max-width: 767px) {
  .pagecontent ol.wf-ol-decorated.normal > li {
    justify-content: flex-start;
  }
}




/* Test */
.wf-tab-sticky-heading {
  position: fixed;
  top: 0;
  margin-left: calc(var(--wf-page-edge-spacing) * -1 - 2px);
  z-index: 9999;
  padding: 1em var(--wf-page-edge-spacing);
  font-weight: bold;
  font-size: var(--wf-font-size-h4);
  font-family: var(--wf-heading-font);
  color: var(--june-mossa);
  border-radius: 0 0 17px 17px;
  border: 2px solid var(--june-mossa-10);
  border-top: 0;
  background: #fff;
}