/* ==========================================================================
   KM Legal Docs - ХЕДЪР (П1 sticky + П2 телефон) - B1.2
   Източник: makets/final/km-final.css раздел 16 (1:1) + makets/final/nachalna.html.
   Цветовете/шрифтовете (--km-navy, --km-gold, --km-white, --km-font-ui, --km-font-text,
   --km-container, --km-radius) и .km-btn идват от base.css (B1.1).
   Добавките спрямо макета са отбелязани с „ДОБАВКА".
   ========================================================================== */

/* ДОБАВКА: токените, специфични за хедъра (в макета са в :root) - тук на .km-header, за да е самостоятелен */
.km-header{
  --km-header-h:100px; --km-header-h-sticky:72px; --km-header-h-base:100px;
  --km-grad-header: radial-gradient(at center, #36455C 0%, #071B34 85%);
  --km-cart-badge:#E2401C;
}

/* ДОБАВКА: нулиране като в базата на макета (GP main.css дава margin на ul/li>ul) - :where = специфичност 0,0,1 */
:where(.km-header) ul, :where(.km-header) li > ul{ margin:0; padding:0; }
:where(.km-header) img{ display:block; max-width:100%; }
:where(.km-header) a{ text-decoration:none; }

.km-header{
  position:sticky; top:0; z-index:100;
  background:var(--km-grad-header);
  transition:box-shadow .25s, margin .25s;
}
.km-header.is-sticky{
  --km-header-h:var(--km-header-h-sticky);
  box-shadow:0 4px 20px rgba(7,27,52,.25);
  /* без layout shift: лентата се свива със 28px, а marginът ги връща в потока (100 = 72 + 28) */
  margin-bottom:calc(var(--km-header-h-base) - var(--km-header-h-sticky));
}
.km-header__inner{
  display:flex; align-items:center; gap:12px;
  width:100%; max-width:calc(var(--km-container) + 20px); margin-inline:auto; padding:0 10px; /* контейнерът на хедъра: 1280 + 2 x 10px (navigacia.md) */
  height:var(--km-header-h); /* лентата (контейнер), не текстов елемент */
  transition:height .25s;
}
.km-logo{ flex:0 0 auto; min-width:0; display:block; }
.km-logo img{ width:auto; height:51px; max-width:100%; object-fit:contain; object-position:left center; transition:height .25s; }
.km-header.is-sticky .km-logo img{ height:36px; }

/* главно меню */
.km-nav{ flex:1 1 auto; min-width:0; display:flex; justify-content:center; }
.km-menu{ list-style:none; display:flex; align-items:center; gap:12px; }
.km-menu__item{ position:relative; }
.km-menu__link{
  display:inline-flex; align-items:center; gap:4px;
  padding:25px 0;
  font-family:var(--km-font-ui), Arial, sans-serif; font-size:16px; font-weight:500; line-height:1.5;
  color:var(--km-white); white-space:nowrap; transition:color .25s;
}
.km-menu__link:hover, .km-menu__link:focus-visible, .km-menu__item.is-current > .km-menu__link,
.km-menu__item:hover > .km-menu__link, .km-menu__item.is-open > .km-menu__link{ color:var(--km-gold); }
.km-chev{ width:14px; height:14px; flex:0 0 14px; transition:transform .25s; }
.km-menu__item.is-open > .km-menu__link .km-chev{ transform:rotate(180deg); }
.km-submenu{
  list-style:none; display:none;
  /* ИЗКЛЮЧЕНИЕ position:absolute: падащо подменю (overlay над съдържанието, както на живо), не подрежда съдържание */
  position:absolute; top:100%; left:-20px; z-index:20;
  width:max-content; max-width:min(380px, 90vw); /* ИЗКЛЮЧЕНИЕ max-width: overlay панел, текстът се пренася, не се реже */
  background:var(--km-white); box-shadow:0 10px 30px rgba(0,0,0,.1); border-radius:0;
}
.km-menu__item:hover > .km-submenu, .km-menu__item:focus-within > .km-submenu, .km-menu__item.is-open > .km-submenu{ display:block; }
.km-submenu a{ display:block; padding:13px 20px; font-family:var(--km-font-ui), Arial, sans-serif; font-size:16px; font-weight:500; line-height:1.4; color:var(--km-navy); }
.km-submenu a:hover, .km-submenu a:focus-visible{ color:var(--km-gold); }
/* ДОБАВКА: активната страница в подменюто е златиста (navigacia.md: „активната страница в менюто е оцветена златисто") */
.km-submenu .is-current > a{ color:var(--km-gold); }

/* ДОБАВКА: родител с истински URL (не „#") = линк + отделен бутон-стрелка; в макета родителите са „#" → <button>.
   Стрелката седи плътно до текста (gap 4px като в .km-menu__link) */
.km-menu__toggle{ display:inline-flex; align-items:center; justify-content:center; margin-left:4px; padding:0; color:var(--km-white); transition:color .25s; }
.km-menu__toggle:hover, .km-menu__toggle:focus-visible, .km-menu__item.is-current > .km-menu__toggle,
.km-menu__item:hover > .km-menu__toggle, .km-menu__item.is-open > .km-menu__toggle{ color:var(--km-gold); }
.km-menu__item.is-open > .km-menu__toggle .km-chev{ transform:rotate(180deg); }

/* действия вдясно */
.km-header__actions{ flex:0 0 auto; display:flex; align-items:center; gap:12px; }
.km-phone{ display:inline-flex; align-items:center; gap:8px; color:var(--km-white); font-family:var(--km-font-ui), Arial, sans-serif; font-size:16px; font-weight:500; line-height:1.4; white-space:nowrap; }
.km-phone svg{ width:20px; height:20px; color:var(--km-gold); flex:0 0 20px; }
.km-phone:hover{ color:var(--km-gold); }
.km-phone-round{ display:none; flex:0 0 40px; width:40px; aspect-ratio:1; border-radius:50%; background:var(--km-gold); color:var(--km-navy); align-items:center; justify-content:center; }
.km-phone-round svg{ width:18px; height:18px; }
.km-cart{ position:relative; display:inline-flex; color:var(--km-white); padding:6px; }
.km-cart svg{ width:24px; height:24px; }
.km-cart:hover{ color:var(--km-gold); }
/* ИЗКЛЮЧЕНИЕ position:absolute: баджът на количката (разрешен) */
.km-cart__badge{ position:absolute; top:-2px; right:-4px; min-width:16px; padding:0 4px; border-radius:8px; background:var(--km-cart-badge); color:#fff; font-family:var(--km-font-text), Arial, sans-serif; font-size:10px; font-weight:500; line-height:16px; text-align:center; }
.km-burger{ display:none; flex:0 0 40px; width:40px; aspect-ratio:1; align-items:center; justify-content:center; flex-direction:column; gap:6px; }
.km-burger span{ display:block; width:26px; height:3px; border-radius:2px; background:var(--km-white); transition:transform .25s, opacity .25s, background-color .25s; }
.km-burger[aria-expanded="true"] span{ background:var(--km-gold); }
.km-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.km-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.km-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

/* 1025-1279px: телефонът става кръгъл бутон, за да не прелее лентата (5 пункта + телефон + CTA + количка) */
@media (min-width:1025px) and (max-width:1279px){
  .km-phone{ display:none; }
  .km-phone-round{ display:inline-flex; }
  .km-menu{ gap:14px; }
}
/* 1025-1199px: и CTA се скрива (както на mobile) - иначе лентата прелива */
@media (min-width:1025px) and (max-width:1199px){
  .km-header__cta{ display:none; }
}

/* mobile ≤1024 */
@media (max-width:1024px){
  .km-header__inner{ gap:12px; }
  .km-logo{ flex:0 1 auto; margin-right:auto; }
  .km-logo img{ height:36px; } /* 178x36 */
  .km-header__cta, .km-phone{ display:none; }
  .km-phone-round{ display:inline-flex; }
  .km-burger{ display:inline-flex; }
  .km-header__actions{ gap:10px; }
  .km-nav{ display:none; }
  .km-header.is-menu-open .km-nav{
    display:block;
    /* ИЗКЛЮЧЕНИЕ position:absolute: падащо мобилно меню под лентата (overlay, НЕ offcanvas - както на живо) */
    position:absolute; top:100%; left:0; right:0;
    background:var(--km-white); box-shadow:0 10px 30px rgba(0,0,0,.1);
  }
  .km-menu{ display:block; padding:8px 0; }
  .km-menu__item{ position:static; display:flex; flex-wrap:wrap; align-items:center; }
  .km-menu__link{ flex:0 1 auto; padding:10px 20px; font-size:14px; color:var(--km-navy); white-space:normal; text-align:left; }
  .km-submenu{ position:static; flex:1 1 100%; width:100%; max-width:none; box-shadow:none; background:var(--km-white); padding-left:12px; }
  .km-menu__item:hover > .km-submenu, .km-menu__item:focus-within > .km-submenu{ display:none; }
  .km-menu__item.is-open > .km-submenu{ display:block; }
  .km-submenu a{ padding:10px 20px; font-size:14px; }
  /* ДОБАВКА: бутонът-стрелка на родител с URL - след линка, по-голяма цел за пръст */
  .km-menu__toggle{ margin-left:-12px; padding:10px; color:var(--km-navy); }
}

/* ДОБАВКА: WP admin лентата (само за логнати) - sticky хедърът застава под нея */
.admin-bar .km-header{ top:32px; }
@media (max-width:782px){ .admin-bar .km-header{ top:46px; } }
@media (max-width:600px){ .admin-bar .km-header{ top:0; } } /* под 600px admin лентата не е fixed */

/* ДОБАВКА: съвместимост с GeneratePress. Динамичният CSS на GP задава
   button{background #55555e; color #fff; padding 10px 20px}, button:hover/:focus{background; color #fff}
   и a:hover/:focus/:active{color} (специфичност 0,1,1 - бие класовете от макета 0,1,0).
   Тук се връщат стойностите от макета само за тези състояния; видът не се променя. */
.km-header button, .km-header button:hover, .km-header button:focus, .km-header button:active{ background:none; border:0; border-radius:0; box-shadow:none; }
.km-header .km-burger{ padding:0; }
.km-header .km-menu__item:not(.is-current):not(.is-open) > .km-menu__link:is(:focus,:active):not(:hover):not(:focus-visible),
.km-header .km-menu__item:not(.is-current):not(.is-open) > .km-menu__toggle:is(:focus,:active):not(:hover):not(:focus-visible),
.km-header a.km-phone:is(:focus,:active):not(:hover),
.km-header a.km-cart:is(:focus,:active):not(:hover){ color:var(--km-white); }
.km-header a.km-phone-round:is(:focus,:active),
.km-header a.km-btn:is(:focus,:active):not(:hover){ color:var(--km-navy); }
@media (max-width:1024px){
  .km-header .km-menu__item:not(.is-current):not(.is-open) > .km-menu__link:is(:focus,:active):not(:hover):not(:focus-visible),
  .km-header .km-menu__item:not(.is-current):not(.is-open) > .km-menu__toggle:is(:focus,:active):not(:hover):not(:focus-visible){ color:var(--km-navy); }
}