/* =============================================================================
   WIDGET SEOLINKS — seolinks.base.css  ·  MECÂNICA (comum a todos os temas)
   Bloco "Explore o site" do rodapé: mapa de links internos + chips de assuntos.

   ⚠️ REGRA DE SEO, NÃO DE ESTILO — não altere sem ler
   _app/Helpers/WcSeoLinks.class.php:
   É PROIBIDO esconder este bloco ou seu conteúdo por CSS. Nada de display:none,
   visibility:hidden, height:0, opacity:0, font-size:0, text-indent negativo ou
   cor de texto igual à do fundo. O colapso é feito EXCLUSIVAMENTE pelo
   <details>/<summary> nativo do browser, que o Google trata como conteúdo normal
   (mesmo mecanismo de FAQ e ficha técnica). Ocultar por CSS transforma o bloco em
   hidden text — que é violação das políticas de spam e rende penalização manual.

   O visual (cores, tipografia, bordas) fica em skins/<tema>.css.
   ============================================================================= */

.wc-seolinks {
    --wc-seo-gap: 1.25rem;
    margin: 2rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--wc-seo-border, rgba(255, 255, 255, .12));
}

/* ---------- Cabeçalho clicável (summary nativo) ---------- */

.wc-seolinks__box > .wc-seolinks__sum {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    list-style: none;                 /* remove o triângulo padrão (Firefox) */
    padding: .35rem 0;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--wc-seo-sum, inherit);
}

.wc-seolinks__box > .wc-seolinks__sum::-webkit-details-marker { display: none; }  /* Safari/Chrome */
.wc-seolinks__box > .wc-seolinks__sum::marker { content: ''; }

.wc-seolinks__box > .wc-seolinks__sum:hover { color: var(--wc-seo-sum-hover, inherit); }

.wc-seolinks__box > .wc-seolinks__sum:focus-visible {
    outline: 2px solid var(--wc-seo-accent, currentColor);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Seta própria: gira 90° quando o <details> está aberto. */
.wc-seolinks__caret {
    width: .48rem;
    height: .48rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .18s ease;
    flex: none;
    opacity: .7;
}

.wc-seolinks__box[open] > .wc-seolinks__sum .wc-seolinks__caret { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
    .wc-seolinks__caret { transition: none; }
}

/* ---------- Corpo ---------- */

.wc-seolinks__in {
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: var(--wc-seo-gap);
}

.wc-seolinks__h {
    margin: 0 0 .6rem;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--wc-seo-h, inherit);
}

/* ---------- Faixa de assuntos (chips) ---------- */

.wc-seolinks__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.wc-seolinks__chip {
    display: inline-block;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: .8rem;
    line-height: 1.35;
    text-decoration: none;
    border: 1px solid var(--wc-seo-chip-border, rgba(255, 255, 255, .16));
    background: var(--wc-seo-chip-bg, transparent);
    color: var(--wc-seo-chip-text, inherit);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.wc-seolinks__chip:hover,
.wc-seolinks__chip:focus-visible {
    background: var(--wc-seo-chip-bg-hover, rgba(255, 255, 255, .08));
    border-color: var(--wc-seo-accent, currentColor);
    color: var(--wc-seo-chip-text-hover, inherit);
}

/* ---------- Mapa em colunas ---------- */

.wc-seolinks__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--wc-seo-gap);
}

.wc-seolinks__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.wc-seolinks__link {
    font-size: .82rem;
    line-height: 1.45;
    text-decoration: none;
    color: var(--wc-seo-link, inherit);
    transition: color .15s ease;
}

.wc-seolinks__link:hover,
.wc-seolinks__link:focus-visible { color: var(--wc-seo-link-hover, inherit); text-decoration: underline; }

/* ---------- Mobile ---------- */

@media (max-width: 575.98px) {
    .wc-seolinks { --wc-seo-gap: 1rem; margin-top: 1.5rem; }
    .wc-seolinks__grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* ---------- Impressão: o mapa de navegação não serve em papel ---------- */

@media print {
    .wc-seolinks { display: none; }
}