/**
 * Illusia Page Header — sistema unificado
 *
 * Block canônico `.illusia-page-header` usado por toda página /
 * archive / single que opta pelo padrão "Baseline · Centered Diamond":
 *
 *   overline (mono uppercase âmbar-dim)
 *   título (Playfair display, fluid clamp)
 *   diamond divider (diamante âmbar entre dois gradients)
 *
 * Markup canônico (renderizado por `illusia_render_page_header()`):
 *
 *   <header class="illusia-page-header">
 *     <span class="illusia-page-header__overline">Eyebrow</span>
 *     <h1 class="illusia-page-header__title">Title</h1>
 *     <p class="illusia-page-header__intro">Optional…</p>
 *   </header>
 *   <div class="illusia-page-header__divider" aria-hidden="true">
 *     <span class="illusia-page-header__diamond"></span>
 *   </div>
 *
 * Modificadores de cor (sufixo `--<color>`) trocam apenas a CSS
 * variable de accent: `teal`, `violet`, `amber`, `crimson`, `neutral`.
 *
 * Customização:
 * Todos os valores são expostos como CSS custom properties locais
 * (prefixo `--ph-`). Templates podem sobrescrever per-instância via
 * inline style ou regra com maior especificidade.
 *
 * Seções:
 *   1. Tokens locais (custom properties)
 *   2. Header shell
 *   3. Overline (+ color modifiers)
 *   4. Título
 *   5. Intro paragraph opcional
 *   6. Diamond divider (+ color modifiers)
 *   7. Wrapper padding padronizado (multi-template)
 *   8. Article layout padronizado (multi-template)
 *   9. Context-specific padding (extra breath em dashboards/archives)
 *  10. Suppress native singular title
 *  11. Light mode
 *
 * @since 1.39.0
 * @modified 1.39.8 — full audit + tokenization (sem hardcoded)
 */

/* ── 1. Tokens locais ──────────────────────────────────────────────────
   Custom properties que controlam o page-header. Sobrescreva qualquer
   uma per-instance via inline style ou per-context via classe parent
   (ex: `.illusia-archive .illusia-page-header { --ph-padding-top: ... }`).
   ─────────────────────────────────────────────────────────────────── */
.illusia-page-header,
.illusia-page-header__divider {
  /* Spacing */
  --ph-padding-top: clamp(var(--space-lg), 4vw, var(--space-xl));
  --ph-padding-x:   clamp(var(--space-2xs), 2vw, var(--space-md));
  --ph-gap:         var(--space-xs);

  /* Overline */
  --ph-overline-color:          var(--amber-dim);
  --ph-overline-font-size:      var(--text-3xs);
  --ph-overline-letter-spacing: .3em;

  /* Título */
  --ph-title-color:          var(--fg-100);
  --ph-title-font-size:      clamp(var(--text-xl), 8vw, var(--text-3xl));
  --ph-title-letter-spacing: .02em;
  --ph-title-line-height:    1.15;

  /* Intro */
  --ph-intro-color:    var(--fg-400);
  --ph-intro-font-size: var(--text-sm);
  --ph-intro-max-width: 42em;

  /* Divider */
  --ph-divider-accent:    var(--amber-free);
  --ph-divider-opacity:   .35;
  --ph-divider-max-width: 36rem;
  --ph-divider-margin-top:    var(--space-xs);
  --ph-divider-margin-bottom: var(--space-sm);

  /* Diamond */
  --ph-diamond-color:   var(--amber-dim);
  --ph-diamond-size:    var(--space-2xs);
  --ph-diamond-opacity: .6;
}

/* ── 2. Header shell ───────────────────────────────────────────────── */
.illusia-page-header {
  text-align: center;
  /* Top padding generoso — empurra o overline pra fora da zona de
     ornamentos do page-style frame (chamfered/illusia-frame).
     Bottom = 0 (o divider tem seu próprio margin-top). */
  padding: var(--ph-padding-top) var(--ph-padding-x) 0;
  display: flex;
  flex-direction: column;
  gap: var(--ph-gap);
}

