/*
 * Footer: pkt-footer (sekundær + global) og pkt-footer-simple (kompakt + global)
 *
 *   --pkt-footer-bg           bakgrunn (default: grå sekundær)
 *   --pkt-footer-fg           tekstfarge
 *   --pkt-footer-link-hover   hover-farge på lenker (default: text-action-active)
 */

@use '../abstracts/functions';
@use 'sass:map';
@use '../abstracts/variables';
@use '../abstracts/mixins/container-queries' as *;
@use '../abstracts/mixins/typography';

pkt-footer,
pkt-footer-simple {
  display: block;
}

$-footer-content-max-width: 75rem;
$-footer-global-bg-dark: #1a1a1a;

.pkt-footer,
.pkt-footer-simple {
  display: block;
  width: 100%;
  container-type: inline-size;
  container-name: pkt-footer;
}

.pkt-footer {
  &__band {
    background-color: var(--pkt-footer-bg, #{functions.color-token('surface-default-default')});
    color: var(--pkt-footer-fg, #{functions.color-token('text-body-default')});

    @include typography.get-text('pkt-txt-16-light');

    @include cq('pkt-footer', $cq-bp-tablet-big) {
      @include typography.get-text('pkt-txt-18-light');
    }

    &--global {
      --pkt-footer-bg: #{functions.color-token('surface-strong-dark-blue')};
      --pkt-footer-fg: #{functions.color-token('text-body-light')};
      --pkt-footer-link-hover: #{functions.color-token('brand-blue-1000')};

      [data-mode='dark'] & {
        --pkt-footer-bg: #{$-footer-global-bg-dark};
      }
    }

    a {
      color: inherit;
      text-decoration: underline;
      text-underline-position: from-font;

      &:hover {
        // !important fordi grunnstilene våre er altfor spesifikke...
        color: var(--pkt-footer-link-hover, var(--pkt-color-text-action-active, currentColor)) !important;
      }
    }

    h2 {
      margin: 0 0 map.get(variables.$spacing, 'size-16');
      color: inherit;

      @include typography.get-text('pkt-txt-20-medium');

      @include cq('pkt-footer', $cq-bp-tablet) {
        @include typography.get-text('pkt-txt-22-medium');
      }

      @include cq('pkt-footer', $cq-bp-tablet-big) {
        @include typography.get-text('pkt-txt-24-medium');
      }
    }

    p {
      margin: 0 0 map.get(variables.$spacing, 'size-16');
    }
  }

  &__inner {
    max-width: $-footer-content-max-width;
    margin: 0 auto;
    padding: map.get(variables.$spacing, 'size-56') map.get(variables.$spacing, 'size-16');

    @include cq('pkt-footer', $cq-bp-tablet) {
      padding: map.get(variables.$spacing, 'size-56') map.get(variables.$spacing, 'size-32');
    }

    &--compact {
      padding-block: map.get(variables.$spacing, 'size-32');
    }
  }

  &__sections {
    display: grid;
    grid-template-columns: 1fr;
    gap: map.get(variables.$spacing, 'size-32');

    @include cq('pkt-footer', $cq-bp-tablet) {
      grid-template-columns: repeat(3, 1fr);
      column-gap: map.get(variables.$spacing, 'size-32');
      row-gap: map.get(variables.$spacing, 'size-56');
    }
  }

  &__link-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: map.get(variables.$spacing, 'size-16');

    > li {
      word-break: break-word;
    }
  }

  &__link-domain {
    white-space: nowrap;
  }

  &__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: map.get(variables.$spacing, 'size-32');
    margin-block-start: map.get(variables.$spacing, 'size-16');

    @include cq('pkt-footer', $cq-bp-tablet) {
      grid-column: -2 / -1;
      margin-block-start: 0;
    }
  }

  &__sections + &__bottom {
    margin-block-start: map.get(variables.$spacing, 'size-32');
  }

  &__bottom-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: map.get(variables.$spacing, 'size-16') map.get(variables.$spacing, 'size-32');
  }

  &__some {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: map.get(variables.$spacing, 'size-16');

    @include cq('pkt-footer', $cq-bp-tablet) {
      gap: map.get(variables.$spacing, 'size-24');
    }

    a {
      display: inline-flex;

      &:has(.pkt-footer__some-icon) {
        text-decoration: none;
      }
    }
  }

  &__some-icon {
    --fg-color: currentColor;
    width: 2rem;
    height: 2rem;
  }

  &__sections + &__consent {
    margin-block-start: map.get(variables.$spacing, 'size-32');
  }
}

.pkt-footer-simple {
  &__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: map.get(variables.$spacing, 'size-16');

    @include cq('pkt-footer', $cq-bp-tablet) {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: map.get(variables.$spacing, 'size-16') map.get(variables.$spacing, 'size-32');
    }
  }

  @at-root a#{&}__link {
    display: inline-flex;
    align-items: flex-start;
    gap: map.get(variables.$spacing, 'size-8');
    color: inherit;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
      text-underline-position: from-font;
    }
  }

  &__link-icon {
    --fg-color: currentColor;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  &__link-domain {
    white-space: nowrap;
  }
}