/* Header and menus (WP-3), on the tokens of css/base.css. Class names use the k- prefix; breakpoints max-width 1199px, 1023px and 767px. */

/*
 * One sticky <header> for every width (Main and A-mobile boards):
 *   ≥1200      blue bar 56 px (logo, address, Telegram/WhatsApp/MAX, «Обратный звонок», phone) + white menu row 56 px
 *   1024–1199  the same, messengers icon-only (their aria-label names them)
 *   <1024      blue bar 56 px (Меню, logo, hours, round call button); the menu row becomes a panel under the bar
 * Anchors and the keyboard focus land below the header: the page's scroll padding is the header height plus the
 * admin bar, so every scroll into view (an anchor jump to #prices, #quiz or #zakaz, contract 1; the browser revealing
 * the focused link, field or text area on Tab and Shift+Tab) keeps its target out from under the header. Phones add
 * the quick-contact bar at the bottom (css/footer.css). Nothing else may set a top scroll margin for the header: it
 * would add to the padding.
 */

:root {
  --k-header-height: 112px;
  --k-adminbar-height: 0px;
}

@media (max-width: 1023px) {
  :root {
    --k-header-height: 56px;
  }
}

body.admin-bar {
  --k-adminbar-height: 32px;
}

@media (max-width: 782px) {
  body.admin-bar {
    --k-adminbar-height: 46px;
  }
}

/* Below 601 px the admin bar scrolls away with the page. */
@media (max-width: 600px) {
  body.admin-bar {
    --k-adminbar-height: 0px;
  }
}

/* The same values on <html>, whose scroll padding needs them; a browser without :has() keeps the rules above. */
:root:has(> body.admin-bar) {
  --k-adminbar-height: 32px;
}

@media (max-width: 782px) {
  :root:has(> body.admin-bar) {
    --k-adminbar-height: 46px;
  }
}

@media (max-width: 600px) {
  :root:has(> body.admin-bar) {
    --k-adminbar-height: 0px;
  }
}

html {
  scroll-padding-top: calc(var(--k-header-height) + var(--k-adminbar-height));
}

/*
 * The sticky header is always in view, so its own controls take the padding back with a negative margin of the same
 * size: focusing one of them (Esc in the services list, a closed dialog returning focus to «Обратный звонок», Tab in
 * the phone panel) leaves the page where it is; without it Brave scrolled the page up 400-480 px. The phone panel
 * scrolls by itself, so it gets the padding back for its own scrolling (the bottom pair is in css/footer.css).
 */
.k-header * {
  scroll-margin-top: calc(-1 * (var(--k-header-height) + var(--k-adminbar-height)));
}

.k-nav {
  scroll-padding-top: calc(var(--k-header-height) + var(--k-adminbar-height));
}

/* A section that js/menu.js focuses after an anchor jump shows no ring around the whole section. */
.k-scroll-target:focus,
.k-scroll-target:focus-visible {
  outline: none;
  box-shadow: none;
}

.k-header {
  position: sticky;
  top: var(--k-adminbar-height);
  z-index: 20;
  background: var(--k-white);
}

/* Blue bar */

.k-topbar {
  background: var(--k-header);
  color: var(--k-white);
}

.k-topbar__inner {
  display: flex;
  align-items: center;
  height: 56px;
}

.k-topbar__menu {
  display: none;
}

.k-logo {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--k-white);
  text-decoration: none;
}

.k-logo:hover {
  color: var(--k-white);
}

.k-logo__name {
  font-size: 24px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--k-white);
}

.k-logo__slogan {
  font-size: 14px;
  line-height: 18px;
  color: var(--k-header-text);
}

/* The address gives way first (ellipsis) where a classic scrollbar narrows the page just above 1200 px; its right
   margin keeps at least 16 px between the text and the messenger buttons. */
.k-topbar__address {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: 36px;
  margin-right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  font-size: 15px;
  line-height: 20px;
  color: var(--k-white);
  text-decoration: none;
  white-space: nowrap;
}

.k-topbar__address:hover {
  color: var(--k-white);
  text-decoration: underline;
}

.k-topbar__address .k-chrome-icon {
  flex: none;
}

.k-topbar__address-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.k-topbar__actions {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.k-topbar__msg,
.k-header .k-btn.k-topbar__callback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  height: 40px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--k-white);
  border-radius: var(--k-radius-control);
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  color: var(--k-white);
  text-decoration: none;
  white-space: nowrap;
}

.k-header .k-btn.k-topbar__callback {
  padding: 0 16px;
}

.k-topbar__msg:focus-visible,
.k-header .k-btn.k-topbar__callback:focus-visible {
  outline: 2px solid var(--k-ink);
  box-shadow: 0 0 0 5px var(--k-focus);
}

.k-topbar__msg:hover,
.k-header .k-btn.k-topbar__callback:hover {
  background: var(--k-white);
  color: var(--k-header);
}

.k-topbar__contact {
  flex: none;
  margin-left: 24px;
  display: flex;
  flex-direction: column;
}

.k-topbar__phone {
  font-size: 22px;
  line-height: 26px;
  font-weight: 700;
  color: var(--k-white);
  text-decoration: none;
  white-space: nowrap;
}

.k-topbar__phone:hover {
  color: var(--k-white);
  text-decoration: underline;
}

.k-topbar__phone .k-chrome-icon {
  display: none;
}

.k-topbar__hours {
  font-size: 14px;
  line-height: 18px;
  color: var(--k-header-text);
  white-space: nowrap;
}

/* White menu row */

.k-nav {
  height: 56px;
  background: var(--k-white);
  border-bottom: 1px solid var(--k-hairline);
}

.k-nav > .k-container {
  height: 55px;
}

