/* ============================================================================
   MAVI NEW YORK  MEGA MENU
   Secondary navigation bar below Astra's primary header.
   Brand: navy #002d62 | blue #00aeef | white #fff
   ============================================================================ */

:root{
  --mn-navy:   #002d62;
  --mn-blue:   #00aeef;
  --mn-white:  #fff;
  --mn-bg:     #002d62;
  --mn-hover:  #003d87;
  --mn-border: rgba(255,255,255,.12);
  --mn-panel:  #fff;
  --mn-h:      48px;        /* nav bar height */
  --mn-r:      6px;
  --mn-trans:  .2s ease;
  --mn-z:      9999;
}

/* ── Bar ── */
.mavi-nav{
  background: var(--mn-bg);
  position: relative;
  z-index: var(--mn-z);
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
  border-top: 2px solid #d4af37; /* Premium golden border */
}
.mavi-nav__wrap{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  min-height: var(--mn-h);
}

/* ── Top-level list ── */
.mavi-list{
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  gap: 0;
}
.mavi-item{
  position: relative;
  display: flex;
  align-items: center;
}

/* ── Top-level link ── */
.mavi-link{
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 13px;
  height: var(--mn-h);
  color: rgba(255,255,255,.9);
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: .01em;
  transition: color var(--mn-trans), background var(--mn-trans);
  border-bottom: 2px solid transparent;
}
.mavi-link:hover,
.mavi-link:focus-visible,
.mavi-item:hover > .mavi-link,
.mavi-link[aria-expanded="true"]{
  color: var(--mn-white);
  background: var(--mn-hover);
  border-bottom-color: var(--mn-blue);
}
.mavi-link--cta{
  background: var(--mn-blue);
  border-radius: var(--mn-r);
  margin: 8px 0 8px 6px;
  height: calc(var(--mn-h) - 16px);
  padding: 0 16px;
  color: var(--mn-white) !important;
  border-bottom: none !important;
}
.mavi-link--cta:hover{ background: #0093cc; }

.mavi-caret{
  flex-shrink: 0;
  transition: transform var(--mn-trans);
}
.mavi-item:hover > .mavi-link .mavi-caret,
.mavi-link[aria-expanded="true"] .mavi-caret{
  transform: rotate(180deg);
}

/* Mobile accordion toggle (hidden on desktop) */
.mavi-acc-toggle{ display: none; }
.mavi-burger   { display: none; }

/* 
   STANDARD DROPDOWN
  */
.mavi-drop{
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  min-width: 220px;
  background: var(--mn-panel);
  border: 1px solid #e2e8f0;
  border-top: 3px solid var(--mn-blue);
  border-radius: 0 0 var(--mn-r) var(--mn-r);
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
  list-style: none;
  margin: 0;
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--mn-trans), transform var(--mn-trans), visibility var(--mn-trans);
  z-index: var(--mn-z);
}
.mavi-has-drop:hover > .mavi-drop,
.mavi-has-drop:focus-within > .mavi-drop{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mavi-drop li a{
  display: block;
  padding: 9px 18px;
  font-size: .85rem;
  color: #1a2533;
  text-decoration: none;
  transition: background var(--mn-trans), color var(--mn-trans), padding-left var(--mn-trans);
}
.mavi-drop li a:hover{
  background: #f4f7fb;
  color: var(--mn-navy);
  padding-left: 24px;
}

/* Nested dropdown (Blog sub-menu) */
.mavi-drop--nested{
  top: 0;
  left: 100%;
  border-top: 3px solid var(--mn-blue);
}
.mavi-has-drop--nested{ position: relative; }
.mavi-has-drop--nested > a{ display: flex; align-items: center; justify-content: space-between; }
.mavi-has-drop--nested:hover > .mavi-drop--nested,
.mavi-has-drop--nested:focus-within > .mavi-drop--nested{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 
   MEGA PANEL
 */
.mavi-mega{
  position: fixed;              /* fixed so it spans full width */
  left: 0;
  right: 0;
  top: auto;                    /* JS sets this to nav bottom */
  background: var(--mn-panel);
  border-top: 3px solid var(--mn-blue);
  box-shadow: 0 12px 40px rgba(0,0,0,.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--mn-trans), transform var(--mn-trans), visibility var(--mn-trans);
  z-index: calc(var(--mn-z) - 1);
  max-height: 80vh;
  overflow-y: auto;
}
.mavi-has-mega:hover .mavi-mega,
.mavi-has-mega:focus-within .mavi-mega{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mavi-mega__inner{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 20px 24px;
}

/* ── Mega column ── */
.mavi-col{
  padding: 0 20px;
  border-right: 1px solid #e8edf4;
}
.mavi-col:last-child{ border-right: none; }

.mavi-col__heading{
  display: block;
  font-size: .9rem;
  font-weight: 800;
  color: var(--mn-navy);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--mn-blue);
  transition: color var(--mn-trans);
}
.mavi-col__heading:hover{ color: var(--mn-blue); }
.mavi-col__heading--plain{
  display: block;
  font-size: .9rem;
  font-weight: 800;
  color: var(--mn-navy);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--mn-blue);
}

/* ── Mega group (sub-section) ── */
.mavi-group{ margin-bottom: 14px; }
.mavi-group__title{
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--mn-navy);
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
  margin-bottom: 5px;
  transition: color var(--mn-trans);
}
.mavi-group__title:hover{ color: var(--mn-blue); }

