/**
 * FGA (Frank-Gentiana-Amanda) Theme
 * Vlindertuin vibe - Vrolijke, positieve kleuren voor dagelijkse levenstips
 * Datum: 3 januari 2026
 */

/* ============================================================================
   KLEUREN PALET - VLINDERTUIN
   ========================================================================= */

:root {
  /* Primaire Vlindertuin Kleuren */
  --fga-pink: #FF6B9D;
  --fga-pink-light: #FFB3D9;
  --fga-pink-soft: #FFF0F5;

  --fga-purple: #C44569;
  --fga-purple-light: #E27396;
  --fga-purple-soft: #F8E8EE;

  --fga-mint: #A8E6CF;
  --fga-mint-light: #D4F1E3;
  --fga-mint-soft: #F0FBF7;

  --fga-green: #77DD77;
  --fga-green-light: #B8EEB8;
  --fga-green-soft: #F0F9F0;

  --fga-lavender: #C7CEEA;
  --fga-lavender-light: #E3E6F3;
  --fga-lavender-soft: #F5F6FA;

  --fga-yellow: #FFD93D;
  --fga-yellow-light: #FFECB3;
  --fga-yellow-soft: #FFFBEF;

  --fga-peach: #FFB4A2;
  --fga-peach-light: #FFD4C4;
  --fga-peach-soft: #FFF5F2;

  /* Neutrale Kleuren */
  --fga-white: #FFFFFF;
  --fga-cream: #FFFEF9;
  --fga-gray-light: #F8F9FA;
  --fga-gray: #8B9AA7;
  --fga-gray-dark: #5D6D7E;
  --fga-text: #2C3E50;

  /* Gradient Backgrounds */
  --fga-gradient-sunset: linear-gradient(135deg, #FFB4A2 0%, #FF6B9D 50%, #C44569 100%);
  --fga-gradient-garden: linear-gradient(135deg, #A8E6CF 0%, #77DD77 50%, #D4F1E3 100%);
  --fga-gradient-sky: linear-gradient(135deg, #C7CEEA 0%, #E3E6F3 50%, #A8E6CF 100%);
  --fga-gradient-butterfly: linear-gradient(135deg, #FFB3D9 0%, #C7CEEA 50%, #A8E6CF 100%);

  /* Typografie */
  --fga-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --fga-font-heading: 'Georgia', 'Times New Roman', serif;

  /* Spacing */
  --fga-spacing-xs: 8px;
  --fga-spacing-sm: 16px;
  --fga-spacing-md: 24px;
  --fga-spacing-lg: 40px;
  --fga-spacing-xl: 60px;

  /* Borders & Shadows */
  --fga-radius-sm: 8px;
  --fga-radius-md: 12px;
  --fga-radius-lg: 20px;
  --fga-radius-xl: 30px;

  --fga-shadow-soft: 0 4px 20px rgba(255, 107, 157, 0.15);
  --fga-shadow-hover: 0 8px 30px rgba(255, 107, 157, 0.25);
  --fga-shadow-card: 0 2px 15px rgba(168, 230, 207, 0.2);
}

/* ============================================================================
   BASE STYLES
   ========================================================================= */

body.fga-page {
  font-family: var(--fga-font-family);
  background: var(--fga-cream);
  color: var(--fga-text);
  line-height: 1.7;
}

/* ============================================================================
   HEADER
   ========================================================================= */

.fga-header {
  background: var(--fga-gradient-butterfly);
  padding: var(--fga-spacing-lg) var(--fga-spacing-md);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.fga-header::before {
  content: '🦋';
  position: absolute;
  font-size: 120px;
  opacity: 0.1;
  top: -20px;
  right: 10%;
  animation: float 6s ease-in-out infinite;
}

.fga-header::after {
  content: '🦋';
  position: absolute;
  font-size: 80px;
  opacity: 0.08;
  bottom: -10px;
  left: 15%;
  animation: float 8s ease-in-out infinite reverse;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

.fga-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--fga-spacing-sm);
  margin-bottom: var(--fga-spacing-sm);
  position: relative;
  z-index: 1;
}

.fga-logo-icon {
  width: 60px;
  height: 60px;
  animation: flutter 3s ease-in-out infinite;
}

@keyframes flutter {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.05) rotate(-5deg); }
  75% { transform: scale(1.05) rotate(5deg); }
}

.fga-logo-text {
  font-family: var(--fga-font-heading);
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--fga-purple);
  letter-spacing: 2px;
}

.fga-tagline {
  font-size: 1.1rem;
  color: var(--fga-gray-dark);
  font-style: italic;
  position: relative;
  z-index: 1;
}

.fga-back-link {
  position: absolute;
  top: var(--fga-spacing-md);
  left: var(--fga-spacing-md);
  color: var(--fga-purple);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
  z-index: 2;
}

.fga-back-link:hover {
  color: var(--fga-pink);
  transform: translateX(-5px);
}

/* ============================================================================
   ARTICLE GRID (YouTube-style)
   ========================================================================= */

.fga-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--fga-spacing-lg) var(--fga-spacing-md);
}

