/* =========================================================
   MRV Header
   ========================================================= */

.mrv-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:16px 55px 16px 125px;   /* left 125 / right 55 */
  min-height:80px;
  box-sizing:border-box;
  background:#fff;
  font-family:var(--mrv-font);
}
.mrv-sticky-yes .mrv-header{position:sticky;top:0;z-index:99}

/* ---------- Logo 140 x 57 ---------- */
.mrv-header .mrv-logo{
  display:flex;
  align-items:center;
  flex:0 0 140px;
  width:140px;
  height:57px;
  text-decoration:none;
}
.mrv-header .mrv-logo img{width:140px;height:57px;object-fit:contain;display:block}
.mrv-header .mrv-logo span{color:var(--mrv-blue);font-weight:700;font-size:20px;white-space:nowrap}

.mrv-header .mrv-collapse{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex:1;
  gap:40px;
  flex-wrap:nowrap;
}

/* ---------- Navigation ---------- */
.mrv-header .mrv-nav__list{
  display:flex;
  flex-wrap:nowrap;
  list-style:none;
  margin:0;
  padding:0;
  gap:28px;
}
.mrv-header .mrv-nav li{position:relative;white-space:nowrap}
.mrv-header .mrv-nav a{
  color:var(--mrv-blue);
  text-decoration:none;
  white-space:nowrap;
  font-weight:400;
  font-size:16px;
  line-height:100%;
  letter-spacing:0;
  text-align:center;
  transition:color .2s;
}
.mrv-header .mrv-nav a:hover{color:var(--mrv-green)}

/* ---------- Dropdown (sub-menu) ---------- */
.mrv-header .mrv-nav .sub-menu{
  position:absolute;
  top:calc(100% + 14px);
  left:-16px;
  z-index:100;
  min-width:240px;
  margin:0;
  padding:10px;
  list-style:none;
  background:#fff;
  border:1px solid rgba(28,91,136,.08);
  border-radius:16px;
  box-shadow:0 16px 40px rgba(28,91,136,.14), 0 2px 6px rgba(28,91,136,.06);

  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
}

/* invisible hover bridge */
.mrv-header .mrv-nav .sub-menu::before{
  content:"";
  position:absolute;
  top:-20px;
  left:0;
  right:0;
  height:20px;
}

/* notch (little arrow on top of the card) */
.mrv-header .mrv-nav .sub-menu::after{
  content:"";
  position:absolute;
  top:-6px;
  left:32px;
  width:12px;
  height:12px;
  background:#fff;
  border-top:1px solid rgba(28,91,136,.08);
  border-left:1px solid rgba(28,91,136,.08);
  border-radius:3px 0 0 0;
  transform:rotate(45deg);
}

.mrv-header .mrv-nav .sub-menu li{
  padding:0;
  margin:2px 0;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease;
}

.mrv-header .mrv-nav .sub-menu a{
  display:block;
  padding:11px 16px;
  font-size:15px;
  font-weight:500;
  line-height:1.2;
  text-align:left;
  color:var(--mrv-blue);
  border-radius:10px;
  transition:background .2s ease, color .2s ease, padding-left .2s ease;
}
.mrv-header .mrv-nav .sub-menu a:hover,
.mrv-header .mrv-nav .sub-menu a:focus-visible{
  background:rgba(69,171,75,.10);
  color:var(--mrv-green);
  padding-left:22px;
}
.mrv-header .mrv-nav .sub-menu .current-menu-item>a{
  color:var(--mrv-green);
  background:rgba(69,171,75,.08);
}

/* open state */
.mrv-header .mrv-nav li:hover>.sub-menu,
.mrv-header .mrv-nav li:focus-within>.sub-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.mrv-header .mrv-nav li:hover>.sub-menu li,
.mrv-header .mrv-nav li:focus-within>.sub-menu li{
  opacity:1;
  transform:translateY(0);
}
/* stagger */
.mrv-header .mrv-nav .sub-menu li:nth-child(1){transition-delay:.03s}
.mrv-header .mrv-nav .sub-menu li:nth-child(2){transition-delay:.07s}
.mrv-header .mrv-nav .sub-menu li:nth-child(3){transition-delay:.11s}
.mrv-header .mrv-nav .sub-menu li:nth-child(4){transition-delay:.15s}

/* last item: open towards the left, notch on the right */
.mrv-header .mrv-nav__list>li:last-child>.sub-menu{
  left:auto;
  right:-16px;
}
.mrv-header .mrv-nav__list>li:last-child>.sub-menu::after{
  left:auto;
  right:32px;
}

/* parent arrow */
.mrv-header .mrv-nav .menu-item-has-children>a::after{
  content:"";
  display:inline-block;
  width:5px;
  height:5px;
  margin-left:8px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .25s ease;
}
.mrv-header .mrv-nav .menu-item-has-children:hover>a::after,
.mrv-header .mrv-nav .menu-item-has-children:focus-within>a::after{
  transform:translateY(1px) rotate(-135deg);
}

