/* ================================
   20-topbar.css (CLEAN + BURGER)
   Structure:
   .hdr-topbar (outer)
     > .wp-block-group (row)
     > .hdr-lang (desktop languages container)
   Burger markup (from devtools):
   .wpw-burger.wpw-burger--2col
     input.wpw-burger__toggle
     label.wpw-burger__open (contains svg open + svg close)
     .wpw-burger__overlay
       label.wpw-burger__backdrop
       .wpw-burger__panel
         label.wpw-burger__close (we hide it)
         .wpw-burger__cols (2 columns)
   ================================ */

/* ---------- Topbar base ---------- */
.hdr-topbar{
  width: 100%;
  max-width: var(--frame-max);
  margin: 0 auto;
  padding: var(--pad-y-desktop) var(--pad-r-desktop) var(--pad-y-desktop) var(--pad-l-desktop);
  min-height: var(--topbar-h-desktop);

  display: flex !important;
  align-items: center !important;
  gap: 12px !important;

  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  box-sizing: border-box !important;

  /* keep visible while menu open */
  position: sticky !important;
  top: var(--wp-admin--admin-bar--height, 0px) !important;
  z-index: 999999 !important;
}

/* INNER Row (first child group inside Header Topbar) */
.hdr-topbar > .wp-block-group:not(.hdr-lang){
  flex: 1 1 auto !important;
  min-width: 0 !important;

  display: flex !important;
  align-items: center !important;
  gap: 12px !important;

  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
}

/* Right block: Desktop languages container (flags) */
.hdr-topbar > .hdr-lang{
  flex: 0 0 auto !important;
  min-width: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

/* Logo variants */
.hdr-logo--desktop{ display:block !important; }
.hdr-logo--mobile{  display:none !important; }

/* Contacts row */
.hdr-contacts{
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
  gap: var(--contact-gap-desktop) !important;
}

/* remove Gutenberg padding inside contacts items */
.hdr-contacts > .wp-block-group{
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

/* Contact link and icons */
.hdr-contact{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  white-space:nowrap !important;
  line-height:1 !important;
}

.hdr-ico,
.hdr-contact svg{
  display:block !important;
  width:20px !important;
  height:20px !important;
  flex:0 0 20px !important;
}
.hdr-contact svg path{ fill: currentColor !important; }

/* ---------- Burger base (always compact) ---------- */
.wpw-burger{
  flex: 0 0 auto !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}
.wpw-burger p:empty{ display:none !important; }

.wpw-burger__open{
  padding-right: 0 !important;
  margin-right: 0 !important;

  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 42px !important;
  height: 42px !important;
  line-height: 1 !important;
}

.wpw-burger__open svg{ display:block !important; }
.wpw-burger__open svg path{ fill: currentColor !important; }

/* Toggle icons inside the SAME button */
.wpw-burger__ico--close{ display:none !important; }
.wpw-burger__toggle:checked + .wpw-burger__open .wpw-burger__ico--open{ display:none !important; }
.wpw-burger__toggle:checked + .wpw-burger__open .wpw-burger__ico--close{ display:block !important; }

/* Hide the second close button inside panel (removes “2 buttons” issue) */
.wpw-burger__panel .wpw-burger__close{
  display:none !important;
}

/* Height variable for menu offset (no JS) */
:root{
  --wpw-topbar-h: var(--topbar-h-desktop, 72px);
}
@media (max-width:1140px){
  :root{ --wpw-topbar-h: var(--topbar-h-mobile, 56px); }
}

/* ---------- Overlay (starts UNDER topbar) ---------- */
.wpw-burger__overlay{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;

  /* key: do NOT cover topbar */
  top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wpw-topbar-h)) !important;
  bottom: 0 !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  transition: opacity .18s ease, visibility .18s ease !important;
  z-index: 900000 !important; /* below topbar */
}

.wpw-burger__toggle:checked ~ .wpw-burger__overlay{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.wpw-burger__backdrop{
  position:absolute !important;
  inset:0 !important;
  background: rgba(0,0,0,.18) !important;
}

/* ---------- Panel positioning ---------- */

/* Desktop: right edge aligns to page content right edge */
@media (min-width:1141px){
  :root{
    --wpw-side-gutter: max(0px, calc((100vw - var(--frame-max, 1200px)) / 2));
    --wpw-page-right: calc(var(--wpw-side-gutter) + var(--pad-r-desktop, 16px));
    --wpw-page-left:  calc(var(--wpw-side-gutter) + var(--pad-l-desktop, 16px));
  }

  .wpw-burger__panel{
    position: fixed !important;

    /* start under adminbar + topbar */
    top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wpw-topbar-h)) !important;

    right: var(--wpw-page-right) !important;

    /* panel width is limited, but never exceeds inner content width */
    width: min(680px, calc(var(--frame-max, 1200px) - var(--pad-l-desktop, 16px) - var(--pad-r-desktop, 16px))) !important;

    height: calc(100vh - (var(--wp-admin--admin-bar--height, 0px) + var(--wpw-topbar-h))) !important;
    overflow: auto !important;

    background: #fff !important;
    border-radius: 16px !important;
    padding: 18px !important;
    box-shadow: 0 12px 35px rgba(0,0,0,.18) !important;
  }
}

