/*
 * Styles to make the footer "sticky"
 * This ensures it stays at the bottom even on pages with little content.
 * You might need to adjust your main body styles to match this.
*/
html {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* This new wrapper will grow to push the footer down */
/* Make sure your main page content is inside an element with this class */
.content-wrapper {
    flex: 1 0 auto;
}

.site-footer {
    flex-shrink: 0; /* Prevents the footer from shrinking */
}
/* End of sticky footer styles */


/* The main footer element */
.site-footer {
    /* A dark, subtle gradient that complements your site's purple/blue theme */
    background: linear-gradient(135deg, #1f1235, #111827);
    padding: 1.5rem 2rem;
    color: #a1a1aa; /* Using --text-secondary from your styles.css */
    border-top: 1px solid rgba(255, 255, 255, 0.08); /* Using --border-color */
    width: 100%;
    box-sizing: border-box; /* Ensures padding doesn't add to the width */
}

/* Container to align content with your site's layout */
.footer-container {
    display: flex;
    flex-direction: row; /* Aligns items on the same line */
    justify-content: center; /* Centers the items as a group */
    align-items: center; /* Vertically aligns items */
    gap: 1.5rem; /* Space between the logo and the text */
    max-width: 1200px; /* Aligns with the .container in your site */
    margin: 0 auto;
    flex-wrap: wrap; /* Allows wrapping on very small screens */
}

/* Logo styling */
.footer-logo img {
    height: 50px; 
    display: block; 
    transition: filter 0.3s ease;
}

.footer-logo img:hover {
    /* A warmer, more colourful golden-yellow glow */
    filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.7));
}

/* License information styling */
.footer-license {
    font-size: 0.875rem;
    text-align: center; 
}

.footer-license a {
    color: #a78bfa; /* Using --primary-purple-light */
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-license a:hover {
    color: #f5f5f5; /* Using --text-primary */
    text-decoration: underline;
}

/* Creative Commons icon styling */
.footer-license .cc-icons img {
    height: 1.2em;
    vertical-align: middle; /* Aligns icons with the text */
    margin-left: 0.2em;
    filter: invert(75%) sepia(10%) saturate(1500%) hue-rotate(200deg) brightness(100%) contrast(90%);
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.footer-license a:hover .cc-icons img {
    opacity: 1;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column; /* Stack logo and license vertically */
        gap: 1rem;
    }
}