/*
Theme Name: Território da Palavra
Theme URI: https://territoriodapalavra.com.br
Description: Tema acessível do portal Território da Palavra — Plano Bianual da Biblioteca e Videoteca Municipal de São Sebastião "Seu Alvinho". Child theme de Twenty Twenty-Five com identidade visual do projeto, barra de acessibilidade (tema claro/escuro/alto contraste, ajuste de fonte) e integração VLibras.
Author: Território da Palavra
Template: twentytwentyfive
Version: 1.2.0
Requires at least: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: territorio-palavra
*/

/* ===== Tokens do projeto =====
   Paleta derivada do logotipo: teal #31857D, verde-escuro #202E2D,
   creme #EDE5D4, menta #E8F0EB. */

:root {
  --tdp-focus: #EC5C0C;
  /* Bordas de campos e selos: a linha areia (accent-5, 1,4:1) é decorativa
     demais para controles; WCAG 1.4.11 pede 3:1 contra o fundo → 4:1 aqui. */
  --tdp-borda-controle: #6f7f7b;
}

/* ===== Modo escuro: redefine os presets do tema =====
   Cuidado: accent-6 é a cor de LINK e de fundo de botão nos estilos globais
   do WordPress; accent-5 é a cor de bordas/separadores. No escuro elas são
   redefinidas abaixo, mas links e bordas recebem regras explícitas porque um
   verde-escuro sobre verde-escuro some (revisão 2026-09-03). */
