/* ============ SHARED SITE CHROME (nav + footer) ============
   Used by every marketing/content page (index.html, gujarat-awards.html, …).
   Not used by the nomination form flow. Markup for these two components
   lives in partials/nav.html and partials/footer.html, injected at runtime
   by assets/site-chrome.js — this file styles that injected markup. */

/* ---- Floating menu button ---- */
.floating-menu-btn{
  position:fixed;
  top:20px;
  right:20px;
  z-index:220;
  display:flex;
  align-items:center;
  gap:9px;
  height:48px;
  padding:0 20px 0 18px;
  border-radius:999px;
  border:1px solid var(--color-grid-stroke);
  background:rgba(var(--color-scrim-rgb),0.85);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  color:var(--color-text-primary);
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.85rem;
  letter-spacing:0.02em;
  box-shadow:0 8px 22px -8px rgba(20,14,4,0.35);
  transition:border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.floating-menu-btn:hover{
  border-color:var(--color-accent-light);
  transform:translateY(-1px);
  box-shadow:0 10px 26px -6px rgba(184,134,11,0.45);
}
.floating-menu-btn svg{width:20px;height:20px;flex-shrink:0;}
@media (max-width:480px){
  .floating-menu-btn{top:14px; right:14px; height:42px; padding:0 16px 0 14px; gap:7px; font-size:0.8rem;}
  .floating-menu-btn svg{width:18px;height:18px;}
}

/* ---- Off-canvas nav drawer ---- */
.nav-menu{
  position:fixed;
  top:0; right:0;
  height:100vh;
  width:min(320px,80vw);
  background:var(--color-bg-alt);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:26px;
  padding:100px 32px 32px;
  transform:translateX(100%);
  transition:transform 0.35s ease;
  border-left:1px solid var(--color-grid-stroke);
  z-index:230;
}
.nav-menu.is-open{transform:translateX(0);}
.nav-menu a{
  font-size:0.85rem;
  font-weight:500;
  text-decoration:none;
  color:var(--color-text-soft);
  position:relative;
  padding:4px 0;
}
.nav-menu a::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:0%;
  height:1px;
  background:var(--color-accent-light);
  transition:width 0.3s ease;
}
.nav-menu a:hover::after{width:100%;}
.nav-menu .btn{padding:10px 22px; font-size:0.8rem;}
.nav-close{
  display:flex;
  position:absolute;
  top:22px;
  right:24px;
  background:none;
  border:1px solid var(--color-grid-stroke);
  color:var(--color-text-primary);
  width:38px; height:38px;
  border-radius:50%;
  align-items:center;
  justify-content:center;
}
.nav-close svg{width:18px;height:18px;}
.nav-close:hover{border-color:var(--color-accent-light); color:var(--color-accent-light);}

.nav-overlay{
  content:'';
  position:fixed;
  inset:0;
  background:rgba(13,9,2,0.55);
  z-index:225;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s ease;
}
.nav-overlay.is-visible{opacity:1; pointer-events:auto;}

/* ---- Footer ---- */
.site-footer{background:var(--color-bg-alt); padding:70px 0 30px; border-top:1px solid var(--color-grid-stroke);}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
}
.footer-brand .logo-mark{font-size:1.4rem;}
.footer-brand p{margin-top:16px; font-size:0.85rem; color:var(--color-text-muted); max-width:280px;}
.footer-col h4{font-size:0.75rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--color-accent-light); margin-bottom:16px;}
.footer-col a{display:block; font-size:0.88rem; color:var(--color-text-muted); text-decoration:none; padding:5px 0;}
.footer-col a:hover{color:var(--color-text-primary);}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  margin-top:60px;
  padding-top:26px;
  border-top:1px solid var(--color-grid-stroke);
  font-size:0.78rem;
  color:var(--color-text-muted);
}
.footer-social{display:flex; gap:14px;}
.footer-social a{
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--color-grid-stroke);
  display:flex;align-items:center;justify-content:center;
  color:var(--color-text-muted);
  transition:border-color 0.25s ease, color 0.25s ease;
}
.footer-social a:hover{border-color:var(--color-accent-light); color:var(--color-accent-light);}
.footer-social svg{width:16px;height:16px;}

@media (max-width:820px){
  .footer-grid{grid-template-columns:1fr 1fr; gap:34px;}
}
@media (max-width:520px){
  .footer-grid{grid-template-columns:1fr;}
}
