/* Families-specific styles - Using components.css */

:root {
    --accent-color: var(--families-primary);
    --brand-accent: var(--families-primary);
    --feature-header-bg: var(--families-light);
    --brand-primary: var(--families-primary);
    --primary: var(--families-primary);
    --primary-dark: var(--families-dark);
    --brand-secondary: var(--families-secondary);
    --gradient-start: var(--families-dark);
    --gradient-end: var(--families-primary);
    --text-dark: var(--families-dark);
    --brand-accent-light: rgba(65, 179, 163, 0.1);
    
    /* Override shadow variables with family-tinted shadows */
    --shadow-sm: 0 3px 10px rgba(65, 179, 163, 0.05);
    --shadow-md: 0 8px 24px rgba(65, 179, 163, 0.1);
    
    /* Override border colors */
    --border-color: rgba(65, 179, 163, 0.1);
  }
  /* ======= FAMILIES TOP Bar and Nav STYLING ======= */
  
  .top-bar {
    background-color: var(--families-primary);
    background: linear-gradient(135deg, var(--families-dark), var(--families-primary));
  }
  
  .navbar-nav .nav-link {
    color: var(--text-heading);
    transition: color 0.3s ease, background-color 0.3s ease;
  }
  
  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link.active {
    color: var(--families-primary);
    background-color: rgba(65, 179, 163, 0.1); /* Light teal tint on hover */
    border-radius: 0.5rem; /* Optional: subtle pill shape if desired */
  }
  
  /* ======= Specialized Care Feature Block Styling ======= */
  .specialized-care-feature {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
  }
  
  .specialized-care-icon {
    background-color: var(--families-primary);
    color: var(--families-text-on);
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    aspect-ratio: 1 / 1;
    line-height: 1 !important;
    padding: 0 !important;
    flex-shrink: 0;
  }
  
  .specialized-care-content h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.25rem;
  }
  
  .specialized-care-content p {
    color: var(--text-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
    margin: 0;
  }
  
  
  /* FAMILY Framework theming */
  .family-framework-header {
    /* Inherits base styling from framework-header in components.css */
  }
  
  /* Add for segment-specific focus states */
  .families-theme :focus {
    outline-color: var(--families-primary);
  }
  
  .family-badge {
    background-color: var(--families-light);
    color: var(--families-dark);
  }
  
  /* Pricing cards theming */
  .pricing-card.popular {
    border-color: var(--families-primary);
  }
  
  .popular-badge {
    background-color: var(--families-primary); /* Match brand tone */
    color: var(--text-on-dark);
    font-size: 0.75rem; /* Slightly smaller for elegance */
  }
  
  .pricing-card.popular .pricing-card-header h3 {
    color: var(--families-dark);
  }
  
  .pricing-card.popular .pricing-price {
    color: var(--families-dark);
  }
  
  .pricing-features i {
    color: var(--families-primary);
  }
  
  /* Feature card theming */
  
  
  /* Implementation steps theming */
  .step-number {
    background-color: var(--families-primary);
  }
  
  .step-duration {
    background-color: var(--families-light);
    color: var(--families-dark);
  }
  
  /* families.css */
  
  .shadow {
    box-shadow: 0 4px 12px rgba(65, 179, 163, 0.08); /* subtle teal tint */
  }
  
  /* ========== TESTIMONIAL BRAND STYLING ========== */
  
  .testimonial-card {
    border-top: 4px solid var(--families-primary);
    background: linear-gradient(135deg, rgba(65, 179, 163, 0.08) 0%, rgba(255, 255, 255, 1) 80%);
  }
  
  .testimonial-content p::before {
    color: var(--families-primary);
  }
  
  .testimonial-image {
    border: 3px solid var(--families-primary);
  }
  
  .testimonial-icon {
    color: var(--families-primary);
    opacity: 0.1;
  }
  
  .testimonial-author {
    color: var(--families-primary);
  }
  
  .swiper-pagination-bullet-active {
    background-color: var(--families-primary) !important;
  }
  
  /* ========== FAMILY CTA STYLING ========== */
  #cta-section {
    background: var(--families-primary); /* or a gradient if needed */
    color: var(--text-on-dark);
  }
  
  #cta-section h2,
  #cta-section p,
  #cta-urgency {
    color: var(--text-on-dark);
  }
  
  #cta-buttons .btn-light {
    background-color: #fff;
    color: var(--families-primary);
    border: none;
  }
  
  #cta-buttons .btn-outline-light {
    border-color: #fff;
    color: #fff;
  }
  
  #cta-buttons .btn-outline-light:hover {
    background-color: #fff;
    color: var(--families-primary);
  }