/* sub-menu toggle button (added by header.js, hidden on desktop) */
.mrv-header .mrv-sub-toggle{display:none}

/* ---------- Phone | Login | Search ---------- */
.mrv-header .mrv-right{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:0;
}

/* 30px vertical line between Contact Us and the phone number */
.mrv-header .mrv-phone{
  position:relative;
  padding-left:30px;
  color:var(--mrv-blue);
  text-decoration:none;
  font-weight:500;
  font-size:14px;
  line-height:20px;
  letter-spacing:0;
  white-space:nowrap;
}
.mrv-header .mrv-phone::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  height:30px;
  transform:translateY(-50%);
  border-left:1px solid #A7BCFF;
}

.mrv-header .mrv-login{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0 24px 0 24px;
  color:var(--mrv-blue);
  text-decoration:none;
  font-weight:500;
  font-size:16px;
  line-height:20px;
  letter-spacing:0;
}

/* ---------- Search: fixed 98x34 slot, expands left over the menu ---------- */
.mrv-header .mrv-search-slot{
  position:relative;
  flex:0 0 98px;
  width:98px;
  height:34px;
}
.mrv-header .mrv-search{
  position:absolute;
  top:0;
  right:0;                         /* right edge fixed, grows to the left */
  z-index:5;
  display:flex;
  flex-direction:row;              /* input left, icon right */
  align-items:center;
  width:98px;
  height:34px;
  margin:0;
  padding:0 0 0 14px;
  background:#fff;
  border:1px solid var(--mrv-green);
  border-radius:50px;
  box-sizing:border-box;
  overflow:hidden;
  transition:width .3s ease;
}
.mrv-header .mrv-search:hover,
.mrv-header .mrv-search:focus-within{width:320px}

