/* ==========================================================================
   Eesier Acordeão (design system component)
   Razor: Views/Shared/_Accordion.cshtml · Model: AccordionViewModel
   Documentação: /Design/Acordeao.

   Revelação progressiva de conteúdo de leitura (FAQ, detalhes, seções raras)
   sobre <details>/<summary> nativos — zero JS, teclado e leitores de tela de
   graça. Cada item é a folha do sistema; o cabeçalho é um controle de 48px e
   o chevron VIRA 180° ao abrir — o MESMO gesto de revelação das seções
   colapsáveis do formulário (a exceção de rotação da dobradiça, junto com o
   alternador de tema). Para seções DENTRO de um formulário, use as seções
   colapsáveis do próprio _Form — não este componente.

   Cores fluem dos tokens com fallback literal — este arquivo também é
   consumido standalone, sem site.css carregado.
   ========================================================================== */

.eesier-accordion {
    --eac-surface: var(--color-surface, #ffffff);
    --eac-border: var(--color-border, #e2e8f0);
    --eac-shadow: color-mix(in srgb, var(--color-text-dark, #0f172a) 8%, transparent);
    --eac-text: var(--color-text-dark, #0f172a);
    --eac-muted: var(--color-muted, #475569);
    --eac-active: var(--color-palette-primary, #1c91e4);

    display: flex;
    flex-direction: column;
    gap: var(--space-small, 12px);
    width: 100%;
}


.dark .eesier-accordion,
.eesier-accordion.dark {
    --eac-surface: var(--color-surface-dark, #101f38);
    --eac-border: var(--color-border-on-dark, rgba(255, 255, 255, 0.12));
    --eac-shadow: color-mix(in srgb, var(--color-canvas-dark, #0a1628) 48%, transparent);
    --eac-text: var(--color-text-on-dark, #ffffff);
    --eac-muted: var(--color-muted-on-dark, rgba(255, 255, 255, 0.6));
    --eac-active: var(--color-palette-secondary, #4fbefe);
}


/* ITEM — A FOLHA DO SISTEMA */

.eesier-accordion > .eesier-accordion-item {
    border: 1px solid var(--eac-border);
    border-radius: var(--radius-standard, 12px);
    background: var(--eac-surface);
    box-shadow: 0 var(--space-small, 12px) var(--space-medium, 24px) var(--eac-shadow);
}


/* CABEÇALHO — CONTROLE DE 48px; O RÓTULO À ESQUERDA, O CHEVRON NA BORDA DIREITA */

.eesier-accordion > .eesier-accordion-item > .eesier-accordion-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-small, 12px);
    min-height: var(--control-height, 48px);
    padding: var(--space-small, 12px) var(--space-medium, 24px);
    color: var(--eac-text);
    cursor: pointer;
    font-family: 'Quicksand', sans-serif;
    font-size: var(--type-size-small, 0.875rem);
    font-weight: 700;
    text-transform: lowercase;
    list-style: none;
    transition: color var(--motion-quick, 0.18s) var(--ease-state, ease-in-out);
    -webkit-user-select: none;
    user-select: none;
}


.eesier-accordion > .eesier-accordion-item > .eesier-accordion-summary::-webkit-details-marker {
    display: none;
}


@media (hover: hover) {

    .eesier-accordion > .eesier-accordion-item > .eesier-accordion-summary:hover {
        color: var(--eac-active);
    }
}


.eesier-accordion > .eesier-accordion-item > .eesier-accordion-summary:focus-visible {
    outline: 2px solid var(--eac-active);
    outline-offset: -2px;
    border-radius: var(--radius-standard, 12px);
}


/* A DOBRADIÇA — MESMO GESTO DAS SEÇÕES DO FORMULÁRIO: O CHEVRON VIRA 180° */

.eesier-accordion > .eesier-accordion-item > .eesier-accordion-summary > .eesier-accordion-chevron {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--eac-muted);
    transition: transform var(--motion-standard, 0.36s) var(--ease-travel, cubic-bezier(0.22, 1, 0.36, 1)), color var(--motion-quick, 0.18s) var(--ease-state, ease-in-out);
}


.eesier-accordion > .eesier-accordion-item[open] > .eesier-accordion-summary > .eesier-accordion-chevron {
    transform: rotate(180deg);
}


.eesier-accordion > .eesier-accordion-item > .eesier-accordion-summary > .eesier-accordion-chevron > .eicon {
    width: var(--space-small, 12px);
    height: var(--space-small, 12px);
}


/* CORPO — PROSA NA GRADE DE 24px, SEPARADO DO CABEÇALHO PELO VÉU */

.eesier-accordion > .eesier-accordion-item > .eesier-accordion-body {
    padding: var(--space-small, 12px) var(--space-medium, 24px) var(--space-medium, 24px);
    border-top: 1px solid color-mix(in srgb, var(--color-text-dark, #0f172a) 5%, transparent);
    color: var(--eac-muted);
    font-size: var(--type-size-small, 0.875rem);
    font-weight: 500;
    line-height: var(--space-medium, 24px);
}


.dark .eesier-accordion > .eesier-accordion-item > .eesier-accordion-body {
    border-top-color: color-mix(in srgb, var(--color-palette-secondary, #4fbefe) 5%, transparent);
}


@media (prefers-reduced-motion: reduce) {

    .eesier-accordion > .eesier-accordion-item > .eesier-accordion-summary > .eesier-accordion-chevron {
        transition: none;
    }
}