/* ============================================================
   СПБ Переезд — 04-header-footer
   Шапка, хлебные крошки, футер. Общие для всего сайта.
   ============================================================ */

/* ---------------- Шапка ---------------- */
.sp-hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.93);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.sp-hdr__in{display:flex;align-items:center;gap:26px;padding-top:14px;padding-bottom:14px}

.sp-logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.sp-logo>svg{width:46px;height:46px;fill:var(--brand);flex:none}
.sp-logo__txt{display:flex;flex-direction:column;line-height:1}
.sp-logo__row{font-family:var(--f-display);font-weight:700;font-size:21px;letter-spacing:-.015em}
.sp-logo__a{color:var(--brand)}
.sp-logo__b{color:var(--ink)}
.sp-logo__slogan{font-family:var(--f-text);font-weight:600;font-size:8px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-top:6px;white-space:nowrap}

.sp-nav{display:flex;align-items:center;gap:4px;font-size:15px;font-weight:500;color:var(--ink-2);margin:0 auto}
.sp-nav__mob{display:none}

/* --- пункт верхнего уровня --- */
.sp-nav__item{position:relative}
.sp-nav__link{display:flex;align-items:center;gap:5px;padding:9px 10px;border-radius:var(--r-sm);
  text-decoration:none;color:var(--ink-2);white-space:nowrap;transition:var(--dur) var(--ease)}
.sp-nav__link:hover{color:var(--brand);background:var(--brand-soft)}
.sp-nav__item.is-current > .sp-nav__link{color:var(--brand)}
.sp-nav__caret{width:15px;height:15px;transition:transform var(--dur) var(--ease);opacity:.6}
.sp-nav__item--has:hover .sp-nav__caret{transform:rotate(180deg)}
.sp-nav__toggle{display:none} /* кнопка-аккордеон только на мобильном */

/* --- выпадающее подменю (десктоп) --- */
.sp-submenu{position:absolute;top:100%;left:0;min-width:260px;padding-top:10px;z-index:70;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur)}
.sp-nav__item--has:hover .sp-submenu,
.sp-nav__item--has:focus-within .sp-submenu{opacity:1;visibility:visible;transform:none}
.sp-submenu__inner{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-lg);padding:8px}
.sp-submenu__link{display:block;padding:11px 14px;border-radius:var(--r-sm);text-decoration:none;
  transition:background var(--dur) var(--ease)}
.sp-submenu__link:hover{background:var(--bg-2)}
.sp-submenu__name{display:block;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.3}
.sp-submenu__link:hover .sp-submenu__name{color:var(--brand)}
.sp-submenu__desc{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px;line-height:1.4}
.sp-submenu__link.is-current{background:var(--brand-soft)}

.sp-hdr__right{display:flex;align-items:center;gap:18px;margin-left:auto}
.sp-tel{font-family:var(--f-display);font-weight:700;font-size:19px;color:var(--ink);
  text-decoration:none;white-space:nowrap;text-align:right;letter-spacing:-.01em}
.sp-tel:hover{color:var(--brand)}
.sp-tel small{display:block;font-family:var(--f-text);font-weight:400;font-size:11.5px;
  color:var(--ink-3);margin-top:4px;letter-spacing:0}

.sp-hdr__call{display:none;width:48px;height:48px;border-radius:var(--r-sm);background:var(--card);
  border:1px solid var(--line-2);box-shadow:var(--sh);align-items:center;justify-content:center;flex:none}
.sp-hdr__call svg{width:21px;height:21px;stroke:var(--brand);fill:none;stroke-width:2}

.sp-burger{display:none;width:44px;height:44px;border:none;background:none;cursor:pointer;
  padding:0;position:relative;flex:none}
.sp-burger i,.sp-burger i::before,.sp-burger i::after{position:absolute;left:10px;height:2.4px;
  background:var(--ink);border-radius:2px;transition:var(--dur) var(--ease);display:block}
.sp-burger i{top:50%;margin-top:-1.2px;width:24px}
.sp-burger i::before{content:"";top:-8px;left:0;width:24px}
.sp-burger i::after{content:"";top:8px;left:0;width:17px}
.sp-burger.is-open i{background:transparent}
.sp-burger.is-open i::before{transform:translateY(8px) rotate(45deg)}
.sp-burger.is-open i::after{transform:translateY(-8px) rotate(-45deg);width:24px}

@media(max-width:1180px){
  .sp-nav{gap:18px;font-size:14.5px}
  .sp-tel{font-size:17px}
  .sp-tel small{display:none}
}

