/*
Theme Name:   TJVV Foundation Child
Theme URI:    https://tjvv.org
Description:  Child theme for The Ted and Jane Von Voigtlander Foundation — Modern French Countryside design.
Author:       Web Developer
Template:     twentytwentyfive
Version:      1.0.0
Text Domain:  tjvv-child
*/

/* =====================================================
   CSS TOKENS
   ===================================================== */
:root {
  --cream:       #F7F4EF;
  --limestone:   #EDE6DA;
  --stone:       #D9CEBC;
  --sage:        #6B8B6B;
  --sage-light:  #8BAD8B;
  --sage-dark:   #4A6B4A;
  --terracotta:  #B56348;
  --gold:        #C9A870;
  --ink:         #2B2018;
  --ink-medium:  #5A4B38;
  --ink-light:   #8C7B68;
  --parchment:   #FDFAF6;
  --border:      #DDD2BF;
}

/* =====================================================
   GLOBAL
   ===================================================== */
body {
  background-color: var(--cream) !important;
  color: var(--ink) !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 300;
  line-height: 1.75;
}

/* =====================================================
   TYPOGRAPHY
   ===================================================== */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: 'Cormorant Garamond', serif !important;
}

h1, h1.wp-block-heading {
  font-size: clamp(2.6rem, 5vw, 4.5rem) !important;
  font-weight: 300 !important;
  line-height: 1.08 !important;
}

h2, h2.wp-block-heading {
  font-size: clamp(2rem, 3.5vw, 3rem) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
}

h3, h3.wp-block-heading {
  font-size: 1.45rem !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
}

/* Eyebrow label — apply class "tjvv-eyebrow" to a Paragraph block */
.tjvv-eyebrow, p.tjvv-eyebrow {
  font-family: 'Jost', sans-serif !important;
  font-size: 0.66rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--sage) !important;
  margin-bottom: 0.5rem !important;
}

/* Pull quote — apply class "tjvv-pullquote" to a Paragraph block */
.tjvv-pullquote, p.tjvv-pullquote {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 300 !important;
  font-style: italic !important;
  font-size: clamp(1.4rem, 2.5vw, 1.85rem) !important;
  line-height: 1.5 !important;
  color: var(--sage-dark) !important;
  text-align: center !important;
  max-width: 720px;
  margin: 0 auto !important;
}

/* =====================================================
   LINKS
   ===================================================== */
a { color: var(--sage); }
a:hover { color: var(--sage-dark); }

/* =====================================================
   HEADER / NAVIGATION
   ===================================================== */
.wp-block-template-part[data-slug="header"],
.site-header,
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--cream) !important;
  border-bottom: 1px solid var(--border);
  padding: 0 3rem;
}

.wp-block-navigation {
  background: var(--cream) !important;
}

.wp-block-navigation-item a,
.wp-block-navigation-item__label {
  font-family: 'Jost', sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ink-medium) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
  padding-bottom: 2px !important;
  border-bottom: 1px solid transparent !important;
}

.wp-block-navigation-item a:hover,
.wp-block-navigation-item.current-menu-item a {
  color: var(--sage) !important;
  border-bottom-color: var(--sage) !important;
}

.wp-block-site-title a,
.wp-block-site-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  letter-spacing: 0.01em !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
}

/* =====================================================
   BUTTONS
   ===================================================== */
.wp-block-button .wp-block-button__link {
  font-family: 'Jost', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 0 !important;
  padding: 0.8rem 1.85rem;
  transition: all 0.22s;
}

/* Primary: Sage — class "tjvv-btn-sage" on Button block */
.tjvv-btn-sage .wp-block-button__link {
  background-color: var(--sage) !important;
  color: var(--parchment) !important;
  border: none !important;
}
.tjvv-btn-sage .wp-block-button__link:hover { background-color: var(--sage-dark) !important; }

/* Outline dark — class "tjvv-btn-outline" on Button block */
.tjvv-btn-outline .wp-block-button__link {
  background-color: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
}
.tjvv-btn-outline .wp-block-button__link:hover {
  border-color: var(--sage) !important;
  color: var(--sage) !important;
}

/* Outline light (for dark/hero backgrounds) — class "tjvv-btn-outline-light" */
.tjvv-btn-outline-light .wp-block-button__link {
  background-color: transparent !important;
  color: var(--parchment) !important;
  border: 1px solid rgba(253,250,246,0.45) !important;
}
.tjvv-btn-outline-light .wp-block-button__link:hover {
  border-color: var(--parchment) !important;
}

