/* ============================================================================
   EqualWeb mega menu - phase 1, English homepage (Nir, 23/10/2026)
   Rendered by megamenu.js; every rule is scoped to classes that exist only
   after it ran, so the locale twins (which never run it) are untouched.
   Desktop >= 981px: four triggers, each opening a full-width panel under the
   sticky header - topics | topic links | feature card. Below 981px the panel
   folds into the existing burger column as an accordion of topic links.
   ========================================================================== */

/* one topic + its links = one list item for assistive tech; no box of its own, so the
   topic and its detail stay direct grid cells */
.ew-mm__row { display: contents; }

/* ---- the bar -------------------------------------------------------------- */
.ew-mm__bar { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ew-mm__top { list-style: none; }
.ew-mm__trigger, .ew-mm__plain {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--ew-radius-pill);
  background: transparent; color: var(--ew-color-text); cursor: pointer;
  font: inherit; font-size: 0.92rem; font-weight: var(--ew-weight-semibold); line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--ew-duration-fast) var(--ew-ease-standard), color var(--ew-duration-fast) var(--ew-ease-standard);
}
.ew-mm__trigger:hover, .ew-mm__plain:hover { background: var(--ew-color-bg-subtle); color: var(--ew-color-brand-text); }
.ew-mm__trigger[aria-expanded="true"] { background: var(--ew-teal-50); color: var(--ew-color-brand-text); }
.ew-mm__trigger:focus-visible, .ew-mm__plain:focus-visible { outline: 2px solid var(--ew-color-focus); outline-offset: 2px; }
.ew-mm__chev { flex: none; width: 12px; height: 12px; transition: transform var(--ew-duration-base) var(--ew-ease-out); }
.ew-mm__trigger[aria-expanded="true"] .ew-mm__chev { transform: rotate(180deg); }

