/* ==========================================================================
   RETAIL4YOU — camada de compatibilidade WordPress / Elementor
   Carregada DEPOIS de tokens.css, base.css e sections.css.
   Só aqui é que se toca em selectores do Elementor ou do Hello Elementor.
   ========================================================================== */

/* --- Hello Elementor ------------------------------------------------------
   O tema-pai usa exactamente os mesmos nomes de classe que o nosso sistema —
   .site-header, .site-footer, .wrap e .site-main — e impõe-lhes largura
   máxima de 1140px, margens automáticas e display:flex. Sem isto o cabeçalho
   fixo fica com 1140px em vez da largura do ecrã e todos os .wrap passam a
   caixas flex, alinhando lado a lado o que devia ficar empilhado.
   ------------------------------------------------------------------------- */
/* O `body` à frente é de propósito: as regras do Hello vivem dentro de
   @media (base-desktop.css / base-mobile.css) e, com a mesma especificidade,
   ganhavam por ordem de carregamento. */
body .site-main,
body .page-content {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
}

body .site-header,
body .site-footer {
  display: block;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  box-shadow: none;
}

body .wrap {
  display: block;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
body .wrap--narrow { max-width: 980px; }

/* O reset acima também apanha os .wrap que são, ao mesmo tempo, grelha (a
   Afirmação) ou caixa flex (o hero). Sem repor aqui, a coluna lateral da
   Afirmação cai para debaixo do título e o texto do hero deixa de estar
   centrado na vertical. */
body .g12 { display: grid; }
@media (max-width: 880px) {
  body .g12 { grid-template-columns: minmax(0, 1fr); }
}

body .hero__wrap { display: flex; align-items: center; }

.site-header--hidden, .site-footer--hidden { display: none; }

/* --- Elementor ------------------------------------------------------------
   Cada secção é um container Elementor com um widget nosso lá dentro. O
   container não deve acrescentar nem largura nem padding — isso já vem do
   .section/.wrap. Sem isto ficam dois níveis de goteira e as colunas saem
   da régua. */
.elementor-section-wrap > .elementor-section,
.e-con.e-parent { --padding-inline-start: 0; --padding-inline-end: 0; }

.r4y-secao > .e-con-inner,
.r4y-secao.e-con > .e-con-inner { max-width: none; padding: 0; }

.elementor-widget-container > .section { margin: 0; }

/* O reset do Elementor força `white-space` e `line-height` nos botões e
   descola o nosso rótulo. Ver hello-elementor-reset-botao-rosa. */
.elementor a.btn,
.elementor button.btn {
  line-height: 1.2;
  text-decoration: none;
}
/* Esta regra existe para vencer o `a:hover` do tema-pai, e por isso tem peso a
   mais: vence também as variantes do botão. Tem de dizer exactamente o mesmo
   que o `.btn:hover` do base.css — daí o mesmo token. Escrever aqui uma cor
   fixa, ou `var(--btn-fg)`, deixa os botões claros sem rótulo no hover. */
.elementor a.btn:hover,
.elementor a.btn:focus { color: var(--btn-fg-hover, var(--btn-fg)); }

/* SVG do sprite: o Elementor mete `fill: currentColor` nos svg dos widgets e
   apaga o traço dos nossos ícones. Ver elementor-svg-fill-e-cor-de-link. */
.elementor svg.tick,
.elementor svg.btn__arrow,
.elementor .plano__list svg,
.elementor .nav-drawer__contactos svg { fill: none; }

/* --- Estado do formulário ------------------------------------------------ */
.form__status.is-ok { color: var(--gold); }
.form__status.is-erro { color: #ff9c8a; }

/* --- Rodapé: contactos e redes -------------------------------------------
   Só aparecem depois de preenchidos em RETAIL4YOU → Configurações. */
.site-footer__contactos { margin-top: 1.6rem; }
.site-footer__contactos li + li { margin-top: 0.1rem; }
.site-footer__contactos a {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.4rem 0;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 500;
}
.site-footer__contactos a:hover { color: var(--gold); }
.site-footer__contactos svg { flex: none; width: 14px; color: var(--gold); }

.site-footer__redes { display: flex; gap: 0.6rem; margin-top: 1.6rem; }
.site-footer__redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--ink-line);
  color: var(--on-ink-mute);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.site-footer__redes a:hover { color: var(--gold); border-color: var(--gold); }
.site-footer__redes svg { width: 17px; }

.site-footer__legal { padding-bottom: 1.6rem; max-width: 80ch; }

/* --- Barra de administração ---------------------------------------------- */
.admin-bar .site-header { top: 32px; }
.admin-bar .nav-drawer { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
  .admin-bar .nav-drawer { top: 46px; }
}

/* --- Editor do Elementor -------------------------------------------------
   Dentro do editor o cabeçalho fixo tapa o topo da primeira secção e as
   revelações por scroll não disparam. */
.elementor-editor-active .reveal { opacity: 1; transform: none; }
.elementor-editor-active .site-header { position: absolute; }
.elementor-editor-active .hero__wrap { min-height: 0; padding-top: 6rem; }