/* ==============================================================
 *  CARDIO ASSIST — PERGUNTAS FREQUENTES (/faq/)
 *
 *  Usa os tokens e componentes do blog (assets/css/blog.css: --blog-*,
 *  .blog-rotulo, .blog-botao, .blog-busca__*). Mobile first (390px);
 *  amplia em 768 / 1024 / 1280. Escuro é o padrão; o claro vem dos tokens
 *  do blog e de poucas regras no fim, sempre com html[data-theme="light"].
 *
 *  Minificador do projeto: nada de seletor descendente começando com
 *  pseudo-classe (use "*:is(...)").
 * ============================================================== */

/* ----------------------------------------------------------------
 * 0. Largura de leitura: o FAQ é mais estreito que o hub do blog
 * ---------------------------------------------------------------- */
.faq > section { max-width: 1040px; }

/* Sem JavaScript, todas as perguntas aparecem; com ele, 15 de cada vez (faq.js). */
.js .faq-item[data-alem],
.js .faq-grupo[data-alem] { display: none; }

/* Foco visível (vence o "outline: none !important" do site.css, como no blog). */
.faq-item__resumo:focus-visible,
.faq-item__fonte:focus-visible,
.faq-item__copiar:focus-visible,
.faq-grupo__titulo a:focus-visible,
.faq-grupo__artigo:focus-visible {
    outline: 2px solid var(--blog-marca-texto) !important;
    outline-offset: 3px;
}

/* ----------------------------------------------------------------
 * 1. Abertura
 * ---------------------------------------------------------------- */
.faq-abertura {
    display: grid;
    grid-template-areas: "trilha" "busca" "texto";
    gap: 20px;
}
.faq-abertura__trilha { grid-area: trilha; }
.faq-busca { grid-area: busca; }
.faq-abertura__texto {
    grid-area: texto;
    display: grid;
    justify-items: start;
    gap: 20px;
    min-width: 0;
    margin-top: 12px;
}
.faq-abertura__titulo {
    margin: 4px 0 0;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(2.5rem, 1.75rem + 3.2vw, 4rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.03em;
    color: var(--blog-texto);
    text-wrap: balance;
}
/* Segunda linha em cinza, menor (como "FAQ / Common answers" das referências). */
.faq-abertura__subtitulo {
    display: block;
    margin-top: 0.2em;
    font-size: 0.6em;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--blog-texto-3);
}
.faq-abertura__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    color: var(--blog-texto-3);
}
.faq-abertura__meta time { color: inherit; }

/* ----------------------------------------------------------------
 * 2. Busca discreta
 * ---------------------------------------------------------------- */
.faq-busca { display: block; width: 100%; margin: 0; }
.faq-busca .blog-busca__campo { position: relative; }
.faq-busca__input.blog-busca__input {
    height: 44px;
    border-radius: 999px;
    background: transparent;
    font-size: 16px; /* 16px evita o zoom automático do iOS */
}
.faq-busca__input.blog-busca__input:focus,
.faq-busca__input.blog-busca__input:focus-visible { background: var(--blog-superficie); }
.faq-busca .blog-busca__limpar { top: 0; right: 0; }
.faq-busca__atalho {
    position: absolute;
    top: 50%;
    right: 14px;
    display: none;
    min-width: 22px;
    padding: 1px 6px;
    border: 1px solid var(--blog-linha);
    border-radius: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    color: var(--blog-texto-3);
    transform: translateY(-50%);
    pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
    .faq-busca__input:placeholder-shown:not(:focus) ~ .faq-busca__atalho { display: block; }
}
.faq-busca__dica {
    margin: 8px 0 0 16px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--blog-texto-3);
}

/* ----------------------------------------------------------------
 * 3. Lista: cabeçalho, avisos da busca e estado vazio
 * ---------------------------------------------------------------- */
.faq-perguntas { margin-top: 56px; scroll-margin-top: 96px; }
.faq-cabecalho { margin-bottom: 20px; }

.faq-resultados { margin: 0 0 20px; }
.faq-resultados__topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
}
.faq-resultados__frase {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--blog-texto-2);
}
.faq-resultados__frase strong { font-weight: 600; color: var(--blog-texto); }
.faq-resultados__nota {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--blog-texto-3);
}

.faq-vazio {
    display: grid;
    justify-items: center;
    gap: 10px;
    margin: 0 0 8px;
    padding: 36px 20px;
    border: 1px dashed var(--blog-linha);
    border-radius: var(--blog-raio-card);
    text-align: center;
}
.faq-vazio__titulo {
    margin: 0;
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--blog-texto);
}
.faq-vazio__texto {
    margin: 0;
    max-width: 30em;
    font-size: 15px;
    line-height: 1.6;
    color: var(--blog-texto-2);
}
.faq-vazio__acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
}

