/*
 * Zlix Technologies - Public Logo Renderer
 *
 * Permanent public renderer for the approved Final A / Final B branding.
 *
 * Published branding remains controlled by:
 *   data-logo
 *   data-mobile-logo
 *   data-logo-wordmark
 *   data-logo-size
 *   data-logo-tagline
 *   data-logo-tagline-style
 *
 * Theme Lab and historical logo comparison assets are intentionally
 * separate from this runtime stylesheet.
 */

/* ------------------------------------------------------------------
   Final A / Final B base renderer
   ------------------------------------------------------------------ */

html[data-logo="final-a-clean"] .brand-logo,
html[data-logo="final-b-dotted"] .brand-logo,
html[data-logo="final-a-clean"] .site-footer .footer-logo,
html[data-logo="final-b-dotted"] .site-footer .footer-logo {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
    text-decoration: none !important;
}

html[data-logo="final-a-clean"] .brand-logo > svg,
html[data-logo="final-b-dotted"] .brand-logo > svg,
html[data-logo="final-a-clean"] .site-footer .footer-logo > svg,
html[data-logo="final-b-dotted"] .site-footer .footer-logo > svg {
    display: none !important;
}

html[data-logo="final-a-clean"] .brand-logo::before,
html[data-logo="final-b-dotted"] .brand-logo::before,
html[data-logo="final-a-clean"] .site-footer .footer-logo::before,
html[data-logo="final-b-dotted"] .site-footer .footer-logo::before {
    content: "" !important;
    display: inline-block !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

html[data-logo="final-a-clean"] .brand-logo::before,
html[data-logo="final-a-clean"] .site-footer .footer-logo::before {
    background-image: url("/assets/svg/zlix-mark-clean-final-a.svg") !important;
}

html[data-logo="final-b-dotted"] .brand-logo::before,
html[data-logo="final-b-dotted"] .site-footer .footer-logo::before {
    background-image: url("/assets/svg/zlix-mark-primary-final-b.svg") !important;
}

html[data-logo="final-a-clean"] .brand-logo::after,
html[data-logo="final-b-dotted"] .brand-logo::after,
html[data-logo="final-a-clean"] .site-footer .footer-logo::after,
html[data-logo="final-b-dotted"] .site-footer .footer-logo::after {
    content: "Zlix Technologies" !important;
    display: block !important;
    color: var(--zlix-logo-text, #ffffff) !important;
    font-family: var(--zlix-font-display, inherit) !important;
    white-space: nowrap !important;
}

/* ------------------------------------------------------------------
   Approved proportional size presets
   ------------------------------------------------------------------ */

html[data-logo="final-a-clean"],
html[data-logo="final-b-dotted"] {
    --zlix-final-header-icon: 46px;
    --zlix-final-header-gap: 10px;
    --zlix-final-header-wordmark: clamp(18px, 1.95vw, 25px);
    --zlix-final-footer-icon: 34px;
    --zlix-final-footer-wordmark: 20px;
    --zlix-final-mobile-icon: 38px;
    --zlix-final-mobile-wordmark: 20px;
}

html[data-logo-size="compact"][data-logo="final-a-clean"],
html[data-logo-size="compact"][data-logo="final-b-dotted"] {
    --zlix-final-header-icon: 42px;
    --zlix-final-header-gap: 9px;
    --zlix-final-header-wordmark: clamp(17px, 1.75vw, 23px);
    --zlix-final-footer-icon: 30px;
    --zlix-final-footer-wordmark: 18px;
    --zlix-final-mobile-icon: 34px;
    --zlix-final-mobile-wordmark: 19px;
}

html[data-logo-size="balanced"][data-logo="final-a-clean"],
html[data-logo-size="balanced"][data-logo="final-b-dotted"] {
    --zlix-final-header-icon: 46px;
    --zlix-final-header-gap: 10px;
    --zlix-final-header-wordmark: clamp(18px, 1.95vw, 25px);
    --zlix-final-footer-icon: 34px;
    --zlix-final-footer-wordmark: 20px;
    --zlix-final-mobile-icon: 38px;
    --zlix-final-mobile-wordmark: 20px;
}

html[data-logo-size="large"][data-logo="final-a-clean"],
html[data-logo-size="large"][data-logo="final-b-dotted"] {
    --zlix-final-header-icon: 50px;
    --zlix-final-header-gap: 11px;
    --zlix-final-header-wordmark: clamp(19px, 2.05vw, 26px);
    --zlix-final-footer-icon: 38px;
    --zlix-final-footer-wordmark: 21px;
    --zlix-final-mobile-icon: 40px;
    --zlix-final-mobile-wordmark: 20px;
}

html[data-logo-size="prominent"][data-logo="final-a-clean"],
html[data-logo-size="prominent"][data-logo="final-b-dotted"] {
    --zlix-final-header-icon: 54px;
    --zlix-final-header-gap: 12px;
    --zlix-final-header-wordmark: clamp(20px, 2.15vw, 27px);
    --zlix-final-footer-icon: 40px;
    --zlix-final-footer-wordmark: 22px;
    --zlix-final-mobile-icon: 42px;
    --zlix-final-mobile-wordmark: 21px;
}

/* ------------------------------------------------------------------
   Header
   ------------------------------------------------------------------ */

html[data-logo="final-a-clean"] .site-header .brand-logo,
html[data-logo="final-b-dotted"] .site-header .brand-logo {
    gap: var(--zlix-final-header-gap) !important;
}

html[data-logo="final-a-clean"] .site-header .brand-logo::before,
html[data-logo="final-b-dotted"] .site-header .brand-logo::before {
    width: var(--zlix-final-header-icon) !important;
    height: var(--zlix-final-header-icon) !important;
    flex: 0 0 var(--zlix-final-header-icon) !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.22)) !important;
}

