/* =========================================================================
   ASA — asa-overrides.css
   Camada de correcoes do child theme. Consome design-tokens.css.
   NAO declara valores literais de cor, tipo de letra ou espacamento (§5.1).

   Enfileirada com dependencia dos handles REAIS do plugin
   ('asa-candidaturas' e 'asa-candidaturas-theme-layout'), pelo que a ordem de
   origem nos favorece e nao e preciso !important em lado nenhum.

   A maior parte da identidade ja vem do theme.json, que redefine os presets do
   proprio tema. Aqui fica so o que o theme.json nao alcanca: classes dos
   padroes, correcoes de acessibilidade medidas, e degradacao de efeitos.
   ========================================================================= */

/* ---------------------------------------------------------------- tipos --- */
/* F1 / VISUAL-05 — o @font-face do tema declara `font-style: semibold` e
   `font-style: bold`, que NAO sao valores validos de font-style (erro
   confirmado pelo validador W3C nas tres paginas), e fixa `font-weight: 400`,
   anulando o eixo variavel. Resultado: todo o texto sai a peso 400 com negrito
   sintetizado pelo browser. O theme.json ja declara as familias corretas via
   fontFace; esta regra garante que nada herda a declaracao invalida do pai. */
body,
.wp-site-blocks,
.editor-styles-wrapper {
  font-family: var(--asa-font-text);
  font-size: var(--asa-text-base);
  line-height: var(--asa-leading-normal);
}

/* VISUAL-06 — em producao o corpo mede 14,375 px a 375 px, abaixo do minimo de
   17 px que o proprio projeto fixa. A escala fluida dos tokens resolve-o. */

/* --------------------------------------------------------------- camadas -- */

.asa-functional {
  background: var(--asa-surface-functional);
  color: var(--asa-text-on-functional);
  font-weight: var(--asa-weight-body);
}

/* §4.4b criterio 3: sobre navy o texto engorda opticamente. Baixa-se um
   escalao o peso do corpo nas superficies escuras. */
.asa-header,
.asa-footer,
.asa-programs {
  font-weight: var(--asa-weight-body-on-dark);
}

/* ------------------------------------------------------ cartoes programa -- */

.asa-cards {
  display: grid;
  gap: var(--asa-space-md);
  grid-template-columns: 1fr;
  margin-block-start: var(--asa-space-lg);
}
@media (min-width: 768px) { .asa-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .asa-cards { grid-template-columns: 1fr 1fr 1fr; } }

/* Superficie opaca elevada, NAO vidro. Duas razoes: §4.4 so justifica material
   translucido onde a interface se superpoe a fotografia real, e a verificacao
   do prototipo mediu 3 superficies translucidas simultaneas a 768 px — violacao
   da regra 4 de §4.3 (maximo duas) e do critério A3c. */
.asa-card {
  position: relative;
  padding: var(--asa-space-md);
  border-radius: var(--asa-radius-xl);
  background: var(--asa-surface-narrative-raised);
  border: var(--asa-border-hairline) solid var(--asa-glass-card-over-photo-border);
  overflow: hidden;
}

.asa-card__accent {
  display: block;
  width: var(--asa-space-xl);
  height: var(--asa-border-thick);
  border-radius: var(--asa-radius-full);
  margin-block-end: var(--asa-space-xs);
}
/* §4.5 regra 2: os acentos aparecem SO como barra. Nenhum passa AA sobre
   branco (1.64-2.44:1 medido), pelo que nunca servem de texto. */
.asa-card--habitacao .asa-card__accent { background: var(--asa-prog-habitacao); }
.asa-card--regressar .asa-card__accent { background: var(--asa-prog-regressar); }
.asa-card--proinfancia .asa-card__accent { background: var(--asa-prog-proinfancia); }
.asa-card--valorizacao .asa-card__accent { background: var(--asa-prog-valorizacao); }
.asa-card--capacitar .asa-card__accent { background: var(--asa-prog-capacitar); }
.asa-card--oportunidades .asa-card__accent { background: var(--asa-prog-oportunidades); }