/* ── 3. Overline ──────────────────────────────────────────────────── */
.illusia-page-header__overline {
  display: block;
  font-family: var(--ff-mono);
  font-size: var(--ph-overline-font-size);
  font-weight: 400;
  letter-spacing: var(--ph-overline-letter-spacing);
  text-transform: uppercase;
  color: var(--ph-overline-color);
  margin: 0;
}

/* Color modifiers — só sobrescrevem a CSS variable. */
.illusia-page-header__overline--teal    { --ph-overline-color: var(--teal-dim); }
.illusia-page-header__overline--violet  { --ph-overline-color: var(--violet-dim); }
.illusia-page-header__overline--amber   { --ph-overline-color: var(--amber-dim); }
.illusia-page-header__overline--crimson { --ph-overline-color: var(--crimson-dim); }
.illusia-page-header__overline--neutral { --ph-overline-color: var(--fg-600); }

/* ── 4. Título ────────────────────────────────────────────────────── */
.illusia-page-header__title {
  font-family: var(--ff-display);
  font-size: var(--ph-title-font-size);
  font-weight: 700;
  color: var(--ph-title-color);
  letter-spacing: var(--ph-title-letter-spacing);
  line-height: var(--ph-title-line-height);
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── 5. Intro paragraph opcional ─────────────────────────────────── */
.illusia-page-header__intro {
  text-align: center;
  color: var(--ph-intro-color);
  font-family: var(--ff-ui);
  font-size: var(--ph-intro-font-size);
  line-height: 1.6;
  max-width: var(--ph-intro-max-width);
  margin: 0 auto;
}

/* ── 6. Diamond divider ──────────────────────────────────────────── */
.illusia-page-header__divider {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--ph-divider-margin-top) auto var(--ph-divider-margin-bottom);
  /* Cap pra que as linhas não vazem além do frame em wide screens
     mas mantenham full-width no mobile. */
  max-width: var(--ph-divider-max-width);
  width: 100%;
  padding-inline: var(--ph-padding-x);
}

.illusia-page-header__divider::before,
.illusia-page-header__divider::after {
  content: '';
  flex: 1 1 0;
  min-width: var(--space-lg);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    hsl(var(--ph-divider-accent) / var(--ph-divider-opacity)) 50%,
    transparent 100%
  );
}

.illusia-page-header__diamond {
  width: var(--ph-diamond-size);
  height: var(--ph-diamond-size);
  background: var(--ph-diamond-color);
  transform: rotate(45deg);
  flex-shrink: 0;
  opacity: var(--ph-diamond-opacity);
}

/* Color modifiers do divider — sobrescrevem accent + diamond color. */
.illusia-page-header__divider--teal    { --ph-divider-accent: var(--teal-free);    --ph-diamond-color: var(--teal-dim); }
.illusia-page-header__divider--violet  { --ph-divider-accent: var(--violet-free);  --ph-diamond-color: var(--violet-dim); }
.illusia-page-header__divider--amber   { --ph-divider-accent: var(--amber-free);   --ph-diamond-color: var(--amber-dim); }
.illusia-page-header__divider--crimson { --ph-divider-accent: var(--crimson-free); --ph-diamond-color: var(--crimson-dim); }
.illusia-page-header__divider--neutral { --ph-divider-accent: var(--illusia-border-base); --ph-diamond-color: var(--fg-700); --ph-divider-opacity: .55; }

/* Mobile — reduz a presença vertical do divider sem encurtar as
   linhas de gradient (o diamante já escala via `--ph-diamond-size`). */
@media (max-width: 768px) {
  .illusia-page-header__divider {
    --ph-divider-margin-top:    var(--space-2xs);
    --ph-divider-margin-bottom: var(--space-xs);
  }
}

/* ── 7. Wrapper padding padronizado ──────────────────────────────────
   Unifica `.main__wrapper` em todos os templates que usam o page-header
   (4 dashboards + 6 archives + stories + list pages). Garante que o
   header tenha o mesmo container em qualquer template.
   ─────────────────────────────────────────────────────────────────── */
