/* ==========================================================================
   Eesier product brand — the shared "eesier + subproduct" lockup.
   Razor: Views/Shared/_ProductBrand.cshtml · Model: ProductBrandViewModel

   Standard fits navigation and results headers. Hero introduces a product.
   Placement and the site's header mark height belong to the consumer.
   ========================================================================== */

.eesier-product-brand {
    display: inline-flex;
    flex-wrap: wrap;
    max-width: 100%;
    align-items: baseline;
    gap: var(--space-small, 12px);
    color: inherit;
    font-family: var(--font-family, 'Quicksand', sans-serif);
    text-decoration: none;
    text-transform: lowercase;
}

a.eesier-product-brand:hover {
    text-decoration: none;
}

.eesier-product-brand__wordmark {
    display: inline-flex;
    align-self: center;
    height: var(--brand-mark-height, 24px);
}

.eesier-product-brand__wordmark img {
    display: block;
    width: auto;
    height: 100%;
}

.eesier-product-brand__logo-dark {
    display: none !important;
}

.dark .eesier-product-brand__logo-light {
    display: none;
}

.dark .eesier-product-brand__logo-dark {
    display: block !important;
}

.eesier-product-brand__name {
    color: var(--color-muted, #475569);
    font-size: var(--type-size-small, 0.875rem);
    font-weight: 700;
    line-height: var(--brand-mark-height, 24px);
    letter-spacing: .02em;
}

.dark .eesier-product-brand__name {
    color: var(--color-muted-on-dark, rgba(255, 255, 255, .6));
}

.eesier-product-brand--hero .eesier-product-brand__wordmark {
    height: var(--control-height, 48px);
}

.eesier-product-brand--hero .eesier-product-brand__name {
    color: var(--color-palette-primary, #1c91e4);
    font-size: var(--type-size-heading, 1.5rem);
    font-weight: 500;
    line-height: var(--control-height, 48px);
    letter-spacing: normal;
}

.dark .eesier-product-brand--hero .eesier-product-brand__name {
    color: var(--color-palette-secondary, #4fbefe);
}