/* ── Sub-list ── */
.mavi-sub{
  list-style: none;
  margin: 0 0 0 0;
  padding: 0;
}
.mavi-sub li a{
  display: block;
  font-size: .82rem;
  color: #3d4f64;
  text-decoration: none;
  padding: 3px 0 3px 8px;
  border-left: 2px solid transparent;
  transition: color var(--mn-trans), border-color var(--mn-trans), padding-left var(--mn-trans);
  line-height: 1.4;
}
.mavi-sub li a:hover{
  color: var(--mn-navy);
  border-left-color: var(--mn-blue);
  padding-left: 12px;
}
.mavi-sub--flat li a{ padding-left: 0; border-left: none; }
.mavi-sub--flat li a:hover{ padding-left: 6px; }

/* ── Deep list (4th level: Elite, Elite Plus, …) ── */
.mavi-has-deep{ position: relative; }
.mavi-deep{
  list-style: none;
  margin: 2px 0 4px 10px;
  padding: 4px 0 4px 8px;
  border-left: 2px solid #c8daf0;
}
.mavi-deep li a{
  font-size: .78rem;
  color: #5a7192;
  text-decoration: none;
  display: block;
  padding: 2px 0;
  transition: color var(--mn-trans), padding-left var(--mn-trans);
}
.mavi-deep li a::before{ content: '›'; margin-right: 5px; color: var(--mn-blue); }
.mavi-deep li a:hover{ color: var(--mn-navy); padding-left: 4px; }

/* 
   TABLET  (max 1024px) — 2-column mega
 */
@media (max-width: 1024px){
  .mavi-nav__wrap{ padding: 0 14px; }
  .mavi-link{ padding: 0 9px; font-size: .8rem; }
  .mavi-mega__inner{ grid-template-columns: 1fr 1fr; }
  .mavi-col{ padding: 0 14px; }
}

/* 
   MOBILE  (max 768px) — hamburger accordion
 */
