/* Верхнє меню з випадаючими панелями. Підключається після інлайнових <style>,
   тому перевизначає ті правила .nav-links, що були в сторінках раніше.
   Прототип і тести: artifacts/mockup-nav.html, artifacts/mockup-nav.test.js */

.nav-links { display:flex; gap:.35rem; list-style:none; justify-content:center; align-items:center; }
.nav-links > li { position:static; }
.nav-item { display:flex; align-items:center; gap:.3rem; background:none; border:none; cursor:pointer; font-family:inherit;
            text-decoration:none; color:var(--grey); font-size:.875rem; font-weight:500; padding:.5rem .7rem; border-radius:8px;
            transition:background .18s,color .18s; }
.nav-item:hover, .nav-links > li.open .nav-item { color:var(--navy); background:var(--icon-bg); }
.nav-item svg { transition:transform .18s; position:relative; top:1.5px; }
.nav-links > li.open .nav-item svg { transform:rotate(180deg); }
.lang-dd-btn svg { position:relative; top:1.5px; }

/* ---------- панель ---------- */
.mega { position:absolute; top:calc(100% + 9px); left:50%; transform:translateX(-50%) translateY(-6px);
        background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:0 18px 50px rgba(26,39,68,.13);
        padding:1.5rem; opacity:0; visibility:hidden; transition:opacity .18s,transform .18s,visibility .18s; z-index:120; }
