/* SVG icon sprite — inherit text color, scale with context */
svg.icons {
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
    flex-shrink: 0;
}

svg.icons use {
    fill: currentColor;
}

/* Brand mark sizing — all pages (nav + footer)
   Desktop: 24px × max 68px | Mobile ≤768px: 22px × 62px */

:root {
    --logo-icon-height: 30px;
    --logo-icon-max-width: 82px;
    --logo-footer-height: 30px;
    --logo-footer-max-width: 82px;
}

.logo {
    gap: 8px;
}

.logo-icon {
    width: auto;
    height: var(--logo-icon-height);
    max-height: var(--logo-icon-height);
    max-width: var(--logo-icon-max-width);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.logo-icon img {
    display: block;
    width: auto;
    height: var(--logo-icon-height);
    max-width: var(--logo-icon-max-width);
    max-height: var(--logo-icon-height);
    object-fit: contain;
    object-position: left center;
}

.footer-about .logo-icon,
.footer-about .logo-icon img {
    height: var(--logo-footer-height);
    max-height: var(--logo-footer-height);
    max-width: var(--logo-footer-max-width);
    width: auto;
}

@media (max-width: 768px) {
    :root {
        --logo-icon-height: 28px;
        --logo-icon-max-width: 74px;
        --logo-footer-height: 28px;
        --logo-footer-max-width: 74px;
    }

    .logo {
        font-size: 17px;
        gap: 7px;
        min-width: 0;
    }

    .logo-icon,
    .logo-icon img,
    .footer-about .logo-icon,
    .footer-about .logo-icon img {
        height: 22px;
        max-height: 22px;
        max-width: 62px;
    }
}