/*
=========================================================
FOOTER CSS
=========================================================
 * Innehåller styling för sidfot
 * 
 * Copyright (C) Limepark AB.
 * https://limepark.se/licensvillkor
=========================================================*/


.lp-footer {
  background-color: var(--lp-body--background);
  box-sizing: border-box;
  margin: var(--lp-spacing-xxx-large) 0 0;
  display: grid;
}

.lp-footer > .sv-layout {
  background-color: var(--lp-body--background);
}

.lp-footer > .sv-layout:nth-child(2) {
  padding: var(--lp-spacing-x-large) 0 0;
}

.lp-footer .lp-main-grid {
  padding-bottom: 0;
  padding-top: 0;
}

.lp-footer h2.subheading {
  color: var(--lp-color-brand);
  font-size: var(--lp-font-size-large);
}

.lp-footer-grid h2.subheading {
  font-size: var(--lp-font-size-x-large);
}

.lp-footer p.normal {
  color: var(--lp-font-color);
  margin: 0;
}

.lp-footer p.normal a,
.lp-footer .sv-jcrmenu-portlet a.normal {
  color: var(--lp-color-brand);
}

/* Grid */

.lp-footer-grid {
  display: grid;

  gap: var(--lp-spacing-large);
  grid-template-columns: repeat(auto-fit, minmax(min(45rem, 100%), 1fr));
}

.lp-footer-grid > .sv-layout:first-child .sv-text-portlet p.normal:last-child {
  margin-bottom: clamp(4rem, 8vw, 9rem);
}

.lp-footer-grid > .sv-layout:first-child .sv-text-portlet p.normal {
  font-weight: 300;
  font-size: var(--lp-font-size-small);
}

/*
---------------------------------------------------------
SIDFOTSMENY
---------------------------------------------------------*/

.lp-footer-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.lp-footer-menu li {
  margin-bottom: 1rem;
}

.lp-footer-menu li > a {
  display: block;
  text-decoration: none;
}

.lp-footer-menu li > a:hover {
  text-decoration: underline;
}

.lp-footer-menu .lp-icon {
  margin-right: 1rem;
}

/* Tar bort bilden som visas för externa länkar */
.lp-footer-menu img {
  display: none;
}

.lp-footer-menu:not(.lp-footer-menu--info) {
  display: flex;
  justify-content: flex-end;
  gap: 0 var(--lp-spacing);
  flex-wrap: wrap;
}

/* Sidfotsmeny info */

.lp-footer-menu.lp-footer-menu--info {
  display: flex;
  flex-wrap: wrap;
}

.lp-footer-menu.lp-footer-menu--info a.normal {
  font-size: clamp(1.4rem, 1.5vw, 1.6rem);
  font-weight: 300;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.05em;
  transition: var(--lp-transition-default);
}

.lp-footer-menu.lp-footer-menu--info li:not(:last-child) a.normal:after {
  background-color: var(--lp-font-color);
  content: '';
  display: inline-block;
  height: 0.9em;
  margin: 0 0.3em -0.1em;
  opacity: 0.8;
  width: 0.9em;

  -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D\'0%200%207%2015\'%20xmlns%3D\'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg\'%20fill%3D\'%23777\'%3E%3Cg%20%20id%3D%22done%22%20opacity%3D%22.802%22%3E%3Cg%20id%3D%22Start-niv%C3%A5-1%22%20transform%3D%22translate(-112%20-148)%22%3E%3Cpath%20id%3D%22Startsida%2FR%C3%A5d%26amp%3Bst%C3%B6d%22%20d%3D%22M113.88%20162.56l4.272-13.92h-.96l-4.272%2013.92z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  mask-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D\'0%200%207%2015\'%20xmlns%3D\'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg\'%20fill%3D\'%23777\'%3E%3Cg%20%20id%3D%22done%22%20opacity%3D%22.802%22%3E%3Cg%20id%3D%22Start-niv%C3%A5-1%22%20transform%3D%22translate(-112%20-148)%22%3E%3Cpath%20id%3D%22Startsida%2FR%C3%A5d%26amp%3Bst%C3%B6d%22%20d%3D%22M113.88%20162.56l4.272-13.92h-.96l-4.272%2013.92z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.lp-footer-menu.lp-footer-menu--info a.normal:hover {
  text-underline-offset: 0.15em;
}

/*
---------------------------------------------------------
NYHETSBREV & SUPPORT
---------------------------------------------------------*/

.lp-footer .lp-main-grid:has(.lp-footer--extra) > .sv-layout:first-child {
  display: flex;
  padding-bottom: var(--lp-spacing-x-large);
  position: relative;
  flex-wrap: wrap;
  padding-top: var(--lp-spacing-x-large);
}

.lp-footer .lp-main-grid .lp-footer--extra .sv-marketplace-sitevision-button {
  margin-bottom: 0;
}

.lp-footer .lp-main-grid:has(.lp-footer--extra) > .sv-layout:first-child:after {
  background-color: var(--lp-border-color);
  bottom: 0;
  content: '';
  display: block;
  height: 1px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  /* stylelint-disable */
  width: 100cqw;
  /* stylelint-enable */
}

