/* GTC United theme: white background version */
:root{
  --bg:#ffffff;        /* white */
  --text:#1a1a1a;      /* near-black text */
  --muted:#4a4a4a;     /* dark gray */
  --gold:#FFCB05;      /* official US Army yellow */
  --link:#2563eb;      /* blue link */
  --card:#f8f9fa;
  --border:#e5e7eb;
  --separator:#e5e7eb;
  --header-bg:rgba(10,10,12,.65);  /* keep header dark */
  --header-text:#f3f5f7;
}
/* Self-hosted fonts for web use.
   Font files in /public/fonts optimized for web:
     - WOFF2 (best compression, modern browsers)
     - WOFF (fallback for older browsers)
     - TTF (ultimate fallback)
*/

@font-face {
  font-family: 'Stardos Stencil';
  src: url('/fonts/StardosStencil-Bold.woff2') format('woff2'),
       url('/fonts/StardosStencil-Bold.woff') format('woff'),
       url('/fonts/StardosStencil-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helaman\'s Warriors';
  src: url('/fonts/HelamansWarriors.woff2') format('woff2'),
       url('/fonts/HelamansWarriors.woff') format('woff'),
       url('/fonts/HelamansWarriors.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Black Ops One';
  src: url('/fonts/BlackOpsOne-Regular.woff2') format('woff2'),
       url('/fonts/BlackOpsOne-Regular.woff') format('woff'),
       url('/fonts/BlackOpsOne-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bebas Kai';
  src: url('/fonts/BebasKai.woff') format('woff'),
       url('/fonts/BebasKai.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*{box-sizing:border-box}
html{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;scroll-behavior:smooth}

/* All heading elements use Black Ops One font */
h1, h2, h3, h4, h5, h6{font-family:'Black Ops One', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif}

body{scroll-snap-type:y proximity;margin:0;padding:0}
img{display:block;max-width:100%}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

/* Layout */
.container{max-width:1120px;margin:0 auto;padding:0 10px}
.header{position:sticky;top:0;z-index:50;background:#002868;backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.085);height:64px;transition:background 0.5s ease;display:flex;align-items:center}
.header.scrolled{background:rgba(0, 40, 104, 0.75)}
.nav{display:flex;align-items:center;justify-content:space-between;width:100%}
.logo{font-family:'Helaman\'s Warriors', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;font-size:1.7rem;font-weight:800;letter-spacing:.2px;color:#B22234;background:white;border:2px solid #FFCB05;border-radius:8px;padding:6px 12px;transition:all 0.5s ease;text-decoration:none;display:flex;align-items:center;gap:12px}
.logo-icon{width:32px;height:40px;object-fit:contain;transition:transform 0.5s ease}
.logo:hover{color:#E63946;font-weight:900;transform:scale(1.05);text-decoration:none}
.logo:hover .logo-icon{transform:scale(1.1)}
.links{display:flex;gap:20px;align-items:center}
.links a{color:white;font-weight:700;font-size:14px;transition:all 0.5s ease;text-decoration:none}
.links a:hover{color:#B22234;font-weight:800;transform:scale(1.1);text-decoration:none}
.links a.donate-link{background:#B22234;color:white;padding:8px 16px;border-radius:8px;font-weight:800;transition:all 0.3s ease;border:2px solid var(--gold)}
.links a.donate-link:hover{text-decoration:none;transform:scale(1.05);background:#E63946;color:#002868}

/* Hamburger menu */
.hamburger{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:8px}
.hamburger span{display:block;width:24px;height:2px;background:var(--header-text);transition:all 0.3s ease}

/* Mobile menu overlay */
.mobile-menu{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.95);z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity 0.3s ease,visibility 0.3s ease;overflow:hidden}
.mobile-menu.active{opacity:1;visibility:visible}
.mobile-menu-close{position:absolute;top:20px;right:20px;background:none;border:none;color:var(--header-text);font-size:32px;cursor:pointer;width:48px;height:48px;display:flex;align-items:center;justify-content:center}
.mobile-menu-links{display:flex;flex-direction:column;gap:24px;text-align:center;padding-bottom:80px}
.mobile-menu-links a{color:var(--header-text);font-size:24px;font-weight:600;text-decoration:none}
.mobile-menu-links a:hover{color:var(--gold)}
.mobile-menu-links a.donate-link{background:#B22234;color:white;padding:12px 24px;border-radius:12px;font-weight:800;display:inline-block;border:2px solid var(--gold);transition:all 0.3s ease}
.mobile-menu-links a.donate-link:hover{background:#E63946;color:#002868;transform:scale(1.05)}

/* Hero */
.hero-wrapper{position:relative;overflow:hidden;border-bottom:1px solid var(--separator);min-height:calc(100vh - 64px);display:flex;flex-direction:column;justify-content:space-between;scroll-snap-align:start;scroll-snap-stop:always}
.hero-image{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;color:transparent;background:#1a1a1a}
.hero-image img{width:100%;height:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0}
.hero-placeholder{filter:blur(20px);transform:scale(1.1);opacity:1;z-index:1;transition:opacity 0.5s ease}
.hero-placeholder.hide{opacity:0}
.hero-full{opacity:1;z-index:2;transition:opacity 0.5s ease}
.hero-full.loaded{opacity:1}
.hero-content{position:relative;z-index:2;padding:80px 0 0;width:100%}
.hero-content .kicker{opacity:0;transition:opacity 0.6s ease;animation:heroFadeInOpacity 0.6s ease forwards 0.5s}
.hero-content.loaded .kicker{animation:none;opacity:1;transition-delay:0.1s}
.hero-content h1{opacity:0;transition:opacity 0.6s ease;animation:heroFadeInOpacity 0.6s ease forwards 0.5s}
.hero-content.loaded h1{animation:none;opacity:1;transition-delay:0.2s}
.hero-content p{opacity:0;transition:opacity 0.6s ease;animation:heroFadeInOpacity 0.6s ease forwards 0.8s}
.hero-content.loaded p{animation:none;opacity:1;transition-delay:0.4s}
.hero-badge-wrapper{position:relative;z-index:2;padding:0 0 60px;width:100%;opacity:0;transition:opacity 0.6s ease;animation:heroFadeInOpacity 0.6s ease forwards 1.1s}
.hero-content.loaded ~ .hero-badge-wrapper{animation:none;opacity:1;transition-delay:0.6s}
.kicker{color:#B22234;text-transform:uppercase;letter-spacing:1px;font-weight:800;font-size:12px;margin-bottom:12px;padding-left:0}
@keyframes heroFadeIn{to{opacity:1;transform:translateY(0)}}
@keyframes heroFadeInOpacity{to{opacity:1}}
.hero-content h1{font-size:95px;line-height:1.04;margin:8px 0 12px;font-weight:800;color:white;font-family:'Black Ops One', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;-webkit-text-stroke:2px #002868;text-stroke:2px #002868;text-align:center}
.hero-content .kicker{color:white;font-size:29px;text-align:center;font-family:'Bebas Kai', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;-webkit-text-stroke:1px #B22234;text-stroke:1px #B22234}
.hero-content p{max-width:780px;color:#e0e0e0;font-size:18px;line-height:1.7;font-weight:700;text-shadow:4px 4px 18px rgba(0,40,104,0.5),8px 2px 12px rgba(0,40,104,0.5),-8px 2px 12px rgba(0,40,104,0.5),8px -2px 12px rgba(0,40,104,0.5),-8px -2px 12px rgba(0,40,104,0.5)}
.badge{display:inline-block;border:2px solid #002868;background:rgba(255,255,255,0.9);padding:9px 14px;border-radius:999px;color:var(--muted);font-size:13px}

/* Hero seals */
.hero-seals{display:flex;align-items:center;gap:40px;flex-wrap:wrap;height:100px}
.seal-501c3{width:100px;height:100px;border-radius:50%;object-fit:cover}
.seal-candid{height:100%;width:auto}
.seal-candid-link{display:flex;align-items:center;height:100%}

/* Center h1 on all pages except homepage */
h1:not(.hero-content h1){text-align:center;font-size:42px;font-weight:800;margin:0 0 48px;color:#002868}

/* Center all headers on desktop (except hero h1) */
h2:not(.hero-content h2),
h3:not(.hero-content h3),
h4:not(.hero-content h4),
h5:not(.hero-content h5),
h6:not(.hero-content h6){text-align:center}

/* Sections */
.section{padding:48px 0 56px;border-bottom:1px solid var(--separator)}
.section:last-of-type{scroll-snap-align:start;padding-bottom:0;border-bottom:none}
.section h2{font-size:34px;font-weight:800;margin:0 0 12px;color:#002868}
.section p{color:var(--muted);font-size:16px;line-height:1.8}

/* Cards and grids */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:26px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:22px}
.card h3{font-size:20px;margin:6px 0 10px;color:#002868}

/* Joined cards in grid - desktop (horizontal) - only for specific grids */
.grid-joined{gap:0 !important}
.grid-joined .card{margin:0 !important}
.grid-joined .card:first-child{border-radius:16px 0 0 16px !important}
.grid-joined .card:last-child{border-radius:0 16px 16px 0 !important}
.grid-joined .card:first-child:last-child{border-radius:16px}

/* Two-column layout */
.two-column{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.two-column-text h2{margin-top:0}
.two-column-image img{border-radius:12px;width:100%;height:auto}

/* Quotes / Verses */
.quote{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;color:var(--muted);font-style:italic;margin-top:14px}
.verse{text-align:center;font-size:16px;line-height:1.6;font-style: oblique;padding:50px 0 0 0;}
.ready-text{color:#B22234!important}
.join-us-text{color:#B22234}
/* CTAs */
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.button{display:inline-block;background:var(--gold);color:#1a1a1a;padding:12px 18px;border-radius:12px;font-weight:800;font-size:14px;border:2px solid #002868}
.button:hover{text-decoration:none;filter:saturate(1.05)}
.button.secondary{background:transparent;border:1px solid var(--border);color:var(--text)}

/* Footer styles moved to Footer.astro component */

/* Form Pages */
.connect-page, .volunteer-page {
  padding: 4rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.form-container {
  max-width: 700px;
  margin: 0 auto;
}

.intro {
  color: #666;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.form-group {
  margin-bottom: 1.5rem;
}

.required {
  color: #e74c3c;
}

.volunteer-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.volunteer-form label {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.volunteer-form input,
.volunteer-form textarea,
.volunteer-form select {
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.volunteer-form button {
  padding: 1rem 2rem;
  background: #0066cc;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s;
}

.volunteer-form button:hover:not(:disabled) {
  background: #0052a3;
}

.volunteer-form button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.cf-turnstile {
  margin: 1.5rem 0;
}

#submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Content Pages (Privacy, Terms, Accessibility) */
.privacy-content, .terms-content, .accessibility-content {
  max-width: 800px;
  margin: 0 auto;
}

.welcome-text {
  font-size: 18px;
  font-weight: 600;
  color: #002868;
  margin-bottom: 8px;
}

.effective-date, .last-updated {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 32px;
}

.privacy-content h2, .terms-content h2, .accessibility-content h2 {
  font-size: 28px;
  font-weight: 700;
  margin: 40px 0 16px;
  color: #002868;
}

.privacy-content h2:first-of-type,
.terms-content h2:first-of-type,
.accessibility-content h2:first-of-type {
  margin-top: 24px;
}

.privacy-content p, .terms-content p, .accessibility-content p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 24px;
}

.privacy-content a, .terms-content a, .accessibility-content a {
  color: #002868;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s ease;
}

.privacy-content a:hover, .terms-content a:hover, .accessibility-content a:hover {
  color: #B22234;
  text-decoration: underline;
}

.accessibility-content ul {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
  margin: 0 0 24px 0;
  padding-left: 24px;
}

.accessibility-content ul li {
  margin-bottom: 12px;
}

.contact-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  margin-top: 16px;
}

.contact-box p {
  margin: 8px 0;
  font-size: 16px;
}

.contact-box p:first-child {
  margin-top: 0;
}

.contact-box p:last-child {
  margin-bottom: 0;
}

.response-time {
  margin-top: 16px !important;
  font-size: 14px !important;
  color: var(--muted);
}

/* Donate Page */
.donate-content {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.donate-content p {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 24px;
}

.tax-deductible {
  color: #dc2626 !important;
  font-weight: 600;
  margin-top: 32px;
}

.donate-cta {
  margin-top: 48px;
  margin-bottom: 48px;
  display: flex;
  justify-content: center;
}

.donate-button {
  font-size: 18px;
  padding: 16px 32px;
  cursor: pointer;
}

/* Form Pages (Help Request, Sponsorship, Testimonial) */
.help-request-page, .sponsorship-page, .testimonial-page {
  padding: 4rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Help Request - Urgency Scale */
.urgency-scale {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #f9f9f9;
  border-radius: 8px;
}

.scale-label {
  font-size: 0.875rem;
  color: #666;
  white-space: nowrap;
}

.radio-group {
  display: flex;
  gap: 1rem;
  flex: 1;
  justify-content: center;
}

.radio-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  font-weight: 500;
}

.radio-label input[type="radio"] {
  margin-bottom: 0.25rem;
  cursor: pointer;
  width: auto;
}

/* Sponsorship - Radio Options */
.radio-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: #f9f9f9;
  border-radius: 8px;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.radio-option:hover {
  border-color: #0066cc;
  background: #f0f7ff;
}

.radio-option input[type="radio"] {
  margin: 0;
  cursor: pointer;
  width: auto;
  min-width: 18px;
  height: 18px;
}

.radio-option:has(input:checked) {
  border-color: #0066cc;
  background: #e7f3ff;
  font-weight: 600;
}

.radio-option span {
  font-size: 1rem;
}

/* Testimonial - Rating Scale */
.rating-scale {
  padding: 1rem;
  background: #f9f9f9;
  border-radius: 8px;
}

.star-rating {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.star-rating input[type="radio"] {
  display: none;
}

.star-rating label {
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: 600;
  color: #ddd;
  transition: color 0.2s, transform 0.2s;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ddd;
  border-radius: 50%;
}

.star-rating label:hover {
  color: #ffa500;
  border-color: #ffa500;
  transform: scale(1.1);
}

.star-rating input[type="radio"]:checked + label {
  color: #ff6b00;
  border-color: #ff6b00;
  background: rgba(255, 107, 0, 0.1);
}

.consent-group {
  background: #e7f3ff;
  padding: 1.5rem;
  border-radius: 8px;
  border-left: 4px solid #2196F3;
}

.consent-label {
  display: block;
  margin-bottom: 1rem;
  font-weight: 600;
}

.radio-inline {
  display: flex;
  gap: 2rem;
}

.radio-inline label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-weight: normal;
}

.radio-inline input[type="radio"] {
  margin: 0;
  cursor: pointer;
  width: auto;
}

/* Ongoing Efforts Page */
.full-width-image-container{margin-top:40px;border-radius:12px;overflow:hidden}

.banner-section {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.image-box {
  display: flex;
}

/* About Us Page */
.about-image-wrapper {
  margin: 32px 0 48px;
  height: 750px;
  overflow: hidden;
  position: relative;
  border-radius: 12px;
}

.about-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  filter: blur(20px);
  transform: scale(1.1);
  z-index: 1;
}

.about-full {
  position: relative;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.about-full.loaded {
  opacity: 1;
}

.our-story-section {
  margin-bottom: 64px;
}

.our-story-section h2 {
  font-size: 34px;
  font-weight: 800;
  margin: 0 0 24px;
  color: var(--text);
}

.our-story-section p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 16px;
}

.founder-section {
  display: grid;
  grid-template-columns: 27% 46% 27%;
  gap: 0;
  margin-top: 48px;
  margin-bottom: 48px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

.founder-image-left,
.founder-image-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}

.founder-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 400px;
}

.founder-image-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.founder-message {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.founder-message h2 {
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 24px;
  color: var(--text);
}

.founder-message p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5em;
  margin-bottom: 16px;
}

.signature {
  font-style: italic;
  margin-top: 24px;
  font-weight: 600;
}

.signature-title {
  font-style: normal;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

.center-cta {
  display: flex;
  justify-content: center;
  margin-top: 48px;
  margin-bottom: 60px;
}

/* Get Involved Page */
.get-involved-content {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 40px;
  align-items: start;
}

.content-left h2 {
  font-size: 32px;
  font-weight: 800;
  margin: 0 0 24px;
  color: #002868;
}

.content-left p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 16px;
}

.content-left .cta {
  margin-top: 32px;
}

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

.flag-heart-container {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

.flag-heart-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.empowering-section {
  margin-top: 80px;
  text-align: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.empowering-section h2 {
  font-size: 34px;
  font-weight: 800;
  margin: 0 0 24px;
  color: #002868;
}

.empowering-section p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 32px;
}

.empowering-section .cta {
  display: flex;
  justify-content: center;
  margin-bottom: 60px;
}

.join-us-section {
  margin-top: 80px;
  text-align: center;
}

.photo-container {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  min-height: 550px;
  display: flex;
  align-items: flex-start;
}

.photo-wrapper {
  position: relative;
  z-index: 1;
}

.photo-main {
  width: 85%;
  max-width: 600px;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.photo-heading {
  font-size: 32px;
  font-weight: 800;
  margin: 32px 0 0;
  color: #002868;
  text-align: left;
}

.photo-overlay {
  position: absolute;
  right: 0;
  bottom: 80px;
  width: 30%;
  max-width: 400px;
  height: auto;
  border-radius: 16px;
  border: 4px solid #002868;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

/* Contact Page */
.contact-page{padding:40px 20px}
.contact-container{display:flex;flex-direction:column;align-items:center;gap:32px;max-width:1120px;margin:0 auto}
.contact-container h1{text-align:center;margin-bottom:0}
.contact-intro{text-align:center;color:var(--muted);font-size:18px;line-height:1.8;max-width:800px;margin:0 auto}
.contact-content-wrapper{display:flex;flex-direction:column;gap:32px;width:100%;align-items:center}
.contact-left{width:100%;max-width:400px;background-color:#00274d;color:white;padding:24px;text-align:center;border-radius:12px}
.contact-image{max-width:100%;height:auto;margin-bottom:20px;border-radius:8px}
.contact-info p{margin:10px 0}
.contact-link{color:white!important;text-decoration:none!important;transition:color 0.5s ease}
.contact-link:hover{color:#B22234!important;text-decoration:none!important}
.social-icons-contact{display:flex;gap:16px;justify-content:center;margin-top:15px}
.social-icon-contact{color:white;transition:color 0.5s ease;display:inline-block;text-decoration:none}
.social-icon-contact:hover{color:var(--gold);text-decoration:none}
.social-icon-contact svg{width:32px;height:32px}
.contact-right{width:100%;max-width:700px}
.contact-form{display:flex;flex-direction:column;gap:10px}
.contact-form label{font-weight:bold}
.contact-form input,.contact-form textarea{width:100%;padding:10px;border:1px solid #ccc;border-radius:4px}
.contact-form textarea{min-height:120px;resize:vertical}
.contact-form button{background-color:#00274d;color:white;padding:10px;border:none;border-radius:4px;cursor:pointer;font-weight:600;transition:color 0.5s ease,background-color 0.5s ease,transform 0.5s ease,filter 0.5s ease}
.contact-form button:hover{color:var(--gold)!important;background-color:#00274d;transform:scale(1.02);filter:brightness(1.2)}

/* Desktop layout - side by side */
@media (min-width:901px){
  .contact-content-wrapper{flex-direction:row;align-items:flex-start;gap:40px}
  .contact-left{flex-shrink:0}
  .contact-right{flex:1}

  /* Deferred images fill parent on desktop */
  .deferred-image-wrapper{height:100%}
  .deferred-image{height:100%}
  .deferred-image img{height:100%;object-fit:cover}
}

/* Mobile contact button - hidden on desktop, visible on mobile */
.mobile-contact-button{display:none}

/* ========================================
   Footer & Donation Overlay Styles
   ======================================== */

.footer {
  background: #002868; /* American flag blue */
  border-top: none;
  padding: 60px 0 20px;
  margin-top: auto;
  min-height: 50vh;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-section {
  text-align: center;
  margin-bottom: 40px;
}

.footer-section h3 {
  color: var(--gold);
  font-size: 24px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 40px;
  margin-bottom: 40px;
}

.candid-column {
  display: flex;
  align-items: center;
  justify-content: center;
}

.candid-column img {
  max-width: 150px;
  height: auto;
}

.footer-column h4 {
  color: #ffffff; /* White headings */
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 16px;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column li {
  margin-bottom: 8px;
}

.footer-column a {
  color: #c7cbd3; /* Light gray for links */
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s ease;
}

.footer-column a:hover {
  color: var(--gold);
  text-decoration: none;
}

.footer-column p {
  color: #c7cbd3; /* Light gray for text */
  font-size: 14px;
  margin: 8px 0;
}

.footer-column p a {
  color: #8dbbff; /* Light blue for links in paragraphs */
}

.footer-column p a:hover {
  color: var(--gold);
}

.social-icons-footer {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

.social-icon-footer {
  color: #8dbbff; /* Light blue for social icons */
  transition: color 0.3s ease;
}

.social-icon-footer:hover {
  color: var(--gold);
  text-decoration: none;
}

.donate-button {
  display: inline-block;
  width: 100%;
  background: #B22234; /* American flag red */
  color: white !important;
  padding: 14px 24px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 16px;
  border: 2px solid var(--gold);
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.donate-button:hover {
  background: #E63946; /* Lighter red on hover */
  transform: scale(1.05);
  text-decoration: none;
}

.footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 40px;
}

.footer-bottom p {
  color: #c7cbd3; /* Light gray */
  font-size: 12px;
  margin: 4px 0;
}

/* Overlay Styles */
.donate-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease, z-index 0s 0.3s;
  padding: 20px;
}

.donate-overlay.active {
  z-index: 1000;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.3s ease, visibility 0.3s ease, z-index 0s 0s;
}

.overlay-content {
  background: var(--bg);
  border-radius: 16px;
  padding: 48px;
  max-width: 900px;
  width: 100%;
  height: 95vh;
  position: relative;
  overflow-y: auto;
}

.close-overlay {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 32px;
  cursor: pointer;
  color: var(--muted);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
}

.close-overlay:hover {
  color: var(--text);
}

.overlay-content h2 {
  font-size: 32px;
  font-weight: 800;
  margin: 0 0 32px;
  color: var(--text);
  text-align: center;
}

.platform-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
}

.single-btn {
  width: 100%;
}

.platform-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 12px;
}

.platform-btn {
  padding: 12px 20px;
  border: 2px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
}

.platform-btn:hover {
  border-color: var(--gold);
  background: var(--bg);
}

.platform-btn.active {
  background: var(--gold);
  border-color: var(--gold);
  color: #1a1a1a;
}

.platform-content {
  position: relative;
  min-height: 300px;
}

.platform-section {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.platform-section.active {
  position: relative;
  opacity: 1;
  visibility: visible;
}

.platform-section h3 {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 16px;
  color: var(--text);
  text-align: center;
}

.platform-section p {
  color: var(--muted);
  font-size: 16px;
  text-align: center;
  padding: 40px;
  background: var(--card);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.platform-embed {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

.iframe-container {
  width: 100%;
  min-height: 800px;
}

.iframe-container iframe {
  width: 100%;
  min-height: 800px;
  border: none;
  border-radius: 8px;
}

givebutter-iframe {
  display: block;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  min-height: 600px;
}

/* Loading spinner styles */
.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  color: var(--muted);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-spinner p {
  font-size: 14px;
  color: var(--muted);
}

/* Hide iframe while loading */
.iframe-container iframe:not([data-loaded="true"]) {
  display: none;
}

@media (max-width: 900px) {
  .footer-columns {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  .candid-column {
    grid-column: 1 / -1;
  }

  .footer-section h3 {
    font-size: 20px;
  }

  .overlay-content {
    padding: 32px 24px;
  }

  .overlay-content h2 {
    font-size: 24px;
    margin-bottom: 24px;
  }

  .platform-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .platform-btn {
    font-size: 13px;
    padding: 10px 16px;
  }

  .iframe-container {
    min-height: 700px;
  }

  .iframe-container iframe {
    min-height: 700px;
  }
}

@media (max-width: 600px) {
  .footer-columns {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }

  .candid-column {
    grid-column: 1;
    margin-bottom: 12px;
  }

  .candid-column img {
    max-width: 180px;
  }

  .social-icons-footer {
    justify-content: center;
  }

  .donate-button {
    max-width: 200px;
    margin: 0 auto;
  }

  /* Mobile styles for donate overlay */
  .overlay-content {
    width: 95%;
    max-width: 95%;
    height: 90vh;
    padding: 24px !important;
    margin: 20px;
    overflow-y: auto;
  }

  .overlay-content h2 {
    font-size: 20px;
    margin-bottom: 16px;
  }

  .close-overlay {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    font-size: 24px;
  }

  .platform-buttons {
    margin-bottom: 20px;
  }

  .platform-row {
    flex-direction: column;
    gap: 8px;
  }

  .platform-btn {
    padding: 10px 16px;
    font-size: 14px;
    width: 100%;
  }

  .platform-section h3 {
    font-size: 18px;
    margin-bottom: 12px;
  }

  .iframe-container,
  .platform-embed iframe {
    max-width: 100% !important;
    width: 100% !important;
    min-height: 500px;
  }
}