/* =========================================================================
   MOCK do cabeçalho — marca "Tarja" + seletor de edição.
   Arquivo à parte de propósito: pra reverter, apague o <link> no index.html
   e este arquivo. Não toca em nada da mecânica.
   Tokens são os mesmos do Tarja DS (style.css).
   ========================================================================= */

/* ---------- logo ---------- */
/* A arte já contém a palavra TARJA, então ela substitui a marca de três tarjas e o
   texto do cabeçalho — o nome fica em .sr-only para quem usa leitor de tela.
   width:auto com a altura fixa mantém a proporção 796x504. */
.brand-logo { display: block; height: 48px; width: auto; }   /* 64px de cabeçalho - 8px de folga em cima e embaixo */

/* ---------- seletor de edição ---------- */
.brand-wrap { display: flex; align-items: center; gap: 14px; min-width: 0; }

.ed { position: relative; flex-shrink: 0; }
.ed-btn { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 12px;
  border: 2px solid var(--tarja-outline); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text); box-shadow: var(--sticker);
  font: inherit; cursor: pointer; transition: transform var(--dur-fast) var(--ease-pop); }
.ed-btn:hover { transform: translate(-1px, -1px); }
.ed-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--tarja); }
.ed-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.ed-lbl { font: 700 .62rem var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); }
.ed-cur { font: 800 .95rem var(--f-display); letter-spacing: -.01em; }
.ed-caret { width: 14px; height: 14px; color: var(--text-3); transition: transform var(--dur-base) var(--ease-pop); }
.ed-btn[aria-expanded="true"] .ed-caret { transform: rotate(180deg); }

.ed-menu { position: absolute; z-index: 40; top: calc(100% + 10px); left: 0; width: 244px; padding: 6px;
  border: 2px solid var(--tarja-outline); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--sticker), var(--shadow-2); }
.ed-menu[hidden] { display: none; }
.ed-menu-h { padding: 8px 10px 6px; font: 700 .62rem var(--f-mono); text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-3); }

.ed-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
  border: 0; border-radius: var(--r-md); background: none; color: var(--text);
  font: 600 .95rem var(--f-body); text-align: left; cursor: pointer; }
.ed-opt:hover:not(:disabled) { background: var(--subtle); }
.ed-opt:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ed-opt:disabled { color: var(--text-3); cursor: default; }

/* a bolinha de cada edição usa as cores pop em rodízio, como os marcadores */
.ed-dot { width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%;
  background: var(--c); outline: 1px solid var(--tarja-outline); }
.ed-opt:disabled .ed-dot { background: none; border: 2px dashed var(--line-strong); outline: 0; }

.ed-n { margin-left: auto; font: 700 .72rem var(--f-mono); color: var(--text-3); }
.ed-soon { margin-left: auto; padding: 2px 7px; border-radius: var(--r-pill);
  background: var(--subtle); font: 700 .6rem var(--f-mono); text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-3); }
.ed-opt[aria-selected="true"] { background: var(--primary-soft); }
.ed-opt[aria-selected="true"] .ed-nm { font-weight: 800; }


/* ---------- responsivo ---------- */
@media (max-width: 1023px) {
  .brand-wrap { gap: 10px; }
  .brand-logo { height: 40px; }   /* cabeçalho cai para 56px no celular */
  .ed-lbl { display: none; }
  .ed-btn { height: 34px; padding: 0 8px 0 10px; }
  /* o chip fica perto da borda esquerda: ancorar à direita jogava o menu pra fora da tela */
  .ed-menu { left: 0; width: min(244px, calc(100vw - 24px)); }
}
@media (max-width: 400px) {
  .ed-cur { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ed-btn, .ed-caret { transition: none; }
}