/* ----------------------------------------------------------------
 * 4. Grupos (um por artigo) e faixas numeradas
 * ---------------------------------------------------------------- */
.faq-grupos {
    display: grid;
    gap: 20px;
}
.faq-grupo {
    overflow: hidden;
    border: 1px solid var(--blog-linha);
    border-radius: var(--blog-raio-card);
    background: var(--blog-superficie);
}
.faq-grupo__cabecalho {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 18px 20px 10px;
    border-bottom: 1px solid var(--blog-linha);
}
.faq-grupo__tema { color: var(--blog-texto-3); }
.faq-grupo__titulo {
    margin: 0;
    font-family: 'Manrope', sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--blog-texto);
    text-wrap: pretty;
}
.faq-grupo__titulo a {
    color: inherit;
    text-decoration: none;
    border-radius: 4px;
}
.faq-grupo__artigo {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 6px;
    min-height: 44px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--blog-texto-2);
    border-radius: 4px;
    transition: color var(--blog-dur-curta) ease;
}
.faq-grupo__artigo .blog-icone {
    width: 14px;
    height: 14px;
    transition: transform var(--blog-dur-curta) var(--blog-ease);
}
@media (hover: hover) {
    .faq-grupo__titulo a:hover { color: var(--blog-marca-texto); }
    .faq-grupo__artigo:hover { color: var(--blog-texto); }
    .faq-grupo__artigo:hover .blog-icone { transform: translateX(3px); }
}

.faq-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}
.faq-item { margin: 0; }
.faq-item + .faq-item { border-top: 1px solid var(--blog-linha); }

.faq-item__detalhes { scroll-margin-top: 96px; }
.faq-item__resumo {
    --faq-q: 16px;
    --faq-lh: calc(var(--faq-q) * 1.45);
    --faq-icone: 36px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) var(--faq-icone);
    align-items: start;
    gap: 10px;
    padding: 20px 16px 20px 20px;
    list-style: none;
    cursor: pointer;
    border-radius: 12px;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--blog-dur-curta) ease;
}
.faq-item__resumo::-webkit-details-marker { display: none; }
.faq-item__resumo::marker { content: ''; }
.faq-item__resumo:focus-visible { outline-offset: -3px; }

.faq-item__numero {
    padding-top: 1px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 500;
    line-height: var(--faq-lh);
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    color: var(--blog-texto-3);
    transition: color var(--blog-dur-curta) ease;
}
.faq-item__pergunta {
    margin: 0;
    font-family: 'Manrope', sans-serif;
    font-size: var(--faq-q);
    font-weight: 600;
    line-height: var(--faq-lh);
    color: var(--blog-texto);
    text-wrap: pretty;
}
.faq-item__icone {
    position: relative;
    width: var(--faq-icone);
    height: var(--faq-icone);
    /* centraliza o círculo na primeira linha da pergunta */
    margin: calc((var(--faq-lh) - var(--faq-icone)) / 2) 0;
    border-radius: 50%;
    background: var(--blog-circular);
    color: var(--blog-texto);
    transition: transform var(--blog-dur-media) var(--blog-ease),
        background-color var(--blog-dur-curta) ease,
        color var(--blog-dur-curta) ease;
}
/* O "+" é desenhado em CSS (duas barras); aberto, gira 45° e vira "×". */
.faq-item__icone::before,
.faq-item__icone::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    margin: -1px 0 0 -7px;
    border-radius: 2px;
    background: currentColor;
}
.faq-item__icone::after { transform: rotate(90deg); }

.faq-item__detalhes[open] .faq-item__icone {
    transform: rotate(45deg);
    background: var(--blog-marca);
    color: #ffffff;
}
.faq-item__detalhes[open] .faq-item__numero { color: var(--blog-marca-texto); }

@media (hover: hover) {
    .faq-item__resumo:hover { background-color: var(--blog-superficie-2); }
    .faq-item__resumo:hover .faq-item__numero { color: var(--blog-marca-texto); }
    .faq-item__resumo:hover .faq-item__icone { background: var(--blog-circular-hover); }
    .faq-item__detalhes[open] .faq-item__resumo:hover .faq-item__icone { background: var(--blog-marca-hover); }
}

/* Abertura suave onde o navegador permite (o conteúdo fica no HTML de qualquer jeito). */
.faq-item__detalhes { interpolate-size: allow-keywords; }
.faq-item__detalhes::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size var(--blog-dur-media) var(--blog-ease),
        content-visibility var(--blog-dur-media) allow-discrete;
}
.faq-item__detalhes[open]::details-content { block-size: auto; }

