/* --- FOOTER STYLES (Extracted from style.css) --- */

.site-footer {
    /* Change from dark background (#1d1d1f) to a light background (e.g., light gray) */
    background: #ebebeb; 
    /* Change main footer text color from light (#f5f5f7) to a dark color */
    color: #1d1d1f; 
    padding: 40px 40px 20px;
  }
  
  .footer-content-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto 30px;
    text-align: left;
    /* Change border color from light to a dark, subtle shade */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
    padding-bottom: 30px;
  }
  
  .site-footer h4 {
    /* Keep accent color for headings (sun-yellow/orange) */
    color: var(--color-sun);
    margin-bottom: 15px;
    font-size: 1.1rem;
    font-weight: 600;
  }
  
  .site-footer ul {
    list-style: none;
  }
  
  .site-footer li {
    margin-bottom: 8px;
  }
  
  .site-footer a {
    /* Change link color from light gray (#ccc) to a dark gray for a light background */
    color: #333; 
    text-decoration: none;
    transition: color 0.3s;
  }
  
  .site-footer a:hover {
    /* Keep accent color for link hover */
    color: var(--color-sun);
  }
  
  .footer-contact-column p {
    margin-bottom: 8px;
    /* Change contact paragraph color from light gray (#ccc) to a dark gray */
    color: #333; 
  }
  
  .footer-logo-img {
    height: 60px;
    margin-bottom: 15px;
  }
  
  /* 1. CORRECTED: CSS for the social icons CONTAINER to make them horizontal */
  .social-icons {
    /* Use Flexbox on the container to arrange children (the <a> tags) horizontally */
    display: flex; 
    /* Aligns the whole group vertically */
    align-items: center; 
    /* Add some space below the container if needed */
    margin-top: 10px; 
  }
  
  /* 2. MODIFIED: CSS for the individual icon links */
  .social-icons a {
    width: 50px;
    height: 50px;
    /* Change border color from light gray (#ccc) to dark gray (#333) for visibility on light background */
    /* border: 1px solid #333;   */
    border-radius: 50%;
    /* Add margin to separate the icons */
    margin-right: 10px; 
    
    /* Use flexbox here to perfectly center the image inside this circle */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .social-icons a:hover {
    border-color: var(--color-sun);
  }
  
  /* 3. ORIGINAL: CSS for the social media PNG images (This is fine) */
  .social-icons a img {
    /* Set the image size to fit neatly inside the 30px circle */
    width: 60%; 
    height: 60%; 
    /* This ensures the image scales down without being cut off */
    object-fit: contain;
  }
  
  /* Footer Bottom Styles */
  .footer-bottom {
    text-align: center;
    font-size: 0.85rem;
    /* Change text color to the main dark color */
    color: #333; 
  }
  
  .footer-bottom a {
    /* Keep accent color for links (Privacy Policy, Terms of Service) */
    color: var(--color-sun, #FFC107); 
    margin: 0 5px;
  }
  
  /* --- FOOTER RESPONSIVE STYLES --- */
  @media (max-width: 768px) {
    .footer-content-wrapper {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-logo-column {
        text-align: center;
    }
    .footer-logo-img {
        margin: 0 auto 15px;
    }
  }