/* ============================================================
   NovAsia — the site header. Markup comes from _build/header.js;
   this file is the only place its look is defined.

   WHY A FILE OF ITS OWN, instead of rules in blog.css:
   the same reason footer.css exists. The two landings (index.html,
   en/index.html) inline their entire stylesheet and link nothing
   render-blocking, and blog.css restyles bare `body`, `a`, `table`,
   `h1`... — linking it on a landing would repaint the landing. So the
   landings could never share blog.css, the header was written a second
   time by hand (.site-head + .head-burger + an orphan .mobile-nav), and
   the two copies drifted until they disagreed about what the site
   contains. A small file that BOTH design systems can take is what makes
   "one header" true rather than aspirational.

   The header is ABOVE the fold, so unlike footer.css this must never be
   loaded with the media="print" trick: an unstyled header at first paint
   is the whole page looking broken. _build/sync-header.js therefore LINKS
   this file on inner pages (which already block on blog.css, so one more
   small stylesheet costs no new round trip) and INLINES its bytes into a
   marked style block on the two landings, which block on nothing.
   Both come from this file, so neither can drift from it.

   NOTHING IN THIS FILE MAY CONTAIN THE TEXT "<style" OR "</style" — not even
   inside a comment like this one. These bytes get inlined into a style
   element on the landings, and a closing tag inside that text would end the
   element early, while an opening tag makes sync-header.js's own marker
   ambiguous. Both have already happened: the first version of this comment
   spelled the marker out, and on 2026-07-17 that text ate ~150 lines of the
   homepage's CSS in production. sync-header.js now refuses to run if this
   file breaks the rule, so this is enforced, not merely requested — but the
   reason is here, where the temptation is.

   WHY IT READS NO HOST VARIABLE:
   it is loaded next to two palettes that do not agree on names or values
   (--bg:#0e1c26/--cream on the landings, --bg:#0A1F1A/--text-2 in
   blog.css). Every colour below is declared on .bhead itself, so the
   header cannot be broken by a page that happens not to define --gold,
   and changing a shared variable elsewhere cannot silently restyle it.
   Both design systems are dark, so one look fits both.
   ============================================================ */
.bhead{
  --nsh-gold:#D4AF6A;
  --nsh-text:#F3F1EC;
  --nsh-text-2:#A8A49C;
  /* NOT blog.css's --text-3 (#6F7570). That colour on the dropdown panel
     (#0E2A24) measures 3.24:1 — below WCAG AA's 4.5:1 for text this size —
     so every «Пошаговый процесс» sub-label under every menu item was
     failing the same check the footer address failed on 2026-07-15. This
     value measures 5.31:1 on the same panel. */
  --nsh-text-3:#9C9890;
  --nsh-bg-2:#0E2A24;
  --nsh-bg-3:#10302A;
  --nsh-line:rgba(212,175,106,.20);
  --nsh-line-soft:rgba(243,241,236,.08);

  display:flex;align-items:center;justify-content:space-between;
  position:relative;
  background:#0A1F1A;
  gap:18px;
  /* 1200, not blog.css's old 1100: the menu now carries the priority the
     owner asked for (Проекты · Всё о покупке · Застройщики · Эксперты ·
     FAQ · Блог · О нас) plus a RU/EN switch the inner pages never had, and
     that does not fit in 1100. It matches .wrap on the landing. */
  max-width:1200px;
  margin:0 auto;
  padding:18px 22px;
  border-bottom:1px solid var(--nsh-line-soft);
  font-family:'Inter',system-ui,sans-serif;
  line-height:1.5;
}
/* The header is intentionally opaque: long hub pages scroll beneath it, and a
   transparent desktop header makes cream cards and text bleed through. */

.bbrand{display:flex;align-items:center;gap:11px;color:var(--nsh-text);text-decoration:none;flex:0 0 auto;}
.bbrand:hover{text-decoration:none;}
.bbrand img{height:40px;width:auto;}
.bbrand b{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;font-weight:600;}
.bbrand b span{color:var(--nsh-gold);}

.bnav{display:flex;align-items:center;gap:4px;margin-left:auto;}
/* 10px, not the old 13px: seven top-level items, a language switch and two
   buttons have to share 1156px of usable width. This is where the 42px came
   from. Tap targets are unaffected — the drawer below sets its own padding. */
