/* ==================================================================== */
/* ==  ХЕДЪР : НАЧАЛО  —  ИДЕНТИЧЕН НА ВСИЧКИ СТРАНИЦИ                == */
/* ==  HTML: блокът между маркерите   JS: resources/js/header.js      == */
/* ==================================================================== */

.site-header {
  position: relative;
  z-index: 20;
  background-color: var(--bg);
  background-image: var(--gradient-rule);
  background-repeat: no-repeat;
  background-size: 100% var(--edge);
  background-position: left bottom;
}

.site-header__inner {
  display: flex;
  align-items: center;
  padding-top: calc(11 * var(--k));
  padding-bottom: calc(11 * var(--k));
}

/* --- лого --------------------------------------------------------- */
.site-header__brand {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
  transition: transform var(--t), filter var(--t);
}

.site-header__brand:hover,
.site-header__brand:focus-visible {
  transform: scale(1.025);
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .8));
}

.site-header__logo {
  display: block;
  width: auto;
  height: calc(109 * var(--k));
  object-fit: contain;
}

/* --- навигация ----------------------------------------------------- */
.site-header__nav {
  margin-left: auto;
  margin-top: calc(4 * var(--k));
}

.nav {
  display: flex;
  align-items: center;
  gap: calc(35 * var(--k));
}

.nav__item {
  position: relative;
}

.nav__parent-row {
  display: flex;
  align-items: center;
}

.nav__link {
  display: inline-block;
  font-size: var(--fs-nav);
  font-weight: 400;
  line-height: var(--lh-tight);
  color: var(--ink);
  white-space: nowrap;
  transition: color var(--t-fast), transform var(--t-fast), text-shadow var(--t-fast);
}

.nav__link:hover,
.nav__link:focus-visible {
  color: var(--accent-teal);
  transform: translateY(-2px);
  text-shadow: 0 0 18px rgba(37, 219, 222, .34);
}

.nav__submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 44px;
  margin-left: 2px;
  color: var(--ink);
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
}

.nav__submenu-toggle span {
  display: block;
  width: 8px;
  height: 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-fast);
}

.nav__submenu-toggle:hover,
.nav__submenu-toggle:focus-visible {
  color: var(--accent-teal);
  background: rgba(37, 219, 222, .08);
  box-shadow: 0 0 18px rgba(37, 219, 222, .18);
}

.nav__submenu-toggle[aria-expanded="true"] span {
  transform: translateY(2px) rotate(225deg);
}

.nav__submenu {
  position: absolute;
  z-index: 40;
  top: calc(100% - 1px);
  left: 0;
  min-width: 260px;
  max-width: min(360px, 90vw);
  padding: 10px;
  border: 1px solid rgba(37, 219, 222, .48);
  border-top-color: var(--accent-magenta);
  background:
    linear-gradient(135deg, rgba(37, 219, 222, .08), rgba(221, 0, 253, .07)),
    rgba(0, 0, 0, .96);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .72), 0 0 28px rgba(37, 219, 222, .12);
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  pointer-events: none;
  transition:
    opacity var(--t-fast),
    transform var(--t-fast),
    visibility 0s linear .2s;
}

.nav__item--has-children:hover > .nav__submenu,
.nav__item--has-children:focus-within > .nav__submenu,
.nav__item--has-children.is-submenu-open > .nav__submenu {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s;
}

