/* ---------------------------------------------------------------------------
   The GuestQuest mark, wherever it appears.

   One place for the website header and footer, both panels' sidebars, both
   sign-in screens and the admin error page — the same three facts have to hold
   in all of them, and they were being restated in a different stylesheet each
   time.

   USAGE — a wrapper for the shadow, a span for the mark:

       <a class="gq-mark-wrap" style="--gq-mark-w: 136">
           <span class="gq-mark gq-mark-admin"></span>
       </a>

   Three things are load-bearing, and each of them cost an afternoon to find:

   COLOUR. The artwork is a CSS mask, so the mark takes `color` from wherever it
   sits — one file serves the navy header, the white footer and an orange badge.
   It also means a shadow cannot be drawn into the SVG: a mask has exactly one
   colour, so a shadow painted into the artwork comes out white on a navy
   background rather than black.

   THE SHADOW IS ON THE WRAPPER, and that is not a style choice. CSS applies
   filter *before* mask, so on the masked element itself drop-shadow() would be
   computed against the un-masked box — a plain rectangle — and the mask would
   then clip the result away along with everything outside the lettering.
   Nothing renders at all.

   THE SHADOW SCALES. --gq-mark-w is the width the mark is drawn at, and the
   shadow is divided by it, because a shadow in px does not scale with what
   casts it: the values were chosen against a 250px mark and the same 3px reads
   almost twice as heavy on the 136px one in the header.

   The ?v= on each file is deliberate. Nothing versions a URL written inside a
   stylesheet — asset_url() stamps the stylesheet, not its contents — and
   public/.htaccess serves svg with `access plus 1 year`. Bump it whenever the
   artwork changes or the edit reaches nobody who has been here before.
   --------------------------------------------------------------------------- */

.gq-mark-wrap {
    /* Overridden per context, inline or by a rule. Sets the mark's width and
       the shadow together, so the two cannot drift apart. */
    --gq-mark-w: 136;

    display: inline-block;
    line-height: 0;

    /* Breathing room, scaled the same way the shadow is. The artwork itself
       carries only two units of margin, so without this the mark butts against
       whatever holds it — a sidebar edge, a badge, the top of a rail — and the
       shadow, which reaches past the artwork, is clipped by any container with
       overflow hidden. Proportional rather than fixed for the same reason as
       the shadow: 8px around a 250px lockup and around a 21px badge are not
       the same amount of space. */
    padding: calc(8px * var(--gq-mark-w) / 250);

    filter: drop-shadow(
        calc(3px * var(--gq-mark-w) / 250)
        calc(3px * var(--gq-mark-w) / 250)
        calc(2px * var(--gq-mark-w) / 250)
        rgba(0, 0, 0, .4)
    );
}

.gq-mark {
    display: block;
    /* Centred when the wrapper is wider than the mark — a sign-in screen sets
       the wrapper to full width, and text-align cannot centre a block child.
       Costs nothing where the wrapper shrinks to fit, as in the sidebars. */
    margin-inline: auto;
    width: calc(var(--gq-mark-w) * 1px);
    aspect-ratio: var(--gq-mark-ar);
    background-color: currentColor;
    -webkit-mask: var(--gq-mark-src) no-repeat center / contain;
            mask: var(--gq-mark-src) no-repeat center / contain;
}

/* ---- the four artworks ----
   Each carries its own ratio because the labelled marks are taller than the
   plain wordmark and the monogram is nearly square. */

.gq-mark-web {
    --gq-mark-src: url('../website/images/gq-logo.svg?v=5');
    --gq-mark-ar: 207.9 / 70.3;
}

.gq-mark-partner {
    --gq-mark-src: url('../website/images/gq-logo-partner.svg?v=5');
    --gq-mark-ar: 207.9 / 73.7;
}

.gq-mark-admin {
    --gq-mark-src: url('../website/images/gq-logo-admin.svg?v=5');
    --gq-mark-ar: 207.9 / 73.7;
}

/* The G and the Q of the wordmark itself, for a collapsed sidebar or a badge
   where there is no room for the lockup. */
.gq-mark-mono {
    --gq-mark-src: url('../website/images/gq-monogram.svg?v=5');
    --gq-mark-ar: 82.3 / 69.9;
}