/* ============================================================
   Mavo Menu HC — menu.css
   Replaces UberMenu CSS. ~150 lines vs 142 KB original.
   ============================================================ */

/* ── Design tokens ──────────────────────────────────────────── */
:root {
  --mavo-font:       Helvetica, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mavo-fs-bar:     18px;
  --mavo-fs-sub:     16px;
  --mavo-bar-h:      59px;
  --mavo-blue:       #4e74a5;
  --mavo-brown:      #886353;
  --mavo-header-bg:  #b6c6d4;
  --mavo-search-ico: #23527c;
  --mavo-bg:         #fff;
  --mavo-shadow:     0 0 20px rgba(0,0,0,.15);
  --mavo-pad-sub:    2px 10px;
  --mavo-transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}

/* ── Reset ──────────────────────────────────────────────────── */
.mavo-nav, .mavo-toggle,
.mavo-bar, .mavo-bar *,
.mavo-sub, .mavo-sub2,
.mavo-mega, .mavo-mega * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
  text-decoration: none;
  background: none;
  outline: none;
}

/* ── Mobile toggle (hidden on desktop) ──────────────────────── */
.mavo-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font: var(--mavo-fs-bar) var(--mavo-font);
  color: var(--mavo-blue);
  padding: 14px 20px;
  background: var(--mavo-bg);
  width: 100%;
  text-align: left;
}
.mavo-toggle:hover { color: var(--mavo-brown); }

/* ── Nav wrapper ────────────────────────────────────────────── */
.mavo-nav {
  position: relative;
  background: var(--mavo-bg);
}

/* ── Top bar ─────────────────────────────────────────────────── */
.mavo-bar {
  display: flex;
  align-items: stretch;
  background: var(--mavo-bg);
}

/* ── Bar items ──────────────────────────────────────────────── */
.mavo-item {
  position: relative;        /* anchor for flyout dropdowns */
}
.mavo-item.mavo-has-mega {
  position: static;          /* mega panel anchors to .mavo-nav instead */
}

.mavo-link {
  display: flex;
  align-items: center;
  height: var(--mavo-bar-h);
  padding: 5px 15px;
  font: var(--mavo-fs-bar) var(--mavo-font);
  color: var(--mavo-blue);
  white-space: nowrap;
  cursor: pointer;
  line-height: var(--mavo-bar-h);
}
.mavo-link:hover,
.mavo-has-fly:hover > .mavo-link,
.mavo-has-fly.is-active > .mavo-link,
.mavo-has-mega:hover > .mavo-link,
.mavo-has-mega.is-active > .mavo-link,
.mavo-item-search:hover > .mavo-link,
.mavo-item-search.is-active > .mavo-link {
  color: var(--mavo-brown);
}
.mavo-nolink { cursor: default; }
.mavo-link-icon { padding: 5px 12px; }

/* ── Shared dropdown base ───────────────────────────────────── */
.mavo-sub,
.mavo-mega,
.mavo-search-drop {
  position: absolute;
  background: var(--mavo-bg);
  box-shadow: var(--mavo-shadow);
  z-index: 500;
  /* Hidden state */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: var(--mavo-transition);
  top: 100%;
}

/* Visible state — triggered by hover (CSS) or .is-active (JS on mobile) */
.mavo-has-fly:hover > .mavo-sub,
.mavo-has-fly.is-active > .mavo-sub,
.mavo-has-mega:hover > .mavo-mega,
.mavo-has-mega.is-active > .mavo-mega,
.mavo-item-search:hover > .mavo-search-drop,
.mavo-item-search.is-active > .mavo-search-drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ── L1 flyout dropdown ─────────────────────────────────────── */
.mavo-sub {
  left: 0;
  min-width: 220px;
}
/* RTL search: align right edge */
.mavo-search-rtl > .mavo-sub,
.mavo-search-rtl > .mavo-search-drop {
  left: auto;
  right: 0;
}

.mavo-sub-item > a,
.mavo-sub-header > span {
  display: block;
  padding: var(--mavo-pad-sub);
  font: var(--mavo-fs-sub) var(--mavo-font);
  color: var(--mavo-blue);
  white-space: nowrap;
  line-height: 1.8;
}
.mavo-sub-item > a:hover { color: var(--mavo-brown); }

/* Section headers inside flyout */
.mavo-sub-header > span {
  font-weight: bold;
  color: var(--mavo-brown);
  background: var(--mavo-header-bg);
  padding: 4px 10px;
}

