/* ─── StemLab Footer v1.4.0 ─── */

.slf-footer {
    background: var(--color-bg-base);
    border-top: none;
    font-family: var(--font-sans);
    color: var(--color-text-secondary);
    padding: var(--space-16) 0 0;
    margin-top: var(--space-20);
    position: relative;
    overflow: hidden;
    /* Break out of Elementor container constraints */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    box-sizing: border-box !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── Top separator: gradient line transparent→accent→transparent ─── */
.slf-footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 15%,
        rgba(240, 23, 111, 0.35) 50%,
        rgba(255, 255, 255, 0.05) 85%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Subtle ambient glow at top of footer */
.slf-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 180px;
    background: radial-gradient(ellipse 55% 100% at 50% 0%, rgba(240, 23, 111, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.slf-inner {
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding: 0 var(--page-margin-md);
    position: relative;
    z-index: 1;
}

/* ─── Top Row: Brand + Link Columns side by side ─── */
.slf-top-row {
    display: flex;
    gap: var(--space-16);
    align-items: flex-start;
}

/* ─── Brand Column: subtle glow effect ─── */
.slf-brand {
    flex: 0 0 220px;
    min-width: 180px;
}

.slf-logo-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: opacity 150ms var(--ease-standard),
                filter 150ms var(--ease-standard);
}

.slf-logo-link:hover {
    opacity: 1;
    color: var(--color-text-primary);
    filter: drop-shadow(0 0 10px rgba(240, 23, 111, 0.4));
}

.slf-logo-text {
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    color: var(--color-text-primary);
    letter-spacing: 0.02em;
    transition: color 150ms var(--ease-standard);
}

.slf-logo-text strong {
    font-weight: var(--weight-bold);
    color: var(--color-accent);
    text-shadow: 0 0 16px rgba(240, 23, 111, 0.25);
}

.slf-logo-link:hover .slf-logo-text strong {
    text-shadow: 0 0 24px rgba(240, 23, 111, 0.45);
}

.slf-tagline {
    font-size: var(--text-body-sm);
    color: var(--color-text-subdued);
    margin: var(--space-3) 0 0;
    line-height: var(--leading-relaxed);
}

.slf-email {
    display: inline-block;
    font-size: var(--text-body-sm);
    color: var(--color-accent) !important;
    text-decoration: none;
    margin-top: var(--space-3);
    transition: color 150ms var(--ease-standard),
                text-shadow 150ms var(--ease-standard);
}

.slf-email:hover {
    color: var(--color-accent-hover) !important;
    text-shadow: 0 0 12px rgba(240, 23, 111, 0.35);
}

/* ─── Link Columns ─── */
.slf-columns {
    flex: 1 1 auto;
    display: flex;
    gap: var(--space-12);
}

.slf-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* ─── Column titles: brighter with subtle letter-spacing ─── */
.slf-col-heading {
    font-size: var(--text-overline);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: var(--space-2);
    opacity: 0.85;
}

/* ─── Links: smooth color transition to accent on hover ─── */
.slf-link {
    font-size: var(--text-body-sm);
    color: var(--color-text-subdued) !important;
    text-decoration: none;
    transition: color 150ms var(--ease-standard),
                text-shadow 150ms var(--ease-standard);
    line-height: var(--leading-loose);
    white-space: nowrap;
}

.slf-link:hover {
    color: var(--color-accent) !important;
    text-shadow: 0 0 10px rgba(240, 23, 111, 0.25);
}

/* ─── Divider ─── */
.slf-divider {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--color-border-subtle) 20%,
        var(--color-border-subtle) 80%,
        transparent 100%
    );
    margin: var(--space-10) 0 0;
}

/* ─── Bottom Bar ─── */
.slf-bottom {
    padding: var(--space-6) 0 var(--space-8);
    text-align: center;
}

.slf-copyright {
    font-size: var(--text-caption);
    color: var(--color-text-disabled);
    margin: 0;
}

.slf-ico {
    font-size: var(--text-overline);
    color: var(--color-text-disabled);
    margin: var(--space-2) 0 0;
}

/* ─── Responsive ─── */
@media (max-width: 700px) {
    .slf-footer {
        padding: var(--space-12) 0 0;
        margin-top: var(--space-12);
    }

    .slf-inner {
        padding: 0 var(--page-margin-sm);
    }

    .slf-top-row {
        flex-direction: column;
        gap: var(--space-8);
    }

    .slf-brand {
        flex: none;
    }

    .slf-columns {
        gap: var(--space-8);
    }
}

@media (max-width: 400px) {
    .slf-columns {
        flex-wrap: wrap;
        gap: var(--space-6);
    }

    .slf-col {
        flex: 1 1 100%;
    }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
    .slf-logo-link,
    .slf-link,
    .slf-email {
        transition-duration: 0.01ms;
    }
}