/*
 * hmrc-trademark.css — the HMRC "MTD ready - recognised by HMRC" trademark lockup.
 * Vendor reference: B8L9RM.  Granted 2026-08-05.  EXPIRES 1 JULY 2027.
 * Canonical record + the derivation of every number here: docs/99-claude/031-hmrc-trademark.md.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * WHY THIS IS A HAND-WRITTEN FILE AND NOT TAILWIND UTILITIES
 * ─────────────────────────────────────────────────────────────────────────────
 * Every rule below is a CONDITION OF THE TRADEMARK GRANT, not a style choice.
 * Breaching one risks revocation and removal from HMRC's recognised-software
 * list. Keeping them in one small greppable file means an auditor (or the next
 * agent) can read the whole compliance surface in one screen, and a page author
 * cannot accidentally shrink the mark by editing a shared utility.
 *
 * It is also deliberately NOT generated. `static-site-src/css/tailwind.css` is
 * PURGED output rebuilt by the toolchain in `static-site-src/_tailwind/`: a
 * utility class that is not already in the committed build silently does
 * nothing until someone reruns it. A compliance floor must never depend on
 * that. Same reason the spacing/size modifiers below live here rather than as
 * `mt-5` / `h-12` in the markup.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * THE FIVE CONDITIONS
 * ─────────────────────────────────────────────────────────────────────────────
 *  1. MINIMUM SIZE — the mark is never rendered below 10mm high = 38px @ 96dpi.
 *     Enforced as a FLOOR (`max(38px, …)` + `min-height`), not a default, so no
 *     breakpoint, container query or author override can go under it.
 *  2. CLEAR SPACE — 25% of the rendered mark height on all four sides (031 §4,
 *     derived from the 20.8% padding in HMRC's own artwork, rounded up).
 *  3. NO DISTORTION — square aspect ratio pinned, and `max-width: none` defeats
 *     the Tailwind preflight `img { max-width: 100% }`, which in a narrow parent
 *     would squash the width while our explicit height held: a DISTORTED mark,
 *     which is expressly forbidden.
 *  4. LIGHT BACKGROUND — HMRC supplied ONE colourway (dark artwork) and we may
 *     not recolour it, so the lockup paints its own white panel and never
 *     inherits a dark surface. There is no reversed / white variant to reach for.
 *  5. B8L9RM ALONGSIDE — carried by `.hmrc-tm__ref`, on every publication, on the
 *     same line or below the mark. Never hide, truncate or shrink it.
 *
 * ⚠️ THE SIZING TRAP (031 §3). HMRC's supplied SVG is a 1366x768 slide canvas on
 * which the mark occupies only 70.6% of the height, so `height: 40px` on the RAW
 * file renders the mark at 28px ~ 7.5mm — under the 10mm floor, and it looks
 * perfectly fine to the eye. We therefore serve a copy cropped to the mark's own
 * bounding box (`/images/hmrc-mtd-recognised.svg`, geometry untouched), which is
 * what makes a CSS height here mean the compliance-relevant dimension.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * HOW TO USE
 * ─────────────────────────────────────────────────────────────────────────────
 *   <div class="hmrc-tm hmrc-tm--panel hmrc-tm--footer" data-testid="…">
 *     <img src="/images/hmrc-mtd-recognised.svg"
 *          alt="MTD ready - recognised by HMRC" class="hmrc-tm__mark">
 *     <span class="hmrc-tm__ref">Ref B8L9RM</span>
 *   </div>
 *
 * Size it with one of the placement modifiers below, or by setting
 * `--hmrc-tm-h`. NEVER set `height`/`width` on `.hmrc-tm__mark` from a page —
 * that bypasses the floor. Governing test: e2e/hmrc-trademark-996.spec.ts, which
 * MEASURES the rendered box in a real browser at three breakpoints.
 */

.hmrc-tm {
    /* Requested rendered mark height. Never read directly — always through the floor below. */
    --hmrc-tm-h: 56px;
    /* Condition 1: the hard floor. 38px = 10mm at 96dpi. */
    --hmrc-tm-mark: max(38px, var(--hmrc-tm-h));
    /* Condition 2: clear space = 25% of the RENDERED height (so it tracks the floor, not the request). */
    --hmrc-tm-clear: calc(var(--hmrc-tm-mark) * 0.25);

    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    /* The gap is the mark's clear space on its BOTTOM edge; padding covers the other three. */
    gap: var(--hmrc-tm-clear);
    padding: var(--hmrc-tm-clear);
    /* Condition 4: the mark always sits on white, whatever the surrounding surface is. */
    background: #ffffff;
    border-radius: 12px;
    /* Never let a flex/grid parent compress the lockup (that is how a floor gets silently broken). */
    flex: none;
}

.hmrc-tm__mark {
    display: block;
    /* Condition 1 again, belt and braces: `height` honours the floor via the custom property,
       `min-height` re-asserts it against any later cascade or inline override. */
    height: var(--hmrc-tm-mark);
    min-height: 38px;
    /* Condition 3: square artboard (the cropped viewBox is 542.15 x 542.15), width follows height,
       and NOTHING may cap the width — a cap plus a fixed height is a distorted mark. */
    width: auto;
    min-width: 38px;
    max-width: none;
    aspect-ratio: 1 / 1;
}

/* Condition 5: the vendor reference. Must remain legible and adjacent. */
.hmrc-tm__ref {
    font-size: 12px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #334155; /* slate-700 — 9.6:1 on white, comfortably WCAG AA */
    white-space: nowrap;
}

/* ── Layout variants ──────────────────────────────────────────────────────── */

/* Centred — hero blocks and centred cards. */
.hmrc-tm--center {
    align-items: center;
    text-align: center;
}

/* A hairline is allowed (it is our panel, not the mark) and stops the white lockup
   disappearing into a white page. */
.hmrc-tm--panel {
    border: 1px solid #e2e8f0; /* slate-200 */
}

/* Block wrapper — `.hmrc-tm` is inline-flex (so a `text-center` parent centres it),
   which means a lockup and a following badge would share a line. This forces its
   own line without depending on a purged utility. */
.hmrc-tm-block {
    display: block;
    margin: 0 0 1.5rem;
}

/* ── Placement modifiers ──────────────────────────────────────────────────────
   Size lives HERE rather than inline on the element, for one specific reason: an
   inline `style="--hmrc-tm-h: …"` beats a media query, so an inline size would
   make the responsive step below unreachable — dead compliance code that reads
   as if it were protecting the small-screen case. Keep sizes in this file.      */

/* Site-wide footer lockup (every public page). */
.hmrc-tm--footer {
    --hmrc-tm-h: 48px;
    margin-top: 1.25rem;
}

/* Homepage hero — above the fold, the most prominent placement. */
.hmrc-tm--hero {
    --hmrc-tm-h: 72px;
}

/* In-content credential cards (about-us, the self-filer guide). */
.hmrc-tm--card {
    --hmrc-tm-h: 56px;
}

/* Small viewports: step the larger placements down for layout, but never near the
   floor — 44px still leaves 6px of headroom, so the floor is never the thing doing
   the work on a phone. The floor remains in force regardless. */
@media (max-width: 640px) {
    .hmrc-tm--hero {
        --hmrc-tm-h: 56px;
    }
    .hmrc-tm--footer,
    .hmrc-tm--card {
        --hmrc-tm-h: 44px;
    }
}