/* RanaHost brand lockup — two flat colour variants, one per background.
   Light surface: solid blue mark + white R, wordmark in the same blue.
   Dark surface:  white mark + blue R, wordmark in white.
   Markup: <x-brand.logo size="sm|md|lg" theme="auto|dark" /> */

:root {
    --rh-display: "Bricolage Grotesque", "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --rh-body: "Manrope", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --rh-blue: #1b4b9e;
    --rh-muted: #5b6b85;
}

.rh-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    line-height: 1;
    text-decoration: none;
    border-radius: 10px;
}

.rh-logo-mark {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: var(--rh-blue);
    color: #fff;
    font-family: var(--rh-display);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
    box-shadow: 0 8px 18px -12px rgba(27, 75, 158, .55);
}

.rh-logo-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rh-logo-word {
    font-family: var(--rh-display);
    font-weight: 700;
    letter-spacing: -.035em;
    color: var(--rh-blue);
    white-space: nowrap;
}

/* one flat wordmark colour on every surface — no accent split */
.rh-logo-word span { color: inherit; }

.rh-logo-sub {
    font-family: var(--rh-body);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--rh-muted);
    white-space: nowrap;
}

/* sizes */
.rh-logo-sm .rh-logo-mark { width: 32px; height: 32px; border-radius: 9px; font-size: 15px; }
.rh-logo-sm .rh-logo-word { font-size: 1.06rem; }

.rh-logo-md .rh-logo-mark { width: 40px; height: 40px; border-radius: 11px; font-size: 18px; }
.rh-logo-md .rh-logo-word { font-size: 1.2rem; }

.rh-logo-lg .rh-logo-mark { width: 48px; height: 48px; border-radius: 13px; font-size: 21px; }
.rh-logo-lg .rh-logo-word { font-size: 1.34rem; }

/* dark surfaces: inverted mark, white wordmark */
.rh-logo-dark .rh-logo-mark {
    background: #fff;
    color: var(--rh-blue);
    box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .7);
}

.rh-logo-dark .rh-logo-word { color: #fff; }
.rh-logo-dark .rh-logo-word span { color: #fff; }
.rh-logo-dark .rh-logo-sub { color: #8eaad6; }

.rh-logo:focus-visible {
    outline: 2px solid var(--rh-blue);
    outline-offset: 3px;
}

.rh-logo-dark:focus-visible {
    outline-color: #7dd3fc;
}