/*
 * Purilimp — camada de polish frontend
 * Motion, gradient mesh, corte diagonal, listas e detalhes.
 * Tokens (cor, tipografia, spacing, radius, shadow) vivem em theme.json.
 */

/* ---------------------------------------------------------------
   1. Base
--------------------------------------------------------------- */
:root {
	--purilimp-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Header, main e footer encostados, e secções dentro do main também —
   sem o block-gap global entre blocos de topo nem entre patterns
   (cada secção já traz o seu próprio padding e fundo). */
.wp-site-blocks > * + *,
.wp-site-blocks > main > * + * {
	margin-block-start: 0;
}

::selection {
	background: var(--wp--preset--color--lavender);
	color: var(--wp--preset--color--indigo-ink);
}

/* Foco acessível, coerente com a marca */
a:focus-visible,
button:focus-visible,
.wp-element-button:focus-visible,
summary:focus-visible,
input:focus-visible,
.wp-block-navigation-item__content:focus-visible {
	outline: 3px solid var(--wp--preset--color--indigo);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--sm);
}

/* ---------------------------------------------------------------
   2. Header
--------------------------------------------------------------- */
.purilimp-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--wp--preset--color--mist);
	backdrop-filter: saturate(180%) blur(8px);
}

.purilimp-header .wp-block-navigation-item__content {
	color: var(--wp--preset--color--indigo-ink);
	transition: color 0.2s var(--purilimp-ease);
}

.purilimp-header .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--indigo);
}

.purilimp-header .wp-element-button {
	transition: transform 0.2s var(--purilimp-ease), background-color 0.2s var(--purilimp-ease);
}

.purilimp-header .wp-element-button:hover {
	transform: translateY(-1px);
}

/* ---------------------------------------------------------------
   3. Botões — elevação suave, sombra tingida de índigo
--------------------------------------------------------------- */
.wp-element-button {
	transition: transform 0.2s var(--purilimp-ease), box-shadow 0.2s var(--purilimp-ease), background-color 0.2s var(--purilimp-ease);
	box-shadow: 0 4px 14px rgba(66, 81, 159, 0.18);
}

.wp-element-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(66, 81, 159, 0.28);
}

/* Botão outline (CTA secundário) — sem sombra a flutuar sobre fundo transparente */
.is-style-outline .wp-element-button {
	box-shadow: none;
	background-color: transparent;
}

.is-style-outline .wp-element-button:hover {
	box-shadow: none;
	background-color: rgba(66, 81, 159, 0.08);
}

/* ---------------------------------------------------------------
   4. Eyebrow + chips — o motivo "sparkle" da marca
--------------------------------------------------------------- */
.purilimp-eyebrow {
	margin-bottom: 0;
}

.purilimp-chip {
	display: inline-block;
	box-shadow: 0 2px 8px rgba(66, 81, 159, 0.08);
}

/* ---------------------------------------------------------------
   5. Hero — page-load orquestrado (staggered reveal)
--------------------------------------------------------------- */
.purilimp-hero {
	position: relative;
	overflow: clip;
}

/* Corte diagonal a dois tons — motivo do logótipo */
.purilimp-hero::after {
	content: "";
	position: absolute;
	right: -8%;
	bottom: -30%;
	width: 38vw;
	height: 38vw;
	max-width: 540px;
	max-height: 540px;
	background: linear-gradient(135deg, var(--wp--preset--color--lavender) 0%, var(--wp--preset--color--lavender) 50%, var(--wp--preset--color--peach) 50%, var(--wp--preset--color--peach) 100%);
	border-radius: 50%;
	opacity: 0.35;
	filter: blur(2px);
	pointer-events: none;
	z-index: 0;
}

.purilimp-hero > * {
	position: relative;
	z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.purilimp-hero .wp-block-column > * {
		animation: purilimp-rise 0.7s var(--purilimp-ease) both;
	}
	.purilimp-hero .wp-block-column:first-child > *:nth-child(1) { animation-delay: 0.05s; }
	.purilimp-hero .wp-block-column:first-child > *:nth-child(2) { animation-delay: 0.13s; }
	.purilimp-hero .wp-block-column:first-child > *:nth-child(3) { animation-delay: 0.21s; }
	.purilimp-hero .wp-block-column:first-child > *:nth-child(4) { animation-delay: 0.29s; }
	.purilimp-hero .wp-block-column:first-child > *:nth-child(5) { animation-delay: 0.37s; }
	.purilimp-hero .wp-block-column:first-child > *:nth-child(6) { animation-delay: 0.45s; }
	.purilimp-hero .wp-block-column:last-child { animation: purilimp-rise 0.8s var(--purilimp-ease) 0.3s both; }
}

