Coccolo – Canapé Modulable Enfant Premium

Description

/* Herda tipografia/cores do tema e evita conflitos com prefixo */
.t-accordion {
margin-block: 0.75rem;
border: 1px solid var(–color-border, color-mix(in srgb, currentColor 20%, transparent));
border-radius: var(–radius-base, 0.5rem);
overflow: hidden;
background: var(–color-bg, transparent);
}

.t-accordion__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
width: 100%;
padding: 0.75rem 1rem;
background: inherit;
color: inherit;
font: inherit;
line-height: inherit;
cursor: pointer;
border: 0;
appearance: none;
text-align: left;
}

.t-accordion__icon { transition: transform 0.25s ease; }

.t-accordion__content {
max-height: 0;
overflow: hidden;
padding: 0 1rem;
transition: max-height 0.3s ease-out, padding 0.3s ease-out;
background: inherit;
color: inherit;
font: inherit;
}

.t-accordion__content.is-open {
max-height: 1000px; /* alto para conteúdos longos */
padding: 0.75rem 1rem 1rem;
}

/* Respeita preferências de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
.t-accordion__icon,
.t-accordion__content { transition: none; }
}

/* Bloco de descrição: apenas espaçamento, sem estilos de fonte/cor */
.t-desc { margin-block-end: 1.25rem; }

document.addEventListener(‘DOMContentLoaded’, function () {
const accordions = document.querySelectorAll(‘.t-accordion’);

function closeAll() {
accordions.forEach(acc => {
const btn = acc.querySelector(‘.t-accordion__header’);
const content = acc.querySelector(‘.t-accordion__content’);
const icon = acc.querySelector(‘.t-accordion__icon’);
btn.setAttribute(‘aria-expanded’, ‘false’);
content.classList.remove(‘is-open’);
content.hidden = true;
if (icon) icon.textContent = ‘➕’;
});
}

accordions.forEach(acc => {
const btn = acc.querySelector(‘.t-accordion__header’);
const content = acc.querySelector(‘.t-accordion__content’);
const icon = acc.querySelector(‘.t-accordion__icon’);

btn.addEventListener(‘click’, () => {
const isOpen = btn.getAttribute(‘aria-expanded’) === ‘true’;
closeAll();
if (!isOpen) {
btn.setAttribute(‘aria-expanded’, ‘true’);
content.hidden = false; // revela antes da animação
requestAnimationFrame(() => content.classList.add(‘is-open’));
if (icon) icon.textContent = ‘➖’;
}
});
});
});