/* GO BEST SEO brand layer of the pages outside the app and the marketing site (package P7-C, docs/design/brand/BRAND.md): the sign-in pages, the unsubscribe page, the holding page and the
 * 404 page. Loaded LAST, after tokens.css, fonts.css, components.css and auth.css. The app (app-shell.css) and the marketing site (marketing.css) carry their own brand layer and do not load it.
 * Same rules as components.css and auth.css (functions/test/brandPass.test.js runs their lint on this file): colours from tokens.css only, logical properties only, no web font host.
 *
 * 1. THE LOCKUP: the mark, then the name "GO BEST SEO" in the display face with "SEO" in the accent-text colour, as in docs/design/brand/gobestseo-lockup-*.svg. The mark is the brand's own
 *    file (/brand/gobestseo-mark-light.svg on light surfaces, -dark.svg on dark ones and on the brand panel, which is dark in both themes), drawn as the decoration of the link: the static
 *    header of each page AND the wordmark that js/app/core/brand.js builds for the brand panel both get it, with no script change. The link keeps its accessible name (aria-label
 *    "GO BEST SEO"); the drawing is empty generated content, silent to a screen reader. The lockup is never mirrored: components.css sets the link left to right in every language, so the
 *    mark stays at the left of the Latin name, and the whole lockup sits at the inline-start edge of its header. Proportions follow the lockup file (mark about 1.85 times the text size,
 *    a gap of half the text size). The link is at least 44 px tall.
 * 2. TYPE: headings in Secular One at its one weight (no bold synthesis); every other text is Assistant through the --font-sans and --font-he tokens. A heading (and the wordmark) sets those
 *    two tokens to the display face for its own subtree, because components.css gives every element of a Hebrew page the --font-he face directly (:lang(he)), which beats inheritance. */

/* ---------------------------------------------------------------- 1. the lockup */
.wordmark {
  --font-sans: var(--font-display);
  --font-he: var(--font-display);
  gap: 0.26em;
  min-block-size: 44px;
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.02em;
}
.wordmark::before {
  content: "";
  flex: none;
  inline-size: 1.85em;
  block-size: 1.85em;
  margin-inline-end: 0.24em;
  background: url("/brand/gobestseo-mark-light.svg") center / contain no-repeat;
}
/* the placeholder of Phase 2 drew "GO" in a filled box (components.css, auth.css); the lockup is plain text */
.wordmark-go,
.auth-aside .wordmark-go { padding: 0; border-radius: 0; background: none; color: inherit; letter-spacing: inherit; }
.wordmark-rest { letter-spacing: inherit; }
.wordmark-seo { color: var(--info); }

/* the brand panel of the sign-in pages is dark in both themes */
.auth-aside .wordmark::before { background-image: url("/brand/gobestseo-mark-dark.svg"); }
.auth-aside .wordmark-seo { color: var(--aside-accent); }

/* the dark theme, chosen or from the system (the same two selectors as tokens.css) */
:root[data-theme="dark"] .wordmark::before { background-image: url("/brand/gobestseo-mark-dark.svg"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wordmark::before { background-image: url("/brand/gobestseo-mark-dark.svg"); }
}

/* ---------------------------------------------------------------- 2. type */
:is(.auth, .splash) :is(h1, h2, h3, h4) {
  --font-sans: var(--font-display);
  --font-he: var(--font-display);
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0;
}

/* Windows high contrast: the name takes the system link colour like the rest of the link (components.css paints "GO" with the highlight pair for its old box) */
@media (forced-colors: active) {
  .wordmark-go { forced-color-adjust: auto; }
}