@import "reset.css";
@import "variables.css";
@import "typography.css";
@import "components.css";

body {
  font-family: var(--font-family-primary);
  background: var(--clr-greyscale-000);
  color: var(--clr-greyscale-900);
}

.section--full-width {
  background: var(--clr-greyscale-200);
}

.section__full-width--underline {
  border-block-end: solid var(--clr-greyscale-200);
}

section {
  max-width: 95%;
  margin-inline: auto;
}

@media screen and (min-width: 700px) {
  section {
    max-width: clamp(200px, 80%, 1440px);
  }
}

/* MEGA MENU */
.mega-menu {
  display: grid;
  gap: 1rem;
  background: var(--clr-greyscale-200);
  border-radius: 0 0 2rem 2rem;
  padding: 1rem;
}

.mega-menu__category {
  display: flex;
  flex-direction: column;
}

.mega-menu__contact {
  display: grid;
  gap: 1rem;
}

.mega-menu svg {
  height: 20px;
}

.mega-menu .cls-1 {
  fill: var(--clr-greyscale-700);
}

.mega-menu__socials {
  display: flex;
  gap: 1rem;
}

/* ANCHORS */
.svg-rotator {
  anchor-name: --left-anchor;
}
.menu__text {
  anchor-name: --right-desktop;
}
.menu__icon {
  anchor-name: --right-mobile;
}

#mega-menu__popover[popover] {
  min-width: 95%;
  position: absolute;
  border: none;
  border-radius: 0 0 2rem 2rem;
  background: var(--clr-greyscale-200);
  padding: 1rem;
}

#mega-menu__popover[popover] {
  position-anchor: --right-mobile;
  inset-inline-start: anchor(--left-anchor left);
  inset-inline-end: anchor(--right-mobile right);
  inset-block-start: anchor(--right-mobile bottom);
  translate: -8px 16px;
  max-inline-size: calc(100svw - 1rem);
  margin-inline: 0.5rem;
}

.mega-menu {
  display: grid;
  gap: 1rem;
}

@media (min-width: 700px) {
  #mega-menu__popover[popover] {
    min-width: 80%;
    position-anchor: --right-desktop;
    inset-inline-start: anchor(--left-anchor left);
    inset-inline-end: anchor(--right-desktop right);
    inset-block-start: anchor(--right-desktop bottom);
    translate: -16px 20px;
    max-inline-size: calc(100svw - 2rem);
    margin-inline: 1rem;
  }

  .mega-menu {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    padding-block: 2rem;
    padding-inline: 2rem;
  }
}