/* Mobile / Tablet: full width under topbar */
@media (max-width:1140px){
  .hdr-topbar{
    max-width: none !important;
    margin: 0 !important;
    padding: var(--pad-y-mobile) var(--pad-r-mobile) var(--pad-y-mobile) var(--pad-l-mobile) !important;
    min-height: var(--topbar-h-mobile) !important;
  }

  .hdr-logo--desktop{ display:none !important; }
  .hdr-logo--mobile{  display:block !important; }

  .hdr-topbar > .hdr-lang{ display:none !important; }

  .hdr-lang--mobile{  display:flex !important; }
  .hdr-lang--desktop{ display:none !important; }

  .hdr-contacts{
    margin-left: auto !important;
    gap: var(--contact-gap-mobile) !important;
  }

  .hdr-contact span{ display:none !important; }
  .wpw-burger{ margin-left: 12px !important; }

  /* panel full width */
  .wpw-burger__panel{
    position: fixed !important;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wpw-topbar-h)) !important;
    left: 0 !important;
    right: 0 !important;

    height: calc(100vh - (var(--wp-admin--admin-bar--height, 0px) + var(--wpw-topbar-h))) !important;
    overflow: auto !important;

    background: #fff !important;
    border-radius: 0 !important;
    padding: 14px !important;
    box-shadow: 0 12px 35px rgba(0,0,0,.18) !important;
  }
}

/* Desktop specific */
@media (min-width:1141px){
  .hdr-lang--mobile{ display:none !important; }

  .hdr-contacts{
    flex: 1 1 auto !important;
    justify-content: center !important;
    margin-left: 0 !important;
  }

  .hdr-contact span{ display:inline !important; }
}

/* Force mobile round logo size (overrides inline width:42px) */
.hdr-logo--mobile img{
  width: var(--logo-mobile-size) !important;
  height: auto !important;
  max-width: none !important;
}

/* Mobile dropdown spacing */
@media (max-width:1140px){
  .hdr-topbar > .wp-block-group:not(.hdr-lang) .hdr-lang--mobile{
    margin-left: var(--gap-logo-lang-mobile) !important;
  }
}

/* ---------- 2 columns ALWAYS (even on small screens) ---------- */
.wpw-burger__cols{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

/* Optional: keep long items readable */
.wpw-child-menu__link{
  word-break: break-word !important;
}

/* Optional: hide old desktop row menu if still present */
.hdr-navrow,
.hdr-nav--desktop{
  display:none !important;
}

/* Optional: lock scroll when open (modern browsers) */
html:has(.wpw-burger__toggle:checked),
body:has(.wpw-burger__toggle:checked){
  overflow: hidden !important;
}


/* =========================================
   WPW Burger — ICON FIX (kills double icon)
   Put this at the VERY END of CSS.
   ========================================= */

/* 1) если где-то ранее рисовали крестик псевдоэлементами — выключаем */
.hdr-topbar .wpw-burger--2col .wpw-burger__open::before,
.hdr-topbar .wpw-burger--2col .wpw-burger__open::after{
  content: none !important;
  display: none !important;
}

/* 2) прячем ВСЕ svg внутри кнопки, потом включаем только нужный */
.hdr-topbar .wpw-burger--2col .wpw-burger__open svg{
  display: none !important;
}

/* закрыто: показываем только бургер */
.hdr-topbar .wpw-burger--2col .wpw-burger__open .wpw-burger__ico--open{
  display: block !important;
}
.hdr-topbar .wpw-burger--2col .wpw-burger__open .wpw-burger__ico--close{
  display: none !important;
}

/* открыто: показываем только крестик */
.hdr-topbar .wpw-burger--2col .wpw-burger__toggle:checked + .wpw-burger__open .wpw-burger__ico--open{
  display: none !important;
}
.hdr-topbar .wpw-burger--2col .wpw-burger__toggle:checked + .wpw-burger__open .wpw-burger__ico--close{
  display: block !important;
}

/* 3) на всякий случай глушим внутреннюю кнопку закрытия из панели
      (чтобы она никогда не всплывала в углу) */
.hdr-topbar .wpw-burger--2col .wpw-burger__close{
  display: none !important;
}