/*
  Folha de estrutura da celula avancado-3.
*/

/*
  SDD-builder-interativos F-INT-2 (ADR-5) — o ACABAMENTO do acordeao e das abas.

  Ele mora na CELULA, e nao no tema: a decisao de 13/09 e' que "os itens entram
  na familia que aquele tema pertence". Seis copias do mesmo desenho divergiriam
  no primeiro ajuste — e a divergencia apareceria como "o acordeao do Bussola e'
  diferente do acordeao do Serra", sem que ninguem tenha escolhido isso.

  O que entra: ritmo, grade, tamanho e raio — o vocabulario desta folha desde a
  emenda do ADR-6 da administracao da loja. A COR nao entra: as linhas usam
  `currentColor` diluido, que herda a tinta do tema sem nomea-la.

  A linha tem DUAS declaracoes de proposito: a primeira e' a reserva para quem
  nao entende `color-mix`, e a segunda e' a boa. Sem a primeira, um navegador
  antigo ficaria sem separador nenhum.
*/
/*
  Avancado 3, a celula editorial. O acordeao aqui e' quase uma lista de leitura:
  separador discreto, titulo maior e muito espaco entre os itens.

  Esta folha NASCE com o acordeao e as abas, e mais nada — ver a nota da
  intermediario-2.
*/

/* ── Acordeao ─────────────────────────────────────────────────────────── */

.mmc-acordeao > details { padding: 20px 4px; }
.mmc-acordeao > details + details { margin-top: 14px; }

.mmc-acordeao > details > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 1.15rem;
  border-bottom: 1px solid;
  padding-bottom: 10px;
}

/*
  A seta e' desenhada aqui, e nao herdada do navegador: o marcador padrao muda
  de forma em cada um, e uma seta que gira diz "isto abre" antes de a pessoa
  clicar. `transition` so' na transformacao — o bloco de movimento reduzido do
  `base.css` ja' a neutraliza para quem pediu menos movimento.
*/
.mmc-acordeao > details > summary::after {
  content: ""; flex: none; width: .5em; height: .5em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-.1em, -.1em); transition: transform .18s ease;
}
.mmc-acordeao > details[open] > summary::after { transform: rotate(-135deg) translate(-.15em, -.15em); }

.mmc-acordeao > details > summary + * { margin-top: 14px; }

/* ── Abas ─────────────────────────────────────────────────────────────── */

.mmc-abas > .mmc-abas-fitas {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 1px solid;
  margin-bottom: 28px;
}

.mmc-abas > .mmc-abas-fitas > [role="tab"] {
  padding: 14px 4px;
  
  border-bottom: 0 solid; margin-bottom: -1px;
  opacity: .55; transition: opacity .15s ease;
}

.mmc-abas > .mmc-abas-fitas > [role="tab"]:hover { opacity: .85; }

/*
  A aba aberta se marca por `aria-selected`, que e' o MESMO atributo que o
  leitor de tela anuncia. Uma classe a mais aqui seria uma segunda verdade sobre
  qual aba esta' aberta — e as duas divergiriam no primeiro ajuste do runtime.
*/
.mmc-abas > .mmc-abas-fitas > [role="tab"][aria-selected="true"] { opacity: 1; border-bottom-width: 2px; }

/* ── Divisor ──────────────────────────────────────────────────────────── */

/*
  O `<hr>` do divisor. Sem esta regra ele fica com a borda `inset` do navegador
  — cinza fixo, grossa e diferente em cada um —, que e' o mais perto de "sem
  desenho" que um elemento pode ficar.

  A linha nao declara COR: `border-top: 1px solid` sem cor usa `currentColor`.
  Cor e' do tema, nao da celula.

  SDD-builder-refino-12 F-R12-2 (ADR-5): a `opacity: .25` que esmaecia a linha
  saiu. Era um segundo dono da cor — o documento gravava `--p-apoio` e a
  celula apagava 75% dele por baixo, sem porta. A cor (e a forca) do divisor
  e' do documento; aqui fica so' a mecanica de matar o `inset` do navegador.
*/
hr {
  border: 0;
  border-top: 1px solid;
  margin: 0;
}

/*
 * SDD-catalogo-de-secoes F1 — a FAIXA que abre a página desce o menu fixo.
 *
 * O cabeçalho desta célula é `position: fixed` (80 px de altura) e fica
 * por cima da primeira seção. O hero do tema compensa com o próprio padding;
 * a faixa genérica (`band` — a casca do `secao`, onde nascem as seções do
 * catálogo do builder, e a de quase todo tipo) não sabia disso, e uma Abertura
 * inserida no topo saía com o sobretítulo embaixo do menu (medido no celular:
 * 96 px de ritmo contra 87 px de menu). Vale para qualquer faixa que vire a
 * primeira da página, e só para ela.
 *
 * BORDA transparente, e não padding (04/10): a seção de ponta a ponta do
 * catálogo (o slider) zera o próprio padding para as cenas encostarem no
 * menu, e um desconto feito no padding sumiria junto — as cenas entrariam
 * embaixo do menu. A borda soma ao ritmo que a seção tiver, inclusive zero.
 */
body > section.band:first-of-type {
  border-top: 80px solid transparent;
}