/* Site chrome of napi.bg: the header with its menus, the account menu and the footer. Loaded after
   css/tokens.css by the public site (Pages/Shared/_Layout.cshtml, before css/site.css) and by the online
   forms (Views/Shared/_LayoutCreate.cshtml, before css/site-chrome.css). */

/* ---------- 4. Хедър ---------- */
.header{
  position:sticky; top:0; z-index:100;
  background:transparent;
  padding:14px 16px 0;
  transition:padding .25s ease;
}
.header-inner{
  display:flex; align-items:center; height:64px; gap:22px;
  background:color-mix(in srgb,var(--bg) 80%,transparent);
  backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid var(--border);
  border-radius:999px;
  box-shadow:0 10px 30px -14px rgba(20,30,45,.20), 0 1px 2px rgba(20,30,45,.05);
  transition:height .22s ease, box-shadow .22s ease, background .22s ease, border-radius .22s ease;
}
.header.scrolled{padding-top:8px}
.header.scrolled .header-inner{
  height:54px;
  box-shadow:0 16px 36px -16px rgba(20,30,45,.30), 0 1px 2px rgba(20,30,45,.06);
  background:color-mix(in srgb,var(--bg) 94%,transparent);
}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none!important; transition:transform .18s ease}
.brand:hover{transform:translateY(-1px)}
.brand-logo{display:block; object-fit:contain; border-radius:10px}
.brand-name{font:800 1.16rem/1 var(--font-display); color:var(--text); letter-spacing:.01em}
.brand-name small{display:block; font:500 .64rem/1.3 var(--font-body); color:var(--muted); letter-spacing:.04em; margin-top:2px}
.site-nav{display:flex; align-items:center; gap:2px; margin-left:8px}
.site-nav > a, .nav-drop > button{
  position:relative;
  font:600 .89rem/1 var(--font-display); color:var(--text);
  padding:.62em 1em; border-radius:999px; background:none; border:0; cursor:pointer;
  text-decoration:none!important; display:inline-flex; align-items:center; gap:.4em;
  transition:background .16s ease, color .16s ease;
}
.site-nav > a:hover, .nav-drop > button:hover{background:color-mix(in srgb,var(--blue) 8%,transparent); color:var(--blue)}
.site-nav > a[aria-current="page"]{color:var(--blue); background:color-mix(in srgb,var(--blue) 10%,transparent)}
.nav-drop{position:relative}
.nav-drop .caret{transition:transform .15s}
.nav-drop.open .caret{transform:rotate(180deg)}
.site-dropdown{
  position:absolute; left:0; top:calc(100% + 14px); min-width:330px;
  background:var(--card); border:1px solid var(--border); border-radius:20px;
  box-shadow:0 20px 44px -16px rgba(20,30,45,.28); padding:10px; display:none;
}
.nav-drop.open .site-dropdown{display:block}
.site-dropdown a{
  display:flex; gap:12px; align-items:flex-start; padding:11px 12px; border-radius:14px;
  text-decoration:none!important; color:var(--text);
}
.site-dropdown a:hover{background:var(--bg-soft)}
.site-dropdown a > span:last-child{line-height:1.3}
.site-dropdown .dd-ico, .next-link .dd-ico{flex:0 0 34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--bg-tint); color:var(--green-deep)}
.site-dropdown .dd-t, .next-link .dd-t{font:600 .92rem/1.25 var(--font-display)}
.site-dropdown .dd-d, .next-link .dd-d{font-size:.8rem; color:var(--muted); line-height:1.4}
.site-dropdown .dd-sep{border-top:1px solid var(--border); margin:6px 8px}
.header-cta{margin-left:auto; display:flex; align-items:center; gap:8px}
.header-cta-group{
  display:flex; align-items:center; gap:2px; padding:3px;
  background:var(--bg-soft); border-radius:999px; border:1px solid var(--border);
}
.header-cta-group .btn{border-radius:999px!important}
.header-cta-group .btn-outline{border-color:transparent; background:transparent}
.header-cta-group .btn-outline:hover{background:var(--card); border-color:transparent}
.burger{display:none; width:40px; height:40px; border:1.5px solid var(--border-strong); border-radius:50%; background:none; color:var(--text); cursor:pointer; place-items:center}

