/*
 * WordPress-managed logo presentation. The artwork is displayed as a
 * contain-sized background so its original aspect ratio and transparency stay
 * intact while the existing React header/footer layout remains in place.
 */
.nafs-theme header nav > a:first-child {
    gap: 0;
}

.nafs-theme header nav > a:first-child > span,
.nafs-theme footer > div > div:first-child > div:first-child > a > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.nafs-theme header nav > a:first-child::before,
.nafs-theme footer > div > div:first-child > div:first-child > a::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: var(--nafs-header-logo-width, 76px);
    height: var(--nafs-header-logo-width, 76px);
    background-image: var(--nafs-header-logo-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.nafs-theme header nav > a:first-child:focus-visible,
.nafs-theme footer > div > div:first-child > div:first-child > a:focus-visible {
    outline: 2px solid var(--nafs-brand-color, #1800ad);
    outline-offset: 4px;
    border-radius: 3px;
}

.nafs-theme footer > div > div:first-child > div:first-child > a {
    gap: 0;
}

.nafs-theme footer > div > div:first-child > div:first-child > a::before {
    width: var(--nafs-footer-logo-width, 88px);
    height: var(--nafs-footer-logo-width, 88px);
    background-image: var(--nafs-footer-logo-image);
}

.nafs-logo-align-center.nafs-theme header nav,
.nafs-logo-align-right.nafs-theme header nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
}

.nafs-logo-align-center.nafs-theme header nav > a:first-child,
.nafs-logo-align-right.nafs-theme header nav > a:first-child {
    grid-column: 1;
    grid-row: 1;
}

.nafs-logo-align-center.nafs-theme header nav > a:first-child {
    justify-self: center;
}

.nafs-logo-align-right.nafs-theme header nav > a:first-child {
    justify-self: end;
}

.nafs-logo-align-center.nafs-theme header nav > ul,
.nafs-logo-align-right.nafs-theme header nav > ul {
    grid-column: 2;
    grid-row: 1;
}

.nafs-logo-align-center.nafs-theme header nav > div:nth-of-type(1),
.nafs-logo-align-right.nafs-theme header nav > div:nth-of-type(1) {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
}

.nafs-logo-align-center.nafs-theme header nav > div:last-child,
.nafs-logo-align-right.nafs-theme header nav > div:last-child {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
}

@media (max-width: 767px) {
    .nafs-theme header nav > a:first-child::before {
        width: var(--nafs-mobile-logo-width, 54px);
        height: var(--nafs-mobile-logo-width, 54px);
        background-image: var(--nafs-mobile-logo-image);
    }
}