.nav__subitem + .nav__subitem {
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.nav__sublink {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 12px;
  color: var(--ink-soft);
  font-size: clamp(15px, calc(18 * var(--k)), 18px);
  line-height: 1.25;
  transition: color var(--t-fast), background-color var(--t-fast), padding-left var(--t-fast), text-shadow var(--t-fast);
}

.nav__sublink:hover,
.nav__sublink:focus-visible {
  color: var(--accent);
  padding-left: 16px;
  background: linear-gradient(90deg, rgba(159, 255, 1, .11), transparent 78%);
  text-shadow: 0 0 16px rgba(159, 255, 1, .24);
}

.nav__sublink.is-active {
  color: var(--accent-teal);
  padding-left: 16px;
  background: linear-gradient(90deg, rgba(37, 219, 222, .12), transparent 78%);
  text-shadow: 0 0 16px rgba(37, 219, 222, .28);
}

.nav__link.is-active + .nav__submenu-toggle {
  color: var(--accent-teal);
}

/* Активният пункт се решава от data-page на <body> — никога с клас тук. */
[data-page="home"]      .nav__link[data-nav="home"],
[data-page="za-nas"]    .nav__link[data-nav="za-nas"],
[data-page="landshaft"] .nav__link[data-nav="landshaft"],
[data-page="obuchenie"] .nav__link[data-nav="obuchenie"],
[data-page="butik"]     .nav__link[data-nav="butik"],
[data-page="blog"]      .nav__link[data-nav="blog"],
[data-page="kontakti"]  .nav__link[data-nav="kontakti"] {
  color: var(--accent-teal);
}

/* --- кръгчето с "i" ------------------------------------------------ */
.site-header__info {
  display: block;
  flex: 0 0 auto;
  margin-left: calc(29 * var(--k));
  margin-right: calc(23 * var(--k));
  line-height: 0;
  border-radius: 50%;
  box-shadow: var(--shadow-rest);
  transition: transform var(--t), box-shadow var(--t);
}

.site-header__info:hover,
.site-header__info:focus-visible {
  transform: scale(1.08);
  box-shadow: var(--shadow-hover);
}

.site-header__info img {
  display: block;
  width: calc(36 * var(--k));
  height: calc(36 * var(--k));
  object-fit: contain;
}

/* --- бургер (само под 1024) ---------------------------------------- */
.site-header__burger {
  display: none;
  width: 48px;
  height: 48px;
  margin-left: auto;
  margin-right: 12px;
  position: relative;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-rest);
  transition: box-shadow var(--t);
}

.site-header__burger:hover,
.site-header__burger:focus-visible { box-shadow: var(--shadow-hover); }

.site-header__burger span,
.site-header__burger span::before,
.site-header__burger span::after {
  position: absolute;
  left: 12px;
  width: 24px;
  height: 2px;
  background: var(--ink);
  transition: transform var(--t-fast), opacity var(--t-fast);
}

.site-header__burger span { top: 23px; }
.site-header__burger span::before { content: ''; left: 0; top: -7px; }
.site-header__burger span::after  { content: ''; left: 0; top: 7px; }

.site-header__burger[aria-expanded="true"] span { background: transparent; }
.site-header__burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.site-header__burger[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }


/* ===== ХЕДЪР — ТАБЛЕТ И ТЕЛЕФОН : НАЧАЛО ===== */
@media (max-width: 1024px) {
  .site-header__burger { display: block; }

  .site-header__nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin: 0;
    padding-block: 8px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    z-index: 30;
    visibility: hidden;
    opacity: 0;
    transform: translate3d(0, -10px, 0);
    pointer-events: none;
    transition:
      opacity var(--t-fast),
      transform var(--t-fast),
      visibility 0s linear .2s;
  }

  .site-header__nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .nav {
    display: block;
    gap: 0;
  }

  .nav__item {
    border-bottom: 1px solid rgba(255, 255, 255, .06);
  }

  .nav__parent-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    align-items: center;
  }

  .nav__link {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding-inline: var(--gutter);
    white-space: normal;
  }

  .nav__link:hover { transform: none; }

  .nav__submenu-toggle {
    width: 48px;
    height: 48px;
    margin: 0;
    touch-action: manipulation;
  }

  .nav__submenu {
    position: static;
    min-width: 0;
    max-width: none;
    margin: 0 var(--gutter) 10px;
    padding: 4px 0 4px 12px;
    border: 0;
    border-left: 1px solid var(--accent-teal);
    background: linear-gradient(90deg, rgba(37, 219, 222, .08), transparent 72%);
    box-shadow: none;
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    display: none;
  }

  .nav__item--has-children:hover > .nav__submenu,
  .nav__item--has-children:focus-within > .nav__submenu {
    display: none;
  }

  .nav__item--has-children.is-submenu-open > .nav__submenu {
    display: block;
    animation: nav-submenu-in var(--t-fast) both;
  }

  .nav__sublink {
    min-height: 48px;
    padding: 10px 12px;
    white-space: normal;
  }

  .nav__sublink:hover,
  .nav__sublink:focus-visible,
  .nav__sublink.is-active {
    padding-left: 16px;
  }

  .site-header__brand:active,
  .site-header__info:active,
  .site-header__burger:active { transform: scale(.97); }

  .site-header__info {
    margin-left: 0;
    margin-right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
  }

  .site-header__info img {
    width: 36px;
    height: 36px;
  }
}

@keyframes nav-submenu-in {
  from { opacity: 0; transform: translate3d(0, -6px, 0); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__submenu,
  .nav__submenu-toggle span,
  .nav__sublink {
    transition: none;
    animation: none;
  }
}
/* ===== ХЕДЪР — ТАБЛЕТ И ТЕЛЕФОН : КРАЙ ===== */

/* ==  ХЕДЪР : КРАЙ                                                   == */
/* ==================================================================== */