/* ===========================
   1) ОБЩЕЕ: убираем горизонтальный скролл
   =========================== */

/* html — корневой элемент документа */
html,
/* body — основное тело страницы */
body {
  /* запрещаем горизонтальную прокрутку (часто появляется из-за 100vw/alignfull) */
  overflow-x: hidden;
}

/* ===========================
   2) HEADER: фиксируем шапку поверх контента
   =========================== */

/*
  Ниже — набор селекторов, чтобы поймать шапку в разных вариантах:
  - когда header — реальный <header>
  - когда шапка — template-part (wp-block-template-part)
  - когда класс .site-header используется темой/тобой
*/
body > .wp-site-blocks > header,
body > .wp-site-blocks > .wp-block-template-part:first-child,
.wp-site-blocks > .wp-block-template-part:first-child,
.wp-site-blocks > header,
.site-header {
  /* фиксируем шапку относительно окна браузера */
  position: fixed !important;

  /* прижимаем к верху окна */
  top: var(--wp-admin--admin-bar--height, 0px);
  /* ↑ учитываем админ-бар WP (если ты залогинен), иначе 0px */

  /* прижимаем к левому краю */
  left: 0;

  /* прижимаем к правому краю */
  right: 0;

  /* ширина на всю страницу */
  width: 100%;

  /* слой поверх остальных элементов (герой/контент ниже) */
  z-index: 1000;








  /* расстояние между пунктами меню */
  --as-nav-gap: clamp(10px, 1.6vw, 20px);

  /* расстояние между строками (если меню переносится на 2 строки) */
  --as-nav-row-gap: 6px;

  /* гарантируем минимальную высоту шапки */
  min-height: var(--as-header-height) !important;

  /* цвет текста внутри шапки */
  color: #fff;

  /* цвет иконок в шапке (пока фон прозрачный) */
  --as-header-icons-color: var(--as-header-accent-color);
  --as-header-icons-img-filter: var(--as-header-icons-filter-red);

  /* фон прозрачный вверху страницы (на герое) */
  background-color: transparent;

  /* плавная смена фона и тени при добавлении класса scrolled */
  transition: background-color 0.45s ease;
}








/* ===========================
   3) FRONT PAGE: герой касается самого верха (без отступов)
   =========================== */

/* wp-site-blocks — общий контейнер блок-темы; на главной убираем верхний padding */
body.front-page .wp-site-blocks,
body.home .wp-site-blocks {
  /* убираем padding сверху (block-start) */
  padding-block-start: 0 !important;
  /* дубль для совместимости/перебивания */
  padding-top: 0 !important;
}

/*
  Первому блоку после шапки убираем верхний margin,
  чтобы герой не отъезжал вниз из-за стандартных block-gap.
*/
body.front-page .wp-site-blocks > *:first-child + *,
body.home .wp-site-blocks > *:first-child + * {
  /* убираем margin сверху (logical) */
  margin-block-start: 0 !important;
  /* дубль классического свойства */
  margin-top: 0 !important;
}

/* конкретно для hero-screen тоже принудительно убираем отступ сверху */
body.front-page .hero-screen,
body.home .hero-screen {
  /* убираем margin сверху (logical) */
  margin-block-start: 0 !important;
  /* дубль классического свойства */
  margin-top: 0 !important;
}

/* ===========================
   4) ВИД ШАПКИ ПРИ СКРОЛЛЕ: красный фон + тень
   =========================== */

/*
  Когда JS добавит класс .as-header--scrolled на header/template-part/site-header,
  шапка становится красной и с тенью.
*/
.wp-site-blocks > header.as-header--scrolled,
body > .wp-site-blocks > .wp-block-template-part:first-child.as-header--scrolled,
.wp-site-blocks > .wp-block-template-part:first-child.as-header--scrolled,
.site-header.as-header--scrolled {
  /* красный фон при скролле */
  background-color: var(--as-header-accent-color);

  /* когда шапка красная — иконки белые */
  --as-header-icons-color: #fff;
  --as-header-icons-img-filter: var(--as-header-icons-filter-white);

}

