/* ============================================================
   LA VILLA RESIDENCIAL SÊNIOR — CSS do tema (enfileirado via functions.php)
   Complementa o theme.json: aqui vivem o efeito "photo-pop" (assinatura
   visual da marca), o ritmo entre seções, e ajustes de componentes que o
   theme.json não expressa sozinho.
   ============================================================ */

/* ---- Gotcha #2 do wp-fse-build: zera a margem padrão que o WordPress
   injeta entre todo bloco de topo, para que o ritmo entre seções seja
   inteiramente proposital (cada section já define seu próprio padding). ---- */
.wp-site-blocks > * {
  margin-block-start: 0;
}

/* ---- Hero: layout fluido (flex, não absolute-translateY) — o conteúdo fica
   em fluxo normal sobre imagem+scrim absolutos, então a seção cresce com o
   texto em qualquer viewport em vez de cortar o headline. ---- */
.hero-section {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(35rem, 100svh);
  overflow: hidden;
}
.hero-section .hero-bg-image {
  position: absolute;
  inset: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
.hero-section .hero-bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(44, 42, 38, 0.72) 0%, rgba(44, 42, 38, 0.25) 60%);
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 42.5rem;
  padding: clamp(1.5rem, 5vw, 3rem);
}
@media (max-width: 48rem) {
  /* Em telas estreitas o texto ocupa a largura toda — o scrim vira vertical
     para garantir contraste em toda a área do headline, não só à esquerda. */
  .hero-scrim {
    background: linear-gradient(180deg, rgba(44, 42, 38, 0.72) 0%, rgba(44, 42, 38, 0.4) 100%);
  }
}

/* ---- "Photo-pop": moldura sólida + sombra dura deslocada, radius zero.
   Assinatura visual mais distintiva da marca (confirmada verbatim em
   wp-content/uploads/elementor/css/post-101.css do site real). ---- */
.photo-pop {
  border-radius: var(--radius-none, 0);
  border: var(--border-width-photo, 6px) solid var(--wp--preset--color--white);
  box-shadow: -0.625rem 0.625rem 0.625rem 0px rgba(0, 0, 0, 0.5);
  display: block;
  max-width: 100%;
  height: auto;
}

.photo-pop-accent {
  border-radius: var(--radius-none, 0);
  border: var(--border-width-photo, 6px) solid var(--wp--preset--color--white);
  box-shadow: 0.625rem 0.625rem 1px 0px var(--wp--preset--color--secondary);
  display: block;
  max-width: 100%;
  height: auto;
}

@media (max-width: 48rem) {
  /* Sombras duras deslocadas reduzidas em telas estreitas para não vazarem
     do container quando o padding lateral encolhe. */
  .photo-pop {
    box-shadow: -0.375rem 0.375rem 0.5rem 0px rgba(0, 0, 0, 0.5);
  }
  .photo-pop-accent {
    box-shadow: 0.375rem 0.375rem 1px 0px var(--wp--preset--color--secondary);
  }
}

/* ---- Nav: CTA "Contato" em pill verde (confirmado contra screenshot real) ---- */
.site-header .nav-cta {
  background-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--white) !important;
  border-radius: 999px;
  padding: 0.625rem 1.5rem;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--tiny);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  transition: background-color var(--duration-standard, 300ms) var(--ease-standard, ease);
  display: inline-block;
}
.site-header .nav-cta:hover {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white) !important;
}

.site-header .wp-block-navigation a {
  text-transform: uppercase;
  font-size: var(--wp--preset--font-size--tiny);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--wp--preset--color--ink);
}

@media (max-width: 48rem) {
  /* Nav mobile: a busca some (o WP nav já colapsa em hambúrguer nativo via
     overlayMenu:"mobile"); logo + CTA pill continuam visíveis. */
  .site-header .nav-search-hint {
    display: none;
  }
  .site-header .nav-cta {
    padding: 0.5rem 1.125rem;
  }
}

/* ---- Ícones de badge (círculo/quadrado) que trocam laranja <-> verde no hover ---- */
.icon-feature .icon-badge {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  border-radius: var(--radius-md, 0.625rem);
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  margin: 0 auto 1rem;
  transition: background-color var(--duration-standard, 300ms) var(--ease-standard, ease);
}
.icon-feature:hover .icon-badge,
.icon-feature.is-secondary .icon-badge {
  background-color: var(--wp--preset--color--secondary);
}

/* ---- Footer: logo em branco, ícones de contato laranja ---- */
.site-footer {
  background-color: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--sand-sunken);
  padding: 3rem clamp(1rem, 3vw, 2rem) 1.5rem;
}
.site-footer .wp-block-site-logo img {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.site-footer .footer-contact-icon {
  color: var(--wp--preset--color--primary);
  margin-right: 0.5rem;
}
.site-footer .footer-copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--tiny);
}

/* ---- Botão outline (usado no hero sobre a foto) ---- */
.wp-block-button.is-style-outline-on-photo > .wp-block-button__link {
  color: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--white);
  background: transparent;
}
.wp-block-button.is-style-outline-on-photo > .wp-block-button__link:hover {
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--ink);
}

/* ---- Hero: parte do H1 no script de flourish (achado real no SQL:
   o widget original mistura Playfair Display + Fredericka the Great
   no mesmo título) ---- */
.hero-headline .hero-headline-script {
  font-family: var(--wp--preset--font-family--script);
  font-style: normal;
  font-weight: 400;
}

/* ---- Cards de serviço/depoimento: leve elevação ---- */
.service-card, .testimonial-card, .team-card {
  background: var(--wp--preset--color--white);
  border-radius: var(--radius-md, 0.625rem);
  box-shadow: 0 0.125rem 0.5rem rgba(44, 42, 38, 0.08), 0 0.0625rem 0.125rem rgba(44, 42, 38, 0.06);
}

/* ---- Scroll cue do hero ---- */
.hero-scroll-cue {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--wp--preset--color--white);
  opacity: 0.85;
  font-size: var(--wp--preset--font-size--tiny);
}