/* White button (for sage/dark backgrounds) — class "tjvv-btn-white" */
.tjvv-btn-white .wp-block-button__link {
  background-color: var(--parchment) !important;
  color: var(--sage-dark) !important;
  border: none !important;
}
.tjvv-btn-white .wp-block-button__link:hover { background-color: var(--cream) !important; }

/* =====================================================
   SECTIONS / GROUP BLOCKS
   ===================================================== */

/* Standard section wrapper — class "tjvv-section" on Group block */
.tjvv-section {
  padding: 5.5rem 3rem !important;
}
.tjvv-section > .wp-block-group__inner-container,
.tjvv-section > .is-layout-constrained > *,
.tjvv-section > .wp-block-group__inner-container > .wp-block-group__inner-container {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

/* Limestone background section — add "tjvv-section-limestone" alongside "tjvv-section" */
.tjvv-section-limestone {
  background-color: var(--limestone) !important;
}

/* Centered section header — class "tjvv-sec-header" on Group block wrapping eyebrow + h2 + p */
.tjvv-sec-header {
  max-width: 580px;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 3.5rem;
}
.tjvv-sec-header h2 { margin: 0.7rem 0 1rem; }
.tjvv-sec-header p { color: var(--ink-medium); }

/* =====================================================
   HERO (Full Cover block)
   Apply class "tjvv-hero" to Cover block
   ===================================================== */
.tjvv-hero.wp-block-cover {
  min-height: 88vh !important;
  padding: 5rem 3rem !important;
  align-items: center !important;
}
.tjvv-hero .wp-block-cover__image-background {
  object-position: center 30% !important;
}
.tjvv-hero .wp-block-cover__background {
  opacity: 0.65 !important;
  background: linear-gradient(105deg, rgba(43,32,24,0.72) 0%, rgba(43,32,24,0.3) 55%, rgba(43,32,24,0.05) 100%) !important;
}
.tjvv-hero .wp-block-cover__inner-container {
  max-width: 680px !important;
  margin-left: 0 !important;
}
.tjvv-hero h1, .tjvv-hero h2, .tjvv-hero .wp-block-heading {
  color: var(--parchment) !important;
}
.tjvv-hero p { color: rgba(253,250,246,0.82) !important; max-width: 500px; }
.tjvv-hero .tjvv-eyebrow { color: var(--gold) !important; }

/* =====================================================
   PAGE HERO (shorter, inner pages)
   Apply class "tjvv-phero" to Cover block
   ===================================================== */
.tjvv-phero.wp-block-cover {
  min-height: 52vh !important;
  padding: 0 !important;
  align-items: flex-end !important;
}
.tjvv-phero .wp-block-cover__image-background {
  object-position: center 35% !important;
}
.tjvv-phero .wp-block-cover__background {
  background: linear-gradient(to top, rgba(43,32,24,0.65) 0%, rgba(43,32,24,0.1) 65%, transparent 100%) !important;
  opacity: 1 !important;
}
.tjvv-phero .wp-block-cover__inner-container {
  width: 100% !important;
  padding: 2.75rem 3rem !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
}
.tjvv-phero h1, .tjvv-phero .wp-block-heading { color: var(--parchment) !important; }
.tjvv-phero .tjvv-eyebrow { color: var(--gold) !important; }

/* =====================================================
   BOTANICAL SPRIG DIVIDER
   Paste as Custom HTML block, no class needed.
   Markup: <div class="tjvv-sprig"><svg>…</svg></div>
   ===================================================== */
.tjvv-sprig {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2.25rem 0;
}
.tjvv-sprig::before,
.tjvv-sprig::after {
  content: '';
  flex: 1;
  max-width: 100px;
  height: 1px;
  background: var(--gold);
  opacity: 0.55;
}

/* =====================================================
   SPLIT LAYOUT (50/50 Columns block)
   Apply class "tjvv-split" to Columns block
   ===================================================== */
.tjvv-split.wp-block-columns {
  gap: 4.5rem !important;
  align-items: center !important;
}
.tjvv-split .wp-block-image img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

/* =====================================================
   CARDS (3-column grid)
   Apply "tjvv-cards" to Columns block
   Apply "tjvv-card" to each Group column block
   ===================================================== */
.tjvv-cards.wp-block-columns { gap: 1.5rem !important; }

.tjvv-card.wp-block-group {
  background: var(--parchment) !important;
  border: 1px solid var(--border) !important;
  padding: 2.25rem 2rem !important;
}
.tjvv-card h3 { font-size: 1.2rem !important; margin-bottom: 0.6rem; }
.tjvv-card p  { font-size: 0.875rem; color: var(--ink-medium); line-height: 1.65; }

/* Decorative letter glyph — paste as Custom HTML inside a tjvv-card */
.tjvv-card-glyph {
  width: 36px; height: 36px;
  border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
  font-size: 0.8rem; color: var(--gold); letter-spacing: 0.05em;
  font-family: 'Jost', sans-serif; font-weight: 500;
}

/* =====================================================
   ORG SPOTLIGHT (4-column grid on Home)
   Apply "tjvv-org-grid" to Columns block
   ===================================================== */
.tjvv-org-grid.wp-block-columns { gap: 1.5rem !important; }
.tjvv-org-grid .wp-block-image img {
  width: 100%; aspect-ratio: 1; object-fit: cover; filter: sepia(8%);
}
.tjvv-org-grid h4 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1rem; font-weight: 400; line-height: 1.3;
  text-align: center; margin-top: 0.9rem;
}

