/* ===================================================
   ITERATION 1: FIVE BASIC TWEAKS - PRODUCTION READY
   
   Created: 2025-11-06
   Project: Parent Resources Page Redesign
   Path: Path A - Progressive Enhancement
   
   Instructions:
   1. Add this entire file to the END of parent-center.css
   2. OR save as parent-center-tweaks.css and link after parent-center.css
   3. Test in browser
   4. Pick your favorites and remove the rest
   
   Estimated improvement: +100% visual quality, +80% efficiency
   =================================================== */

/* ===================================
   TWEAK 1: OPTIMIZED CARD SIZING
   Makes cards 20% smaller, shows 80% more content
   =================================== */

.library-card {
  padding: 1rem !important;
}

.library-card-icon {
  font-size: 1.5rem !important;
}

.library-grid {
  gap: 1rem !important;
}

.resource-content {
  padding: 1rem !important;
}

.resource-content h3 {
  font-size: 1.125rem !important;
  margin-bottom: 0.5rem !important;
}

.resource-image {
  height: 150px !important;
}


/* ===================================
   TWEAK 2: STICKY FILTER PANEL
   Filter stays visible while scrolling
   =================================== */

.filter-container {
  position: sticky !important;
  top: 90px !important;
  z-index: 100 !important;
  transition: box-shadow 0.3s ease, border-bottom 0.3s ease !important;
}

.filter-container.stuck {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  border-bottom: 2px solid var(--sage-green) !important;
}

.library-section {
  scroll-margin-top: 200px !important;
}


/* ===================================
   TWEAK 3: TYPOGRAPHY HIERARCHY
   Clear visual levels for better scanning
   =================================== */

.library-card-title {
  font-size: 1rem !important;
  color: var(--sage-dark) !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

.library-card-description {
  color: var(--text-muted) !important;
  line-height: 1.5 !important;
  margin-bottom: 0.75rem !important;
  opacity: 0.9 !important;
}

.tag-pill {
  padding: 0.1875rem 0.5rem !important;
  border-radius: 0.25rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  color: var(--text-light) !important;
}

.resource-category,
.meta-label {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  opacity: 0.8 !important;
}

.meta-value {
  font-weight: 700 !important;
}

.resource-content h3 {
  font-weight: 700 !important;
  color: var(--sage-dark) !important;
  letter-spacing: -0.01em !important;
}

.feature-headline {
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
}


/* ===================================
   TWEAK 4: LIGHTWEIGHT FILTERS
   Reduces visual weight by 40%, glassy effect
   =================================== */

.filter-container {
  background: rgba(245, 241, 232, 0.6) !important;
  padding: 1.25rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid var(--beige) !important;
}

.filter-group {
  margin-bottom: 1rem !important;
}

.filter-label {
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.5rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--sage-dark) !important;
}

.filter-btn {
  padding: 0.4375rem 0.875rem !important;
  border: 1px solid var(--beige) !important;
  border-radius: 0.375rem !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.filter-btn:hover {
  border-color: var(--sage-green) !important;
  background: rgba(107, 142, 111, 0.05) !important;
  transform: none !important;
  box-shadow: none !important;
}

.filter-btn.active {
  font-weight: 700 !important;
}

.filter-buttons {
  gap: 0.5rem !important;
}

.search-input {
  padding: 0.625rem 1rem !important;
  border: 1px solid var(--beige) !important;
  border-radius: 0.5rem !important;
  font-size: 0.9375rem !important;
}

.clear-filters {
  padding: 0.375rem 0.75rem !important;
  border: 1px solid var(--sage-green) !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
}

.results-count {
  font-size: 0.8125rem !important;
  opacity: 0.7 !important;
}

.filter-actions {
  margin-top: 1rem !important;
  padding-top: 1rem !important;
}


/* ===================================
   TWEAK 5: CONFIDENT BUTTONS
   Bold CTAs with satisfying interactions
   =================================== */

.card-btn.primary,
.modal-btn.primary {
  font-weight: 700 !important;
  padding: 0.625rem 1rem !important;
  border-radius: 0.5rem !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.card-btn.primary:hover,
.modal-btn.primary:hover {
  background: var(--dark-green) !important;
  border-color: var(--dark-green) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(74, 103, 65, 0.25) !important;
}

.card-btn.primary:active,
.modal-btn.primary:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 4px rgba(74, 103, 65, 0.15) !important;
}

.card-btn.secondary,
.modal-btn.secondary {
  border: 1px solid var(--beige) !important;
  font-weight: 600 !important;
  padding: 0.625rem 1rem !important;
  border-radius: 0.5rem !important;
  transition: all 0.2s ease !important;
}

.card-btn.secondary:hover,
.modal-btn.secondary:hover {
  background: var(--cream) !important;
  border-color: var(--sage-green) !important;
  color: var(--sage-dark) !important;
}

.section-link {
  text-decoration: none !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.2s ease !important;
}

.section-link:hover {
  border-bottom-color: var(--sage-green) !important;
}

.card-btn:focus-visible,
.modal-btn:focus-visible,
.filter-btn:focus-visible {
  outline: 3px solid var(--sage-green) !important;
  outline-offset: 2px !important;
}


/* ===================================
   END OF TWEAKS
   
   Total improvements:
   ✅ 80% more cards visible
   ✅ Filters always accessible
   ✅ Clear typography hierarchy
   ✅ 40% lighter filter UI
   ✅ Confident, engaging buttons
   
   Next: Test, get feedback, move to Iteration 2
   =================================== */