.faq-item__resposta { padding: 0 20px 22px; }
.faq-item__texto {
    max-width: 68ch;
    font-size: 16px;
    line-height: 1.7;
    color: var(--blog-texto-2);
}
.faq-item__texto p { margin: 0; }
.faq-item__texto p + p,
.faq-item__texto p + ul,
.faq-item__texto p + ol,
.faq-item__texto ul + p,
.faq-item__texto ol + p { margin-top: 12px; }
.faq-item__texto ul,
.faq-item__texto ol { margin: 0; padding-left: 1.25em; }
.faq-item__texto li { margin: 6px 0 0; }
.faq-item__texto ul li::marker { color: var(--blog-marca-texto); }
.faq-item__texto strong { font-weight: 600; color: var(--blog-texto); }
.faq-item__texto a {
    color: var(--blog-texto);
    text-decoration: underline;
    text-decoration-color: var(--blog-marca);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
@media (hover: hover) {
    .faq-item__texto a:hover { color: var(--blog-marca-texto); }
}

.faq-item__rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 18px;
    margin: 10px 0 0;
}
.faq-item__fonte {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--blog-texto-3);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    border-radius: 4px;
}
.faq-item__copiar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 2px;
    border: 0;
    background: none;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blog-texto-3);
    cursor: pointer;
    border-radius: 4px;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--blog-dur-curta) ease;
}
.faq-item__copiar .blog-icone { width: 14px; height: 14px; stroke-width: 2; }
.faq-item__copiar.is-copiado { color: var(--blog-marca-texto); }
@media (hover: hover) {
    .faq-item__fonte:hover,
    .faq-item__copiar:hover { color: var(--blog-texto); }
}

/* Palavras encontradas pela busca */
.faq-marca {
    padding: 0 2px;
    border-radius: 3px;
    background: var(--blog-termo);
    color: inherit;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Chegada por link direto (/faq/#pergunta): um brilho rápido na faixa. */
@keyframes faq-alvo {
    from { background-color: var(--blog-marca-fundo); }
    to { background-color: transparent; }
}
.faq-item.is-alvo { animation: faq-alvo 2.4s ease-out 0.2s both; }

/* ----------------------------------------------------------------
 * 5. Fim da página
 * ---------------------------------------------------------------- */
.faq-fim-acoes__icone { flex: none; transition: transform var(--blog-dur-curta) ease; }
@media (hover: hover) {
    .faq-fim-acoes a:hover .faq-fim-acoes__icone--subir { transform: translateY(-3px); }
}
.faq-assinatura {
    margin: 20px 0 0;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
    color: var(--blog-texto-3);
}

/* ----------------------------------------------------------------
 * 6. Faixas maiores
 * ---------------------------------------------------------------- */
@media (min-width: 768px) {
    .faq-perguntas { margin-top: 72px; }
    .faq-busca__input.blog-busca__input { font-size: 15px; }
    .faq-grupos { gap: 24px; }
    .faq-grupo__cabecalho {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: 6px 24px;
        padding: 22px 16px 14px 24px;
    }
    .faq-grupo__tema { grid-column: 1; }
    .faq-grupo__titulo { grid-column: 1; font-size: 19px; }
    .faq-grupo__artigo { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 0 8px; }
    .faq-item__resumo {
        --faq-q: 17px;
        --faq-icone: 40px;
        grid-template-columns: 44px minmax(0, 1fr) var(--faq-icone);
        gap: 14px;
        padding: 24px 20px 24px 24px;
    }
    .faq-item__resposta { padding: 0 76px 26px 82px; }
}
@media (min-width: 1024px) {
    /* Busca no canto superior direito, na altura da trilha de navegação. */
    .faq-abertura {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
        grid-template-areas: "trilha busca" "texto texto";
        align-items: start;
        column-gap: 56px;
        row-gap: 0;
    }
    .faq-abertura__trilha { padding-top: 12px; }
    .faq-abertura__texto { margin-top: 8px; }
    .faq-perguntas { margin-top: 88px; }
    .faq-item__resumo { --faq-q: 18px; }
}

/* ----------------------------------------------------------------
 * 7. Movimento reduzido
 * ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .faq-item__detalhes::details-content { transition: none; }
    .faq-item__icone,
    .faq-grupo__artigo .blog-icone,
    .faq-fim-acoes__icone { transition: none; }
    .faq-item.is-alvo { animation: none; background-color: var(--blog-marca-fundo); }
}

/* ----------------------------------------------------------------
 * 8. Tema claro (os tokens --blog-* já trocam; aqui só os ajustes)
 * ---------------------------------------------------------------- */
html[data-theme="light"] .faq-grupo {
    background: var(--blog-superficie);
    box-shadow: 0 1px 0 rgba(16, 16, 16, 0.02);
}
html[data-theme="light"] .faq-busca__input.blog-busca__input { background: rgba(255, 255, 255, 0.55); }
html[data-theme="light"] .faq-busca__input.blog-busca__input:focus,
html[data-theme="light"] .faq-busca__input.blog-busca__input:focus-visible { background: #FFFFFF; }