/* GunanQ trademark wordmark.

   The logo ships as artwork - images/gunanq-logo.svg and gunanq-logo-dark.svg. Use .gq-logo
   wherever the brand is being presented as the brand: the home page nav and footer, the auth
   card, and the application chrome - dashboard top headers, nav bars and sidebar rows.

   Inside page content - "Bring GunanQ to your department", FAQ copy, the copyright line -
   the name is just a word and is written as plain text, with no special face and no
   separately coloured Q. It inherits whatever the surrounding heading or paragraph uses.

   The "Q" is the trademark accent. It keeps its gradient in BOTH themes and must never be
   re-coloured; only "Gunan" changes, to white on dark. Those colours live in the artwork
   itself - see brand/make_logo2.py to re-cut it. */

/* ---- short mark: the Q, for collapsed rails and small icons ---- */

/* The tile, its rounded corners and both letters live inside images/gq-mark.svg, so this
   only has to size it. */
.gq-mark {
    display: inline-block;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 9px;
}

.gq-mark--sm { width: 26px; height: 26px; border-radius: 7px; }
.gq-mark--lg { width: 40px; height: 40px; border-radius: 11px; }


/* ---- the logo, as artwork ---------------------------------------------------------- */

/* Both files are emitted so a theme switch never flashes an unloaded image; each weighs
   about 3 KB. Height is driven by the surrounding font-size, and the 1.15 factor makes the
   artwork's cap height line up with adjacent text - the box also carries the Q's tail.
   Set --gq-logo-h to pin an exact height instead. */
.gq-logo {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    line-height: 0;
    flex-shrink: 0;
}

.gq-logo img {
    display: block;
    height: var(--gq-logo-h, 1.15em);
    width: auto;
}

.gq-logo .gq-logo-dark { display: none; }

.dark .gq-logo .gq-logo-light,
[data-theme="dark"] .gq-logo .gq-logo-light { display: none; }

.dark .gq-logo .gq-logo-dark,
[data-theme="dark"] .gq-logo .gq-logo-dark { display: block; }

/* Some surfaces are dark in every theme - the auth card's brand column, for one - so they
   always want the white artwork, whatever the page theme is. */
.gq-logo--on-dark .gq-logo-light { display: none; }
.gq-logo--on-dark .gq-logo-dark { display: block; }