/* assets/header/header.css */

/* =========================
   Font variables (you can change these yourself)
   ========================= */
:root{
  /* пример: --hm-logo-font: 'Libre Baskerville', Georgia, serif; */
  --hm-logo-font: Georgia, "Times New Roman", serif;
  /* пример: --hm-menu-font: 'Inter', Arial, sans-serif; */
  --hm-menu-font: Arial, Helvetica, sans-serif;
}

/* Header base */
.hm-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.08);

  /* hide/show on scroll support */
  transition: transform .22s ease, box-shadow .22s ease;
  /* will-change: transform; <-- Убрано: ломало position: fixed для .hm-drawer */
}
.hm-header.is-hidden { transform: translateY(-100%); }
.hm-header.is-visible { box-shadow: 0 8px 24px rgba(0,0,0,.06); }

/* MOBILE FIRST: flex */
.hm-bar{
  max-width: 1200px; /* Широкая версия */
  margin: 0 auto;
  padding: 14px 16px; /* чуть больше воздуха */
  display: flex;
  align-items: center;
  gap: 14px;
}

.hm-left{ flex: 0 0 auto; }

/* Logo */
.hm-logo img { max-height: 40px; width: auto; display:block; }
.hm-logo__text{
  font-family: var(--hm-logo-font);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: .4px;
  color:#000;
  text-decoration:none;
  line-height: 1;
}

.hm-nav{ flex: 0 0 auto; }

/* Right side: push burger to far right on mobile */
.hm-right{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  margin-left: auto;
}

/* Desktop nav */
.hm-desktop { display: none; }
.hm-menu{
  list-style: none;
  display:flex;
  align-items: center;
  justify-content: flex-end; /* Меню выравнивается по правому краю */
  gap: 18px;
  margin:0;
  padding:0;
}
.hm-menu > li{
  position: relative;
}

/* Делаем родительский пункт статичным, чтобы мега-меню тянулось на всю ширину хедера */
.hm-menu > li.menu-item-has-children {
  position: static;
}

.hm-link{
  font-family: var(--hm-menu-font);
  text-decoration:none;
  color:#111;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .35px;
  text-transform: uppercase;
  padding: 10px 8px;
  display:inline-flex;
  align-items:center;
  gap: 8px;

  /* underline system (top menu only) */
  border-bottom: 2px solid transparent;
  transition: opacity .15s ease, border-color .15s ease;
}
.hm-link:hover{
  opacity: 1;
  border-bottom-color: #e60000; /* красный акцент только для верхнего меню */
}

/* Active menu underline (top menu) */
.hm-menu > li.current-menu-item > .hm-link,
.hm-menu > li.current-menu-parent > .hm-link,
.hm-menu > li.current_page_item > .hm-link,
.hm-menu > li.current_page_parent > .hm-link{
  border-bottom-color: #e60000;
}

/* -----------------------------
   Mega dropdown (2nd level)
--------------------------------*/
.hm-menu > li.menu-item-has-children > ul{
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 0;

  width: 100%;
  background: #f7f7f7;
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.08);

  /* центрирование под контейнер 1200px (600px - половина) */
  padding: 24px max(16px, calc(50vw - 600px));
  list-style:none;

  visibility: hidden;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;

  pointer-events: none;
  z-index: 1001;

  column-count: 5;
  column-gap: 26px;
}

/* Bridge area to prevent hover losing */
.hm-menu > li.menu-item-has-children > ul::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: -15px;
  height: 15px;
}

/* Чтобы пункты не разрывались между колонками */
.hm-menu > li.menu-item-has-children > ul > li{
  margin: 0 0 2px 0;
  break-inside: avoid;
  page-break-inside: avoid;
}