/* ===========================
   5) ICONS: размеры (через --as-icon-size)
   =========================== */

/* дефолт на случай, если --as-icon-size не задан */
:root {
  /* основной красный цвет шапки/иконок */
  --as-header-accent-color: #ff4f5b;

  /* фильтры для <img> иконок (лучше всего работают с черными svg/png) */
  --as-header-icons-filter-red: invert(36%) sepia(63%) saturate(664%) hue-rotate(307deg)
    brightness(114%) contrast(109%);
  --as-header-icons-filter-white: brightness(0) invert(1);

  --as-icon-default-size: 50px;
}

/* разные размеры для разных иконок */
.post-office {
  --as-icon-size: 31px;
}

.phone-number {
  --as-icon-size: 35px;
}

/* если класс стоит прямо на иконке (чтобы переменная тоже работала) */
:where(img, svg, i).post-office {
  --as-icon-size: 31px;
}

:where(img, svg, i).phone-number {
  --as-icon-size: 35px;
}

/* если класс стоит на контейнере */
:where(.post-office, .phone-number) :where(img, svg) {
  width: var(--as-icon-size, var(--as-icon-default-size)) !important;
  height: var(--as-icon-size, var(--as-icon-default-size)) !important;
  max-width: var(--as-icon-size, var(--as-icon-default-size)) !important;
  max-height: var(--as-icon-size, var(--as-icon-default-size)) !important;
}

/* если класс стоит прямо на иконке */
:where(img, svg).post-office,
:where(img, svg).phone-number {
  width: var(--as-icon-size, var(--as-icon-default-size)) !important;
  height: var(--as-icon-size, var(--as-icon-default-size)) !important;
  max-width: var(--as-icon-size, var(--as-icon-default-size)) !important;
  max-height: var(--as-icon-size, var(--as-icon-default-size)) !important;
}

/* для иконок-шрифтов */
:where(.post-office, .phone-number) :where(i),
i.post-office,
i.phone-number {
  font-size: var(--as-icon-size, var(--as-icon-default-size)) !important;
  line-height: 1 !important;
}

/* если иконка задана псевдоэлементом */
.post-office::before,
.phone-number::before,
.post-office::after,
.phone-number::after {
  font-size: var(--as-icon-size, var(--as-icon-default-size)) !important;
  line-height: 1 !important;
}

/* если иконка — пустой элемент (фон/псевдоэлемент) */
.post-office:empty,
.phone-number:empty {
  display: inline-block;
  width: var(--as-icon-size, var(--as-icon-default-size)) !important;
  height: var(--as-icon-size, var(--as-icon-default-size)) !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--as-icon-size, var(--as-icon-default-size))
    var(--as-icon-size, var(--as-icon-default-size)) !important;
  filter: var(--as-header-icons-img-filter, none);
  transition: filter 0.45s ease;
}

/* ===========================
   6) ICONS: цвет (красный -> белый)
   =========================== */

/* SVG и иконки-шрифты берут цвет из переменной шапки */
:where(
    body > .wp-site-blocks > header,
    body > .wp-site-blocks > .wp-block-template-part:first-child,
    .wp-site-blocks > .wp-block-template-part:first-child,
    .wp-site-blocks > header,
    .site-header
  )
  :where(.post-office, .phone-number)
  :where(svg, i) {
  color: var(--as-header-icons-color, inherit) !important;
  transition: color 0.45s ease;
}

/* если класс стоит прямо на svg/i */
:where(
    body > .wp-site-blocks > header,
    body > .wp-site-blocks > .wp-block-template-part:first-child,
    .wp-site-blocks > .wp-block-template-part:first-child,
    .wp-site-blocks > header,
    .site-header
  )
  :where(svg, i).post-office,
:where(
    body > .wp-site-blocks > header,
    body > .wp-site-blocks > .wp-block-template-part:first-child,
    .wp-site-blocks > .wp-block-template-part:first-child,
    .wp-site-blocks > header,
    .site-header
  )
  :where(svg, i).phone-number {
  color: var(--as-header-icons-color, inherit) !important;
  transition: color 0.45s ease;
}