@media (max-width: 768px){

  /* Burger button */
  .mavi-burger{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 5px;
    cursor: pointer;
    padding: 8px;
    margin-left: auto;
    flex-shrink: 0;
  }
  .mavi-burger span{
    display: block;
    height: 2px;
    background: var(--mn-white);
    border-radius: 2px;
    transition: transform .25s, opacity .25s;
  }
  .mavi-burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .mavi-burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
  .mavi-burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  /* Collapsed list */
  .mavi-list{
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--mn-navy);
    border-top: 2px solid var(--mn-blue);
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
    z-index: var(--mn-z);
  }
  .mavi-list.is-open{ max-height: 100vh; overflow-y: auto; }

  /* Items */
  .mavi-item{ flex-wrap: wrap; border-bottom: 1px solid var(--mn-border); }
  .mavi-item--cta{ border-bottom: none; padding: 8px 16px; }
  .mavi-link{
    flex: 1;
    height: 48px;
    padding: 0 16px;
    font-size: .88rem;
    border-bottom: none;
  }
  .mavi-link--cta{
    margin: 0;
    width: 100%;
    height: 44px;
    border-radius: var(--mn-r);
    justify-content: center;
  }

  /* Accordion toggle */
  .mavi-acc-toggle{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 48px;
    background: none;
    border: none;
    border-left: 1px solid var(--mn-border);
    cursor: pointer;
    flex-shrink: 0;
  }
  .mavi-acc-toggle span{
    display: block;
    width: 12px;
    height: 12px;
    border-right: 2px solid rgba(255,255,255,.7);
    border-bottom: 2px solid rgba(255,255,255,.7);
    transform: rotate(45deg) translateY(-3px);
    transition: transform .2s;
  }
  .mavi-acc-toggle[aria-expanded="true"] span{ transform: rotate(-135deg) translateY(-3px); }
  .mavi-acc-toggle--sm{
    width: 28px;
    height: 28px;
    border-left: none;
    border: 1px solid #c8daf0;
    border-radius: 4px;
    position: absolute;
    right: 0;
    top: 4px;
  }
  .mavi-acc-toggle--sm span{
    width: 8px;
    height: 8px;
    border-color: var(--mn-navy);
  }

  /* Mega + Dropdown hidden until accordion opens */
  .mavi-mega,
  .mavi-drop{
    position: static;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--mn-border);
    background: rgba(0,0,0,.18);
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
    width: 100%;
  }
  .mavi-mega.is-open,
  .mavi-drop.is-open{ max-height: 2000px; }

  .mavi-mega__inner{
    grid-template-columns: 1fr;
    padding: 0 0 8px;
  }
  .mavi-col{
    border-right: none;
    border-bottom: 1px solid var(--mn-border);
    padding: 12px 16px;
  }
  .mavi-col__heading,
  .mavi-col__heading--plain{ color: var(--mn-white); border-bottom-color: rgba(255,255,255,.3); }
  .mavi-group__title{ color: rgba(255,255,255,.75); }
  .mavi-sub li a, .mavi-deep li a{ color: rgba(255,255,255,.7); }
  .mavi-sub li a:hover, .mavi-deep li a:hover{ color: var(--mn-white); }

  .mavi-drop li a{ color: rgba(255,255,255,.8); padding: 10px 16px; }
  .mavi-drop li a:hover{ color: #fff; background: rgba(255,255,255,.08); padding-left: 22px; }

  /* Nested drop on mobile */
  .mavi-drop--nested{
    position: static;
    border-top: 1px solid rgba(255,255,255,.1);
    padding-left: 12px;
  }
  .mavi-has-drop--nested:hover > .mavi-drop--nested,
  .mavi-has-drop--nested:focus-within > .mavi-drop--nested{
    opacity: 1;
    visibility: visible;
  }

  /* Deep list on mobile */
  .mavi-deep{ border-left-color: rgba(255,255,255,.2); }
  .mavi-deep li a{ color: rgba(255,255,255,.55); }
  .mavi-has-deep{ padding-right: 36px; }

  .mavi-item--cta{ padding: 10px 16px 12px; }
}

/* 
   SKIP-LINK & FOCUS STYLES (a11y)
 */
.mavi-link:focus-visible,
.mavi-drop li a:focus-visible,
.mavi-sub li a:focus-visible,
.mavi-deep li a:focus-visible{
  outline: 2px solid var(--mn-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Ensure mega panel appears above Astra's fixed header if sticky */
.mavi-nav { z-index: 9990; }
.mavi-mega { z-index: 9989; }