/*
 * Fase 1.1 — DOM único responsivo.
 * O site original duplicava cada seção (versão desktop + versão mobile).
 * As versões mobile foram removidas do HTML; esta folha adapta a árvore
 * desktop (agora única) às telas pequenas, replicando o desenho mobile
 * autorado onde ele existia e corrigindo o que nunca funcionou lá
 * (ex.: corpo dos posts, que não era renderizado no mobile original).
 * Carregada em todas as páginas pelo layout Base.astro.
 */
/* Headings de página promovidas de h2 → h1 (1 H1 por página, Fase 1.4):
   preserva a métrica do h2 original (line-height 1.3 vs 1.4 do h1). */
.elementor-element-015f388 h1.elementor-heading-title,
.elementor-element-f709f8e h1.elementor-heading-title,
.elementor-element-f295917 h1.elementor-heading-title,
.elementor-element-a67cf1a h1.elementor-heading-title,
.elementor-element-6250509 h1.elementor-heading-title {
  line-height: 1.3;
}

@media (max-width: 767px) {
  /* Header fixo (overlay) cobria o primeiro bloco de conteúdo quando alto;
     no mobile ele entra no fluxo normal da página. */
  [data-elementor-type="header"] {
    position: static !important;
  }

  /* Tabelas de conteúdo do blog roláveis, sem estourar a viewport. */
  .guardifai-table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }

  /* Tipografia do corpo dos artigos (o mobile original não renderizava o
     artigo; estes tamanhos são o desenho mobile do conteúdo restaurado). */
  .elementor-widget-theme-post-content h2 { font-size: 28px !important; line-height: 1.25 !important; }
  .elementor-widget-theme-post-content h3 { font-size: 23px !important; line-height: 1.3 !important; }
  .elementor-widget-theme-post-content h4 { font-size: 20px !important; line-height: 1.3 !important; }

  /* Home — "Trusted by 4,000+ users": efeito de texto em camadas (heading
     sólida puxada -97px sobre a heading colorida). Tamanho fixo garante a
     mesma quebra de linha nas duas camadas e o deslocamento realinhado. */
  .elementor-element-a8af1ae .elementor-heading-title,
  .elementor-element-f4c415c .elementor-heading-title {
    font-size: 38px !important;
    line-height: 1.2 !important;
  }
  .elementor-element-f4c415c > .elementor-widget-container {
    margin: -110px 0 18px 2px !important;
  }

  /* Home — Core Features: no desktop os títulos dos cards e as listas vivem
     em linhas separadas (headers row + items row). Reordena para
     [Security → itens de security → Performance → itens de performance]. */
  .elementor-element-eef821e,
  .elementor-element-dbe67e9 {
    display: contents !important;
  }
  .elementor-element-464ff5f {
    display: flex !important;
    flex-direction: column !important;
  }
  .elementor-element-111762a { order: 1; }
  .elementor-element-0624f2c { order: 2; }
  .elementor-element-7b8096e { order: 3; }
  .elementor-element-234296e { order: 4; }
  .elementor-element-73e77f1 { order: 5; }
  .elementor-element-ab4f81d { order: 6; }
  .elementor-element-7b8096e,
  .elementor-element-73e77f1 {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Cada lista de features: coluna de checkmarks + coluna de textos viram
     um grid de pares (checkmark | texto) por linha. */
  .elementor-element-85e1028,
  .elementor-element-08f0764,
  .elementor-element-a493b2c,
  .elementor-element-66077bc {
    display: contents !important;
  }
  .elementor-element-234296e,
  .elementor-element-ab4f81d {
    display: grid !important;
    grid-template-columns: 2.2rem 1fr;
    align-items: center;
    column-gap: 0.6rem;
    row-gap: 0.9rem;
  }
  .elementor-element-234296e .elementor-widget-image:nth-of-type(1),
  .elementor-element-ab4f81d .elementor-widget-image:nth-of-type(1) { grid-row: 1; grid-column: 1; }
  .elementor-element-234296e .elementor-widget-image:nth-of-type(2),
  .elementor-element-ab4f81d .elementor-widget-image:nth-of-type(2) { grid-row: 2; grid-column: 1; }
  .elementor-element-234296e .elementor-widget-image:nth-of-type(3),
  .elementor-element-ab4f81d .elementor-widget-image:nth-of-type(3) { grid-row: 3; grid-column: 1; }
  .elementor-element-234296e .elementor-widget-heading:nth-of-type(1),
  .elementor-element-ab4f81d .elementor-widget-heading:nth-of-type(1) { grid-row: 1; grid-column: 2; }
  .elementor-element-234296e .elementor-widget-heading:nth-of-type(2),
  .elementor-element-ab4f81d .elementor-widget-heading:nth-of-type(2) { grid-row: 2; grid-column: 2; }
  .elementor-element-234296e .elementor-widget-heading:nth-of-type(3),
  .elementor-element-ab4f81d .elementor-widget-heading:nth-of-type(3) { grid-row: 3; grid-column: 2; }
}

/* ===== Fase 2 — elementos novos em páginas blob ===== */
/* Botão "Start Free" do header (ao lado do LOGIN) — primário da marca */
.gfai-start-free .elementor-button {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: 21px;
  font-family: var(--font-sans);
}
.gfai-start-free .elementor-button:hover,
.gfai-start-free .elementor-button:focus {
  background: var(--color-primary-hover);
  color: var(--color-on-primary);
}
.gfai-start-free { margin-left: 10px; }

/* LOGIN do header: o Elementor pinta texto branco sobre o pill sky (1.9:1
   reprova WCAG). Regra da marca: sky nunca com texto claro → texto navy. */
.elementor-element-0e265e5 .elementor-button,
.elementor-element-0e265e5 .elementor-button:hover,
.elementor-element-0e265e5 .elementor-button:focus {
  color: var(--brand-700);
}

/* Botão secundário "See pricing" do hero da home */
.gfai-see-pricing > .elementor-widget-container { margin: 12px 0 0 67px; }
.gfai-see-pricing .elementor-button {
  background: transparent;
  color: var(--dark-text);
  border: 2px solid var(--color-accent);
  border-radius: 21px;
  font-family: var(--font-sans);
  font-size: 20px;
}
.gfai-see-pricing .elementor-button:hover,
.gfai-see-pricing .elementor-button:focus {
  background: var(--color-accent);
  color: var(--brand-700);
}
@media (max-width: 767px) {
  .gfai-see-pricing > .elementor-widget-container { margin-left: 0; }
}

/* Interlink no fim dos posts */
.gfai-interlink { margin-top: 28px; font-weight: 600; }