.mrv-header .mrv-search input[type="search"]{
  flex:1 1 auto;
  min-width:0;
  width:100%;
  height:100%!important;
  border:0!important;
  box-shadow:none!important;
  outline:0!important;
  background:transparent!important;
  padding:0!important;
  margin:0!important;
  font-family:var(--mrv-font);
  font-size:14px;
  color:var(--mrv-blue);
}
.mrv-header .mrv-search input[type="search"]::placeholder{color:#8aa4b8}
.mrv-header .mrv-search button{
  flex:0 0 27px;
  width:27px;
  height:24px;
  margin:0 10px 0 6px;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--mrv-green)!important;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.mrv-header .mrv-search button svg{width:27px;height:24px;display:block}

/* ---------- Hamburger (hidden on desktop) ---------- */
.mrv-header .mrv-toggle{
  display:none!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:8px;
  cursor:pointer;
}
.mrv-header .mrv-toggle span{
  display:block;
  width:22px;
  height:2px;
  background:var(--mrv-blue);
  margin:5px 0;
}

/* =========================================================
   Laptop (<= 1500px)
   ========================================================= */
@media (max-width:1500px){
  .mrv-header{padding-left:60px;padding-right:30px}
  .mrv-header .mrv-nav__list{gap:18px}
  .mrv-header .mrv-nav a{font-size:14px}
  .mrv-header .mrv-nav .sub-menu a{font-size:14px}
  .mrv-header .mrv-collapse{gap:24px}
  .mrv-header .mrv-login{margin:0 14px}
}

/* =========================================================
   Tablet / Mobile (<= 1200px)
   ========================================================= */
@media (max-width:1200px){
  .mrv-header{
    flex-wrap:wrap;
    padding:14px 24px;
    min-height:0;
  }

  .mrv-header .mrv-logo{order:1;flex-basis:110px;width:110px;height:45px}
  .mrv-header .mrv-logo img{width:110px;height:45px}
  .mrv-header .mrv-toggle{display:block!important;order:2;margin-left:auto}

  /* hamburger -> X */
  .mrv-header .mrv-toggle span{transition:transform .3s ease, opacity .2s ease}
  .mrv-header.is-open .mrv-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .mrv-header.is-open .mrv-toggle span:nth-child(2){opacity:0}
  .mrv-header.is-open .mrv-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* ---------- Smooth open / close ---------- */
  .mrv-header .mrv-collapse{
    order:3;
    display:flex!important;
    flex:0 0 100%;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:24px;
    padding:0;
    max-height:0;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transition:
      max-height .45s cubic-bezier(.2,.7,.2,1),
      opacity .3s ease,
      padding .45s ease,
      visibility 0s linear .45s;
  }
  .mrv-header.is-open .mrv-collapse{
    max-height:calc(100vh - 80px);
    max-height:calc(100dvh - 80px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    opacity:1;
    visibility:visible;
    padding:20px 0 12px;
    transition-delay:0s;
  }

  /* menu items fade in one by one */
  .mrv-header .mrv-nav__list>li{
    opacity:0;
    transform:translateY(-8px);
    transition:opacity .3s ease, transform .3s ease;
  }
  .mrv-header.is-open .mrv-nav__list>li{opacity:1;transform:none}
  .mrv-header.is-open .mrv-nav__list>li:nth-child(1){transition-delay:.08s}
  .mrv-header.is-open .mrv-nav__list>li:nth-child(2){transition-delay:.13s}
  .mrv-header.is-open .mrv-nav__list>li:nth-child(3){transition-delay:.18s}
  .mrv-header.is-open .mrv-nav__list>li:nth-child(4){transition-delay:.23s}
  .mrv-header.is-open .mrv-nav__list>li:nth-child(5){transition-delay:.28s}
  .mrv-header.is-open .mrv-nav__list>li:nth-child(n+6){transition-delay:.33s}

  .mrv-header .mrv-nav{width:100%}
  .mrv-header .mrv-nav__list{flex-direction:column;align-items:flex-start;gap:4px;width:100%}
  .mrv-header .mrv-nav li{width:100%}
  .mrv-header .mrv-nav a{
    display:block;
    padding:12px 16px;
    margin:0 -16px;
    font-size:18px;
    font-weight:500;
    text-align:left;
    border-radius:12px;
  }
  .mrv-header .mrv-nav a:hover,
  .mrv-header .mrv-nav a:active{background:rgba(69,171,75,.10);color:var(--mrv-green)}

  /* ---------- Sub-menu: collapsed by default, toggled with the arrow ---------- */
  .mrv-header .mrv-nav .menu-item-has-children>a{padding-right:56px}
  .mrv-header .mrv-nav .menu-item-has-children>a::after{display:none}

  .mrv-header .mrv-sub-toggle{
    position:absolute;
    top:0;
    right:-16px;
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0!important;
    border:0!important;
    border-radius:12px;
    background:transparent!important;
    box-shadow:none!important;
    color:var(--mrv-blue)!important;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .mrv-header .mrv-sub-toggle::before{
    content:"";
    width:8px;
    height:8px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:translateY(-2px) rotate(45deg);
    transition:transform .3s ease;
  }
  .mrv-header .mrv-nav li.is-sub-open>.mrv-sub-toggle{color:var(--mrv-green)!important}
  .mrv-header .mrv-nav li.is-sub-open>.mrv-sub-toggle::before{transform:translateY(2px) rotate(-135deg)}

  /* closed state (also overrides desktop :hover / :focus-within, which stick on touch screens) */
  .mrv-header .mrv-nav .sub-menu,
  .mrv-header .mrv-nav li:hover>.sub-menu,
  .mrv-header .mrv-nav li:focus-within>.sub-menu,
  .mrv-header .mrv-nav__list>li:last-child>.sub-menu{
    position:static;
    left:auto;
    right:auto;
    min-width:0;
    margin:0 0 0 16px;
    padding:0 0 0 12px;
    background:transparent;
    border:0;
    border-left:2px solid rgba(69,171,75,.35);
    border-radius:0;
    box-shadow:none;
    transform:none;
    max-height:0;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transition:max-height .4s cubic-bezier(.2,.7,.2,1), opacity .25s ease, margin .3s ease, visibility 0s linear .4s;
  }
  /* open state */
  .mrv-header .mrv-nav .mrv-nav__list li.is-sub-open>.sub-menu{
    max-height:600px;
    opacity:1;
    visibility:visible;
    margin-bottom:8px;
    transition-delay:0s;
  }

  .mrv-header .mrv-nav .sub-menu::before,
  .mrv-header .mrv-nav .sub-menu::after,
  .mrv-header .mrv-nav__list>li:last-child>.sub-menu::after{display:none}
  .mrv-header .mrv-nav .sub-menu li{opacity:1;transform:none;transition-delay:0s;margin:0}
  .mrv-header .mrv-nav .sub-menu a{font-size:16px;font-weight:400;padding:10px 12px;margin:0}
  .mrv-header .mrv-nav .sub-menu a:hover{padding-left:12px}

  .mrv-header .mrv-right{
    width:100%;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:16px;
  }
  .mrv-header .mrv-phone{padding-left:0;font-size:16px;font-weight:600}
  .mrv-header .mrv-phone::before{display:none}
  .mrv-header .mrv-login{
    margin:0;
    padding:8px 22px;
    border-radius:50px;
    background:var(--mrv-blue);
    color:#fff!important;
  }
  .mrv-header .mrv-login:hover{background:var(--mrv-green)}

  .mrv-header .mrv-search-slot{flex:1 1 100%;width:100%;height:42px}
  .mrv-header .mrv-search,
  .mrv-header .mrv-search:hover,
  .mrv-header .mrv-search:focus-within{position:static;width:100%;height:42px}
}

@media (prefers-reduced-motion:reduce){
  .mrv-header .mrv-collapse,
  .mrv-header .mrv-nav__list>li,
  .mrv-header .mrv-nav .sub-menu,
  .mrv-header .mrv-sub-toggle::before{transition:none!important}
}