/* /v2/css/site.css — cleaned, consolidated */

/* =========================
   Theme
========================= */
:root{
  --logoRed:#D7182A;

  --panelBorder: rgba(255,255,255,.14);
  --panelBg: rgba(0,0,0,.35);

  --pillBorder: rgba(255,255,255,.18);
  --pillBg: rgba(255,255,255,.08);

  --fadeEdge: rgba(0,0,0,.85);
}

*{ box-sizing:border-box; }

/* =========================
   Page background
========================= */
body{
  margin:0;
  min-height:100vh;
  color:#fff;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  background:
    radial-gradient(1200px 700px at 50% 15%, rgba(0,130,190,.18), rgba(0,0,0,0) 55%),
    radial-gradient(900px 600px at 20% 80%, rgba(0,90,150,.12), rgba(0,0,0,0) 60%),
    radial-gradient(900px 600px at 85% 75%, rgba(0,160,220,.10), rgba(0,0,0,0) 60%),
    #000;
}

/* =========================
   Layout
========================= */
.wrap{
  width:min(1100px,92vw);
  margin:0 auto;
  padding:18px 16px 32px;
  position:relative;
  z-index:1;
}

main{ padding-top:18px; }

footer{
  margin-top:22px;
  font-size:12px;
  opacity:.6;
  text-align:center;
}

/* =========================
   Header / Brand
========================= */
.header.header-stacked{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding-top:10px;
  padding-bottom:0;
}

.brand.brand-center{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.brandLink{
  display:inline-flex;
  justify-content:center;
  align-items:center;
}

.brandLogoHorizontal{
  width:80vw;
  max-width:950px;
  max-height:20vh;
  height:auto;
  display:block;
  margin:0 auto;
  filter: drop-shadow(0 10px 30px rgba(0,160,255,.14));
}

/* =========================
   Typography
========================= */
h1{
  margin:0 0 10px;
  font-size:clamp(26px,3.6vw,44px);
  letter-spacing:.01em;
}

.subtag{
  margin:0 0 18px;
  color:var(--logoRed);
  font-weight:900;
  letter-spacing:.03em;
}

/* =========================
   Panels / Cards / Grids
========================= */
.panel{
  border:1px solid var(--panelBorder);
  background:var(--panelBg);
  border-radius:18px;
  padding:18px 14px;
}

.grid3{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
}
@media (max-width:860px){
  .grid3{ grid-template-columns:1fr; }
}

.card{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  border-radius:16px;
  padding:14px;
}
.card h3{ margin:0 0 6px; font-size:16px; }
.card p{ margin:0; opacity:.85; line-height:1.5; font-size:14px; }

/* =========================
   Pills / Nav
========================= */
.nav{
  display:flex;
  gap:10px;
  align-items:center;
}

.pill,
button.pill{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid var(--pillBorder);
  background:var(--pillBg);
  color:#fff;
  font-weight:800;
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  user-select:none;

  font-size:14px;
  font-family:inherit;
  line-height:1;
}

.pill.primary{
  background:#0a7fd6;
  border-color:transparent;
  box-shadow:0 10px 22px rgba(10,127,214,.22);
}

.nav.nav-scroll.nav-center{
  width:100%;
  justify-content:flex-start;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  padding:8px 6px 14px;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
}
.nav.nav-scroll.nav-center::-webkit-scrollbar{ display:none; }

.nav.nav-scroll.nav-center .pill{
  flex:0 0 auto;
  white-space:nowrap;
  scroll-snap-align:start;
}

@media (max-width:980px){
  .pill{ padding:9px 12px; font-size:14px; }
}

.navFade{
  position:relative;
  width:100%;
}
.navFade:before,
.navFade:after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:26px;
  pointer-events:none;
  z-index:3;
}
.navFade:before{
  left:0;
  background: linear-gradient(to right, var(--fadeEdge), rgba(0,0,0,0));
}
.navFade:after{
  right:0;
  background: linear-gradient(to left, var(--fadeEdge), rgba(0,0,0,0));
}

.swipeHint{
  display:none;
  text-align:center;
  font-size:12px;
  opacity:.65;
  margin-top:-6px;
  letter-spacing:.02em;
}
@media (max-width:980px){
  .swipeHint{ display:block; }
}

