/* =============================================================
   HBC — gemensam footer
   Namnrymd .ftr* (medvetet skild från den gamla .ft-*-footern
   som fortfarande finns inbakad i sidornas <style>-block).
   Ändras här — och bara här. Kör `node build/build.js` efteråt.
   ============================================================= */

.ftr{
  --ftr-ink:    var(--ink, #1f1e1c);
  --ftr-cream:  var(--cream, #efe9e1);
  --ftr-line:   var(--line, rgba(245, 241, 236, 0.22));
  --ftr-font:   var(--sans, "Outfit", "Helvetica Neue", Helvetica, system-ui, sans-serif);

  background: var(--ftr-ink);
  color: var(--ftr-cream);
  font-family: var(--ftr-font);
  padding: 72px 48px 28px;
}

.ftr *,
.ftr *::before,
.ftr *::after{ box-sizing: border-box; }

.ftr__inner{
  max-width: 1320px;
  margin: 0 auto;
}

/* -------------------------------------------------------------
   Footern ska aldrig vara beroende av scroll-animationen för att
   synas. assets/animations.js taggar automatiskt alla <p>, <h2>
   och footerbarn med .anim (opacity: 0) och avslöjar dem först
   när en IntersectionObserver utlöser. Footern ligger sist på
   sidan, och de understa raderna hamnar utanför observerns
   rootMargin — resultatet blev osynliga juridiska länkar.
   Här nollställs .anim, och opaciteterna sätts av oss i stället.
   ------------------------------------------------------------- */
.ftr .anim{
  opacity: 1;
  transform: none;
}

.ftr a{
  color: inherit;
  text-decoration: none;
  transition: opacity .2s ease;
}
.ftr a:hover{ opacity: .68; }
.ftr a:focus-visible,
.ftr button:focus-visible{
  outline: 2px solid var(--ftr-cream);
  outline-offset: 3px;
  border-radius: 2px;
  opacity: 1;
}

/* ---------- grid ---------- */
.ftr__grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.3fr;
  gap: 64px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--ftr-line);
}

.ftr__col{ min-width: 0; }

/* ---------- brand ---------- */
.ftr__brand{ display: inline-block; }
.ftr__brand img{
  display: block;
  height: 108px;
  width: auto;
  object-fit: contain;
}
.ftr__name{
  margin: 18px 0 4px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
}
.ftr .ftr__tagline{
  margin: 0 0 26px;
  max-width: 320px;
  font-size: 14px;
  line-height: 1.55;
  opacity: .7;
}

.ftr__social{
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ftr__social a{
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--ftr-line);
  border-radius: 50%;
  transition: border-color .2s ease, opacity .2s ease;
}
.ftr__social a:hover{
  border-color: var(--ftr-cream);
  opacity: 1;
}

/* ---------- column headings ---------- */
.ftr .ftr__h{
  margin: 0 0 22px;
  font-family: var(--ftr-font);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .55;
}

/* ---------- contact ---------- */
.ftr__contact{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  font-size: 14px;
  line-height: 1.55;
}
.ftr__contact li{
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 8px;
}
.ftr .ftr__ico{
  margin-top: 3px;
  opacity: .55;
  flex: none;
}

/* ---------- hours ---------- */
.ftr__hours{
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 500;
}
.ftr .ftr__note{
  margin: 0 0 24px;
  max-width: 42ch;
  font-size: 13.5px;
  line-height: 1.6;
  opacity: .7;
}

.ftr__cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border: 1px solid var(--ftr-cream);
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: .01em;
  transition: background-color .25s ease, color .25s ease, opacity .2s ease;
}
.ftr__cta:hover{
  background: var(--ftr-cream);
  color: var(--ftr-ink);
  opacity: 1;
}
.ftr__arrow{
  display: inline-block;
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.ftr__cta:hover .ftr__arrow{ transform: translateX(3px); }

/* ---------- bottom ---------- */
.ftr__bottom{
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 28px;
  font-size: 12px;
  line-height: 1.6;
}
.ftr__bottom p{ margin: 0; }

.ftr__links{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.ftr .ftr__links a{ opacity: .7; }
.ftr__links a:hover{ opacity: 1; }
.ftr .ftr__dot{ opacity: .35; }

/* Knappen visas först när cookie-skriptet finns och binder den.
   Utan skript ligger den kvar som hidden — ingen död kontroll. */
.ftr__cookie{
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  opacity: .7;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ftr__cookie:hover{ opacity: 1; }
.ftr__cookie[hidden]{ display: none; }

.ftr .ftr__copy{ opacity: .7; }
.ftr .ftr__org{
  flex-basis: 100%;
  opacity: .45;
  font-size: 11.5px;
}

/* ---------- responsivt ---------- */
@media (max-width: 1000px){
  .ftr__grid{
    grid-template-columns: 1fr 1fr;
    gap: 44px 40px;
  }
  .ftr__col--brand{ grid-column: 1 / -1; }
}

@media (max-width: 680px){
  .ftr{ padding: 56px 24px 24px; }
  .ftr__grid{
    grid-template-columns: 1fr;
    gap: 38px;
    padding-bottom: 34px;
  }
  .ftr__brand img{ height: 84px; }
  .ftr .ftr__tagline,
  .ftr .ftr__note{ max-width: none; }
  .ftr__cta{
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 15px 24px;
  }
  .ftr__bottom{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce){
  .ftr a,
  .ftr__arrow,
  .ftr__cta,
  .ftr__social a{ transition: none; }
}