/* ============================================================
   ZEYATEK — FOOTER STYLES
   Requires: shared.css loaded first
   ============================================================ */

/* ────────────────── FOOTER SHELL ────────────────── */
footer {
    padding: 72px 0 40px;
    background: var(--white);
    border-top: 1px solid var(--line);
}

/* ────────────────── GRID ────────────────── */
.footer-grid {
    display: grid;
    /* Updated to 6 columns to fit the new 'Platform' section */
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1.2fr;
    /* Slightly reduced max gap to ensure text doesn't wrap awkwardly */
    gap: clamp(20px, 2.5vw, 40px);
    margin-bottom: 48px;
}

/* ────────────────── BRAND COLUMN ────────────────── */
.footer-brand p {
    font-size: 0.84rem;
    color: var(--gray);
    margin: 18px 0 22px;
    line-height: 1.75;
    max-width: 280px;
}

.footer-logo {
    height: 28px;
    display: block;
}

.footer-social {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
}

.social-link {
    font-size: 1.1rem;
    color: var(--gray-light);
    text-decoration: none;
    width: 36px; height: 36px;
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    transition: color .2s ease, border-color .2s ease;
}
.social-link:hover { color: var(--black); border-color: var(--black); }

/* ────────────────── EMAIL COPY ────────────────── */
.email-copy-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}
.email-copy-wrapper a {
    color: var(--black);
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 300;
    transition: color .15s ease;
}
.email-copy-wrapper a:hover { color: var(--blue); }

.copy-btn {
    cursor: pointer;
    background: none;
    color: var(--gray-light);
    font-size: 0.72rem;
    padding: 3px 8px;
    border: 1px solid var(--line);
    transition: all .15s ease;
    font-family: 'IBM Plex Sans', sans-serif;
}
.copy-btn:hover { background: var(--black); color: var(--white); border-color: var(--black); }
.copy-btn.copied { color: var(--blue); border-color: var(--blue); }

/* ────────────────── NAV COLUMNS ────────────────── */
.footer-col h3 {
    font-size: 0.62rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--gray-light);
    margin-bottom: 16px;
    font-family: 'IBM Plex Sans', sans-serif;
}
.footer-col a {
    display: block;
    font-size: 0.84rem;
    font-weight: 300;
    color: var(--black);
    text-decoration: none;
    padding: 4px 0;
    transition: color .15s ease;
}
.footer-col a:hover { color: var(--blue); }

/* ────────────────── BOTTOM BAR ────────────────── */
.footer-divider {
    height: 1px;
    background: var(--line);
    margin-bottom: 28px;
}
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.76rem;
    color: var(--gray-light);
    font-family: 'IBM Plex Sans', sans-serif;
}
.footer-links { display: flex; gap: 24px; }
.footer-links a {
    color: var(--gray-light);
    text-decoration: none;
    transition: color .15s ease;
}
.footer-links a:hover { color: var(--black); }

/* ────────────────── FLOATING CTA ────────────────── */
.float-cta {
    position: fixed;
    bottom: 28px; right: 28px;
    z-index: 90;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .4s ease, transform .4s ease;
    pointer-events: none;
}
.float-cta.visible { opacity: 1; transform: none; pointer-events: auto; }

/* ────────────────── BACK TO TOP ────────────────── */
.back-top {
    position: fixed;
    bottom: 28px; left: 28px;
    z-index: 90;
    width: 40px; height: 40px;
    background: var(--white);
    color: var(--black);
    border: 1px solid rgba(0,0,0,0.12);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem;
    cursor: pointer;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .4s ease, transform .4s ease, background .2s ease, color .2s ease;
    pointer-events: none;
    text-decoration: none;
}
.back-top.visible { opacity: 1; transform: none; pointer-events: auto; }
.back-top:hover { background: var(--black); color: var(--white); }

/* ────────────────── ASSESSMENT COLUMN ────────────────── */
.footer-col-assessment {
    border-left: 1px solid var(--line);
    padding-left: clamp(20px, 3vw, 36px);
}
.footer-assessment-desc {
    font-size: 0.8rem;
    color: var(--gray);
    line-height: 1.7;
    font-weight: 300;
    margin-bottom: 16px;
}
.footer-assessment-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    font-weight: 450;
    color: var(--blue);
    text-decoration: none;
    transition: gap .2s ease, color .15s ease;
}
.footer-assessment-link:hover { gap: 10px; color: var(--black); }

/* ────────────────── RESPONSIVE ────────────────── */
@media (max-width: 1200px) {
    /* Adjusted to handle the 6th column: Brand goes full width on top, the 4 link columns sit side-by-side */
    .footer-grid { grid-template-columns: repeat(4, 1fr); }
    .footer-brand { grid-column: 1 / -1; margin-bottom: 16px; max-width: 100%; }
    .footer-brand p { max-width: 500px; }
    .footer-col-assessment { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 24px; }
}

@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-col-assessment { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 24px; }
}

@media (max-width: 768px) {
    footer { padding: 56px 0 32px; }
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .footer-col-assessment { grid-column: auto; border-top: 1px solid var(--line); padding-top: 24px; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .float-cta { bottom: 16px; right: 16px; }
    .back-top { display: none; }
}