/* Shell for the Accessibility, Privacy Policy, and Terms of Service pages.
   The hero, water column, Donate block, and buttons reuse the home page's class names and
   their rules are copied in below the marker by tools/sync_legal_css.py. Everything above
   the marker is hand-written. The footer block must match the footer in index.html. */
:root {
  --white: #f0f4f8;
  --fog: #8a9bb5;
  --gold: #D4A843;
  --gold-dim: rgba(212,168,67,0.15);
  --gold-glow: rgba(212,168,67,0.08);
  --fund-dark: #0A0A0F;
  --fund-deep: #111118;
  --fund-card: #141420;
  --fund-border: rgba(212,168,67,0.12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--fund-dark); color: var(--white);
  font-family: 'Barlow', sans-serif; font-size: 17px; line-height: 1.7;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: var(--gold); }
a:hover { color: var(--white); }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: 1000;
  background: var(--gold); color: #0A0A0F; padding: 10px 16px; text-decoration: none;
  font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
}
.skip-link:focus { left: 8px; }
html { scroll-padding-bottom: 96px; }

/* >>> synced from index.html by tools/sync_legal_css.py; do not edit by hand */
/* Class names are the same as on the home page so these rules apply unchanged. */
.foundation-hero {
  min-height: 78vh;
  display: flex; align-items: center; justify-content: center;
  text-align: left; padding: 88px 48px 72px;
  position: relative; overflow: hidden;
  /* Poster frame sits under the looping video so the hero is never blank. */
  background: url('hero-diver-flag-poster.jpg') center 32% / cover no-repeat #060609;
}
.foundation-hero-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 32%;
  pointer-events: none;
}
.foundation-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,6,9,0.68) 0%, rgba(6,6,9,0.34) 38%, rgba(6,6,9,0) 66%),
    linear-gradient(180deg, rgba(6,6,9,0.10) 0%, rgba(10,10,15,0) 35%, rgba(10,10,15,0) 80%, #040c1f 100%);
}
.foundation-hero-inner { width: 100%; max-width: 1100px; position: relative; z-index: 2; }
.foundation-hero-copy { max-width: 760px; text-shadow: 0 2px 14px rgba(0,0,0,0.7); }
.site-brand { display: block; width: max-content; margin-bottom: 24px; line-height: 0; }
.site-brand img { width: 140px; height: 140px; display: block; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.5)); }
.foundation-hero h1 {
  font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: clamp(48px, 6.6vw, 92px);
  line-height: 0.9; text-transform: uppercase; letter-spacing: -2px; margin-bottom: 28px;
}
.foundation-hero h1 em { font-style: normal; color: var(--gold); }
.foundation-hero-sub {
  font-weight: 300; font-size: 20px; line-height: 1.7;
  color: var(--fog); max-width: 640px; margin: 0 0 36px;
}
.foundation-hero-actions { display: flex; gap: 16px; justify-content: flex-start; flex-wrap: wrap; }
.btn-gold {
  display: inline-block; padding: 16px 48px;
  background: var(--gold); color: #0A0A0F;
  font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: 14px; letter-spacing: 3px; text-transform: uppercase;
  text-decoration: none; transition: all 0.3s ease;
  clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%); padding-right: 56px;
}
.btn-gold:hover { background: #e8ba50; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(212,168,67,0.3); color: #0A0A0F; }
.btn-fund-ghost {
  display: inline-block; padding: 16px 36px;
  background: transparent; color: var(--white);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 500;
  font-size: 14px; letter-spacing: 3px; text-transform: uppercase;
  text-decoration: none; border: 1px solid rgba(240,244,248,0.2); transition: all 0.3s ease;
}
.btn-fund-ghost:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-glow); }
.f-section { padding: 72px 48px; position: relative; overflow: hidden; }
.f-wrap { max-width: 1100px; margin: 0 auto; position: relative; z-index: 5; }
.f-tag {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 500;
  font-size: 13px; letter-spacing: 5px; text-transform: uppercase;
  color: var(--gold); display: flex; align-items: center; gap: 16px; margin-bottom: 16px;
}
.f-tag::before { content: ''; width: 30px; height: 1px; background: var(--gold); }
.f-section h2, .programs-section h2 {
  font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: clamp(36px, 5vw, 68px); line-height: 0.95;
  text-transform: uppercase; letter-spacing: -1px; margin-bottom: 20px;
}
.f-section h2 em, .programs-section h2 em { font-style: normal; color: var(--gold); }
.f-section p, .programs-content > p {
  font-weight: 300; font-size: 18px; line-height: 1.8;
  color: var(--fog); max-width: 680px; margin-bottom: 20px;
}
.f-section p strong { color: var(--white); font-weight: 500; }
.water-column {
  position: relative;
  background: url('water-column.jpg') center / 100% 100% no-repeat #040c1f;
}
.donate-section {
  /* Poster frame sits under the looping video so the section is never blank. */
  background: url('donate-wreck-poster.jpg') left 45% / 125% auto no-repeat var(--fund-dark);
  border-bottom: 1px solid var(--fund-border);
}
.donate-section { min-height: 440px; display: flex; align-items: center; }
.donate-video {
  position: absolute; inset: 0; z-index: 0;
  /* Clip is mirrored; running it 125% wide from the left edge puts the diver in the clear right third. */
  width: 125%; height: 100%;
  object-fit: cover; object-position: left 45%;
  pointer-events: none;
}
.donate-section::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,10,15,0.38) 0%, rgba(10,10,15,0.18) 38%, rgba(10,10,15,0) 66%);
}
.donate-section::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 120px; z-index: 1; pointer-events: none;
  background: url('water-column-edge.jpg') center top / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 100%);
}
.donate-copy { position: relative; text-shadow: 0 2px 14px rgba(0,0,0,0.75); }
.donate-copy p { max-width: 560px; color: #c9d2df; }
.donate-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.donate-alt { font-size: 15px; margin: 24px 0 0; }
.donate-alt a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(212,168,67,0.35); }
.donate-alt a:hover { color: var(--white); border-color: var(--white); }
/* <<< end of synced rules */

