/* css/megamenu.css — мегаменю шапки «Бизнесу / Фид / Студия / Pro+».
   Перенесено из прототипа «Нормальное мегаменю.html» (стили блока «мегаменю „Фид“ и „Студия“»).
   Подключается на всех страницах сайта ПОСЛЕ основных стилей шапки (css/nav.css или собственных стилей страницы).
   Разметка меню — один и тот же фрагмент на всех страницах (между маркерами <!-- mm:start --> и <!-- mm:end -->),
   серверные страницы берут его из lib/megamenu.php. Поведение и перевод RU/EN — js/megamenu.js.
   Цвета: если на странице нет дизайн-токена (--gold, --blue-tint, --radius-lg …), подставляется значение
   по умолчанию через :where(:root) — нулевая специфичность, поэтому значения страницы всегда главнее. */
:where(:root){
  --bg:#F6F7FB; --surface:#FFFFFF; --ink:#14151A; --ink-soft:#5B5F6B; --ink-faint:#9AA0AE; --border:#E7E8F0;
  --ink-muted:#6B7080; --coral-text:#D6304F;
  --coral:#FF4D6D; --teal:#17B0A3; --violet:#7C6CF0; --gold:#F5A623; --blue:#4E8CFF;
  --coral-tint:#FFE6EB; --teal-tint:#DFF6F2; --violet-tint:#EAE7FE; --gold-tint:#FDF0DC; --blue-tint:#E5EFFF;
  --shadow-card:0 12px 30px -18px rgba(20,21,26,0.22); --radius-lg:28px;
}
/* базовый вид контейнера и ссылок — НУЛЕВОЙ специфичности (:where): работает на страницах без собственных
   стилей .nav-link/.nav-links (guide, правовые страницы) и ничего не перебивает там, где они есть */