.k-menu {
  display: flex;
  align-items: center;
  gap: 36px;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.k-menu > li {
  position: relative;
  display: flex;
  align-items: center;
}

.k-menu a {
  color: var(--k-ink);
  text-decoration: none;
}

.k-menu > li > a {
  display: inline-flex;
  align-items: center;
  height: 48px;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

.k-menu a:hover {
  color: var(--k-blue);
}

.k-menu a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--k-blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.k-menu__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--k-ink);
}

.k-menu__toggle:hover {
  color: var(--k-blue);
}

.k-menu__toggle[aria-expanded="true"] .k-chrome-icon {
  transform: rotate(180deg);
}

/* The services list: closed until its button opens it; two columns of up to seven links. */
.k-menu__sub {
  display: none;
  position: absolute;
  top: 52px;
  left: -12px;
  z-index: 30;
  width: 920px;
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 12px;
  list-style: none;
  background: var(--k-white);
  border: 1px solid var(--k-hairline);
  border-radius: var(--k-radius-card);
  box-shadow: 0 2px 4px rgba(20, 40, 74, .06), 0 12px 32px rgba(20, 40, 74, .14);
  columns: 2;
  column-gap: 16px;
}

.k-menu > li.is-open > .k-menu__sub {
  display: block;
}

.k-menu__sub > li {
  break-inside: avoid;
}

.k-menu__sub a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--k-radius-control);
  font-size: 16px;
  font-weight: 700;
}

.k-menu__sub a:hover {
  background: var(--k-band);
}

.k-menu__sub a[aria-current="page"] {
  text-underline-offset: 5px;
}

/* 1024–1199: compact blue bar, messengers as 40 px icon buttons */

@media (min-width: 1024px) and (max-width: 1199px) {
  .k-topbar__address {
    margin-left: 24px;
  }

  .k-topbar__msg {
    width: 40px;
    padding: 0;
  }

  .k-topbar__msg-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .k-topbar__contact {
    margin-left: 20px;
  }

  .k-menu {
    gap: 28px;
  }
}

/* Below 1024: phone bar and the menu panel */

@media (max-width: 1023px) {
  .k-topbar__inner {
    gap: 4px;
    max-width: none;
    padding: 0 16px 0 4px;
  }

  .k-topbar__menu {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: var(--k-radius-control);
    background: transparent;
    color: var(--k-white);
  }

  .k-logo {
    flex: 1 1 auto;
    align-self: stretch;
    min-width: 0;
  }

  .k-logo__name {
    font-size: 20px;
    line-height: 22px;
    letter-spacing: 0;
  }

  .k-logo__slogan {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .k-topbar__address,
  .k-topbar__actions {
    display: none;
  }

  .k-topbar__contact {
    margin-left: 0;
    flex-direction: row;
    align-items: center;
  }

  .k-topbar__hours {
    order: -1;
    margin-right: 8px;
    font-size: 13px;
    line-height: 16px;
    text-align: right;
  }

  .k-topbar__phone {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--k-white);
    color: var(--k-header);
  }

  .k-topbar__phone:hover {
    color: var(--k-header);
    background: var(--k-header-text);
  }

  .k-topbar__phone .k-chrome-icon {
    display: block;
  }

  .k-topbar__phone-number {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .k-nav {
    display: none;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    height: auto;
    max-height: calc(100vh - 56px - var(--k-adminbar-height));
    max-height: calc(100dvh - 56px - var(--k-adminbar-height));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 0 8px;
    border-bottom: 1px solid var(--k-hairline);
    box-shadow: 0 8px 24px rgba(20, 40, 74, .16);
  }

  .k-nav.is-open {
    display: block;
  }

  .k-nav > .k-container {
    height: auto;
    max-width: none;
    padding: 0;
  }

  .k-menu {
    display: block;
    height: auto;
  }

  .k-menu > li {
    display: block;
    position: static;
  }

  .k-menu > li + li {
    border-top: 1px solid var(--k-hairline);
  }

  .k-menu > li > a {
    display: flex;
    min-height: 44px;
    height: auto;
    padding: 0 16px;
    line-height: 20px;
    white-space: normal;
  }

  .k-menu a:hover {
    background: var(--k-band);
    color: var(--k-ink);
  }

  .k-menu a[aria-current="page"] {
    text-underline-offset: 6px;
  }

  /* The panel scrolls (overflow clips the outer ring at its sides) and «Меню» sits 4 px from the screen edge: both
     draw the same 2 px ink line and 5 px ring inside their box. */
  .k-nav a:focus-visible,
  .k-topbar__menu:focus-visible {
    outline-offset: -2px;
    box-shadow: inset 0 0 0 7px var(--k-focus);
  }

  /* The phone panel always shows the services; the disclosure button is a desktop control. */
  .k-menu__toggle {
    display: none;
  }

  .k-menu__sub,
  .k-menu > li.is-open > .k-menu__sub {
    display: block;
    position: static;
    width: auto;
    max-width: none;
    margin: 0 0 4px;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    columns: auto;
    background: transparent;
  }

  .k-menu__sub a {
    min-height: 44px;
    padding: 10px 16px 10px 32px;
    border-radius: 0;
    font-size: 15px;
    line-height: 20px;
    font-weight: 400;
  }
}

/* Tablets have room for the hours on one line; phones break them under each other as drawn. */
@media (max-width: 767px) {
  .k-topbar__hours {
    width: min-content;
    white-space: normal;
  }
}

/* 320–369: the logo and slogan need the room of the hours line, which the round call button stands for (at 360 the
   slogan is 9 px short of its 151 px with the hours shown). */
@media (max-width: 369px) {
  .k-topbar__hours {
    display: none;
  }
}