/*
 * Original Design Specifications
 * Target: > 1800px
 * Test Resolution: 1920 x 1080
 */
:root {
  --menu-item-popover-width: 100rem;
  --menu-item-popover-border-radius: 1.4rem;
  --menu-item-popover-image-border-radius: calc(
    var(--menu-item-popover-border-radius) * 0.75
  );
  --menu-item-popover-padding: 1.5rem;
  --menu-item-popover-image-dimensions: 25.5rem;
  --menu-item-popover-image-aspect-ratio: 1.15;
  --menu-item-popover-gap-between-image-and-submenu: calc(
    var(--menu-item-popover-padding) * 2.5
  );
  --menu-item-gap-between-title-and-links: 1.2rem;
  --menu-item-popover-menu-title-font-size: 3.2rem;
  --menu-item-popover-menu-title-line-height: 1.2;
  --menu-item-popover-menu-title-padding-bottom: 1.2rem;
  --menu-item-popover-menu-title-font-weight: 500;
  --menu-item-popover-menu-links-default-row-count: 3;
  --menu-item-popover-menu-links-min-column-width: 22rem;
  --menu-item-popover-menu-links-column-gap: calc(
    var(--menu-item-popover-gap-between-image-and-submenu) +
      var(--menu-item-popover-padding)
  );
  --menu-item-popover-menu-link-item-font-size: 2.6rem;
  --menu-item-popover-menu-link-item-line-height: 2;
}

/*
 * 2XL Media Query (1536px)
 * Target: 1799px > 1536px
 * Test Resolution: 1536 x 864
 */
@media screen and (max-width: 1799px) {
  :root {
    --menu-item-popover-image-dimensions: 19rem;
    --menu-item-popover-image-aspect-ratio: 1;
    --menu-item-popover-padding: 1.4rem;
    --menu-item-popover-width: 80rem;
    --menu-item-popover-height: 28rem;
    --menu-item-popover-gap-between-image-and-submenu: calc(
      var(--menu-item-popover-padding) * 1.5
    );
    --menu-item-popover-menu-links-min-column-width: 18rem;
    --menu-item-popover-menu-link-item-font-size: 2rem;
  }
}

/*
 * XL Media Query (1280px)
 * Target: 1535px > 1280px
 * Test Resolution: 1280 x 720
 */
@media screen and (max-width: 1535px) {
  :root {
    --menu-item-popover-width: 75rem;
    --menu-item-popover-image-dimensions: 18rem;
    --menu-item-popover-gap-between-image-and-submenu: calc(
      var(--menu-item-popover-padding) * 1.5
    );
    --menu-item-popover-menu-links-min-column-width: 15rem;
    --menu-item-popover-menu-link-item-font-size: 1.8rem;
    --menu-item-popover-padding: 1.25rem;
  }
}

/*
 * L Media Query (1024px)
 * Target: 1279px > 1024px
 * Test Resolution: 1024 x 768
 */
@media screen and (max-width: 1279px) {
  :root {
    --menu-item-popover-width: 60rem;
    --menu-item-popover-image-dimensions: 14rem;
    --menu-item-popover-menu-title-font-size: 2rem;
    --menu-item-popover-menu-links-min-column-width: 13rem;
    --menu-item-popover-menu-link-item-font-size: 1.6rem;
    --menu-item-popover-padding: 1rem;
    --menu-item-popover-menu-link-item-line-height: 1.8;
  }
}

.menu-item-popover {
  display: flex;
  gap: var(--menu-item-popover-gap-between-image-and-submenu);
  margin-top: var(--header-padding-y);
  min-width: var(--menu-item-popover-width);
  padding: var(--menu-item-popover-padding);
  background-color: var(--theme-color-white);
  border-radius: var(--menu-item-popover-border-radius);
  color: var(--theme-color-primary);
}

.menu-item-popover-image {
  display: block;
  width: var(--menu-item-popover-image-dimensions);
  height: auto;
  aspect-ratio: var(--menu-item-popover-image-aspect-ratio);
  border-radius: var(--menu-item-popover-image-border-radius);
  object-fit: cover;
  align-self: stretch;
}

.menu-item-popover-content {
  display: flex;
  flex-direction: column;
  gap: var(--menu-item-gap-between-title-and-links);
  flex: 1 1 auto;
  padding: var(--menu-item-popover-padding);
  justify-content: center;
}

.menu-item-popover-menu-title {
  display: block;
  font-size: var(--menu-item-popover-menu-title-font-size);
  line-height: var(--menu-item-popover-menu-title-line-height);
  padding-bottom: var(--menu-item-popover-menu-title-padding-bottom);
  font-weight: var(--menu-item-popover-menu-title-font-weight);
  border-bottom: 1px solid var(--theme-color-primary-20);
  color: var(--theme-color-primary-50);
}

.menu-item-popover-menu-links {
  flex: 0 1 auto;
  display: grid;
  grid-template-rows: repeat(
    var(--menu-item-popover-menu-links-default-row-count),
    1fr
  );
  grid-template-columns: repeat(
    auto-fill,
    minmax(var(--menu-item-popover-menu-links-min-column-width), 1fr)
  );
  grid-auto-flow: column;
  gap: 0 var(--menu-item-popover-menu-links-column-gap);
}

.menu-item-popover-menu-link-item {
  color: var(--theme-color-border);
  font-size: var(--menu-item-popover-menu-link-item-font-size);
  line-height: var(--menu-item-popover-menu-link-item-line-height);
  padding: 0.4rem 0;
}

.menu-item-popover-menu-link-item:not(.item-in-last-row) {
  border-bottom: 1px solid var(--theme-color-horizontal-line-light);
}

.menu-item-popover-menu-link-item .page-text {
  font-size: inherit;
  line-height: inherit;
}

.menu-item-popover-menu-link-item a:hover {
  color: var(--theme-color-primary-50);
}