/* header.css  — modern header only (06 Jun 2025) */

/* ---------- Wrapper ---------- */
.header-wrap{
    padding:16px 40px!important;
    background:var(--white);
  }
  .header_wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  
  /* ---------- Main nav ---------- */
  .center-menu{flex-grow:1;display:flex;justify-content:center}
  .center-menu .nav{
    display:flex;gap:24px;align-items:center
  }
  .center-menu .nav li{position:relative}
  .center-menu .nav li a{
    font-family:'Harmonia Sans Pro Cyr',sans-serif;
    font-size:16px;font-weight:400;
    color:var(--black);opacity:.8;
    text-transform:uppercase;
    display:flex;align-items:center;gap:12px;
    padding:10px;
    transition:.3s ease;
    white-space:nowrap;
  }
  .center-menu .nav li:hover>a, 
  .center-menu .nav li.active>a{color:var(--greyish-blue);opacity:1}
  .center-menu .nav li:hover>a span,
  .center-menu .nav li.active>a span{font-weight:600}
  
  /* ---------- Chevron icon ---------- */
  .nav-chevron{
    transition:transform .3s ease;
    stroke:var(--black);opacity:.4
  }
  .center-menu .nav li:hover>a .nav-chevron,
  .center-menu .nav li.active>a .nav-chevron{stroke:var(--greyish-blue);opacity:1}
  .center-menu .nav li.dropdown-nav:hover>a .nav-chevron,
  .center-menu .nav li.dropdown-nav.active>a .nav-chevron{transform:rotate(180deg)}
  
  /* ---------- New dropdown system ---------- */
  .center-menu .nav li.dropdown-nav{position:relative}
  
  /* Sub-menu container (invisible gap above for spacing) */
  .center-menu .nav li.dropdown-nav > .submenu{
    display:none;position:absolute;top:100%;left:0;padding-top:20px;
    list-style:none;margin:0;min-width:max-content;z-index:1000
  }
  /* Show on hover */
  .center-menu .nav li.dropdown-nav:hover > .submenu{display:block}
  
  /* Background box */
  .center-menu .nav li.dropdown-nav .submenu-content{
    background:var(--white);
    box-shadow:0 4px 8px rgba(0,0,0,.1);
    border-radius:4px;
    padding:8px;
    list-style:none;margin:0
  }
  .center-menu .nav li.dropdown-nav .submenu li{list-style:none}
  .center-menu .nav li.dropdown-nav .submenu li a{
    color:var(--black);opacity:.8;
    font-size:16px;font-weight:400;
    text-transform:uppercase;
    display:block;white-space:nowrap;
    padding:8px 12px;border-radius:4px
  }
  .center-menu .nav li.dropdown-nav .submenu li:hover{background:var(--aqua-blue)}
  .center-menu .nav li.dropdown-nav .submenu li:hover a{
    color:var(--black);opacity:1
  }
  
  /* ---------- CTA on right ---------- */
  .right-header{width:auto}
  
  /* ---------- Responsive Desktop Navigation ---------- */
  
  /* Override old responsive.css mobile menu at 990px */
  @media screen and (min-width: 851px) {
    .center-menu {
      position: static !important;
      top: auto !important;
      left: auto !important;
      width: auto !important;
      height: auto !important;
      z-index: auto !important;
      opacity: 1 !important;
      overflow-y: visible !important;
      visibility: visible !important;
      box-shadow: none !important;
      background-color: transparent !important;
      transition: none !important;
    }
    .center-menu .nav {
      flex-wrap: nowrap !important;
      padding: 0 !important;
    }
    .center-menu .nav li {
      width: auto !important;
      border-bottom: none !important;
    }
  }
  
  /* Smooth responsive progression - ONLY reducing, never increasing */
  
  /* Start reducing at 1320px */
  @media screen and (max-width: 1320px) {
    .center-menu .nav {
      gap: 22px;
    }
    .center-menu .nav li a {
      font-size: 15px;
      padding: 9px;
    }
  }
  
  @media screen and (max-width: 1250px) {
    .center-menu .nav {
      gap: 20px;
    }
    .center-menu .nav li a {
      font-size: 15px;
      padding: 8px;
    }
  }
  
  @media screen and (max-width: 1180px) {
    .center-menu .nav {
      gap: 18px;
    }
    .center-menu .nav li a {
      font-size: 14px;
      padding: 7px;
    }
  }
  
  @media screen and (max-width: 1120px) {
    .center-menu .nav {
      gap: 16px;
    }
    .center-menu .nav li a {
      font-size: 14px;
      padding: 6px;
      gap: 10px;
    }
  }
  
  @media screen and (max-width: 1060px) {
    .center-menu .nav {
      gap: 14px;
    }
    .center-menu .nav li a {
      font-size: 13px;
      padding: 5px;
      gap: 8px;
    }
  }
  
  @media screen and (max-width: 1000px) {
    .center-menu .nav {
      gap: 12px;
    }
    .center-menu .nav li a {
      font-size: 13px;
      padding: 4px;
      gap: 6px;
    }
  }
  
  @media screen and (max-width: 940px) {
    .center-menu .nav {
      gap: 10px;
    }
    .center-menu .nav li a {
      font-size: 12px;
      padding: 3px;
      gap: 4px;
    }
  }
  
  /* Tablet - abbreviated text mode before mobile switch */
  @media screen and (max-width: 880px) and (min-width: 851px) {
    .center-menu .nav {
      gap: 8px;
    }
    .center-menu .nav li a {
      font-size: 11px;
      padding: 2px;
      gap: 3px;
    }
    .center-menu .nav li a span {
      display: none;
    }
    .center-menu .nav li a:after {
      content: attr(data-short);
      font-size: 11px;
      text-transform: uppercase;
      font-weight: 600;
    }
  }