/* === Header tuning variables (compact profile) === */
:root{
  --hdr-compact-min-h: 30px;
  --hdr-compact-pad-v: 0px;
  --hdr-compact-pad-h: 8px;
  --hdr-compact-gap: var(--hdr-compact-gap);
  --hdr-compact-link-py: 3px;
  --hdr-compact-link-px: 8px;
  --hdr-compact-font: 13px;
}


/* styles/header.core.css — header structure & behavior (shared), NO COLORS */

/* Sticky layer and z-index */
header.kc-header{ position: sticky; top:0; z-index:1000; padding:0; }

/* Grid-based layout: brand | nav */
#siteHeader{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:start;
  column-gap:16px;
  max-width:1160px;
  margin:0 auto;
  padding-top:8px;
  padding-bottom:8px;
  transition: opacity .2s ease, transform .2s ease;
}

/* Brand block with smooth size transition */
#siteHeader .brand{
  width:92px; height:92px;
  display:flex; align-items:center; gap:10px;
  overflow:hidden;
  transition: opacity .2s ease, transform .2s ease;
}
#siteHeader .brand img{ display:block; width:92px; height:92px; }

/* Nav pinned to the right and single-line by default */
#siteHeader .main-nav{
  justify-self:end;
  display:flex;
  gap:16px;
  white-space:nowrap; /* keep in one line */
}

/* Compact vs Expanded states (toggled by header-scroll script) */
header.kc-header.is-compact #siteHeader{
  grid-template-columns:0 1fr;  /* hide brand column */
  padding-top:4px; padding-bottom:4px;
  max-width:none; width:100%; margin:0; /* full-bleed bar */
}
header.kc-header.is-compact #siteHeader .brand{
  width:0; height:0; opacity:0; pointer-events:none;
}
header.kc-header.is-expanded #siteHeader .brand{
  width:92px; height:92px; opacity:1;
}

/* Buttons/inputs region inside header: structure only (no colors) */
#siteHeader .main-nav .tab{ background:none; border:0; padding:0; font:inherit; cursor:pointer; }
#siteHeader input[type="text"],
#siteHeader input[type="password"],
#siteHeader select{
  height:32px; padding:4px 10px; border-radius:10px; outline:none;
}
#siteHeader button.login, #siteHeader button.logout{
  height:34px; padding:0 12px; border-radius:10px; cursor:pointer;
}

/* Mobile tweaks */
@media (max-width:650px){
  #siteHeader{ column-gap:12px; }
  #siteHeader .main-nav{ gap:12px; }
  #siteHeader input[type="text"],
  #siteHeader input[type="password"],
  #siteHeader select{ height:30px; }
}

/* Admin tabs under header (structure only) */
.admin-tabs{ display:flex; gap:16px; align-items:center; padding:8px 0; }
.admin-tabs .tab{ background:none; border:0; padding:0; font:inherit; cursor:pointer; }


/* Compact: prevent brand flash */
header.kc-header.is-compact #siteHeader .brand{
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 0;
  margin: 0; padding: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  pointer-events: none;
  transform: none;
}




/* Compact centered nav (single-line, centered) */
header.kc-header.is-compact #siteHeader{
  grid-template-columns: 1fr;   /* collapse to one column */
  justify-items: center;        /* center the only column */
  max-width: none; width: 100%; margin: 0;   /* full-bleed bar */
}
header.kc-header.is-compact #siteHeader .main-nav{
  justify-self: center;
  white-space: nowrap;          /* stay on one line */
}
=
/* ==== Header: перенос пунктов меню на узких экранах ==== */
@media (max-width: 720px){
  /* одна колонка, навигация не растягивает шапку */
  header.kc-header #siteHeader{
    grid-template-columns: 1fr;
  }

  /* разрешаем перенос строк и компактные отступы */
  header.kc-header #siteHeader .main-nav{
    display: flex;
    flex-wrap: wrap;       /* <<< перенос строк */
    white-space: normal;   /* отменяем nowrap */
    justify-self: start;
    gap: 8px 10px;         /* вертикальный/горизонтальный интервал */
  }

  /* сами ссылки/табы тоже можно переносить текстом */
  header.kc-header #siteHeader .main-nav a,
  header.kc-header #siteHeader .main-nav .tab{
    white-space: normal;
    line-height: 1.2;
    padding: 6px 8px;
  }
}

/* на случай компактного состояния — тоже разрешаем перенос */
@media (max-width: 720px){
  header.kc-header.is-compact #siteHeader .main-nav{
    flex-wrap: wrap;
    white-space: normal;
  }
}