/* =========================================================
   PAGES — PAGE-SPECIFIC STYLES
   =========================================================

   Estilos utilizados exclusivamente em páginas,
   templates ou secções específicas do projecto.

   Depende de:
   - tokens.css
   - base.css
   - layout.css
   - components.css

   Este ficheiro contém:
   - Estilos específicos da Home
   - Estilos específicos de páginas internas
   - Blog e archives
   - Single posts
   - Search
   - 404
   - Landing pages
   - Templates personalizados
   - Ajustes exclusivos de determinadas páginas

   Regra:
   Colocar aqui apenas estilos que não façam sentido
   como componente reutilizável.

   Sempre que um padrão puder ser reutilizado em várias
   páginas, mover esse estilo para components.css ou
   layout.css.

   Não colocar aqui:
   - Tokens
   - Estilos globais
   - Layout estrutural reutilizável
   - Utilities
   - Componentes reutilizáveis
   - Overrides de temas ou plugins

   Recomendação:
   Em projectos maiores, estilos específicos podem ser
   separados em ficheiros dentro de assets/css/pages/.
   ========================================================= */

/*
========================================================
01. HOME
========================================================

Reservado para estilos exclusivos da página inicial.

Exemplo de escopo recomendado:

.home .home-hero {}
.home .home-services {}
.home .home-about {}

Adicionar apenas quando necessário.
========================================================
*/

/*
========================================================
02. INTERNAL PAGES
========================================================

Reservado para estilos exclusivos de páginas internas.

Preferir classes específicas no body ou wrappers
próprios da página para evitar afectar outras áreas.

Exemplo:

.page-about {}
.page-services {}
.page-contact {}

Adicionar apenas quando necessário.
========================================================
*/

/*
========================================================
03. BLOG / ARCHIVES
========================================================

Reservado para estilos específicos de:
- Blog
- Category archives
- Tag archives
- Author archives
- Date archives

Componentes reutilizáveis de posts devem permanecer
em components.css.

Adicionar apenas quando necessário.
========================================================
*/

/*
========================================================
04. SINGLE
========================================================

Reservado para estilos específicos de conteúdos
individuais, como posts ou outros tipos de conteúdo.

Exemplo:

.single-post {}
.single-project {}

Adicionar apenas quando necessário.
========================================================
*/

/*
========================================================
05. SEARCH
========================================================

Reservado para estilos específicos da página
de resultados de pesquisa.

Adicionar apenas quando necessário.
========================================================
*/

/*
========================================================
06. 404
========================================================

/*
--------------------------------------------------------
LAYOUT
--------------------------------------------------------
*/

/*
--------------------------------------------------------
IMAGE
--------------------------------------------------------
*/

.error-404 .image_box img {
  display: block;
  max-width: 90%;
  height: auto;
  margin-inline: auto;
}

/*
--------------------------------------------------------
CONTENT
--------------------------------------------------------
*/

.error-404 .fourntcontent h1 {
  margin-bottom: var(--space-md);

  font-family: var(--font-heading);
  font-size: clamp(3.5rem, 6vw, 4.5rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);

  color: var(--text-heading);
}

.error-404 .fourntcontent h2 {
  margin-bottom: var(--space-md);

  font-family: var(--font-heading);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);

  color: var(--text-heading);
}

.error-404 .fourntcontent p {
  margin-bottom: var(--space-lg);

  color: var(--text-secondary);
}

/*
--------------------------------------------------------
SEARCH
--------------------------------------------------------
*/

/*
--------------------------------------------------------
ACTIONS
--------------------------------------------------------
*/

.error-404 .fourntcontent .theme_btn_all > .theme-btn.one {
  line-height: 50px;
}

/*
========================================================
07. LANDING PAGES
========================================================

Reservado para landing pages com necessidades
visuais ou estruturais específicas.

Sempre que possível, reutilizar componentes e
estruturas existentes antes de criar CSS exclusivo.

Adicionar apenas quando necessário.
========================================================
*/

/*
========================================================
08. CUSTOM TEMPLATES
========================================================

Reservado para templates personalizados do projecto.

Exemplo:

.template-full-width {}
.template-special {}

Adicionar apenas quando necessário.
========================================================
*/