/*
Theme Name: Fontes Mídias
Theme URI: https://fontesmidias.com.br
Description: Tema filho do Hello Elementor, com a identidade visual da Fontes Mídias — a mesma do site em Astro que vive em lp.fontesmidias.com.br.
Author: Bruno Fontes
Template: hello-elementor
Version: 1.0.0
Text Domain: fontes-midias
*/

/*
 * Os tokens abaixo são os mesmos do site em Astro, para que as duas pontas
 * falem a mesma língua visual. Ficam como custom properties para que o
 * Elementor possa consumi-los nas configurações globais do site.
 */

:root {
  /* --- Cor: superfícies e texto --- */
  --fm-surface: #f4f5f2;
  --fm-surface-container: #eceee8;
  --fm-on-surface: #1a1c18;
  --fm-on-surface-variant: #4a5044;
  --fm-outline: #7a806f;
  --fm-outline-variant: #d5d8cf;

  /* --- Cor: marca --- */
  --fm-primary: #1e3a8a;
  --fm-on-primary: #ffffff;
  --fm-success: #3f6212;

  /* --- Tipografia --- */
  --fm-font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --fm-font-body:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
    sans-serif;
  --fm-font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas,
    monospace;

  --fm-tracking-label: 0.12em;
  --fm-leading-body: 1.6;

  /* --- Ritmo vertical ---
   * O site em Astro usa até 200px entre blocos. Aqui os valores são menores:
   * o Elementor já aplica o seu próprio espaçamento de seção, e somar os dois
   * produz vãos de página inteira.
   */
  --fm-space-xs: 8px;
  --fm-space-sm: 12px;
  --fm-space-md: 16px;
  --fm-space-lg: 24px;
  --fm-space-xl: 40px;
  --fm-space-2xl: 64px;

  --fm-largura-texto: 68ch;
  --fm-margem-lateral: clamp(20px, 5vw, 64px);

  /* Malha: a linha de 1px que amarra o site e o faz ler como prancha técnica. */
  --fm-grid: 40px;
  --fm-grid-line: #cdd2c6;
}

/*
 * Tema escuro.
 *
 * Declarado duas vezes de propósito, e a ordem importa:
 *
 * 1. Sob `prefers-color-scheme`, guardado por `:not([data-tema="light"])`, para
 *    que quem escolheu o claro não seja arrastado de volta pela preferência do
 *    sistema.
 * 2. Sob `[data-tema="dark"]`, para que a escolha manual vença nos dois
 *    sentidos.
 *
 * Sem o par, o alternador só funcionava numa direção — que era o defeito:
 * quem estava no escuro por preferência do sistema não conseguia sair dele.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema='light']) {
    --fm-surface: #12160f;
    --fm-surface-container: #1c211a;
    --fm-on-surface: #e2e4dd;
    --fm-on-surface-variant: #b9bfb2;
    --fm-outline: #8b917f;
    --fm-outline-variant: #333a2e;
    --fm-primary: #a8c7fa;
    --fm-on-primary: #0a2a5e;
    --fm-grid-line: #262b22;
  }
}

:root[data-tema='dark'] {
  --fm-surface: #12160f;
  --fm-surface-container: #1c211a;
  --fm-on-surface: #e2e4dd;
  --fm-on-surface-variant: #b9bfb2;
  --fm-outline: #8b917f;
  --fm-outline-variant: #333a2e;
  --fm-primary: #a8c7fa;
  --fm-on-primary: #0a2a5e;
  --fm-grid-line: #262b22;
}

body {
  background: var(--fm-surface);
  color: var(--fm-on-surface);
  font-family: var(--fm-font-body);
  line-height: var(--fm-leading-body);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--fm-font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--fm-on-surface);
}

/* Medida de leitura: linha longa demais cansa e derruba a compreensão.
   Aplicada só onde o contêiner não define a medida — dentro de cartão, grade
   ou herói a coluna já limita, e o limite extra quebrava o texto cedo demais. */
.fm-bloco > p:not([class]) {
  max-width: var(--fm-largura-texto);
}

a {
  color: var(--fm-primary);
}

/*
 * Rótulo em versalete monoespaçado — a marca visual mais reconhecível do site
 * em Astro. Disponível como classe para aplicar em qualquer widget do
 * Elementor pelo campo de classe CSS.
 */
.fm-rotulo {
  font-family: var(--fm-font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--fm-tracking-label);
  text-transform: uppercase;
  color: var(--fm-on-surface-variant);
}

/* Régua de 1px, o separador usado entre blocos no site em Astro. */
.fm-regra {
  border: 0;
  border-top: 1px solid var(--fm-outline-variant);
  margin-block: var(--fm-space-xl);
}

/*
 * Acessibilidade: o contorno de foco nunca é removido, e o alvo de toque tem
 * no mínimo 44px. As duas regras vêm do padrão já aplicado no site em Astro e
 * são o mínimo para WCAG AA.
 */
:focus-visible {
  outline: 2px solid var(--fm-primary);
  outline-offset: 2px;
}

a,
button,
input[type='submit'] {
  min-height: 44px;
}

@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;
  }
}