/* Rivers Foundation — static site styles */

:root {
  --charcoal: #2c2c2c;
  --charcoal-dark: #1a1a1a;
  --red: #e2001a;
  --red-dark: #b80015;
  --white: #ffffff;
  --grey-text: #555555;
  --grey-line: #e4e4e4;
  --grey-bg: #f6f6f4;
  --radius: 12px;
  --max-width: 1120px;
  --header-h: 68px;
  --font: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

body {
  margin: 0;
  font-family: var(--font);
  color: #333;
  background: var(--white);
  line-height: 1.6;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.narrow { max-width: 820px; }

section { padding: 80px 0; }

.section-alt { background: var(--grey-bg); }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--grey-line);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.brand img { height: 38px; width: auto; }

.main-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
}

.main-nav a {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--charcoal);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.main-nav a:hover { color: var(--red); }

.main-nav .nav-cta {
  padding: 8px 18px;
  border: 1.5px solid var(--charcoal);
  border-radius: 999px;
}

.main-nav .nav-cta:hover { border-color: var(--red); }

.nav-toggle {
  display: none;
  padding: 8px 18px;
  background: none;
  border: 1.5px solid var(--charcoal);
  border-radius: 999px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--charcoal);
  cursor: pointer;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 14px 32px;
  background: var(--red);
  color: var(--white);
  font-family: inherit;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1.5px solid var(--red);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn:hover { background: var(--red-dark); border-color: var(--red-dark); }

.btn-ghost { background: transparent; color: var(--charcoal); border-color: var(--charcoal); }

.btn-ghost:hover { background: var(--charcoal); border-color: var(--charcoal); color: var(--white); }

.btn-light { background: var(--white); color: var(--charcoal-dark); border-color: var(--white); }

.btn-light:hover { background: transparent; color: var(--white); border-color: var(--white); }

/* Section labels: small spaced capitals with a short rule underneath */
.label {
  margin: 0 0 32px;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--charcoal);
}

.label::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 12px;
  background: var(--red);
}

.lede {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--charcoal);
  margin-top: 0;
}

p { color: var(--grey-text); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

/* Hero: the photo fades to white on its right, so the text sits there */
.hero {
  padding: 0;
  /* The photo is 1920x600; matching its shape keeps its white right-hand
     side in view, and the gradient makes sure the text always has it. */
  min-height: max(440px, calc(100vw * 600 / 1920));
  display: flex;
  align-items: center;
  background:
    linear-gradient(to right, rgba(253, 249, 248, 0) 45%, rgba(253, 249, 248, 0.9) 68%),
    #fdf9f8 url('../assets/images/hero-home.jpg') left center / cover no-repeat;
}

.hero .container { width: 100%; display: flex; justify-content: flex-end; }

.hero-text { width: min(400px, 100%); padding: 60px 0; }

.eyebrow {
  margin: 0 0 12px;
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--charcoal);
}

.hero h1 {
  margin: 0 0 18px;
  font-size: clamp(3rem, 7vw, 5.2rem);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--charcoal-dark);
}

.hero-sub { font-size: 1.15rem; color: var(--charcoal); margin: 0 0 28px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Who we are */
.facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.facts li {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  background: var(--grey-bg);
  border-radius: var(--radius);
}

.facts strong {
  min-width: 3.4em;
  font-size: 2rem;
  font-weight: 800;
  color: var(--red);
}

.facts span { color: var(--charcoal); }

/* The 18A fact links to the tax certificate request; the whole card is the link. */
.facts li:has(.fact-link) { padding: 0; }

.fact-link {
  /* Fill the card, so the hover covers all of it rather than just the text. */
  flex: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
}

.fact-link:hover,
.fact-link:focus-visible { background: var(--grey-line); }

.fact-link .fact-cta {
  display: block;
  margin-top: 6px;
  font-weight: 700;
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* What we do */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 72px;
}

.tile {
  display: flex;
  gap: 18px;
  padding: 26px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
}

.tile-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--charcoal);
}

.tile-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--white);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* What We Do slider. The track scrolls sideways and snaps to each card; the
   padding gives the cards' shadows room inside the scrolling box. */
.slider-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.slider-nav { display: flex; gap: 10px; }

.slider-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--charcoal);
  border-radius: 50%;
  background: transparent;
  color: var(--charcoal);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

/* An SVG arrow rather than a text glyph, which sits on the font's baseline
   and so never quite centres in the circle. */