@media(max-width:1200px){
  .sp-hdr__in{gap:12px}
  .sp-nav{position:absolute;top:100%;left:0;right:0;margin:0;flex-direction:column;gap:0;
    align-items:stretch;background:var(--card);border-bottom:1px solid var(--line);
    box-shadow:var(--sh-lg);padding:6px var(--pad) 20px;transform:translateY(-10px);
    opacity:0;visibility:hidden;max-height:calc(100vh - 70px);overflow-y:auto;
    transition:var(--dur) var(--ease)}
  .sp-nav.is-open{transform:none;opacity:1;visibility:visible}

  .sp-nav__item{border-bottom:1px solid var(--line-2)}
  .sp-nav__link{padding:16px 4px;font-size:16px;font-weight:600;color:var(--ink);border-radius:0}
  .sp-nav__link:hover{background:none}
  .sp-nav__caret{display:none} /* на мобильном стрелку рисует кнопка-триггер */

  /* кнопка-аккордеон */
  .sp-nav__toggle{display:flex;position:absolute;top:0;right:0;width:56px;height:56px;
    align-items:center;justify-content:center;background:none;border:none;cursor:pointer;
    color:var(--ink-3);padding:0}
  .sp-nav__toggle svg{width:20px;height:20px;transition:transform var(--dur) var(--ease)}
  .sp-nav__item.is-expanded .sp-nav__toggle svg{transform:rotate(180deg)}

  /* подменю-аккордеон: свёрнуто по высоте */
  .sp-submenu{position:static;min-width:0;padding-top:0;opacity:1;visibility:visible;
    transform:none;max-height:0;overflow:hidden;transition:max-height var(--dur) var(--ease)}
  .sp-nav__item.is-expanded .sp-submenu{max-height:2000px}
  .sp-submenu__inner{background:none;border:none;box-shadow:none;border-radius:0;
    padding:0 0 10px 12px}
  .sp-submenu__link{padding:10px 8px}
  .sp-submenu__name{font-size:15px}

  .sp-nav__mob{display:block;padding-top:16px;border-bottom:none}
  .sp-nav__mob .sp-btn{width:100%;justify-content:center}
  .sp-tel,.sp-hdr__right>.sp-btn{display:none}
  .sp-hdr__call{display:none}
  .sp-burger{display:block}
  .sp-logo>svg{width:40px;height:40px}
  .sp-logo__row{font-size:18px}
}

@media(max-width:400px){
  .sp-logo__slogan{display:none}
}

/* ---------------- Хлебные крошки ---------------- */
/* Крошки идут под первым экраном, на белой подложке —
   визуально сливаются со следующей секцией */
.sp-crumbs-bar{background:var(--card)}
.sp-crumbs{font-size:12.5px;color:var(--ink-3);padding:20px 0 0}
.sp-crumbs a{text-decoration:none}
.sp-crumbs a:hover{color:var(--brand)}