.fga-section-title {
  font-family: var(--fga-font-heading);
  font-size: 2rem;
  color: var(--fga-purple);
  margin-bottom: var(--fga-spacing-md);
  text-align: center;
}

.fga-articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--fga-spacing-md);
  margin-top: var(--fga-spacing-lg);
}

/* ============================================================================
   ARTICLE CARD (YouTube thumbnail style)
   ========================================================================= */

.fga-article-card {
  background: var(--fga-white);
  border-radius: var(--fga-radius-md);
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: var(--fga-shadow-card);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.fga-article-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--fga-shadow-hover);
}

.fga-article-thumbnail {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: var(--fga-gradient-garden);
  position: relative;
}

.fga-article-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fga-article-category {
  position: absolute;
  top: var(--fga-spacing-sm);
  left: var(--fga-spacing-sm);
  background: var(--fga-white);
  color: var(--fga-purple);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.fga-article-duration {
  position: absolute;
  bottom: var(--fga-spacing-sm);
  right: var(--fga-spacing-sm);
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

.fga-article-content {
  padding: var(--fga-spacing-md);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.fga-article-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--fga-text);
  margin-bottom: var(--fga-spacing-xs);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fga-article-summary {
  color: var(--fga-gray-dark);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: var(--fga-spacing-sm);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.fga-article-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--fga-gray);
  font-size: 0.85rem;
  padding-top: var(--fga-spacing-sm);
  border-top: 1px solid var(--fga-gray-light);
}

.fga-article-date {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fga-article-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.fga-tag {
  background: var(--fga-lavender-soft);
  color: var(--fga-purple);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

/* ============================================================================
   ARTICLE DETAIL PAGE
   ========================================================================= */

.fga-article-detail {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--fga-spacing-lg) var(--fga-spacing-md);
}

.fga-article-header {
  text-align: center;
  margin-bottom: var(--fga-spacing-lg);
  padding: var(--fga-spacing-lg);
  background: var(--fga-gradient-sky);
  border-radius: var(--fga-radius-lg);
}

.fga-article-header h1 {
  font-family: var(--fga-font-heading);
  font-size: 2.5rem;
  color: var(--fga-purple);
  margin-bottom: var(--fga-spacing-sm);
  line-height: 1.3;
}

.fga-article-info {
  display: flex;
  justify-content: center;
  gap: var(--fga-spacing-md);
  flex-wrap: wrap;
  color: var(--fga-gray-dark);
  font-size: 0.95rem;
}

.fga-article-info-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fga-article-body {
  background: var(--fga-white);
  padding: var(--fga-spacing-lg);
  border-radius: var(--fga-radius-md);
  box-shadow: var(--fga-shadow-card);
  line-height: 1.8;
}

.fga-article-body h2 {
  font-family: var(--fga-font-heading);
  color: var(--fga-purple);
  margin-top: var(--fga-spacing-lg);
  margin-bottom: var(--fga-spacing-md);
  padding-bottom: var(--fga-spacing-xs);
  border-bottom: 2px solid var(--fga-pink-soft);
}

.fga-article-body h3 {
  color: var(--fga-pink);
  margin-top: var(--fga-spacing-md);
  margin-bottom: var(--fga-spacing-sm);
}

.fga-article-body p {
  margin-bottom: var(--fga-spacing-md);
  color: var(--fga-text);
}

.fga-article-body a {
  color: var(--fga-purple);
  text-decoration: none;
  border-bottom: 2px solid var(--fga-pink-light);
  transition: all 0.3s ease;
}

.fga-article-body a:hover {
  color: var(--fga-pink);
  border-bottom-color: var(--fga-pink);
}

.fga-article-body ul,
.fga-article-body ol {
  margin-left: var(--fga-spacing-md);
  margin-bottom: var(--fga-spacing-md);
}

.fga-article-body li {
  margin-bottom: var(--fga-spacing-xs);
}

/* Highlight boxes */
.fga-highlight {
  background: var(--fga-mint-soft);
  border-left: 4px solid var(--fga-mint);
  padding: var(--fga-spacing-md);
  margin: var(--fga-spacing-md) 0;
  border-radius: var(--fga-radius-sm);
}

.fga-tip {
  background: var(--fga-yellow-soft);
  border-left: 4px solid var(--fga-yellow);
  padding: var(--fga-spacing-md);
  margin: var(--fga-spacing-md) 0;
  border-radius: var(--fga-radius-sm);
}

.fga-warning {
  background: var(--fga-peach-soft);
  border-left: 4px solid var(--fga-peach);
  padding: var(--fga-spacing-md);
  margin: var(--fga-spacing-md) 0;
  border-radius: var(--fga-radius-sm);
}

/* ============================================================================
   BUTTONS
   ========================================================================= */

.fga-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--fga-radius-xl);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  font-family: var(--fga-font-family);
}