html[data-theme="dark"] {
  --wp--preset--color--base: #141f1e;
  --wp--preset--color--contrast: #f1eee4;
  --wp--preset--color--accent-1: #54b3a6;
  --wp--preset--color--accent-2: #1b2a29;
  --wp--preset--color--accent-3: #1c2927;
  --wp--preset--color--accent-4: #f0b30d;
  --wp--preset--color--accent-5: #3f5750;
  --wp--preset--color--accent-6: #22322f;
  --tdp-link: #7fd1c5;          /* 9,5:1 sobre o fundo base */
  --tdp-link-visited: #b9c9c5;  /* 9,8:1 — distinto do link não visitado */
  --tdp-link-hover: #ffd166;    /* 11,7:1 */
  --tdp-borda-controle: #8aa39c; /* 6,3:1 — bordas de campos/selos (WCAG 1.4.11 pede 3:1) */
  color-scheme: dark;
}
html[data-theme="dark"] body { background-color: #141f1e; color: #f1eee4; }

/* Links: os estilos globais pintam todo <a> com accent-6 (escuro). Aqui o
   link ganha cor clara em qualquer superfície (corpo, cartões, avisos,
   rodapé), inclusive :visited, que antes se confundia com o fundo. */
html[data-theme="dark"] a:where(:not(.wp-element-button):not(.tdp-btn):not(.tdp-cal-fab)) { color: var(--tdp-link); }
html[data-theme="dark"] a:where(:not(.wp-element-button):not(.tdp-btn):not(.tdp-cal-fab)):visited { color: var(--tdp-link-visited); }
html[data-theme="dark"] a:where(:not(.wp-element-button):not(.tdp-btn):not(.tdp-cal-fab)):hover,
html[data-theme="dark"] a:where(:not(.wp-element-button):not(.tdp-btn):not(.tdp-cal-fab)):focus-visible { color: var(--tdp-link-hover); }
/* Título do site e menu principal herdam a cor do texto (não a de link) */
html[data-theme="dark"] .wp-block-site-title a,
html[data-theme="dark"] .wp-block-navigation a,
html[data-theme="dark"] .wp-block-post-title a { color: inherit; }
html[data-theme="dark"] .wp-block-post-title a:hover { color: var(--tdp-link-hover); }
html[data-theme="dark"] .tdp-a11y-bar a { color: #fff; }

/* Botões dos estilos globais: fundo accent-6 sumiria no fundo escuro */
html[data-theme="dark"] .wp-element-button,
html[data-theme="dark"] .wp-block-button__link { background-color: #54b3a6; color: #141f1e; }
html[data-theme="dark"] .wp-element-button:hover,
html[data-theme="dark"] .wp-block-button__link:hover { background-color: #7fd1c5; color: #141f1e; }

/* Bordas de controles de formulário (Contact Form 7) */
html[data-theme="dark"] .wpcf7 input[type="text"], html[data-theme="dark"] .wpcf7 input[type="email"],
html[data-theme="dark"] .wpcf7 input[type="tel"], html[data-theme="dark"] .wpcf7 select,
html[data-theme="dark"] .wpcf7 textarea { border-color: var(--tdp-borda-controle); }
html[data-theme="dark"] .wpcf7 input[type="checkbox"] { accent-color: #54b3a6; }

/* Logotipos e régua de logos institucionais (PNG transparente com arte
   escura): no escuro ganham um cartão creme para manter a legibilidade.
   Vale para a barra do pattern (img.tdp-barra-logos) e para qualquer imagem
   colocada no rodapé pelo painel (a régua atual vem da Biblioteca de Mídia). */
html[data-theme="dark"] img.tdp-barra-logos,
html[data-theme="dark"] footer.wp-block-group .wp-block-image img {
  background: #f1eee4; border-radius: 8px; padding: 12px; box-sizing: border-box;
}
html[data-theme="dark"] .wp-block-site-logo img,
html[data-theme="dark"] img[src*="logo-horizontal"] {
  background: #f1eee4; border-radius: 8px; padding: 8px;
}

/* ===== Alto contraste =====
   Regra: fundo branco, texto preto, links azul-escuro sublinhados; qualquer
   superfície preta (barra de acessibilidade, botões) tem texto/links brancos.
   accent-5 vira preto (separadores) — por isso blocos que usam accent-5 como
   FUNDO são forçados a branco com moldura (revisão 2026-09-03). */
html[data-theme="contrast"] {
  --wp--preset--color--base: #ffffff;
  --wp--preset--color--contrast: #000000;
  --wp--preset--color--accent-1: #00513f;
  --wp--preset--color--accent-2: #ffffff;
  --wp--preset--color--accent-3: #ffffff;
  --wp--preset--color--accent-4: #7a3c00;
  --wp--preset--color--accent-5: #000000;
  --wp--preset--color--accent-6: #00291f;
  color-scheme: light;
}
html[data-theme="contrast"] body { background: #fff; color: #000; }
html[data-theme="contrast"] a { text-decoration: underline !important; color: #00318c !important; }
html[data-theme="contrast"] a:visited { color: #4b0f7a !important; }
html[data-theme="contrast"] a:hover, html[data-theme="contrast"] a:focus-visible { color: #000 !important; }
html[data-theme="contrast"] .wp-block-button__link,
html[data-theme="contrast"] .tdp-btn {
  background: #000 !important; color: #fff !important; border: 2px solid #000 !important;
}
html[data-theme="contrast"] .wp-block-button__link:hover, html[data-theme="contrast"] .tdp-btn:hover,
html[data-theme="contrast"] .wp-block-button__link:focus-visible, html[data-theme="contrast"] .tdp-btn:focus-visible {
  background: #fff !important; color: #000 !important;
}
html[data-theme="contrast"] .wp-block-group { border-color: #000; }
/* Links sobre superfícies pretas */
html[data-theme="contrast"] .tdp-a11y-bar a,
html[data-theme="contrast"] a.tdp-cal-fab,
html[data-theme="contrast"] .has-contrast-background-color a,
html[data-theme="contrast"] .has-black-background-color a { color: #fff !important; }
/* Blocos com fundo de preset (accent-5 "Papel Areia") e as variações de
   seção do Twenty Twenty-Five (is-style-section-N: fundo accent-N + texto
   contrast) viram branco com texto preto e moldura preta — a home usa
   section-1, que ficava preta sobre preto. */
html[data-theme="contrast"] .has-accent-5-background-color,
html[data-theme="contrast"] .wp-block-group[class*="is-style-section-"] {
  background-color: #fff !important; color: #000 !important;
  border-top: 3px solid #000; border-bottom: 3px solid #000;
}
html[data-theme="contrast"] .wp-block-separator { color: #000 !important; background-color: #000 !important; }
html[data-theme="contrast"] .wp-block-site-logo img,
html[data-theme="contrast"] .wp-block-image img { background: #fff; }
html[data-theme="contrast"] .wpcf7 input[type="text"], html[data-theme="contrast"] .wpcf7 input[type="email"],
html[data-theme="contrast"] .wpcf7 input[type="tel"], html[data-theme="contrast"] .wpcf7 select,
html[data-theme="contrast"] .wpcf7 textarea { border: 2px solid #000; background: #fff; color: #000; }

/* ===== Ajuste de tamanho de fonte ===== */
html[data-font="large"] { font-size: 112.5%; }
html[data-font="xlarge"] { font-size: 125%; }

/* ===== Foco visível (WCAG 2.4.7) ===== */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--tdp-focus) !important;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ===== Barra de acessibilidade ===== */
.tdp-a11y-bar {
  background: var(--wp--preset--color--accent-6, #202e2d);
  color: #fff;
  font-size: 0.85rem;
}
.tdp-a11y-bar__inner {
  max-width: 1140px; margin: 0 auto; padding: 6px 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.tdp-a11y-bar__label { font-weight: 700; margin-right: 4px; }
.tdp-a11y-bar button {
  background: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 4px; padding: 3px 10px; font-size: 0.85rem;
  cursor: pointer; line-height: 1.4;
}
.tdp-a11y-bar button:hover { background: rgba(255, 255, 255, 0.15); }
.tdp-a11y-bar button[aria-pressed="true"] {
  background: #fff; color: #202e2d; font-weight: 700; border-color: #fff;
}
html[data-theme="contrast"] .tdp-a11y-bar { background: #000; }
html[data-theme="contrast"] .tdp-a11y-bar button[aria-pressed="true"] { color: #000; }

/* ===== Skip link sempre disponível ===== */
.tdp-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100000;
  background: #202e2d; color: #fff; padding: 10px 18px; font-weight: 700;
}
.tdp-skip-link:focus { left: 8px; top: 8px; }

/* A página inicial usa o H1 do bloco de capa; o título da página ("Início")
   ficaria duplicado — WCAG 1.3.1 pede hierarquia única. */
body.home h1.wp-block-post-title { display: none; }

/* Home: a capa (hero) deve encostar no cabeçalho — remove o respiro do
   template (margem do main + padding do grupo + margem do conteúdo). */
body.home main { margin-top: 0 !important; }
body.home main > .wp-block-group:first-child { padding-top: 0 !important; }
body.home .entry-content { margin-block-start: 0 !important; }
body.home .entry-content > .wp-block-cover.alignfull:first-child { margin-top: 0 !important; }
body.home .wp-block-cover__inner-container {
  max-width: var(--wp--style--global--wide-size, 80rem);
  margin-left: auto; margin-right: auto;
}

/* ===== Cartões de atividade ===== */
.tdp-card {
  border: 1px solid var(--wp--preset--color--accent-5, #d9d2c0);
  border-radius: 12px; padding: 24px;
  background: var(--wp--preset--color--accent-3, #eef3ef);
}
.tdp-card h3 { margin-top: 0; }
.tdp-meta { font-size: 0.9rem; opacity: 0.92; }
.tdp-btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }

/* Botões (mínimo 24x24 de alvo, contraste AA) */
.tdp-btn {
  display: inline-block; padding: 10px 22px; border-radius: 8px;
  font-weight: 700; text-decoration: none; line-height: 1.4;
  border: 2px solid transparent;
}
.tdp-btn--primary { background: var(--wp--preset--color--accent-6, #202e2d); color: #fff; }
.tdp-btn--primary:hover { background: var(--wp--preset--color--accent-1, #31857d); color: #fff; }
.tdp-btn--secondary {
  background: transparent; color: var(--wp--preset--color--contrast, #202e2d);
  border-color: var(--wp--preset--color--accent-1, #31857d);
}
.tdp-btn--secondary:hover { background: var(--wp--preset--color--accent-3, #eef3ef); }
html[data-theme="dark"] .tdp-btn--primary { background: #54b3a6; color: #141f1e; }
html[data-theme="dark"] .tdp-btn--primary:hover, html[data-theme="dark"] .tdp-btn--primary:focus-visible { background: #7fd1c5; color: #141f1e; }
html[data-theme="dark"] .tdp-btn--secondary { color: #f1eee4; border-color: #7fd1c5; }
html[data-theme="dark"] .tdp-btn--secondary:hover, html[data-theme="dark"] .tdp-btn--secondary:focus-visible { background: #22322f; color: #fff; }
html[data-theme="dark"] .tdp-card { border-color: #3f5750; background: #1c2927; }
html[data-theme="dark"] .tdp-card h3 a { color: var(--tdp-link); }

/* Barra de logos no rodapé */
img.tdp-barra-logos { max-width: 100%; height: auto; }

/* Movimento reduzido (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ===== Formulário de contato (Contact Form 7) ===== */
.wpcf7 { max-width: 60rem; }
.wpcf7, .wpcf7 *, .wpcf7 *::before, .wpcf7 *::after { box-sizing: border-box; }
.wpcf7 form > p, .wpcf7 .tdp-cf7 > p:empty { margin: 0; }

/* Grade de 12 colunas: uma coluna no celular, larguras por conteúdo a partir de 700px */
.tdp-cf7 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px 20px; align-items: start; margin: 20px 0 0; }
.tdp-cf7-campo { grid-column: span 12; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
@media (min-width: 700px) {
  .tdp-cf7-campo--nome    { grid-column: span 7; }
  .tdp-cf7-campo--tel     { grid-column: span 5; }
  .tdp-cf7-campo--email   { grid-column: span 7; }
  .tdp-cf7-campo--assunto { grid-column: span 5; }
}

.tdp-cf7 label { display: flex; flex-direction: column; gap: 6px; font-weight: 400; }
.tdp-cf7-rotulo { font-weight: 700; line-height: 1.35; }
.tdp-cf7-obr { font-weight: 400; font-size: .9em; opacity: .85; }
.tdp-cf7-opc { font-weight: 400; font-size: .9em; opacity: .85; }
.tdp-cf7-ajuda { font-size: .9rem; line-height: 1.45; opacity: .9; }

.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"],
.wpcf7 select, .wpcf7 textarea {
  width: 100%; max-width: 100%; padding: 10px 12px; font-size: 1rem;
  font-family: inherit; line-height: 1.45; border-radius: 8px;
  border: 1.5px solid var(--tdp-borda-controle, #6f7f7b);
  background: var(--wp--preset--color--base, #fff);
  color: var(--wp--preset--color--contrast, #202e2d);
}
.wpcf7 textarea { height: 11rem; min-height: 6rem; resize: vertical; }
.wpcf7 select { appearance: auto; }

/* Captcha de imagem: imagem e campo lado a lado, empilhando no celular */
.tdp-cf7-captcha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tdp-cf7-captcha img { height: 2.75rem; width: auto; max-width: 100%; border-radius: 8px;
  padding: 2px 6px; border: 1.5px solid var(--tdp-borda-controle, #6f7f7b); background: #fff; }
.tdp-cf7-captcha-campo { flex: 1 1 12rem; min-width: 0; }
.tdp-cf7-captcha-campo input[type="text"] { max-width: 16rem; }

/* Aceite e envio */
.tdp-cf7-campo--aceite .wpcf7-list-item { margin: 0; }
.tdp-cf7-campo--aceite label { flex-direction: row; align-items: flex-start; gap: 10px; line-height: 1.5; }
.wpcf7 input[type="checkbox"] { margin: .25rem 0 0; width: 1.15rem; height: 1.15rem; flex: none; }
.tdp-cf7-campo--envio { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
.wpcf7 .tdp-btn { cursor: pointer; font-size: 1rem; font-family: inherit; }
.wpcf7 .wpcf7-spinner { margin: 0 0 0 4px; }

/* Validação e respostas */
.wpcf7 .wpcf7-not-valid { border-color: #a92c12; border-width: 2px; }
.wpcf7 .wpcf7-not-valid-tip { font-size: .9rem; font-weight: 700; color: #a92c12; }
.wpcf7 .wpcf7-response-output {
  border-radius: 10px; padding: 14px 18px; margin: 20px 0 0; border: 2px solid;
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: #2c6e49; background: var(--wp--preset--color--accent-3, #eef3ef);
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output {
  border-color: #a92c12; background: #fbeae5; color: #4d1405;
}
html[data-theme="dark"] .wpcf7 .wpcf7-not-valid-tip { color: #ff9f87; }
html[data-theme="dark"] .wpcf7 form.sent .wpcf7-response-output { background: #22322f; }
html[data-theme="dark"] .wpcf7 form.invalid .wpcf7-response-output,
html[data-theme="dark"] .wpcf7 form.unaccepted .wpcf7-response-output,
html[data-theme="dark"] .wpcf7 form.failed .wpcf7-response-output,
html[data-theme="dark"] .wpcf7 form.spam .wpcf7-response-output { background: #3a1c13; color: #ffd9cd; }
html[data-theme="contrast"] .wpcf7 .wpcf7-response-output { background: #fff; color: #000; border-width: 3px; }

/* ===== Selos de estado das atividades (plugin tdp-atividades) ===== */
.tdp-selo {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  padding: 2px 10px; border-radius: 999px; border: 1.5px solid;
  font-size: .7em; font-weight: 700; line-height: 1.6; letter-spacing: .02em;
  text-transform: uppercase; white-space: nowrap;
}
.tdp-selo--em-breve {
  border-color: var(--tdp-borda-controle, #6f7f7b);
  background: var(--wp--preset--color--accent-3, #eef3ef);
  color: var(--wp--preset--color--contrast, #202e2d);
}
.tdp-selo--abertas {
  border-color: #2c6e49; background: #2c6e49; color: #fff;
}
/* Atividade já realizada ou com inscrições encerradas: selo neutro (Verde Profundo). */
.tdp-selo--realizada {
  border-color: #202e2d; background: #202e2d; color: #fff;
}
.tdp-ativ-encerrada { font-weight: 700; }
html[data-theme="dark"] .tdp-selo--em-breve { background: #22322f; color: #f1eee4; border-color: var(--tdp-borda-controle); }
html[data-theme="dark"] .tdp-selo--abertas { background: #54b3a6; border-color: #54b3a6; color: #141f1e; }
html[data-theme="dark"] .tdp-selo--realizada { background: #f1eee4; border-color: #f1eee4; color: #141f1e; }
html[data-theme="contrast"] .tdp-selo { background: #fff !important; color: #000 !important; border-color: #000 !important; }

/* Aviso que substitui o conteúdo das atividades "Em breve" */
.tdp-em-breve-aviso {
  border-left: 4px solid var(--wp--preset--color--accent-1, #31857d);
  background: var(--wp--preset--color--accent-3, #eef3ef);
  padding: 16px 20px; border-radius: 0 10px 10px 0; margin: 24px 0;
}
.tdp-em-breve-aviso p { margin: 0; }
html[data-theme="dark"] .tdp-em-breve-aviso { background: #22322f; }

/* Aviso de alteração na programação (ex.: mudança de data de uma atividade) */
.tdp-aviso {
  border-left: 6px solid #ec5c0c; /* Telha (paleta oficial) */
  background: var(--wp--preset--color--accent-2, #ede5d4);
  padding: 20px 24px; border-radius: 0 12px 12px 0; margin: 28px 0;
}
.tdp-aviso h2, .tdp-aviso h3 { margin-top: 0; }
.tdp-aviso .wp-block-image { margin: 16px 0; }
.tdp-aviso img { max-width: min(420px, 100%); height: auto; border-radius: 10px; }
html[data-theme="dark"] .tdp-aviso { background: #22322f; }
/* Alto contraste: o aviso fica branco com moldura preta (antes era preto e o
   texto, também preto, sumia — corrigido em 2026-09-03). */
html[data-theme="contrast"] .tdp-aviso { background: #fff; border: 3px solid #000; border-left-width: 8px; }
html[data-theme="contrast"] .tdp-em-breve-aviso { background: #fff; border: 2px solid #000; border-left-width: 6px; }