/*
Theme Name: IA+WP
Theme URI: https://github.com/silvaitamar/iawp
Author: Itamar Silva
Author URI: https://itamarsilva.dev.br
Description: Block theme for the IA+WP editorial hub — AI, modern WordPress, and digital sovereignty. Dark, editorial, agent-friendly.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 8.0
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: iawp
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready, blog, news
*/

/*
 * CSS architecture — IA+WP
 * ─────────────────────────────────────────────────────────────────
 * style.css = global only (chrome header/footer, icons, reveal; skip-link :focus brand)
 * assets/editor-canvas.css = só Site Editor (add_editor_style) — offset BHB + HTML trap
 * assets/blocks/*.css = on-demand by template (hub, blog, single, author, cta, legal, hero)
 * Enqueue: conditional tags in functions.php + add_editor_style for canvas parity
 * Source of visual truth until Phase 5 port: Downloads/iawp-hub-proto/ (approved)
 * ─────────────────────────────────────────────────────────────────
 */

/* === SKIP LINK ===
   NÃO adicionar core/html no template. O core injeta automaticamente
   via _block_template_add_skip_link() (id="wp-skip-link", classes
   skip-link screen-reader-text) apontando para <main id="…">.
   Manter só anchor:"main-content" no group tagName:main.
   Estilos base: wp-includes/css/wp-block-template-skip-link.css
   Abaixo: foco alinhado à marca (opcional).
   ============================================================ */
.skip-link.screen-reader-text:focus {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--contrast);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: var(--wp--custom--radius-btn);
  left: var(--wp--preset--spacing--40);
  top: var(--wp--preset--spacing--20);
  outline: 2px solid var(--wp--preset--color--contrast);
  outline-offset: 2px;
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x: clip em vez de hidden — evita scroll horizontal sem criar stacking context,
   o que permitia que position:sticky nos filhos funcionasse corretamente. */
html { overflow-x: clip; scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; overflow-x: clip; max-width: 100%; }
img, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 { max-width: 100%; overflow-wrap: break-word; }

/* === ATMOSPHERE (proto — punk + fashion) ===
   Grain overlay + wash sutil. Tipografia manda; opacidade baixa. */
.site-grain {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: var(--wp--custom--grain-opacity, 0.04);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
  mix-blend-mode: overlay;
}
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* === ICONS (SVG inline + core/icon) ===
   Biblioteca: assets/icons/ → Icons API `iawp/*` (core/icon).
   Legado: span.icon → SVG via ob_start. Classe de produto `bento-icon`
   fica no wrapper .wp-block-icon (ou no <svg> legado).
   ============================================================ */
svg.icon,
svg.bento-icon,
.wp-block-icon.bento-icon {
  display: block;
  flex-shrink: 0;
}
svg.icon { width: 1.25em; height: 1.25em; fill: url(#grad-brand); }
svg.bento-icon,
.wp-block-icon.bento-icon {
  width: 2.25rem;
  height: 2.25rem;
}
/* Margin do bento: attr nativo spacing.margin no core/icon (não CSS).
   Legado svg.bento-icon (se restar): margin abaixo. */
svg.bento-icon {
  margin: 0 0 2rem 0;
}
/* core/icon: size nativo via dimensions.width no SVG; altura = caixa 1:1 */
.wp-block-icon.bento-icon svg {
  width: 100%;
  height: 100%;
}

/* Utilitários tipográficos compartilhados (home/hub/archive/404) */
.text-accent {
  color: var(--wp--preset--color--primary);
}

.section-more a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.section-more a:hover {
  color: var(--wp--preset--color--contrast);
}

.section-more a span {
  display: inline-block;
  transition: transform 0.25s ease;
}

.section-more a:hover span {
  transform: translateX(0.25rem);
}

svg.author-avatar,
svg.author-avatar-label {
  display: block;
  flex-shrink: 0;
}

svg.author-avatar {
  width: var(--wp--preset--font-size--hero);
  height: var(--wp--preset--font-size--hero);
  fill: url(#grad-brand);
  margin: 0;
}

/* ============================================================
   HEADER — BHB composição + offset do proto
   Bloco: group (headerMode:overlay, layout:default) full-bleed.
   Part: shell constrained → bar alignwide (nativo; wideSize nos filhos diretos).
   Plugin: position:fixed. Proto: body pad = header-h (aqui em .wp-site-blocks).
   Hero: min-height calc(100dvh - header-h) + padding |70.
   Nativo na part: logo/nav/CTA tipografia+cor+pad/borda; CSS só: glass,
   em wordmark, muted nos <a> (elements.link), hover CTA, mobile wrap/order.
   Sem !important na tipografia do chrome (mesmo padrão do footer).
   ============================================================ */
:root {
  --iawp-header-height: var(--wp--custom--header-height, 96px);
}
/* Espaço reservado sob o fixed — evita header encobrir o hero (proto body pad). */
.wp-site-blocks {
  position: relative;
  background-color: var(--wp--preset--color--base);
  padding-top: var(--wp--custom--header-height, 96px);
}
.site-header.header--overlay,
header.site-header.header--overlay {
  border-bottom: 1px solid var(--wp--preset--color--outline);
  /* Contém o ::before (z-index:-1) — sem isto o glass some em alguns stacking contexts do editor */
  isolation: isolate;
}
/* Gutter do proto (.wrap): padding do shell constrained (RPA).
   Não min(100%-2·gutter) — dobra o inset e desalinha vs seções. */
.site-header .site-header__bar.alignwide,
.site-header__bar.alignwide {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--wp--style--global--wide-size, 1344px);
  margin-left: auto;
  margin-right: auto;
}
/* Glass só após scroll (classe .is-scrolled do plugin) */
.site-header.header--overlay::before,
header.site-header.header--overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wp--custom--base-alpha-82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.site-header.header--overlay.is-scrolled::before,
header.site-header.header--overlay.is-scrolled::before {
  opacity: 1;
}
.site-header__logo,
.logo {
  flex-shrink: 0;
}
.site-header__logo a,
.logo a {
  color: inherit;
  text-decoration: none;
}
/* Wordmark canônico: <em>IA</em>+WP (não strong) */
.site-header__logo a em,
.logo a em,
.footer-brand em,
.footer-brand a em {
  font-style: italic;
  font-weight: 300;
  color: var(--wp--preset--color--primary);
}
.site-header__nav.wp-block-navigation { flex-shrink: 0; }
/*
 * elements.link = contrast nos <a>; textColor:muted no nav perde por herança.
 * Seletor (0,2,1) > :where(a) — sem !important (igual footer).
 */
.site-header__nav.has-muted-color a,
.site-header__nav .wp-block-navigation-item__content {
  color: var(--wp--preset--color--muted);
  text-decoration: none;
  padding: 0;
  transition: color 0.2s;
}
.site-header__nav a:hover,
.site-header__nav .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--primary);
}
.site-header__nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.site-header__nav .wp-block-navigation-item[aria-current="page"] > .wp-block-navigation-item__content,
.site-header__nav a[aria-current="page"] {
  color: var(--wp--preset--color--contrast);
}
.site-header__cta { flex-shrink: 0; }
/*
 * CTA ghost: HTML mínimo TT5 (só className btn-nav) — attrs tipografia/borda
 * no botão invalidavam o save() JS. CSS com especificidade > elements.button
 * (:where) — sem !important.
 */