.bnav .navlink{font-size:14px;font-weight:500;color:var(--nsh-text);padding:9px 10px;border-radius:2px;white-space:nowrap;text-decoration:none;}
.bnav .navlink:hover{color:var(--nsh-gold);text-decoration:none;}
/* Where you are. Neither old header marked the current page at all. */
.bnav .navlink[aria-current="page"]{color:var(--nsh-gold);}
.bnav .navitem{position:relative;}
.bnav .navitem>.navlink::after{content:"";display:inline-block;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:7px;opacity:.6;}
.bnav .dropdown{position:absolute;top:100%;left:0;min-width:230px;background:var(--nsh-bg-2);border:1px solid var(--nsh-line);border-radius:4px;padding:7px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility .2s;z-index:60;box-shadow:0 18px 40px rgba(0,0,0,.45);}
.bnav .navitem:hover .dropdown,.bnav .navitem:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.bnav .dropdown a{display:block;padding:10px 13px;border-radius:2px;color:var(--nsh-text);font-size:14px;font-weight:500;text-decoration:none;}
/* Long menus (7+ items) open as two columns instead of a 560px-tall strip.
   :has() keeps this automatic — short dropdowns stay single-column, and browsers
   without :has() simply fall back to the old single column. */
.bnav .dropdown:has(a:nth-child(7)){column-count:2;column-gap:6px;width:520px;max-width:calc(100vw - 40px);}
.bnav .dropdown:has(a:nth-child(7))>a{break-inside:avoid;}
.bnav .dropdown a:hover{background:var(--nsh-bg-3);color:var(--nsh-gold);text-decoration:none;}
.bnav .dropdown a[aria-current="page"]{color:var(--nsh-gold);background:var(--nsh-bg-3);}
.bnav .dropdown a .d-sub{display:block;font-size:12px;color:var(--nsh-text-3);font-weight:400;margin-top:2px;}
.bnav .dropdown a:hover .d-sub{color:var(--nsh-text-2);}
/* The last dropdown would otherwise open past the right edge of the viewport.
   header.js flags it, rather than this file selecting it with :last-of-type — that
   reads as if it would work and matches nothing, because the last div child of .bnav
   is .lang-switch, not a .navitem. */
.bnav .navitem-end .dropdown{left:auto;right:0;}

/* The language switch the ~1000 inner pages never had. */
.lang-switch{display:flex;align-items:center;border:1px solid var(--nsh-line);border-radius:2px;overflow:hidden;flex:0 0 auto;margin:0 4px;}
.lang-switch a{font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--nsh-text-2);padding:7px 9px;text-decoration:none;line-height:1;}
.lang-switch a:hover{color:var(--nsh-gold);text-decoration:none;}
.lang-switch a.on{background:var(--nsh-bg-3);color:var(--nsh-text);}

