/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://chickenstarter.com/
 Description:  Child theme for ChickenStarter - 2026 CWV-Optimized Mobile-First Edition
 Author:       Oladepo Babatunde, US Poultry Expert
 Template:     generatepress
 Version:      1.2.0
 Text Domain:  generatepress-child
*/

/* ========== 1. CSS CUSTOM PROPERTIES (Poultry Fresh Theme) ========== */
:root {
  /* Core Palette (US Backyard Chickens: Fresh Greens/Oranges) */
  --p-green: #166534;      /* Primary Forest */
  --p-leaf: #15803d;       /* Hover/Active Leaf */
  --p-accent: #a3e635;     /* Lime Highlights */
  --p-light: #f7fee7;      /* BG Tint */
  --p-bg: #fafaf9;         /* Main BG */
  --p-stone: #1c1917;      /* Dark Text */
  --p-muted: #44403c;      /* Subtext */
  --p-white: #ffffff;      /* Cards */
  
  /* RGB for Shadows/Gradients */
  --p-green-rgb: 22, 101, 52;
  --p-accent-rgb: 163, 230, 53;
  --p-shadow-rgb: 0, 0, 0;
  
  /* Layout/Perf */
  --radius: 12px;
  --shadow-sm: 0 4px 6px -2px rgba(var(--p-shadow-rgb), 0.03);
  --shadow-md: 0 10px 15px -3px rgba(var(--p-shadow-rgb), 0.06), var(--shadow-sm);
  --shadow-lg: 0 20px 25px -5px rgba(var(--p-shadow-rgb), 0.1), 0 10px 10px -5px rgba(var(--p-shadow-rgb), 0.04);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --border: 1px solid #e7e5e4;
  --gap-sm: 1rem;
  --gap-md: clamp(1.5rem, 3vw, 2.5rem);
}

/* ========== 2. BASE & TYPOGRAPHY (CLS-Free, Mobile-First) ========== */
*, *::before, *::after { box-sizing: border-box; }
body { 
  font-family: system-ui, -apple-system, sans-serif; 
  font-size: clamp(1rem, 2.5vw, 1.1rem); 
  line-height: 1.6; 
  color: var(--p-stone); 
  background: var(--p-bg); 
  margin: 0; 
  overflow-x: hidden; 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
}
h1, h2, h3, h4 { color: var(--p-green); font-weight: 800; line-height: 1.2; margin: 0 0 var(--gap-sm); }

/* Fluid Titles (No Shifts) */
.cs-hero-title { font-size: clamp(2rem, 6vw, 4rem); }
.cs-section-title { font-size: clamp(1.75rem, 4vw, 2.5rem); }

/* Images: CLS Zero */
img { max-width: 100%; height: auto; loading: lazy; decoding: async; }

/* ========== 3. HERO SECTION (LCP Optimized) ========== */
.cs-hero { 
  background: #134d2e; /* Solid Ultra-Dark Forest (21:1 white contrast) */
  padding: clamp(3rem, 12vw, 7rem) clamp(1.5rem, 6vw, 3rem); 
  text-align: center; 
  border-radius: var(--radius); 
  margin-bottom: var(--gap-md); 
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.1); /* Glow + inner highlight */
  position: relative; 
  /* NO OVERLAY = Zero interference */
}
.cs-hero > * { position: relative; z-index: 1; }

/* Triple Shadow Text (Mobile-Proof) */
.cs-hero-title { 
  color: #ffffff !important; 
  font-weight: 900; 
  font-size: clamp(2.2rem, 7vw, 4.2rem); 
  text-shadow: 
    0 2px 4px rgba(0,0,0,0.8), 
    0 1px 2px rgba(0,0,0,0.6), 
    0 0 10px rgba(0,0,0,0.4); /* Multi-layer crisp */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); /* Edge glow */
  line-height: 1.1;
}
.cs-hero-subtitle { 
  color: rgba(255,255,255,0.97) !important; 
  font-size: clamp(1.2rem, 4vw, 1.6rem); 
  text-shadow: 
    0 1px 3px rgba(0,0,0,0.7), 
    0 0 8px rgba(0,0,0,0.3); 
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
  max-width: 90%;
  margin: 0 auto var(--gap-md);
}

