/* Footer styles - Mobile-First 2026 Best Practices */
.footer-bottom {
    text-align: center;
    /* Slightly reduced top padding to tighten footer vertical rhythm */
    padding-top: clamp(0.75rem, 1.5vw, 1rem);
    border-top: 1px solid var(--dark-secondary);
    color: var(--text-light);
    font-size: clamp(0.8125rem, 2vw, 0.9375rem);
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    /* Slightly tighter gap and smaller bottom margin to reduce height */
    gap: clamp(0.375rem, 0.8vw, 0.75rem);
    margin-bottom: clamp(0.5rem, 1vw, 0.75rem);
}

.footer-legal a,
.footer-legal button {
    /* Override global touch-target for these small inline legal controls
       to keep them compact while maintaining horizontal padding for clickability */
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: clamp(0.25rem, 0.8vw, 0.35rem) clamp(0.4rem, 1vw, 0.6rem);
    line-height: 1;
}

.footer-bottom p { margin: 0; }

.footer-logo { 
    width: auto;
    height: auto;
    max-width: clamp(180px, 50vw, 220px);
    max-height: clamp(70px, 18vw, 90px);
    object-fit: contain;
    display: block;
    padding: 0;
    margin: 0 auto;
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
}

.footer-logo:hover { 
    background: var(--white); 
    transform: translateY(-2px); 
    box-shadow: var(--shadow-lg); 
}

.footer-logo-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    width: 100%;
}

.footer-section:first-child { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
    gap: clamp(0.75rem, 2vw, 1rem);
    width: 100%;
    max-width: 100%;
}

.footer-description { 
    color: var(--text-light); 
    line-height: 1.7;
    font-size: clamp(0.875rem, 2.2vw, 0.95rem);
    margin: 0;
    max-width: min(48ch, 90%);
    text-align: center;
    letter-spacing: 0.3px;
    font-weight: 400;
    opacity: 0.95;
}

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

/* Consistent vertical rhythm for all footer link lists on mobile */
.footer-section .footer-links li {
    margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
}

.footer-section .footer-links a {
    display: inline-block;
    padding: clamp(0.125rem, 0.6vw, 0.25rem) 0;
    min-height: auto;
    line-height: 1.4;
    text-align: center;
}

.footer-section { 
    display: flex; 
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
}

/* Services column - mobile single column, tablet+ two columns */
.footer-section:nth-child(2) .footer-links { 
    display: grid; 
    grid-template-columns: 1fr;
    gap: clamp(0.5rem, 1.5vw, 0.75rem);
    width: 100%;
    max-width: 280px;
}

.footer-section:not(:first-child) { 
    margin-left: 0;
}

.footer-section:nth-child(2) .footer-links li { 
    min-width: 0; 
    margin-bottom: 0;
    padding: 0;
}

.footer-section:nth-child(2) .footer-links a { 
    display: inline-block;
    white-space: normal;
    font-size: clamp(0.875rem, 2vw, 0.95rem);
}

/* Quick Links - single vertical list */
.footer-section:nth-child(3) .footer-links { 
    display: block;
    width: 100%;
    max-width: 280px;
    text-align: center;
}

.footer-section:nth-child(3) .footer-links li { 
    display: block;
}

