/* ============ NAVBAR + FOOTER + BRAND LOGO ============
   Ported from the Angular navbar/footer/brand-logo components. */

/* ---------- Brand logo ---------- */
.logo-mark{
  width:34px; height:34px; border-radius:10px; background:var(--red-500);
  display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0;
}
.logo-mark .ring{
  position:absolute; inset:-6px; border-radius:14px; border:1.5px solid var(--red-500);
  animation:pulseRing 2.6s var(--ease) infinite;
}
@keyframes pulseRing{
  0%{ transform:scale(0.85); opacity:0.9; }
  70%{ transform:scale(1.35); opacity:0; }
  100%{ opacity:0; }
}
.logo{ display:flex; align-items:center; gap:10px; font-family:'Manrope'; font-weight:800; font-size:20px; }

/* ---------- Navbar ---------- */
body{ padding-top:0; }
main{ display:block; }
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:22px 0; transition:all .35s var(--ease);
}
.navbar.solid{
  background:rgba(15,17,21,0.85); backdrop-filter:blur(14px);
  padding:14px 0; border-bottom:1px solid var(--border-muted);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; }
.nav-links{ display:flex; align-items:center; gap:34px; font-size:15px; font-weight:500; }
.nav-links a{ color:var(--gray-200); position:relative; padding:4px 0; }
.nav-links a:hover{ color:#fff; }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--red-500);
  transition:width .25s var(--ease);
}
.nav-links a:hover::after{ width:100%; }
.nav-actions{ display:flex; align-items:center; gap:16px; }
.nav-toggle{ display:none; background:none; border:none; color:#fff; }

@media (max-width:960px){
  .nav-links{ display:none; }
  .nav-actions .btn-primary{ display:none; }
  .nav-toggle{ display:flex; }
}

.mobile-drawer{
  position:fixed; top:0; right:0; height:100vh; width:min(320px,84vw);
  background:var(--surface-800); z-index:1200; padding:28px 24px;
  transform:translateX(100%); transition:transform .4s var(--ease);
  border-left:1px solid var(--border-muted);
  display:flex; flex-direction:column; gap:28px;
}
.mobile-drawer.open{ transform:translateX(0); }
.drawer-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:1100;
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
}
.drawer-overlay.open{ opacity:1; pointer-events:auto; }
.drawer-links{ display:flex; flex-direction:column; gap:6px; }
.drawer-links a{ padding:14px 4px; font-size:17px; font-weight:600; border-bottom:1px solid var(--border-muted); }
.drawer-close{ align-self:flex-end; background:none; border:none; color:#fff; }

/* ---------- Account / sign-in ---------- */
.sign-in-link{
  background:none; border:none; color:var(--gray-200); font-size:14px; font-weight:600; padding:8px 4px;
}
.sign-in-link:hover{ color:var(--red-500); }

.account-menu{ position:relative; }
.account-trigger{
  display:flex; align-items:center; gap:8px; background:none; border:none; color:var(--gray-200);
  font-size:14px; font-weight:600; padding:6px 8px; border-radius:10px;
}
.account-trigger:hover{ background:rgba(255,255,255,0.06); }
.account-avatar{
  width:28px; height:28px; border-radius:50%; background:var(--red-500); color:#fff; display:flex;
  align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0;
}
.account-name{ max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media(max-width:1080px){ .account-name{ display:none; } }

.account-dropdown{
  position:absolute; top:calc(100% + 10px); right:0; min-width:200px; background:var(--surface-800);
  border:1px solid var(--border-muted); border-radius:12px; padding:14px; box-shadow:var(--shadow-card);
  display:none;
}
.account-dropdown.open{ display:block; }
.account-email{ font-size:13px; color:var(--gray-400); margin-bottom:10px; word-break:break-all; }
.verify-notice{
  display:flex; flex-direction:column; gap:6px; font-size:12px; color:#fbbf24;
  background:rgba(251,191,36,0.1); border:1px solid rgba(251,191,36,0.3); border-radius:8px;
  padding:10px; margin-bottom:10px;
}
.verify-notice .link-toggle{
  align-self:flex-start; font-size:12px; color:#fbbf24; border:none; background:none; padding:0;
  border-bottom:1px dashed #fbbf24;
}
.verify-notice .link-toggle:hover{ color:var(--red-500); border-color:var(--red-500); }
.account-link{
  display:block; font-size:13px; color:var(--gray-200); padding:8px 0; border-bottom:1px solid var(--border-muted);
}
.account-link:hover{ color:var(--red-500); }
.account-signout{
  width:100%; height:38px; border-radius:10px; border:1px solid var(--border-muted); background:transparent;
  color:var(--gray-200); font-size:13px; font-weight:600; margin-top:10px;
}
.account-signout:hover{ border-color:var(--red-500); color:var(--red-500); }

.drawer-account{
  font-size:14px; color:var(--gray-400); display:flex; flex-direction:column; gap:8px; padding:10px 0;
  border-top:1px solid var(--border-muted); border-bottom:1px solid var(--border-muted);
}

/* ---------- Footer ---------- */
footer.site-footer{ background:var(--bg-900); border-top:1px solid var(--border-muted); padding:80px 0 30px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:60px; }
@media(max-width:860px){ .footer-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{ font-size:15px; margin-bottom:20px; }
.footer-grid ul{ list-style:none; display:flex; flex-direction:column; gap:12px; margin:0; padding:0; }
.footer-grid a{ color:var(--gray-400); font-size:14px; }
.footer-grid a:hover{ color:var(--red-500); }
.footer-brand p{ color:var(--gray-400); font-size:14px; margin:18px 0 20px; max-width:280px; }
.social-row{ display:flex; gap:12px; }
.social-row a{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--border-muted); display:flex;
  align-items:center; justify-content:center; color:var(--gray-300);
}
.social-row a:hover{ border-color:var(--red-500); color:var(--red-500); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:26px; border-top:1px solid var(--border-muted); flex-wrap:wrap; gap:12px; font-size:13px; color:var(--gray-600); }
.footer-bottom .legal-links{ display:flex; gap:22px; }