/*
Theme Name: Alves & Lisboa
Theme URI: https://alveselisboa.com.br
Author: Alves & Lisboa
Description: Tema institucional do escritório Alves & Lisboa — Advocacia Empresarial e Tributária. Recriação fiel do site (design Tailwind) com CPTs de Serviços e Segmentos, blog, formulários e SEO.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: alves-lisboa
*/

/* O CSS de apresentação está em assets/css/site.css (Tailwind compilado). */

/* ---- Carrossel de clientes (scroller horizontal real) ---- */
.al-carousel-viewport { overflow: hidden; }
.al-carousel-track {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 10px;
	margin-left: 0;
}
.al-carousel-track::-webkit-scrollbar { height: 6px; }
.al-carousel-track::-webkit-scrollbar-thumb { background: #d4d4ce; border-radius: 3px; }
.al-carousel-slide {
	flex: 0 0 auto;
	width: clamp(160px, 30%, 240px);
	scroll-snap-align: start;
	padding-left: 0;
}
@media (min-width: 768px) {
	.al-carousel-slide { width: clamp(200px, 22%, 260px); }
}
.client-carousel-arrow { cursor: pointer; }

/* ---- FAQ (acordeão para múltiplas perguntas) ---- */
.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-item { border-bottom: 1px solid #e0e0dc; padding: 0.9rem 0; }
.faq-item summary {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: #d10d12; font-size: 1.4rem; line-height: 1; }
.faq-item[open] summary::after { content: "–"; }
.faq-item > p { margin-top: 0.6rem; }

/* ---- Hero da home: destacar a foto das sócias (Jane) ----
   O bloco de texto (.hero-copy) caía na coluna estreita de 70px do grid
   (reservada ao detalhe decorativo), fazendo o título transbordar palavra a
   palavra por cima da foto. Colocamos o texto na coluna larga e reduzimos o
   título para que ele fique contido à esquerda, liberando a imagem. */
.hero-home .hero-copy {
	grid-column: 2;
}
/* Enquadramento do hero: baixar a imagem p/ o rosto das sócias não ficar sob o menu */
@media (min-width: 1025px) {
	.hero-home {
		background-position: 50% 22% !important;
	}
}
@media (min-width: 900px) {
	.hero-home .hero-content {
		grid-template-columns: 70px minmax(0, 560px);
	}
	.hero-home h1 {
		font-size: clamp(1.9rem, 2.7vw, 2.7rem);
		max-width: 560px;
	}
	.hero-home .hero-support p {
		max-width: 470px;
		font-size: 16px;
	}
}

/* ---- Botão flutuante do RD Station (WhatsApp): visual moderno ----
   Mantém o widget do próprio RD. O raio/cor do botão são forçados via JS
   inline !important (inc/tracking.php) porque o RD trava esses estilos sob um
   ID dinâmico; aqui cuidamos de sombra, pulso suave e hover, mirando as classes
   estáveis do RD. A animação com !important também anula o "shake" datado. */
.rdstation-popup-js-floating-button.bricks--floating--button {
	animation: al-fab-float 2.8s ease-out infinite !important;
	transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.rdstation-popup-js-floating-button.bricks--floating--button:hover {
	transform: translateY(-3px) scale(1.08) !important;
}
.rdstation-popup-js-floating-button.bricks--floating--button:active {
	transform: scale(0.95) !important;
}
@keyframes al-fab-float {
	0%   { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.20), 0 0 0 0 rgba(209, 13, 18, 0.55); }
	70%  { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.20), 0 0 0 13px rgba(209, 13, 18, 0); }
	100% { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.20), 0 0 0 0 rgba(209, 13, 18, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.rdstation-popup-js-floating-button.bricks--floating--button {
		animation: none !important;
		box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.20) !important;
	}
}

/* ---- Rodapé: contato (endereço + telefones) ---- */
/* Ícone e número sempre na MESMA linha (inclusive no mobile) */
.footer address a.footer-contact-link {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 8px;
}
.footer address a.footer-contact-link svg {
	flex: 0 0 auto;
}
/* Endereço: evita quebras feias. As unidades (Edifício JM600, cidades) usam
   nbsp no footer.php para nunca partir; aqui damos fonte e largura de coluna
   suficientes para caber em uma linha, degradando só em pontos limpos. */
.footer address p.footer-address {
	font-size: 12px;
	line-height: 1.6;
}
@media (min-width: 1024px) {
	/* Mais espaço para a coluna Contato (gap menor + coluna mais larga) */
	.footer-grid {
		grid-template-columns: 1.1fr 0.75fr 0.6fr 1.3fr;
		column-gap: 40px;
	}
}

/* ---- Canais com ícone (e-mail, telefone, WhatsApp) — contato e CTA ---- */
a.contact-channel {
	display: flex !important;
	align-items: center;
	gap: 10px;
}
a.contact-channel svg {
	flex: 0 0 auto;
	color: var(--red);
}
a.contact-channel strong {
	font-weight: 700;
}

/* ---- Artigos: imagem e título clicáveis (home) ---- */
a.home-article-image {
	display: block;
}
.home-article h3 a {
	color: inherit;
	text-decoration: none;
}
.home-article h3 a:hover {
	color: var(--red);
}

/* ---- Sobre nós: sócias em card compacto (foto + descrição lado a lado) ----
   Antes a imagem (aspect 2/3 a 100% da coluna) ficava gigante com texto seco
   embaixo. Agora foto menor ao lado do texto, cabendo foto + descrição juntas. */
.partner-portraits article {
	display: grid;
	grid-template-columns: clamp(120px, 30%, 185px) 1fr;
	gap: 24px;
	align-items: center;
}
.partner-portraits figure {
	width: 100%;
	background: none;
}
.partner-portraits img {
	aspect-ratio: 3 / 4;
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: center top;
	border-radius: 12px;
}
.partner-portraits h3 {
	margin: 0 0 10px;
	font-size: 1.2rem;
}
.partner-portraits p {
	font-size: 0.95rem;
	line-height: 1.6;
}
@media (min-width: 768px) {
	.partner-portraits {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}
}

/* ---- Botão "Enviar" dos formulários: usar o padrão vermelho do site
   (estava pegando o estilo cinza dos campos de input) ---- */
.wpcf7-submit,
.wpcf7 input[type="submit"],
.contact-form input[type="submit"] {
	background: var(--red) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 0 !important;
	min-height: 50px !important;
	width: max-content !important;
	max-width: 100% !important;
	padding: 13px 28px !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	cursor: pointer !important;
	transition: background 0.25s ease, transform 0.25s ease !important;
}
.wpcf7-submit:hover,
.wpcf7 input[type="submit"]:hover,
.contact-form input[type="submit"]:hover {
	background: #b00d11 !important;
	transform: translateY(-1px);
}

/* ---- Popup do RD Station: centraliza o texto do botão "Iniciar a conversa"
   (vinha alinhado ao topo porque o botão é flex com align-items:normal) ---- */
.rdstation-popup-js-submit-button.bricks--component-button {
	align-items: center !important;
	justify-content: center !important;
	line-height: 1.1 !important;
}

/* =====================================================================
   MOBILE — elegância e carrosséis (PDF mobile M1–M3)
   Mais respiro nas laterais, hero/títulos menores e listas em carrossel
   horizontal para o site não ficar longo verticalmente.
   ===================================================================== */
@media (max-width: 700px) {
	/* M2 — mais respiro nas laterais (era ~16px/lado) */
	.shell {
		width: min(100% - 44px, 1180px);
	}

	/* M1 — hero com título menor sobre as sócias */
	.hero h1 {
		font-size: 1.95rem;
		line-height: 1.08;
	}
	.hero-support p,
	.hero-content .scroll-reveal > p,
	.hero-lead {
		font-size: 15px;
	}

	/* M2 — reduzir um pouco os grandes títulos de seção */
	.reference-section-heading h2,
	.about-centered-heading h2,
	.tax-copy h2,
	.intro h2,
	.articles-heading h2 {
		font-size: clamp(1.6rem, 7vw, 2.1rem);
	}

	/* M3 — listas viram carrossel horizontal com "espiada" do próximo card */
	.service-grid,
	.sector-grid,
	.home-article-grid,
	.editorial-grid {
		display: flex;
		flex-wrap: nowrap;
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scroll-padding-left: 22px;
		padding-bottom: 14px;
		margin-bottom: 4px;
	}
	.service-grid > *,
	.sector-grid > *,
	.home-article-grid > *,
	.editorial-grid > * {
		flex: 0 0 82%;
		min-width: 0;
		scroll-snap-align: start;
	}
	/* barra de rolagem discreta (indica que dá pra arrastar) */
	.service-grid::-webkit-scrollbar,
	.sector-grid::-webkit-scrollbar,
	.home-article-grid::-webkit-scrollbar,
	.editorial-grid::-webkit-scrollbar {
		height: 5px;
	}
	.service-grid::-webkit-scrollbar-thumb,
	.sector-grid::-webkit-scrollbar-thumb,
	.home-article-grid::-webkit-scrollbar-thumb,
	.editorial-grid::-webkit-scrollbar-thumb {
		background: var(--red);
		border-radius: 3px;
	}
	.service-grid::-webkit-scrollbar-track,
	.sector-grid::-webkit-scrollbar-track,
	.home-article-grid::-webkit-scrollbar-track,
	.editorial-grid::-webkit-scrollbar-track {
		background: rgba(128, 128, 128, 0.2);
	}
}

/* ---- Banner de cookie (cookieconsent): garantir card branco + texto legível
   em qualquer tela (evita texto preto sumir sobre fundo escuro no mobile) ---- */
.cc-window.cc-color-override,
.cc-window.cc-floating {
	background-color: #ffffff !important;
	color: #1f201e !important;
	max-width: 360px;
}
.cc-window .cc-message {
	color: #1f201e !important;
}

/* ---- Rodapé: logo do parceiro Dr. Fiscal abaixo do Tax Group ---- */
/* Dr. Fiscal: mesma largura do Tax Group (herda .tax-lockup img), logo abaixo. */
.tax-lockup img.tax-lockup-partner {
	margin-top: 10px;
	opacity: 0.95;
}
@media (max-width: 700px) {
	.cc-window.cc-floating {
		max-width: calc(100% - 44px);
	}
}

/* telas bem pequenas: card ocupa um pouco mais */
@media (max-width: 420px) {
	.service-grid > *,
	.sector-grid > *,
	.home-article-grid > *,
	.editorial-grid > * {
		flex-basis: 86%;
	}
}