/* Tablet portrait and up (48em / 768px) - two column layout */
@media (min-width: 48em) {
    /* Layout grid for footer on tablet+; keep columns balanced so the
       logo/description don't overlap other columns. */
    .footer-content {
        display: grid;
        grid-template-columns: 1.2fr 1fr 1fr 1fr;
        gap: clamp(1rem, 2vw, 1.5rem);
        align-items: start;
        text-align: left;
        justify-items: start;
    }
    
    .footer-section {
        align-items: flex-start;
    }
    
    .footer-section:first-child { 
        display: flex;
        flex-direction: row; 
        align-items: center; 
        gap: clamp(1rem, 2vw, 1.5rem);
        text-align: left;
    }

    /* Keep logo constrained so it doesn't push into the description column */
    .footer-section:first-child .footer-logo { 
        max-width: 160px;
        max-height: 80px;
        margin: 0;
        flex: 0 0 auto;
        width: auto;
    }

    .footer-section:first-child .footer-description { 
        margin: 0;
        align-self: center;
        max-width: 44ch;
        flex: 1 1 0;
        min-width: 0; /* allow flex item to shrink to prevent overflow/overlap */
        text-align: left;
    }
    
    .footer-section h3 {
        text-align: left;
    }
    
    .footer-section:nth-child(3) .footer-links {
        text-align: left;
    }
    
    /* Services: two columns on tablet+ */
    .footer-section:nth-child(2) .footer-links { 
        grid-template-columns: repeat(2, minmax(140px, 1fr));
        gap: clamp(0.5rem, 1.5vw, 0.75rem) clamp(0.75rem, 2vw, 1rem);
        max-width: 100%;
    }
    
    /* Center Services header */
    .footer-section:nth-child(2) h3 { 
        text-align: center;
    }

    /* Ensure section headings sit above their lists and have consistent spacing */
    .footer-section h3 {
        display: block;
        margin: 0 0 clamp(0.75rem, 1.5vw, 1rem) 0;
        font-size: 1rem;
        font-weight: 700;
    }

    /* Footer contact: align items left on tablet+ and keep icon spacing */
    .footer-contact li {
        justify-content: flex-start;
        align-items: center;
        margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
    }

    .footer-contact i {
        margin-right: 0.75rem;
        margin-top: 0;
        flex-shrink: 0;
        width: 1.2rem;
        text-align: center;
    }
}

/* Tablet landscape and up (64em / 1024px) - four column layout */
@media (min-width: 64em) {
    .footer-content { 
        grid-template-columns: 1fr 1.6fr 0.95fr 0.95fr;
        gap: clamp(1.25rem, 2vw, 2rem);
    }
    
    .footer-section:first-child { 
        grid-column: auto;
    }
    
    .footer-section:not(:first-child) { 
        margin-left: clamp(1rem, 2vw, 2rem);
    }
    
    .footer-section:nth-child(4) { 
        margin-left: 0.5rem;
    }
    
    /* Center Quick Links and Contact headers */
    .footer-section:nth-child(3) h3,
    .footer-section:nth-child(4) h3 { 
        text-align: center;
        white-space: nowrap;
    }
    
    /* Restore left alignment for links on tablet+ */
    .footer-links a {
        text-align: left;
    }
    
    /* Restore left alignment for contact items on tablet+ */
    .footer-contact {
        max-width: 100%;
    }
    
    .footer-contact li {
        justify-content: flex-start;
        text-align: left;
    }
}

