/* Brand lockup
   --------------------------------------------------------------------------
   The mark and wordmark read their colours from the active accent preset
   (--bs-primary / --bs-secondary), so the logo re-colours with Theme Settings
   instead of shipping one flat PNG per palette. Sized in em: the placement
   modifier sets font-size and everything scales from it.

   Namespaced .app-brand rather than .brand-logo, which the invoice and auth
   templates already use on plain image tags. */

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    color: var(--bs-primary);
}

.app-brand:hover,
.app-brand:focus {
    color: var(--bs-primary);
    text-decoration: none;
}

.app-brand__mark {
    display: block;
    flex: 0 0 auto;
    width: 2.05em;
    height: 2.05em;
}

/* The rod and the two shorter plates track the primary colour. */
.app-brand__mark .app-brand-bar {
    fill: currentColor;
}

/* The tallest plate is the constant accent, in every theme. */
.app-brand__mark .app-brand-plate-accent {
    fill: var(--bs-secondary);
}

.app-brand__name {
    font-size: 1em;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: currentColor;
}

.app-brand__name-accent {
    margin-left: 0.3em;
    font-weight: 400;
    color: var(--bs-secondary);
}

/* Placements */
.app-brand--sidebar { font-size: 1.25rem; }
.app-brand--auth    { font-size: 1.5rem; }
.app-brand--landing { font-size: 1.35rem; }

/* On a dark surface the primary navy sinks into the background, so the lockup
   goes white and the accent plate stays as the one piece of colour. */
[data-pc-theme='dark'] .app-brand,
[data-pc-sidebar-theme='dark'] .pc-sidebar .app-brand,
.app-brand--on-dark {
    color: #ffffff;
}

[data-pc-theme='dark'] .app-brand:hover,
[data-pc-theme='dark'] .app-brand:focus,
.app-brand--on-dark:hover,
.app-brand--on-dark:focus {
    color: #ffffff;
}