/*
 * Velzani Help Center — CSS das páginas públicas do CPT `help`.
 *
 * Enfileirado só em archive/single (`help-center.css`).
 * Não inclui o Beacon (ver `help-beacon.css`).
 *
 * Seções:
 *   1. Archive hub — atalhos, grade de categorias, bloco de contato
 *   2. Single — layout duas colunas, acordeão, sidebar de seções
 */

/* ==========================================================================
   1. Archive hub (`/central-atendimento/`)
   ========================================================================== */

/*
 * Escopo do hub. Define o accent Eleva e o tom suave usado em pills/CTAs.
 * Tipografia herda do tema ativo.
 */
.velzani-help-archive {
	--velzani-help-accent: var(--color-blue-eleva, #0d3340);
	--velzani-help-accent-soft: color-mix(in srgb, var(--velzani-help-accent) 12%, #fff);
	color: inherit;
	font: inherit;
}

/* “Voltar para a loja” no hero do archive e trilha da single */
.velzani-help-archive__back-link,
.velzani-help-single__crumb-link {
	color: inherit;
	text-decoration: none;
}

.velzani-help-archive__back-link:hover,
.velzani-help-archive__back-link:focus-visible,
.velzani-help-single__crumb-link:hover,
.velzani-help-single__crumb-link:focus-visible {
	color: var(--color-blue-eleva, #0d3340);
	outline: none;
}

/* --------------------------------------------------------------------------
   1.1 Atalhos (pills) — `$quick_links` no topo do archive
   -------------------------------------------------------------------------- */

/* Espaço abaixo da faixa de atalhos, antes da grade */
.velzani-help-archive__quick {
	margin: 0 0 1.75rem;
}

/* Lista horizontal com wrap; sem marcadores nativos */
.velzani-help-archive__quick-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
}

.velzani-help-archive__quick-item {
	margin: 0;
}

/* Pill: ícone + rótulo, fundo accent suave */
.velzani-help-archive__quick-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 1rem;
	border-radius: 999px;
	background: var(--velzani-help-accent-soft);
	color: var(--velzani-help-accent);
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	transition: background 0.15s ease, transform 0.15s ease;
}

.velzani-help-archive__quick-link:hover,
.velzani-help-archive__quick-link:focus-visible {
	background: color-mix(in srgb, var(--velzani-help-accent) 20%, #fff);
	color: var(--velzani-help-accent);
	outline: none;
}

/* Ícone Lucide do atalho */
.velzani-help-archive__quick-icon {
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 0;
	color: inherit;
}

.velzani-help-archive__quick-icon svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* Evita o texto estourar o pill em viewports estreitas */
.velzani-help-archive__quick-label {
	min-width: 0;
}

/* --------------------------------------------------------------------------
   1.2 Grade de categorias — cards ícone | título | chevron
   -------------------------------------------------------------------------- */

/*
 * Grid responsivo
 * 1 col → 2 (≥640) → 3 (≥900) → 4 (≥1100).
 */
.velzani-help-archive__list {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 1fr;
	margin: 0 0 2.5rem;
	padding: 0;
}

@media (min-width: 640px) {
	.velzani-help-archive__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.velzani-help-archive__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.velzani-help-archive__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Célula do grid; min-width evita overflow de conteúdo longo */
.velzani-help-archive__item {
	margin: 0;
	min-width: 0;
}

/*
 * Card clicável da categoria.
 * Hover: fundo azul bem claro, sem troca de cor e sem animação.
 */
.velzani-help-archive__link {
	--velzani-help-card-fg: #1f2933;
	--velzani-help-card-icon: var(--velzani-help-accent);
	--velzani-help-card-chevron: #9aa5b1;

	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	height: 100%;
	min-height: 3.5rem;
	padding: 0.85rem 1rem;
	background: #fff;
	border: 1px solid rgba(40, 74, 96, 0.12);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
	color: var(--velzani-help-card-fg);
	text-decoration: none;
}

.velzani-help-archive__link:hover,
.velzani-help-archive__link:focus-visible {
	background: var(--velzani-help-accent-soft);
	outline: none;
}

/* Ícone da categoria */
.velzani-help-archive__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	color: var(--velzani-help-card-icon);
	line-height: 0;
}

.velzani-help-archive__icon svg {
	width: 22px;
	height: 22px;
	display: block;
}

/* Título ocupa o espaço entre ícone e chevron */
.velzani-help-archive__title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: inherit;
}

/* Indicador de navegação à direita do card */
.velzani-help-archive__chevron {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	color: var(--velzani-help-card-chevron);
	line-height: 0;
}

.velzani-help-archive__chevron svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* --------------------------------------------------------------------------
   1.3 Bloco de contato — WhatsApp, e-mail, selo RA, horário
   -------------------------------------------------------------------------- */

/* Caixa centralizada abaixo da grade */
.velzani-help-archive__contact {
	margin: 0;
	padding: 1.75rem 1.25rem;
	background: #fff;
	border: 1px solid rgba(40, 74, 96, 0.1);
	border-radius: 16px;
	text-align: center;
}

/* Mesmo bloco na single (após layout Q&A + sidebar) */
.velzani-help-single .velzani-help-archive__contact {
	margin-top: 2.5rem;
}

.velzani-help-archive__contact-heading {
	margin: 0 0 1.15rem;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.35;
	color: #1f2933;
}

/* CTAs lado a lado (quebram em coluna no mobile via wrap) */
.velzani-help-archive__contact-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin: 0 0 1.35rem;
}

