HEADER { width: 100%; min-height: 80px; display: block; background: var(--color-primary); position: relative; }

HEADER .top{ position: relative; overflow: visible; min-height: 10px; }

HEADER .top .logo{
   width: 280px; height: 49px; display: block; cursor: pointer;
   background: url(../i/logo.svg) center center no-repeat; background-size: contain;
   position: absolute; top: 20px; left: 0;
}


/* NAV */
HEADER NAV{
	padding-top: 16px;
	display: grid; grid-template-columns: 1fr auto;
	grid-template-areas: "search feedback" "menu menu";
	justify-items: end; align-items: center; gap: 24px 32px;
}

/* меню */
HEADER NAV .menu{ grid-area: menu; }
HEADER NAV .menu > UL{ overflow: auto; list-style: none; background: var(--color-primary); display: flex; }
HEADER NAV .menu > UL > LI{ margin: 0; padding: 0; }
HEADER NAV .menu > UL > LI > A{
   color: var(--color-bg); text-decoration: none; font-size: 1.1rem; font-weight: 500; display: block; padding: 12px 24px;
   cursor: pointer; user-select: none;
}
HEADER NAV .menu > UL > LI > A:HOVER{ background-color: rgba(255,255,255,0.2); }
HEADER NAV .menu > UL > LI > A.active,
HEADER NAV .menu > UL > LI > A.current{ background-color: var(--color-primary-dk); }
HEADER NAV .menu > UL > LI > A:ACTIVE{ background-color: var(--color-bg); color: var(--color-primary); }


/* search */
HEADER NAV .search{ grid-area: search; position: relative; }
HEADER NAV .search:after{
	content: "\e8b6"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
   font: var(--icon-font); color: var(--color-bg);
   opacity: 0.75;
}
HEADER NAV .search INPUT{
   border: 2px solid var(--color-bg); border-radius: 16px; background: none;
   font-size: 1.15rem; color: var(--color-bg); padding: 4px 32px 4px 12px; width: 200px;
   outline: none;
   opacity: 0.5;
}
HEADER NAV .search INPUT:focus{ opacity: 1.0 }


/* feedback */
HEADER NAV .feedback{ grid-area: feedback; }
HEADER NAV .feedback A{
   display: block;
	color: var(--color-bg);
	text-decoration: none; text-transform: uppercase; font-size: 0.8rem; font-weight: 400;
   position: relative; padding: 4px 0px 4px 24px;
   opacity: 0.75;
}
HEADER NAV .feedback A:hover{
   opacity: 1.0;
}
HEADER NAV .feedback A::before{
	content: "\e0e1"; position: absolute; left: -2px; top: 50%; transform: translateY(-50%);
   font: var(--icon-font);
}


/* usefull-info */
HEADER .usefull-info{
	display: none; background: var(--color-primary-dk); position: absolute; left: 0; width: 100%; z-index: 100;
	box-shadow: var(--shadow1);
}
HEADER .usefull-info.active{ display: block; }
HEADER .usefull-info ul{
	display: flex; flex-wrap: wrap; gap: 12px 2%; padding: 32px 0;
}
HEADER .usefull-info ul li{ list-style: none; position: relative; padding-left: 28px; display: block; width: 32%; }
HEADER .usefull-info ul li::before{
	content: "\e5c8"; position: absolute; left: -2px; color: var(--color-bg);
   font: var(--icon-font);
	opacity: 0.5;
}
HEADER .usefull-info ul li A{ color: var(--color-bg); text-decoration: none; }


/* PHONE */
@media (max-width: 940px){

   HEADER .top .logo{ top: 12px; height: 44px; width: 260px; max-width: 80%; }

   HEADER .top .menu-top-btn{ width: 48px; height: 48px; position: absolute; top: 16px; right: 0px; cursor: pointer; z-index: 2000; }
   HEADER .top .menu-top-btn::after{
      content: "\e5d2";
      font: var(--icon-font); font-size: 32px; color: var(--color-bg);
      position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
   }
   HEADER .top .menu-top-btn.active::after{
      content: "\e5cd";
   }
   HEADER NAV{ display: none; }
   HEADER NAV.active{
      display: grid; grid-template-columns: 1fr; justify-items: center; align-content: center;
      position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000;
      grid-template-areas: "menu" "search" "feedback"; background-color: var(--color-primary);
   }
   HEADER NAV .menu{ border-bottom: 1px solid #FFFFFF66; width: 100%; padding-bottom: 20%; }
   HEADER NAV .menu > UL{ display: flex; flex-direction: column; align-items: center; }


   HEADER .usefull-info{
      position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 3000;
   }
   HEADER .usefull-info.active{ display: block; }
   HEADER .usefull-info ul{
      padding: 16px;
      flex-direction: column; align-content: center; justify-content: center; gap: 24px;
      height: 100%;
   }
   HEADER .usefull-info ul li{ width: auto; }

   HEADER .usefull-info .close{ width: 48px; height: 48px; position: absolute; top: 0px; right: 0px; cursor: pointer; z-index: 100; }
   HEADER .usefull-info .close::after{
      content: "\e5cd";
      font: var(--icon-font); font-size: 32px; color: var(--color-bg);
      position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
   }
}