/* ══════════════════════════════════════════════════════════════
 * Illusia Archives — "The Catalog Index"
 *
 * Redesenho dos taxonomy archives do Fictioneer (genre, fandom,
 * character, content-warning, category, tag). Cada gaveta do
 * catálogo tem um header semântico colorido pela taxonomia,
 * contador de resultados, descrição editorial e tax cloud
 * reimaginado como fichas de referência cruzada.
 *
 * A cor semântica é aplicada via modifier no <main>:
 *   .illusia-archive--teal    (genre)
 *   .illusia-archive--violet  (fandom)
 *   .illusia-archive--amber   (character)
 *   .illusia-archive--crimson (content-warning)
 *   .illusia-archive--neutral (category, tag)
 *
 * Usa illusia-list-pages.css para sort, cards e paginação.
 *
 * @since 1.11.0
 * ══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
 * 1. ARCHIVE META — Parent + Count + Description + Header Image
 *
 * Sibling do `.illusia-page-header` que carrega o metadata
 * archive-specific entre o título e o divider: parent (se
 * hierárquico), contador mono, descrição editorial e header
 * image (character index obra/local/org).
 * ═══════════════════════════════════════════════════════════════ */

/* Header (overline + title + divider + diamond) — markup migrado pra
 * `.illusia-page-header` em v1.39.0 (com color modifiers via
 * `_color-X`). Estilos vivem em `illusia-page-header.css`.
 * — v1.39.8 cleanup */

/* Meta wrapper — sibling do .illusia-page-header em archives migrados.
   Centraliza parent/count/description/header-image entre o header e o
   diamond divider. Substitui o agrupamento dentro de
   .illusia-archive__header (que era markup pré-v1.39). */
.illusia-archive__meta {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  /* Pull-up: cancela o gap do .illusia-page-header pra ficar colado ao título. */
  margin: calc(-1 * var(--space-xs)) auto 0;
  padding: 0 clamp(var(--space-2xs), 2vw, var(--space-md));
  max-width: 42em;
}

/* Parent term — shown for hierarchical taxonomies */
.illusia-archive__parent {
  display: block;
  font-family: var(--ff-ui);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--fg-500);
  margin-top: var(--space-3xs);
}

/* Result counter — mono badge */
.illusia-archive__count {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-500);
  margin-top: var(--space-sm);
  padding: var(--space-3xs) var(--space-sm);
  border: 1px solid var(--border-1);
  border-radius: var(--r-sm);
  background: hsl(var(--bg-900-free) / .4);
}

/* Semantic counter border accents */
.illusia-archive--teal .illusia-archive__count {
  border-color: hsl(var(--teal-free) / .15);
}

.illusia-archive--violet .illusia-archive__count {
  border-color: hsl(var(--violet-free) / .15);
}

.illusia-archive--amber .illusia-archive__count {
  border-color: hsl(var(--amber-free) / .15);
}

.illusia-archive--crimson .illusia-archive__count {
  border-color: hsl(var(--crimson-free) / .15);
}

/* Description — editorial note */
.illusia-archive__description {
  font-family: var(--ff-ui);
  font-size: var(--text-sm);
  font-weight: 400;
  font-style: italic;
  color: var(--fg-400);
  max-width: 38em;
  margin: var(--space-sm) auto 0;
  line-height: 1.6;
}

/* Header image — used by character index (obra/local/org) */
.illusia-archive__header-image {
  margin-top: var(--space-sm);
}

.illusia-archive__header-image img {
  max-width: 200px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-1);
}

:root[data-mode=light] .illusia-archive__header-image img {
  border-color: var(--border-2);
}


/* Divider/diamond — markup migrado em v1.39.0. Color modifiers via
 * `.illusia-page-header__divider--<color>` em `illusia-page-header.css`.
 * — v1.39.8 cleanup */


/* ═══════════════════════════════════════════════════════════════
 * 2. TAX CLOUD — Cross-Reference Index Cards
 *
 * Reimaginação completa do wp_tag_cloud(). Em vez de tags com
 * font-sizes variáveis, um grid de fichas uniformes estilizadas
 * como cross-reference cards de um catálogo de biblioteca.
 *
 * Cada ficha: mono uppercase, borda fina, hover com barra
 * lateral semântica (regra inviolável #8). Count entre
 * parênteses como anotação de cataloguista.
 * ═══════════════════════════════════════════════════════════════ */

