/*
Theme Name: Land to Legacy
Theme URI: https://land2legacy.com
Author: From Land to Legacy
Author URI: https://land2legacy.com
Description: A premium educational platform theme for landowners. Features the Southern Gothic Revival aesthetic with forest green, cream, and gold accents. Designed for use with WooCommerce Subscriptions or MemberPress for paid membership tiers.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
License URI: https://land2legacy.com/terms
Text Domain: land-to-legacy
Tags: education, membership, custom-colors, custom-fonts, full-width-template, one-column, two-columns
*/

/* ============================================================
   LAND TO LEGACY — WORDPRESS THEME
   Design: Southern Gothic Revival
   Palette: Forest Green #1A3A2A · Cream #FAF3E0 · Gold #D4A017
   Fonts: Cormorant Garamond (display) · Lora (body) · IBM Plex Mono (data)
   ============================================================ */

/* ── Google Fonts are enqueued via functions.php ── */

/* ── CSS Custom Properties ── */
:root {
  --color-green-dark:   #0f2318;
  --color-green:        #1A3A2A;
  --color-green-mid:    #2a5a3f;
  --color-green-light:  #3a7a55;
  --color-cream:        #FAF3E0;
  --color-cream-mid:    #f0e8cc;
  --color-cream-dark:   #e0d4b0;
  --color-gold:         #D4A017;
  --color-gold-dark:    #b8880f;
  --color-charcoal:     #1c1c1c;
  --color-text:         #2a2a2a;
  --color-text-muted:   #5a5a5a;
  --color-border:       #ddd5bb;
  --font-display:       'Cormorant Garamond', Georgia, serif;
  --font-body:          'Lora', Georgia, serif;
  --font-mono:          'IBM Plex Mono', 'Courier New', monospace;
  --container-max:      1200px;
  --section-pad:        5rem 0;
  --radius:             0px;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-cream);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-green); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--color-gold); }

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-charcoal);
}
h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 2rem); }
h4 { font-size: 1.25rem; }
p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

.font-mono { font-family: var(--font-mono); }
.text-gold  { color: var(--color-gold); }
.text-green { color: var(--color-green); }
.text-muted { color: var(--color-text-muted); }

/* ── Layout ── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.section { padding: var(--section-pad); }
.section-cream  { background: var(--color-cream); }
.section-white  { background: #fff; }
.section-green  { background: var(--color-green); color: var(--color-cream); }
.section-dark   { background: var(--color-green-dark); color: var(--color-cream); }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 0.2s, color 0.2s, transform 0.1s;
  text-decoration: none;
}
.btn:active { transform: scale(0.98); }
.btn-gold {
  background: var(--color-gold);
  color: var(--color-charcoal);
}
.btn-gold:hover { background: var(--color-gold-dark); color: var(--color-charcoal); }
.btn-green {
  background: var(--color-green);
  color: var(--color-cream);
}
.btn-green:hover { background: var(--color-green-mid); color: var(--color-cream); }
.btn-outline {
  background: transparent;
  border: 2px solid var(--color-green);
  color: var(--color-green);
}
.btn-outline:hover { background: var(--color-green); color: var(--color-cream); }

/* ── Navigation ── */
#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--color-green);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
#site-header .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.5rem;
  max-width: var(--container-max);
  margin: 0 auto;
}
.site-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}
.site-logo svg { color: var(--color-gold); }
.site-logo:hover { color: var(--color-gold); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  font-family: var(--font-body);
  font-size: 0.9rem;
}
.nav-links a { color: rgba(255,255,255,0.85); }
.nav-links a:hover { color: var(--color-gold); }
.nav-cta { background: var(--color-gold); color: var(--color-charcoal) !important; padding: 0.45rem 1.1rem; font-weight: 600; }
.nav-cta:hover { background: var(--color-gold-dark) !important; }