.fga-btn-primary {
  background: var(--fga-gradient-sunset);
  color: var(--fga-white);
  box-shadow: var(--fga-shadow-soft);
}

.fga-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--fga-shadow-hover);
}

.fga-btn-secondary {
  background: var(--fga-white);
  color: var(--fga-purple);
  border: 2px solid var(--fga-purple);
}

.fga-btn-secondary:hover {
  background: var(--fga-purple);
  color: var(--fga-white);
}

/* ============================================================================
   FILTERS & CATEGORIES
   ========================================================================= */

.fga-filters {
  display: flex;
  gap: var(--fga-spacing-sm);
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: var(--fga-spacing-lg);
  padding: var(--fga-spacing-md);
  background: var(--fga-white);
  border-radius: var(--fga-radius-lg);
  box-shadow: var(--fga-shadow-card);
}

.fga-filter-btn {
  padding: 8px 20px;
  border-radius: var(--fga-radius-xl);
  background: var(--fga-gray-light);
  color: var(--fga-gray-dark);
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
  font-family: var(--fga-font-family);
}

.fga-filter-btn:hover,
.fga-filter-btn.active {
  background: var(--fga-gradient-butterfly);
  color: var(--fga-white);
  transform: scale(1.05);
}

/* ============================================================================
   FOOTER
   ========================================================================= */

.fga-footer {
  text-align: center;
  padding: var(--fga-spacing-lg);
  background: var(--fga-gradient-garden);
  color: var(--fga-gray-dark);
  margin-top: var(--fga-spacing-xl);
}

.fga-footer-butterfly {
  font-size: 3rem;
  margin-bottom: var(--fga-spacing-sm);
  display: inline-block;
  animation: flutter 3s ease-in-out infinite;
}

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

@media (max-width: 768px) {
  .fga-logo-text {
    font-size: 1.8rem;
  }

  .fga-articles-grid {
    grid-template-columns: 1fr;
  }

  .fga-article-header h1 {
    font-size: 1.8rem;
  }

  .fga-filters {
    gap: var(--fga-spacing-xs);
  }

  .fga-filter-btn {
    font-size: 0.85rem;
    padding: 6px 14px;
  }

  .fga-back-link {
    position: static;
    margin-bottom: var(--fga-spacing-sm);
  }
}

@media (min-width: 769px) and (max-width: 1200px) {
  .fga-articles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}