/* styles.css */
:root{
--accent: #53d3ff; /* ocean blue */
--accent-2: #8ef2cf; /* mint */
--text: #ecf2f8;
--muted: #c7d3df;
--card: rgba(255,255,255,.06);
--stroke: rgba(255,255,255,.18);
--radius: 16px;
--shadow: 0 10px 30px rgba(0,0,0,.35);
}


html{ scroll-behavior:smooth; }
html, body { height: 100%; }
body{
margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color: var(--text);
background:#0b1620;
overflow-x:hidden;
}
/* Full-page kayaking background (replace path with your image) */
body::before{
content:""; position: fixed; inset: 0; z-index: -2;
background-image: url('images/kayak-hero.jpg'); /* ← replace with a kayaking photo */
background-size: cover; background-position: center; background-repeat: no-repeat;
}
body::after{
content:""; position: fixed; inset:0; z-index:-1; background: rgba(0,0,0,.5);
}


/* Header */
.site-header{ position: sticky; top:0; z-index:10; backdrop-filter: blur(8px); background: rgba(6, 15, 24, .45); border-bottom: 1px solid var(--stroke); }
.nav{ display:flex; align-items:center; justify-content: space-between; padding: 12px 18px; }
.left{ display:flex; gap:10px; align-items:center; }
.social{ display:inline-grid; place-items:center; width:36px; height:36px; border-radius:10px; color:#fff; text-decoration:none; border:1px solid var(--stroke); background: rgba(255,255,255,.06); }
.social:hover{ background: rgba(255,255,255,.15); }
.brand{ font-weight:800; letter-spacing:.3px; }
.btn{ display:inline-block; padding:12px 18px; border-radius:999px; font-weight:700; text-decoration:none; cursor:pointer; transition: transform .1s ease; }
.btn-primary{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#00131a; }
.btn-primary:hover{ transform: translateY(-2px); }


/* Hero */
.hero{ padding: 100px 20px 70px; text-align:center; }
.hero h1{ font-size: clamp(32px, 6vw, 60px); margin-bottom: 18px; text-shadow: 0 4px 30px rgba(0,0,0,.45); }
.hero p{ max-width: 850px; margin: 0 auto 24px; color: var(--muted); font-size: 18px; }
.quote{ font-style: italic; color: #fff; margin: 24px auto 36px; max-width: 760px; font-size: 20px; }


/* Donate */
.donate-section{ padding: 60px 20px; text-align:center; }
.donate-card{ background: var(--card); border:1px solid var(--stroke); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; max-width: 560px; margin: 0 auto; }
.donate-card h2{ margin-top:0; }


.amounts{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; border:0; margin: 12px 0 6px; padding:0; }
.amounts input[type="radio"]{ position:absolute; opacity:0; pointer-events:none; }
.pill{ padding:10px 18px; border-radius:999px; border:1px solid var(--stroke); background: rgba(255,255,255,.08); color:#fff; cursor:pointer; user-select:none; }
.amounts input:checked + .pill{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#00131a; border-color: transparent; }


.custom-amount{ display:none; margin-top: 12px; }
.donate-form:has(#amt-other:checked) .custom-amount{ display:block; }
.custom-amount input{ width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--stroke); background: rgba(255,255,255,.06); color:#fff; font-size:16px; text-align:center; }


/* Continue button routing (CSS-only) */
.pay{ display:none; }
.donate-form:has(#amt-10:checked) .pay-10{ display:inline-block; }
.donate-form:has(#amt-25:checked) .pay-25{ display:inline-block; }
.donate-form:has(#amt-50:checked) .pay-50{ display:inline-block; }
.donate-form:has(#amt-100:checked) .pay-100{ display:inline-block; }
.donate-form:has(#amt-other:checked) .pay-other{ display:inline-block; }


.submit-row{ margin-top: 16px; }
.note{ color: var(--muted); font-size: 13px; margin-top: 10px; }


/* Footer */
footer{ text-align:center; padding: 40px 20px; color: var(--muted); }

body {
  margin: 0;
  font-family: Inter, sans-serif;
  color: #fff; /* make text readable */
  background: url("image.jpg") no-repeat center center fixed;
  background-size: cover;
}

.stories-section {
  text-align: center;
  padding: 60px 20px;
  max-width: 800px;
  margin: 0 auto;
}

.stories-section h2 {
  margin-bottom: 24px;
  font-size: 28px;
}

.stories-section blockquote {
  margin: 20px auto;
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  color: #fff;
}

.stories-section .author {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
}
.top-banner {
  width: 100%;
  background: linear-gradient(90deg, #1e3c72, #2a5298); /* Ocean blue gradient */
  color: #fff;
  text-align: center;
  padding: 12px 50px 12px 20px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.top-banner .banner-link {
  padding: 6px 14px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.3s ease;
}

.top-banner .banner-link:hover {
  background: rgba(255, 255, 255, 0.3);
}

.banner-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
}

.banner-close:hover {
  opacity: 0.7;
}