/**
 * page-foundation.css
 * Foundation page — template-foundation.php
 *
 * Enqueue in functions.php:
 *   if ( is_page_template( 'template-foundation.php' ) ) {
 *     wp_enqueue_style(
 *       'psp-foundation',
 *       get_template_directory_uri() . '/css/page-foundation.css',
 *       [ 'psp-main' ],
 *       '1.0.0'
 *     );
 *   }
 *
 * Global classes NOT in this file (already in main.css):
 *   .eyebrow, .hero-headline, .seo-h1, .btn-primary, .btn-secondary,
 *   .btn-arrow, .breadcrumb, .container
 */


/* =============================================================================
   HERO
   ============================================================================= */

.foundation-hero {
  padding: 120px 0 80px;
  position: relative;
  border-bottom: 1px solid rgba(184, 184, 184, 0.1);
}

/* Decorative watermark — not user-editable */
.foundation-hero::before {
  content: 'PSPEF';
  position: absolute;
  right: 0;
  top: 40px;
  font-family: var(--serif);
  font-size: 180px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.02);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.04em;
}

.foundation-hero-inner {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 80px;
  align-items: center;
}

/* Override the global .eyebrow bottom margin inside the hero */
.foundation-hero-left .eyebrow {
  margin-bottom: 20px;
}

.foundation-hero-lead {
  font-size: 18px;
  color: var(--silver);
  line-height: 1.8;
  margin-top: 24px;
  font-weight: 300;
}

/* Logo box — rendered when foundation_logo field is populated,
   falls back to .logo-placeholder when empty */
.foundation-hero-logo {
  background: var(--white);
  border: 1px solid rgba(184, 184, 184, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  width: 300px;
  margin: 0 auto;
}

/* Uploaded logo image inside the box */
.foundation-hero-logo img {
  max-width: 280px;
  width: 100%;
  height: auto;
  display: block;
}

/* Placeholder shown until logo is uploaded */
/* Note: .logo-placeholder may also appear on other pages — check main.css */
.logo-placeholder {
  text-align: center;
  color: rgba(184, 184, 184, 0.3);
}

.logo-placeholder p {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--sans);
  font-weight: 500;
  margin-top: 16px;
}


/* =============================================================================
   DISCLAIMER BOX
   ============================================================================= */

.foundation-disclaimer {
  background: #141414;
  border: 1px solid rgba(184, 184, 184, 0.12);
  border-left: 3px solid var(--silver);
  padding: 20px 28px;
  margin-top: 56px;
  max-width: 780px;
}

.foundation-disclaimer p {
  font-size: 14px;
  color: var(--silver);
  line-height: 1.7;
  font-weight: 300;
}

.foundation-disclaimer strong {
  color: var(--white);
  font-weight: 500;
}


/* =============================================================================
   CONTENT — PROSE + SIDEBAR LAYOUT
   ============================================================================= */

.foundation-content {
  padding: 100px 0;
}

.foundation-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 80px;
  align-items: start;
}

/* Override .eyebrow inside the content section */
.foundation-content .eyebrow {
  margin-bottom: 20px;
}


/* =============================================================================
   PROSE COLUMN
   ============================================================================= */

.foundation-prose h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 24px;
  color: var(--white);
}

.foundation-prose h2 em {
  font-style: italic;
  font-weight: 500;
  background: var(--silver-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.foundation-prose p {
  font-size: 17px;
  color: var(--silver);
  line-height: 1.85;
  margin-bottom: 20px;
  font-weight: 300;
}

.foundation-prose p:last-child {
  margin-bottom: 0;
}


/* =============================================================================
   PROGRAMS LIST
   ============================================================================= */

.programs-list {
  list-style: none;
  margin: 32px 0;
}

.programs-list li {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px 0;
  border-top: 1px solid rgba(184, 184, 184, 0.08);
}

.programs-list li:last-child {
  border-bottom: 1px solid rgba(184, 184, 184, 0.08);
}

.program-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(184, 184, 184, 0.06);
  border: 1px solid rgba(184, 184, 184, 0.12);
  margin-top: 2px;
}

.program-body h4 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
}

/* Override .foundation-prose p for program descriptions */
.program-body p {
  font-size: 15px;
  color: var(--silver);
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 0;
}

.program-scholarship {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--silver-dark);
}

.program-scholarship::before {
  content: '';
  width: 16px;
  height: 1px;
  background: var(--silver-dark);
}


/* =============================================================================
   SIDEBAR COLUMN
   ============================================================================= */

.foundation-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 120px;
}

/* Base sidebar card */
.sidebar-card {
  background: #141414;
  border: 1px solid rgba(184, 184, 184, 0.1);
  padding: 28px 24px;
}

/* Remove duplicate top border between stacked cards */
.sidebar-card + .sidebar-card {
  border-top: none;
}

.sidebar-card .card-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver-dark);
  margin-bottom: 12px;
}

.sidebar-card h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 12px;
}

