/* === 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;
  }
}
/* ===============================
   Header v2 (index only): centered brand + burger + magic swap
   Scoped by .hdr-v2 to avoid affecting other pages.
   =============================== */

header.kc-header.hdr-v2{ padding: 0; color: var(--text); }

/* Background veil (more visible than before) */
html[data-theme="white"] header.kc-header.hdr-v2{
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.94) 0%,
    rgba(255,255,255,0.40) 70%,
    rgba(255,255,255,0.08) 92%,
    rgba(255,255,255,0.00) 100%);
}
html[data-theme="black"] header.kc-header.hdr-v2{
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.78) 0%,
    rgba(0,0,0,0.42) 70%,
    rgba(0,0,0,0.14) 92%,
    rgba(0,0,0,0.00) 100%);
}


header.kc-header.hdr-v2 #siteHeader{
  display: block; /* override old grid */

  /* width shrinks strongly in collapsed state (logo -> text) */
  width: calc(100% - 32px);
  max-width: calc(1160px - 520px * var(--c, 0));
  margin: 0 auto;

  /* header "plaque" height shrinks on scroll */
  padding: calc(12px - 6px * var(--c, 0)) 16px;

  transition: max-width 180ms ease, padding 180ms ease;
}

/* Row: center brand, actions right */
header.kc-header.hdr-v2 .hdr-row{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
}
header.kc-header.hdr-v2 .hdr-row::before{ content:""; }

header.kc-header.hdr-v2 .brand{
  grid-column: 2;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* Actions on right */
header.kc-header.hdr-v2 .hdr-actions{
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Buttons */
header.kc-header.hdr-v2 .hdr-actions button{
  color: inherit;
  background: none;
  border: 1px solid rgba(127,127,127,0.25);
  border-radius: 10px;
  cursor: pointer;
  height: calc(30px + (1 - var(--c, 0)) * 6px);
  min-width: calc(34px + (1 - var(--c, 0)) * 6px);
  padding: 0 10px;
  font: inherit;
}

/* Magic swap: overlay logo + text in the same spot */
header.kc-header.hdr-v2 .brand-swap{
  display: inline-grid;
  place-items: center;
  position: relative;
}
header.kc-header.hdr-v2 .brand-swap > *{ grid-area: 1 / 1; }

header.kc-header.hdr-v2 .brand-logo{
  height: auto;
  width: auto;
  max-height: 84px;
  max-width: min(80vw, 560px);
  display: inline-block;
  transform-origin: center;
  transform: scale(calc(1 - 0.35 * var(--c, 0)));
  opacity: clamp(0, (0.85 - var(--c, 0)) / 0.25, 1);
  transition: transform 160ms ease, opacity 160ms ease;
}

header.kc-header.hdr-v2 .brand-text{
  color: inherit;
  font-weight: 800;
  letter-spacing: 0.2px;
  opacity: clamp(0, (var(--c, 0) - 0.70) / 0.25, 1);
  transition: opacity 160ms ease;
  pointer-events: none;
}
header.kc-header.hdr-v2.is-text .brand-text{ pointer-events: auto; }

/* Dropdown panel */
header.kc-header.hdr-v2 .more-panel{ margin-top: 10px; padding: 10px 0 2px; }
header.kc-header.hdr-v2 .more-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
header.kc-header.hdr-v2 .more-grid a{
  text-decoration: none;
  color: inherit;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(127,127,127,0.20);
}
header.kc-header.hdr-v2 .more-grid a:hover{ background: rgba(127,127,127,0.12); }

@media (min-width: 760px){
  header.kc-header.hdr-v2 .more-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}