/* Mobile nav */
.nav-toggle { display: none; background: none; border: none; cursor: pointer; color: #fff; }
@media (max-width: 768px) {
  .nav-links { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: #163022; padding: 1rem 1.5rem; gap: 0; }
  .nav-links.open { display: flex; }
  .nav-links li { border-bottom: 1px solid rgba(255,255,255,0.1); }
  .nav-links a { display: block; padding: 0.75rem 0; }
  .nav-toggle { display: block; }
}

/* ── Disclaimer Banner ── */
.disclaimer-banner {
  background: var(--color-charcoal);
  border-bottom: 1px solid rgba(212,160,23,0.4);
  padding: 0.5rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
  margin-top: 60px; /* offset for fixed nav */
}
.disclaimer-banner strong { color: var(--color-gold); }

/* ── Hero ── */
.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-green-dark);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('https://d2xsxph8kpxj0f.cloudfront.net/310519663215772282/4kDHJDzCNVmVDXELQZHmzj/hero-land-VetkiDwJKwNXGxW6nvYRac.webp');
  background-size: cover;
  background-position: center;
  opacity: 0.45;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
  padding: 6rem 1.5rem 4rem;
}
.hero-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--color-green);
  color: var(--color-cream);
  padding: 0.35rem 0.85rem;
  margin-bottom: 1.5rem;
}
.hero h1 { color: #fff; margin-bottom: 0.25rem; }
.hero h1 em { font-style: italic; color: var(--color-gold); display: block; }
.hero-sub {
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: rgba(255,255,255,0.88);
  margin: 1.25rem 0 0.75rem;
  max-width: 560px;
}
.hero-quote {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-style: italic;
  color: rgba(255,255,255,0.65);
  margin-bottom: 2rem;
}
.hero-quote a { color: var(--color-gold); }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.hero-stats {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 1.5rem;
}
.hero-stats span strong { color: var(--color-gold); display: block; font-size: 1.1rem; }

/* ── Section Headers ── */
.section-header { text-align: center; margin-bottom: 3.5rem; }
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.75rem;
}
.gold-rule {
  width: 60px;
  height: 2px;
  background: var(--color-gold);
  margin: 1rem auto 0;
}

/* ── How It Works Steps ── */
.steps-section {
  background: var(--color-green-dark);
  background-image: url('https://d2xsxph8kpxj0f.cloudfront.net/310519663215772282/4kDHJDzCNVmVDXELQZHmzj/steps-bg-BxVEzdXc9hM5HWFg2VuKB8.webp');
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  color: var(--color-cream);
}
.steps-section .section-header h2 { color: #fff; }
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
.step-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(212,160,23,0.25);
  padding: 1.75rem;
  transition: border-color 0.2s;
}
.step-card:hover { border-color: var(--color-gold); }
.step-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-gold);
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}
.step-card h3 { color: #fff; font-size: 1.15rem; margin-bottom: 0.75rem; }
.step-card p { color: rgba(255,255,255,0.78); font-size: 0.9rem; }
.step-tip {
  margin-top: 1rem;
  padding: 0.6rem 0.85rem;
  background: rgba(212,160,23,0.12);
  border-left: 3px solid var(--color-gold);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(255,255,255,0.65);
}

/* ── Learning Tracks ── */
.tracks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.track-card {
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.track-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
.track-header {
  padding: 1.5rem;
  color: #fff;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.track-letter {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.15);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  flex-shrink: 0;
}
.track-header h3 { color: #fff; font-size: 1.1rem; margin-bottom: 0.25rem; }
.track-header p { color: rgba(255,255,255,0.75); font-size: 0.85rem; font-style: italic; }
.track-body { padding: 1.25rem; background: #fff; }
.module-list { list-style: none; }
.module-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  gap: 0.75rem;
}
.module-item:last-child { border-bottom: none; }
.module-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-gold);
  flex-shrink: 0;
  padding-top: 0.15rem;
}
.module-title { font-size: 0.9rem; font-weight: 600; color: var(--color-charcoal); margin-bottom: 0.2rem; }
.module-desc { font-size: 0.8rem; color: var(--color-text-muted); }
.module-deliverable {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--color-text-muted);
  margin-top: 0.3rem;
}