/* заставляем SVG краситься через currentColor */
:where(
    body > .wp-site-blocks > header,
    body > .wp-site-blocks > .wp-block-template-part:first-child,
    .wp-site-blocks > .wp-block-template-part:first-child,
    .wp-site-blocks > header,
    .site-header
  )
:where(.post-office, .phone-number) svg,
:where(
    body > .wp-site-blocks > header,
    body > .wp-site-blocks > .wp-block-template-part:first-child,
    .wp-site-blocks > .wp-block-template-part:first-child,
    .wp-site-blocks > header,
    .site-header
  )
  svg.post-office,
:where(
    body > .wp-site-blocks > header,
    body > .wp-site-blocks > .wp-block-template-part:first-child,
    .wp-site-blocks > .wp-block-template-part:first-child,
    .wp-site-blocks > header,
    .site-header
  )
  svg.phone-number {
  fill: currentColor;
  transition: fill 0.45s ease;
}

/* перекрашиваем заливку, но не ломаем stroke-иконки с fill="none" */
:where(
    body > .wp-site-blocks > header,
    body > .wp-site-blocks > .wp-block-template-part:first-child,
    .wp-site-blocks > .wp-block-template-part:first-child,
    .wp-site-blocks > header,
    .site-header
  )
:where(.post-office, .phone-number) svg [fill]:not([fill='none']),
:where(
    body > .wp-site-blocks > header,
    body > .wp-site-blocks > .wp-block-template-part:first-child,
    .wp-site-blocks > .wp-block-template-part:first-child,
    .wp-site-blocks > header,
    .site-header
  )
  svg.post-office
  [fill]:not([fill='none']),
:where(
    body > .wp-site-blocks > header,
    body > .wp-site-blocks > .wp-block-template-part:first-child,
    .wp-site-blocks > .wp-block-template-part:first-child,
    .wp-site-blocks > header,
    .site-header
  )
  svg.phone-number
  [fill]:not([fill='none']) {
  fill: currentColor !important;
  transition: fill 0.45s ease;
}

/* перекрашиваем stroke только там, где он есть */
:where(
    body > .wp-site-blocks > header,
    body > .wp-site-blocks > .wp-block-template-part:first-child,
    .wp-site-blocks > .wp-block-template-part:first-child,
    .wp-site-blocks > header,
    .site-header
  )
:where(.post-office, .phone-number) svg [stroke]:not([stroke='none']),
:where(
    body > .wp-site-blocks > header,
    body > .wp-site-blocks > .wp-block-template-part:first-child,
    .wp-site-blocks > .wp-block-template-part:first-child,
    .wp-site-blocks > header,
    .site-header
  )
  svg.post-office
  [stroke]:not([stroke='none']),
:where(
    body > .wp-site-blocks > header,
    body > .wp-site-blocks > .wp-block-template-part:first-child,
    .wp-site-blocks > .wp-block-template-part:first-child,
    .wp-site-blocks > header,
    .site-header
  )
  svg.phone-number
  [stroke]:not([stroke='none']) {
  stroke: currentColor !important;
  transition: stroke 0.45s ease;
}

/* если иконка задана псевдоэлементом — красим только псевдоэлемент, не текст */
:where(
    body > .wp-site-blocks > header,
    body > .wp-site-blocks > .wp-block-template-part:first-child,
    .wp-site-blocks > .wp-block-template-part:first-child,
    .wp-site-blocks > header,
    .site-header
  )
  .post-office::before,
:where(
    body > .wp-site-blocks > header,
    body > .wp-site-blocks > .wp-block-template-part:first-child,
    .wp-site-blocks > .wp-block-template-part:first-child,
    .wp-site-blocks > header,
    .site-header
  )
  .phone-number::before,
:where(
    body > .wp-site-blocks > header,
    body > .wp-site-blocks > .wp-block-template-part:first-child,
    .wp-site-blocks > .wp-block-template-part:first-child,
    .wp-site-blocks > header,
    .site-header
  )
  .post-office::after,