/* ========== 4. PRO DASHBOARD (Tabs + Calculators - Mobile Scroll Snap) ========== */
.p-dashboard { 
  background: var(--p-white); 
  border-radius: var(--radius); 
  border: var(--border); 
  box-shadow: var(--shadow-md); 
  margin-bottom: var(--gap-md); 
  overflow: hidden; 
}

.p-tabs-wrapper { 
  overflow-x: auto; 
  -webkit-overflow-scrolling: touch; 
  scrollbar-width: none; /* Firefox */ 
  scroll-snap-type: x mandatory; 
  border-bottom: var(--border); 
  background: var(--p-white); 
}
.p-tabs-wrapper::-webkit-scrollbar { display: none; }

.p-tabs { display: flex; flex-wrap: nowrap; }
.p-tab { 
  padding: 1.25rem 1.75rem; 
  border: none; 
  background: none; 
  color: var(--p-muted); 
  font-weight: 700; 
  white-space: nowrap; 
  cursor: pointer; 
  border-bottom: 3px solid transparent; 
  transition: var(--transition); 
  scroll-snap-align: start; 
  flex: 1; 
  min-width: 140px; 
}
.p-tab.active { 
  color: var(--p-green); 
  border-bottom-color: var(--p-accent); 
  background: var(--p-light); 
}

.p-grid { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: var(--gap-sm); 
  padding: clamp(1.5rem, 4vw, 2.5rem); 
}
@media (min-width: 768px) { .p-grid { grid-template-columns: repeat(3, 1fr); gap: var(--gap-md); } }

.p-input-group label { 
  display: block; 
  font-size: 0.875rem; 
  font-weight: 700; 
  margin-bottom: 0.5rem; 
  color: var(--p-stone); 
}
.p-input-group input, .p-input-group select { 
  width: 100%; 
  padding: 0.875rem; 
  border: 1.5px solid #e7e5e4; 
  border-radius: 10px; 
  font-size: 1rem; 
  transition: border-color 0.2s, box-shadow 0.2s; 
}
.p-input-group input:focus, .p-input-group select:focus { 
  border-color: var(--p-leaf); 
  outline: none; 
  box-shadow: 0 0 0 3px rgba(var(--p-green-rgb), 0.1); 
}

.p-calc-btn { 
  width: 100%; 
  padding: 1.125rem; 
  background: var(--p-green); 
  color: var(--p-white); 
  border: none; 
  border-radius: 12px; 
  font-weight: 800; 
  font-size: 1.1rem; 
  cursor: pointer; 
  transition: var(--transition); 
  margin-top: 1rem; 
}
.p-calc-btn:hover { background: var(--p-leaf); transform: translateY(-1px); }

/* ========== 5. CONTENT GRIDS & CARDS ========== */
.cs-container { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
.cs-grid { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: var(--gap-md); 
  margin: var(--gap-md) 0; 
}
@media (min-width: 768px) { .cs-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } }
@media (min-width: 1024px) { .cs-grid { grid-template-columns: repeat(3, 1fr); } }