/* ---- the panel (desktop) ------------------------------------------------- */
.ew-mm__panel[hidden] { display: none; }
@media (min-width: 981px) {
  .ew-mm__panel {
    position: absolute; left: 0; right: 0; top: 100%;
    padding: 0 var(--ew-space-5) var(--ew-space-5);
    z-index: 2;
  }
  .ew-mm__panel.is-open { z-index: 3; animation: ew-mm-drop 240ms var(--ew-ease-out) both; }
  /* switching menus: no drop, the new panel only fades in on top ... */
  .ew-mm__panel.is-open.is-switch { animation: ew-mm-fade 220ms var(--ew-ease-out) both; }
  /* ... over the old one, which stays fully opaque underneath until it is hidden */
  .ew-mm__panel.is-under { z-index: 2; pointer-events: none; animation: none; }
  .ew-mm__panel.is-closing { pointer-events: none; animation: ew-mm-out 170ms var(--ew-ease-in, ease-in) both; }
  @keyframes ew-mm-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  @keyframes ew-mm-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes ew-mm-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-4px); } }
  .ew-mm__panel.is-open .ew-mm__grid { animation: ew-mm-slide 340ms var(--ew-ease-out) both; }
  @keyframes ew-mm-slide { from { transform: translateY(-10px); opacity: 0.35; } to { transform: none; opacity: 1; } }
  .ew-mm__panel.is-under .ew-mm__grid { animation: none; }
  .ew-mm__inner {
    max-width: 1240px; margin: 0 auto;
    background: var(--ew-color-surface, #fff);
    border: 1px solid var(--ew-color-border);
    border-top: 0;
    border-radius: 0 0 24px 24px;
    box-shadow: 0 28px 60px -18px rgba(10, 18, 32, 0.28), 0 8px 18px -8px rgba(10, 18, 32, 0.12);
    overflow: hidden;
  }
  .ew-mm__grid {
    display: grid; grid-template-columns: 320px minmax(0, 1fr);
    grid-template-rows: repeat(var(--ew-mm-rows), auto) 1fr;
    column-gap: 0; padding: var(--ew-space-4);
    position: relative;
    /* one height for every panel - set by megamenu.js. A MINIMUM, never a cap: WCAG 1.4.12
       (text spacing) and 1.4.4 (resize text) - a reader who enlarges the spacing must never
       get a clipped panel, so the panel may grow; it just never shrinks between menus */
    min-height: var(--ew-mm-h, auto);
    box-sizing: border-box;
  }
  .ew-mm.is-measuring .ew-mm__grid { min-height: 0; }
  .ew-mm.is-measuring, .ew-mm.is-measuring * { animation: none !important; transition: none !important; }
  .ew-mm.is-measuring .ew-mm__panel { visibility: hidden; }

  /* the highlight that glides behind the active topic */
  .ew-mm__glide {
    position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none;
    border-radius: 14px; background: var(--ew-color-bg-subtle);
    transition: transform 340ms cubic-bezier(.2, .8, .2, 1), height 340ms cubic-bezier(.2, .8, .2, 1);
  }
  .ew-mm__glide::before {
    content: ""; position: absolute; inset-inline-start: 0; top: 14px; bottom: 14px; width: 3px;
    border-radius: 3px; background: var(--ew-color-brand);
  }
  .ew-mm__glide.is-instant { transition: none !important; }

  /* column 1: topics */
  .ew-mm__item {
    grid-column: 1; position: relative;
    display: grid; grid-template-columns: 40px 1fr 16px; align-items: center; gap: 12px;
    padding: 12px 12px; margin-inline-end: var(--ew-space-4);
    border-radius: 14px; color: var(--ew-color-text); text-decoration: none;
    transition: background-color var(--ew-duration-fast) var(--ew-ease-standard);
  }
  .ew-mm__item { z-index: 1; }
  .ew-mm__item:not(.is-active):hover .ew-mm__t { color: var(--ew-color-brand-text); }
  .ew-mm__item:focus-visible { outline: 2px solid var(--ew-color-focus); outline-offset: -2px; }
  .ew-mm__icowrap {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
    background: var(--ew-teal-50); color: var(--ew-teal-700, #0b6b5e);
    transition: background-color 260ms var(--ew-ease-out), color 260ms var(--ew-ease-out), transform 260ms var(--ew-ease-out);
  }
  .ew-mm__item.is-active .ew-mm__icowrap { transform: scale(1.04); }
  .ew-mm__item.is-active .ew-mm__icowrap { background: var(--ew-ink-900, #0b1424); color: var(--ew-teal-glow, #2ee6c2); }
  .ew-mm__ico { width: 22px; height: 22px; }
  .ew-mm__itemtext { display: grid; gap: 2px; min-width: 0; }
  .ew-mm__t { font-family: var(--ew-font-display); font-weight: var(--ew-weight-bold); font-size: 0.98rem; color: var(--ew-color-heading); }
  .ew-mm__d { font-size: 0.8rem; line-height: 1.35; color: var(--ew-color-text-muted); }
  .ew-mm__item .ew-mm__arrow { width: 16px; height: 16px; color: var(--ew-color-brand-text); opacity: 0; transform: translateX(-4px);
    transition: opacity var(--ew-duration-fast), transform var(--ew-duration-base) var(--ew-ease-out); }
  .ew-mm__item:hover .ew-mm__arrow, .ew-mm__item.is-active .ew-mm__arrow { opacity: 1; transform: none; }

  /* columns 2-3: the active topic */
  .ew-mm__detail {
    grid-column: 2; align-self: stretch;
    display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--ew-space-5);
    padding-inline-start: var(--ew-space-5); border-inline-start: 1px solid var(--ew-color-border);
    animation: ew-mm-in 260ms var(--ew-ease-out) both;
  }
  .ew-mm__detail .ew-mm__eyebrow, .ew-mm__detail .ew-mm__all { animation: ew-mm-up 320ms var(--ew-ease-out) both; }
  .ew-mm__detail .ew-mm__list li { animation: ew-mm-up 360ms var(--ew-ease-out) both; animation-delay: calc(var(--i, 0) * 28ms + 30ms); }
  .ew-mm__detail .ew-mm__all { animation-delay: 180ms; }
  .ew-mm__detail .ew-mm__card { animation: ew-mm-card 420ms var(--ew-ease-out) both; }
  .ew-mm__detail .ew-mm__media img { animation: ew-mm-zoom 900ms var(--ew-ease-out) both; }
  .ew-mm__detail .ew-mm__cardbody > * { animation: ew-mm-up 380ms var(--ew-ease-out) both; }
  .ew-mm__detail .ew-mm__cardbody > :nth-child(2) { animation-delay: 50ms; }
  .ew-mm__detail .ew-mm__cardbody > :nth-child(3) { animation-delay: 100ms; }
  @keyframes ew-mm-up { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  @keyframes ew-mm-card { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  @keyframes ew-mm-zoom { from { transform: scale(1.1); filter: brightness(0.6); } to { transform: scale(1.02); filter: none; } }
  .ew-mm__detail[hidden] { display: none; }
  @keyframes ew-mm-in { from { opacity: 0; } to { opacity: 1; } }
  .ew-mm__links { display: flex; flex-direction: column; padding-top: 6px; }
  .ew-mm__all {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: auto;
    padding: 10px 12px; border-radius: 10px;
    font-weight: var(--ew-weight-semibold); font-size: 0.88rem; color: var(--ew-color-brand-text); text-decoration: none;
  }
  .ew-mm__all:hover { background: var(--ew-teal-50); }
  .ew-mm__all:focus-visible { outline: 2px solid var(--ew-color-focus); outline-offset: -2px; }
  .ew-mm__all .ew-mm__arrow { width: 15px; height: 15px; transition: transform var(--ew-duration-base) var(--ew-ease-out); }
  .ew-mm__all:hover .ew-mm__arrow { transform: translateX(3px); }
  .ew-mm__eyebrow {
    margin: 0 0 var(--ew-space-3); font-size: 0.72rem; font-weight: var(--ew-weight-bold);
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--ew-color-text-muted);
  }
  .ew-mm__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .ew-mm__list--2 { grid-template-columns: 1fr 1fr; column-gap: var(--ew-space-3); }
  .ew-mm__link {
    display: grid; gap: 2px; padding: 9px 12px; border-radius: 10px;
    color: var(--ew-color-text); text-decoration: none;
    transition: background-color var(--ew-duration-fast);
  }
  .ew-mm__link:hover { background: var(--ew-teal-50); }
  .ew-mm__link:hover .ew-mm__lt { color: var(--ew-color-brand-text); }
  .ew-mm__link:focus-visible { outline: 2px solid var(--ew-color-focus); outline-offset: -2px; }
  .ew-mm__lt { font-weight: var(--ew-weight-semibold); font-size: 0.9rem; color: var(--ew-color-heading); }
  .ew-mm__ld { font-size: 0.79rem; line-height: 1.35; color: var(--ew-color-text-muted); }

  /* the feature card */
  .ew-mm__card {
    display: flex; flex-direction: column; overflow: hidden;
    border-radius: 18px; background: #0a1220; color: #e8f1f4;
    box-shadow: inset 0 0 0 1px rgba(46, 230, 194, 0.14);
  }
  .ew-mm__media { position: relative; flex: 1 1 auto; min-height: 210px; overflow: hidden; background: #0a1220; }
  .ew-mm__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover;
    transform: scale(1.02); transition: transform 600ms var(--ew-ease-out); }
  .ew-mm__card:hover .ew-mm__media img { transform: scale(1.06); }
  .ew-mm__media img.is-pending { opacity: 0; }
  .ew-mm__media img.is-in { opacity: 1; transition: opacity 360ms var(--ew-ease-out), transform 600ms var(--ew-ease-out); }
  .ew-mm__media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
    background: linear-gradient(to top, #0a1220, rgba(10, 18, 32, 0)); }
  .ew-mm__cardbody { display: grid; gap: 8px; padding: 4px 22px 22px; margin-top: -18px; position: relative; }
  .ew-mm__ch { margin: 0; font-family: var(--ew-font-display); font-weight: var(--ew-weight-bold); font-size: 1.05rem; color: #fff; }
  .ew-mm__cp { margin: 0; font-size: 0.82rem; line-height: 1.45; color: #b9c7cf; }
  .ew-mm__cta {
    display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin-top: 4px;
    padding: 9px 16px; border-radius: var(--ew-radius-pill);
    background: var(--ew-teal-glow, #2ee6c2); color: #06211c;
    font-weight: var(--ew-weight-bold); font-size: 0.85rem; text-decoration: none;
    transition: transform var(--ew-duration-fast), box-shadow var(--ew-duration-fast);
  }
  .ew-mm__cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(46, 230, 194, 0.7); }
  .ew-mm__cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .ew-mm__cta .ew-mm__arrow { width: 14px; height: 14px; }

  /* the strip under every panel */
  .ew-mm__foot {
    display: flex; align-items: center; justify-content: space-between; gap: var(--ew-space-4);
    padding: 14px var(--ew-space-6); background: var(--ew-color-bg-subtle); border-top: 1px solid var(--ew-color-border);
  }
  .ew-mm__foot p { margin: 0; font-size: 0.86rem; color: var(--ew-color-text-muted); }
  .ew-mm__footlinks { display: flex; gap: var(--ew-space-2); }

  /* the dim layer behind an open panel */
  .ew-mm__scrim {
    position: fixed; inset: 0; z-index: calc(var(--ew-z-header, 200) - 1);
    background: rgba(10, 18, 32, 0.32); opacity: 0;
    transition: opacity 200ms var(--ew-ease-out);
  }
  .ew-mm__scrim.is-on { opacity: 1; }

  /* tighter header band (981-1300px): narrower topic column, smaller card */
  @media (max-width: 1240px) {
    .ew-mm__grid { grid-template-columns: 260px minmax(0, 1fr); }
    .ew-mm__detail { grid-template-columns: minmax(0, 1fr) 280px; gap: var(--ew-space-4); }
    .ew-mm__d { display: none; }
    .ew-mm__trigger, .ew-mm__plain { padding: 0 10px; font-size: 0.86rem; }
  }
  @media (max-width: 1080px) {
    .ew-mm__card { display: none; }
    .ew-mm__detail { grid-template-columns: minmax(0, 1fr); }
  }
}

.ew-mm__mobilecta { display: none; }
/* outside the desktop media query so a hidden scrim never paints */
.ew-mm__scrim[hidden] { display: none; }

/* ---- mobile: inside the burger column ------------------------------------- */
@media (max-width: 980px) {
  /* the burger column keeps one width whichever section is open, and scrolls when tall */
  .ew-header .ew-mm.ew-nav--open { inset-inline-start: var(--ew-space-4); inset-inline-end: var(--ew-space-4);
    max-width: 30rem; margin-inline-start: auto; max-height: calc(100vh - 5.5rem); overflow-y: auto; overscroll-behavior: contain; }
  .ew-mm__bar { flex-direction: column; align-items: stretch; gap: 0; }
  .ew-mm__top { border-bottom: 1px solid var(--ew-color-border); }
  .ew-mm__trigger, .ew-mm__plain { width: 100%; justify-content: space-between; min-height: 52px; padding: 0 var(--ew-space-2); border-radius: 0; font-size: 1rem; }
  .ew-mm__trigger[aria-expanded="true"] { background: transparent; }
  .ew-mm__panel { padding: 0 0 var(--ew-space-3); }
  .ew-mm__grid { display: grid; gap: 2px; }
  .ew-mm__item { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; padding: 10px var(--ew-space-2);
    border-radius: 10px; color: var(--ew-color-text); text-decoration: none; grid-row: auto !important; }
  .ew-mm__item:focus-visible { outline: 2px solid var(--ew-color-focus); outline-offset: -2px; }
  .ew-mm__icowrap { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--ew-teal-50); color: var(--ew-teal-700, #0b6b5e); }
  .ew-mm__ico { width: 18px; height: 18px; }
  .ew-mm__itemtext { display: grid; gap: 1px; }
  .ew-mm__t { font-weight: var(--ew-weight-semibold); }
  .ew-mm__d { font-size: 0.8rem; color: var(--ew-color-text-muted); }
  .ew-mm__item .ew-mm__arrow, .ew-mm__detail, .ew-mm__foot, .ew-mm__scrim, .ew-mm__glide { display: none !important; }
  .ew-mm__mobilecta { display: grid; gap: var(--ew-space-2); padding: var(--ew-space-4) var(--ew-space-2) var(--ew-space-2); border-bottom: 0; }
  .ew-mm__mobilecta .ew-btn { justify-content: center; }
  .ew-mm__login { justify-self: center; padding: 10px; font-weight: var(--ew-weight-semibold); color: var(--ew-color-brand-text); }
}

@media (prefers-reduced-motion: reduce) {
  .ew-mm, .ew-mm *, .ew-mm__scrim { transition: none !important; animation: none !important; }
}