.site-header .btn-nav .wp-block-button__link.wp-element-button,
.site-header .btn-nav.wp-block-button .wp-block-button__link {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--wp--preset--color--contrast);
  background: transparent;
  border: 1px solid var(--wp--custom--border-color-mid);
  border-radius: var(--wp--custom--radius-btn);
  padding: 0.75rem 2rem;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.site-header .btn-nav .wp-block-button__link.wp-element-button:hover,
.site-header .btn-nav.wp-block-button .wp-block-button__link:hover {
  background: var(--wp--preset--color--contrast);
  border-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
}
/*
 * Mobile chrome (≤799 = viewport.mobile):
 * - Sem overlay fixed do BHB (tema vence plugin: header no fluxo).
 * - Sem pad em .wp-site-blocks (não há fixed a compensar).
 * - CTA do chrome oculto → logo + nav numa linha (space-between).
 * Desktop (≥800) mantém overlay + pad + CTA (F5.1–5.8).
 * (Antigo wrap/order @768 do proto 2-linhas foi aposentado — CTA some no mobile.)
 */
.iawp-back-to-top {
  display: none;
}

@media (max-width: 799px) {
  :root {
    --wp--custom--header-height: 72px;
    --iawp-header-height: 72px;
  }

  .wp-site-blocks {
    padding-top: 0;
  }

  .site-header.header--overlay,
  header.site-header.header--overlay {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    background-color: var(--wp--preset--color--base);
  }

  .site-header.header--overlay::before,
  header.site-header.header--overlay::before {
    content: none;
    display: none;
  }

  .site-header.header--overlay.is-scrolled,
  header.site-header.header--overlay.is-scrolled {
    background: var(--wp--preset--color--base);
    background-color: var(--wp--preset--color--base);
    box-shadow: none;
  }

  .site-header .site-header__cta.wp-block-buttons,
  .site-header__cta.wp-block-buttons,
  .site-header .site-header__cta {
    display: none;
  }

  .site-header__bar {
    flex-wrap: nowrap;
    gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
    padding-block: 0;
    min-height: var(--wp--custom--header-height, 72px);
  }

  .site-header__logo,
  .logo,
  .site-header__nav.wp-block-navigation,
  .site-header__cta {
    order: 0;
  }

  .site-header__nav.wp-block-navigation {
    width: auto;
    flex-shrink: 0;
    margin-left: auto;
  }

  .site-header__nav .wp-block-navigation__container {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  }

  /* Voltar ao topo — só neste breakpoint; JS liga .is-visible */
  .iawp-back-to-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 90;
    right: max(1rem, env(safe-area-inset-right, 0px));
    bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    width: 2.75rem;
    height: 2.75rem;
    margin: 0;
    padding: 0;
    border: 1px solid var(--wp--custom--border-color-mid, rgba(255, 255, 255, 0.14));
    border-radius: var(--wp--custom--radius-btn, 9999px);
    background: var(--wp--custom--base-alpha-82, rgba(11, 16, 32, 0.82));
    color: var(--wp--preset--color--contrast);
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(0.35rem);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .iawp-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .iawp-back-to-top:hover,
  .iawp-back-to-top:focus-visible {
    background: var(--wp--preset--color--contrast);
    border-color: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
  }

  .iawp-back-to-top:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
  }

  .iawp-back-to-top svg {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

@media (max-width: 799px) and (prefers-reduced-motion: reduce) {
  .iawp-back-to-top {
    transition: none;
    transform: none;
  }
}

/* ============================================================
   FOOTER — allowlist (nativo: bg base, pad|50, bar flex space-between,
   brand/copy/nav/email tipografia+cor)
   CSS só: border-top outline (proto; seções ficam dentro de <main>,
   então .newsletter+footer nunca casa — borda sempre presente);
   em wordmark; cor muted nos <a> (elements.link=contrast);
   nav padding/decoration; hover; template-part margin 0.
   Sem !important.
   ============================================================ */
footer.wp-block-template-part {
  margin-block-start: 0;
}

.site-footer {
  border-top: 1px solid var(--wp--preset--color--outline);
}

/* Wordmark: <em>IA</em> (mesmo padrão do header/logo) */
.footer-brand em,
.footer-brand a em {
  font-style: italic;
  font-weight: 300;
  color: var(--wp--preset--color--primary);
}

.footer-brand a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s;
}

