/* Headwayflow logo — the full lockup, and the ONLY copy of it.
 *
 * Drawn from the brand kit. The lockup is the wordmark "headwayflow" split across two
 * colours — "headway" in Ink, "flow" in Olive — sitting on a two-part rule: a hairline in
 * Rule that spans the full width of the word, with the heavier Terracotta progress bar
 * riding its right-hand end, under "flow".
 *
 * THE RULES THE KIT SETS, AND WHERE THEY LIVE HERE
 *   • Logotype is Figtree Light 300 at tracking +70 (0.07em). That weight and that tracking
 *     are the mark. The kit's misuse panel calls out bolding it or tightening the tracking as
 *     the first two ways to get it wrong, which is why the font stack, weight and spacing are
 *     declared here and never inherited from a host.
 *   • Always lowercase — `text-transform: lowercase` is a guard, not a style, so a host that
 *     uppercases a masthead cannot capitalise the mark.
 *   • The split is Ink / Olive only. Never recoloured. The tone modifiers below change the
 *     two values together for a given ground; they never split it on a different axis.
 *   • Minimum size is 96px wide; below that the kit says use the hf monogram instead
 *     (which is what `favicon.svg` already draws). At the default 17px the lockup measures
 *     about 116px, and the smallest use in the app is that default — so nothing here goes
 *     under the floor. Anything smaller should render the monogram, not shrink this.
 *   • Clear space on every side equals the x-height of the lowercase h. That is the host's
 *     job — it owns the surrounding layout — so it is documented rather than enforced.
 *
 * WHY THIS IS ONE FILE AND NOT SIX
 * The token block in `tokens.css` is deliberately re-declared per stylesheet, because every
 * sheet in this repo has to stay independently loadable (see that file's header). A LOCKUP is
 * a different kind of thing: it has geometry, not just values, and geometry that drifts by a
 * few hundredths of an em between the sign-in page and the ops console is exactly what nobody
 * notices until the two sit side by side. So the logo is drawn once, here, and the five host
 * design systems (hf-id-*, hf-cn-*, hf-pt-*, hf-of-*, the Wasm sidebar) render `<HfLogo />`
 * rather than re-drawing it. A host is expected to set `font-size` on `.hf-logo` and nothing
 * else — everything below is in `em`, so the whole lockup scales from that one declaration.
 *
 * NOTE ON THE PALETTE. The values below are the brand kit's, which are close to but not the
 * same as `tokens.css` (kit Ink #30302E vs --ink-primary #2C2C2A; kit Rule #D7CEB7 vs
 * --stone-200 #DDD0B8; Olive has no token at all). Reconciling the app-wide palette with the
 * kit is a separate job — the mark is held to the kit exactly, so it is spelled out here in
 * literals rather than pointed at tokens that would quietly render it slightly wrong.
 *
 * Linked by every host from `_content/Headwayflow.Client.Branding/logo.css`.
 */

.hf-logo {
    /* Brand kit — Ink, Olive, Rule, Terracotta. Self-contained, so the sheet renders
       correctly even where nothing else of ours has loaded. */
    --hf-logo-ink: #30302E;
    --hf-logo-flow: #84765D;
    --hf-logo-rule: #D7CEB7;
    --hf-logo-accent: #B1583A;

    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    /* 17px — a step on the kit's type scale (12 · 14 · 17 · 21 · 26 · 34 · 44 · 76) and the
       size the previous one-line wordmark used, so swapping the lockup into an existing
       masthead does not change that masthead's optical weight. */
    font-size: 1.0625rem;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}

/* Reversed, on Ink — the warm-dark rails in the console and the partner portal. Terracotta is
   lifted a step because #B1583A is tuned against paper and goes muddy on a dark ground. */
.hf-logo--on-ink {
    --hf-logo-ink: #F1F0E5;
    --hf-logo-flow: #B5A88C;
    --hf-logo-rule: rgba(241, 240, 229, 0.24);
    --hf-logo-accent: #C96B4C;
}

/* Reversed, on Terracotta. The accent bar cannot be terracotta on terracotta, so the rule
   goes solid Paper and the split carries the contrast. */
.hf-logo--on-terracotta {
    --hf-logo-ink: #FFFFFF;
    --hf-logo-flow: #E8D5C6;
    --hf-logo-rule: rgba(255, 255, 255, 0.34);
    --hf-logo-accent: #F1F0E5;
}

/* One colour, for print and engraving. Takes the surrounding text colour so a host does not
   have to know which ground it is on. */
.hf-logo--monotone {
    --hf-logo-ink: currentColor;
    --hf-logo-flow: currentColor;
    --hf-logo-rule: currentColor;
    --hf-logo-accent: currentColor;
}

.hf-logo-word {
    /* Figtree Light 300 at +70 tracking IS the mark. Named, never inherited: a host that sets
       a different body font or tightens its headings must not reach the logotype. */
    font-family: Figtree, 'DM Sans', 'Helvetica Neue', Helvetica, system-ui, sans-serif;
    font-weight: 300;
    letter-spacing: 0.07em;
    text-transform: lowercase;
}

.hf-logo-head { color: var(--hf-logo-ink); }
.hf-logo-flow { color: var(--hf-logo-flow); }

/* The rule is one box holding both strokes so they share a baseline. Its height is the THICK
   stroke's height; the hairline is positioned against the same bottom edge.

   The trailing +70 tracking puts a sliver of empty space after the final "w" that the rule
   would otherwise overhang, so the box is pulled in by the same 0.07em. */
.hf-logo-rule {
    position: relative;
    display: block;
    height: 0.2em;
    margin: 0.34em 0.07em 0 0;
}

.hf-logo-rule::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.07em;
    border-radius: 999px;
    background: var(--hf-logo-rule);
}

.hf-logo-rule::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    /* Lands under "flow" — the accent bar and the olive half of the split are the same
       gesture, which is what stops the rule reading as a random underline. */
    width: 38%;
    height: 0.2em;
    border-radius: 999px;
    background: var(--hf-logo-accent);
}

/* Wordmark only — no rule, for tight spaces. */
.hf-logo--no-rule .hf-logo-rule {
    display: none;
}

/* An <a> wrapping the lockup takes its focus ring from the host system; all this has to do is
   stop the host's link styling from underlining a logo. */
a .hf-logo,
a.hf-logo {
    text-decoration: none;
}