.slider-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.slider-btn:hover:not(:disabled) { background: var(--charcoal); color: var(--white); }

.slider-btn:disabled { opacity: 0.3; cursor: default; }

.tiles.slider-track {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: calc((100% - 40px) / 3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 6px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 6px 6px 22px;
  margin: -6px -6px 50px;
}

.slider-track::-webkit-scrollbar { display: none; }

.slider-track > .tile { scroll-snap-align: start; }

.slider-track:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.tile h3 { margin: 4px 0 6px; font-size: 1.15rem; color: var(--charcoal-dark); }

.tile p { margin: 0; font-size: 0.95rem; }

/* Donate */
.donate-band {
  width: 70%;
  min-width: 640px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 40px;
  padding: 36px 44px;
  background: var(--red);
  color: var(--white);
  border-radius: var(--radius);
}

.donate-band h2 { margin: 0 0 4px; font-size: 2rem; }

.donate-band p { color: rgba(255, 255, 255, 0.9); }

.donate-band h3 { margin: 0 0 10px; }

.payfast-form { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 8px; }

.form-label {
  flex: 1 1 100%;
  margin: 4px 0 -4px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.form-label:first-of-type { margin-top: 0; }

.drive-field { flex: 1 1 100%; display: block; }

.drive-field select {
  width: 100%;
  padding: 15px 44px 15px 20px;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--charcoal);
  cursor: pointer;
  appearance: none;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232c2c2c' stroke-width='1.6'/%3E%3C/svg%3E") right 20px center / 12px no-repeat;
}

.drive-field select:focus { outline: 2px solid var(--charcoal); }

.amount-field {
  display: flex;
  align-items: center;
  flex: 1 1 100%;
  background: var(--white);
  border-radius: 999px;
  padding: 0 20px;
}

.amount-field .prefix { font-weight: 700; color: var(--charcoal); }

.amount-field input {
  width: 100%;
  padding: 13px 10px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 1.1rem;
  color: var(--charcoal);
}

.amount-field input:focus { outline: none; }

.amount-field:focus-within { outline: 2px solid var(--charcoal); }

.pay-buttons { display: flex; flex-wrap: wrap; gap: 10px; flex: 1 1 100%; margin-top: 4px; }

.pay-buttons .btn { flex: 1 1 140px; }

.btn-outline-light { background: transparent; color: var(--white); border-color: var(--white); }

.btn-outline-light:hover { background: var(--white); color: var(--charcoal-dark); }

.donate-note { font-size: 0.85rem; margin: 0; }

.donate-eft { border-left: 1px solid rgba(255, 255, 255, 0.35); padding-left: 48px; }

.donate-eft .donate-debit { margin-top: 28px; }

.donate-eft .text-link { color: var(--white); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

.donate-eft .text-link:hover { text-decoration-thickness: 2px; }

/* Footer. On the home page it opens with the contact block; other pages
   can include that block or just the bottom bar. */
.site-footer {
  background: var(--grey-bg);
  border-top: 1px solid var(--grey-line);
  padding-top: 80px;
}

.footer-contact { padding: 80px 0 64px; }

/* The heading with the form under it, both from the left edge. */
.contact-stack .backend-form { max-width: 640px; }

.muted { color: var(--grey-text) !important; font-style: italic; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  padding-bottom: 24px;
  font-size: 0.85rem;
}

.footer-bottom p { margin: 0; }

.footer-link { color: inherit; text-decoration: none; }

.footer-link:hover { color: var(--red); }

.footer-sep { margin: 0 6px; color: var(--grey-text); }

.footer-contact + .footer-bottom { border-top: 1px solid var(--grey-line); }

.footer-logo { height: 30px; width: auto; }

/* Standalone form pages (debit order) */
.form-page .container { max-width: 760px; }

/* Once the backend form has been sent, its thank-you message stands alone:
   the introduction above it was about filling the form in. */
.form-page:has(.followup-success) .form-intro { display: none; }

.privacy-notice h2 { font-size: 1.4rem; margin: 36px 0 8px; color: var(--charcoal-dark); }

.privacy-notice h3 { font-size: 1rem; margin: 20px 0 4px; color: var(--charcoal-dark); }

.privacy-notice p { margin: 0 0 10px; font-size: 0.95rem; }

.privacy-notice ul { margin: 0 0 10px; padding-left: 22px; font-size: 0.95rem; }

.privacy-notice .policy-meta { color: var(--grey-text); font-size: 0.85rem; }

.privacy-notice a { color: var(--red); text-decoration: underline; }

/* Backend-rendered forms (rivers.church forms backend, via /follow-up).
   The fragment carries no classes -- each field is a bare <div> holding a
   label, the control and, after a failed submit, an error <span> -- so it is
   styled by structure. */
.backend-form form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}

/* Every row spans both columns except Email and Contact Number, which share
   one. The fragment's rows have no classes, so they are picked out by the
   input inside them; a browser without :has() just stacks them full width. */
.backend-form form > * { grid-column: 1 / -1; }

.backend-form form > div:has(#email),
.backend-form form > div:has(#phone),
.backend-form form > div.half { grid-column: auto; }

.backend-form form > h3 { margin: 12px 0 0; }

.backend-form form > p { margin: 0; }

.backend-form form > div label {
  display: block;
  font-weight: 500;
  margin-bottom: 6px;
  font-size: 0.9rem;
  color: var(--charcoal);
}

.backend-form form > div input,
.backend-form form > div select,
.backend-form form > div textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: var(--white);
  font-family: inherit;
  font-size: 1rem;
}

.backend-form form > div textarea { min-height: 110px; resize: vertical; }

.backend-form form > div input[type="checkbox"] { width: auto; margin-right: 8px; }

/* Rows the backend asks only for some answers (data-show on the row; see
   website-backend's tax-certificate.html). Hidden until the answer they belong
   to is chosen. Without :has() every row simply shows, and the backend still
   ignores the ones that do not apply. */
.backend-form form:not(:has(#nature option[value="Natural Person"]:checked)) [data-show~="person"],
.backend-form form:not(:has(#nature option[value="Company"]:checked)) [data-show~="company"],
.backend-form form:not(:has(#id_type option[value="Passport"]:checked)) [data-show~="passport"] { display: none; }

.backend-form form > div span {
  display: block;
  margin-top: 4px;
  color: var(--red);
  font-size: 0.85rem;
}

/* The location is pinned by the embed URL and means nothing to a visitor
   here, so its read-only "Location: ..." row is hidden. The hidden input
   just before it still carries the value. */
.backend-form input[type="hidden"][name="location"] + div { display: none; }

.backend-form button {
  justify-self: start;
  padding: 14px 32px;
  background: var(--red);
  color: var(--white);
  font-family: inherit;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.2s ease;
}

.backend-form button:hover { background: var(--red-dark); }

/* htmx puts .htmx-request on the form while it is posting. */
.backend-form form.htmx-request button { opacity: 0.6; pointer-events: none; }

.backend-form .followup-success p,
.backend-form .followup-error p { font-size: 1.1rem; color: var(--charcoal); }

.backend-form .followup-error p,
.backend-form .form-failure { color: var(--red); }

/* Simple pages (thank-you) */
.page-message { text-align: center; padding: 120px 0; }

.page-message h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 0 0 16px; color: var(--charcoal-dark); }

.page-message .lede { max-width: 560px; margin: 0 auto 32px; }

/* Responsive */
@media (max-width: 900px) {
  .split,
  .donate-band { grid-template-columns: 1fr; gap: 36px; }

  .tiles { grid-template-columns: 1fr; }

  .tiles.slider-track { grid-auto-columns: calc((100% - 20px) / 2); }


  .donate-band { width: 100%; min-width: 0; padding: 40px 28px; }

  .donate-eft { border-left: none; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.35); padding-top: 28px; }

  .nav-toggle { display: block; }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--grey-line);
    display: none;
  }

  .main-nav.open { display: block; }

  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 20px;
  }

  .main-nav li { border-bottom: 1px solid var(--grey-line); }

  .main-nav li:last-child { border-bottom: none; padding-top: 14px; }

  .main-nav a { display: block; padding: 14px 0; }

  .main-nav .nav-cta { text-align: center; padding: 12px 18px; }

  /* The photo's white side is cropped away on narrow screens, so wash the
     whole thing back to keep the text readable. */
  .hero {
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.82)),
      url('../assets/images/hero-home.jpg');
  }

  .hero .container { justify-content: flex-start; }
}

@media (max-width: 480px) {
  .tiles.slider-track { grid-auto-columns: 85%; }

  section { padding: 60px 0; }

  .footer-bottom { flex-direction: column; text-align: center; }

  /* Too narrow for two fields side by side. */
  .backend-form form > div:has(#email),
  .backend-form form > div:has(#phone),
  .backend-form form > div.half { grid-column: 1 / -1; }
}