/* 5 Kings brand wrapper — light backdrop behind the analytics.5kingsmarketing.com logo
   Mirrors the .site-logo recipe from 192.168.86.62 (parent 5kings-native-theme):
   - padding 6px 12px
   - border-radius 10px
   - background rgba(255,255,255,0.92) → solid on hover
   - logo height 44px
   This applies to every Matomo page (header nav logo). */

/* The .brand-logo wrapper sits in the nav bar. Tinted glass pill matching the
   5 Kings brand orange (#f56300). This is a deliberate deviation from the
   192.168.86.62 source — that site's pure white pill reads on its dark frosted
   header, but Matomo's login page has a white header where a pure-white pill
   is invisible. The orange tint is brand-on-brand and stays visible on any
   background. */
#logo.brand-logo .fivekings-brand-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 10px;
    background: rgba(245, 99, 0, 0.08);
    border: 1px solid rgba(245, 99, 0, 0.35);
    text-decoration: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    flex-shrink: 0;
}
#logo.brand-logo .fivekings-brand-link:hover {
    background: rgba(245, 99, 0, 0.14);
    border-color: rgba(245, 99, 0, 0.6);
    box-shadow:
        0 4px 16px rgba(245, 99, 0, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.6);
    transform: scale(1.02);
}
#logo.brand-logo img.fivekings-brand-logo {
    height: 44px !important;
    width: auto !important;
    max-width: 220px !important;
    min-width: 120px;
    display: block;
    flex-shrink: 0;
    object-fit: contain;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

/* Smaller logo on narrow viewports (mirrors 192.168.86.62 breakpoints). */
@media (max-width: 1100px) {
    #logo.brand-logo img.fivekings-brand-logo { height: 38px !important; }
}
@media (max-width: 640px) {
    #logo.brand-logo img.fivekings-brand-logo { height: 32px !important; }
    #logo.brand-logo .fivekings-brand-link { padding: 4px 8px; }
}

/* The login page background is var(--theme-color-background-base) (light grey).
   Keep the pill subtle so it doesn't look out of place on the form.
   On a dark theme the rgba(255,255,255,0.92) is still legible because the
   Matomo default nav background is white on the login page. */