/*
Theme Name: Remedy Reviews One-Page
Description: A modern one-page WordPress theme for health and wellness reviews
Author: Your Name
Version: 1.0
License: GPL v2 or later
Text Domain: remedy-reviews
*/

/* Import all styles from the React version */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* Base Colors */
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 142 76% 36%;
  --primary-foreground: 355.7 100% 97.3%;
  --secondary: 210 40% 98%;
  --secondary-foreground: 222.2 84% 4.9%;
  --muted: 210 40% 98%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 98%;
  --accent-foreground: 222.2 84% 4.9%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 142 76% 36%;
  --chart-1: 12 76% 61%;
  --chart-2: 173 58% 39%;
  --chart-3: 197 37% 24%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;
  --radius: 8px;

  /* Custom Design System Colors */
  --subtle: 210 20% 98%;
  --success: 142 76% 36%;
  --warning: 38 92% 50%;
  --health-green: 142 76% 36%;
  --primary-glow: 142 76% 50%;
  --accent-warm: 24 100% 50%;
  --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-glow)));
  --gradient-subtle: linear-gradient(180deg, hsl(var(--background)), hsl(var(--subtle)));
  --shadow-elegant: 0 10px 30px -10px hsl(var(--primary) / 0.3);
  --shadow-glow: 0 0 40px hsl(var(--primary-glow) / 0.4);
  --shadow-soft: 0 4px 20px hsl(var(--primary) / 0.1);
  --shadow-colored: 0 8px 32px hsl(142 76% 36% / 0.15);

  /* Typography */
  --font-heading: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --font-body: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

  /* Spacing & Layout */
  --radius: 8px;
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --primary: 142 76% 36%;
  --primary-foreground: 355.7 100% 97.3%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 142 76% 36%;
  --chart-1: 220 70% 50%;
  --chart-2: 160 60% 45%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;
  --subtle: 217.2 32.6% 15%;
}

/* Base Styles */
* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  color: hsl(var(--foreground));
}

/* WordPress Specific Styles */
.alignleft { float: left; margin-right: 1rem; }
.alignright { float: right; margin-left: 1rem; }
.aligncenter { text-align: center; margin: 0 auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.875rem; color: hsl(var(--muted-foreground)); }

/* Navigation */
.main-navigation {
  background: hsl(var(--background) / 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid hsl(var(--border));
}

.hero-section {
  background: var(--gradient-subtle);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.blog-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--transition-smooth);
  box-shadow: var(--shadow-soft);
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elegant);
}

/* Responsive */
@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
}

/* Line clamp utility */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;   
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;   
  overflow: hidden;
}