/* =====================================================
   CTA BAND (sage green stripe)
   Apply "tjvv-cta-band" to Group block
   ===================================================== */
.tjvv-cta-band.wp-block-group {
  background-color: var(--sage) !important;
  padding: 5rem 3rem !important;
  text-align: center !important;
}
.tjvv-cta-band h2            { color: var(--parchment) !important; margin: 0.7rem 0 1rem; }
.tjvv-cta-band p             { color: rgba(253,250,246,0.78) !important; max-width: 520px; margin: 0 auto 2.25rem; font-size: 0.95rem; }
.tjvv-cta-band .tjvv-eyebrow { color: var(--gold) !important; }

/* =====================================================
   GRANT PROCESS STEPS (3-column)
   Apply "tjvv-steps" to Columns block
   Apply "tjvv-step" to each Column's inner Group block
   ===================================================== */
.tjvv-steps.wp-block-columns { gap: 3rem !important; }

.tjvv-step.wp-block-group {
  border-top: 2px solid var(--gold) !important;
  padding-top: 1.5rem !important;
}
.tjvv-step-num {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300; font-size: 4.5rem; line-height: 1;
  color: var(--stone); margin-bottom: 0.4rem; display: block;
}
.tjvv-step h3  { font-size: 1.2rem !important; margin-bottom: 0.7rem; }
.tjvv-step p   { font-size: 0.875rem; color: var(--ink-medium); line-height: 1.65; }

/* =====================================================
   FAQ LIST
   Build as Custom HTML blocks (see guide)
   ===================================================== */
.tjvv-faq-item {
  border-top: 1px solid var(--border);
  padding: 1.75rem 0;
}
.tjvv-faq-item:last-child { border-bottom: 1px solid var(--border); }
.tjvv-faq-q {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem; font-weight: 400; margin-bottom: 0.65rem;
}
.tjvv-faq-a { font-size: 0.9rem; color: var(--ink-medium); line-height: 1.7; }

/* =====================================================
   ORG LIST (Accomplishments page, 3-column text list)
   Build as Custom HTML block
   ===================================================== */
.tjvv-org-list { column-count: 3; column-gap: 2rem; margin-top: 1.75rem; }
.tjvv-org-item {
  font-size: 0.86rem; color: var(--ink-medium);
  padding: 0.4rem 0; border-bottom: 1px solid var(--border);
  break-inside: avoid;
}

/* =====================================================
   GALLERY (Accomplishments)
   Build as Custom HTML block
   ===================================================== */
.tjvv-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 2.25rem;
}
.tjvv-gallery-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.tjvv-gallery-grid img:first-child { grid-column: span 2; aspect-ratio: 16/9; }

/* =====================================================
   BOARD GRID (6-member, 3-col)
   Apply "tjvv-board-grid" to Columns block
   Apply "tjvv-board-card" to each Group block inside
   ===================================================== */
.tjvv-board-grid.wp-block-columns { gap: 2.25rem !important; }

.tjvv-board-card.wp-block-group { text-align: center !important; }
.tjvv-board-card .wp-block-image img {
  width: 100%; aspect-ratio: 3/4;
  object-fit: cover; object-position: center top;
  filter: sepia(6%) contrast(1.02);
  margin-bottom: 1.1rem;
}
.tjvv-board-card h4 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.2rem; font-weight: 500;
}
/* Apply "tjvv-board-role" to the role Paragraph block */
p.tjvv-board-role {
  font-size: 0.66rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--sage) !important;
  margin-top: 0.2rem !important;
  font-weight: 500 !important;
}

