/* ---------------------------------------------------------------------------
   JCF logo lockup
   ---------------------------------------------------------------------------
   The Foundation's own logo sits on a white tile, so its blue globe reads on
   the indigo sidebar and on white alike, with the office name beside it:

       [tile]  Foundation Office          name: bold, sentence case
               JAN COSMIC FOUNDATION      sub:  small, tracked capitals

   Three lockups, all built from the same pieces:
     .jcf-logo            tile + name    — expanded sidebar, topbar
     .jcf-logo--sm        tile only      — condensed sidebar, phone topbar
     .jcf-logo--auth      larger         — sign-in and password pages

   Text colour comes from the surrounding link (white in the sidebar, ink on
   the sign-in page), so the lockup needs no light/dark variants.
--------------------------------------------------------------------------- */

.jcf-logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    color: inherit;
}

.jcf-logo__tile {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(36, 36, 62, 0.08);
}

/* Beats Paces' `.logo-lg img` / `.logo-sm img`, which fix a height. */
.jcf-logo .jcf-logo__tile img {
    display: block;
    width: 27px;
    height: auto;
}

.jcf-logo__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    text-align: start;
}

.jcf-logo__name {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.jcf-logo__sub {
    font-size: 9.5px;
    font-weight: 650;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-transform: uppercase;
    opacity: 0.6;
}

.jcf-logo--sm {
    gap: 0;
}

.jcf-logo--auth .jcf-logo__tile {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    border-radius: 13px;
}

.jcf-logo--auth .jcf-logo__tile img,
.jcf-logo.jcf-logo--auth .jcf-logo__tile img {
    width: 36px;
}

.jcf-logo--auth .jcf-logo__name {
    font-size: 17px;
}

.jcf-logo--auth .jcf-logo__sub {
    font-size: 10.5px;
}

/* Sign-in page: ink on white, and on the dark theme's surface. */
.logo-dark .jcf-logo,
.jcf-auth .jcf-logo {
    color: var(--theme-heading-color, #25283a);
}

/* Sidebar and its offcanvas copy are always indigo. */
.sidenav-menu .jcf-logo,
.logo-light .jcf-logo {
    color: #fff;
}

/* ---------------------------------------------------------------------------
   Login side photo
   ---------------------------------------------------------------------------
   Paces ships an overlay meant to sit behind a caption — nearly opaque at the
   bottom. Nothing is written over ours, so lighten it: enough gradient to keep
   the card's rounded edge from looking flat, not enough to grey out the photo.
--------------------------------------------------------------------------- */

.auth-overlay {
    background: linear-gradient(
        to top,
        rgba(16, 33, 58, 0.65) 0%,
        rgba(16, 33, 58, 0.25) 45%,
        rgba(16, 33, 58, 0.05) 100%
    );
}