.footer-brand a:hover {
  opacity: 0.7;
}

/*
 * theme.json elements.link força contrast nos <a> (vence herança do
 * textColor:muted do nav/email). Seletor (0,2,1) > :where(a) sem !important.
 */
.footer-nav.has-muted-color a,
.footer-nav .wp-block-navigation-item__content {
  color: var(--wp--preset--color--muted);
  text-decoration: none;
  padding: 0;
  transition: color 0.2s;
}

.footer-nav a:hover,
.footer-nav .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--primary);
}

.footer-email.has-muted-color a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-email a:hover {
  color: var(--wp--preset--color--primary);
}

/* ============================================================
   MOTION (proto assets/motion.js + styles.css)
   Progressive enhancement: só com <html class="js-motion">.
   Sem JS → conteúdo permanece visível (sem classe .reveal).
   Spotlight CSS vive em hub.css (.bento-item / .spotlight).
   ============================================================ */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-duration: 0.55s;
}

.js-motion .reveal {
  opacity: 0;
  transform: translateY(0.75rem);
  transition:
    opacity var(--motion-duration) var(--ease-out),
    transform var(--motion-duration) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-motion .reveal.is-inview {
  opacity: 1;
  transform: translateY(0);
}

.js-motion .site-header {
  animation: header-in 0.5s var(--ease-out) both;
}
@keyframes header-in {
  from { opacity: 0; transform: translateY(-0.4rem); }
  to { opacity: 1; transform: translateY(0); }
}

.js-motion .error-404__code {
  animation: code-fade 1s var(--ease-out) both;
}
@keyframes code-fade {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 0.35; transform: translateY(0); }
}

/* Hovers unificados (proto) — tokens; sem !important */
a,
.wp-element-button,
.section-more,
.bento-more,
.single-more,
.single-cat a,
.single-share-list a,
.author-social a,
.post-card,
.post-featured {
  transition:
    color 0.25s var(--ease-out),
    border-color 0.25s var(--ease-out),
    background-color 0.25s var(--ease-out),
    transform 0.3s var(--ease-out),
    opacity 0.25s var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js-motion .reveal,
  .js-motion .reveal.is-inview {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .js-motion .site-header,
  .js-motion .error-404__code {
    animation: none;
  }
  a,
  .wp-element-button,
  .section-more,
  .bento-more,
  .single-more,
  .post-card,
  .post-featured {
    transition-duration: 0.01ms;
  }
}

/* === JETPACK FORM SUCCESS MESSAGE
   Aplicado globalmente — cobre hero, cta e sidebar forms.
   Estrutura: .contact-form-submission > .go-back-message + h4 + p
   ============================================================ */
.contact-form-submission {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
  padding: 0.75rem var(--wp--preset--spacing--30);
  margin: 0 !important;
  border: 1px solid var(--wp--custom--border-color-mid);
}
.contact-form-submission .go-back-message {
  margin: 0 !important;
  order: 2; /* move para baixo do heading e mensagem */
}
.contact-form-submission .go-back-message a {
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--dim) !important;
  text-decoration: none !important;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.contact-form-submission .go-back-message a:hover { opacity: 1; }
/* h4 padrão do Jetpack oculto — usamos só o customThankyouMessage */
.contact-form-submission h4[id*="contact-form-success-header"] {
  display: none !important;
}
/* customThankyouMessage — parágrafo imediatamente após o h4 */
.contact-form-submission > p {
  margin: 0 !important;
  font-size: var(--wp--preset--font-size--sm) !important;
  color: var(--wp--preset--color--muted) !important;
  order: 1;
}