/* ============================================================
   GeoBlood site.css - Class A Corporate Template
   ============================================================ */
:root {
  --background: 0 0% 100%; --foreground: 0 0% 15%;
  --card: 0 0% 100%; --card-foreground: 0 0% 15%;
  --popover: 0 0% 100%; --popover-foreground: 0 0% 15%;
  --primary: 0 73% 51%; --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 96%; --secondary-foreground: 0 0% 15%;
  --muted: 0 0% 96%; --muted-foreground: 0 0% 45%;
  --accent: 0 73% 51%; --accent-foreground: 0 0% 100%;
  --destructive: 0 73% 51%; --destructive-foreground: 0 0% 100%;
  --border: 0 0% 90%; --input: 0 0% 90%; --ring: 0 73% 51%;
  --blood-red: 0 73% 51%; --blood-red-light: 0 73% 60%; --blood-red-dark: 0 73% 42%;
  --gradient-hero: linear-gradient(135deg, hsl(var(--blood-red)), hsl(var(--blood-red-light)));
  --gradient-card: linear-gradient(145deg, hsl(0 0% 100%), hsl(0 0% 98%));
  --shadow-blood: 0 10px 30px -10px hsl(var(--blood-red) / 0.3);
  --shadow-card:  0 4px  20px  -4px hsl(0 0% 0% / 0.1);
  --shadow-hero:  0 20px 60px -20px hsl(var(--blood-red) / 0.4);
  --radius: 0.5rem;
}
.bg-gradient-hero { background: var(--gradient-hero); }
.bg-gradient-card { background: var(--gradient-card); }
.shadow-blood { box-shadow: var(--shadow-blood); }
.shadow-card  { box-shadow: var(--shadow-card); }
.shadow-hero  { box-shadow: var(--shadow-hero); }
html { scroll-behavior: smooth; }
body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }
* { border-color: hsl(var(--border)); }
.container { width: 100%; max-width: 1400px; padding-left: 2rem; padding-right: 2rem; margin-left: auto; margin-right: auto; }
@keyframes fade-in { 0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)} }
@keyframes slide-in-left { 0%{opacity:0;transform:translateX(-20px)}100%{opacity:1;transform:translateX(0)} }
@keyframes pulse-blood { 0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:0.8} }
@keyframes drop-bounce { 0%{transform:translateY(-10px) scale(0.9);opacity:0}50%{transform:translateY(0) scale(1.1);opacity:1}100%{transform:translateY(0) scale(1);opacity:1} }
.animate-fade-in { animation: fade-in .6s ease-out both; }
@keyframes slide-in-right { 0%{opacity:0;transform:translateX(20px)}100%{opacity:1;transform:translateX(0)} }
.animate-slide-in-left { animation: slide-in-left .6s ease-out both; }
.animate-slide-in-right { animation: slide-in-right .6s ease-out both; }
.animate-pulse-blood { animation: pulse-blood 2s ease-in-out infinite; }
.animate-drop-bounce { animation: drop-bounce .8s ease-out both; }
[data-animate] { opacity:0; transform:translateY(24px); transition:opacity .6s ease-out, transform .6s ease-out; }
[data-animate].is-visible { opacity:1; transform:translateY(0); }
[data-animate="slide-left"] { transform:translateX(-24px); }
[data-animate="slide-left"].is-visible { transform:translateX(0); }
[data-animate="slide-right"] { transform:translateX(24px); }
[data-animate="slide-right"].is-visible { transform:translateX(0); }
[data-animate="scale"] { transform:scale(0.95); }
[data-animate="scale"].is-visible { transform:scale(1); }
a[data-animate], button[data-animate] { transition:opacity .6s ease-out, transform .6s ease-out, background .2s, color .2s, box-shadow .2s; }
/* Utility bar */
.utility-bar { background: hsl(220 20% 10%); color: hsl(0 0% 70%); font-size: 0.72rem; line-height: 1.5; padding: 0.35rem 0; border-bottom: 1px solid hsl(0 0% 18%); position: relative; z-index: 51; }
.utility-bar a { color: hsl(0 0% 70%); text-decoration: none; transition: color 0.2s; }
.utility-bar a:hover { color: hsl(var(--primary)); }
/* Header */
#site-header:empty { min-height: 92px; }
@media (max-width:767px) { #site-header:empty { min-height: 96px; } }
#siteHeader { transition: box-shadow 0.25s, background 0.25s, transform 0.3s ease-out; z-index: 50; }
.header-solid { background: white !important; box-shadow: var(--shadow-card); position: fixed !important; top: 0; left: 0; right: 0; z-index: 50; }
.header-hidden { transform: translateY(-100%); }
.nav-link-active { color: hsl(var(--primary)) !important; font-weight: 600; }
/* Outlined primary buttons — keep text white on hover red fill */
.border-primary:hover { background: hsl(var(--primary)) !important; color: white !important; }

/* Global button hover animations */
a.inline-flex, a.inline-block, button:not(.amount-btn):not(.freq-btn):not(.pay-tab):not(.page-btn):not(.tag-btn) {
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, background 0.2s, color 0.2s, border-color 0.2s;
}
a.inline-flex:hover, a.inline-block:hover, .btn-animate:hover {
  transform: translateY(-2px);
}
a.shadow-blood:hover, a.shadow-hero:hover, button.shadow-blood:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -8px hsl(var(--primary) / 0.4);
}
.bg-gradient-hero:hover {
  box-shadow: 0 10px 24px -6px hsl(var(--primary) / 0.45);
}
/* Primary gradient buttons - enhanced hover */
a.bg-gradient-hero, button.bg-gradient-hero {
  position: relative;
  overflow: hidden;
}
a.bg-gradient-hero::after, button.bg-gradient-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 0.4s ease-out;
}
a.bg-gradient-hero:hover::after, button.bg-gradient-hero:hover::after {
  transform: translateX(100%);
}
/* Outlined buttons - enhanced hover */
a.border-primary, button.border-primary {
  position: relative;
  overflow: hidden;
}
a.border-primary::before, button.border-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: hsl(var(--primary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-out;
  z-index: -1;
}
a.border-primary:hover::before, button.border-primary:hover::before {
  transform: scaleX(1);
}

/* Global card hover animations */
.shadow-card, .shadow-hero, [class*="rounded-2xl"], [class*="rounded-xl"] {
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out;
}
.shadow-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 24px 48px -12px rgba(0,0,0,0.18);
}
.shadow-hero:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 56px -16px hsl(var(--primary) / 0.35);
}
/* Cards with hover:shadow-hero class (Tailwind) - enhance the effect */
.hover\:shadow-hero:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 0 24px 48px -12px hsl(var(--primary) / 0.25) !important;
}
/* Card with border hover effect */
.border-border:hover, .border-border\/60:hover {
  border-color: hsl(var(--primary) / 0.3);
}
/* Icon scale on card hover */
.group:hover .group-hover\:scale-110 {
  transform: scale(1.1);
}
/* Card inner icon pulse */
[class*="shadow-card"]:hover [data-lucide],
[class*="shadow-hero"]:hover [data-lucide] {
  animation: icon-pulse 0.4s ease-out;
}
@keyframes icon-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
/* Partner/logo card hover */
.group:hover img {
  filter: brightness(1.05);
}