.asa-card__title {
  font-family: var(--asa-font-display);
  font-size: var(--asa-text-lg);
  line-height: var(--asa-leading-tight);
  margin: 0 0 var(--asa-space-2xs);
}
.asa-card__desc { margin: 0 0 var(--asa-space-xs); color: var(--asa-text-on-narrative-muted); }
.asa-card__cta {
  display: inline-flex;
  align-items: center;
  min-height: var(--asa-field-min-target);
  padding-inline: var(--asa-space-2xs);
  color: var(--asa-text-on-narrative);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --------------------------------------------------- chip de convocatoria - */
/* 1.4.1 Uso da cor: forma + icone + palavra. Nunca so cor. */
.asa-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--asa-space-3xs);
  margin: 0 0 var(--asa-space-xs);
  padding: var(--asa-space-3xs) var(--asa-space-xs);
  border-radius: var(--asa-radius-full);
  font-size: var(--asa-text-sm);
  font-weight: 600;
}
.asa-chip--aberta {
  background: var(--asa-status-convocatoria-aberta-bg);
  color: var(--asa-status-convocatoria-aberta-text);
}
.asa-chip--aberta::before { content: "\25CF"; }
.asa-chip--encerrada {
  background: var(--asa-status-convocatoria-encerrada-bg);
  color: var(--asa-status-convocatoria-encerrada-text);
}
.asa-chip--encerrada::before { content: "\25A0"; }
.asa-chip--breve {
  background: var(--asa-status-convocatoria-em-breve-bg);
  color: var(--asa-status-convocatoria-em-breve-text);
}
.asa-chip--breve::before { content: "\25C6"; }

/* ------------------------------------------------------ tira parceiros ---- */

.asa-partners__title {
  letter-spacing: var(--asa-tracking-wide);
  text-transform: uppercase;
  color: var(--asa-text-on-narrative-muted);
  margin-block-end: var(--asa-space-xl);
}
.asa-partners__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Regra 2 da CMF: 250 px de largura minima. Em 375 px cabe UM por fila. */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  /* Regra 4: margem de seguranca igual a altura da composicao. */
  gap: var(--asa-space-2xl);
  justify-items: center;
  align-items: center;
}
.asa-partners__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 250px;
  min-height: var(--asa-field-min-target);
}
/* Os marcadores tracejados sairam: os logotipos reais estao no tema desde
   28-07. Altura igual para todos (regra 3 da CMF), largura conforme a marca. */
.asa-partners__logo {
  display: block;
  block-size: var(--asa-partner-logo-height);
  inline-size: auto;
  max-inline-size: 100%;
  object-fit: contain;
}
@media (min-width: 64rem) {
  .asa-partners__logo { block-size: var(--asa-partner-logo-height-wide); }
}
.asa-partners__link {
  display: flex;
  align-items: center;
  min-height: var(--asa-field-min-target);
}
.asa-partners__note {
  color: var(--asa-text-on-narrative-muted);
  margin-block-start: var(--asa-space-lg);
}
/* Os logotipos de terceiros vao na sua cor de marca. Nada de escala de cinzas
   nem de opacidade reduzida: seria alteracao de marca alheia e, no caso da CMF,
   incumprimento do manual. */
.asa-partners__list img { filter: none; opacity: 1; }

/* =========================================================================
   Correcoes a ficha de candidatura.

   IMPORTANTE — limite de alcance real: o plugin NAO tem via de override.
   Medido: `grep -c` por apply_filters, do_action e locate_template nos seis
   ficheiros de includes/ e templates/ devolve ZERO em todos, e o template e
   incluido por caminho absoluto em class-asa-plugin.php:209. Consequencia: SO
   as alteracoes de CSS tem caminho limpo. Tudo o que toque marcacao, texto ou
   logica e patch ao plugin — ver a guia, secao 6.
   ========================================================================= */

/* VISUAL-07 — em producao o limite dos campos mede 1.93:1. WCAG 1.4.11 exige
   >=3:1 para limites de componentes de interface. */
.asa-application :is(input, select, textarea) {
  border: var(--asa-border-field) solid var(--asa-field-border);
  border-radius: var(--asa-radius-md);
  background: var(--asa-field-bg);
  color: var(--asa-field-text);
  min-height: var(--asa-field-min-target);
  font-family: var(--asa-font-text);
  font-size: var(--asa-text-base);
}
.asa-application :is(input, select, textarea):hover { border-color: var(--asa-field-border-hover); }
.asa-application :is(input, select, textarea):focus { border-color: var(--asa-field-border-focus); }

/* A11Y-03 — em producao o texto dos placeholders mede 1.86:1. */
.asa-application ::placeholder { color: var(--asa-field-placeholder); opacity: 1; }

/* A11Y-02 — hoje ZERO aria-invalid em toda a ficha. Quando o plugin passar a
   emiti-lo, o estilo ja esta pronto. */
