/* Bedre Byttede — Footer (V2)
   File: /themes/bedrebyttede/assets/css/components/footer.css
   Budget: tiny, token-based
*/

.bb-footer {
  background: var(--surface);
  border-top: var(--border-1) solid var(--line);
  color: var(--text);
  margin-top: 3rem;
}

/* Top area */
.bb-footer__top {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-8);

  /* Mobile-first: brand full width, then 2x2 for the 4 columns */
  grid-template-columns: repeat(2, 1fr);
}

.bb-footer__brand {
  display: grid;
  gap: var(--space-3);
  grid-column: 1 / -1;
  /* span both columns on mobile */
}

/* md+: brand left + 4 equal columns on the right */
@media (min-width: 48rem) {
  .bb-footer__top {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
  }

  .bb-footer__brand {
    grid-column: 1 / -1;
    /* span both columns*/
  }
}



/* Brand */
.bb-footer__brand {
  display: grid;
  gap: var(--space-3)
}

.bb-footer__blurb {
  color: var(--text-2);
  font-size: var(--fs-sm)
}

.bb-footer__cta {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap
}

.bb-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800
}

.bb-brand__wordmark {
  font-size: var(--fs-lg)
}

.bb-brand__mark {
  display: none
}

@media (min-width: 48rem) {
  .bb-brand__mark {
    display: block
  }
}

/* Columns */
.bb-foot-group {
  border: 0;
  padding: 0;
  background: none
}

.bb-foot-title {
  cursor: pointer;
  font-weight: 700;
  font-size: var(--fs-md);
  padding: 8px 0;
  list-style: none;
}

.bb-foot-list {
  display: grid;
  gap: 8px;
  padding: 4px 0
}

.bb-foot-list a {
  color: var(--text-2);
  font-size: var(--fs-sm);
}

.bb-foot-list a:hover {
  color: var(--text);
  text-decoration: underline
}

/* On md+ keep columns open and hide the disclosure marker */
@media (min-width: 48rem) {
  .bb-foot-group[open]>.bb-foot-title {
    cursor: default
  }

  .bb-foot-title::-webkit-details-marker {
    display: none
  }

  .bb-foot-title::marker {
    content: ""
  }
}

/* Bottom bar */
.bb-footer__bottom {
  border-top: var(--border-1) solid var(--line);
  background: var(--surface-2);
}

.bb-footer__bottom-inner {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-3);
  padding-block: var(--space-4);
}

.bb-copy {
  color: var(--text-3)
}

.bb-mini {
  display: flex;
  gap: var(--space-3);
  align-items: center
}

.bb-mini li {
  font-size: var(--fs-xs);
  color: var(--text-3)
}

.bb-mini a {
  color: var(--text-3)
}

.bb-mini a:hover {
  color: var(--text-2)
}

.bb-to-top i {
  font-size: var(--fs-sm)
}

/* Focus */
.bb-footer a:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--brand), transparent 75%);
  outline-offset: 2px;
}

/* Dark mode tweaks (inherits tokens; this just softens contrasts) */
@media (prefers-color-scheme: dark) {
  .bb-footer__bottom {
    background: var(--surface)
  }

  .bb-mini a:hover {
    color: var(--text)
  }
}