/* Botão de contato (mesmo tom suave dos pills) */
.velzani-help-archive__contact-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-width: min(100%, 16rem);
	padding: 0.85rem 1.25rem;
	border-radius: 12px;
	background: var(--velzani-help-accent-soft);
	color: var(--velzani-help-accent);
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.25;
	transition: background 0.15s ease, transform 0.15s ease;
}

.velzani-help-archive__contact-btn:hover,
.velzani-help-archive__contact-btn:focus-visible {
	background: color-mix(in srgb, var(--velzani-help-accent) 20%, #fff);
	color: var(--velzani-help-accent);
	transform: translateY(-1px);
	outline: none;
}

.velzani-help-archive__contact-btn-icon {
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 0;
}

.velzani-help-archive__contact-btn-icon svg {
	width: 20px;
	height: 20px;
	display: block;
}

/* Logo WhatsApp (fill); Lucide do e-mail continua com stroke */
.velzani-help-archive__contact-btn--whatsapp .velzani-help-archive__contact-btn-icon svg {
	fill: currentColor;
}

/* Selo Reclame Aqui (imagem do tema, se disponível) */
.velzani-help-archive__trust {
	margin: 0 0 0.85rem;
}

.velzani-help-archive__trust-link {
	display: inline-block;
	line-height: 0;
}

.velzani-help-archive__trust-img {
	display: inline-block;
	max-width: 140px;
	height: auto;
}

/* Texto de horário de atendimento */
.velzani-help-archive__hours {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.45;
	color: #5b6770;
}

/* --------------------------------------------------------------------------
   1.4 Acessibilidade / fallbacks do archive
   -------------------------------------------------------------------------- */

/*
 * Usuários com prefers-reduced-motion: remove motion residual de pills/CTAs.
 */
@media (prefers-reduced-motion: reduce) {
	.velzani-help-archive__quick-link,
	.velzani-help-archive__contact-btn {
		transition: none !important;
	}

	.velzani-help-archive__quick-link:hover,
	.velzani-help-archive__quick-link:focus-visible,
	.velzani-help-archive__contact-btn:hover,
	.velzani-help-archive__contact-btn:focus-visible {
		transform: none;
	}
}

/* Browsers sem color-mix: tom suave fixo próximo ao accent Eleva */
@supports not (background: color-mix(in srgb, #000 10%, #fff)) {
	.velzani-help-archive {
		--velzani-help-accent-soft: #e8eef2;
	}
}

/* ==========================================================================
   2. Single (`/central-atendimento/{slug}/`)
   Tipografia/cores herdam do tema; layout/acordeão/sidebar no plugin.
   ========================================================================== */

.velzani-help-single {
	--velzani-help-accent: var(--color-blue-eleva, #284a60);
	--velzani-help-accent-soft: color-mix(in srgb, var(--velzani-help-accent) 12%, #fff);
	color: inherit;
	font: inherit;
}

/*
 * Wrapper do layout (não vai no post_class): evita sidebar empilhada por
 * utilities Tailwind purgadas. Grid com !important garante duas colunas no desktop.
 */
.velzani-help-single__layout {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 1.75rem;
	align-items: start;
	width: 100%;
}

/* Coluna principal: Q&A em <details> */
.velzani-help-single__main {
	min-width: 0;
	grid-column: 1;
}

/* Sidebar: lista de seções (abaixo do conteúdo no mobile) */
.velzani-help-single__sidebar {
	min-width: 0;
	width: 100%;
	grid-column: 1;
	padding: 1.15rem 1.1rem;
	background: #fff;
	border: 1px solid rgba(40, 74, 96, 0.12);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* Desktop: conteúdo | sidebar sticky à direita */
@media (min-width: 900px) {
	.velzani-help-single__layout {
		grid-template-columns: minmax(0, 1fr) 17.5rem !important;
		gap: 2rem;
	}

	.velzani-help-single__main {
		grid-column: 1;
	}

	.velzani-help-single__sidebar {
		grid-column: 2;
		width: 17.5rem;
		position: sticky;
		top: 1.5rem;
	}
}

.velzani-help-single .page-header {
	margin-bottom: 1.5em;
}

/* Link “voltar” para o archive (se existir no markup) */
.velzani-help-single__back {
	margin: 0 0 1em;
}

/*
 * Trilha do hero. Mesma tipografia e cor do “Voltar para a loja” do archive:
 * texto claro, sem sublinhado, centralizada no mobile e à esquerda no desktop.
 */
.velzani-help-single__crumb {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	margin: 1rem 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: 1.4;
	color: inherit;
}

.velzani-help-single__crumb-sep {
	display: inline-flex;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
}

@media (min-width: 768px) {
	.velzani-help-single__crumb {
		justify-content: flex-start;
	}
}

/* Hero da single: ícone Lucide + título na mesma linha */
.velzani-help-single__title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin: 0.75rem 0 0;
	line-height: 1;
}

.velzani-help-single__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	color: var(--velzani-help-accent);
	line-height: 0;
}

.velzani-help-single__icon svg {
	width: 40px;
	height: 40px;
	display: block;
}

.velzani-help-single__title-text {
	min-width: 0;
	line-height: 1;
}

.velzani-help-single__subtitle {
	text-align: center;
}

/* Alinha título/subtítulo à esquerda a partir do breakpoint do tema */
@media (min-width: 768px) {
	.velzani-help-single__title {
		justify-content: flex-start;
	}

	.velzani-help-single__subtitle {
		text-align: left;
	}
}

/* --------------------------------------------------------------------------
   2.1 Acordeão — cards ícone/título/chevron (linguagem do archive hub)
   -------------------------------------------------------------------------- */

.velzani-help-single__items {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.velzani-help-single__item {
	margin: 0;
	background: #fff;
	border: 1px solid rgba(40, 74, 96, 0.12);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.velzani-help-single__item[open] {
	border-color: color-mix(in srgb, var(--velzani-help-accent) 40%, #fff);
	box-shadow: 0 4px 16px rgba(40, 74, 96, 0.1);
}

/* Summary clicável — marker nativo oculto; chevron custom à direita */
.velzani-help-single__question {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 1rem 1.1rem;
	cursor: pointer;
	font-weight: 700;
	color: #1f2933;
	list-style: none;
	transition: background 0.15s ease;
}

.velzani-help-single__question::-webkit-details-marker {
	display: none;
}

.velzani-help-single__question::marker {
	content: "";
}

.velzani-help-single__question:hover {
	background: color-mix(in srgb, var(--velzani-help-accent) 5%, #fff);
}

.velzani-help-single__question:focus-visible {
	outline: 2px solid var(--velzani-help-accent);
	outline-offset: -2px;
}

/* h2 semântico no summary — herda tipografia do summary */
.velzani-help-single__question-title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	font: inherit;
	font-size: 1.05rem;
	font-weight: inherit;
	color: inherit;
	line-height: 1.35;
}

/* Botão copiar âncora — só no HTML para usuários logados */
.velzani-help-single__copy {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.3rem;
	margin: 0;
	padding: 0.3rem 0.5rem;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #9aa5b1;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.velzani-help-single__item:hover .velzani-help-single__copy,
.velzani-help-single__item[open] .velzani-help-single__copy,
.velzani-help-single__copy:focus-visible {
	opacity: 1;
}

.velzani-help-single__copy:hover,
.velzani-help-single__copy:focus-visible {
	background: var(--velzani-help-accent-soft);
	color: var(--velzani-help-accent);
	outline: none;
}

.velzani-help-single__copy.is-copied {
	opacity: 1;
	color: var(--velzani-help-accent);
}

.velzani-help-single__copy-icon {
	display: inline-flex;
	line-height: 0;
}

.velzani-help-single__copy-icon svg {
	width: 15px;
	height: 15px;
	display: block;
}

.velzani-help-single__copy-label {
	display: none;
}

@media (min-width: 640px) {
	.velzani-help-single__copy-label {
		display: inline;
	}
}

.velzani-help-single__chevron {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	color: #9aa5b1;
	line-height: 0;
	transition: transform 0.22s ease, color 0.15s ease;
}

.velzani-help-single__chevron svg {
	width: 18px;
	height: 18px;
	display: block;
}

.velzani-help-single__item[open] .velzani-help-single__chevron {
	transform: rotate(180deg);
	color: var(--velzani-help-accent);
}

/* Resposta: usa a largura do card; line-height confortável */
.velzani-help-single__answer {
	padding: 0 1.1rem 1.15rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.65;
	color: #3d4a54;
}

.velzani-help-single__answer > *:first-child {
	margin-top: 0;
}

.velzani-help-single__answer > *:last-child {
	margin-bottom: 0;
}

.velzani-help-single__answer p {
	margin: 0 0 0.9em;
}

.velzani-help-single__answer ul,
.velzani-help-single__answer ol {
	margin: 0 0 0.9em;
	padding-left: 1.25em;
}

.velzani-help-single__answer li {
	margin: 0 0 0.35em;
}

.velzani-help-single__answer h3,
.velzani-help-single__answer h4 {
	margin: 1.15em 0 0.45em;
	font-weight: 700;
	color: #1f2933;
	line-height: 1.35;
}

.velzani-help-single__answer h3 {
	font-size: 1.1em;
}

.velzani-help-single__answer h4 {
	font-size: 1em;
}

.velzani-help-single__answer a {
	color: var(--velzani-help-accent);
}

/* --------------------------------------------------------------------------
   2.2 Sidebar — navegação entre seções publicadas
   -------------------------------------------------------------------------- */

.velzani-help-single__sidebar-title {
	margin: 0 0 0.85rem;
	font-size: 1rem;
	font-weight: 700;
	color: #1f2933;
}

.velzani-help-single__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.velzani-help-single__nav-item {
	margin: 0;
}

/*
 * Link da sidebar: hover com fundo azul bem claro, sem animação.
 */
.velzani-help-single__nav-link {
	--velzani-help-nav-fg: #3d4a54;
	--velzani-help-nav-icon: var(--velzani-help-accent);

	position: relative;
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.55rem 0.65rem;
	border-radius: 10px;
	text-decoration: none;
	color: var(--velzani-help-nav-fg);
}

.velzani-help-single__nav-link:hover,
.velzani-help-single__nav-link:focus-visible {
	background: var(--velzani-help-accent-soft);
	outline: none;
}

.velzani-help-single__nav-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 1.2em;
	height: 1.2em;
	color: var(--velzani-help-nav-icon);
	line-height: 0;
}

.velzani-help-single__nav-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.velzani-help-single__nav-label {
	min-width: 0;
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.3;
	color: inherit;
}

/* Seção atual — fundo suave */
.velzani-help-single__nav-link.is-current {
	background: var(--velzani-help-accent-soft);
	font-weight: 700;
	color: var(--velzani-help-accent);
	--velzani-help-nav-fg: var(--velzani-help-accent);
}

.velzani-help-single__nav-link.is-current:hover,
.velzani-help-single__nav-link.is-current:focus-visible {
	background: var(--velzani-help-accent-soft);
	color: var(--velzani-help-accent);
}

@media (prefers-reduced-motion: reduce) {
	.velzani-help-single__item,
	.velzani-help-single__question,
	.velzani-help-single__copy,
	.velzani-help-single__chevron {
		transition: none !important;
	}

	.velzani-help-single__item[open] .velzani-help-single__chevron {
		transform: none;
	}
}

@supports not (background: color-mix(in srgb, #000 10%, #fff)) {
	.velzani-help-single {
		--velzani-help-accent-soft: #e8eef2;
	}
}