/* ==============================================================================
   BRAND — the AurisPass mark next to the name (templates/partials/
   brand-mark.html) in the public header, the admin and portal bars and
   both logins. The clients' pages never load this sheet: their header
   carries the client's brand, not the platform's.
   ============================================================================== */

/* The terracotta of the mark (doc/marca/README.md). It is a graphic, not
   text, so the bar it has to clear is 3:1 (WCAG 1.4.11), and #C8643B
   clears it on every surface the mark sits on, in every skin and both
   themes: from 3.5:1 on calida's light bar (#3a2a1a) up to 5.0:1 on the
   near-black dark bars and 3.9:1 on the white login card
   (brand_mark_test.go measures each pair). One value for all of them, so
   the mark looks the same everywhere. */
:root {
  --brand-mark-accent: #C8643B;
}

/* The mark is sized by the text it sits beside, so it grows with the
   visitor's font size and with the 1.25rem of the public header. */
.brand-mark {
  width: 1.4em;
  height: 1.4em;
  flex: none;
}

.brand-mark__play {
  fill: var(--brand-mark-accent);
  stroke: var(--brand-mark-accent);
}

/* The mark and the name as one unit: a link in the headers, a plain line
   above the heading on the logins. */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

/* On the logins the block is a line above the form's heading. Only the
   space below it: the block brings its own face, size and two inks
   (.brand-lockup--wordmark below), which follow the light and dark card. */
.admin-login .brand-lockup {
  margin-bottom: var(--space-4);
}

/* ==============================================================================
   WORDMARK — the AurisPass block of every header (templates/partials/
   brand-lockup.html): the ear and Auris«Pass» in Fraunces, «Auris» in the
   ink and «Pass» in the terracotta (Juan's variant A, 2026-10-12,
   maqueta-cabecera-aurispass.html). One rule for the public root, the
   clients' pages, the portal and the admin: each surface only says
   whether it sits on a light or a dark ground.
   ============================================================================== */

/* Fraunces at weight 650 only, served from this origin (font-src 'self'):
   the latin file is the only one a browser downloads for «AurisPass»; the
   extended one is there for a platform name with accents. The files keep
   the optical-size axis, so the letters at 20 and 24 px are drawn for
   those sizes as in the mock-up. Licence: static/fonts/Fraunces-OFL.txt.
   Besides the name, only the hero's title on the root uses this face
   (03-components/hero.css). */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 650;
  font-display: swap;
  src: url("/static/fonts/fraunces-650-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 650;
  font-display: swap;
  src: url("/static/fonts/fraunces-650-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The two colours of the name on a light ground: the ink blue of the
   logo (14.4:1 on white) and the terracotta of the play button (3.9:1 on
   white; a logotype has no contrast minimum in WCAG 1.4.3, and it still
   clears the 3:1 of large text). brand_test.go measures every pair. */
:root {
  --wordmark-ink: #1B2A41;
  --wordmark-pass: #C8643B;
}

/* On a dark ground the ink becomes the theme's light text and the
   terracotta lightens to #e58a63, 5.3:1 or more on every dark surface
   of the site. The clients' pages follow the system; the platform's
   pages also follow their own theme selector (tokens.css). The action
   bars of the root, the portal and the admin are dark in both modes,
   so they ask for this pair with .brand-lockup--on-dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wordmark-ink: var(--text-primary);
    --wordmark-pass: #e58a63;
  }
}

:root[data-theme="dark"] {
  --wordmark-ink: var(--text-primary);
  --wordmark-pass: #e58a63;
}

.brand-lockup--on-dark {
  --wordmark-ink: var(--action-bar-text);
  --wordmark-pass: #e58a63;
}

/* The block: ear and name centred on one line, 10 px apart, never
   wrapping (the name is one word and the ear belongs to it). */
.brand-lockup--wordmark {
  gap: 10px;
  min-width: 0;
  color: var(--wordmark-ink);
  text-decoration: none;
  white-space: nowrap;
}

.brand-lockup--wordmark .brand-mark {
  width: 28px;
  height: 28px;
}

.brand-wordmark {
  font-family: "Fraunces", Georgia, serif;
  font-size: 20px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* «Pass» is the same word, only in the second colour. */
.brand-wordmark b {
  font-weight: 650;
  color: var(--wordmark-pass);
}

@media (min-width: 40em) {
  .brand-lockup--wordmark .brand-mark {
    width: 34px;
    height: 34px;
  }

  .brand-wordmark {
    font-size: 24px;
  }
}

/* ==============================================================================
   CLIENT LOGO — the client's mark at the right end of every bar that
   belongs to a client (templates/partials/client-logo.html): 26 px high
   on a phone and 34 px from 40em, as wide as its proportions ask up to a
   cap, or the client's name in text when it has no logo.
   ============================================================================== */

.client-logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: inherit;
  text-decoration: none;
}

.client-logo__img {
  display: block;
  height: 26px;
  width: auto;
  max-width: 9rem;
  object-fit: contain;
}

.client-logo__name {
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

@media (min-width: 40em) {
  .client-logo__img {
    height: 34px;
    max-width: 12rem;
  }
}

/* Clients draw their logos for a light background (Curioseety's script
   is black), so on a dark ground the logo stands on a white plate instead
   of being recoloured. content-box keeps the logo itself at its height;
   the plate adds 4 px above and below. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .client-logo__img {
    box-sizing: content-box;
    padding: 4px 8px;
    border-radius: 6px;
    background: #ffffff;
  }
}

:root[data-theme="dark"] .client-logo__img {
  box-sizing: content-box;
  padding: 4px 8px;
  border-radius: 6px;
  background: #ffffff;
}