:is(
  .illusia-lancamentos,
  .illusia-cdash,
  .illusia-taxdash,
  .illusia-rankings-page,
  .illusia-archive,
  .illusia-stories,
  .illusia-list-page
) {
  padding: 0;
}

:is(
  .illusia-lancamentos,
  .illusia-cdash,
  .illusia-taxdash,
  .illusia-rankings-page,
  .illusia-archive,
  .illusia-stories,
  .illusia-list-page
) .main__wrapper {
  max-width: var(--site-width, 1200px);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-2xl);
}

@media (max-width: 768px) {
  :is(
    .illusia-lancamentos,
    .illusia-cdash,
    .illusia-taxdash,
    .illusia-rankings-page,
    .illusia-archive,
    .illusia-stories,
    .illusia-list-page
  ) .main__wrapper {
    padding: var(--space-lg) var(--space-sm) var(--space-xl);
  }
}

/* ── 8. Article layout padronizado ───────────────────────────────────
   Unifica o flex + gap do `<article>` em todos os templates do
   page-header, garantindo o mesmo rhythm vertical entre header,
   conteúdo e seções subsequentes.
   ─────────────────────────────────────────────────────────────────── */
:is(
  .illusia-lancamentos__article,
  .illusia-cdash__article,
  .illusia-taxdash__article,
  .illusia-rankings-page__article,
  .illusia-stories__article,
  .illusia-collections__article,
  .illusia-archive__article,
  .illusia-blog__article,
  .illusia-list-page__article,
  .illusia-studio-page__article,
  .illusia-bulk-page__article,
  .illusia-shelf__article,
  .illusia-bookmarks-page__article,
  .illusia-index-page__article
) {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ── 9. Context-specific padding ─────────────────────────────────────
   Páginas regulares têm o page-header injetado dentro de
   `.singular__content.content-section`, que adiciona um breath extra
   no top. Já dashboards/archives/stories/list-pages chamam o helper
   como filho direto do `<article>` — sem o content-section wrapper —
   fazendo o overline ficar visualmente colado nos ornamentos do
   page-style frame. Aqui damos mais respiro pra esses contextos
   sobrescrevendo a CSS variable `--ph-padding-top`.
   ─────────────────────────────────────────────────────────────────── */
:is(
  .illusia-lancamentos,
  .illusia-cdash,
  .illusia-taxdash,
  .illusia-rankings-page,
  .illusia-archive,
  .illusia-stories,
  .illusia-list-page
) .illusia-page-header {
  --ph-padding-top: clamp(var(--space-2xl), 7vw, var(--space-3xl));
}

/* ── 10. Suppress native singular title ──────────────────────────────
   Quando a metabox "Header padronizado Illusia" está ativa em uma
   page/post/CPT, o body recebe a classe `illusia-has-custom-header`.
   Aqui escondemos o `<header class="singular__header">` que o template
   pai do Fictioneer renderiza com `<h1 class="singular__title">`,
   evitando título duplicado sem precisar trocar o template da página.
   ─────────────────────────────────────────────────────────────────── */
.illusia-has-custom-header .singular__header {
  display: none;
}

/* ── 11. Light mode ───────────────────────────────────────────────────
   No light mode, os accents migram para variantes `-dim-free` para
   manter contraste WCAG em fundo claro. Como tudo é controlado por
   CSS variable, basta sobrescrever as accent vars.
   ─────────────────────────────────────────────────────────────────── */
:root[data-mode="light"] .illusia-page-header__divider {
  --ph-divider-accent: var(--amber-dim-free);
}

:root[data-mode="light"] .illusia-page-header__divider--teal    { --ph-divider-accent: var(--teal-dim-free); }
:root[data-mode="light"] .illusia-page-header__divider--violet  { --ph-divider-accent: var(--violet-dim-free); }
:root[data-mode="light"] .illusia-page-header__divider--amber   { --ph-divider-accent: var(--amber-dim-free); }
:root[data-mode="light"] .illusia-page-header__divider--crimson { --ph-divider-accent: var(--crimson-dim-free); }