/* Hero: the home-page hero, shorter, carrying the badge and the page title. */
.foundation-hero.legal-hero { min-height: 54vh; padding: 72px 48px 64px; }
.foundation-hero.legal-hero h1 { font-size: clamp(40px, 5.8vw, 78px); margin-bottom: 14px; }
.legal-updated {
  font-family: 'Barlow Condensed', sans-serif; font-size: 13px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--fog); margin: 0 0 28px;
}

/* Body copy: a card over the water column so the text stays readable on the bright base. */
.legal-main {
  max-width: 880px; margin: 72px auto 96px; padding: 56px 64px;
  background: rgba(17,17,24,0.9); border: 1px solid var(--fund-border);
  position: relative; z-index: 2;
}
.legal-lead { font-size: 19px; color: var(--white); }
.legal-main h2 {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 22px; letter-spacing: 1px;
  text-transform: uppercase; margin: 44px 0 12px; color: var(--white);
}
.legal-main h3 { font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 17px; letter-spacing: 1px; text-transform: uppercase; margin: 28px 0 8px; }
.legal-main p, .legal-main li { color: #c9d2df; }
.legal-main p { margin: 0 0 16px; }
.legal-main ul { padding-left: 22px; margin: 0 0 16px; }
.legal-main li { margin: 6px 0; }
.legal-main strong { color: var(--white); font-weight: 500; }
.legal-note { border-left: 2px solid var(--gold); padding: 6px 0 6px 20px; margin: 24px 0; }
.legal-note p { color: var(--white); margin: 0; }
.legal-toc { border: 1px solid var(--fund-border); background: var(--fund-card); padding: 20px 24px; margin: 0 0 40px; }
.legal-toc strong { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.legal-toc ul { margin: 0; padding-left: 18px; columns: 2; column-gap: 32px; }
.legal-toc li { margin: 3px 0; break-inside: avoid; }
.legal-toc a { color: #c9d2df; text-decoration: none; }
.legal-toc a:hover { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .foundation-hero-video, .donate-video { display: none; }
}

/* Footer: keep identical to the footer in index.html */
.foundation-footer { border-top: 1px solid var(--fund-border); background: var(--fund-deep); padding: 32px 48px 88px; }
.footer-wrap {
  max-width: 1100px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
}
.footer-brand {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 15px;
  letter-spacing: 3px; text-transform: uppercase; color: var(--white);
  display: flex; align-items: center; gap: 16px;
}
.footer-logo { width: 56px; height: 56px; flex: none; }
.footer-brand span {
  display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 400;
  font-size: 12px; letter-spacing: 2px; color: var(--fog); margin-top: 6px;
}
.footer-links { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.footer-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 13px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--fog); text-decoration: none;
  border: 1px solid var(--fund-border); padding: 10px 16px; transition: all 0.3s ease;
}
.footer-link:hover { color: var(--gold); border-color: var(--gold); background: var(--gold-glow); }
.footer-link svg { width: 16px; height: 16px; fill: currentColor; }
.footer-bottom {
  max-width: 1100px; margin: 24px auto 0; padding-top: 18px; border-top: 1px solid var(--fund-border);
  display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap;
}
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-legal a {
  font-family: 'Barlow Condensed', sans-serif; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--fog); text-decoration: none; border-bottom: 1px solid transparent; transition: all 0.3s ease;
}
.footer-legal a:hover, .footer-legal a[aria-current="page"] { color: var(--gold); border-color: var(--gold); }
.footer-copy { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; letter-spacing: 1.5px; color: var(--fog); margin: 0; }
.footer-meta { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.footer-badge { display: inline-flex; flex: none; line-height: 0; border-radius: 5px; }
.footer-badge img { display: block; width: 149px; height: 32px; }

/* Phone overrides, mirroring the home page's 768px rules for the same blocks. */
@media (max-width: 768px) {
  .foundation-hero.legal-hero { padding: 64px 24px 48px; }
  .foundation-hero {
    text-align: center;
    background: url('hero-diver-flag-poster.jpg') 72% 30% / cover no-repeat #060609;
  }
  .foundation-hero-video { object-position: 72% 30%; }
  .foundation-hero::before {
    background:
      linear-gradient(180deg, rgba(6,6,9,0.46) 0%, rgba(6,6,9,0.40) 50%, rgba(10,10,15,0.78) 88%, #040c1f 100%);
  }
  .foundation-hero-copy { max-width: none; }
  .site-brand { margin: 0 auto 18px; }
  .site-brand img { width: 104px; height: 104px; }
  .f-tag { justify-content: center; }
  .foundation-hero-actions { justify-content: center; }
  .legal-main { margin: 40px 16px 64px; padding: 32px 22px; }
  .legal-toc ul { columns: 1; }
  .f-section { padding: 48px 24px; }
  .donate-section {
    background: url('donate-wreck-poster.jpg') 41% center / cover no-repeat var(--fund-dark);
  }
  .donate-video { width: 100%; object-position: 41% center; }
  .donate-section::before {
    background:
      linear-gradient(180deg, rgba(10,10,15,0.08) 0%, rgba(10,10,15,0.05) 50%, rgba(10,10,15,0.50) 100%);
  }
  .foundation-footer { padding: 32px 24px 88px; }
  .footer-wrap, .footer-bottom { flex-direction: column; align-items: flex-start; }
}