/* ==========================================================================
   layout.css — шапка, меню (десктоп + мобильный оверлей), подвал
   ========================================================================== */

/* Header зафиксирован (position:fixed), поэтому отступ под него добавляет
   не body, а первый блок каждого шаблона: hero — своим большим padding-top
   (150px, больше высоты шапки), остальные — через breadcrumbs
   (margin-top:var(--header-h), см. components.css). Общий body-отступ
   здесь не нужен — он задваивал бы отступ у hero на главной. */
body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
.site-content{flex:1 0 auto}
footer.site-footer{flex-shrink:0}

header.site-header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  background:rgba(244,242,237,.94);
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s;
}
header.site-header.scrolled{border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}

.logo{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.02em}
.logo-mark{
  width:26px;height:26px;border:1.5px solid var(--ink);border-radius:50%;
  position:relative;flex:none;
}
.logo-mark::before,.logo-mark::after{content:"";position:absolute;background:var(--ink)}
.logo-mark::before{left:50%;top:-4px;bottom:-4px;width:1.5px;transform:translateX(-50%)}
.logo-mark::after{top:50%;left:-4px;right:-4px;height:1.5px;transform:translateY(-50%)}
.logo-mark span{position:absolute;inset:7px;background:var(--accent);border-radius:50%}
.logo img{max-height:26px;width:auto}

/* ---------- десктоп-меню ---------- */
nav.menu > .menu{display:flex;gap:34px;font-size:14px;font-weight:500;list-style:none}
nav.menu > .menu > li{position:relative}
nav.menu a{position:relative;padding:4px 0;color:var(--steel);transition:color .25s;display:inline-block}
nav.menu a:hover{color:var(--ink)}
nav.menu > .menu > li > a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--accent);transition:width .25s}
nav.menu > .menu > li > a:hover::after{width:100%}
nav.menu .submenu-toggle{display:none}

nav.menu .sub-menu{
  list-style:none;position:absolute;top:100%;left:0;min-width:240px;
  background:var(--paper);border:1px solid var(--line);
  padding:10px 0;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .2s,transform .2s,visibility .2s;
}
nav.menu li.has-submenu:hover > .sub-menu,
nav.menu li.has-submenu:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none}
nav.menu .sub-menu a{display:block;padding:9px 20px;color:var(--ink);font-size:13.5px}
nav.menu .sub-menu a:hover{background:var(--paper-2);color:var(--accent)}
nav.menu .sub-menu .sub-menu{top:-11px;left:100%}

.nav-phone{font-family:var(--mono);font-size:13.5px;font-weight:500;white-space:nowrap}
.nav-phone b{color:var(--accent)}

.nav-callback{
  display:none;padding:0;margin:0;border:0;background:none;appearance:none;cursor:pointer;
  font-family:var(--mono);font-size:13px;color:var(--steel);white-space:nowrap;
  position:relative;transition:color .25s;
}
.nav-callback::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--accent);transition:width .25s}
.nav-callback:hover{color:var(--ink)}
.nav-callback:hover::after{width:100%}
@media(min-width:701px){.nav-callback{display:inline-block}}

.burger{
  display:none;width:32px;height:32px;padding:0;margin:0;
  border:0;background:none;appearance:none;cursor:pointer;
  position:relative;flex:none;
}
.burger span,.burger span::before,.burger span::after{
  content:"";position:absolute;left:5px;right:5px;height:1.5px;background:var(--ink);
  transition:transform .25s,opacity .25s,background-color .25s;
}
.burger span{top:50%;transform:translateY(-50%)}
.burger span::before{top:-8px}
.burger span::after{top:8px}
.burger:hover span,.burger:hover span::before,.burger:hover span::after{background:var(--accent)}
.menu-open .burger span{background:transparent}
.menu-open .burger span::before{top:50%;transform:translateY(-50%) rotate(45deg);background:var(--ink)}
.menu-open .burger span::after{top:50%;transform:translateY(-50%) rotate(-45deg);background:var(--ink)}
.menu-open .burger:hover span::before,
.menu-open .burger:hover span::after{background:var(--accent)}

@media(max-width:900px){
  nav.menu{display:none}
  .burger{display:block}
}
@media(min-width:901px){
  .burger{display:none !important}
}
@media(max-width:440px){
  .logo{font-size:12px;gap:8px;letter-spacing:0}
  .logo-mark{width:21px;height:21px}
  .logo-mark span{inset:6px}
  .nav-phone{font-size:11.5px}
  .nav{gap:14px}
}

/* ---------- мобильный оверлей ---------- */
.mobile-menu{
  position:fixed;inset:var(--header-h) 0 0 0;z-index:49;
  background:var(--paper);
  padding:28px 0 40px;overflow-y:auto;
  transform:translateX(100%);transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.menu-open .mobile-menu{transform:translateX(0)}
.mobile-menu .menu{list-style:none}
.mobile-menu .menu > li{border-bottom:1px solid var(--line)}
.mobile-menu .menu a{
  display:block;padding:16px 0;
  font-family:var(--display);font-weight:500;font-size:19px;color:var(--ink);
}
.mobile-menu li{position:relative}
.mobile-menu .submenu-toggle{
  display:none;position:absolute;right:0;top:6px;width:44px;height:44px;
  background:none;border:0;cursor:pointer;
}
.mobile-menu li.has-submenu > .submenu-toggle{display:block}
.mobile-menu .submenu-toggle::before,.mobile-menu .submenu-toggle::after{
  content:"";position:absolute;top:50%;left:50%;background:var(--ink);
  transition:transform .2s;
}
.mobile-menu .submenu-toggle::before{width:14px;height:1.5px;transform:translate(-50%,-50%)}
.mobile-menu .submenu-toggle::after{width:1.5px;height:14px;transform:translate(-50%,-50%)}
.mobile-menu .submenu-toggle[aria-expanded="true"]::after{transform:translate(-50%,-50%) scaleY(0)}
.mobile-menu .sub-menu{
  list-style:none;max-height:0;overflow:hidden;transition:max-height .3s ease;
  padding-left:18px;
}
.mobile-menu .sub-menu a{font-size:16px;font-weight:400;padding:12px 0;color:var(--steel)}
@media(min-width:901px){.mobile-menu{display:none}}

/* ---------- подвал ---------- */
footer.site-footer{border-top:1px solid var(--line);padding:34px 0;margin-top:100px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:12.5px;color:var(--steel);letter-spacing:.05em}
.foot-nav ul{display:flex;flex-wrap:wrap;gap:20px;list-style:none;padding:0}
.foot-social{margin-bottom:20px}
.foot-social ul{display:flex;flex-wrap:wrap;gap:16px;list-style:none;padding:0;font-family:var(--mono);font-size:12.5px}
.foot-social a{color:var(--steel);transition:color .2s}
.foot-social a:hover{color:var(--accent)}
.foot-legal ul{display:flex;flex-wrap:wrap;gap:16px;list-style:none;padding:0;font-size:12px}