/* ============================================================
   VT Seva — SHARED HEADER/FOOTER BASE STYLES
   For lightweight pages that don't carry the full design-system
   inline stylesheet. Link this BEFORE theme.css (theme.css adds the
   floating-pill polish on top). Relies on the :root design tokens
   (--blue, --navy, --orange-cta, --slate-*, --r, --sh...) defined
   in the page's own <style>.
   ============================================================ */

/* buttons (header Donate + See Submissions) */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:Poppins;font-weight:600;border-radius:999px;padding:13px 24px;font-size:14.5px;text-decoration:none;cursor:pointer;border:none;transition:transform .22s,box-shadow .22s,background .22s}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.btn-orange{background:var(--orange-cta);color:#fff;box-shadow:0 8px 20px rgba(194,100,26,.3)}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 8px 20px rgba(29,76,158,.28)}
.btn-ghost{background:#fff;color:var(--blue);border:2px solid var(--blue-100)}
.btn-ghost:hover{background:var(--blue-50)}
.btn-sm{padding:10px 18px;font-size:13.5px}
.btn svg{width:17px;height:17px;flex-shrink:0}

/* header */
.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(20,42,94,.07)}
.nav .container{display:flex;align-items:center;gap:16px;height:78px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brand img{height:50px}
.brand .bn{font-family:Poppins;font-weight:800;font-size:20px;color:var(--blue);line-height:1;letter-spacing:0}
.brand .bt{font-size:10px;color:var(--slate-500);letter-spacing:.04em}
.links{display:flex;gap:22px;margin-left:auto;flex-wrap:wrap}
.links a{color:var(--slate-700);text-decoration:none;font-weight:500;font-size:14.5px;transition:color .2s}
.links a:hover{color:var(--blue)}
.nav .donate{margin-left:6px}
@media(max-width:1100px){.links{gap:14px}.links a{font-size:13.5px}.nav .container{height:auto;min-height:74px;padding-top:12px;padding-bottom:12px}}

/* dropdown menus */
.dd{position:relative;display:inline-flex;align-items:center}
.dd .ddtoggle{cursor:pointer}
.dd::after{content:"";position:absolute;top:100%;left:0;right:0;height:16px}
.dd .ddmenu{position:absolute;top:calc(100% + 14px);left:0;background:#fff;border:1px solid var(--slate-100);border-radius:12px;box-shadow:var(--sh);padding:8px;min-width:260px;display:none;flex-direction:column;z-index:60}
.dd:hover .ddmenu,.dd.open .ddmenu{display:flex}
.dd .ddmenu a{padding:10px 12px;border-radius:8px;font-size:14px;white-space:nowrap;color:var(--slate-700)}
.dd .ddmenu a:hover{background:var(--blue-50);color:var(--blue)}
@media(max-width:880px){.dd .ddmenu{position:static;display:flex;box-shadow:none;border:none;padding:0;min-width:0}}

/* region (USA | Canada) */
.region{display:inline-flex;align-items:center;gap:3px;margin-left:6px;font-size:13px;font-weight:600}
.region a{display:inline-flex;align-items:center;gap:5px;text-decoration:none;color:var(--slate-500);padding:5px 9px;border-radius:8px;transition:.2s}
.region a:hover{color:var(--blue)}
.region a.active{color:var(--blue);background:var(--blue-50)}
.region .sep{color:var(--slate-300)}
@media(max-width:560px){.region a{padding:4px 6px}}

/* mobile hamburger */
.navtoggle{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;margin-left:auto;padding:10px;background:none;border:none;cursor:pointer}
.navtoggle span{display:block;width:100%;height:2.5px;background:var(--navy);border-radius:2px;transition:transform .25s,opacity .2s}
.nav.navopen .navtoggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav.navopen .navtoggle span:nth-child(2){opacity:0}
.nav.navopen .navtoggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
@media(max-width:880px){
  .navtoggle{display:flex;order:2}
  .nav .container{flex-wrap:wrap;height:auto;min-height:64px}
  .nav .region{display:none}
  .nav .donate{order:1;margin-left:auto}
  .nav.navopen .links{display:flex!important;flex-direction:column;align-items:stretch;width:100%;order:10;gap:0;margin-top:8px;padding:6px 0;border-top:1px solid rgba(20,42,94,.1)}
  .nav.navopen .links>a,.nav.navopen .links>.dd>.ddtoggle{padding:13px 4px;border-bottom:1px solid rgba(20,42,94,.06);font-size:15.5px;display:block}
  .nav.navopen .links .dd .ddmenu{padding:2px 0 10px 14px}
  .nav.navopen .links .dd .ddmenu a{padding:9px 4px}
  .nav.navopen .region{display:inline-flex!important;order:11;width:100%;justify-content:center;padding:12px 0;border-top:1px solid rgba(20,42,94,.1)}
}

/* footer */
footer{background:var(--ink);color:#c7ccd6;padding:56px 0 24px}
footer .grid{display:grid;grid-template-columns:1.6fr .8fr .8fr 1fr;gap:28px}
footer h4{color:#fff;font-family:Poppins;font-size:14px;margin-bottom:14px}
footer a{color:#c7ccd6;text-decoration:none;display:block;margin-bottom:9px;font-size:13.5px;transition:.2s}
footer a:hover{color:#fff}
footer .social{display:flex;gap:9px;margin-top:14px}
footer .social a{width:36px;height:36px;border-radius:50%;background:#22262f;display:flex;align-items:center;justify-content:center;margin:0;transition:.2s}
footer .social a:hover{background:var(--orange-cta)}
footer .bottom{border-top:1px solid #262b34;margin-top:36px;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:#8b93a1}
footer .bottom a{display:inline;color:#8b93a1;margin:0 0 0 16px}
@media(max-width:1024px){footer .grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:880px){footer .grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){footer .grid{grid-template-columns:1fr}footer .bottom span:last-child{display:flex;flex-wrap:wrap;gap:10px}footer .bottom a{margin-left:0}}