/* ── Pricing ── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  align-items: start;
}
.pricing-card {
  border: 1px solid var(--color-border);
  overflow: hidden;
  position: relative;
}
.pricing-card.highlight {
  border: 2px solid var(--color-gold);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.pricing-card.highlight::before {
  content: "MOST POPULAR";
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  background: var(--color-gold);
  color: var(--color-charcoal);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  padding: 0.25rem 1rem;
}
.pricing-header { padding: 2rem 1.75rem 1.5rem; }
.pricing-header h3 { font-size: 1.5rem; margin-bottom: 0.25rem; }
.pricing-tagline { font-size: 0.85rem; font-style: italic; margin-bottom: 1rem; }
.pricing-price { display: flex; align-items: baseline; gap: 0.25rem; margin-bottom: 0.5rem; }
.price-amount { font-family: var(--font-display); font-size: 3rem; font-weight: 700; line-height: 1; }
.price-period { font-family: var(--font-mono); font-size: 0.8rem; }
.pricing-features { padding: 0 1.75rem 1.75rem; }
.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.88rem;
}
.feature-item:last-child { border-bottom: none; }
.feature-check { color: var(--color-green); flex-shrink: 0; margin-top: 0.1rem; }
.feature-x { color: #ccc; flex-shrink: 0; margin-top: 0.1rem; }
.feature-item.excluded { color: var(--color-text-muted); }
.pricing-cta { padding: 0 1.75rem 1.75rem; }
.pricing-cta .btn { width: 100%; justify-content: center; }
.pricing-note {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin-top: 2rem;
}

/* ── Organizations ── */
.orgs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
}
.org-card {
  background: #fff;
  border: 1px solid var(--color-border);
  padding: 1.25rem;
  transition: box-shadow 0.2s;
}
.org-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.org-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.4rem;
}
.org-name { font-size: 1rem; font-weight: 700; color: var(--color-charcoal); margin-bottom: 0.75rem; }
.org-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.org-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-green);
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  padding: 0.3rem 0.65rem;
}
.org-link:hover { background: var(--color-green); color: #fff; border-color: var(--color-green); }
.org-disclaimer {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 0.5rem;
  font-style: italic;
}

/* ── Succession Section ── */
.succession-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}
.succession-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(212,160,23,0.2);
  padding: 1.5rem;
}
.succession-card h3 { color: #fff; font-size: 1.05rem; margin-bottom: 0.6rem; }
.succession-card p { color: rgba(255,255,255,0.75); font-size: 0.85rem; }
.succession-card .highlight-stat {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  color: var(--color-gold);
  font-weight: 700;
  margin-bottom: 0.25rem;
}

/* ── FAQ ── */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-question {
  width: 100%;
  text-align: left;
  padding: 1.25rem 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-charcoal);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq-question:hover { color: var(--color-green); }
.faq-answer { padding: 0 0 1.25rem; font-size: 0.9rem; color: var(--color-text-muted); display: none; }
.faq-item.open .faq-answer { display: block; }
.faq-item.open .faq-icon { transform: rotate(180deg); }
.faq-icon { transition: transform 0.2s; flex-shrink: 0; }

/* ── Contact Form ── */
.contact-form-wrap {
  max-width: 640px;
  margin: 0 auto;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(212,160,23,0.25);
  padding: 2.5rem;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
.form-field.full { grid-column: 1 / -1; }
.form-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.form-input, .form-select {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  padding: 0.7rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
}
.form-input:focus, .form-select:focus { border-color: var(--color-gold); }
.form-input::placeholder { color: rgba(255,255,255,0.35); }
.form-select option { background: var(--color-green); color: #fff; }
.form-submit { margin-top: 1.5rem; }
.form-submit .btn { width: 100%; justify-content: center; font-size: 1rem; padding: 0.9rem; }

/* ── Legal Section ── */
.legal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
}
.legal-card {
  background: #fff;
  border: 1px solid var(--color-border);
  padding: 1.5rem;
}
.legal-card h3 { font-size: 1rem; margin-bottom: 0.6rem; color: var(--color-green); }
.legal-card p { font-size: 0.85rem; color: var(--color-text-muted); }

/* ── Footer ── */
#site-footer {
  background: #0f2318;
  color: rgba(255,255,255,0.65);
  padding: 3.5rem 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: #fff;
  margin-bottom: 0.75rem;
}
.footer-brand p { font-size: 0.85rem; line-height: 1.6; }
.footer-col h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: 0.75rem;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.5rem; }
.footer-col a { font-size: 0.85rem; color: rgba(255,255,255,0.65); }
.footer-col a:hover { color: var(--color-gold); }
.footer-bottom {
  border-top: 1px solid rgba(212,160,23,0.2);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
}
.footer-legal-links { display: flex; gap: 1.25rem; }
.footer-legal-links a { color: rgba(255,255,255,0.4); }
.footer-legal-links a:hover { color: var(--color-gold); }

/* ── Utility ── */
.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ── Comparison Table ── */
.comparison-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.comparison-table th {
  background: var(--color-green);
  color: #fff;
  padding: 0.85rem 1rem;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1rem;
}
.comparison-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border); }
.comparison-table tr:nth-child(even) td { background: var(--color-cream); }
.comparison-table tr:hover td { background: var(--color-cream-mid); }

/* ── Membership Plugin Integration Notes ── */
/*
  PAYMENT & MEMBERSHIP SETUP NOTES:
  ─────────────────────────────────
  This theme is designed to work with any WordPress membership plugin.
  Recommended options:

  1. MemberPress (memberpress.com) — Best for subscription tiers
     - Create 3 membership levels: Explorer (free), Academy ($47/mo), Legacy Pro ($197/mo)
     - Protect curriculum pages with MemberPress rules
     - Use [mepr-active memberships="academy,legacy-pro"] shortcode to show/hide content

  2. Paid Memberships Pro (paidmembershipspro.com) — Free core plugin
     - Similar tier setup
     - Use [pmpro_member_links] for account management

  3. WooCommerce + WooCommerce Subscriptions
     - Create subscription products for Academy and Legacy Pro
     - Use WooCommerce Memberships to gate content

  4. Stripe Plugin (WP Simple Pay or Stripe for WooCommerce)
     - For direct Stripe integration without WooCommerce

  CONTACT FORM:
  - Install WPForms, Contact Form 7, or Gravity Forms
  - Replace the contact form HTML below with your plugin's shortcode
  - Example: [wpforms id="123"]

  DASHBOARD:
  - Most membership plugins provide a built-in account/dashboard page
  - MemberPress: /members-account/
  - PMPro: /membership-account/
*/