/* Мобилно меню */
@media (max-width:980px){
  .header-inner{position:relative}
  .site-nav{
    display:none; position:absolute; left:0; right:0; top:calc(100% + 10px);
    max-height:calc(100dvh - 110px); overflow-y:auto; overscroll-behavior:contain;
    background:var(--bg); border:1px solid var(--border); border-radius:20px;
    flex-direction:column; align-items:stretch; padding:14px 16px 18px; gap:2px;
    box-shadow:0 20px 44px -16px rgba(20,30,45,.28);
  }
  .site-nav.open{display:flex}
  .site-nav > a, .nav-drop > button{width:100%; justify-content:flex-start; padding:.9em .8em}
  .site-dropdown{position:static; min-width:0; box-shadow:none; border:0; background:var(--bg-soft); margin:4px 0 8px}
  body.nav-open .header{z-index:170}
  body.nav-open::after{content:""; position:fixed; inset:0; z-index:160; background:rgba(20,30,45,.35)}
  .burger{display:grid}
  .header-cta .btn{display:none}
  .header-cta .btn.keep{display:inline-flex}
  .header-cta-group{display:none}
}

/* ---------- Header: account menu for a signed-in user ---------- */
.account-drop > button{border:1.5px solid var(--border-strong)}
.account-drop .site-dropdown{left:auto; right:0; min-width:310px; max-height:calc(100vh - 110px); overflow:auto}
.site-dropdown .dd-user{padding:6px 12px 10px; margin-bottom:6px; border-bottom:1px solid var(--border);
  font-size:.8rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dd-form{margin:0}
.dd-btn{display:flex; gap:12px; align-items:center; width:100%; padding:11px 12px; border-radius:14px;
  border:0; background:none; color:var(--text); cursor:pointer; text-align:left; font:inherit}
.dd-btn:hover{background:var(--bg-soft)}
.nav-mobile-only{display:none}
@media (max-width:980px){
  .account-drop{display:none}
  .nav-mobile-only{display:flex; flex-direction:column; gap:2px; margin-top:8px; padding-top:10px; border-top:1px solid var(--border)}
  .nav-mobile-only > .btn{justify-content:center; margin:3px 0}
  .nav-account-mobile a{display:flex; gap:12px; align-items:center; padding:.7em .8em; border-radius:14px; color:var(--text); text-decoration:none!important}
  .nav-account-mobile a:hover, .nav-account-mobile .dd-btn:hover{background:var(--bg-soft)}
  .nav-account-mobile .dd-btn{padding:.7em .8em}
  .nav-account-mobile .dd-ico{flex:0 0 30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--bg-tint); color:var(--green-deep)}
  .nav-account-mobile .dd-t{font:600 .92rem/1.25 var(--font-display)}
  .nav-account-mobile .dd-d, .nav-account-mobile br{display:none}
  .nav-account-mobile .dd-sep{border-top:1px solid var(--border); margin:6px 8px}
}

/* ---------- 11а. Footer ---------- */
.footer{background:var(--blue-deep); color:#C6D4E2}
.footer a{color:#C6D4E2}
.footer a:hover{color:#fff}
.footer .footer-grid{display:grid; grid-template-columns:1.2fr .9fr .9fr 1fr 1fr; gap:26px; padding-top:56px; padding-bottom:40px}
@media (max-width:1200px){.footer .footer-grid{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:900px){.footer .footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer .footer-grid{grid-template-columns:1fr}}

.footer-community{
  display:flex; flex-direction:column; gap:10px; text-decoration:none!important;
}
.fc-top{display:flex; align-items:center; gap:10px}
.fc-thumb{
  flex:0 0 auto; width:44px; height:44px; border-radius:8px; object-fit:cover;
  display:block;
}
.fc-info{display:flex; flex-direction:column; gap:2px; min-width:0}
.fc-info b{font:700 .84rem/1.3 var(--font-display); color:#fff}
.fc-sub{font-size:.76rem; line-height:1.35; color:#9FB2C6}
.fc-cta{font:600 .8rem/1 var(--font-display); color:#C6D4E2}
.footer-community:hover .fc-cta{color:#fff; text-decoration:underline}
.footer-community + .footer-community{margin-top:22px}
.fc-yt{display:grid; place-items:center; background:#FF0000; color:#fff}
.fc-contact{display:grid; place-items:center; background:rgba(255,255,255,.14); color:#fff}
.footer h4{color:#fff; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px}
.footer ul{list-style:none; padding:0; margin:0; display:grid; gap:9px; font-size:.92rem}
.footer .f-brand{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.footer .f-brand b{color:#fff; font:800 1.05rem/1 var(--font-display)}
.footer p{font-size:.87rem; color:#9FB2C6}
.footer-legal{border-top:1px solid rgba(255,255,255,.12); padding:22px 0 26px; font-size:.8rem; color:#8DA1B6}
.footer-legal .wrap{display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:space-between}
.site-note{max-width:760px; margin:0 auto; padding:26px 16px 30px; text-align:center; color:var(--muted); font-size:.82rem; line-height:1.5}