:root {
    --fns-brand-header-logo-width: clamp(235px, 15.5vw, 285px);
    --fns-brand-header-left-gap: clamp(28px, 2.5vw, 48px);
    --fns-brand-header-min-height: 126px;
    --fns-brand-mobile-left-gap: 14px;
}

/*
 * Official FNS logo artwork supplied by the client.
 * The dark-header asset keeps the exact geometry and uses white neutral lettering
 * so it remains legible on the site's black header.
 */
header img[src*="/logo-fns.png"],
.site-header img[src*="/logo-fns.png"],
header img[src*="fns-logo-enhanced"],
.site-header img[src*="fns-logo-enhanced"],
header img[src*="fns-logo-official"],
.site-header img[src*="fns-logo-official"],
header .custom-logo,
.site-header .custom-logo,
[data-elementor-type="header"] .custom-logo,
[data-elementor-type="header"] img[src*="fns"] {
    content: url("../images/fns-logo-official-header.png");
}

footer img[src*="/logo-fns.png"],
.site-footer img[src*="/logo-fns.png"],
footer img[src*="fns-logo-enhanced"],
.site-footer img[src*="fns-logo-enhanced"],
footer img[src*="fns-logo-official"],
.site-footer img[src*="fns-logo-official"],
footer .custom-logo,
.site-footer .custom-logo,
[data-elementor-type="footer"] .custom-logo,
[data-elementor-type="footer"] img[src*="fns"] {
    content: url("../images/fns-logo-official-header.png");
}

/* Give the larger official logo enough vertical room without distorting it. */
header.site-header,
.site-header,
body > header,
[data-elementor-type="header"] {
    min-height: var(--fns-brand-header-min-height) !important;
}

header img[src*="/logo-fns.png"],
.site-header img[src*="/logo-fns.png"],
header .custom-logo,
.site-header .custom-logo,
[data-elementor-type="header"] .custom-logo,
header .fns-brand-logo,
.site-header .fns-brand-logo,
.fns-brand-logo--header {
    display: block !important;
    width: var(--fns-brand-header-logo-width) !important;
    max-width: min(var(--fns-brand-header-logo-width), 28vw) !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: left center !important;
}

header .fns-brand-logo-link,
.site-header .fns-brand-logo-link,
[data-elementor-type="header"] .fns-brand-logo-link,
header .custom-logo-link,
.site-header .custom-logo-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin-left: var(--fns-brand-header-left-gap) !important;
    margin-right: clamp(18px, 2vw, 34px) !important;
    padding: 10px 0 !important;
    line-height: 0 !important;
}

/* Some themes do not wrap the logo with the usual WordPress classes. */
header .fns-brand-logo:not(a .fns-brand-logo),
.site-header .fns-brand-logo:not(a .fns-brand-logo),
[data-elementor-type="header"] .fns-brand-logo:not(a .fns-brand-logo) {
    margin-left: var(--fns-brand-header-left-gap) !important;
    margin-right: clamp(18px, 2vw, 34px) !important;
}

footer .fns-brand-logo,
.site-footer .fns-brand-logo,
[data-elementor-type="footer"] .fns-brand-logo,
.fns-brand-logo--footer {
    display: block !important;
    width: min(265px, 100%) !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: left center !important;
}

@media (max-width: 1250px) {
    :root {
        --fns-brand-header-logo-width: 225px;
        --fns-brand-header-left-gap: 24px;
        --fns-brand-header-min-height: 112px;
    }
}

@media (max-width: 1024px) {
    :root {
        --fns-brand-header-logo-width: 195px;
        --fns-brand-header-left-gap: 18px;
        --fns-brand-header-min-height: 102px;
    }

    header img[src*="/logo-fns.png"],
    .site-header img[src*="/logo-fns.png"],
    header .custom-logo,
    .site-header .custom-logo,
    [data-elementor-type="header"] .custom-logo,
    header .fns-brand-logo,
    .site-header .fns-brand-logo,
    .fns-brand-logo--header {
        max-width: 25vw !important;
    }
}

@media (max-width: 782px) {
    :root {
        --fns-brand-header-logo-width: 166px;
        --fns-brand-header-left-gap: var(--fns-brand-mobile-left-gap);
        --fns-brand-header-min-height: 88px;
    }

    header img[src*="/logo-fns.png"],
    .site-header img[src*="/logo-fns.png"],
    header .custom-logo,
    .site-header .custom-logo,
    [data-elementor-type="header"] .custom-logo,
    header .fns-brand-logo,
    .site-header .fns-brand-logo,
    .fns-brand-logo--header {
        max-width: 48vw !important;
    }

    header .fns-brand-logo-link,
    .site-header .fns-brand-logo-link,
    [data-elementor-type="header"] .fns-brand-logo-link,
    header .custom-logo-link,
    .site-header .custom-logo-link {
        margin-right: 8px !important;
        padding: 8px 0 !important;
    }
}

@media (max-width: 480px) {
    :root {
        --fns-brand-header-logo-width: 148px;
        --fns-brand-header-min-height: 82px;
    }
}