/* |--------------------------------------------------------------------------
| FOOTER STYLES
|--------------------------------------------------------------------------
| This file contains the CSS necessary for the footer element and its contents.
*/


/* |--------------------------------------------------------------------------
| FOOTER LAYOUT & TYPOGRAPHY
|--------------------------------------------------------------------------
*/
.footer {
    /* NEW: Use the dynamic background image defined in header.php */
    background-image: var(--site-background-url);
    background-color: var(--color-process-black, #020202); 
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat;
    /* --- End New Background Styles --- */
    
    padding: var(--padding-lg) 0; 
    color: var(--color-white, #fff); 
    line-height: 1.6;
    /* Red line across the top for thematic separation */
    border-top: 4px solid var(--color-primary-red); 
}

/* Main content wrapper, center aligned */
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--padding);
    display: grid;
    /* Gap for spacing between the four columns */
    gap: var(--padding-lg); 
    
    /* Mobile: Single column stack */
    grid-template-columns: 1fr;
}

@media (min-width: 48em) {
    /* Tablet: Two columns */
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64em) {
    /* Desktop: three columns with proportional widths */
    .footer-container {
        /* UPDATED: Changed from 1.5fr 2fr 1.5fr to a narrower, more balanced ratio */
        grid-template-columns: 1.5fr 1.75fr 1.5fr;
    }
}

/* Section Headings (h4) */
.footer-section h4 {
    font-family: var(--font-heading);
    color: var(--color-primary-red);
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1.5rem; 
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Links and Spans in Footer Sections */
.footer-links a,
.footer-affiliations a,
.contact-details a,
.contact-details span {
    text-decoration: none;
    color: var(--color-white); 
    transition: color 0.2s ease;
    font-size: 0.95rem; 
    display: inline-block;
    padding: 0.1rem 0;
    line-height: 1.4;
}

.footer-links a:hover,
.footer-affiliations a:hover,
.contact-details a:hover {
    color: var(--color-primary-red); 
}

/* List Formatting */
.footer-section ul,
.contact-details {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section li {
    margin-bottom: 0.75rem; 
}

/* --- COLUMN 1: BRANDING (CENTERED AND REFINED) --- */

.footer-section.footer-brand {
    /* FIX: Center all inline content (text, links, spans) */
    text-align: center; 
}

.site-logo {
    /* Logo size maintained (140px) */
    width: 140px; 
    height: auto;
    margin-bottom: 1rem;
    
    /* FIX: Set logo to block level to respect its width and allow auto margins */
    display: block; 
    /* FIX: Use auto margins to center the block element */
    margin-left: auto; 
    margin-right: auto;
}

.footer-branding-text {
    /* Container structure maintained */
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5rem;
    
    /* FIX: Center the flex item content (MHHS and Esports lines) */
    align-items: center; 
}

.footer-branding-text .title-top-line {
    /* MHHS line (White) */
    font-family: var(--font-heading);
    color: var(--color-white); 
    font-size: 1rem; 
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
}

.footer-branding-text .title-bottom-line {
    /* Esports and Gaming Club line (Red) */
    font-family: var(--font-heading);
    color: var(--color-primary-red); 
    font-size: 1.2rem; 
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
}

/* Hides the old unused h3 and p elements */
.site-title,
.site-tagline {
    display: none;
}

/* Overall smaller font size for copyright and links maintained */
.copyright {
    font-size: 0.75rem; 
    color: var(--color-white); /* CHANGED from --color-grey to **--color-white** */
    line-height: 1.4;
    margin-top: 1.5rem;
}

.footer-links a,
.footer-affiliations a,
.contact-details a,
.contact-details span {
    font-size: 0.9rem;
    display: inline-block;
    padding: 0.1rem 0;
    line-height: 1.4;
}

/* --- COLUMN 3: CONTACT DETAILS --- */

.address-line {
    font-weight: 700;
    color: var(--color-white); 
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
}

.address-content {
    /* Ensures line breaks from kirbytextinline() are styled correctly */
    display: block; 
}


/* --- SOCIAL ICONS (UPDATED FOR SVG ICONS) --- */

.social-icons-footer {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping on very small screens */
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.social-icons-footer a {
    /* Reset text-link properties, focus on the icon (SVG) inside */
    color: var(--color-white);
    text-decoration: none;
    transition: color 0.2s ease;
    
    /* Ensure the icon itself is targeted for size and color */
    display: flex; /* Makes the link container a flex item, aligning the SVG */
    align-items: center;
    justify-content: center;
    width: 28px; /* Set a specific size for the icon container */
    height: 28px;
    padding: 0; /* Remove padding */
    position: static; /* Remove relative positioning from the old hover effect */
}

/* Target the SVG specifically */
.social-icons-footer a svg {
    width: 100%;
    height: 100%;
    fill: currentColor; /* Inherit color from the parent link */
}

/* Hover effect for the icon */
.social-icons-footer a:hover {
    color: var(--color-primary-red);
}

/* Remove the redundant text-based hover effect */
.social-icons-footer a::after {
    display: none; 
}