/* Header behaviour added on top of the approved design.

   Desktop is untouched apart from the services dropdown now opening on hover.
   Below 900px the header collapses to a burger: the top row keeps only what a
   visitor on a phone actually needs — the logo and a tappable phone number —
   and everything else moves behind the button. The promotional strip is hidden
   there because it wraps to two lines and pushes the real content down. */

/* --- burger button (desktop: hidden) --- */
#burger {
  display: none;
  width: 48px;
  height: 48px;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  background: none;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  cursor: pointer;
}

#burger span {
  display: block;
  width: 22px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--color-text);
  transition: transform 200ms ease, opacity 150ms ease;
}

#burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
#burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
#burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  #burger span { transition: none; }
}

/* --- mobile layout --- */
@media (max-width: 900px) {
  /* The tagline strip wraps to two lines on a phone and carries no action. */
  #topStrip { display: none; }

  /* Nav is a panel opened by the burger. */
  #primaryNav { display: none; }
  #primaryNav.open { display: block; }

  #burger { display: flex; }

  /* The call-to-action lives inside the panel on mobile; the phone number
     stays visible in the top row because calling is the primary action. */
  .site-head-actions .btn-primary { display: none; }

  #primaryNav .nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: 12px;
  }

  #primaryNav .nav > a {
    padding: 14px 2px !important;
    border-bottom: 1px solid var(--color-divider) !important;
  }

  /* "Послуги" and its caret share a row that must span the full width. */
  #primaryNav .nav > div {
    justify-content: space-between;
    border-bottom: 1px solid var(--color-divider);
  }

  /* The dropdown becomes an inline block rather than an overlay. */
  #servicesPanel {
    position: static !important;
    box-shadow: none !important;
    border-top: 0 !important;
  }

  #servicesPanel > div {
    grid-template-columns: 1fr !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Repeat the primary action at the end of the panel. */
  #primaryNav .mobile-cta {
    display: flex;
    justify-content: center;
    margin: 4px 0 16px;
  }
}

/* The duplicated call-to-action only exists for the mobile panel. */
.mobile-cta { display: none; }

@media (max-width: 700px) {
  /* Two compact rows: identity, then the phone number beside the burger.
     Logo, wordmark, full number and burger cannot share one line at 375px, and
     the number is worth more visible than the strapline, which is dropped. */
  .brand-tagline { display: none; }

  .site-head-brandrow {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    gap: 10px !important;
  }

  .site-head-brandrow > a[href="/"] img { width: 44px !important; height: 44px !important; }

  .site-head-actions {
    width: 100%;
    margin-left: 0 !important;
    justify-content: space-between;
    gap: 10px !important;
  }

  .site-head-actions a[href^="tel:"] {
    font-size: 20px !important;
    padding: 6px 2px !important;
    min-height: 44px !important;
  }
}