.illusia-archive__cloud {
  margin-bottom: var(--space-lg);
  padding: var(--space-sm) 0;
  position: relative;
  text-align: center;
}

/* "Ver também" micro-label */
.illusia-archive__cloud-label {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--ff-mono);
  font-size: var(--text-3xs);
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-600);
  margin-bottom: var(--space-xs);
}

/* Cloud items container — flex wrap layout */
.illusia-archive__cloud-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xs);
}

/* Overflow collapse — activated by JS when content exceeds threshold */
.illusia-archive__cloud._overflowing .illusia-archive__cloud-items {
  max-height: 6rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 1.5rem), transparent);
  mask-image: linear-gradient(to bottom, black calc(100% - 1.5rem), transparent);
}

/* Expanded state — removes constraint */
.illusia-archive__cloud._expanded .illusia-archive__cloud-items {
  max-height: none;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Toggle button — observatory mono control */
.illusia-archive__cloud-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  margin-top: var(--space-sm);
  padding: var(--space-3xs) var(--space-sm);
  font-family: var(--ff-mono);
  font-size: var(--text-3xs);
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-500);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--t-mid) var(--ease-std);
}

.illusia-archive__cloud-toggle:hover {
  color: var(--amber);
}

.illusia-archive__cloud-toggle:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* Chevron indicator */
.illusia-archive__cloud-toggle::after {
  content: '';
  width: clamp(4px, .4vw, 6px);
  height: clamp(4px, .4vw, 6px);
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--t-mid) var(--ease-std);
}

.illusia-archive__cloud._expanded .illusia-archive__cloud-toggle::after {
  transform: rotate(-135deg);
}

/* Toggle text states */
.illusia-archive__cloud-toggle-less {
  display: none;
}

.illusia-archive__cloud._expanded .illusia-archive__cloud-toggle-more {
  display: none;
}

.illusia-archive__cloud._expanded .illusia-archive__cloud-toggle-less {
  display: inline;
}

/* Individual cloud links — override WordPress inline font-size */
.illusia-archive__cloud .tag-cloud-link {
  font-size: var(--text-2xs) !important; /* Override wp_tag_cloud() inline style */
  font-family: var(--ff-mono);
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--fg-400);
  text-decoration: none;
  padding: var(--space-3xs) var(--space-xs);
  border: 1px solid var(--border-1);
  border-radius: var(--r-xs);
  background: hsl(var(--bg-900-free) / .4);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  transition:
    border-color var(--t-mid) var(--ease-std),
    color        var(--t-mid) var(--ease-std),
    background   var(--t-mid) var(--ease-std);
}

/* Amber bar lateral — regra inviolável #8 */
.illusia-archive__cloud .tag-cloud-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--amber);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--t-mid) var(--ease-expo);
}

.illusia-archive__cloud .tag-cloud-link:hover {
  border-color: hsl(var(--amber-free) / .3);
  color: var(--amber);
  background: hsl(var(--amber-free) / .04);
}

.illusia-archive__cloud .tag-cloud-link:hover::before {
  transform: scaleY(1);
}

/* Focus visible */
.illusia-archive__cloud .tag-cloud-link:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* ── Semantic cloud colors ── */

/* Teal (genre) */
.illusia-archive__cloud--teal .tag-cloud-link::before {
  background: var(--teal);
}

.illusia-archive__cloud--teal .tag-cloud-link:hover {
  border-color: hsl(var(--teal-free) / .3);
  color: var(--teal);
  background: hsl(var(--teal-free) / .04);
}

/* Violet (fandom) */
.illusia-archive__cloud--violet .tag-cloud-link::before {
  background: var(--violet);
}

.illusia-archive__cloud--violet .tag-cloud-link:hover {
  border-color: hsl(var(--violet-free) / .3);
  color: var(--violet);
  background: hsl(var(--violet-free) / .04);
}

/* Amber (character) — uses default amber */

/* Crimson (content-warning) */
.illusia-archive__cloud--crimson .tag-cloud-link::before {
  background: var(--crimson);
}

.illusia-archive__cloud--crimson .tag-cloud-link:hover {
  border-color: hsl(var(--crimson-free) / .3);
  color: var(--crimson);
  background: hsl(var(--crimson-free) / .04);
}


