/* ===================================================
   TorresUI — main.css
   Versão: estrutural pura (Elementor-First)

   REGRA: Este ficheiro NÃO define cores, fontes,
   tipografia, botões, backgrounds, transições nem
   larguras de container.
   Tudo isso é gerido pelo Elementor em:
   Site Settings → Global Colors / Global Fonts /
   Typography / Buttons / Background / Layout / etc.

   O que existe aqui:
   1. Reset de browser
   2. Compatibilidade Elementor
   3. Acessibilidade (skip link)
   4. Utilitários estruturais puros (grid, flex)
   5. Estrutura de templates PHP (blog/archive)
=================================================== */


/* --------------------------------------------------
   1. Reset de browser
   Normalização mínima — sem valores de design.
-------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* --------------------------------------------------
   2. Compatibilidade Elementor
   Previne overflow horizontal e conflitos de margin
   em páginas geridas pelo Theme Builder.
-------------------------------------------------- */

body.elementor-page {
  overflow-x: hidden;
}

.elementor-page .site {
  margin: 0;
  padding: 0;
}

.elementor-section {
  margin: 0;
}

.elementor-container {
  max-width: 100%;
}


/* --------------------------------------------------
   3. Acessibilidade — Skip link
   Permite navegação por teclado para o conteúdo
   principal. O Elementor não gere este elemento.
   Cores mínimas hardcoded para garantir contraste
   WCAG em qualquer tema visual.
-------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 1rem;
  z-index: 99999;
  padding: 0.5rem 1rem;
  text-decoration: none;
  /* Contraste seguro independente do tema Elementor */
  background: #000;
  color: #fff;
}

.skip-link:focus {
  left: 1rem;
}


/* --------------------------------------------------
   4. Utilitários estruturais
   Apenas propriedades de layout — sem cor, fonte
   ou qualquer valor de design.
-------------------------------------------------- */

/* Display */
.d-flex   { display: flex; }
.d-block  { display: block; }
.d-grid   { display: grid; }
.d-none   { display: none; }

/* Flex */
.items-center    { align-items: center; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-column     { flex-direction: column; }
.flex-wrap       { flex-wrap: wrap; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 2rem; }

/* Alinhamento de texto */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }

/* Largura */
.w-100 { width: 100%; }

/* Espaçamento */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 2rem; }
.p-1  { padding: 0.5rem; }
.p-2  { padding: 1rem; }
.p-3  { padding: 2rem; }

/* Grid responsivo — para template-parts PHP */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 900px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }
}


/* --------------------------------------------------
   5. Estrutura de templates PHP (blog / archive)
   Apenas layout estrutural — sem cor, fonte nem
   qualquer propriedade visual.
   Usado pelos templates index.php, single.php,
   archive.php e template-parts/blog/post-card.php.
   Páginas Elementor ignoram estes estilos.
-------------------------------------------------- */

/* Blog card — overflow estrutural */
.blog-card {
  overflow: hidden;
}

/* Post individual — largura de leitura */
.post-single {
  max-width: 720px;
  margin-inline: auto;
}

/* Espaçamento pós-header do post */
.post-meta {
  margin-bottom: 2rem;
}

/* Headings dentro do conteúdo — espaçamento top */
.post-content h2,
.post-content h3 {
  margin-top: 2rem;
}

/* Breadcrumbs — espaçamento estrutural */
.breadcrumbs,
.rank-math-breadcrumb p {
  margin-bottom: 1.5rem;
}