/* Homepage white-space tighten.
   Reduces oversized section padding and inner gaps on the homepage only.
   This file is linked only from /index.html so subpages keep their styling. */

/* Hero: was min-height 900px with 128px top padding. Bring it down. */
main > section.min-h-screen {
  min-height: 720px !important;
}
main > section.min-h-screen > div.pt-32 {
  padding-top: 5rem !important;
  padding-bottom: 3.5rem !important;
}

/* "1884" hero watermark.
   The build renders TWO overlapping 1884 numerals at slightly different sizes
   (a text-[20rem] layer pinned bottom-right and a duplicate text-[18rem] layer
   inside the hero grid). Their misaligned edges created a doubled, blurry
   "double-vision" effect. Collapse it to ONE clean watermark: hide the in-grid
   duplicate and tighten + soften the remaining bottom-right numerals. */

/* Hide the duplicate in-grid 1884 layer. */
main > section.min-h-screen .reveal span.text-\[18rem\] {
  display: none !important;
}

/* Tighten the remaining bottom-right 1884 and keep it a subtle watermark. */
main > section.min-h-screen .absolute.bottom-8 span.text-\[12rem\] {
  font-size: 16rem !important;
  letter-spacing: -1.2rem !important;
  /* 14% white keeps the numerals clearly readable while still reading as a
     subtle background watermark (5% was too faint to read). */
  color: rgba(255, 255, 255, 0.14) !important;
}
@media (max-width: 768px) {
  main > section.min-h-screen .absolute.bottom-8 span.text-\[12rem\] {
    font-size: 9rem !important;
    letter-spacing: -0.6rem !important;
  }
}

/* The legacy label shares the duplicate's container; once that collapses, keep
   the label on a single line so it doesn't wrap into a narrow stack. */
main > section.min-h-screen .absolute.bottom-8.right-0 p {
  white-space: nowrap !important;
}

/* Lift the lower "1884" watermark up so the Why/What/How cards don't
   overlap it. The wrapper uses Tailwind `bottom-8` (32px from hero bottom);
   override to a much larger offset so the numerals sit above the card row. */
main > section.min-h-screen .absolute.bottom-8 {
  bottom: 16rem !important; /* ~256px clears the cards on desktop */
}
@media (max-width: 768px) {
  /* On mobile the cards stack vertically; tuck the watermark just below the
     hero copy and above the cards. */
  main > section.min-h-screen .absolute.bottom-8 {
    bottom: 22rem !important;
  }
}

/* Cap section padding at 48px (was 128px on some sections). */
main > section.py-24,
main > section.lg\:py-32 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}
@media (min-width: 1024px) {
  main > section.py-24,
  main > section.lg\:py-32 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

/* Trim large inner gaps and margins. */
main > section .gap-16 { gap: 2.5rem !important; }
main > section .gap-12 { gap: 2rem !important; }
main > section .mb-16  { margin-bottom: 2.5rem !important; }
main > section .mb-12  { margin-bottom: 2rem !important; }

/* Card inner padding (p-12 = 48px) trimmed slightly. */
main > section .p-8.md\:p-12,
main > section .p-12 {
  padding: 2rem !important;
}
@media (min-width: 768px) {
  main > section .p-8.md\:p-12 {
    padding: 2.5rem !important;
  }
}

/* Mobile: ensure hero doesn't claim a whole viewport on phones. */
@media (max-width: 768px) {
  main > section.min-h-screen {
    min-height: auto !important;
  }
  main > section.min-h-screen > div.pt-32 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  main > section.py-24 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
}

/* Newsletter (dark band before footer) and pre-footer divs. */
div.py-16.bg-\[hsl\(0\,0\%\,6\%\)\] {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

/* --- Legacy Circle section: switch to dark background ---
   The 'Be one of the first to help build lasting care' section is the
   5th <section> in <main> (0-indexed: 4). It currently has bg-white +
   dark text. Switch to a near-black background and lift text + numbered
   step labels to cream/light values so contrast stays accessible. */
main > section:nth-of-type(5) {
  background-color: hsl(0, 0%, 6%) !important;
}
main > section:nth-of-type(5) h1,
main > section:nth-of-type(5) h2,
main > section:nth-of-type(5) h3,
main > section:nth-of-type(5) h4,
main > section:nth-of-type(5) blockquote {
  color: hsl(40, 20%, 95%) !important;
}
main > section:nth-of-type(5) p {
  color: hsl(40, 15%, 75%) !important;
}
/* Keep the small kicker label readable but muted on dark */
main > section:nth-of-type(5) span.uppercase,
main > section:nth-of-type(5) .text-xs.uppercase,
main > section:nth-of-type(5) [class*="tracking-"][class*="uppercase"] {
  color: hsl(40, 15%, 65%) !important;
}
/* Preserve the gold accents (numbered 01/02/03 + Founding Season callout) */
main > section:nth-of-type(5) .text-gold,
main > section:nth-of-type(5) [class*="text-gold"] {
  color: hsl(43, 75%, 60%) !important;
}
/* The Founding Season info card inside this section uses a light background.
   It's a `bg-[hsl(40,15%,96%)]` div (light cream) that becomes invisible-on-
   invisible when we lift the section's body text to light cream. Catch every
   light-background utility used in this section and convert to a darker fill
   with a subtle warm border so the card still reads as a contained module. */
main > section:nth-of-type(5) .bg-white,
main > section:nth-of-type(5) [class*="bg-[hsl(40,"],
main > section:nth-of-type(5) [class*="bg-[hsl(0,0%,9"],
main > section:nth-of-type(5) [class*="bg-[hsl(0,0%,10"] {
  background-color: hsl(0, 0%, 11%) !important;
  border: 1px solid hsl(43, 20%, 22%) !important;
}
/* Inputs and buttons inside the section keep their look but with cream text. */
main > section:nth-of-type(5) a {
  color: inherit;
}
/* Email link in the Founding Season callout: make sure it reads on dark */
main > section:nth-of-type(5) a[href^="mailto:"] {
  color: hsl(43, 75%, 60%) !important;
}
/* Buttons on the dark section: the 'Become a Founding Legacy Donor' button
   was likely dark text on a light pill; flip to dark text on gold pill. */
main > section:nth-of-type(5) a.bg-gold,
main > section:nth-of-type(5) a[class*="bg-[hsl(43"] {
  color: hsl(0, 0%, 6%) !important;
}