/* Alfa Images mega menu.
   Change the look by overriding these variables, for example  .mm { --mm-accent: #ff5a00; }  */
.mm {
  --mm-bar: #1e1e1e;          /* the strip with the tabs */
  --mm-panel: #0d0d0d;        /* the dropdown panel and the open tab */
  --mm-ink: #ffffff;          /* link text */
  --mm-muted: #bdbdbd;        /* column headings, closed tab text */
  --mm-line: #383838;         /* line under each heading */
  --mm-hover: #2f2f2f;        /* link hover background */
  --mm-hover-ink: #ff8a4d;    /* link hover text */
  --mm-accent: #ff5a00;       /* the pill button */
  --mm-on-accent: #000000;
  --mm-font: var(--body, "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  --mm-top: 0px;              /* set by the script when the menu should stick below your header */
  display: block;
  margin: 0;
  position: sticky;
  top: var(--mm-top);
  z-index: 15;
  background: var(--mm-bar);
  color: var(--mm-ink);
  font-family: var(--mm-font);
  width: 100%;
}
.mm *, .mm *::before, .mm *::after { box-sizing: border-box; }

/* the strip of tabs */
.mm-bar { display: flex; margin: 0; padding: 0 clamp(12px, 3vw, 32px); list-style: none; overflow-x: auto; scrollbar-width: none; }
.mm-bar::-webkit-scrollbar { display: none; }
.mm-bar > li { flex: none; }
.mm-tab {
  display: flex; align-items: center; gap: 8px; height: 100%;
  padding: 15px 18px; border: 0; background: transparent; color: var(--mm-muted);
  font: 500 1rem/1.2 var(--mm-font); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.mm-tab:hover { color: var(--mm-ink); }
.mm-tab[aria-expanded="true"] { background: var(--mm-panel); color: var(--mm-ink); }
.mm-tab:focus-visible, .mm-panel a:focus-visible { outline: 2px solid var(--mm-hover-ink); outline-offset: -2px; }
.mm-chev { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.mm-tab[aria-expanded="true"] .mm-chev { transform: rotate(180deg); }

/* the dropdown panel */
.mm-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--mm-panel); box-shadow: 0 28px 44px rgba(0, 0, 0, .45);
  padding: 36px clamp(20px, 4vw, 60px) 42px;
  max-height: calc(100vh - 140px); overflow-y: auto;
  animation: mm-in .14s ease-out;
}
.mm-panel[hidden] { display: none; }
.mm-cols { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 64px); row-gap: 32px; max-width: 1400px; margin: 0 auto; }
.mm-h { margin: 0 0 12px; padding: 0 0 14px; border-bottom: 1px solid var(--mm-line); color: var(--mm-muted); font: 600 1.15rem/1.2 var(--mm-font); letter-spacing: 0; }
.mm-sec + .mm-sec { margin-top: 30px; }
.mm-list { margin: 0; padding: 0; list-style: none; }
.mm-list a {
  display: block; margin: 0 -12px; padding: 9px 12px; border-radius: 8px;
  color: var(--mm-ink); text-decoration: none; font-size: 1.05rem; line-height: 1.3;
}
.mm-list a:hover, .mm-list a:focus-visible { background: var(--mm-hover); color: var(--mm-hover-ink); }
.mm-list a[aria-current="page"] { color: var(--mm-hover-ink); }
.mm-note { margin: 2px 0; padding: 4px 0; color: var(--mm-muted); font-size: .96rem; line-height: 1.4; }
.mm-cta {
  display: inline-block; margin-top: 32px; padding: 14px 26px; border-radius: 999px;
  background: var(--mm-accent); color: var(--mm-on-accent); font-weight: 700; font-size: 1.05rem; text-decoration: none;
}
.mm-cta:hover { filter: brightness(1.12); }
.mm-skel { height: 14px; margin: 14px 0; border-radius: 4px; background: var(--mm-hover); width: 70%; }
.mm-skel:nth-child(2n) { width: 55%; }

@keyframes mm-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mm-panel { animation: none; } .mm-chev { transition: none; } }

/* phones and small tablets: tabs scroll sideways, the panel is one column */
@media (max-width: 860px) {
  .mm { position: relative; top: auto; }
  .mm-tab { padding: 13px 14px; font-size: .95rem; }
  .mm-panel { padding: 24px 20px 30px; max-height: 70vh; }
  .mm-cols { grid-template-columns: 1fr; row-gap: 28px; }
  .mm-h { font-size: 1.05rem; }
  .mm-list a { padding: 11px 12px; }
  /* the tab strip can overflow sideways on a phone; fade its right edge so that's visible */
  .mm::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 28px;
    background: linear-gradient(to right, transparent, var(--mm-bar));
    pointer-events: none;
  }
}