/* ============================================================================
   MaxcroW — ЕДИНОЕ верхнее меню портала (premium, пропорции уровня HoReCa).
   Одно меню на все разделы: целевой логотип (мира + подпись раздела), навигация
   с подменю, кнопка аудита. Акцент раздела задаётся через --tb-accent на .topbar.
   Сейчас обкатывается на главной; после согласования → в shared + на все разделы.
   ============================================================================ */
:root { --pbar-h: 68px; }

.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--pbar-h); z-index: 2000;
  background: rgba(11, 11, 14, .9);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --tb-accent: #fe8b66; --tb-accent-deep: #c2492a;
  --action-face:var(--tb-accent); --action-ink:#171411; --action-back:#fff;
  --action-edge:color-mix(in srgb,var(--tb-accent-deep) 72%,#171411); --action-focus:#fff;
  --action-disabled-face:#34313c; --action-disabled-ink:#aaa5b3;
}
.topbar__in { max-width: 1360px; height: 100%; margin: 0 auto; display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); padding: 0 clamp(16px, 3vw, 40px); }

/* --- ЛОГОТИП (целевой под раздел) --- */
.topbar__logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: 0 0 auto; }
.topbar__mark { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; flex: none; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.topbar__logo:hover .topbar__mark { transform: rotate(-6deg) scale(1.06); }
.topbar__mark img { width: 100%; height: 100%; display: block; object-fit: contain; }
.topbar__mark svg { width: 26px; height: 26px; display: block; }
.topbar__mark svg path { fill: #fff; }
.topbar__brand { display: flex; flex-direction: column; line-height: 1; }
.topbar__brand b { font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: #fff; }
.topbar__brand small { font-size: 9.5px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--tb-accent); margin-top: 4px; }

/* --- НАВИГАЦИЯ --- */
.topbar__nav { margin-left: auto; display: flex; align-items: center; gap: clamp(14px, 1.9vw, 28px); height: 100%; }
.topbar__link { position: relative; display: inline-flex; align-items: center; height: 100%; color: rgba(255, 255, 255, .68); text-decoration: none; font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; transition: color .18s ease; }
@media (min-width: 1121px) { .topbar__link:hover { color: #fff; } }
.topbar__link--active { color: #fff; }
.topbar__link--active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--tb-accent); border-radius: 2px 2px 0 0; }

/* подменю */
.topbar__item { position: relative; display: inline-flex; align-items: center; height: 100%; }
@media (min-width: 1121px) { .topbar__item:hover::after, .topbar__item:focus-within::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 320px; height: 20px; } }
.topbar__caret { margin-left: 6px; width: 11px; height: 11px; opacity: .55; transition: transform .2s ease, opacity .2s ease; }
@media (min-width: 1121px) { .topbar__item:hover .topbar__caret, .topbar__item:focus-within .topbar__caret { transform: rotate(180deg); opacity: 1; } }
.topbar__menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); min-width: 274px; background: #15141d; border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; padding: 8px; display: flex; flex-direction: column; gap: 1px; box-shadow: 0 32px 64px -22px rgba(0, 0, 0, .72); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, transform .18s ease; z-index: 3000; }
@media (min-width: 1121px) { .topbar__item:hover .topbar__menu, .topbar__item:focus-within .topbar__menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(3px); } }
.topbar__menu a { padding: 11px 15px; border-radius: 10px; color: rgba(255, 255, 255, .84); text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; transition: background .15s ease, color .15s ease; }
@media (min-width: 1121px) { .topbar__menu a:hover { background: rgba(255, 255, 255, .07); color: #fff; } }
.topbar__menu-all { color: var(--tb-accent) !important; font-weight: 800 !important; margin-bottom: 5px; padding-bottom: 12px !important; border-bottom: 1px solid rgba(255, 255, 255, .1); border-radius: 10px 10px 0 0 !important; }

/* --- КНОПКА АУДИТА --- */
.topbar__cta { flex: 0 0 auto; min-height: 46px; display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 12px; background: var(--action-face); color: var(--action-ink); font-weight: 800; font-size: 14.5px; text-decoration: none; white-space: nowrap; border: 1px solid var(--action-edge); box-shadow: 4px 4px 0 var(--action-back),5px 5px 0 color-mix(in srgb,var(--tb-accent-deep) 42%,transparent); transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .25s cubic-bezier(.2,.7,.2,1), background .2s ease; position: relative; overflow: hidden; isolation: isolate; }
.topbar__cta > * { position: relative; z-index: 2; }
.topbar__cta svg { width: 16px; height: 16px; flex: none; transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.topbar__cta:hover { transform: translate(2px,2px); background:color-mix(in srgb,var(--action-face) 88%,#fff); box-shadow: 2px 2px 0 var(--action-back),3px 3px 0 color-mix(in srgb,var(--tb-accent-deep) 42%,transparent); }
.topbar__cta:hover svg { transform: translateX(4px); }
.topbar__cta:active { transform: translate(4px,4px); box-shadow: 0 0 0 var(--action-back); }
.topbar__cta:focus-visible { outline:3px solid var(--action-focus); outline-offset:4px; }
.topbar__cta[aria-disabled="true"] { opacity:.62; cursor:not-allowed; color:var(--action-disabled-ink); background:var(--action-disabled-face); border-color:rgba(255,255,255,.24); box-shadow:3px 3px 0 rgba(255,255,255,.32); transform:none; pointer-events:none; }
.topbar__cta[aria-disabled="true"] svg { animation:none;transform:none; }
.topbar__cta::after { content: ""; position: absolute; top: -60%; left: -30%; width: 32%; height: 220%; z-index: 1; pointer-events: none; background: linear-gradient(100deg, transparent 0%, color-mix(in srgb, #fff 38%, transparent) 50%, transparent 100%); transform: translateX(-260%) skewX(-14deg); opacity: 0; }
.topbar__cta.cta-anim::after { animation: topbarCtaSheen 9s cubic-bezier(.2,.7,.2,1) infinite; }
.topbar__cta.cta-anim svg { animation: topbarCtaArrow 9s cubic-bezier(.2,.7,.2,1) infinite; }
.topbar__cta:hover::after, .topbar__cta:focus-visible::after { animation-play-state: paused; opacity: 0; }
.topbar__cta:hover svg { animation: none; }
@keyframes topbarCtaSheen { 0%{transform:translateX(-260%) skewX(-14deg);opacity:0}2%{opacity:.85}9%{opacity:.85}11%{transform:translateX(360%) skewX(-14deg);opacity:0}100%{transform:translateX(360%) skewX(-14deg);opacity:0} }
@keyframes topbarCtaArrow { 0%,82%,100%{transform:translateX(0)}88%{transform:translateX(3px)}94%{transform:translateX(0)} }
@media (prefers-reduced-motion: reduce) { .topbar__cta::after { animation: none !important; opacity: 0 !important; } .topbar__cta svg { animation: none !important; } }
@media (hover: none), (max-width: 1120px) { .topbar__cta::after { animation: none !important; opacity: 0 !important; } .topbar__cta svg { animation: none !important; } }

/* --- бургер (мобайл) --- */
.topbar__burger { display: none; width: 42px; height: 42px; border: 0; background: rgba(255,255,255,.06); border-radius: 11px; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.topbar__burger span { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s ease, opacity .3s ease; }

@media (max-width: 1120px) {
  :root { --pbar-h: 60px; }
  /* мобильное меню-оверлей: СВЕТЛАЯ тема (как главная). КЛЮЧЕВОЕ — pointer-events:none когда закрыто. */
  .topbar__nav { position: fixed; top: var(--pbar-h); left: 0; right: 0; z-index: 60; flex-direction: column; align-items: stretch; height: calc(100vh - var(--pbar-h)); height: calc(100dvh - var(--pbar-h)); overflow-y: auto; -webkit-overflow-scrolling: touch; gap: 2px; padding: 14px clamp(16px,4vw,24px) calc(24px + env(safe-area-inset-bottom,0px)); background: #F4F1EB; border-bottom: 1px solid #D8D2C6; transform: translateY(-12px); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .28s ease, opacity .28s ease, visibility .28s ease; box-shadow: 0 30px 60px -24px rgba(22,19,14,.35); }
  .topbar.is-open .topbar__nav { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
  .topbar__link { height: auto; padding: 14px 6px; font-size: 16px; color: #16130E; font-weight: 800; }
  .topbar__link--active { color: var(--tb-accent-deep, #C2492A); }
  .topbar__link--active::after { display: none; }
  .topbar__item { display: flex; flex-direction: column; align-items: stretch; height: auto; }
  /* строка-родитель с подменю = аккордеон-тоггл */
  .topbar__item > .topbar__link { display: flex; align-items: center; justify-content: space-between; }
  .topbar__caret { display: block; width: 20px; height: 20px; flex: none; color: #6B655A; opacity: .8; transition: transform .25s ease; }
  .topbar__item.is-expanded > .topbar__link .topbar__caret { transform: rotate(180deg); }
  /* подменю свёрнуто по умолчанию, раскрывается при .is-expanded */
  .topbar__menu { position: static; left: auto; right: auto; transform: none; width: auto; min-width: 0; max-width: 100%; background: transparent; border: 0; box-shadow: none; padding: 0 0 0 14px; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transition: max-height .28s ease, opacity .22s ease, visibility .28s ease; }
  .topbar__item.is-expanded > .topbar__menu { max-height: 560px; opacity: 1; visibility: visible; pointer-events: auto; padding-bottom: 8px; }
  .topbar__menu a { padding: 10px 10px; font-size: 14px; font-weight: 700; color: #6B655A; white-space: normal; }
  .topbar__menu-all { color: var(--tb-accent-deep, #C2492A) !important; }
  .topbar__burger { display: flex; margin-left: auto; }
  .topbar.is-open .topbar__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .topbar.is-open .topbar__burger span:nth-child(2) { opacity: 0; }
  .topbar.is-open .topbar__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .topbar__cta { display: none; }
  /* тёмные разделы (theme-dark: /tools/ и т.п.): панель в палитре раздела, активный пункт = акцент */
  .theme-dark .topbar__nav { background: #100e1c; border-bottom-color: rgba(255,255,255,.12); box-shadow: 0 30px 60px -24px rgba(0,0,0,.65); }
  .theme-dark .topbar__nav .topbar__link { color: #f4f2fb; }
  .theme-dark .topbar__nav .topbar__link--active { color: var(--tb-accent, #9d5dff); }
  .theme-dark .topbar__caret { color: rgba(244,242,251,.55); }
  .theme-dark .topbar__menu a { color: rgba(244,242,251,.62); }
  .theme-dark .topbar__menu-all { color: var(--tb-accent, #9d5dff) !important; }
  /* Mobile CTA keeps the same family-colour face and white offset as desktop. */
  .topbar__nav-cta { display: inline-flex; min-height:48px; align-items: center; justify-content: center; gap: 10px; margin-top: auto; margin-bottom: 6px; padding: 15px 26px; border-radius: 12px; background:var(--action-face); color:var(--action-ink); font-weight: 800; font-size: 17px; letter-spacing: -.01em; text-decoration: none; border:1px solid var(--action-edge); box-shadow: 6px 6px 0 var(--action-back),7px 7px 0 color-mix(in srgb,var(--tb-accent-deep) 42%,transparent); transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .25s cubic-bezier(.2,.7,.2,1),background .2s ease; }
  .topbar__nav-cta:hover { transform:translate(2px,2px);background:color-mix(in srgb,var(--action-face) 88%,#fff);box-shadow:3px 3px 0 var(--action-back),4px 4px 0 color-mix(in srgb,var(--tb-accent-deep) 42%,transparent); }
  .topbar__nav-cta:active { transform: translate(4px,4px); box-shadow: 1px 1px 0 var(--action-back),2px 2px 0 color-mix(in srgb,var(--tb-accent-deep) 42%,transparent); }
  .topbar__nav-cta:focus-visible { outline:3px solid var(--action-focus);outline-offset:4px; }
  .topbar__nav-cta[aria-disabled="true"] { opacity:.62;cursor:not-allowed;color:var(--action-disabled-ink);background:var(--action-disabled-face);border-color:#a9a199;box-shadow:3px 3px 0 #fff;transform:none;pointer-events:none; }
  .topbar__nav-cta[aria-disabled="true"] svg { animation:none;transform:none; }
  .topbar__nav-cta svg { width: 18px; height: 18px; transition:transform .25s cubic-bezier(.2,.7,.2,1); }
  .topbar__nav-cta:hover svg,.topbar__nav-cta:active svg { animation:none;transform:translateX(4px); }
}
@media (min-width: 1121px) { .topbar__nav-cta { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  .topbar__nav-cta svg { animation:topbarCtaArrow 9s cubic-bezier(.2,.7,.2,1) infinite; }
}

@media (prefers-reduced-motion: reduce) {
  .topbar__cta,
  .topbar__nav-cta,
  .topbar__cta svg,
  .topbar__nav-cta svg { transition:none!important; animation:none!important; }
  .topbar__cta:hover,
  .topbar__nav-cta:hover { transform:none; }
}

/* Mobile menu control follows the portal's 44px minimum action geometry. */
.topbar__burger {
  width: 44px;
  height: 44px;
}