/*
 * Header menu (global mega menu)
 */

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

pkt-header-menu {
  display: block;
}

$pkt-header-menu-breakpoint: 48rem;

@mixin pkt-header-menu-region-inner {
  max-width: 75rem;
  margin: 0 auto;
  padding-block-start: map.get(variables.$spacing, 'size-32');
  padding-block-end: map.get(variables.$spacing, 'size-16');

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

.pkt-header-menu {
  display: none;
  background-color: var(--pkt-color-background-default);
  color: var(--pkt-color-text-body-default);
  width: 100%;
  container-type: inline-size;
  container-name: pkt-header-menu;

  &--open {
    display: block;
  }

  &__services {
    @include pkt-header-menu-region-inner;
  }

  &__services-title,
  &__section-title {
    @include typography.get-text('pkt-txt-20-medium');
    margin: 0 0 map.get(variables.$spacing, 'size-32');
    display: none;

    @include cq('pkt-header-menu', $cq-bp-tablet) {
      display: block;
    }

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

  &__services-title {
    margin-block-end: map.get(variables.$spacing, 'size-32');
  }

  &__services-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: map.get(variables.$spacing, 'size-24');

    @include cq('pkt-header-menu', $cq-bp-tablet) {
      grid-template-columns: repeat(4, 1fr);
      row-gap: map.get(variables.$spacing, 'size-40');
    }
  }

  &__buttons {
    display: none;

    @include pkt-header-menu-region-inner;
    @include cq('pkt-header-menu', $cq-bp-tablet) {
      display: flex;
      gap: map.get(variables.$spacing, 'size-16');
      flex-wrap: wrap;
      padding-block-start: 0;
    }

    @include cq('pkt-header-menu', $cq-bp-tablet-big) {
      .pkt-btn__text {
        @include typography.get-text-style('pkt-txt-18-medium');
      }
    }
  }

  &__buttons--mobile {
    padding: 0 map.get(variables.$spacing, 'size-16');
    display: flex;

    @include cq('pkt-header-menu', $cq-bp-tablet) {
      display: none;
    }
  }

  &__sections {
    @include cq('pkt-header-menu', $cq-bp-tablet) {
      background-color: var(--pkt-color-surface-default-default);
    }
  }

  &__sections-inner {
    @include pkt-header-menu-region-inner;

    @include cq('pkt-header-menu', $cq-bp-tablet) {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: map.get(variables.$spacing, 'size-32');
    }
  }

  &__section {
    .pkt-accordion-item__title {
      @include typography.get-text('pkt-txt-18-medium');
      padding: map.get(variables.$spacing, 'size-8') map.get(variables.$spacing, 'size-16');
    }
  }

  &__section-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: map.get(variables.$spacing, 'size-16');
    @include cq('pkt-header-menu', $cq-bp-tablet) {
      row-gap: map.get(variables.$spacing, 'size-16');
    }
  }

  &__section-link {
    display: block;
    @include typography.get-text('pkt-txt-16-light');
    color: var(--pkt-color-text-body-default);
    text-decoration: underline;
    text-underline-position: from-font;
    line-height: 1.5;

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

    &:hover,
    &:focus-visible {
      text-decoration: underline;
    }
  }

  &__service {
    list-style: none;
  }

  &__service-link {
    display: flex;
    align-items: center;
    gap: map.get(variables.$spacing, 'size-12');
    color: var(--pkt-color-text-body-default);
    text-decoration: none;

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

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

    &:hover,
    &:focus-visible {
      .pkt-header-menu__service-text {
        text-decoration: underline;
        text-underline-position: from-font;
      }
    }
  }

  &__service-icon {
    flex: 0 0 auto;
    --fg-color: var(--pkt-color-text-body-default);
    width: map.get(variables.$spacing, 'size-24');
    height: map.get(variables.$spacing, 'size-24');

    @include cq('pkt-header-menu', $cq-bp-tablet) {
      width: map.get(variables.$spacing, 'size-32');
      height: map.get(variables.$spacing, 'size-32');
    }

    svg {
      width: 100%;
      height: 100%;
    }
  }

  &__service-text {
    min-width: 0;
  }

  &__footer {
    @include pkt-header-menu-region-inner;
    padding: map.get(variables.$spacing, 'size-24') map.get(variables.$spacing, 'size-16')
      map.get(variables.$spacing, 'size-48');
    display: flex;
    flex-direction: column;
    gap: map.get(variables.$spacing, 'size-24');

    @include cq('pkt-header-menu', $cq-bp-tablet) {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: map.get(variables.$spacing, 'size-32') map.get(variables.$spacing, 'size-56');
    }
  }

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

    @include cq('pkt-header-menu', $cq-bp-tablet) {
      flex-direction: row;
      gap: map.get(variables.$spacing, 'size-0');
      &:not(.pkt-header-menu__footer-list--social) {
        line-height: 1;
        > * {
          border-right: 1px solid currentColor;
          padding: 0 map.get(variables.$spacing, 'size-32');
          &:first-child {
            padding-inline-start: 0;
          }
          &:last-child {
            border-right: none;
            padding-inline-end: 0;
          }
        }
      }
    }
  }

  &__footer-list--social {
    flex-direction: row;
    gap: map.get(variables.$spacing, 'size-16');

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

  &__footer-link {
    @include typography.get-text('pkt-txt-16-light');
    color: var(--pkt-color-text-body-default);
    text-decoration: none;

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

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

  &__social-link {
    --fg-color: var(--pkt-color-text-body-default);
    color: var(--pkt-color-text-body-default);
    display: inline-flex;
    align-items: center;

    svg {
      width: map.get(variables.$spacing, 'size-32');
      height: map.get(variables.$spacing, 'size-32');
    }
  }

  &__loading,
  &__error {
    @include pkt-header-menu-region-inner;
    text-align: center;
    color: var(--pkt-color-text-body-default);
    padding-block-end: map.get(variables.$spacing, 'size-48');

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