.bnav-tg{font-size:13.5px;font-weight:600;color:var(--nsh-text);border:1px solid var(--nsh-line);border-radius:2px;padding:9px 15px;white-space:nowrap;text-decoration:none;flex:0 0 auto;}
.bnav-tg:hover{color:var(--nsh-gold);border-color:var(--nsh-gold);text-decoration:none;}
.bnav-wa{font-size:13.5px;font-weight:600;color:#08311b;background:#25D366;border:1px solid #25D366;border-radius:2px;padding:9px 15px;white-space:nowrap;text-decoration:none;flex:0 0 auto;}
.bnav-wa:hover{background:#1FB457;border-color:#1FB457;text-decoration:none;}

.burger{display:none;background:none;border:0;cursor:pointer;width:34px;height:34px;padding:6px;margin-left:auto;}
/* width is load-bearing: the drawer rule below makes .burger a column flex
   container with align-items:center, which sizes each span to its own content
   on the cross axis. These spans are empty, so without an explicit width they
   collapse to 0 — a 44x44 button that is tappable but renders nothing. That
   shipped once already (2026-07-16). */
.burger span{display:block;width:22px;height:2px;background:var(--nsh-text);margin:5px 0;border-radius:2px;transition:.25s;}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* A second, additive way into the same .bnav panel. It is deliberately inside
   the desktop navigation row, after the language switch: the people-first menu
   remains visible, while readers who prefer a full overview get one clear entry
   point. The panel hides its own trigger after opening. */
.desktop-menu-toggle{display:none;align-items:center;gap:8px;min-height:40px;padding:8px 10px;border:1px solid var(--nsh-line);border-radius:2px;background:transparent;color:var(--nsh-text);font:600 13px/1 'Inter',system-ui,sans-serif;cursor:pointer;white-space:nowrap;}
.desktop-menu-toggle:hover{color:var(--nsh-gold);border-color:var(--nsh-gold);}
.desktop-menu-icon{display:grid;gap:3px;width:18px;}
.desktop-menu-icon i{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;}
@media(min-width:1160px){
  .desktop-menu-toggle{display:inline-flex;}
  .bnav.open .desktop-menu-toggle{display:none;}
}

/* ---------- the drawer ----------
   1160, not the old 960. The breakpoint is not a taste call: it is the width
   below which the seven top-level items stop fitting. assets/js/nav.js does NOT
   repeat this number — it asks whether the burger is displayed — so this rule is
   the single source of truth for where the drawer takes over, and moving it can
   never desync the two the way a matchMedia('(max-width:960px)') in the script
   used to. */
@media(max-width:1159px){
  /* Sticky header on mobile only: keeps the burger + brand reachable through long
     articles. Desktop keeps position:relative so the hover dropdowns anchor
     correctly.  z-index 45 sits above content but below the open drawer (50) and
     the burger (55); the backdrop stays at 40.
     NOTE: no backdrop-filter/filter/transform here — those make .bhead the
     containing block for the position:fixed .bnav drawer, trapping it inside the
     header box instead of the viewport. Solid-ish bg instead of blur. */
  .bhead{--nsh-tap:52px;--nsh-line-row:rgba(243,241,236,.12);position:sticky;top:0;z-index:45;background:#0A1F1A;border-bottom:1px solid var(--nsh-line-soft);}
  .bnav{position:fixed;inset:0 0 0 auto;width:min(86vw,360px);flex-direction:column;align-items:stretch;gap:0;background:var(--nsh-bg-2);border-left:1px solid var(--nsh-line);padding:78px max(18px,env(safe-area-inset-right)) max(28px,calc(env(safe-area-inset-bottom) + 20px)) 18px;transform:translateX(100%);transition:transform .3s ease;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;z-index:50;margin-left:0;}
  .bnav.open{transform:translateX(0);}
  .burger{display:flex;flex-direction:column;align-items:center;justify-content:center;width:44px;height:44px;padding:0;z-index:55;}
  /* At tablet/compact-desktop widths the existing drawer trigger is the same full
     menu entry point; give it a visible label without adding a second control. */
  @media(min-width:900px){
    .burger{width:auto;min-width:84px;gap:6px;padding:0 10px;flex-direction:row;}
    .burger::after{content:attr(data-menu-label);font-size:13px;font-weight:600;color:var(--nsh-text);}
  }
  .bnav .navlink{display:flex;align-items:center;min-height:var(--nsh-tap);padding:10px 6px;font-size:16px;font-weight:500;border-bottom:1px solid var(--nsh-line-row);border-radius:0;}
  .bnav .navitem{width:100%;}
  .bnav .navitem>.navlink{justify-content:space-between;font-weight:600;}
  .bnav .navitem>.navlink::after{content:"";width:8px;height:8px;margin:0 4px 0 0;flex:0 0 auto;border-right:2px solid var(--nsh-gold);border-bottom:2px solid var(--nsh-gold);transform:rotate(45deg);opacity:.9;transition:transform .2s ease;}
  .bnav .navitem.exp>.navlink::after{transform:rotate(-135deg);}
  .bnav .navitem.exp>.navlink{color:var(--nsh-gold);}
  .bnav .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:var(--nsh-bg-3);padding:2px 0 8px;min-width:0;display:none;}
  /* Mobile: the dropdown is inline in the drawer — always one column. */
  .bnav .dropdown:has(a:nth-child(7)){column-count:1;width:auto;max-width:none;}
  .bnav .navitem-end .dropdown{right:auto;}
  .bnav .navitem.exp .dropdown{display:block;}
  .bnav .dropdown a{display:flex;flex-direction:column;justify-content:center;min-height:48px;padding:9px 12px 9px 22px;font-size:15px;border-bottom:1px solid var(--nsh-line-soft);}
  .bnav .dropdown a:last-child{border-bottom:0;}
  .bnav .dropdown a .d-sub{font-size:12.5px;margin-top:2px;}
  .lang-switch{align-self:stretch;display:flex;margin:20px 0 4px;border:1px solid var(--nsh-line);border-radius:4px;overflow:hidden;}
  .lang-switch a{flex:1;display:flex;align-items:center;justify-content:center;min-height:48px;padding:0;font-size:15px;line-height:1.2;letter-spacing:.06em;}
  .bnav-wa,.bnav-tg{display:flex;align-items:center;justify-content:center;min-height:52px;margin-top:10px;font-size:15px;border-radius:4px;text-align:center;}
  .bnav-wa{margin-top:16px;}
  .nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:.3s;z-index:40;}
  .nav-backdrop.open{opacity:1;visibility:visible;}
}

/* Wide desktop keeps the top strip intact. Opening the additive menu trigger
   turns the very same nav markup into the familiar off-canvas panel; there is no
   duplicate list, no second state machine and no separate Escape behaviour. */
@media(min-width:1160px){
  .bnav.open{position:fixed;inset:0 0 0 auto;width:min(86vw,360px);flex-direction:column;align-items:stretch;gap:0;background:var(--nsh-bg-2);border-left:1px solid var(--nsh-line);padding:78px max(18px,env(safe-area-inset-right)) max(28px,calc(env(safe-area-inset-bottom) + 20px)) 18px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;z-index:50;margin-left:0;box-shadow:-18px 0 40px rgba(0,0,0,.28);}
  .bnav.open .navlink{display:flex;align-items:center;min-height:52px;padding:10px 6px;font-size:16px;font-weight:500;border-bottom:1px solid var(--nsh-line-soft);border-radius:0;}
  .bnav.open .navitem{width:100%;}
  .bnav.open .navitem>.navlink{justify-content:space-between;font-weight:600;}
  .bnav.open .navitem>.navlink::after{content:"";width:8px;height:8px;margin:0 4px 0 0;flex:0 0 auto;border-right:2px solid var(--nsh-gold);border-bottom:2px solid var(--nsh-gold);transform:rotate(45deg);opacity:.9;transition:transform .2s ease;}
  .bnav.open .navitem.exp>.navlink::after{transform:rotate(-135deg);}
  .bnav.open .navitem.exp>.navlink{color:var(--nsh-gold);}
  .bnav.open .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:var(--nsh-bg-3);padding:2px 0 8px;min-width:0;display:none;}
  .bnav.open .dropdown:has(a:nth-child(7)){column-count:1;width:auto;max-width:none;}
  .bnav.open .navitem-end .dropdown{right:auto;}
  .bnav.open .navitem.exp .dropdown{display:block;}
  .bnav.open .dropdown a{display:flex;flex-direction:column;justify-content:center;min-height:48px;padding:9px 12px 9px 22px;font-size:15px;border-bottom:1px solid var(--nsh-line-soft);}
  .bnav.open .dropdown a:last-child{border-bottom:0;}
  .bnav.open .dropdown a .d-sub{font-size:12.5px;margin-top:2px;}
  .bnav.open .lang-switch{align-self:stretch;display:flex;margin:20px 0 4px;border:1px solid var(--nsh-line);border-radius:4px;overflow:hidden;}
  .bnav.open .lang-switch a{flex:1;display:flex;align-items:center;justify-content:center;min-height:48px;padding:0;font-size:15px;line-height:1.2;letter-spacing:.06em;}
  .bnav.open .bnav-wa,.bnav.open .bnav-tg{display:flex;align-items:center;justify-content:center;min-height:52px;margin-top:10px;font-size:15px;border-radius:4px;text-align:center;}
  .bnav.open .bnav-wa{margin-top:16px;}
  .nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:.3s;z-index:40;}
  .nav-backdrop.open{opacity:1;visibility:visible;}
}

/* Keyboard focus, in case a host page defines none (the landings style
   :focus-visible globally; a bare page might not). */
.bhead :focus-visible{outline:2px solid var(--nsh-gold);outline-offset:2px;border-radius:2px;}

@media print{
  .bhead,.nav-backdrop{display:none !important;}
}