/* =========================================
   WaitRide official brand logo (PNG)
   ========================================= */

.wr-brand-logo {
    display: block;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
    flex-shrink: 0;
}

/* Public header — desktop 48px, scrolled 44px */
.wr-brand-logo--header {
    height: 48px;
    transition: height var(--transition-base, 0.2s ease);
}

.main-header.scrolled .wr-brand-logo--header,
.lyt-public-header.scrolled .wr-brand-logo--header {
    height: 44px;
}

/* Public footer */
.wr-brand-logo--footer {
    height: 42px;
}

/* Authentication hero */
.wr-brand-logo--hero {
    height: clamp(88px, 14vw, 108px);
    margin-bottom: 0.5rem;
}

/* Dashboard sidebar (dark background) */
.wr-brand-logo--dashboard {
    height: 40px;
    padding: 0.2rem 0.35rem;
    border-radius: var(--radius-sm, 8px);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

.dashboard-shell.is-sidebar-collapsed .wr-brand-logo--dashboard,
.lyt-dash-shell.is-sidebar-collapsed .wr-brand-logo--dashboard {
    height: 36px;
    padding: 0.15rem 0.25rem;
}

/* Auth compact footer */
.wr-brand-logo--auth-footer {
    height: 40px;
    margin: 0 auto;
}

/* Home hero badge */
.wr-brand-logo--badge {
    height: 28px;
}

/* Opaque PNG on dark sections */
.wr-brand-logo--on-dark {
    padding: 0.2rem 0.35rem;
    border-radius: var(--radius-sm, 8px);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
}

@media (max-width: 768px) {
    .wr-brand-logo--header {
        height: 40px;
    }

    .main-header.scrolled .wr-brand-logo--header,
    .lyt-public-header.scrolled .wr-brand-logo--header {
        height: 36px;
    }

    .wr-brand-logo--hero {
        height: 88px;
    }

    .wr-brand-logo--footer {
        height: 38px;
    }
}

@media (max-width: 430px) {
    .wr-brand-logo--header {
        height: 36px;
    }
}