@keyframes purilimp-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Imagem do hero com tratamento diagonal */
.purilimp-diagonal-img img {
	border-radius: var(--wp--custom--radius--xl);
}

/* ---------------------------------------------------------------
   6. Listas — checkmark e cruz com o sparkle da marca
--------------------------------------------------------------- */
.purilimp-list-check,
.purilimp-list-check-light,
.purilimp-list-x {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

.purilimp-list-check li,
.purilimp-list-check-light li,
.purilimp-list-x li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.65rem;
	line-height: 1.5;
}

.purilimp-list-check li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0.05em;
	width: 1.4rem;
	height: 1.4rem;
	display: grid;
	place-items: center;
	font-size: 0.8rem;
	font-weight: 800;
	color: #fff;
	background: var(--wp--preset--color--indigo);
	border-radius: 50%;
}

.purilimp-list-check-light li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0.05em;
	width: 1.4rem;
	height: 1.4rem;
	display: grid;
	place-items: center;
	font-size: 0.8rem;
	font-weight: 800;
	color: var(--wp--preset--color--indigo);
	background: var(--wp--preset--color--peach);
	border-radius: 50%;
}

.purilimp-list-x li::before {
	content: "×";
	position: absolute;
	left: 0;
	top: 0;
	width: 1.4rem;
	height: 1.4rem;
	display: grid;
	place-items: center;
	font-size: 1rem;
	font-weight: 800;
	color: var(--wp--preset--color--gray-500);
	background: var(--wp--preset--color--mist);
	border-radius: 50%;
}

/* ---------------------------------------------------------------
   7. Checklist mental (tese de adesão)
--------------------------------------------------------------- */
.purilimp-check {
	transition: transform 0.2s var(--purilimp-ease), box-shadow 0.2s var(--purilimp-ease);
}

.purilimp-check:hover {
	transform: translateX(4px);
	box-shadow: 0 6px 18px rgba(66, 81, 159, 0.1);
}

/* ---------------------------------------------------------------
   8. Passos do processo
--------------------------------------------------------------- */
.purilimp-step {
	align-items: flex-start;
	gap: 1.25rem;
	transition: transform 0.2s var(--purilimp-ease), box-shadow 0.2s var(--purilimp-ease);
}

.purilimp-step:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--md);
}

.purilimp-step__num {
	flex: 0 0 auto;
	min-width: 2.6rem;
	text-align: center;
	line-height: 1;
}

/* ---------------------------------------------------------------
   9. Cartões (colunas com fundo) — elevação no hover
--------------------------------------------------------------- */
.wp-block-column.has-background,
.wp-block-group.has-background.has-border-color {
	transition: transform 0.25s var(--purilimp-ease), box-shadow 0.25s var(--purilimp-ease);
}

.wp-block-columns .wp-block-column.has-cloud-background-color:hover,
.wp-block-columns .wp-block-column.has-white-background-color:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--lg);
}

/* ---------------------------------------------------------------
   9b. Grid de serviços (Query Loop) — cartões clicáveis de altura igual
--------------------------------------------------------------- */
.purilimp-services {
	gap: 1.25rem;
}

.purilimp-services > li {
	display: flex;
}

.purilimp-card {
	flex: 1;
	transition: transform 0.25s var(--purilimp-ease), box-shadow 0.25s var(--purilimp-ease), border-color 0.25s var(--purilimp-ease);
}

.purilimp-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--lg);
	border-color: var(--wp--preset--color--lavender) !important;
}

.purilimp-card .wp-block-post-excerpt {
	margin-top: 0;
}

.purilimp-readmore {
	margin-top: auto !important;
}

.purilimp-readmore a {
	text-decoration: none;
}

.purilimp-card:hover .purilimp-readmore a {
	text-decoration: underline;
}

/* ---------------------------------------------------------------
   9c. Barra lateral do blog
--------------------------------------------------------------- */
.purilimp-sidebar {
	position: sticky;
	top: 5.5rem;
}

.purilimp-sidebar__card {
	box-shadow: 0 2px 10px rgba(66, 81, 159, 0.05);
}

.purilimp-sidebar__title {
	color: var(--wp--preset--color--indigo);
	margin: 0;
}

