/*
 * ZENOA AI LABS
 * Shared Navigation and Uniform Footer
 *
 * Used by all corporate website pages.
 */

/* ==========================================
   1. SHARED NAVIGATION
   ========================================== */

header {
    background: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Standard navigation links */

.navlinks > a:not(.button) {
    border-radius: 8px;
    transition: background-color .2s ease,
                color .2s ease;
}

/* Navigation hover and keyboard focus */

.navlinks > a:not(.button):hover,
.navlinks > a:not(.button):focus-visible {
    background: #e8f6f4;
    color: #087d77;
}

/* Active navigation item */

.navlinks > a[aria-current="page"]:not(.button) {
    background: #dff4f0;
    color: #087d77;
    box-shadow: inset 0 -3px 0 #00a99b;
    border-radius: 8px;
    font-weight: 800;
}

/* Navigation CTA */

.navlinks > a.button {
    transition: background-color .15s ease;
}

.navlinks > a.button:hover {
    transform: none;
}


/* ==========================================
   2. UNIFORM FOOTER
   ========================================== */

footer.zenoa-uniform-footer {
    background: #0b273b;
    color: #d0e2e9;
    padding: 64px 0 24px;
}

/* Footer grid */

.zenoa-uniform-footer .zenoa-uniform-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 35px;
}

/* Footer columns */

.zenoa-uniform-footer-grid > div {
    display: flex;
    flex-direction: column;
    gap: 11px;
    min-width: 0;
}

/* Footer headings */

.zenoa-uniform-footer h3 {
    color: #ffffff;
    font-size: 16px;
    margin: 0 0 8px;
}

/* Footer links */

.zenoa-uniform-footer a {
    color: #c9dfe7;
    text-decoration: none;
}

.zenoa-uniform-footer a:hover {
    color: #69e4d7;
}

/* Footer supporting text */

.zenoa-uniform-footer-grid > div > span {
    color: #a9c2ce;
}

.zenoa-uniform-footer p {
    margin: 0;
    line-height: 1.7;
}


/* ==========================================
   3. FOOTER BRANDING
   ========================================== */

.zenoa-uniform-footer .zenoa-footer-identity {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin: 0 0 2px;
    width: fit-content;
}

.zenoa-uniform-footer .zenoa-footer-logo {
    display: block;
    width: 46px;
    height: 46px;
    object-fit: contain;
    flex: 0 0 46px;
}

.zenoa-uniform-footer .zenoa-footer-brand {
    font-size: 22px;
    line-height: 1.2;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
}

.zenoa-uniform-footer .zenoa-footer-brand span {
    color: #65dccc;
}


/* ==========================================
   4. SOCIAL ICONS
   ========================================== */

.zenoa-uniform-footer .zenoa-footer-social {
    display: flex;
    flex-direction: row;
    gap: 9px;
    margin-top: 10px;
}

.zenoa-uniform-footer .zenoa-footer-social span {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border-radius: 9px;
    background: #24475a;
    color: #d6e7eb;
    font-weight: 800;
    cursor: default;
}


/* ==========================================
   5. FOOTER BOTTOM
   ========================================== */

.zenoa-uniform-footer .zenoa-footer-bottom {
    border-top: 1px solid #345064;
    margin-top: 40px;
    padding-top: 22px;

    display: flex;
    justify-content: space-between;
    gap: 20px;

    color: #a9c2ce;
    font-size: 13px;
}


/* ==========================================
   6. RESPONSIVE STYLES
   ========================================== */

/* Tablet */

@media (max-width: 1000px) {

    .zenoa-uniform-footer
    .zenoa-uniform-footer-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

/* Mobile */

@media (max-width: 640px) {

    .zenoa-uniform-footer
    .zenoa-uniform-footer-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 26px;
    }

    .zenoa-uniform-footer-grid > div:first-child {
        grid-column: 1 / -1;
    }

    .zenoa-uniform-footer .zenoa-footer-bottom {
        flex-direction: column;
    }

    .zenoa-uniform-footer .zenoa-footer-brand {
        font-size: 19px;
    }

}

/* Mobile navigation */

@media (max-width: 800px) {

    .navlinks > a[aria-current="page"]:not(.button) {
        width: 100%;
    }

}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {

    .navlinks > a:not(.button),
    .navlinks > a.button {
        transition: none;
    }

}