.pill.va-flag-bg{
  border-color: rgba(255,255,255,.35) !important;
  color: #fff !important;
  font-weight: 900 !important;

  background:
    linear-gradient(#1f3c88, #1f3c88) left top / 42% 58% no-repeat,
    repeating-linear-gradient(
      to bottom,
      #b22234 0px,
      #b22234 8px,
      #ffffff 8px,
      #ffffff 16px
    ) !important;

  box-shadow:
    0 10px 22px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.20) inset !important;

  text-shadow: 0 2px 6px rgba(0,0,0,.55) !important;
}

/* =========================
   Contact reveal panel
========================= */
.contactPanel{
  width:min(560px,100%);
  border:1px solid var(--panelBorder);
  background:var(--panelBg);
  border-radius:14px;
  padding:12px 12px;
  display:none;
  margin:10px auto 0;
  text-align:center;
  font-size:16px;
  font-weight:800;
  line-height:1.35;
}

.muted{
  opacity:.70;
  font-size:12px;
  margin-top:6px;
  font-weight:600;
}

.contactPanel a{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:2px;
  font-weight:800;
}

.contactGrid{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:10px;
  row-gap:8px;
  text-align:left;
  width:min(520px,100%);
  margin:0 auto;
}
.label{ opacity:.85; white-space:nowrap; }
.value{ word-break:break-word; }

/* =========================
   Banners & Images
========================= */
.bannerStrip{
  width:100%;
  height:160px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  object-fit:cover;
  object-position:center;
  display:block;
}
@media (max-width:720px){
  .bannerStrip{ height:120px; }
}

/* Volunteer banner base */
.bannerVol{
  width:100%;
  height:160px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  object-fit:cover;
  object-position:center;
  display:block;
}

/* Get Certified card thumbnails */
.cardThumb{
  width:100%;
  height:140px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  object-fit:cover;
  object-position:center;
  display:block;
}
@media (min-width:900px){
  .cardThumb{ height:160px; }
}

/* =========================
   Bubbles (HOME ONLY)
========================= */
.bubbles{
  position:fixed;
  inset:-20vh -10vw;
  pointer-events:none;
  z-index:0;
  opacity:1;
  filter:saturate(1.6) contrast(1.15);
  mix-blend-mode:screen;
}

.bubble{
  position:absolute;
  bottom:-30vh;
  width:var(--s,24px);
  height:var(--s,24px);
  border-radius:50%;
  left:var(--x,50%);

  background:
    radial-gradient(circle at 30% 30%,
      rgba(230, 250, 255, .75) 0%,
      rgba( 80, 210, 255, .55) 28%,
      rgba(  0, 120, 255, .25) 52%,
      rgba(  0,   0,   0,  0) 70%);

  border:2px solid rgba(40,190,255,.65);

  box-shadow:
    0 0 55px rgba(0,160,255,.55),
    0 0 18px rgba(0,120,255,.45),
    inset 0 0 18px rgba(230,250,255,.35),
    inset 0 0 40px rgba(0,140,255,.18);

  animation: floatUp var(--d,18s) linear infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes floatUp{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  8%{ opacity:1; }
  100%{ transform:translateY(-130vh) translateX(var(--drift,40px)); opacity:0; }
}

/* =========================
   Desktop-only overrides
========================= */
@media (min-width:900px){
  .navFade{
    display:flex;
    justify-content:center;
  }

  .navFade .nav.nav-scroll{
    display:flex !important;
    justify-content:center !important;
    align-items:center;
    width:100%;
    margin:0 auto;
    overflow-x:visible !important;
    flex-wrap:wrap;
    row-gap:10px;
  }

  .swipeHint{ display:none; }
}

/* =========================
   HARD OVERRIDE (wins against any global img rules)
   This is what fixes your mobile issue.
========================= */
img.bannerVol{
  width:100% !important;
  height:160px !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
}

@media (max-width:720px){
  img.bannerVol{
    height:160px !important; /* mobile height you wanted */
    object-fit:cover !important;
    object-position:center center !important;
  }
}