:where(.nav-mm){display:flex;align-items:center;gap:18px}
:where(.nav-mm .nav-link){font-size:14px;font-weight:600;color:var(--ink-soft);cursor:pointer;text-decoration:none}
:where(.nav-mm .nav-link:hover){color:var(--ink)}
@media (max-width:640px){:where(.nav-mm){flex-wrap:wrap}}
.nav-mega,.nav-mega *{box-sizing:border-box}
.nav-mega a{color:inherit;text-decoration:none}
/* ---- мегаменю «Фид» и «Студия» (из прототипа) ---- */
.nav-link.nav-biz{color:var(--coral-text);font-weight:700}
.nav-link.nav-biz:hover{color:#B8243F}
.nav-link.nav-biz::after{display:none}
.nav-feed-btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:32px 0;margin:-32px 0}
.nav-feed-caret{transition:transform .2s ease}
.nav-mega{display:none;position:absolute;top:100%;right:clamp(20px,4vw,56px);width:min(980px,calc(100vw - 40px));background:var(--surface);border:1px solid var(--border);border-radius:0 0 var(--radius-lg) var(--radius-lg);box-shadow:0 30px 60px -28px rgba(20,21,26,.35);z-index:60}
/* 3 колонки: навигация → пояснение → превью */
.mega-inner{display:grid;grid-template-columns:250px minmax(0,1fr) 280px;gap:0 36px;padding:28px 28px 28px 20px;min-height:360px}
.mega-nav{display:flex;flex-direction:column;gap:2px;padding-right:20px;border-right:1px solid var(--border)}
.mega-h{font:700 11px/1 Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 8px 12px}
.mega-nav .mega-h:not(:first-child){margin-top:20px}
.mega-item{display:flex;gap:12px;align-items:center;padding:9px 12px;border-radius:14px;transition:background .15s ease}
.mega-ico{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--bg);color:var(--ink-soft);transition:background .15s,color .15s}
.mega-ico svg{width:18px;height:18px}
.mega-txt b{display:block;font:600 15px/1.3 Inter,sans-serif;color:var(--ink-soft);transition:color .15s}
.mega-txt small{display:none;font:400 13px/1.4 Inter,sans-serif;color:var(--ink-soft);margin-top:2px}
.mega-item.on,.mega-item:hover,.mega-item:focus-visible{background:var(--bg)}
.mega-item.on .mega-txt b,.mega-item:hover .mega-txt b{color:var(--ink)}
.mega-item.on .mega-ico,.mega-item:hover .mega-ico{background:var(--t);color:var(--c)}
/* центр: заголовок со стрелкой, описание, чипы */
.mega-detail{display:flex;flex-direction:column;min-width:0;padding-top:4px}
.mega-pane{display:none;flex-direction:column;flex:1;min-height:0}
.mega-pane.on{display:flex}
.mega-pane-title{display:inline-flex;align-items:center;gap:10px;font:700 22px/1.25 'Unbounded',sans-serif;color:var(--ink);margin-bottom:14px}
.mega-pane-title svg{width:20px;height:20px;transition:transform .2s}
.mega-pane-title:hover svg{transform:translateX(4px)}
.mega-pane p{margin:0;color:var(--ink-soft);font-size:15px;line-height:1.6;max-width:42ch}
.mega-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:20px}
.mega-chip{font:600 13px Inter,sans-serif;padding:7px 14px;border-radius:99px;background:var(--bg);color:var(--ink);border:1px solid var(--border)}
/* справа: превью (без карусели) */
.mega-visual{position:relative;overflow:hidden;border-radius:20px;align-self:stretch;min-height:300px}
.mp-slide{position:absolute;inset:0;background:linear-gradient(160deg,var(--g1),var(--g2) 60%,var(--g3));opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
.mp-slide.on{opacity:1;visibility:visible}
.mp-slide i{position:absolute;display:block}
.mp-a{width:150px;height:56px;background:var(--c1);opacity:.85;top:60px;left:-16px;transform:rotate(-14deg)}
.mp-b{width:110px;height:110px;background:var(--c2);opacity:.8;top:120px;right:-26px;transform:rotate(18deg)}
.mp-c{width:170px;height:40px;background:var(--c3);opacity:.5;top:210px;left:40px;transform:rotate(-14deg)}
.mp-slide:nth-of-type(2) .mp-a{top:40px;left:auto;right:-20px;transform:rotate(12deg)}
.mp-slide:nth-of-type(2) .mp-b{top:90px;right:auto;left:-30px;transform:rotate(-20deg)}
.mp-slide:nth-of-type(2) .mp-c{top:220px;left:auto;right:30px;transform:rotate(8deg)}
.mp-slide:nth-of-type(3) .mp-a{top:120px;left:10px;transform:rotate(-6deg)}
.mp-slide:nth-of-type(3) .mp-b{top:40px;right:26px;transform:rotate(30deg)}
.mp-slide:nth-of-type(3) .mp-c{top:200px;left:auto;right:-40px;transform:rotate(-22deg)}
.mp-slide:nth-of-type(4) .mp-a{top:50px;left:34px;transform:rotate(10deg)}
.mp-slide:nth-of-type(4) .mp-b{top:170px;right:auto;left:-34px;transform:rotate(25deg)}
.mp-slide:nth-of-type(4) .mp-c{top:100px;left:auto;right:-50px;transform:rotate(-10deg)}
.mp-slide:nth-of-type(5) .mp-a{top:150px;left:auto;right:-24px;transform:rotate(-18deg)}
.mp-slide:nth-of-type(5) .mp-b{top:50px;right:auto;left:22px;transform:rotate(-8deg)}
.mp-slide:nth-of-type(5) .mp-c{top:230px;left:-20px;transform:rotate(14deg)}
.mp-slide:nth-of-type(6) .mp-a{top:190px;left:20px;transform:rotate(6deg)}
.mp-slide:nth-of-type(6) .mp-b{top:50px;right:-10px;transform:rotate(-24deg)}
.mp-slide:nth-of-type(6) .mp-c{top:90px;left:-50px;transform:rotate(-30deg)}
@media (hover:hover) and (min-width:641px){
  .nav-feed:hover .nav-mega,.nav-feed:focus-within .nav-mega{display:block}
  .nav-feed:hover .nav-feed-caret{transform:rotate(180deg)}
}
@media (min-width:641px) and (max-width:900px){
  .mega-inner{grid-template-columns:230px minmax(0,1fr);min-height:0}
  .mega-visual{display:none}
}
@media (max-width:640px){
  .nav-feed-btn{padding:6px 0;margin:0;width:100%;justify-content:space-between}
  .nav-feed.open .nav-feed-caret{transform:rotate(180deg)}
  .nav-feed{width:100%}
  .nav-mega{position:static;width:auto;border:0;box-shadow:none;border-radius:0}
  .nav-feed.open .nav-mega{display:block}
  .mega-inner{display:block;padding:6px 0 4px;min-height:0}
  .mega-detail,.mega-visual{display:none}
  .mega-nav{border:0;padding:0}
  .mega-h{margin:10px 0 6px 0}
  .mega-item{padding:8px 0}
  .mega-item.on,.mega-item:hover{background:none}
  .mega-txt b{color:var(--ink)}
  .mega-txt small{display:block}
  .nav-link.nav-biz{align-self:flex-start;margin-top:6px}
}
/* ---- чипы тарифов в блоке «Студия» (в прототипе — из стилей страницы шаблонов) ---- */
.mega-chips .plan-free{background:var(--teal-tint);color:#0b7d73}
.mega-chips .plan-pro{background:var(--coral-tint);color:#D6304F}
.mega-chips .plan-super{background:var(--gold-tint);color:#9a6406}
/* ---- чипы («Художники…», «Free · Демо / Pro / Super» и т.д.): ОДИН размер везде ----
   В прототипе тарифные чипы были мельче обычных (11px / 4px 10px против 13px / 7px 14px). Здесь у всех чипов
   одинаковые размеры в px: не зависят ни от унаследованного размера шрифта страницы, ни от её собственных стилей. */
.mega-chips .mega-chip,.mega-chips .plan{display:inline-flex;align-items:center;box-sizing:border-box;margin:0;font-family:Inter,sans-serif;font-size:13px;font-weight:600;line-height:18px;letter-spacing:0;text-transform:none;padding:7px 14px;border-radius:99px;border:1px solid var(--border);white-space:nowrap;max-width:100%}
.mega-chips .plan-free{border-color:var(--teal-tint)}
.mega-chips .plan-pro{border-color:var(--coral-tint)}
.mega-chips .plan-super{border-color:var(--gold-tint)}
/* ---- баннеры: свои картинки из папки img/menu/ ----
   Картинку подставляет js/megamenu.js (список файлов отдаёт api/menu-banners.php). Нет файла — остаётся
   исходный градиент с цветными фигурами; есть файл — фигуры скрываются, картинка заполняет весь баннер. */
.mp-slide .mp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mp-slide.has-img i{display:none}
/* ---- подписи секций в левой колонке («Работы и авторы», «Журнал FolioApp», «Студия», «Шаблоны») ----
   Шрифт — как у надписи в hero («Твои проекты. Твои клиенты. Твоя студия», .hero-eyebrow):
   JetBrains Mono 12px, разрядка .12em, заглавные. Цвет и отступы остаются прежними.
   Шрифт JetBrains Mono подключён на всех страницах сайта, где есть меню. */
.mega-h{font:400 12px/1 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
/* ---- доработки при переносе ---- */
/* пункт «Pro+» в активном состоянии на своей странице */
.nav-mm .nav-link.nav-pro.active{color:var(--ink)}
/* после клика по пункту меню блок закрывается, пока курсор не уйдёт (SPA остаётся на месте, hover иначе держит меню) */
.nav-feed.mm-suppress .nav-mega{display:none !important}
/* устройства без наведения шире 640px (планшеты): меню открывается по касанию кнопки */
@media (min-width:641px){
  .nav-feed.open .nav-mega{display:block}
  .nav-feed.open .nav-feed-caret{transform:rotate(180deg)}
}