.sidebar-card p {
  font-size: 14px;
  color: var(--silver);
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 0;
}

/* "What we fund" bullet list */
.sidebar-card ul {
  list-style: none;
  margin-top: 12px;
}

.sidebar-card ul li {
  font-size: 14px;
  color: var(--silver);
  line-height: 1.6;
  font-weight: 300;
  padding: 6px 0;
  border-bottom: 1px solid rgba(184, 184, 184, 0.06);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.sidebar-card ul li:last-child {
  border-bottom: none;
}

.sidebar-card ul li::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--silver-dark);
  flex-shrink: 0;
  margin-top: 7px;
}

/* Donate card — inverted (white background) */
.sidebar-donate {
  background: var(--white);
  border: 1px solid var(--white);
  padding: 28px 24px;
  text-align: center;
}

.sidebar-donate .card-label {
  color: #555;
}

.sidebar-donate h3 {
  color: #0a0a0a;
}

.sidebar-donate p {
  color: #555;
}

.donate-btn {
  display: inline-block;
  margin-top: 20px;
  background: #0a0a0a;
  color: var(--white);
  padding: 14px 32px;
  font-size: 13px;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid #0a0a0a;
  transition: background 0.2s, border-color 0.2s;
  width: 100%;
}

.donate-btn:hover {
  background: #232323;
  border-color: #232323;
}

.tax-note {
  display: block;
  margin-top: 12px;
  font-size: 12px;
  color: #888;
  font-style: italic;
  font-family: var(--serif);
}


/* =============================================================================
   MISSION / VISION / VALUES
   ============================================================================= */

.mvv-section {
  padding: 80px 0;
  border-top: 1px solid rgba(184, 184, 184, 0.1);
}

/* Override .eyebrow bottom margin inside MVV */
.mvv-section .eyebrow {
  margin-bottom: 16px;
}

/* Section heading — corresponds to .mvv-section-heading in the PHP template */
.mvv-section-heading {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--white);
  max-width: 640px;
}

.mvv-section-heading em {
  font-style: italic;
  font-weight: 500;
  background: var(--silver-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mvv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 56px;
}

.mvv-card {
  background: #141414;
  border: 1px solid rgba(184, 184, 184, 0.08);
  padding: 40px 32px;
}

.mvv-card .mvv-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver-dark);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.mvv-card .mvv-label::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--silver-dark);
}

.mvv-card h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 16px;
}

.mvv-card p {
  font-size: 15px;
  color: var(--silver);
  line-height: 1.8;
  font-weight: 300;
  margin-bottom: 0;
}

/* Vision bullet list */
.mvv-card ul {
  list-style: none;
  margin-top: 4px;
}

.mvv-card ul li {
  font-size: 15px;
  color: var(--silver);
  line-height: 1.7;
  font-weight: 300;
  padding: 8px 0;
  border-bottom: 1px solid rgba(184, 184, 184, 0.06);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.mvv-card ul li:last-child {
  border-bottom: none;
}

.mvv-card ul li::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--silver-dark);
  flex-shrink: 0;
  margin-top: 8px;
}

/* Values tag pills */
.values-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 32px;
}

.value-tag {
  background: rgba(184, 184, 184, 0.06);
  border: 1px solid rgba(184, 184, 184, 0.1);
  padding: 10px 20px;
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  color: var(--silver);
}


/* =============================================================================
   CONTRIBUTION CTA
   ============================================================================= */

.contribution-section {
  padding: 80px 0;
  border-top: 1px solid rgba(184, 184, 184, 0.1);
  background: #141414;
}

/* Override .eyebrow bottom margin inside CTA */
.contribution-section .eyebrow {
  margin-bottom: 16px;
}

.contribution-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 80px;
  align-items: center;
}

.contribution-inner h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--white);
  margin-bottom: 16px;
}

.contribution-inner h2 em {
  font-style: italic;
  font-weight: 500;
  background: var(--silver-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.contribution-inner p {
  font-size: 16px;
  color: var(--silver);
  line-height: 1.75;
  font-weight: 300;
}

.contribution-cta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  flex-shrink: 0;
}

.tax-deductible {
  font-size: 12px;
  color: var(--silver-dark);
  font-style: italic;
  font-family: var(--serif);
}


/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 1100px) {
  .foundation-hero-inner    { grid-template-columns: 1fr; gap: 48px; }
  .foundation-grid          { grid-template-columns: 1fr; gap: 48px; }
  .foundation-sidebar       { position: static; }
  .mvv-grid                 { grid-template-columns: 1fr; }
  .contribution-inner       { grid-template-columns: 1fr; gap: 40px; }
  .contribution-cta         { align-items: flex-start; }
}

@media (max-width: 900px) {
  .foundation-hero          { padding: 80px 0 60px; }
  .foundation-hero::before  { font-size: 120px; }
  .foundation-content       { padding: 60px 0; }
  .mvv-section              { padding: 60px 0; }
  .contribution-section     { padding: 60px 0; }
}