.cs-card { 
  background: var(--p-white); 
  border-radius: var(--radius); 
  border: var(--border); 
  overflow: hidden; 
  box-shadow: var(--shadow-sm); 
  transition: var(--transition); 
}
.cs-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.cs-thumb-wrapper { width: 100%; aspect-ratio: 16/9; background: #f5f5f4; overflow: hidden; }
.cs-thumb { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.cs-card:hover .cs-thumb { transform: scale(1.05); }

/* ========== 6. FAQ ACCORDION ========== */
.faq-list details { 
  background: var(--p-white); 
  border: var(--border); 
  border-radius: 10px; 
  margin-bottom: var(--gap-sm); 
}
.faq-list summary { 
  padding: 1.25rem; 
  font-weight: 700; 
  cursor: pointer; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  color: var(--p-green); 
  list-style: none; 
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { 
  content: '▼'; 
  font-size: 1.25rem; 
  color: var(--p-accent); 
  transition: transform 0.3s; 
}
.faq-list[open] summary::after { transform: rotate(180deg); }
.faq-ans { 
  padding: 0 1.25rem 1.25rem; 
  color: var(--p-muted); 
  font-size: 0.95rem; 
}

/* ========== 7. AUTHOR BOX (E-E-A-T Boost) ========== */
.cs-author-box { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  text-align: center; 
  gap: var(--gap-sm); 
  padding: clamp(2rem, 6vw, 3rem); 
  background: var(--p-white); 
  border: var(--border); 
  border-radius: var(--radius); 
  margin: var(--gap-md) 0; 
}
@media (min-width: 768px) { 
  .cs-author-box { flex-direction: row; text-align: left; gap: var(--gap-md); } 
}
.cs-author-img { 
  width: clamp(100px, 15vw, 120px); 
  height: clamp(100px, 15vw, 120px); 
  border-radius: 50%; 
  border: 4px solid var(--p-accent); 
  object-fit: cover; 
  flex-shrink: 0; 
}

/* ========== 8. SECTIONS & GP OVERRIDES ========== */
.cs-section { padding: clamp(3rem, 8vw, 5rem) 0; }
.cs-section-title { text-align: center; position: relative; margin-bottom: var(--gap-md); }
.cs-section-title::after { 
  content: ''; 
  display: block; 
  width: 60px; 
  height: 4px; 
  background: var(--p-accent); 
  margin: 0.75rem auto 0; 
}

/* Footer */
.site-info { display: none !important; }
.custom-footer { 
  background: var(--p-stone); 
  color: var(--p-white); 
  padding: clamp(3rem, 8vw, 5rem) clamp(1rem, 5vw, 2rem); 
  margin-top: var(--gap-md); 
}
.footer-grid { 
  max-width: 1100px; 
  margin: 0 auto; 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: var(--gap-md); 
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer-title { color: var(--p-accent); font-size: 1.4rem; margin-bottom: var(--gap-sm); }
.footer-links a { 
  color: #d6d3d1; 
  text-decoration: none; 
  display: block; 
  margin-bottom: 0.5rem; 
  transition: color 0.2s; 
}
.footer-links a:hover { color: var(--p-accent); }

/* ========== 9. ACCESSIBILITY & PERF (Reduced Motion, Focus, Print) ========== */
@media (prefers-reduced-motion: reduce) { 
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } 
}
*:focus-visible { 
  outline: 3px solid var(--p-accent); 
  outline-offset: 2px; 
}
@media print { 
  .cs-hero, .p-dashboard, footer { display: none !important; } 
  body { font-size: 12pt; } 
}

/* Font Swap (If Inter Preloaded) */
@font-face { 
  font-family: 'Inter'; 
  src: url('/wp-content/themes/generatepress-child/assets/fonts/inter.woff2') format('woff2'); 
  font-display: swap; 
  font-weight: 400 800; 
  font-stretch: 100%; 
}
.p-controls { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.p-preset-btn, .p-share-btn { background: var(--p-accent); color: var(--p-stone); padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.85rem; border: none; cursor: pointer; }
.p-tip { background: var(--p-muted); color: white; border-radius: 50%; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; }
.p-chart { width: 120px; height: 120px; display: block; margin: 1rem auto; }
.p-print-btn { width: 100%; margin-top: 1rem; background: var(--p-accent); }
@media (max-width: 480px) { .p-tabs-wrapper { scroll-snap-type: x proximity; } }