.hm-menu > li.menu-item-has-children > ul > li > a{
  display:block;
  padding: 2px 8px;
  line-height: 1.3;
  font-size: 14px;
  border-radius: 6px;
  text-decoration:none;
  color:#111;
  font-weight:600;
  background: transparent;

  /* IMPORTANT: no red border in submenu */
  border-bottom: none !important;
}
.hm-menu > li.menu-item-has-children > ul > li > a:hover{
  background: transparent;
  text-decoration: underline;
  text-decoration-color: #000;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Open on hover OR keyboard focus */
.hm-menu > li.menu-item-has-children:hover > ul,
.hm-menu > li.menu-item-has-children:focus-within > ul{
  display: block;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Social */
.hm-social{ display:flex; align-items:center; gap:8px; }
.hm-social__btn{
  text-decoration:none;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 700;
  color:#111;
  background:#fff;
}
.hm-social__btn:hover{ background: rgba(0,0,0,.04); }
.hm-social__btn--wide{ width: 100%; text-align:center; }

/* Burger */
.hm-burger{
  width: 44px;
  height: 40px;
  border-radius: 12px;
  border: none;
  background: transparent;
  display:flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hm-burger:focus{ outline: none; }
.hm-burger:active{ background: transparent; }
.hm-burger span{
  display:block;
  height: 3px;
  background:#111;
  border-radius: 3px;
}

/* Mobile drawer */
.hm-drawer{
  position: fixed;
  inset: 0;
  background:#fff;
  transform: translateX(100%);
  transition: transform .25s ease;
  z-index: 1000;
  display:flex;
  flex-direction: column;
  padding: 16px;
}
.hm-drawer.is-open{ transform: translateX(0); }

.hm-drawer__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.hm-drawer__brand a{
  text-decoration:none;
  font-weight:800;
  color:#111;
  font-size:20px;
  font-family: var(--hm-logo-font);
}

/* Close (X) */
.hm-close{
  width: 44px;
  height: 40px;
  border-radius: 12px;
  border: none;
  background: transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 26px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hm-close:focus{ outline: none; }
.hm-close:active{ background: transparent; }

.hm-mobile{ padding-top: 12px; flex: 1 1 auto; overflow:auto; }

/* Mobile menu list */
.hm-mobile-menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction: column;
  gap: 6px;
}
.hm-mobile-menu li{ margin:0; position: relative; }

.hm-mobile-menu > li > a{
  font-family: var(--hm-menu-font);
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 12px 44px 12px 0;
  text-decoration:none;
  color:#111;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .25px;
  text-transform: uppercase;
  background: transparent;
  border-radius: 0;
}
.hm-mobile-menu > li > a:hover{
  text-decoration: underline;
}

/* Кнопка-ёлочка на мобильных */
.hm-subtoggle {
  position: absolute;
  right: 0;
  top: 4px;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: none;
  background: transparent !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  z-index: 10;
}
.hm-subtoggle:focus,
.hm-subtoggle:active,
.hm-subtoggle:hover {
  background: transparent !important;
}
.hm-subtoggle svg {
  width: 18px;
  height: 18px;
  display: block;
  color: #111 !important;
  transition: transform 0.3s ease;
  transform-origin: center center;
}
.hm-mobile-menu li.is-open > .hm-subtoggle svg{
  transform: rotate(90deg);
}

/* Hide submenus by default on mobile */
.hm-mobile-menu .sub-menu{
  list-style:none;
  margin: 4px 0 0 0;
  padding: 0 0 0 14px;
  display:none;
  flex-direction: column;
  gap: 2px;
}
.hm-mobile-menu .sub-menu a{
  display:block;
  padding: 6px 0;
  text-decoration:none;
  color:#111;
  font-weight: 500;
  background: transparent;
}
.hm-mobile-menu .sub-menu a:hover{
  text-decoration: underline;
}

/* Show when opened */
.hm-mobile-menu li.is-open > .sub-menu{
  display:flex;
}

/* Mobile: make submenu spacing 2x tighter */
@media (max-width: 1023px){
  .hm-mobile-menu .sub-menu{
    gap: 1px;        /* было 2px */
    margin-top: 2px; /* было 4px */
  }
  .hm-mobile-menu .sub-menu a{
    padding: 3px 0;  /* было 6px */
  }
}

/* Backdrop */
.hm-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 999;
}
.hm-backdrop.is-open{
  opacity: 1;
  pointer-events: auto;
}

/* DESKTOP: right-aligned menu */
@media (min-width: 1024px){
  .hm-bar{
    display: flex;
    align-items: center;
    gap: 30px; /* Отступ между элементами */
  }

  .hm-left{ 
    margin-right: auto; /* Толкает все остальные блоки (меню и иконки) максимально вправо */
  }
  
  .hm-nav{ 
    /* Меню теперь прижато вправо */
  }
  
  .hm-right{
    margin-left: 0;
  }

  .hm-desktop{ display:block; }
  .hm-burger{ display:none; }
  .hm-drawer, .hm-backdrop{ display:none; }
}

/* Logo responsive */
@media (max-width: 768px){
  .hm-logo__text{ font-size: 26px; }
}

@media (min-width: 1024px) and (max-width: 1199px){
  .hm-menu > li.menu-item-has-children > ul{
    column-count: 4;
  }
}
@media (min-width: 1200px){
  .hm-menu > li.menu-item-has-children > ul{
    column-count: 5;
  }
}

button:active{ background: transparent !important; }
.hm-mobile-menu button{ -webkit-tap-highlight-color: transparent; }

/* --- Kill mobile tap highlight / pressed overlay --- */
#hm-drawer, #hm-drawer *{
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}
#hm-drawer a:focus,
#hm-drawer button:focus{
  outline: none !important;
}