/* style.css */

/* This file can be used for additional custom CSS if needed,
   but most styling is handled by Tailwind CSS directly in the HTML. */

/* Basic reset or common styles not covered by Tailwind defaults */
:root {
    --gray-text: #4A4A4A; /* Custom property for consistent text color */
}

/* Ensure images from simple-icons are colored correctly by Tailwind */
/* This requires a slightly more complex approach if not using SVG directly
   or if Tailwind's default fill-current isn't enough for ALL contexts.
   For simple-icons, fill-current on the SVG itself should work.
   If using img tags with SVG, they might not inherit fill.
   The current implementation uses img tags, so explicit coloring in the SVG source
   or CSS filter might be needed if they don't appear white.
   For simplicity, if you download the SVGs, you can modify their fill attribute.
   For CDN, they might retain their default color.
   Here, we assume Tailwind's text-gray-400 and hover:text-white applies correctly
   to the parent `<a>` and if the SVG is inline or uses `fill="currentColor"`.
   Given the CDN approach, they might appear black by default.
   A quick fix for CDN is to apply a filter:
*/
.footer a img {
    filter: invert(70%) sepia(10%) saturate(200%) hue-rotate(180deg) brightness(120%) contrast(90%); /* Light gray */
}
.footer a:hover img {
    filter: invert(100%) sepia(0%) saturate(7499%) hue-rotate(334deg) brightness(108%) contrast(100%); /* White */
}
/* This filter approach is a workaround; embedding SVGs directly and using fill="currentColor"
   is generally more robust with Tailwind. */