/*
Theme Name: My Lasting Plan Child
Template: astra
Version: 1.0
Description: Child theme for My Lasting Plan
Author: Your Name
*/

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;600;700;900&family=Playfair+Display:wght@500;600;700;800&display=swap');

/* CSS Variables */
:root {
  --navy: #1e3a5f;
  --navy-light: #2d4a6f;
  --navy-dark: #152d4a;
  --gold: #c9a227;
  --cream: #fdfaf3;
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-700: #334155;
  --emerald-50: #ecfdf5;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-700: #047857;
  --red-500: #ef4444;
  --red-600: #dc2626;
  
  --font-body: 'Lato', ui-sans-serif, system-ui, sans-serif;
  --font-heading: 'Playfair Display', Georgia, serif;
  
  --shadow-card: 0 4px 6px -1px rgba(30,58,95,0.05), 0 10px 20px -5px rgba(30,58,95,0.08);
  --shadow-card-hover: 0 8px 12px -2px rgba(30,58,95,0.08), 0 16px 32px -6px rgba(30,58,95,0.12);
  --shadow-elevated: 0 20px 40px -8px rgba(30,58,95,0.15), 0 8px 16px -4px rgba(30,58,95,0.08);
}

/* Global Styles */
body {
  font-family: var(--font-body);
  color: var(--slate-700);
  line-height: 1.7;
  font-size: 23px;
  background: var(--cream);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--navy);
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Scroll-triggered animations */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Add animation class to blocks via JavaScript (see bottom of file) */
.wp-block-group.animated,
.wp-block-columns.animated,
.wp-block-heading.animated {
  opacity: 0;
  transform: translateY(28px);
  animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Staggered animations */
.wp-block-group.animated:nth-child(1),
.wp-block-columns.animated:nth-child(1) { animation-delay: 0.1s; }
.wp-block-group.animated:nth-child(2),
.wp-block-columns.animated:nth-child(2) { animation-delay: 0.2s; }
.wp-block-group.animated:nth-child(3),
.wp-block-columns.animated:nth-child(3) { animation-delay: 0.3s; }
.wp-block-group.animated:nth-child(4),
.wp-block-columns.animated:nth-child(4) { animation-delay: 0.4s; }

/* ============================================
   BUTTON STYLES - FIX WHITE TEXT
   ============================================ */

/* Force white text on navy buttons */
.wp-block-button .wp-block-button__link.has-navy-background-color,
.wp-block-button__link.has-navy-background-color {
  color: #ffffff !important;
  background-color: var(--navy) !important;
  border-radius: 16px;
  padding: 24px 48px;
  font-weight: 700;
  font-size: 24px;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  text-decoration: none;
}

.wp-block-button .wp-block-button__link.has-navy-background-color:hover,
.wp-block-button__link.has-navy-background-color:hover {
  background-color: var(--navy-light) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
}

/* Outline buttons */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  color: var(--navy) !important;
  border: 2px solid var(--navy);
  border-radius: 16px;
  padding: 24px 48px;
  font-weight: 700;
  font-size: 24px;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--navy) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
}

/* General button link styles */
.wp-block-button__link {
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
}

/* ============================================
   CUSTOM LIST BULLETS (GREEN CHECKMARKS)
   ============================================ */

/* Feature Lists - Green Checkmarks with Circle Background */
.wp-block-list {
  list-style: none;
  padding-left: 0;
}

.wp-block-list li {
  position: relative;
  padding-left: 36px;
  margin-bottom: 12px;
}

/* Green circle checkmark */
.wp-block-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 3px;
  width: 24px;
  height: 24px;
  background: var(--emerald-50);
  color: var(--emerald-600);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Remove default list marker */
.wp-block-list li::marker {
  content: '';
}

/* ============================================
   COMPARISON TABLE STYLING
   ============================================ */

.mlp-comparison-table,
.mlp-comparison-table figure {
  margin: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mlp-comparison-table table,
.wp-block-table.mlp-comparison-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 700px;
  font-size: 23px;
  margin: 0;
}

.mlp-comparison-table thead th {
  padding: 20px 24px;
  font-size: 23px;
  font-weight: 700;
  color: var(--slate-700);
  text-align: center;
  border-bottom: 2px solid var(--slate-200);
  background: white;
}

.mlp-comparison-table thead th:first-child {
  text-align: left;
  color: var(--navy);
}

.mlp-comparison-table thead th:last-child {
  color: var(--navy);
  background: rgba(30, 58, 95, 0.05);
  border-radius: 16px 16px 0 0;
  border-bottom: 2px solid rgba(30, 58, 95, 0.12);
}

.mlp-comparison-table tbody td {
  padding: 20px 24px;
  font-size: 23px;
  text-align: center;
  border-bottom: 1px solid var(--slate-100);
  color: var(--slate-700);
  background: white;
}

.mlp-comparison-table tbody td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--slate-700);
}

.mlp-comparison-table tbody td:last-child {
  background: rgba(30, 58, 95, 0.05);
}

.mlp-comparison-table tbody tr:last-child td {
  border-bottom: none;
}

.mlp-comparison-table tbody tr:last-child td:last-child {
  border-radius: 0 0 16px 16px;
}

/* Checkmarks and X marks size */
.mlp-comparison-table tbody td:not(:first-child) {
  font-size: 32px;
  font-weight: 700;
}

/* ============================================
   CARD HOVER EFFECTS & ANIMATIONS
   ============================================ */

/* All cards get transition */
.wp-block-group {
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Problem cards and FAQ cards - hover lift */
.has-slate-50-background-color.wp-block-group:hover,
.has-white-background-color.wp-block-group:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

/* Cards with borders */
.has-border-color.wp-block-group:hover {
  border-color: var(--slate-300);
}

/* Feature card visuals */
.has-white-background-color.has-slate-200-border-color:hover {
  box-shadow: var(--shadow-card);
}

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

/* Hero badge pulse */
.hero-badge,
.wp-block-group .wp-block-group:first-child .wp-block-paragraph {
  animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Hero heading */
.hero h1,
.wp-block-heading[style*="88px"] {
  animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
  opacity: 0;
}

/* Hero subtitle */
.hero-subtitle {
  animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
  opacity: 0;
}

/* Hero buttons */
.wp-block-buttons {
  animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
  opacity: 0;
}

/* Hero trust badges */
.hero-trust {
  animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards;
  opacity: 0;
}

/* Hero image */
.hero-photo,
.wp-block-image {
  animation: scaleIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
  opacity: 0;
}

/* Floating animation for badge dot */
.hero-badge-dot {
  animation: float 2.5s ease-in-out infinite;
}

/* ============================================
   SMOOTH SCROLLING
   ============================================ */

html {
  scroll-behavior: smooth;
}

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

@media (max-width: 768px) {
  body {
    font-size: 21px;
  }
  
  .wp-block-columns {
    gap: 36px;
  }
  
  h1 {
    font-size: 48px !important;
  }
  
  .mlp-comparison-table thead th,
  .mlp-comparison-table tbody td {
    padding: 14px 16px;
    font-size: 20px;
  }
  
  .mlp-comparison-table tbody td:not(:first-child) {
    font-size: 28px;
  }
  
  .wp-block-button__link {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .wp-block-buttons {
    flex-direction: column;
    width: 100%;
  }
  
  .wp-block-button {
    width: 100%;
  }
}