/* ---------------- Футер ---------------- */
.sp-ftr{background:var(--ink);color:rgba(255,255,255,.62);padding:52px 0 30px;font-size:14px}
.sp-ftr__cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:34px}
.sp-ftr h4{color:#fff;font-size:14px;font-weight:600;margin-bottom:14px}
.sp-ftr ul{list-style:none;padding:0;margin:0}
.sp-ftr li{margin-bottom:9px}
.sp-ftr a{text-decoration:none}
.sp-ftr a:hover{color:#fff}
.sp-ftr .sp-logo__b{color:#fff}
.sp-ftr .sp-logo__slogan{color:rgba(255,255,255,.5)}
.sp-ftr .sp-tel{color:#fff}

.sp-ftr__strip{display:grid;grid-template-columns:1.3fr .9fr 1.2fr;gap:32px;
  border-top:1px solid rgba(255,255,255,.13);padding:28px 0 24px;font-size:13.5px}
.sp-ftr__strip p{margin:0;line-height:1.7}
.sp-pay{display:flex;flex-wrap:wrap;gap:7px}
.sp-pay span{border:1px solid rgba(255,255,255,.22);border-radius:7px;padding:6px 12px;font-size:12.5px}
.sp-req{font-family:var(--f-mono);font-size:12px;line-height:1.95}

.sp-ftr__bottom{border-top:1px solid rgba(255,255,255,.13);padding-top:22px;display:flex;
  justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12.5px}

@media(max-width:820px){
  .sp-ftr__cols{grid-template-columns:1fr 1fr}
  .sp-ftr__strip{grid-template-columns:1fr;gap:24px}
}

/* --- Логотип-картинка (если загружен в ACF вместо встроенного SVG) --- */
.sp-logo__img{width:24px;height:41px;object-fit:contain;flex:none;display:block}
@media(max-width:1200px){.sp-logo__img{width:40px;height:40px}}

/* --- Соцсети в подвале --- */
.sp-social{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sp-social__link{
  display:inline-flex;align-items:center;padding:7px 14px;border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.82);
  font-size:13px;font-weight:600;text-decoration:none;transition:var(--dur) var(--ease);
}
.sp-social__link:hover{background:var(--brand);border-color:var(--brand);color:#fff}

/* ============================================================
   МЕНЮ: 3-й уровень (подменю подменю)
   ============================================================ */

/* обёртка пункта 2-го уровня (теперь div, а не просто ссылка) */
.sp-submenu__item{position:relative}
.sp-submenu__item--has > .sp-submenu__link{padding-right:34px}

/* каретка вправо у пунктов с детьми (ПК) */
.sp-submenu__caret{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;color:var(--ink-3);transition:var(--dur) var(--ease)}
.sp-submenu__item--has:hover > .sp-submenu__link .sp-submenu__caret{color:var(--brand)}

/* кнопка-триггер для мобильного (скрыта на ПК) */
.sp-submenu__toggle{display:none}

/* --- 3-й уровень на ПК: выпадает вбок --- */
.sp-submenu3{position:absolute;top:0;left:100%;min-width:240px;padding-left:8px;z-index:80;
  opacity:0;visibility:hidden;transform:translateX(-6px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur)}
.sp-submenu__item--has:hover > .sp-submenu3,
.sp-submenu__item--has:focus-within > .sp-submenu3{opacity:1;visibility:visible;transform:none}
.sp-submenu3__inner{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-lg);padding:8px}
.sp-submenu3__link{display:block;padding:10px 13px;border-radius:var(--r-sm);
  text-decoration:none;transition:background var(--dur) var(--ease)}
.sp-submenu3__link:hover{background:var(--bg-2)}
.sp-submenu3__name{display:block;font-size:14px;font-weight:500;color:var(--ink);line-height:1.3}
.sp-submenu3__link:hover .sp-submenu3__name{color:var(--brand)}
.sp-submenu3__desc{display:block;font-size:12px;color:var(--ink-3);margin-top:2px;line-height:1.4}
.sp-submenu3__link.is-current{background:var(--brand-soft)}
.sp-submenu3__link.is-current .sp-submenu3__name{color:var(--brand)}

/* если подменю не помещается справа — открываем влево */
.sp-submenu__item--has:nth-last-child(-n+2) .sp-submenu3{left:auto;right:100%;
  padding-left:0;padding-right:8px}

/* ============================================================
   МОБИЛЬНОЕ: 3 уровня аккордеоном
   ============================================================ */
@media(max-width:1200px){
  /* пункт 2-го уровня — относительный, чтобы кнопка встала по месту */
  .sp-submenu__item{position:relative}
  .sp-submenu__item--has > .sp-submenu__link{padding-right:44px}
  .sp-submenu__caret{display:none}
  /* убираем ДВОЙНУЮ каретку у пунктов 1-го уровня:
     внутри ссылки прячем, оставляем только кнопку-тоггл */
  .sp-nav__caret{display:none!important}

  /* кнопка-раскрывашка 2-го уровня */
  .sp-submenu__toggle{display:flex;position:absolute;right:4px;top:4px;
    width:36px;height:36px;align-items:center;justify-content:center;
    background:none;border:none;cursor:pointer;color:var(--ink-3);
    border-radius:8px;transition:var(--dur) var(--ease)}
  .sp-submenu__toggle:hover{background:var(--bg-2);color:var(--brand)}
  .sp-submenu__toggle svg{width:17px;height:17px;transition:transform var(--dur) var(--ease)}
  .sp-submenu__item.is-expanded > .sp-submenu__toggle svg{transform:rotate(180deg)}
  .sp-submenu__item.is-expanded > .sp-submenu__toggle{color:var(--brand)}

  /* 3-й уровень — вложенный аккордеон */
  .sp-submenu3{position:static;min-width:0;padding:0;opacity:1;visibility:visible;
    transform:none;max-height:0;overflow:hidden;
    transition:max-height var(--dur) var(--ease)}
  .sp-submenu__item.is-expanded > .sp-submenu3{max-height:500px}
  .sp-submenu3__inner{background:none;border:none;box-shadow:none;border-radius:0;
    padding:0 0 4px 16px;border-left:2px solid var(--line)}
  .sp-submenu3__link{padding:9px 8px}
  .sp-submenu3__name{font-size:14px}
}

/* почта в подвале — под соцсетями */
.sp-foot-mail{display:inline-flex;align-items:center;gap:9px;margin-top:14px;
  font-size:14.5px;color:rgba(255,255,255,.78);text-decoration:none;
  transition:color var(--dur) var(--ease)}
.sp-foot-mail:hover{color:#fff}
.sp-foot-mail svg{width:18px;height:18px;flex:none;stroke:var(--brand-lt)}
.sp-foot-mail:hover svg{stroke:#fff}
@media(max-width:370px){
  .sp-ftr__cols{grid-template-columns:1fr}
  .sp-ftr{padding-bottom:70px}
  }