:root {
  /* Core Colors */
  --primary-blue: #0A66C2;
  --dark-blue: #084484;
  --pure-white: #FFFFFF;
  --success-green: #2E8B57;
  --premium-gold: #FFD700;
  --light-gold: #ffe033;
  --alert-coral: #FF6B6B;
  --light-gray: #F5F5F5;

  /* Newly Defined General Colors */
  --medium-gray: #CCCCCC; /* For borders, etc. */
  --soft-gray: #E0E0E0; /* For lighter backgrounds/hover states */
  --dark-text-general: #333; /* For general dark text (body color) */
  --light-text-general: #ccc; /* For lighter text in footer */
  --ad-image-placeholder: #ddd; /* For placeholder image background */
  --warm-gold: var(--premium-gold); /* Alias for premium gold for specific use */
  --footer-border-rgba: rgba(255, 255, 255, 0.1); /* For footer border */
  --ad-shadow-rgba: rgba(0, 0, 0, 0.1); /* For ad-card box-shadow */
  --ad-hover-shadow-rgba: rgba(0, 0, 0, 0.1); /* For ad-card hover box-shadow */

  /* Search Section Specific Colors */
  --success-green-darker: #226B42; /* A slightly darker shade for success button hover */
  --primary-blue-overlay-light: rgba(255, 255, 255, 0.15); /* Light overlay for dropdowns/checkbox against primary blue background */
  --primary-blue-border-light: rgba(255, 255, 255, 0.3); /* Light border for dropdowns against primary blue background */
  --gold-focus-shadow: rgba(255, 215, 0, 0.3); /* Soft gold shadow for focus states */


  /* Text Colors */
  --text-dark: #1D2226;
  --text-medium: #666666;
  --text-light: #999999;
  --ad-location-text: var(--text-medium);
  --ad-time-text: var(--text-light);

  /* Functional Colors */
  --success: var(--success-green);
  --error: var(--alert-coral);
  --warning: var(--premium-gold);

  /* General Variables / Aliases for consistency */
  --bg-light: var(--light-gray);
  --border: var(--medium-gray);
  --radius: 4px; /* Defined for consistent border-radius */
  --clean-white: var(--pure-white); /* Alias for pure-white */
  --dark: var(--dark-text-general); /* Alias for a general dark text color */

  /* Header Specific (Using core colors) */
  --header-bg: var(--primary-blue);
  --header-hover: var(--dark-blue);
  --header-text: var(--pure-white);
  --header-shadow: 0 2px 5px var(--ad-shadow-rgba);

  /* Shadows (Consolidated and using consistent naming) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 6px 12px rgba(0, 0, 0, 0.15);
  --box-shadow-ad-card: 0 2px 5px var(--ad-shadow-rgba);
  --box-shadow-ad-card-hover: 0 5px 15px var(--ad-hover-shadow-rgba);

  /* Button Specific (Aligning to primary-blue for consistency) */
  --primary: var(--primary-blue);
  --primary-dark: var(--dark-blue);
  --primary-light: var(--lightest-blue);
  --white: var(--pure-white);
}



/* --- FOOTER STYLES --- */
.site-footer {
  background-color: var(--dark-blue); /* A dark background for the footer */
  color: var(--pure-white);
  padding: 40px 20px; /* General padding */
  font-size: 0.9rem;
  text-align: center; /* Center content by default for mobile */
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Auto-fit columns */
  gap: 30px; /* Space between columns */
  max-width: 1200px; /* Limit width */
  margin: 0 auto; /* Center the grid */
  margin-bottom: 20px; /* Space above bottom links */
}

.footer-column {
  /* Default styles for columns */
  text-align: center; /* Center content in columns for mobile */
}

.footer-column h3 {
  color: var(--light-gold); /* Example heading color */
  font-size: 1.1rem;
  margin-bottom: 15px;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column ul li {
  margin-bottom: 8px;
}

.footer-column ul li a {
  color: var(--light-gray); /* Lighter link color */
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-column ul li a:hover {
  color: var(--pure-white);
}

.footer-logo {
  max-width: 120px;
  height: auto;
  margin-bottom: 15px;
}

.social-icons a {
  color: var(--pure-white);
  font-size: 1.5rem;
  margin: 0 10px;
  transition: color 0.3s ease;
}

.social-icons a:hover {
  color: var(--light-gold);
}

.footer-bottom {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.8rem;
  color: var(--light-gray);
}

.footer-bottom a {
  color: var(--light-gray);
  text-decoration: none;
  margin: 0 10px;
}

.footer-bottom a:hover {
  color: var(--pure-white);
}


/* --- FOOTER RESPONSIVE ADJUSTMENTS --- */
@media (min-width: 769px) { /* Adjust to a multi-column layout for larger screens */
  .site-footer {
    text-align: left; /* Align text left on larger screens */
    padding-left: 40px;
    padding-right: 40px;
  }

  .footer-grid {
    grid-template-columns: repeat(4, 1fr); /* 4 columns on desktop */
    text-align: left; /* Align columns left */
  }

  .footer-column {
    text-align: left; /* Align text within columns left */
  }
}

@media (max-width: 768px) { /* Tablets and larger mobiles */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr); /* Two columns on tablets */
    gap: 25px;
  }
  .footer-column:nth-child(odd) { /* Center first and third columns if stacking */
    text-align: center;
  }
  .footer-column:nth-child(even) { /* Center second and fourth columns if stacking */
    text-align: center;
  }
}

@media (max-width: 576px) { /* Smaller phones */
  .site-footer {
    padding: 30px 15px; /* Reduce padding */
  }
  .footer-grid {
    grid-template-columns: 1fr; /* Stack all columns on smallest phones */
    gap: 20px;
  }
  .footer-column {
    text-align: center; /* Ensure all columns are centered when stacked */
  }
  .footer-logo {
    margin-bottom: 10px; /* Reduce margin */
  }
  .social-icons {
    display: flex; /* Use flexbox to center icons */
    justify-content: center;
    gap: 15px; /* Space between icons */
  }
  .social-icons a {
    margin: 0; /* Remove horizontal margin if using gap */
  }
}