/* ── Logo marquee (Trusted & Supported By) ─────────────────────────── */
.logo-marquee {
  --logo-visible: 5;
  --logo-gap: 3.5rem;
  --logo-item-width: 180px; /* JS overwrites for exact 5-up */
  --logo-duration: 28s;
}
.logo-marquee__viewport {
  overflow: hidden;
  width: 100%;
  max-width: 1200px;

  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.logo-marquee__track {
  display: flex;
  align-items: center;

  width: max-content;
  animation: logo-marquee-scroll var(--logo-duration) linear infinite;
  will-change: transform;
}
.logo-marquee:hover .logo-marquee__track {
  animation-play-state: paused;
}
.logo-marquee__item {
  flex: 0 0 var(--logo-item-width);
  width: var(--logo-item-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  text-align: center;
  user-select: none;
}
@keyframes logo-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track { animation: none !important; }
}
/* Value/feature card glow effect */
[class*="shadow-card"]:hover::before {
  opacity: 1;
}

/* Page hero */
.page-hero { background: linear-gradient(135deg, hsl(var(--blood-red-dark)), hsl(var(--blood-red))); padding: 4rem 0 3.5rem; position: relative; overflow: hidden; }
.page-hero::before { content:''; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='6' cy='6' r='1.5' fill='white' opacity='0.07'/%3E%3C/svg%3E"); background-size:30px 30px; pointer-events:none; }
.page-hero-content { position: relative; z-index: 1; }
.breadcrumb { display:flex; align-items:center; gap:0.4rem; font-size:0.78rem; color:hsl(0 0% 80%); margin-bottom:0.75rem; }
.breadcrumb a { color:hsl(0 0% 80%); text-decoration:none; transition:color 0.2s; }
.breadcrumb a:hover { color:white; }
.breadcrumb-sep { color:hsl(0 0% 55%); }
/* Trust badges */
.trust-badges { display:flex; flex-wrap:wrap; gap:0.6rem; align-items:center; }
.trust-badge { display:inline-flex; align-items:center; gap:0.4rem; background:hsl(0 0% 97%); border:1px solid hsl(0 0% 88%); border-radius:6px; padding:0.28rem 0.6rem; font-size:0.68rem; font-weight:700; color:hsl(0 0% 35%); letter-spacing:0.02em; white-space:nowrap; }
.trust-badge svg,.trust-badge i { width:12px; height:12px; color:hsl(var(--primary)); flex-shrink:0; }
.trust-badge-lg { padding:0.5rem 0.9rem; font-size:0.72rem; border-radius:8px; background:hsl(220 20% 14%); border-color:hsl(0 0% 25%); color:hsl(0 0% 75%); }
.trust-badge-lg svg,.trust-badge-lg i { color:hsl(var(--primary)); }
/* Pre-footer */
.prefooter-band { background:linear-gradient(135deg,hsl(var(--blood-red-dark)/0.07),hsl(0 0% 100%)); border-top:1px solid hsl(var(--border)); padding:3.5rem 0; }
.newsletter-wrap { display:flex; max-width:420px; gap:0; border-radius:0.5rem; overflow:hidden; box-shadow:var(--shadow-card); }
.newsletter-wrap input { flex:1; padding:0.65rem 1rem; font-size:0.875rem; border:1px solid hsl(var(--border)); border-right:none; border-radius:0.5rem 0 0 0.5rem; outline:none; background:white; }
.newsletter-wrap input:focus { border-color:hsl(var(--primary)); }
.newsletter-wrap button { padding:0.65rem 1.25rem; font-size:0.875rem; font-weight:600; background:hsl(var(--primary)); color:white; border:none; border-radius:0 0.5rem 0.5rem 0; cursor:pointer; transition:background 0.2s; white-space:nowrap; }
.newsletter-wrap button:hover { background:hsl(var(--blood-red-dark)); }
/* Stat card */
.stat-card { background:white; border:1px solid hsl(var(--border)); border-radius:1rem; padding:1.5rem; text-align:center; transition:box-shadow 0.3s ease-out,transform 0.3s ease-out,border-color 0.3s ease-out; }
.stat-card:hover { box-shadow:0 16px 32px -8px hsl(var(--primary)/0.2); transform:translateY(-6px); border-color:hsl(var(--primary)/0.3); }
.stat-card-number { font-size:2.5rem; font-weight:800; color:hsl(var(--primary)); line-height:1; margin-bottom:0.25rem; }
.stat-card-label { font-size:0.875rem; color:hsl(var(--muted-foreground)); font-weight:500; }
/* Section chrome */
.section-label { display:inline-block; font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:hsl(var(--primary)); margin-bottom:0.5rem; }
.section-heading { font-size:clamp(1.6rem,3.5vw,2.5rem); font-weight:800; color:hsl(var(--foreground)); line-height:1.2; }
.section-sub { color:hsl(var(--muted-foreground)); max-width:38rem; line-height:1.75; margin-top:0.75rem; }
/* Prose */
.prose-content h2 { font-size:1.25rem; font-weight:700; color:hsl(var(--foreground)); margin-top:2rem; margin-bottom:0.75rem; display:flex; align-items:center; gap:0.5rem; }
.prose-content h3 { font-size:1.05rem; font-weight:600; color:hsl(var(--foreground)); margin-top:1.25rem; margin-bottom:0.4rem; }
.prose-content p { color:hsl(var(--muted-foreground)); line-height:1.8; margin-bottom:0.75rem; }
.prose-content ul { list-style:disc; padding-left:1.5rem; color:hsl(var(--muted-foreground)); line-height:1.8; }
.prose-content ul li { margin-bottom:0.35rem; }
.prose-content a { color:hsl(var(--primary)); text-decoration:underline; }
/* Feature card */
.feature-card { background:white; border:1px solid hsl(var(--border)); border-radius:1rem; padding:1.75rem; transition:box-shadow 0.3s ease-out,transform 0.3s ease-out,border-color 0.3s ease-out; }
.feature-card:hover { box-shadow:0 16px 32px -8px hsl(var(--primary)/0.15); transform:translateY(-6px); border-color:hsl(var(--primary)/0.3); }
.feature-card:hover .feature-card-icon { transform:scale(1.1); }
.feature-card-icon { width:3rem; height:3rem; background:hsl(var(--primary)/0.08); border-radius:0.75rem; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; transition:transform 0.3s ease-out; }
.feature-card-icon svg,.feature-card-icon i { color:hsl(var(--primary)); width:1.4rem; height:1.4rem; }
/* Timeline */
.timeline { position:relative; padding-left:2rem; }
.timeline::before { content:''; position:absolute; left:0.625rem; top:0; bottom:0; width:2px; background:linear-gradient(to bottom,hsl(var(--primary)),hsl(var(--primary)/0.1)); }
.timeline-item { position:relative; padding-bottom:2rem; }
.timeline-dot { position:absolute; left:-2rem; top:0.25rem; width:1.1rem; height:1.1rem; background:hsl(var(--primary)); border:3px solid white; border-radius:50%; box-shadow:0 0 0 2px hsl(var(--primary)/0.3); }
.timeline-date { font-size:0.72rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:hsl(var(--primary)); margin-bottom:0.2rem; }
.timeline-title { font-size:1rem; font-weight:700; color:hsl(var(--foreground)); margin-bottom:0.25rem; }
.timeline-body { font-size:0.875rem; color:hsl(var(--muted-foreground)); line-height:1.6; }
/* Blog card */
.blog-card { background:white; border:1px solid hsl(var(--border)); border-radius:1rem; overflow:hidden; transition:box-shadow 0.3s ease-out,transform 0.3s ease-out,border-color 0.3s ease-out; }
.blog-card:hover { box-shadow:0 16px 32px -8px rgba(0,0,0,0.12); transform:translateY(-6px); border-color:hsl(var(--primary)/0.3); }
.blog-card:hover img { transform:scale(1.05); }
.blog-card img { transition:transform 0.4s ease-out; }
.blog-tag { display:inline-block; font-size:0.65rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; background:hsl(var(--primary)/0.1); color:hsl(var(--primary)); padding:0.2rem 0.55rem; border-radius:4px; }
/* Donate tier */
.tier-card { background:white; border:2px solid hsl(var(--border)); border-radius:1.25rem; padding:2rem; transition:border-color 0.3s ease-out,box-shadow 0.3s ease-out,transform 0.3s ease-out; position:relative; }
.tier-card:hover { border-color:hsl(var(--primary)/0.5); box-shadow:0 20px 40px -10px hsl(var(--primary)/0.2); transform:translateY(-8px); }
.tier-card.featured { border-color:hsl(var(--primary)); box-shadow:var(--shadow-blood); }
.tier-card.featured:hover { box-shadow:0 24px 48px -12px hsl(var(--primary)/0.3); transform:translateY(-10px); }
.tier-badge { position:absolute; top:-0.75rem; left:50%; transform:translateX(-50%); background:hsl(var(--primary)); color:white; font-size:0.65rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:0.2rem 0.8rem; border-radius:999px; white-space:nowrap; }
/* ── Donation Widget ─────────────────────────────────────────────── */
/* Frequency toggle */
.freq-toggle { display:flex; background:hsl(var(--secondary)); border-radius:999px; padding:4px; gap:4px; }
.freq-btn { flex:1; text-align:center; padding:0.4rem 1.25rem; border-radius:999px; font-size:0.8rem; font-weight:600; cursor:pointer; border:none; background:transparent; color:hsl(var(--muted-foreground)); transition:background 0.2s,color 0.2s; }
.freq-btn.active { background:white; color:hsl(var(--primary)); box-shadow:0 1px 4px hsl(0 0% 0%/0.12); }
/* Amount grid */
.amount-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0.5rem; }
.amount-btn { padding:0.55rem 0; font-size:0.9rem; font-weight:700; border-radius:0.6rem; border:2px solid hsl(var(--border)); background:white; color:hsl(var(--foreground)); cursor:pointer; transition:border-color 0.15s,background 0.15s,color 0.15s; }
.amount-btn:hover { border-color:hsl(var(--primary)/0.5); }
.amount-btn.selected { border-color:hsl(var(--primary)); background:hsl(var(--primary)/0.06); color:hsl(var(--primary)); }
.custom-amount-wrap { position:relative; margin-top:0.5rem; }
.custom-amount-wrap .currency-sym { position:absolute; left:0.85rem; top:50%; transform:translateY(-50%); font-weight:700; color:hsl(var(--muted-foreground)); pointer-events:none; }
.custom-amount-input { width:100%; padding:0.6rem 0.85rem 0.6rem 1.6rem; border:2px solid hsl(var(--border)); border-radius:0.6rem; font-size:0.9rem; font-weight:700; outline:none; transition:border-color 0.15s; background:white; }
.custom-amount-input:focus { border-color:hsl(var(--primary)); }
/* Payment tabs */
.pay-tabs { display:flex; border-bottom:2px solid hsl(var(--border)); gap:0; }
.pay-tab { flex:1; padding:0.7rem; font-size:0.82rem; font-weight:600; border:none; background:transparent; cursor:pointer; color:hsl(var(--muted-foreground)); display:flex; align-items:center; justify-content:center; gap:0.4rem; border-bottom:2px solid transparent; margin-bottom:-2px; transition:color 0.2s,border-color 0.2s; }
.pay-tab:hover { color:hsl(var(--foreground)); }
.pay-tab.active { color:hsl(var(--primary)); border-bottom-color:hsl(var(--primary)); }
.pay-panel { display:none; padding:1.25rem 0 0; }
.pay-panel.active { display:block; }
/* Processor badges row */
.processor-badges { display:flex; align-items:center; justify-content:center; gap:0.5rem; flex-wrap:wrap; }
.proc-badge { display:inline-flex; align-items:center; gap:0.3rem; padding:0.25rem 0.6rem; border:1px solid hsl(var(--border)); border-radius:6px; font-size:0.65rem; font-weight:700; color:hsl(var(--muted-foreground)); letter-spacing:0.04em; background:white; }
/* Stripe button */
.stripe-pay-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:0.6rem; padding:0.85rem 1.5rem; border-radius:0.6rem; background:hsl(231 58% 41%); color:white; font-size:0.95rem; font-weight:700; border:none; cursor:pointer; transition:background 0.2s,box-shadow 0.2s; box-shadow:0 2px 12px hsl(231 58% 41%/0.35); text-decoration:none; }
.stripe-pay-btn:hover { background:hsl(231 58% 35%); box-shadow:0 4px 18px hsl(231 58% 41%/0.45); color:white; }
.stripe-pay-btn svg,.stripe-pay-btn img { width:1.1rem; height:1.1rem; }
/* PayPal container */
#paypal-button-container.paypal-loading { position:relative; }
#paypal-button-container.paypal-loading::after { content:''; display:block; width:24px; height:24px; border:3px solid hsl(var(--border)); border-top-color:hsl(220 90% 50%); border-radius:50%; animation:spin 0.7s linear infinite; margin:0.5rem auto; }
@keyframes spin { to { transform:rotate(360deg); } }
/* ── end Donation Widget ───────────────────────────────────────────── */
/* Glitter */
@keyframes glitter-shimmer { 0%,100%{background-position:0% 50%}50%{background-position:100% 50%} }
@keyframes glitter-glow { 0%,100%{opacity:1;box-shadow:0 0 16px hsl(0 73% 51%/0.5),0 0 32px hsl(45 100% 60%/0.25)}50%{opacity:.95;box-shadow:0 0 24px hsl(0 73% 51%/0.6),0 0 48px hsl(45 100% 60%/0.35)} }
.glitter-border { position:relative; border-radius:12px; padding:3px; background:linear-gradient(90deg,hsl(0 73% 51%),hsl(45 100% 55%),hsl(0 73% 51%),hsl(320 70% 55%),hsl(0 73% 51%)); background-size:200% 100%; animation:glitter-shimmer 2.5s ease-in-out infinite,glitter-glow 2s ease-in-out infinite; }
.glitter-border .glitter-inner { position:relative; z-index:1; border-radius:10px; background:white; padding:2px; display:inline-flex; align-items:center; justify-content:center; }
@media (max-width:767px) { .utility-bar .utility-bar-right{display:none} .page-hero{padding:3rem 0 2.5rem} .prefooter-band{padding:2.5rem 0} .newsletter-wrap{max-width:100%} }