/* /styles/footer.css
   =========================================================
   Varmehjælp – footer
   ========================================================= */

.site-footer{
  width:100%;
  margin:0 0 0;
  padding:0;

  background:#fff;
  border:0;
}


/* =========================================================
   HOVEDOMRÅDE
   ========================================================= */

.footer-main{
  width:min(var(--max), calc(100% - (var(--gutter) * 2)));
  margin:0 auto;

  display:grid;
  grid-template-columns:1.1fr 1fr 1fr .9fr;
  gap:0;

  padding:48px 0 40px;
}


/* =========================================================
   KOLONNER
   ========================================================= */

.footer-col{
  min-width:0;
  padding:0 28px;

  border-left:1px solid var(--line);
}

.footer-col:first-child{
  padding-left:0;
  border-left:0;
}

.footer-col:last-child{
  padding-right:0;
}


/* =========================================================
   LOGO
   ========================================================= */

.footer-brand{
  display:flex;
  align-items:center;
}

.footer-brand-logo{
  display:block;

  width:300px;
  max-width:100%;
  height:auto;

  margin:0;
}


/* =========================================================
   OVERSKRIFTER
   ========================================================= */

.footer-title{
  margin:2px 0 20px;

  font-size:13px;
  font-weight:700;
  line-height:1.2;

  letter-spacing:.04em;
  text-transform:uppercase;

  color:rgba(32,32,33,.84);
}


/* =========================================================
   LISTER
   ========================================================= */

.footer-list{
  display:grid;
  gap:13px;

  margin:0;
  padding:0;

  list-style:none;
}

.footer-list li{
  margin:0;
}


/* =========================================================
   HURTIGE LINKS
   ========================================================= */

.footer-link{
  display:flex;
  align-items:center;
  gap:10px;

  font-size:13.5px;
  line-height:1.45;

  color:rgba(32,32,33,.68);
  text-decoration:none;
}

.footer-link::before{
  content:"›";

  color:var(--accent);

  font-size:20px;
  font-weight:500;
  line-height:.9;
}

.footer-link:hover{
  color:rgba(32,32,33,.92);
}


/* =========================================================
   KONTAKT
   ========================================================= */

.footer-contact-list{
  gap:16px;
}

.footer-contact-list li{
  display:flex;
  align-items:center;
}

.footer-contact{
  width:100%;

  display:flex;
  align-items:center;
  gap:12px;

  font-size:13.5px;
  line-height:1.45;

  color:rgba(32,32,33,.68);
  text-decoration:none;
}

.footer-contact:hover{
  color:rgba(32,32,33,.92);
}

.footer-contact svg{
  width:18px;
  height:18px;

  flex:0 0 18px;

  fill:none;
  stroke:var(--accent);
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.footer-contact span{
  line-height:1.45;
}


/* =========================================================
   MÅLGRUPPE
   ========================================================= */

.footer-audience-list li{
  display:flex;
  align-items:center;
  gap:10px;

  font-size:13.5px;
  line-height:1.45;

  color:rgba(32,32,33,.68);
}

.footer-audience-list li::before{
  content:"›";

  color:var(--accent);

  font-size:20px;
  font-weight:500;
  line-height:.9;
}


/* =========================================================
   BUNDLINJE
   ========================================================= */

.footer-bottom{
  width:100%;
  margin:0;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;

  padding:
    17px max(var(--gutter), calc((100% - var(--max)) / 2))
    18px;

  box-sizing:border-box;
  border-top:1px solid var(--line);
}

.footer-bottom{
  width:calc(100% + 4px);
  margin-left:-2px;
}

.footer-copy{
  margin:0;

  font-size:12.5px;
  line-height:1.4;

  color:rgba(32,32,33,.56);
}

.footer-copy span{
  margin:0 4px;
}

.footer-copy a{
  color:#b9820e;
  font-weight:500;
  text-decoration:none;
}

.footer-copy a:hover{
  text-decoration:underline;
}


/* =========================================================
   SOCIALE MEDIER
   ========================================================= */

.footer-social{
  margin-left:auto;

  display:flex;
  align-items:center;
  gap:16px;
}

.site-footer .footer-social a,
.site-footer .footer-social a:visited{
  width:28px;
  height:28px;

  display:grid;
  place-items:center;

  color:var(--social);
  text-decoration:none;
}

.site-footer .footer-social a:hover{
  color:#0f6f98;
}

.site-footer .footer-social svg{
  width:18px;
  height:18px;

  fill:currentColor;
  stroke:currentColor;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:980px){

  .footer-main{
    grid-template-columns:1fr 1fr;
    row-gap:38px;
  }

  .footer-col{
    padding:0 28px;
  }

  .footer-col:nth-child(odd){
    padding-left:0;
    border-left:0;
  }

  .footer-brand-logo{
    width:260px;
  }
}


/* =========================================================
   MOBIL
   ========================================================= */

@media (max-width:640px){

  .site-footer{
    margin-top:24px;
  }

  .footer-main{
    grid-template-columns:1fr;
    gap:0;

    padding:34px 0 28px;
  }

  .footer-col,
  .footer-col:first-child,
  .footer-col:nth-child(odd),
  .footer-col:last-child{
    padding:0;
    border-left:0;
  }

  .footer-col + .footer-col{
    margin-top:28px;
    padding-top:28px;

    border-top:1px solid rgba(32,32,33,.08);
  }

  .footer-brand{
    justify-content:center;
  }

  .footer-brand-logo{
    width:240px;
  }

  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;

    padding:18px 0 20px;
  }

  .footer-social{
    margin-left:0;
  }
}