/* ── L2 sub-flyout (right side) ─────────────────────────────── */
.mavo-has-fly2 {
  position: relative;
}
.mavo-sub2 {
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 180px;
  background: var(--mavo-bg);
  box-shadow: var(--mavo-shadow);
  z-index: 501;
  opacity: 0;
  visibility: hidden;
  transform: translateX(6px);
  transition: var(--mavo-transition);
}
.mavo-has-fly2:hover > .mavo-sub2,
.mavo-has-fly2.is-active > .mavo-sub2 {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.mavo-sub2 li > a {
  display: block;
  padding: var(--mavo-pad-sub);
  font: var(--mavo-fs-sub) var(--mavo-font);
  color: var(--mavo-blue);
  white-space: nowrap;
  line-height: 1.8;
}
.mavo-sub2 li > a:hover { color: var(--mavo-brown); }

/* Chevron icon alignment inside L2-trigger links */
.mavo-has-fly2 > a { display: flex; align-items: center; gap: 4px; }
.mavo-has-fly2 > a svg { margin-left: auto; opacity: .5; }

/* ── Mega menu ──────────────────────────────────────────────── */
.mavo-mega {
  left: 0;
  right: 0;
}
.mavo-mega-inner {
  display: flex;
  gap: 0;
  padding: 8px 0;
}
.mavo-mega-col {
  flex: 1;
  padding: 0 4px;
  border-right: 1px solid #eee;
}
.mavo-mega-col:last-child { border-right: none; }

.mavo-mega-header {
  display: block;
  font-weight: bold;
  font: bold var(--mavo-fs-sub) var(--mavo-font);
  color: var(--mavo-brown);
  background: var(--mavo-header-bg);
  padding: 4px 10px;
  margin-bottom: 2px;
}
a.mavo-mega-header:hover { color: var(--mavo-brown); opacity: .85; }

.mavo-mega-col ul { list-style: none; padding: 0; margin: 0; }
.mavo-mega-col li > a {
  display: block;
  padding: var(--mavo-pad-sub);
  font: var(--mavo-fs-sub) var(--mavo-font);
  color: var(--mavo-blue);
  white-space: nowrap;
  line-height: 1.8;
}
.mavo-mega-col li > a:hover { color: var(--mavo-brown); }

/* ── Search dropdown ────────────────────────────────────────── */
.mavo-search-drop {
  min-width: 280px;
  padding: 10px;
}
.mavo-search-form { display: flex; align-items: center; gap: 4px; }
.mavo-search-input {
  flex: 1;
  padding: 6px 10px;
  font: var(--mavo-fs-sub) var(--mavo-font);
  color: var(--mavo-blue);
  border: 1px solid #ddd;
  background: var(--mavo-bg);
  border-radius: 2px;
}
.mavo-search-input::placeholder { color: var(--mavo-blue); opacity: .7; }
.mavo-search-btn {
  cursor: pointer;
  color: var(--mavo-search-ico);
  padding: 6px 8px;
  background: none;
  border: none;
  line-height: 1;
}
.mavo-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Language switcher ──────────────────────────────────────── */
.mavo-item-lang {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
}
.mavo-lang-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  font: var(--mavo-fs-sub) var(--mavo-font);
  color: var(--mavo-blue);
  line-height: var(--mavo-bar-h);
}
.mavo-lang-link:hover { color: var(--mavo-brown); }
.mavo-lang-link img { vertical-align: middle; }

/* ── Mobile (≤ 959 px) ──────────────────────────────────────── */
@media (max-width: 959px) {
  .mavo-toggle { display: flex; }

  .mavo-nav .mavo-bar {
    display: none;
    flex-direction: column;
    background: var(--mavo-bg);
    max-height: 80vh;
    overflow-y: auto;
  }
  .mavo-nav.is-open .mavo-bar { display: flex; }

  /* All items full-width */
  .mavo-item,
  .mavo-item.mavo-has-mega { position: static; }

  .mavo-link {
    height: auto;
    line-height: 1.4;
    padding: 12px 20px;
    border-bottom: 1px solid #eee;
    justify-content: space-between;
  }

  /* Dropdowns: static flow, hidden until .is-active */
  .mavo-sub, .mavo-mega, .mavo-search-drop,
  .mavo-sub2 {
    position: static;
    box-shadow: none;
    opacity: 1;
    visibility: hidden;
    transform: none;
    transition: none;
    display: none;
    background: #f7f9fc;
  }
  .mavo-has-fly.is-active > .mavo-sub,
  .mavo-has-mega.is-active > .mavo-mega,
  .mavo-item-search.is-active > .mavo-search-drop,
  .mavo-has-fly2.is-active > .mavo-sub2 {
    display: block;
    visibility: visible;
  }

  /* Prevent CSS hover-open on mobile */
  .mavo-has-fly:hover > .mavo-sub,
  .mavo-has-mega:hover > .mavo-mega,
  .mavo-item-search:hover > .mavo-search-drop,
  .mavo-has-fly2:hover > .mavo-sub2 {
    opacity: 0;
    visibility: hidden;
    display: none;
  }
  .mavo-has-fly.is-active > .mavo-sub,
  .mavo-has-mega.is-active > .mavo-mega,
  .mavo-item-search.is-active > .mavo-search-drop,
  .mavo-has-fly2.is-active > .mavo-sub2 {
    opacity: 1;
    visibility: visible;
    display: block;
  }

  /* Sub-flyout on mobile: indent rather than slide right */
  .mavo-sub2 { left: 0; padding-left: 12px; }

  /* Mega columns stack */
  .mavo-mega-inner { flex-direction: column; }
  .mavo-mega-col { border-right: none; border-bottom: 1px solid #eee; }

  /* Lang switcher */
  .mavo-item-lang {
    flex-wrap: wrap;
    padding: 10px 20px;
    border-bottom: 1px solid #eee;
  }

  /* Search bar full width */
  .mavo-search-drop { padding: 10px 20px; }
  .mavo-search-input { width: 100%; }
}