/* =====================================================
   CONTACT PAGE LAYOUT
   Apply "tjvv-contact-layout" to Columns block
   ===================================================== */
.tjvv-contact-layout.wp-block-columns {
  gap: 5rem !important;
  align-items: start !important;
}

.tjvv-contact-detail { margin-bottom: 1.75rem; }
.tjvv-contact-label {
  display: block; font-size: 0.64rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--sage);
  margin-bottom: 0.3rem; font-weight: 500; font-family: 'Jost', sans-serif;
}
.tjvv-contact-detail p { font-size: 0.9rem; color: var(--ink-medium); line-height: 1.65; }
.tjvv-contact-detail a { color: var(--sage); text-decoration: none; }
.tjvv-contact-detail a:hover { text-decoration: underline; }

/* =====================================================
   CONTACT FORM 7 (install CF7 plugin, then style here)
   ===================================================== */
.wpcf7-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.wpcf7-form p { margin: 0 !important; }   /* CF7 wraps fields in <p> */

/* Full-width rows: wrap field in <p class="field-full"> in CF7 template */
.wpcf7-form p.field-full { grid-column: 1 / -1; }

.wpcf7-form label {
  display: block; font-size: 0.64rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-medium);
  font-weight: 500; margin-bottom: 0.4rem;
}

.wpcf7-form input:not([type="submit"]),
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  background: var(--parchment); border: 1px solid var(--border);
  padding: 0.8rem 1rem;
  font-family: 'Jost', sans-serif; font-size: 0.9rem; color: var(--ink);
  outline: none; border-radius: 0; appearance: none;
  transition: border-color 0.2s;
}
.wpcf7-form input:not([type="submit"]):focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus { border-color: var(--sage); }
.wpcf7-form textarea { resize: vertical; min-height: 130px; }

.wpcf7-form input[type="submit"] {
  grid-column: 1 / -1; width: 100%;
  background: var(--sage); color: var(--parchment);
  border: none; padding: 0.8rem 1.85rem;
  font-family: 'Jost', sans-serif; font-size: 0.7rem;
  font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer; border-radius: 0; transition: background 0.22s;
}
.wpcf7-form input[type="submit"]:hover { background: var(--sage-dark); }

.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid,
.wpcf7-form select.wpcf7-not-valid { border-color: var(--terracotta); }

.wpcf7-not-valid-tip {
  display: block; font-size: 0.72rem; color: var(--terracotta); margin-top: 0.2rem;
}
.wpcf7-response-output {
  grid-column: 1 / -1; font-size: 0.85rem; padding: 1rem;
  border: 1px solid var(--border); margin: 0 !important;
}
.wpcf7-mail-sent-ok {
  background: var(--limestone); border-color: var(--sage) !important;
  color: var(--sage-dark);
}

/* =====================================================
   FOOTER
   ===================================================== */
.site-footer,
.wp-block-template-part[data-slug="footer"] {
  background: var(--ink) !important;
  padding: 3.5rem 3rem !important;
  text-align: center !important;
}
.site-footer p { font-size: 0.8rem; color: rgba(253,250,246,0.4); }

.site-footer .wp-block-site-title a,
.site-footer .wp-block-site-title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.05rem !important; font-weight: 500 !important;
  color: var(--parchment) !important; text-decoration: none !important;
}

.site-footer .wp-block-navigation-item a {
  font-size: 0.66rem !important;
  letter-spacing: 0.14em !important; text-transform: uppercase !important;
  color: rgba(253,250,246,0.5) !important; transition: color 0.2s !important;
}
.site-footer .wp-block-navigation-item a:hover { color: var(--gold) !important; }

/* =====================================================
   PILLAR LIST (used on Home split section)
   Build as Custom HTML block
   ===================================================== */
.tjvv-pillars { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 1.75rem; }
.tjvv-pillar  { display: flex; gap: 1.25rem; align-items: flex-start; }
.tjvv-pillar-line {
  width: 2px; background: var(--gold); flex-shrink: 0;
  align-self: stretch; min-height: 44px; margin-top: 0.3rem;
}
.tjvv-pillar h3 { font-size: 1.1rem !important; margin-bottom: 0.25rem; }
.tjvv-pillar p  { font-size: 0.875rem; color: var(--ink-medium); line-height: 1.6; margin: 0; }

/* =====================================================
   UTILITY — gold separator line
   Apply class "tjvv-gold-sep" to Separator block
   ===================================================== */
.tjvv-gold-sep.wp-block-separator {
  border-color: var(--gold) !important;
  opacity: 0.55 !important;
  max-width: 100px !important;
}