.lp-footer .lp-main-grid:has(.lp-footer--extra) > .sv-layout:first-child:before {
  background-color: var(--lp-border-color);
  top: 0;
  content: '';
  display: block;
  height: 1px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  /* stylelint-disable */
  width: 100cqw;
  /* stylelint-enable */
}

.lp-footer .lp-main-grid .lp-footer--extra > .sv-layout:first-child {
  position: relative;
  padding-right: var(--lp-spacing-x-large);
}

.lp-footer .lp-main-grid .lp-footer--extra > .sv-layout:last-child {
  padding-left: var(--lp-spacing-x-large);
}

.lp-footer .lp-main-grid .lp-footer--extra > .sv-layout:first-child:after {
  content: '';
  position: absolute;
  top: calc(0px - var(--lp-spacing-x-large));
  right: 0;
  width: 1px;
  background-color: var(--lp-border-color);
  bottom: calc(0px - var(--lp-spacing-x-large));
}

.lp-footer .lp-main-grid .lp-footer--extra {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.lp-footer .lp-main-grid .lp-footer--extra > .sv-layout {
  flex: 1 1 1px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--lp-spacing);
}

.lp-footer .lp-main-grid .lp-footer--extra > .sv-layout > .sv-layout {
  flex: 2 1 1px;
  min-width: min(20rem, 100%);
}

.lp-footer .lp-main-grid .lp-footer--extra p.normal {
  margin-bottom: var(--lp-spacing-small);
  font-weight: 300;
}

.lp-footer .lp-main-grid .lp-footer--extra .sv-image-portlet {
  max-width: 100%;
  flex: 1 1 1px;
  min-width: min(15rem, 100%);
}

.lp-footer .lp-main-grid .lp-footer--extra .sv-image-portlet img {
  border-radius: var(--lp-border-radius);
  max-height: 19rem !important;

  aspect-ratio: 73 / 62;
  object-fit: cover;
}

.lp-footer .lp-main-grid .lp-footer--extra h2.subheading {
  font-size: clamp(2rem, 2vw, 2.6rem);
  font-weight: 500;
}

.lp-footer .lp-main-grid .lp-footer--extra p.normal {
  font-size: clamp(1.6rem, 1.7vw, 1.8rem);
}

.lp-footer .lp-main-grid .lp-footer--extra .env-button {
  word-break: initial;
  overflow-wrap: initial;
}

/*
---------------------------------------------------------
LOGOTYP
---------------------------------------------------------*/

.lp-footer > .sv-layout:has(> .sv-image-portlet) {
  overflow: hidden;
  padding: var(--lp-spacing-x-large) var(--lp-spacing-x-large) 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.lp-footer > .sv-layout > .sv-image-portlet {
  width: 100%;
}

.lp-footer > .sv-layout > .sv-image-portlet img {
  max-height: none !important;
  max-width: 100% !important;
}

/*
---------------------------------------------------------
ANIMATIONER
---------------------------------------------------------*/

/* stylelint-disable */

@media (prefers-reduced-motion: no-preference) and (min-width: 1200px) {

  html:not(.sv-edit-mode) .lp-footer {
    grid-auto-rows: 1fr;
  }

  html:not(.sv-edit-mode) .lp-footer > .sv-layout:nth-child(1) {
    display: flex;
    flex-direction: column;
    justify-content: end;
    position: relative;
    z-index: 3;
  }

  html:not(.sv-edit-mode) .lp-footer > .sv-layout:nth-child(2) {
    transform: translateY(-100%);
    animation-name: footerTransform100;
    animation-fill-mode: forwards;
    animation-timeline: view();
    animation-timing-function: linear;
    animation-range-start: entry 100%;
    animation-range-end: entry 200%;
    animation-duration: 1ms;
    position: relative;
    z-index: 1;
  }

  html:not(.sv-edit-mode) .lp-footer > .sv-layout:nth-child(3) {
    transform: translateY(-200%);
    animation-name: footerTransform200;
    animation-fill-mode: forwards;
    animation-timeline: view();
    animation-timing-function: linear;
    animation-range-start: entry -100%;
    animation-range-end: entry 100%;
    animation-duration: 1ms;
    position: relative;
    z-index: 2;
    margin-top: -1px;
  }
}

@keyframes footerTransform100 {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes footerTransform200 {
  from {
    transform: translateY(-200%);
  }

  to {
    transform: translateY(0);
  }
}

/* stylelint-enable */

/* Limepark 25 år */

.lp-footer .lp-footer-grid > .sv-layout:last-child .sv-image-portlet {
  margin-left: auto;
  margin-top: clamp(2rem, 8vw, 9rem);
}

.lp-footer .lp-footer-grid > .sv-layout:last-child .sv-image-portlet img {
  width: clamp(8rem, 12vw, 15rem);
}

.lp-footer .lp-footer-grid > .sv-layout:first-child {
  display: flex;
  flex-direction: column;
}

.lp-footer .lp-footer-grid > .sv-layout:first-child > .sv-jcrmenu-portlet {
  margin-top: auto;
}

.lp-footer .lp-footer-grid > .sv-layout:first-child > .sv-jcrmenu-portlet li {
  margin-bottom: 0;
}