/* Brand lockup: "[KE mark] AI SEO / by Keywords Everywhere"
   Used across marketing pages, app topbar, and auth layouts.
   To replace the KE text mark with an actual logo image, swap
   <span class="brand-lockup__mark">KE</span> for
   <img src="..." class="brand-lockup__mark brand-lockup__mark--img" alt="Keywords Everywhere">
   in includes/brand-logo.php */

.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    line-height: 1;
}
.brand-lockup:hover { text-decoration: none; color: inherit; }

.brand-lockup__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #0f3bff;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    font-family: 'Inter', 'Plus Jakarta Sans', sans-serif;
}
.brand-lockup__mark--img {
    background: transparent;
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 0;
    padding: 0;
}

.brand-lockup__text {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.1;
}

.brand-lockup__title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #111827;
    letter-spacing: -0.02em;
    font-family: 'Inter', 'Plus Jakarta Sans', sans-serif;
}

.brand-lockup__tagline {
    font-size: 0.6875rem;
    font-weight: 500;
    color: #6b7280;
    letter-spacing: 0.01em;
    font-family: 'Inter', 'Plus Jakarta Sans', sans-serif;
}

/* Light variant for dark headers (white text) */
.brand-lockup.brand-lockup--light .brand-lockup__title {
    color: #fff;
}
.brand-lockup.brand-lockup--light .brand-lockup__tagline {
    color: rgba(255, 255, 255, 0.75);
}

/* Compact variant for app topbar / login panel */
.brand-lockup--compact .brand-lockup__mark {
    width: 36px;
    height: 36px;
    font-size: 0.75rem;
}
.brand-lockup--compact .brand-lockup__title {
    font-size: 1.0625rem;
}
.brand-lockup--compact .brand-lockup__tagline {
    font-size: 0.625rem;
}

/* Preserve inline-flex on contexts where the theme doesn't hide it.
   Use attribute-style specificity lower than .navbar-* rules so the
   theme's display:none for the inactive variant still wins. */
.app-topbar__logo.brand-lockup,
.login-form-wrap__logo .brand-lockup {
    display: inline-flex;
}

/* ------------------------------------------------------------------
   Scrolled-state overrides. The theme's scrolled show rules have
   specificity 0,4,1 and force display:block, which breaks our flex gap
   and vertical alignment. We mirror only the SCROLLED show rules with
   .brand-lockup appended (+1 specificity) so inline-flex wins for the
   visible variant. The base state + all hide rules remain untouched.
   ------------------------------------------------------------------ */

.tra-menu.navbar-light .scroll .logo-black.brand-lockup,
.tra-menu.navbar-dark.black-scroll .scroll .logo-white.brand-lockup {
    display: inline-flex;
}

.theme--dark .navbar-light .scroll .logo-white.brand-lockup,
.theme--dark .navbar-dark.light-hero-header .logo-white.brand-lockup,
.theme--dark .navbar-dark.inner-page-header .logo-white.brand-lockup {
    display: inline-flex;
}

/* Vertical centering inside .desktoplogo parents (which set line-height:70px).
   Low specificity so it doesn't override hide rules. Adds the small top
   padding that was missing in the scrolled state. */
.desktoplogo .brand-lockup {
    vertical-align: middle;
}
.desktoplogo > .brand-lockup {
    padding: 12px 0;
}

/* Mobile header: ensure inline layout fits */
.wsmobileheader .smllogo .brand-lockup {
    gap: 10px;
}
.wsmobileheader .smllogo .brand-lockup__mark {
    width: 36px;
    height: 36px;
    font-size: 0.75rem;
}
.wsmobileheader .smllogo .brand-lockup__title {
    font-size: 1rem;
}
.wsmobileheader .smllogo .brand-lockup__tagline {
    font-size: 0.625rem;
}