/* Large desktop (75em / 1200px) */
@media (min-width: 75em) {
    .footer-section:nth-child(2) .footer-links a { 
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
.footer-links li { 
    margin-bottom: 0;
}

.footer-links a { 
    color: var(--text-light); 
    transition: var(--transition-fast); 
    text-decoration: none; 
    font-size: clamp(0.875rem, 2vw, 0.98rem);
    position: relative;
    display: inline-block;
    /* Avoid forcing a large min-height on footer links which breaks layout;
       keep comfortable vertical padding for tap targets instead. */
    padding: clamp(0.25rem, 0.8vw, 0.5rem) 0;
    line-height: 1.5;
    text-align: center;
}

.footer-links a:hover { 
    color: var(--primary-light); 
}

/* Contact section centering on mobile */
.footer-contact { 
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 280px;
}

.footer-contact li { 
    display: flex; 
    gap: clamp(0.5rem, 1.5vw, 1rem);
    margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
    align-items: flex-start;
    justify-content: center;
    text-align: center;
}

.footer-contact i { 
    color: var(--primary-light); 
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.footer-contact a,
.footer-contact span { 
    color: var(--text-light); 
    transition: var(--transition-fast); 
    text-decoration: none; 
    position: relative;
    font-size: clamp(0.875rem, 2vw, 0.95rem);
    line-height: 1.6;
}

.footer-contact a:hover { 
    color: var(--primary-light); 
}

.footer-social { 
    display: flex; 
    gap: clamp(0.5rem, 2vw, 1rem);
    margin-top: clamp(1rem, 2vw, 1.5rem);
    flex-wrap: wrap;
}

.footer-social a { 
    width: clamp(40px, 10vw, 48px);
    height: clamp(40px, 10vw, 48px);
    background: var(--dark-secondary); 
    border-radius: var(--radius-md);
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    color: var(--text-light); 
    transition: var(--transition-normal); 
}

.footer-social a:hover { 
    background: var(--primary-color); 
    color: var(--white); 
    transform: translateY(-3px); 
}



/* Show dividers on larger screens */
@media (min-width: 48em) {
    .footer-legal { 
        flex-wrap: nowrap;
    }
    
    .footer-legal .divider { 
        display: inline;
    }
}

.footer-controls { 
    display: inline-flex;
    gap: clamp(0.375rem, 1vw, 0.5rem);
    align-items: center;
    margin-left: clamp(0.25rem, 1vw, 0.5rem);
}

/* Theme / language toggle appearance: transparent background, visible text, hover/focus affordance */
.footer-controls .theme-toggle,
.footer-controls .lang-toggle {
    background: transparent;
    border: 0;
    color: var(--text-light);
    padding: 0.25rem 0.5rem;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    transition: color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
    border-radius: 6px;
}

.footer-controls .theme-toggle:hover,
.footer-controls .lang-toggle:hover {
    color: var(--primary-color);
    text-decoration: underline;
    transform: translateY(-1px);
}

.footer-controls .theme-toggle:focus,
.footer-controls .lang-toggle:focus {
    outline: 2px solid rgba(79,70,229,0.18);
    outline-offset: 2px;
}

/* Dark-theme specific tweaks for footer to ensure good contrast */
html[data-theme="dark"] .footer {
	background: var(--dark-bg);
	color: var(--text-light);
}
/* stronger separation in dark mode between page content and footer */
html[data-theme="dark"] .footer {
    border-top: 1px solid rgba(255,255,255,0.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
html[data-theme="dark"] .footer-section h3 {
	color: var(--text-primary);
}
html[data-theme="dark"] .footer-links a,
html[data-theme="dark"] .footer-contact a,
html[data-theme="dark"] .footer-legal a {
	color: var(--text-light);
}
html[data-theme="dark"] .footer-links a:hover,
html[data-theme="dark"] .footer-legal a:hover,
html[data-theme="dark"] .footer-contact a:hover {
	color: var(--accent-mid);
}
/* If site is explicitly in light theme and footer background becomes light, use dark headings */
/* Ensure footer headers remain visible — keep header color light when footer stays dark */
html[data-theme="light"] .footer-section h3 {
	color: var(--white);
}
html[data-theme="dark"] .footer-bottom {
	border-top-color: rgba(255,255,255,0.06);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.footer-legal { margin-bottom: var(--spacing-sm); }
.footer-legal a { color: var(--text-light); transition: color var(--transition-fast); text-decoration: none; position: relative; }
.footer-legal a:hover { color: var(--primary-light); }
.footer-legal .divider { margin: 0 var(--spacing-sm); color: var(--dark-tertiary); }

/* Unified underline animation for all footer anchors using transform (consistent across layouts) */
.footer .footer-links a,
.footer .footer-contact a,
.footer .footer-legal a {
	position: relative;
}

.footer .footer-links a::after,
.footer .footer-contact a::after,
.footer .footer-legal a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 2px;
	background: var(--primary-light);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--transition-fast);
}

.footer .footer-links a:hover::after,
.footer .footer-contact a:hover::after,
.footer .footer-legal a:hover::after {
	transform: scaleX(1);
}