:root {
  --azz-mm-blue: #194f90;
  --azz-mm-line: rgba(25, 79, 144, 0.22);
  --azz-mm-radius: 0 0 12px 12px;
}

.azz-mm-root {
  position: relative;
  z-index: 99990;
}

.azz-mm-panel {
  position: fixed;
  left: 3%;
  right: 3%;
  top: var(--azz-mm-top, 90px);
  background: #fff;
  border-radius: var(--azz-mm-radius);
  box-shadow: 0 14px 30px rgba(0,0,0,.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
  overflow: hidden;
}

.azz-mm-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.azz-mm-inner {
  display: grid;
  grid-template-columns: minmax(325px, 1.05fr) minmax(0, 3fr);
  gap: 52px;
  width: 94%;
  max-width: none;
  margin: 0 auto;
  padding: 4vh 0 3vw;
  box-sizing: border-box;
}

.azz-mm-feature {
  min-width: 0;
}

/* Full megas: let the feature image grow only when a taller link column
 * creates extra row height. Its 16:9 ratio remains the natural minimum;
 * there is no fixed or minimum image height. */
.azz-mm-panel--full .azz-mm-feature {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.azz-mm-panel--full .azz-mm-image {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  aspect-ratio: 32 / 19;
  overflow: hidden;
}

.azz-mm-panel--full .azz-mm-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.azz-mm-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: gill-sans-nova, sans-serif;
  font-size: 36px;
  font-weight: 500;
  line-height: 36px;
  color: var(--azz-mm-blue);
  text-decoration: none;
  margin: -10px 0 12px;
}

.azz-mm-title--linked::before,
.azz-mm-section-heading--linked::before {
  content: '›';
  font-weight: 400;
  color: var(--azz-mm-blue);
}

.azz-mm-title--linked::before {
  font-size: .75em;
}

.azz-mm-image {
  display: block;
}

.azz-mm-image img {
  display: block;
  width: 100%;
  aspect-ratio: 32 / 19;
  object-fit: cover;
}

.azz-mm-content-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 52px;
  align-items: start;
}

.azz-mm-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 0;
  padding: 0 0 5px;
  border-bottom: 1px dotted var(--azz-mm-line);
  color: var(--azz-mm-blue) !important;
  font-family: gill-sans-nova, sans-serif !important;
  font-size: clamp(16px, 1.125vw, 18px);
  font-weight: 700 !important;
  line-height: 1.1em;
}

.azz-mm-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.azz-mm-list li {
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--azz-mm-line);
}

.azz-mm-list a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 4px;
  color: var(--azz-mm-blue);
  text-decoration: none;
  font-family: gill-sans-nova, sans-serif;
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 500;
  line-height: 1.1em;
}

.azz-mm-static-item {
  display: block;
  padding: 11px 4px;
  color: var(--azz-mm-blue);
  font-family: gill-sans-nova, sans-serif;
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 500;
  line-height: 1.1em;
  cursor: default;
}

.azz-mm-chevron {
  flex: 0 0 auto;
  margin-top: -1px;
  font-size: 1.05em;
}

.azz-mm-list a:hover,
.azz-mm-list a:focus-visible,
.azz-mm-title--linked:hover,
.azz-mm-title--linked:focus-visible {
  color: #0071ce;
}

.azz-mega-trigger--resources {
  cursor: pointer;
}


/* Compact mega: Sustainability-style fixed-width dropdown.
 * Mirrors the existing Divi structure: 700px max-width container/row,
 * 2vw horizontal container padding, 4vh top / 3vw bottom row padding, and a 50/50 grid. */
.azz-mm-panel--compact {
  left: var(--azz-mm-left, 3%);
  right: auto;
  width: min(700px, calc(100vw - 48px));
  max-width: 700px;
}

.azz-mm-panel--compact .azz-mm-inner {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  width: 100%;
  max-width: 700px;
  margin: 0;
  padding: 4vh 2vw 3vw;
  box-sizing: border-box;
}

.azz-mm-panel--compact .azz-mm-content-columns {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

[class*="azz-mega-trigger--"] {
  cursor: pointer;
}

/* Optional linked column headings. Keep the exact same typography as plain headings. */
.azz-mm-section-heading-link {
  color: inherit !important;
  font: inherit;
  line-height: inherit;
  text-decoration: none !important;
}

.azz-mm-section-heading-link:hover,
.azz-mm-section-heading-link:focus-visible {
  color: #0071ce !important;
}

.azz-mm-title--static,
.azz-mm-section-heading--static {
  cursor: default;
}

/* Align linked column-heading chevrons and text with the links below. */
.azz-mm-section-heading--linked {
  gap: 10px;
}

.azz-mm-section-heading--linked::before {
  margin-left: 4px;
}
