/* ============================================================
   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;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: clamp(32px, 5vw, 60px);
    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: 'DM 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: 'DM 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: 'DM 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); }

/* ────────────────── RESPONSIVE ────────────────── */
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

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