/* ==========================================================================
   Fahrschul-App V5.6.5 — one-row desktop header
   [ LOGO ] [ NAVIGATION ] [ PHONE ] [ CTA ] [ LANGUAGE ] [ SOCIAL ]
   Linked with media="(min-width: …)" per language (api/_business.php,
   PUBLIC_DESKTOP_HEADER_MIN): below that width the menu mode of
   site-v565.css stays active instead of shrinking the navigation text.
   Up to 1799px the phone is an icon button (its number stays the accessible
   label); from 1800px the number is written out. Russian keeps the icon button.
   ========================================================================== */

html[data-theme] { --topbar-h: 32px; --hdr-gap: 12px; --hdr-card-h: 74px; --hdr-inset: clamp(10px, 1.6vw, 46px); }

.site-header .header-bar {
  gap: 0.875rem;
  padding-inline: 1.15rem;
}
.site-header .menu-toggle { display: none; }

.site-header .nav-panel,
.site-header .nav-panel.is-open {
  position: static;
  display: contents;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
}
.site-header .nav-panel > nav { order: 2; margin-inline-end: auto; min-width: 0; }
.site-header .brand { order: 1; margin-inline-end: 0.75rem; }
.site-header .brand img { height: 42px; }

.site-header .nav-list {
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.875rem;
}
.site-header .nav-list li + li { border: 0; }
.site-header .nav-list a {
  display: inline-flex;
  justify-content: flex-start;
  min-height: 2.75rem;
  padding: 0;
  color: #e9eef6;
  font-size: 0.9375rem;
  font-weight: 560;
  white-space: nowrap;
}
.site-header .nav-list a:hover { color: #ffffff; }
.site-header .nav-list a::after {
  left: 0;
  right: 0;
  top: auto;
  bottom: 0.3rem;
  width: auto;
  height: 3px;
  margin: 0;
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: center;
}
.site-header .nav-list a:hover::after { transform: scaleX(0.45); }
.site-header .nav-list a[aria-current="page"] { color: var(--c-terra-400); font-weight: 700; }
.site-header .nav-list a[aria-current="page"]::after { transform: scaleX(1); }

.site-header .nav-actions { display: contents; }
.site-header .nav-phone {
  order: 3;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  min-height: 0;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.05);
  font-size: 1rem;
  white-space: nowrap;
}
.site-header .nav-phone:hover { border-color: color-mix(in srgb, var(--c-terra-400) 55%, transparent); }
.site-header .nav-phone .icon { width: 1.25rem; height: 1.25rem; }
.site-header .nav-phone > span {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.site-header .nav-actions .btn {
  order: 4;
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  font-size: 0.9375rem;
}
.site-header .nav-panel__contact { display: none; }
.site-header .header-bar > .lang-switch { order: 5; }
.site-header .header-bar > .header-social { order: 6; display: flex; gap: 0.45rem; }
.site-header .header-social .social-link .icon { width: 2.25rem; height: 2.25rem; }

/* wide screens: reference proportions, phone number written out */
@media (min-width: 1800px) {
  html[data-theme] { --hdr-card-h: 78px; }
  .site-header .header-bar,
  .topbar__inner { width: min(100% - 2 * var(--hdr-inset), 110rem); }
  .site-header .header-bar { gap: 1.35rem; padding-inline: 1.6rem; }
  .site-header .brand { margin-inline-end: 1.5rem; }
  .site-header .brand img { height: 47px; }
  .site-header .nav-list { gap: 1.75rem; }
  .site-header .nav-list a { font-size: 1.0125rem; }
  .site-header .nav-actions .btn { min-height: 2.9rem; padding: 0.6rem 1.25rem; font-size: 1rem; }
  html:not([lang="ru"]) .site-header .nav-phone {
    display: inline-flex;
    width: auto;
    height: auto;
    min-height: 2.75rem;
    gap: 0.55rem;
    border: 0;
    background: none;
    color: #ffffff;
    font-weight: 700;
  }
  html:not([lang="ru"]) .site-header .nav-phone > span {
    position: static !important;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
  }
}