html[data-logo="final-a-clean"] .site-header .brand-logo::after,
html[data-logo="final-b-dotted"] .site-header .brand-logo::after {
    font-size: var(--zlix-final-header-wordmark) !important;
    font-weight: 750 !important;
    letter-spacing: -.035em !important;
}

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */

html[data-logo="final-a-clean"] .site-footer .footer-logo,
html[data-logo="final-b-dotted"] .site-footer .footer-logo {
    gap: 9px !important;
}

html[data-logo="final-a-clean"] .site-footer .footer-logo::before,
html[data-logo="final-b-dotted"] .site-footer .footer-logo::before {
    width: var(--zlix-final-footer-icon) !important;
    height: var(--zlix-final-footer-icon) !important;
    flex: 0 0 var(--zlix-final-footer-icon) !important;
}

html[data-logo="final-a-clean"] .site-footer .footer-logo::after,
html[data-logo="final-b-dotted"] .site-footer .footer-logo::after {
    font-size: var(--zlix-final-footer-wordmark) !important;
    font-weight: 740 !important;
    letter-spacing: -.03em !important;
}

/* ------------------------------------------------------------------
   Wordmark presets
   ------------------------------------------------------------------ */

html[data-logo-wordmark="strong"][data-logo="final-a-clean"] .brand-logo::after,
html[data-logo-wordmark="strong"][data-logo="final-b-dotted"] .brand-logo::after {
    font-weight: 850 !important;
    letter-spacing: -.045em !important;
}

html[data-logo-wordmark="balanced"][data-logo="final-a-clean"] .brand-logo::after,
html[data-logo-wordmark="balanced"][data-logo="final-b-dotted"] .brand-logo::after {
    font-weight: 750 !important;
    letter-spacing: -.035em !important;
}

html[data-logo-wordmark="refined"][data-logo="final-a-clean"] .brand-logo::after,
html[data-logo-wordmark="refined"][data-logo="final-b-dotted"] .brand-logo::after {
    font-weight: 700 !important;
    letter-spacing: -.025em !important;
}

/* ------------------------------------------------------------------
   Mobile published logo selection
   ------------------------------------------------------------------ */

@media (max-width: 720px) {
    html[data-mobile-logo="final-a-clean"] {
        --zlix-mobile-mark:
            url("/assets/svg/zlix-mark-clean-final-a.svg");
    }

    html[data-mobile-logo="final-b-dotted"] {
        --zlix-mobile-mark:
            url("/assets/svg/zlix-mark-primary-final-b.svg");
    }

    html[data-mobile-logo="final-a-clean"] .site-header .brand-logo::before,
    html[data-mobile-logo="final-b-dotted"] .site-header .brand-logo::before {
        background-image: var(--zlix-mobile-mark) !important;
        width: var(--zlix-final-mobile-icon) !important;
        height: var(--zlix-final-mobile-icon) !important;
        flex-basis: var(--zlix-final-mobile-icon) !important;
    }

    html[data-logo="final-a-clean"] .site-header .brand-logo::after,
    html[data-logo="final-b-dotted"] .site-header .brand-logo::after {
        font-size: var(--zlix-final-mobile-wordmark) !important;
    }
}