/* ===== Zian footer — content additions on top of the theme's native
   footer-area-7 / footer-widget-wrapper / footer-widget-box / copyright-text
   classes, so the divider lines, spacing and typography match the theme. ===== */

/* The theme layers several full-viewport fixed elements on top of the page
   (preloader, custom cursor, pinned scroll sections used on the home page).
   Give the footer its own stacking context above all of that so its links
   are always clickable, even if one of those elements lingers. */
.footer-area-7 {
    position: relative;
    z-index: 950;
    pointer-events: auto;
}

/* brand wordmark, sits above the social icons in the copyright-text column */
.footer-area-7 .zian-footer-name {
    font-size: 34px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--primary);
    margin: 0 0 22px;
}

@media only screen and (max-width: 1199px) {
    .footer-area-7 .zian-footer-name {
        font-size: 28px;
        margin-bottom: 16px;
    }
}

/* social icon row */
.footer-area-7 .zian-footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
}

@media only screen and (max-width: 1199px) {
    .footer-area-7 .zian-footer-socials {
        margin-bottom: 28px;
    }
}

.footer-area-7 .zian-footer-socials a {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border);
    color: var(--primary);
    font-size: 14px;
    transition: all 0.3s ease;
}

.footer-area-7 .zian-footer-socials a:hover {
    background-color: var(--theme);
    border-color: var(--theme);
    color: #ffffff;
}

/* Force the real Font Awesome brand glyphs to render — the page-wide
   `* { font-family: "Encode Sans" !important }` rule otherwise strips
   the icon font and the glyphs disappear. */
.footer-area-7 .zian-footer-socials i {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

/* menu list, styled to match the theme's existing footer-widget-box p */
.footer-area-7 .zian-footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-area-7 .zian-footer-menu a {
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: var(--primary);
}

.footer-area-7 .zian-footer-menu a:hover {
    color: var(--theme);
}

@media only screen and (max-width: 1199px) {
    .footer-area-7 .zian-footer-menu a {
        font-size: 18px;
    }
}

/* contact box — clickable email + phone */
.footer-area-7 .zian-footer-contact-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.footer-area-7 .zian-footer-contact-info a {
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: var(--primary);
}

.footer-area-7 .zian-footer-contact-info a:hover {
    color: var(--theme);
}

/* separator dot between email and phone, desktop only */
.footer-area-7 .zian-footer-contact-info a:first-child::after {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--secondary);
    margin-left: 8px;
    vertical-align: middle;
}

@media only screen and (max-width: 1199px) {
    .footer-area-7 .zian-footer-contact-info a {
        font-size: 18px;
    }
}

/* phone drops to its own line on mobile */
@media only screen and (max-width: 767px) {
    .footer-area-7 .zian-footer-contact-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .footer-area-7 .zian-footer-contact-info a:first-child::after {
        display: none;
    }
}

/* footer logo (replaces the ZIAN text wordmark); fades to gold glow on hover */
.footer-area-7 .zian-footer-logo {
    position: relative;
    display: inline-block;
    line-height: 0;
    margin: 0 0 22px;
}
.footer-area-7 .zian-footer-logo img {
    width: 90px;
    height: auto;
    transition: opacity 0.35s ease;
}
.footer-area-7 .zian-footer-logo img.logo-glow {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}
.footer-area-7 .zian-footer-logo:hover img.logo-glow { opacity: 1; }
.footer-area-7 .zian-footer-logo:hover img.logo-base { opacity: 0; }

@media only screen and (max-width: 1199px) {
    .footer-area-7 .zian-footer-logo { margin-bottom: 16px; }
    .footer-area-7 .zian-footer-logo img { width: 72px; }
}
