/*
 * Assets de marca vivem em /var/www/lessio/static/img/brand/logos/ e NÃO
 * estão no repo git. NUNCA recriar a logo em texto (✓ LESS. + .IO) ou em SVG
 * improvisado — sempre usar estas classes. Se um asset faltar, parar e pedir
 * upload por scp.
 *
 * Medição (raster 2160×1215 do lessio-logo-horizontal-branca-sem-slogan.svg):
 *   ink bbox = 1799×466 px → fill_ratio_h = 0.3835, fill_ratio_w = 0.8329
 *   margem vertical ≈ 23% topo + 38% base; escala para altura PERCEBIDA = 2.6073
 * As variantes --sm/--md/--lg definem altura PERCEBIDA do glifo; a caixa CSS
 * é multiplicada por --lessio-logo-scale-h para compensar a margem do viewBox.
 */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;900&display=swap");

:root {
  --neon: #39FF14;
  --blue: #1A3A8F;
  --cyan: #00BCD4;
  --bg: #0A0A0A;
  --surface: #111;
  --muted: #888;

  --lessio-logo-svg: url("/static/img/brand/logos/lessio-logo-horizontal-branca-sem-slogan.svg");
  --lessio-logo-png: url("/static/img/brand/logos/lessio-logo-horizontal-branca.png");
  --lessio-checkmark-mask: url("/static/img/brand/logos/lessio-simbolo-checkmark-mask.png");

  /* viewBox do SVG sem slogan (raster de medição) */
  --lessio-logo-vb-w: 2160;
  --lessio-logo-vb-h: 1215;
  /* ink_h / viewBox_h = 466/1215 */
  --lessio-logo-fill-h: 0.3835;
  --lessio-logo-scale-h: 2.6073;

  /* Altura PERCEBIDA do glifo (não a caixa). Default = sm (header).
   * sm=28px: ~2,3× a tinta do link de header (13px → ~12px ink), para liderar
   * a barra sem igualar o título do curso (22px) na linha abaixo. */
  --lessio-logo-perceived-h: 28px;
  --lessio-checkmark-color: var(--mod-accent, var(--neon));
  --lessio-checkmark-size: 28px;
}

/* Logo horizontal — SVG sem slogan; altura da caixa = perceived × scale */
.lessio-logo {
  --lessio-logo-box-h: calc(var(--lessio-logo-perceived-h) * var(--lessio-logo-scale-h));
  display: inline-block;
  flex-shrink: 0;
  height: var(--lessio-logo-box-h);
  width: calc(var(--lessio-logo-box-h) * var(--lessio-logo-vb-w) / var(--lessio-logo-vb-h));
  max-width: 100%;
  background-image: var(--lessio-logo-svg);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  vertical-align: middle;
}

/* Variante PNG + blend (fundo preto some no fundo escuro) */
.lessio-logo--png {
  background-image: var(--lessio-logo-png);
  mix-blend-mode: screen;
}

/* Rótulos = altura percebida do glifo */
.lessio-logo--sm { --lessio-logo-perceived-h: 28px; } /* header produto (~73px caixa) */
.lessio-logo--md { --lessio-logo-perceived-h: 36px; } /* ~94px caixa */
.lessio-logo--lg { --lessio-logo-perceived-h: 48px; } /* ~125px caixa */

/* Checkmark isolado — máscara PNG (sem fundo; cor via background-color) */
.lessio-checkmark {
  display: inline-block;
  flex-shrink: 0;
  width: var(--lessio-checkmark-size);
  height: var(--lessio-checkmark-size);
  background-color: var(--lessio-checkmark-color);
  -webkit-mask-image: var(--lessio-checkmark-mask);
  mask-image: var(--lessio-checkmark-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.lessio-checkmark--sm { --lessio-checkmark-size: 28px; }
.lessio-checkmark--md { --lessio-checkmark-size: 44px; }
.lessio-checkmark--lg { --lessio-checkmark-size: 64px; }