/* components/brand.css — the ONE definition of how the Bhassa brand renders (#147).
 *
 * Before this file the logo shipped in eight renderings, because seven
 * stylesheets each re-declared it on top of the shared `.logo` base in
 * layout/topbar.css. Measured on localhost, dark, 1280px:
 *
 *   landing 32px gradient · landing-foot 22px gradient · trainer-side 34px/r9
 *   · trainer-head 30px/r8 · planner 40px/r10 · guide 32px/r8 · admin 30px/r9
 *
 * Six sizes, four radii, three type faces and — the sharpest part — TWO
 * different oranges, because the overrides reached into whichever page
 * palette was nearest: --accent (#e0533d) on landing/guide/admin, --pl-accent
 * (#f97316) on the ember trainer and planner. The brand belongs to neither,
 * so it now names its own token (see tokens.css) and nothing else paints it.
 *
 * The rule this file exists to enforce: a page stylesheet may lay its brand
 * CONTAINER out — flex, gap, margin, where it sits in the header — but it may
 * not decide how the mark or the wordmark themselves render. apps/web/test/
 * brand.test.js fails the build if any other stylesheet claims these
 * selectors, which is the only thing that keeps eight from becoming nine.
 */

/* The whole brand is one link: mark + wordmark. Both pages that used to wrap
   a bare 日 in a link get an accessible name for free — the glyph is
   decorative (aria-hidden in the component) and the wordmark names the link. */
.brandlink{
  display:inline-flex;align-items:center;gap:10px;flex:none;
  color:inherit;text-decoration:none;
}

/* The mark. `color` is the glyph, not the tile — the tile is --brand-mark. */
.brandmark{
  width:32px;height:32px;border-radius:9px;flex:none;
  background:var(--brand-mark);color:var(--brand-mark-ink);
  display:inline-flex;align-items:center;justify-content:center;
  font:700 17px/1 var(--jp);
}

/* The wordmark. --display is the voice face, and tokens.css swaps it for a
   Devanagari stack on :root[lang="hi"], so the Hindi guide gets a proper face
   without this file knowing anything about locales. `margin:0` because the
   element is an <h1> on the trainer, where the brand IS the page heading. */
.brandname{
  margin:0;font:700 17px/1 var(--display);letter-spacing:-.02em;
}

.brandlink:hover .brandmark{filter:brightness(1.12)}
.brandlink:focus-visible{outline:2px solid var(--brand-mark);outline-offset:3px;border-radius:8px}

/* landing — the marketing page's tile. The gradient is the brand signal on a
   page whose CTAs carry the same gradient; the solid ember mark competed with
   them. Everything else about the brand is unchanged, so this is a variant,
   not a second brand. See the note beside the tokens. */
.brandlink.landing .brandmark{
  background:var(--brand-mark-landing);color:var(--brand-mark-landing-ink);
  border-radius:10px;box-shadow:0 14px 30px var(--shadow1);
}

/* sm — the landing footer, the one place the brand is a footnote rather than
   the masthead. A size variant, not a second brand: same tile, same face. */
.brandlink.sm{gap:8px;padding-block:2px;margin-block:-2px} /* 22px -> 26px hit box (#138) */
.brandlink.sm .brandmark{width:22px;height:22px;border-radius:7px;font-size:13px}
.brandlink.sm .brandname{font-size:14px}
/* The landing footer's tile was 10px-rounded before the brand was unified and
   stays that way. Stated at three classes rather than left to rule order, so
   moving a block in this file cannot silently reshape it. */
.brandlink.landing.sm .brandmark{border-radius:10px}