/* ==========================================
   BRASSIUM MEGA MENU
   Dawn 15.5 + Editorial Menu
   ========================================== */

/* Dawn core structure */

.mega-menu {
  position: static;
}

.mega-menu__content {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;

  overflow-x: hidden;
  overflow-y: auto;

  padding-top: 0;
  padding-bottom: 0;

  background: #F9F6EF;
  border: 0;
  border-radius: 0;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);

  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.header-wrapper .mega-menu__content {
  background: #F9F6EF !important;
}

.header-wrapper--border-bottom .mega-menu__content {
  border-top: 0;
}

/* Opening animation */

.js .mega-menu__content {
  opacity: 0;
  transform: translateY(-1.2rem);
}

.mega-menu[open] .mega-menu__content {
  opacity: 1;
  transform: translateY(0);
}

/* Prevent menu from exceeding viewport */

@media screen and (min-width: 990px) {
  .mega-menu__content {
    max-height: calc(
      100dvh - var(--header-bottom-position-desktop, 10rem)
    );

    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ==========================================
   DAWN FALLBACK MENU
   Keep this for compatibility
   ========================================== */

.mega-menu__list {
  display: grid;
  grid-template-columns:
    repeat(6, minmax(0, 1fr));
  gap: 1.8rem 4rem;

  margin: 0;
  padding: 0;
  list-style: none;
}

.mega-menu__list > li {
  min-width: 0;
}

.mega-menu__link {
  display: block;

  padding-top: 0.6rem;
  padding-bottom: 0.6rem;

  color: rgba(var(--color-foreground), 0.75);
  line-height: calc(
    1 + 0.3 / var(--font-body-scale)
  );

  text-decoration: none;
  overflow-wrap: break-word;

  transition: color var(--duration-short) ease;
}

.mega-menu__link--level-2 {
  font-weight: 700;
}

.mega-menu__link:hover,
.mega-menu__link--active {
  color: rgb(var(--color-foreground));
  text-decoration: none;
}

.mega-menu .mega-menu__list--condensed {
  display: block;
}

.mega-menu__list--condensed .mega-menu__link {
  font-weight: 400;
}

/* Dawn top-centre compatibility */

.header--top-center .mega-menu__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 0;
}

.header--top-center .mega-menu__list > li {
  width: 16%;
  padding-right: 2.4rem;
}

/* ==========================================
   BRASSIUM EDITORIAL COLUMN CORRECTIONS
   !important is required because an inline
   style currently loads after this file.
   ========================================== */

.peetalya-menu-columns {
  grid-template-columns:
    repeat(auto-fit, minmax(120px, 1fr)) !important;

  gap: 30px 28px !important;
}

/* Four collection links remain on one row
   at normal desktop widths */

@media screen and (min-width: 1201px) {
  .peetalya-menu-columns {
    grid-template-columns:
      repeat(auto-fit, minmax(120px, 1fr)) !important;

    gap: 30px 28px !important;
  }
}

/* Two-column link layout on smaller laptops */

@media screen and (min-width: 990px) and (max-width: 1200px) {
  .peetalya-menu-columns {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 24px 28px !important;
  }
}

/* ==========================================
   EDITORIAL IMAGE CARDS
   ========================================== */

.peetalya-editorial-card {
  min-height: 0 !important;
  aspect-ratio: 4 / 5;

  overflow: hidden;
}

.peetalya-editorial-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

/* Slightly shorter visual area on small laptops */

@media screen and (min-width: 990px) and (max-width: 1200px) {
  .peetalya-editorial-card {
    min-height: 0 !important;
    aspect-ratio: 4 / 5;
  }
}

/* ==========================================
   MOBILE
   Dawn drawer is used below 990px
   ========================================== */

@media screen and (max-width: 989px) {
  .peetalya-mega-menu .mega-menu__content {
    display: none;
  }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
  .mega-menu__content,
  .peetalya-editorial-image,
  .peetalya-menu-links a {
    transition: none;
  }
}