.nav-links > li.open .mega { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.mega::before { content:''; position:absolute; top:-10px; left:0; right:0; height:10px; }
.mega-cols { display:flex; gap:1.6rem; }
.mega-col { width:238px; flex-shrink:0; }
.mega-col + .mega-col { border-left:1px solid var(--border); padding-left:1.6rem; }
.mega-col h4 { height:14px; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
               color:#94a3b8; margin-bottom:.85rem; }

.mega-link { display:flex; gap:.7rem; align-items:flex-start; text-decoration:none; padding:.5rem .6rem; margin:0 -.6rem;
             border-radius:10px; transition:background .15s; }
.mega-link:hover { background:var(--light); }
.mega-ico { width:32px; height:32px; border-radius:9px; background:var(--icon-bg); display:flex; align-items:center;
            justify-content:center; flex-shrink:0; }
.mega-ico svg { width:17px; height:17px; fill:none; stroke:var(--navy); stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.mega-ico.indigo  { background:#eef2ff; } .mega-ico.indigo svg  { stroke:#4338ca; }
.mega-ico.sky     { background:#f0f9ff; } .mega-ico.sky svg     { stroke:#0369a1; }
.mega-ico.emerald { background:#ecfdf5; } .mega-ico.emerald svg { stroke:#047857; }
.mega-ico.violet  { background:#f5f3ff; } .mega-ico.violet svg  { stroke:#6d28d9; }
.mega-ico.amber   { background:#fffbeb; } .mega-ico.amber svg   { stroke:#b45309; }
.mega-ico.red     { background:#fef2f2; } .mega-ico.red svg     { stroke:#b91c1c; }
.mega-ico.teal    { background:#f0fdfa; } .mega-ico.teal svg    { stroke:#0f766e; }
.mega-ico.green   { background:#f0fdf4; } .mega-ico.green svg   { stroke:#15803d; }
.mega-ico.fuchsia { background:#fdf4ff; } .mega-ico.fuchsia svg { stroke:#a21caf; }
.mega-ico.cyan    { background:#ecfeff; } .mega-ico.cyan svg    { stroke:#0e7490; }

.mega-txt strong { display:block; font-size:.875rem; font-weight:600; color:var(--navy); line-height:1.3; }
.mega-txt span { display:block; font-size:.75rem; color:var(--grey); margin-top:.12rem; line-height:1.35; }

.mega-plain { display:flex; justify-content:space-between; align-items:center; gap:1rem; text-decoration:none;
              font-size:.85rem; font-weight:500; color:var(--navy); padding:.42rem .6rem; margin:0 -.6rem;
              border-radius:8px; transition:background .15s; }
.mega-plain:hover { background:var(--light); }
.mega-plain .cat { display:flex; align-items:center; gap:.55rem; }
.mega-plain .dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; background:#cbd5e1; }
/* лічильник статей: однакові плашки в один стовпчик, колір розділу */
.mega-plain .cnt { display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:21px;
                   padding:0 .35rem; border-radius:7px; box-sizing:border-box;
                   background:transparent; border:1px solid #cbd5e1; color:#64748b;
                   font-size:.72rem; font-weight:700; font-variant-numeric:tabular-nums; }

/* кольори тегів блогу — ті самі, що в blog/index.html */
.mega-plain.tag-legalization .dot { background:#16a34a; } .mega-plain.tag-legalization:hover { background:#f0fdf4; }
.mega-plain.tag-exam-prep .dot    { background:#3b82f6; } .mega-plain.tag-exam-prep:hover    { background:#eff6ff; }
.mega-plain.tag-documents .dot    { background:#8b5cf6; } .mega-plain.tag-documents:hover    { background:#f5f3ff; }
.mega-plain.tag-holidays .dot     { background:#06b6d4; } .mega-plain.tag-holidays:hover     { background:#ecfeff; }
.mega-plain.tag-history .dot      { background:#e11d48; } .mega-plain.tag-history:hover      { background:#fff1f2; }
.mega-plain.tag-culture .dot      { background:#d946ef; } .mega-plain.tag-culture:hover      { background:#fdf4ff; }
.mega-plain.tag-stories .dot      { background:#f59e0b; } .mega-plain.tag-stories:hover      { background:#fffbeb; }

/* плашки лічильників — та сама палітра, що в .article-tag блогу */
.mega-plain.tag-legalization .cnt { border-color:#15803d; color:#15803d; }
.mega-plain.tag-exam-prep .cnt { border-color:#1d4ed8; color:#1d4ed8; }
.mega-plain.tag-documents .cnt { border-color:#7c3aed; color:#7c3aed; }
.mega-plain.tag-holidays .cnt { border-color:#0e7490; color:#0e7490; }
.mega-plain.tag-history .cnt { border-color:#be123c; color:#be123c; }
.mega-plain.tag-culture .cnt { border-color:#c026d3; color:#c026d3; }
.mega-plain.tag-stories .cnt { border-color:#b45309; color:#b45309; }

/* дерево вкладених пунктів */
.subtree { position:relative; margin-top:.1rem; }
.subtree .mega-plain { position:relative; margin:0 0 0 32px; padding:.44rem .6rem .44rem 8px; }
.subtree .mega-plain::before { content:''; position:absolute; left:-16px; top:0; bottom:50%; width:15px;
                               border-left:1px solid #dbe2ec; border-bottom:1px solid #dbe2ec; border-bottom-left-radius:9px; }
.subtree .mega-all { margin-left:40px; }
.mega-all { display:inline-block; margin-top:.7rem; font-size:.8rem; font-weight:600; color:var(--red); text-decoration:none; }
.mega-all:hover { color:var(--red-h); }
/* другорядний вхід у суміжний розділ: помітний, але не сперечається з основним */
.mega-all-sec { display:block; margin-top:.3rem; color:var(--grey); font-weight:500; }
.mega-all-sec:hover { color:var(--navy); }
.mega-promo .promo-sec { display:block; margin-top:.5rem; font-size:.78rem; color:var(--grey); font-weight:500; }
.mega-promo .promo-sec:hover { color:var(--navy); }

/* ---------- промо-картка ---------- */
.mega-promo { position:relative; overflow:hidden; width:252px; flex-shrink:0; align-self:flex-start; border-radius:14px;
              padding:1.15rem; display:flex; flex-direction:column; border:1px solid rgba(26,39,68,.07);
              background:linear-gradient(158deg,#fbfcff 0%,#f1f4fb 100%); }
.mega-promo::after { content:''; position:absolute; width:150px; height:150px; right:-55px; top:-55px; border-radius:50%;
                     background:radial-gradient(circle,rgba(99,102,241,.14),transparent 68%); pointer-events:none; }
.mega-promo.legal::after { background:radial-gradient(circle,rgba(13,148,136,.16),transparent 68%); }
.mega-promo.blog::after  { background:radial-gradient(circle,rgba(229,57,53,.13),transparent 68%); }
.mega-promo .promo-top { position:relative; z-index:1; }
.mega-promo .promo-bottom { position:relative; z-index:1; margin-top:auto; padding-top:.9rem; }
.mega-promo h5 { font-size:.9rem; font-weight:700; margin-bottom:.35rem; }
.mega-promo p { font-size:.78rem; color:var(--grey); line-height:1.45; }
.mega-promo a { display:inline-flex; align-items:center; gap:.3rem; font-size:.8rem; font-weight:600;
                color:var(--red); text-decoration:none; }

.ver-tag { display:inline-flex; align-items:center; gap:.3rem; background:#eef2ff; color:#4338ca; font-size:.7rem;
           font-weight:700; border-radius:20px; padding:.2rem .55rem; margin-bottom:.6rem; }
.ver-tag i { width:5px; height:5px; border-radius:50%; background:#4338ca; font-style:normal; }
.rel-list { list-style:none; margin:.75rem 0 0; padding:0; }
.rel-list li { display:flex; gap:.5rem; align-items:flex-start; font-size:.75rem; color:var(--navy); line-height:1.4; padding:.3rem 0; }
.rel-list li svg { width:13px; height:13px; flex-shrink:0; margin-top:1px; fill:none; stroke:#15803d; stroke-width:2.4;
                   stroke-linecap:round; stroke-linejoin:round; }
.rel-prev { margin-top:.7rem; padding-top:.6rem; border-top:1px dashed rgba(26,39,68,.13); font-size:.68rem; color:#94a3b8; }

.blog-total { display:flex; align-items:baseline; gap:.35rem; }
.blog-total b { font-size:1.6rem; font-weight:800; letter-spacing:-.02em; line-height:1; }
.blog-total span { font-size:.78rem; color:var(--grey); }
.bar-row { display:flex; align-items:center; gap:.5rem; margin-top:.42rem; }
.bar-name { font-size:.68rem; color:var(--grey); width:74px; flex-shrink:0; }
.bar-track { flex:1; height:6px; border-radius:6px; background:rgba(26,39,68,.055); overflow:hidden; }
.bar-fill { display:block; height:100%; border-radius:6px; opacity:.55; }
.bar-num { font-size:.66rem; font-weight:600; color:#94a3b8; width:14px; text-align:right; font-variant-numeric:tabular-nums; }

/* схема шляхів */
.promo-map { display:block; width:100%; margin-top:.85rem; border:1px solid var(--border); border-radius:10px;
             background:#fff; padding:.55rem .4rem; }
.promo-map .mp-line path { stroke:#b6c2d4; stroke-width:1.2; fill:none; }
.promo-map .mp-q { fill:#fff; stroke:var(--border); stroke-width:1; }
.promo-map .mp-qt { fill:var(--navy); font-size:9.5px; font-weight:600; text-anchor:middle; }
.promo-map .mp-tag { fill:#94a3b8; font-size:7.5px; text-anchor:middle; }
.promo-map .mp-t { font-size:8px; font-weight:600; text-anchor:middle; }
.promo-map .mp-b { stroke:rgba(26,39,68,.10); stroke-width:.8; }
.promo-map .mp-b.red     { fill:#fef2f2; } .promo-map .mp-t.red     { fill:#b91c1c; }
.promo-map .mp-b.fuchsia { fill:#fdf4ff; } .promo-map .mp-t.fuchsia { fill:#a21caf; }
.promo-map .mp-b.amber   { fill:#fffbeb; } .promo-map .mp-t.amber   { fill:#b45309; }
.promo-map .mp-b.teal    { fill:#f0fdfa; } .promo-map .mp-t.teal    { fill:#0f766e; }

/* ---------- мобільна шухляда: акордеон ---------- */
.nav-drawer .acc-head { display:flex; justify-content:space-between; align-items:center; width:100%; background:none;
                        border:none; font-family:inherit; font-size:.95rem; font-weight:600; color:var(--navy);
                        padding:.9rem 0; cursor:pointer; border-bottom:1px solid var(--border); }
.nav-drawer .acc-head svg { transition:transform .2s; }
.nav-drawer .acc.open .acc-head svg { transform:rotate(180deg); }
.nav-drawer .acc-body { max-height:0; overflow:hidden; transition:max-height .25s ease; }
.nav-drawer .acc.open .acc-body { max-height:700px; }
.nav-drawer .acc-body a { display:block; font-size:.875rem; color:var(--grey); text-decoration:none;
                          padding:.6rem 0 .6rem 1rem; border-bottom:1px solid #f1f5f9; }
.nav-drawer .drawer-flat { display:block; font-size:.95rem; font-weight:600; color:var(--navy); text-decoration:none;
                           padding:.9rem 0; border-bottom:1px solid var(--border); }

@media (max-width:1024px) {
  .nav-links { display:none; }
  .mega { display:none; }
}