.asa-application [aria-invalid="true"] {
  border-color: var(--asa-feedback-error-border);
  border-width: var(--asa-border-thick);
}

/* FICHA-05 / A11Y-10 — o plugin declara um token de cor acessivel e depois nao
   o usa: o texto de ajuda sai a #7a8697 (3.69:1) e o resumo a #6b7a8d bold a
   9,5 px (4.38:1). Aqui passam a valores que cumprem AA. */
.asa-application .asa-help { color: var(--asa-field-help); font-size: var(--asa-text-sm); }
.asa-application .asa-summary__cards span { color: var(--asa-text-on-functional-muted); font-size: var(--asa-text-sm); }

/* VISUAL-01 / A11Y-08 — a ligacao da politica de privacidade fica a 1.10:1
   face ao texto envolvente e sem sublinhado, porque uma regra de cor do tema
   vence a do plugin por ordem de origem. O theme.json ja corrige o elemento
   `link` globalmente; esta regra garante a ficha mesmo se a pagina tiver cor
   de texto atribuida ao bloco no editor. */
.asa-application a {
  color: var(--asa-action-link-on-functional);
  text-decoration: var(--asa-action-link-decoration);
  text-underline-offset: 2px;
}

/* FICHA-06 / VISUAL-14 — CORRECAO a uma leitura inicial minha: a tabela do
   agregado E deslocavel (form.css:66 declara overflow-x:auto) e 1.4.10 Reflow
   exclui tabelas de dados. O defeito real e que NADA sinaliza que desliza.
   Pista de deslocamento por sombra, sem tocar na marcacao. */