/* ═══════════════════════════════════════════════════════════════
 * 3. RESPONSIVE — Mobile (<=640px)
 * ═══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .illusia-archive__cloud-items {
    gap: var(--space-3xs);
  }

  .illusia-archive__cloud .tag-cloud-link {
    font-size: var(--text-3xs) !important; /* Override — mobile size */
    padding: var(--space-3xs) var(--space-2xs);
  }
}


/* ═══════════════════════════════════════════════════════════════
 * 4. RESPONSIVE — Small (<=400px)
 * ═══════════════════════════════════════════════════════════════ */

@media (max-width: 400px) {
  .illusia-archive__count {
    font-size: var(--text-3xs);
  }
}


/* ═══════════════════════════════════════════════════════════════
 * 5. LIGHT MODE
 *
 * Acentos usam variantes -dim para WCAG em fundo claro.
 * Glass backgrounds mais transparentes. Counter e cloud
 * ajustados para contraste.
 * ═══════════════════════════════════════════════════════════════ */

/* Counter */
:root[data-mode=light] .illusia-archive__count {
  background: hsl(var(--bg-200-free) / .2);
  border-color: hsl(var(--illusia-border-base) / .1);
}

:root[data-mode=light] .illusia-archive--teal .illusia-archive__count {
  border-color: hsl(var(--teal-free) / .12);
}

:root[data-mode=light] .illusia-archive--violet .illusia-archive__count {
  border-color: hsl(var(--violet-free) / .12);
}

:root[data-mode=light] .illusia-archive--amber .illusia-archive__count {
  border-color: hsl(var(--amber-free) / .12);
}

:root[data-mode=light] .illusia-archive--crimson .illusia-archive__count {
  border-color: hsl(var(--crimson-free) / .12);
}

/* Cloud — light adjustments */
:root[data-mode=light] .illusia-archive__cloud .tag-cloud-link {
  background: hsl(var(--bg-200-free) / .2);
  border-color: hsl(var(--illusia-border-base) / .1);
}

:root[data-mode=light] .illusia-archive__cloud .tag-cloud-link:hover {
  border-color: hsl(var(--amber-free) / .25);
  color: var(--amber-dim);
  background: hsl(var(--amber-free) / .04);
}

:root[data-mode=light] .illusia-archive__cloud--teal .tag-cloud-link:hover {
  border-color: hsl(var(--teal-free) / .25);
  color: var(--teal-dim);
  background: hsl(var(--teal-free) / .04);
}

:root[data-mode=light] .illusia-archive__cloud--violet .tag-cloud-link:hover {
  border-color: hsl(var(--violet-free) / .25);
  color: var(--violet-dim);
  background: hsl(var(--violet-free) / .04);
}

:root[data-mode=light] .illusia-archive__cloud--crimson .tag-cloud-link:hover {
  border-color: hsl(var(--crimson-free) / .25);
  color: var(--crimson-dim);
  background: hsl(var(--crimson-free) / .04);
}

/* Cloud sidebar bar — dim in light */
:root[data-mode=light] .illusia-archive__cloud--teal .tag-cloud-link::before    { background: var(--teal-dim); }
:root[data-mode=light] .illusia-archive__cloud--violet .tag-cloud-link::before  { background: var(--violet-dim); }
:root[data-mode=light] .illusia-archive__cloud--crimson .tag-cloud-link::before { background: var(--crimson-dim); }
:root[data-mode=light] .illusia-archive__cloud .tag-cloud-link::before          { background: var(--amber-dim); }

/* Cloud toggle — light mode */
:root[data-mode=light] .illusia-archive__cloud-toggle:hover {
  color: var(--amber-dim);
}


/* ═══════════════════════════════════════════════════════════════
 * 6. REDUCED MOTION
 * ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .illusia-archive__cloud .tag-cloud-link {
    transition-duration: 0.01ms !important; /* Override — reduced motion safety net */
  }

  .illusia-archive__cloud .tag-cloud-link::before {
    transition-duration: 0.01ms !important; /* Override — reduced motion safety net */
  }

  .illusia-archive__cloud-toggle {
    transition-duration: 0.01ms !important; /* Override — reduced motion safety net */
  }

  .illusia-archive__cloud-toggle::after {
    transition-duration: 0.01ms !important; /* Override — reduced motion safety net */
  }
}