/* Listas de categorias e últimos artigos */
.purilimp-sidebar__cats,
.purilimp-sidebar__latest {
	list-style: none;
	margin: 0;
	padding: 0;
}

.purilimp-sidebar__cats li,
.purilimp-sidebar__latest li {
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--wp--preset--color--mist);
	line-height: 1.4;
}

.purilimp-sidebar__cats li:last-child,
.purilimp-sidebar__latest li:last-child {
	border-bottom: 0;
}

.purilimp-sidebar__cats a,
.purilimp-sidebar__latest a {
	color: var(--wp--preset--color--indigo-ink);
	text-decoration: none;
	font-weight: 600;
}

.purilimp-sidebar__cats a:hover,
.purilimp-sidebar__latest a:hover {
	color: var(--wp--preset--color--indigo);
}

.purilimp-sidebar__latest .wp-block-latest-posts__post-date {
	display: block;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--wp--preset--color--gray-500);
	margin-top: 0.15rem;
}

/* Search dentro da sidebar */
.purilimp-sidebar .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--gray-300);
	background: var(--wp--preset--color--cloud);
}

.purilimp-sidebar__cta .wp-block-purilimp-bitrix24-form,
.purilimp-sidebar__form {
	font-size: 0.9rem;
}

/* Quando empilha em mobile, deixa de ser sticky */
@media (max-width: 781px) {
	.purilimp-sidebar {
		position: static;
	}
}

/* ---------------------------------------------------------------
   10. FAQ — details/summary
--------------------------------------------------------------- */
.purilimp-faq {
	transition: border-color 0.2s var(--purilimp-ease), box-shadow 0.2s var(--purilimp-ease);
	background: var(--wp--preset--color--white);
}

.purilimp-faq:hover {
	border-color: var(--wp--preset--color--lavender) !important;
}

.purilimp-faq[open] {
	border-color: var(--wp--preset--color--indigo) !important;
	box-shadow: 0 6px 20px rgba(66, 81, 159, 0.1);
}

.purilimp-faq summary {
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 2rem;
	color: var(--wp--preset--color--indigo-ink);
}

.purilimp-faq summary::-webkit-details-marker {
	display: none;
}

.purilimp-faq summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--wp--preset--color--indigo);
	transition: transform 0.2s var(--purilimp-ease);
}

.purilimp-faq[open] summary::after {
	content: "−";
}

.purilimp-faq p {
	margin-top: 0.75rem;
	color: var(--wp--preset--color--gray-500);
}

/* ---------------------------------------------------------------
   11. Tabela de comparação
--------------------------------------------------------------- */
.purilimp-compare table {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	border-collapse: separate;
	border-spacing: 0;
	background: var(--wp--preset--color--white);
}

.purilimp-compare thead th {
	background: var(--wp--preset--color--indigo);
	color: #fff;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	padding: 0.9rem 1rem;
	text-align: center;
}

.purilimp-compare thead th:first-child {
	text-align: left;
}

.purilimp-compare tbody td {
	padding: 0.8rem 1rem;
	text-align: center;
	border-bottom: 1px solid var(--wp--preset--color--mist);
}

.purilimp-compare tbody td:first-child {
	text-align: left;
	font-weight: 600;
	color: var(--wp--preset--color--indigo-ink);
}

.purilimp-compare tbody tr:last-child td {
	border-bottom: none;
}

.purilimp-compare tbody td strong {
	color: var(--wp--preset--color--indigo);
}

/* ---------------------------------------------------------------
   12. Footer
--------------------------------------------------------------- */
.purilimp-footer__list {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

.purilimp-footer__list li {
	margin-bottom: 0.5rem;
}

.purilimp-footer a {
	color: var(--wp--preset--color--lavender);
	text-decoration: none;
	transition: color 0.2s var(--purilimp-ease);
}

.purilimp-footer a:hover {
	color: var(--wp--preset--color--white);
}

/* ---------------------------------------------------------------
   13. Bitrix24 — placeholder gerido
--------------------------------------------------------------- */
.wp-block-purilimp-bitrix24-form:empty {
	min-height: 2rem;
}

/* ---------------------------------------------------------------
   14. Imagens — cantos suaves por defeito em conteúdo
--------------------------------------------------------------- */
.entry-content img,
.wp-block-post-content img {
	border-radius: var(--wp--custom--radius--md);
}

/* ---------------------------------------------------------------
   15. Reduced motion
--------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}