.asa-application .asa-household-table-wrap {
  background:
    linear-gradient(to right, var(--asa-white) 30%, rgb(255 255 255 / 0)) left center,
    linear-gradient(to left, var(--asa-white) 30%, rgb(255 255 255 / 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgb(23 18 72 / 0.18), rgb(23 18 72 / 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgb(23 18 72 / 0.18), rgb(23 18 72 / 0)) right center;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
/* Ancora de leitura: a PRIMEIRA coluna acompanha as celulas.
   NAO thead sticky:top — o eixo aqui e horizontal, e o thead ja viaja com as
   suas colunas. Foi um erro apanhado na verificacao adversarial. */
@media (min-width: 768px) {
  .asa-application .asa-household-table th:first-child,
  .asa-application .asa-household-table td:first-child {
    position: sticky;
    left: 0;
    background: var(--asa-field-bg);
  }
}

/* A verificacao do prototipo mediu a caixa de consentimento a 13x13 px — o
   controlo mais importante da ficha, abaixo do minimo de 24 de 2.5.8. */
.asa-application input[type="checkbox"] {
  inline-size: var(--asa-space-md);
  block-size: var(--asa-space-md);
  accent-color: var(--asa-action-link-on-functional);
}
.asa-application label:has(input[type="checkbox"]) {
  display: flex;
  align-items: flex-start;
  gap: var(--asa-space-2xs);
  min-height: var(--asa-field-min-target);
}

/* Em producao o botao de remover do agregado mede 28x28. O projeto exige 44. */
.asa-application .asa-member__remove {
  min-width: var(--asa-field-min-target);
  min-height: var(--asa-field-min-target);
}

/* --------------------------------------------------------------- foco ----- */
/* Duas cores de anel, uma por superficie: nenhum ambar unico atinge >=3:1
   contra navy E branco ao mesmo tempo. Critério A5 exige foco sempre visivel. */
.asa-functional :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.asa-application :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--asa-focus-ring-width) solid var(--asa-focus-ring-color-on-functional);
  outline-offset: var(--asa-focus-ring-offset);
}
.asa-header :is(a, button, [tabindex]):focus-visible,
.asa-footer :is(a, button, [tabindex]):focus-visible,
.asa-programs :is(a, button, [tabindex]):focus-visible {
  outline: var(--asa-focus-ring-width) solid var(--asa-focus-ring-color-on-narrative);
  outline-offset: var(--asa-focus-ring-offset);
}

/* ---------------------------------------------------------- degradacao ---- */

@media (prefers-reduced-transparency: reduce) {
  .asa-header { background: var(--asa-glass-nav-fallback); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-contrast: more) {
  .asa-application :is(input, select, textarea) { border-width: var(--asa-border-thick); }
}
@media print {
  .asa-header, .asa-footer { background: var(--asa-white); color: var(--asa-text-on-functional); }
}

/* -------------------------------------------- nav de nove itens e redes ---- */

/* O tema pai colapsa a navegacao em overlay so abaixo de 600px. Com nove itens
   isso deixa 600-1023px com o menu na horizontal a transbordar — no protipo
   media 19px a mais e dava scroll horizontal a pagina inteira. O overlay
   estende-se ate 1023px, e a partir de 1024px abre na horizontal. */
@media (max-width: 1023px) {
  .asa-header .wp-block-navigation__responsive-container-open { display: flex; }
  .asa-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }
}

/* Redes sociais no rodape: o nome ao lado do icone, um por linha. Um glifo
   sozinho nao diz para onde leva, e e no rodape que se procura isso. */
.asa-social.wp-block-social-links {
  gap: var(--asa-space-2xs);
}
.asa-social .wp-block-social-link {
  margin: 0;
}
.asa-social .wp-block-social-link-label {
  clip: auto;
  clip-path: none;
  position: static;
  inline-size: auto;
  block-size: auto;
  margin-inline-start: var(--asa-space-2xs);
}
.asa-social .wp-block-social-link-anchor {
  display: inline-flex;
  align-items: center;
  min-height: var(--asa-field-min-target);
}

/* ------------------------------------------------------- assinatura -------- */

.asa-footer__regua {
  margin-block: var(--asa-space-xl) var(--asa-space-sm);
  border: none;
  border-block-start: var(--asa-border-hairline) solid var(--asa-glass-nav-border);
}
.asa-footer__base { gap: var(--asa-space-2xs) var(--asa-space-md); }
.asa-footer__base p { margin: 0; color: var(--asa-text-on-narrative-muted); }

/* ------------------------------------- a ficha nao se justifica ------------ */

/* O cliente pediu (2026-08) texto justificado, e prototipo.css passou a
   justificar `main p`, `main li`, `main dd` e `main blockquote` a partir de
   40rem. A plantilla page-ficha.html envolve a ficha num <main> — logo a regra
   apanharia tambem o formulario do plugin. Nao deve.
   Uma ficha nao e prosa corrida: sao rotulos, ajudas de uma linha, opcoes e
   celulas de tabela. Justificar uma frase de cinco palavras abre-lhe buracos, e
   nao ha coluna de leitura continua para alinhar em troca. Fica em bandeira.
   Ganha por especificidade (0,1,1 contra 0,0,2), e nao por ordem de ficheiro:
   prototipo.css e enfileirado DEPOIS destes overrides. */
.asa-application p,
.asa-application li,
.asa-application dd,
.asa-application label,
.asa-application legend,
.asa-application td,
.asa-application th {
  text-align: start;
}

/* ---------------------------- cartoes de noticia em blocos ---------------- */

/* O prototipo escreve o cartao de noticia a mao:
     <article class="p-post"> <a class="p-post__media"><img></a> <div class="p-post__corpo">…
   O WordPress gera o mesmo cartao com blocos, e a arvore nao e igual: os posts
   vem dentro de <ul class="wp-block-post-template"><li>, a imagem e uma
   <figure>, e a data, o titulo e o resumo trazem contentores proprios.
   Estas regras fazem a ponte, para nao existirem dois desenhos de cartao. */

.wp-block-post-template {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wp-block-post-template > li { margin: 0; }

/* A imagem de destaque e uma <figure>: sem isto traz a margem do nucleo e
   desalinha-se da coluna de texto. */
.p-post > .wp-block-post-featured-image { margin: 0; }
.p-post > .wp-block-post-featured-image a { display: block; }

/* O resumo e um <div> com um <p> dentro — a regra `main p` do prototipo.css
   justificava esse paragrafo. Num resumo de duas linhas a justificacao abre
   buracos, que e exactamente o caso que a excepcao de `.p-post__resumo` queria
   evitar; so que ali a classe fica no <div>, nao no <p>. */
.p-post__resumo p,
.p-post__meta time {
  margin: 0;
  text-align: start;
}

/* Espaco entre cartoes. No prototipo vem do `.p-news__feed`; aqui o
   post-template e quem empilha. */
.p-news__feed .wp-block-post-template > li + li { margin-block-start: var(--asa-space-lg); }

/* Paginacao: alinha com o resto e afasta-se do ultimo cartao. */
.wp-block-query-pagination { margin-block-start: var(--asa-space-xl); }