/*
Theme Name: Rosy Finch Child
Theme URI:  https://rosyfinchmc.com/
Description: Child theme do Astra para o refresh do site Rosy Finch Method & Co.
Author:     Holix
Template:   astra
Version:    1.1.0
Text Domain: rfmc-child
*/

/* ==========================================================================
   Fonte "Stack Sans Headline" — auto-hospedada (Fase 2)
   Variable font (eixo de peso 200–700). Um arquivo por subset cobre todos
   os pesos, então H2/H3 Bold (700) e corpo Regular (400) usam o mesmo VF.
   Baixada do Google Fonts para servir localmente (performance + LGPD).
   ========================================================================== */
@font-face {
  font-family: 'Stack Sans Headline';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('assets/fonts/StackSansHeadline-VF-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Stack Sans Headline';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('assets/fonts/StackSansHeadline-VF-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Fonte "DM Serif Display" Italic — auto-hospedada
   Usada nos numerais dos cards "Our Approach" (Figma 10:83). Google Font,
   baixada para servir localmente como a Stack Sans.
   ========================================================================== */
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/DMSerifDisplay-Italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/DMSerifDisplay-Italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Design tokens (extraídos do Figma — ver GUIA-DESENVOLVIMENTO-RFMC.md)
   ========================================================================== */
:root {
  --rf-cream: #fffefb;
  --rf-warm-gray: #f4f2f0;
  --rf-pink: #e9739e;
  --rf-mauve: #8d627b;
  --rf-teal: #135870;
  --rf-aqua: #80bfc8;
  --rf-charcoal: #414141;
  --rf-pink-tint: #d9b4c6;
  --rf-radius-card: 40px;
  --rf-radius-pill: 100px;
}

/* ==========================================================================
   Fase 5 — Ajustes finos de componentes
   Regra do projeto: toda cor vem de var(--rf-*); classes utilitárias com
   prefixo rf-. Evitamos !important — a especificidade é controlada para não
   brigar com os ajustes por widget da Fase 6 (Elementor).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Botões — ESTRATÉGIA: a cor/padding dos botões existentes é limpa no
   Elementor (Fase 6), fazendo cada widget usar Global > Primary. Aqui NÃO
   sobrescrevemos .elementor-button genérico (perderia em especificidade e
   brigaria com a Fase 6). Fornecemos apenas classes utilitárias opt-in que
   você aplica ao widget quando quiser o estilo do Figma sem passar pelo
   editor.
   -------------------------------------------------------------------------- */

/* Botão primário Figma (pílula rosa) — aplicar a classe rf-btn ao widget. */
.rf-btn.elementor-button,
.rf-btn.ast-button,
a.rf-btn,
.rf-btn .elementor-button {
  background-color: var(--rf-pink);
  color: #fff;
  border-radius: var(--rf-radius-pill);
  padding: 21px 42px;
  border: 0;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.rf-btn.elementor-button:hover,
.rf-btn.elementor-button:focus,
a.rf-btn:hover,
a.rf-btn:focus,
.rf-btn .elementor-button:hover,
.rf-btn .elementor-button:focus {
  background-color: var(--rf-mauve);
  color: #fff;
}

/* Variante contornada (botão secundário) — classe rf-btn-outline */
.rf-btn-outline.elementor-button,
a.rf-btn-outline,
.rf-btn-outline .elementor-button {
  background-color: transparent;
  color: var(--rf-pink);
  border: 1px solid var(--rf-pink);
}
.rf-btn-outline.elementor-button:hover,
a.rf-btn-outline:hover,
.rf-btn-outline .elementor-button:hover {
  background-color: var(--rf-pink);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Cards — Figma: fundo rosa empoeirado, raio 40px (interno 28px).
   Classe utilitária: aplicar rf-card ao wrapper do widget/coluna na Fase 6.
   -------------------------------------------------------------------------- */
.rf-card {
  background-color: var(--rf-pink-tint);
  border-radius: var(--rf-radius-card);
  padding: 32px;
}
.rf-card .rf-card__inner {
  border-radius: 28px;
}

/* Variantes de fundo de card (paleta de apoio) */
.rf-card--cream { background-color: var(--rf-cream); }
.rf-card--gray  { background-color: var(--rf-warm-gray); }
.rf-card--aqua  { background-color: var(--rf-aqua); }
.rf-card--teal  { background-color: var(--rf-teal); color: #fff; }

/* --------------------------------------------------------------------------
   Pílula / tag — Figma: contorno mauve, texto mauve, totalmente arredondada.
   Classe utilitária: rf-pill.
   -------------------------------------------------------------------------- */
.rf-pill {
  display: inline-block;
  border: 1px solid var(--rf-mauve);
  border-radius: var(--rf-radius-pill);
  color: var(--rf-mauve);
  padding: 13.55px 28px;
  font-weight: 400;
  line-height: 1.3;
}
.rf-pill--filled {
  background-color: var(--rf-mauve);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Utilitários de cor (texto/fundo) — para ajustes pontuais na Fase 6 sem
   cravar hex nos widgets.
   -------------------------------------------------------------------------- */
.rf-text-pink     { color: var(--rf-pink); }
.rf-text-mauve    { color: var(--rf-mauve); }
.rf-text-teal     { color: var(--rf-teal); }
.rf-text-charcoal { color: var(--rf-charcoal); }
.rf-bg-cream      { background-color: var(--rf-cream); }
.rf-bg-gray       { background-color: var(--rf-warm-gray); }
.rf-bg-pink-tint  { background-color: var(--rf-pink-tint); }

/* --------------------------------------------------------------------------
   Hero "gradient-text" — a classe .gradient-text vinha de um CSS de produção
   que NÃO foi importado, então o título do hero caía em #F7F7F7 (quase
   invisível sobre fundo claro). No Figma o hero é mauve sólido. Reaplicamos
   a cor da marca. (Se o cliente quiser o gradiente rosa→mauve do branding,
   trocar o `color` por um background-clip:text — deixado sólido por ora.)
   -------------------------------------------------------------------------- */
.gradient-text,
.gradient-text * {
  color: var(--rf-mauve) !important;
  -webkit-text-fill-color: var(--rf-mauve);
}

/* --------------------------------------------------------------------------
   Botão "voltar ao topo" do Astra — vinha roxo (#b841f8) do Astra Customizer
   (tema pai). Alinhamos à paleta da marca. Elemento pequeno, visível em todas
   as páginas; override no child mantém a mudança versionada em git.
   -------------------------------------------------------------------------- */
#ast-scroll-top,
#ast-scroll-top:hover,
#ast-scroll-top:focus {
  background-color: var(--rf-pink);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Hero (Home) — medidas do Figma (node 5:213)
   Subtítulo limitado a 906px para quebrar em 2 linhas como no layout.
   -------------------------------------------------------------------------- */
.rf-hero-sub {
  max-width: 906px;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   Text Editor — o Astra aplica margin-bottom 1.2em em todo <p>; dentro do
   widget de texto do Elementor isso soma ~19px no fim de cada card e quebra
   as alturas do Figma (ex.: cards "Our Approach" 438px). Zeramos só o último
   parágrafo, que é o comportamento padrão do Elementor.
   -------------------------------------------------------------------------- */
.elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Cards de logo — "Our Collaborations" (Home, Figma 30:1456)
   Grade 5 colunas, células de 181.6px com o logo centralizado; fundo, borda e
   raio vêm das configurações do widget. Classe aplicada ao widget de imagem.
   -------------------------------------------------------------------------- */
.rf-logo-card {
  height: 181.6px;
  box-sizing: border-box;
}
.rf-logo-card > .elementor-widget-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rf-logo-card img {
  max-height: 140px;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  flex: 0 0 auto;      /* Safari/iOS: evita esmagar a imagem dentro do flex */
  align-self: center;
}

/* --------------------------------------------------------------------------
   Newsletter (Blog hero, Figma 48:1241) — form 984px: input 548 + gap 24 +
   botão 412. As colunas do Elementor só oferecem 60/40; aqui cravamos a
   proporção exata (colunas incluem metade do gap de cada lado). Só desktop.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .rf-newsletter-form .elementor-field-group.elementor-field-type-email  { width: 56.75%; }
  .rf-newsletter-form .elementor-field-group.elementor-field-type-submit { width: 43.25%; }
}

/* --------------------------------------------------------------------------
   Menu — item "Podcast" fica visível mas sem destino (decisão do design):
   link customizado "#" com esta classe; sem clique, sem cursor de link.
   -------------------------------------------------------------------------- */
.rf-menu-disabled > a {
  pointer-events: none;
  cursor: default;
}

/* --------------------------------------------------------------------------
   Equipe (About, Figma 37:73) — foto quadrada 1:1 recortada em círculo,
   ocupando a largura da célula do grid (4 colunas, gap 32).
   -------------------------------------------------------------------------- */
.rf-team-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 20%; /* fotos em retrato: prioriza o rosto */
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   Carrossel "Our Services" (tablet/mobile) — os slides do Swiper já esticam
   até o mais alto, mas o card colorido dentro do slide tinha flex-grow 0 e
   ficava com a altura do próprio texto (cards desalinhados, QA do PO 15/09).
   O card cresce até a altura do slide e a pílula fica alinhada no rodapé.
   Classe aplicada ao widget Nested Carousel: rf-services-carousel.
   -------------------------------------------------------------------------- */
.rf-services-carousel .swiper-slide > .e-con > .e-con {
  flex-grow: 1;
}
.rf-services-carousel .swiper-slide > .e-con > .e-con > .e-con:first-child {
  flex-grow: 1;
}

/* --------------------------------------------------------------------------
   Grade de posts (Home e Blog, skin "cards") — cards alinhados por linha em
   qualquer navegador: grade explícita, card ocupa a célula inteira, o
   resumo absorve a sobra e o "Read more" fica na mesma altura em todos os
   cards da linha; a data já é o rodapé do card. margin-top zerado neutraliza
   qualquer resquício de masonry. Classe no widget Posts: rf-posts-aligned.
   -------------------------------------------------------------------------- */
.rf-posts-aligned .elementor-posts-container.elementor-grid {
  display: grid;
  align-items: stretch;
}
.rf-posts-aligned .elementor-posts-container .elementor-post {
  display: flex;
  margin-top: 0 !important;
}
.rf-posts-aligned .elementor-post__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.rf-posts-aligned .elementor-post__text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.rf-posts-aligned .elementor-post__excerpt {
  flex-grow: 1;
}

/* --------------------------------------------------------------------------
   Seleção de texto — o navegador usava o highlight padrão (roxo/azul).
   Pedido do design (2026-09-18): seleção em mauve com texto branco.
   -------------------------------------------------------------------------- */
::selection {
  background-color: var(--rf-mauve);
  color: #fff;
  -webkit-text-fill-color: #fff;
}
::-moz-selection {
  background-color: var(--rf-mauve);
  color: #fff;
}
/* Em fundos escuros/saturados (mauve, teal, pink) a seleção mauve sumia.
   Esquema invertido: destaque cream com texto mauve. Classe rf-on-dark nos
   containers com esses fundos (Approach, "We achieve", CTA, heros de Press/
   Blog/Contact, cards teal e pink de Services). */
.rf-on-dark ::selection,
.rf-on-dark::selection {
  background-color: var(--rf-cream);
  color: var(--rf-mauve);
  -webkit-text-fill-color: var(--rf-mauve);
}
.rf-on-dark ::-moz-selection,
.rf-on-dark::-moz-selection {
  background-color: var(--rf-cream);
  color: var(--rf-mauve);
}

/* --------------------------------------------------------------------------
   Vídeos administráveis (Appearance → Site Videos; inc/videos.php).
   Substituem os placeholders cinzas 830×433 da Home e do Case Studies. Os
   shortcodes não imprimem nada sem vídeo, então nenhum espaço sobra na página.
   -------------------------------------------------------------------------- */
.rf-hero-video {
  width: 100%;
  max-width: 830px;
  margin: 0 auto 32px;
}
.rf-hero-video__el {
  display: block;
  width: 100%;
  /* 16:9 (o placeholder do Figma era 830×433 ≈ 1.92:1, o que cortava o topo e
     a base do vídeo). contain garante o quadro inteiro para qualquer proporção. */
  aspect-ratio: 16 / 9;
  height: auto;
  background-color: var(--rf-charcoal);
  object-fit: contain;
}

/* O widget Shortcode dentro de container flex centralizado encolhe para o
   conteúdo; forçamos largura total para o vídeo poder chegar aos 830px. */
.elementor-widget-shortcode:has(> .elementor-widget-container > .rf-hero-video),
.elementor-widget-shortcode:has(> .elementor-widget-container > .rf-case-videos) {
  width: 100%;
}

.rf-case-videos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}
.rf-case-video {
  width: 100%;
  max-width: 830px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.rf-case-video__title {
  margin: 0;
  min-height: 73.6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 21px;
  font-size: 24px;
  font-weight: 400;
  line-height: 20.4px;
  color: var(--rf-mauve);
  text-align: center;
}
.rf-case-video__frame {
  width: 100%;
  aspect-ratio: 16 / 9; /* player do YouTube é 16:9; em 830×433 sobravam barras pretas */
  background-color: var(--rf-charcoal);
}
.rf-case-video__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 1024px) {
  .rf-case-video { max-width: 90%; }
}
@media (max-width: 767px) {
  .rf-case-video { max-width: 100%; }
}