:where(
    body > .wp-site-blocks > header,
    body > .wp-site-blocks > .wp-block-template-part:first-child,
    .wp-site-blocks > .wp-block-template-part:first-child,
    .wp-site-blocks > header,
    .site-header
  )
  .phone-number::after {
  color: var(--as-header-icons-color, inherit) !important;
}

/* если иконка — <img>, красим через filter-переменную */
:where(.post-office, .phone-number) img,
img.post-office,
img.phone-number {
  filter: var(--as-header-icons-img-filter, none) !important;
  transition: filter 0.45s ease;
}

/* ===========================
   7) FOOTER: чуть более светлый графитовый фон + белый текст
   =========================== */

body > .wp-site-blocks > footer,
.wp-site-blocks > footer,
footer.wp-block-template-part,
footer.site-footer,
.site-footer {
  background-color: #16a34a !important;
  color: #fff !important;
}

body > .wp-site-blocks > footer a,
.wp-site-blocks > footer a,
footer.wp-block-template-part a,
footer.site-footer a,
.site-footer a {
  color: #fff !important;
}

body > .wp-site-blocks > footer a:hover,
.wp-site-blocks > footer a:hover,
footer.wp-block-template-part a:hover,
footer.site-footer a:hover,
.site-footer a:hover {
  opacity: 0.85;
}

/* ===========================
   Mobile: Скрываем Desktop Contacts
   =========================== */

@media (max-width: 781px) {
  /* контакты из десктопной шапки — прячем */
  body .header-contacts-desktop,
  body .site-header__contacts.my-contacts {
    display: none !important;
  }

  /*
    Мобильная шапка (3 элемента в одну линию):
    - слева: логотип
    - по центру: название сайта
    - справа: кнопка меню (бургер)
  */
  body .site-header__inner {
    --as-mobile-logo-size: 56px;
    --as-mobile-burger-size: 44px;
    --as-mobile-header-slot: 72px; /* "полоса" под лого/бургер */
    --as-mobile-header-pad: 12px;

    display: grid !important;
    grid-template-columns:
      var(--as-mobile-header-slot)
      1fr
      var(--as-mobile-header-slot) !important;
    align-items: center !important;
    column-gap: 0 !important;

    padding-left: calc(var(--as-mobile-header-pad) + env(safe-area-inset-left, 0px)) !important;
    padding-right: calc(var(--as-mobile-header-pad) + env(safe-area-inset-right, 0px)) !important;
  }

  /*
    В разметке site-title лежит внутри .my-logo.
    На мобилке "разворачиваем" группу, чтобы лого и title стали отдельными grid-элементами.
  */
  body .my-logo {
    display: contents !important;
  }

  /* 1) ЛОГО — слева */
  body .my-logo :where(.wp-block-site-logo, .my-mushroom-logo) {
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    width: var(--as-mobile-logo-size) !important;
    margin: 0 !important;
    z-index: 2;
  }

  body .my-logo :where(.wp-block-site-logo, .my-mushroom-logo) a {
    display: block;
    width: 100%;
  }

  body .my-logo :where(.wp-block-site-logo, .my-mushroom-logo) img {
    display: block;
    width: var(--as-mobile-logo-size) !important;
    height: auto !important;
    max-width: none !important;
  }

  /* 2) НАЗВАНИЕ — по центру */
  body .my-logo :where(.wp-block-site-title, .site-title-mobile01) {
    grid-column: 2 !important;
    justify-self: center !important;
    align-self: center !important;

    min-width: 0 !important;
    margin: 0 !important;

    font-size: clamp(16px, 4.2vw, 20px) !important;
    line-height: 1.1 !important;

    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    hyphens: none !important;
  }

  body .my-logo :where(.wp-block-site-title, .site-title-mobile01) a {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 3) МЕНЮ — справа */
  body .site-header__right {
    grid-column: 3 !important;
    justify-self: end !important;
    align-self: center !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;

    margin: 0 !important;
    z-index: 2;
  }

  /* кнопка "бургер" справа */
  body .site-header__right .wp-block-navigation__responsive-container-open {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}