/* The RHoFL mark, and the arc that runs through it.

   SPLIT OUT OF site.css so the staff portal can use it too. The portal
   deliberately does not link site.css - that file styles the catalog, the
   cart, product pages and the storefront's forms, every one of which would
   land on top of Django's admin furniture, and site-nav.css was split out for
   exactly the same reason. But the sign-in screens on both surfaces show the
   SAME mark above the SAME card, and the only two ways to do that are one
   definition or two that drift. This is the one definition.

   Nothing here knows which surface it is on. The rules that differ per
   surface - what sits under the mark, how much room it gets - stay in
   site.css and portal.css respectively.

   Moved verbatim, comments and all: the reasoning below was expensive to
   arrive at and belongs with the rules rather than in a commit message. */

/* Site mark over the gradient: min weight 600 + shadow is a legibility
   requirement (STYLE-GUIDE S3), not decoration. */
.site-mark {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 2.1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
  text-align: center;
  margin: 0 0 1.25rem;
}

/* Logo variant of the mark: the artwork carries the wordmark, so the type
   rules above go unused. The drop-shadow stands in for the text-shadow that
   kept the mark legible over the gradient (STYLE-GUIDE S3). */
.site-mark-logo {
  position: relative;
  line-height: 0;
  text-shadow: none;
}

/* The arc, anchored to the mark rather than to the viewport.

   Its box is centred on the mark's box and the SVG's own apex sits at its
   vertical centre, so the arc runs THROUGH the logo at every width - by
   construction, not by arithmetic that happens to work at one size.

   Wider than any viewport on purpose: the arc has to leave the screen at
   both ends, and 112vw guarantees that without knowing how wide the mark is.
   z-index -1 puts it behind the artwork; .site-mark-logo's position:
   relative above is what that -1 is relative to. */
.mark-arc {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 112vw, matching the background arc's own width - and the match is the
     point, not tidiness.

     The gradient runs red to magenta to purple across the WHOLE svg. At
     200vw only the middle half of that ramp was on screen, so both end
     colours ran off past the edges and the arc read as one hue; the
     background arc at 112vw shows the full range, which is why the
     logged-in pages looked better than these did.

     Still wider than the viewport so the ends leave the frame rather than
     stopping in mid-air, and the surface clips the overflow. */
  width: 112vw;
  /* Room for the falloff, but not so much that the glow becomes the page.
     At 46vh it washed the whole upper half - the arc has to remain a
     feature ON the background rather than becoming the background. */
  height: clamp(230px, 34vh, 480px);
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  /* NO animation on this element, and the reason is worth keeping.

     It used to run mark-arc-breathe, which had to repeat the centring
     translate in every keyframe: an animation sets `transform` outright, so
     any frame that omitted the translate REPLACED the positioning above
     rather than adding to it. The arc sat at left: 50% with no pull-back -
     measured at x: 177 on a 375px viewport when it should have been at -188 -
     and the clip on the surface hid what was left. It was present, visible
     and full-opacity the whole time.

     The motion is now inside the SVG, driven by static/js/arc.js on the path
     `d` attributes. Nothing touches this element's transform, so the trap is
     gone rather than worked around. If you ever animate transform here again,
     carry the translate through every single frame. */
}

.mark-arc svg {
  width: 100%;
  height: 100%;
  display: block;
}

.site-mark-logo img {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 2px 16px rgba(0, 0, 0, 0.5));
}