/*
 * Hehofaq — front-office styles
 *
 * Ported from the legacy Ebotic FAQ block (themes/Ebotic/assets/scss/product.scss).
 * All sizing in rem, all colors via hummingbird --heho-* tokens.
 * Accessible accordion built on native <details>/<summary> (no JS).
 */

.hehofaq {
    font-family: var(--heho-font-primary, inherit);
    color: var(--heho-color-text, inherit);
}

/* Section */
.hehofaq-section {
    margin-block-end: var(--heho-space-9, 3rem);
}

.hehofaq-section-title {
    font-size: var(--heho-font-size-2xl, 1.875rem);
    font-weight: var(--heho-font-weight-bold, 700);
    margin-block-end: var(--heho-space-5, 1.25rem);
    color: var(--heho-color-text);
}

/* TOC chips (pill style, matching legacy .faq-label) */
.hehofaq-toc {
    display: flex;
    flex-wrap: wrap;
    gap: var(--heho-space-3, 0.75rem);
    margin-block-end: var(--heho-space-7, 1.875rem);
}

.hehofaq-toc-link {
    display: inline-flex;
    align-items: center;
    padding: var(--heho-space-2, 0.5rem) var(--heho-space-5, 1.25rem);
    background: var(--heho-color-primary-light-2);
    color: var(--heho-color-primary);
    border-radius: var(--heho-radius-pill, 100vmax);
    font-size: var(--heho-font-size-sm, 0.875rem);
    font-weight: var(--heho-font-weight-bold, 700);
    text-decoration: none;
    transition: background var(--heho-transition-base, 200ms ease),
                color var(--heho-transition-base, 200ms ease);
}

.hehofaq-toc-link:hover,
.hehofaq-toc-link:focus-visible {
    background: var(--heho-color-primary);
    color: var(--heho-color-bg);
}

/* Accordion */
.hehofaq-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.9375rem; /* 15px — legacy spec */
}

.hehofaq-item {
    background: var(--heho-color-bg-soft);
    border-radius: var(--heho-radius-sm, 0.3125rem);

    transition: background var(--heho-transition-base, 200ms ease);
}

.hehofaq-question {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--heho-space-5, 1.25rem);
    padding: 1.5625rem 3.125rem; /* 25px 50px — legacy spec */
    font-weight: var(--heho-font-weight-bold, 700);
    font-size: var(--heho-font-size-base, 1rem);
    line-height: var(--heho-line-height-tight, 1.2);
    list-style: none;
    color: var(--heho-color-text);
    user-select: none;
}

/* Hide native disclosure marker */
.hehofaq-question::-webkit-details-marker { display: none; }
.hehofaq-question::marker { content: ''; }

.hehofaq-question-text {
    flex: 1 1 auto;
}

/* Chevron icon: primary-color circle with white chevron SVG */
.hehofaq-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.9375rem;  /* 31px */
    height: 1.9375rem;
    background: var(--heho-color-primary);
    border-radius: 50%;
    transition: transform var(--heho-transition-base, 200ms ease);
}

.hehofaq-icon svg {
    width: 0.8125rem; /* 13px */
    height: 0.4375rem; /* 7px */
    display: block;
}

.hehofaq-item[open] .hehofaq-icon {
    transform: rotate(180deg);
}

.hehofaq-question:focus-visible {
    outline: 0.125rem solid var(--heho-color-primary);
    outline-offset: 0.125rem;
}

/* Answer — smooth open/close via CSS Grid template-rows.
 * The wrapper transitions grid-template-rows 0fr ↔ 1fr; the inner cell clips
 * the answer's content with overflow:hidden. JS only intercepts CLOSING so the
 * [open] attribute stays alive until the transition ends. Opening is pure CSS. */
.hehofaq-answer-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 400ms cubic-bezier(.25, .8, .25, 1);
}

.hehofaq-item[open] > .hehofaq-answer-wrapper {
    grid-template-rows: 1fr;
}

.hehofaq-answer {
    overflow: hidden;
    padding-block: var(--heho-space-5, 1.25rem); /* 20px */
    padding-inline: 1.5625rem; /* 25px */
    background: var(--heho-color-bg);
    font-size: var(--heho-font-size-base, 1rem);
    line-height: 1.6;
    color: var(--heho-color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .hehofaq-answer-wrapper {
        transition: none;
    }
}

.hehofaq-answer > *:first-child { margin-block-start: 0; }
.hehofaq-answer > *:last-child { margin-block-end: 0; }

.hehofaq-answer a {
    color: var(--heho-color-primary);
}

.hehofaq-answer a:hover {
    color: var(--heho-color-primary-hover);
}

/* Empty state */
.hehofaq-empty {
    color: var(--heho-color-text-muted);
    font-style: italic;
}

/* Variant: standalone /faq page */
.hehofaq--standalone {
    max-width: 75rem;
    margin: 0 auto;
    padding-block: var(--heho-space-8, 2.5rem);
}

/* Variant: hook-rendered blocks (product, etc.) */
.hehofaq--hook {
    margin-block: var(--heho-space-8, 2.5rem);
}

/* Variant: companion sidebar card on auth pages */
.hehofaq-card {
    padding: var(--heho-space-5, 1.25rem);
    background: var(--heho-color-bg-soft);
    border-radius: var(--heho-radius-sm, 0.3125rem);
    margin-block-start: var(--heho-space-5, 1.25rem);
}

.hehofaq-card-title {
    font-size: var(--heho-font-size-md, 1.125rem);
    font-weight: var(--heho-font-weight-bold, 700);
    margin-block-end: var(--heho-space-4, 1rem);
    color: var(--heho-color-text);
}

.hehofaq-card .hehofaq-item {
    background: var(--heho-color-bg);
}

/* Mobile — match legacy ≤1024px breakpoint */
@media (max-width: 64rem) {
    .hehofaq-section-title {
        font-size: var(--heho-font-size-lg, 1.25rem);
    }

    .hehofaq-question {
        padding: var(--heho-space-5, 1.25rem);
    }

    .hehofaq-answer {
        padding-block: var(--heho-space-5, 1.25rem);
        padding-inline: var(--heho-space-5, 1.25rem);
    }
}

/* Pro variant — auto via [data-heho-theme="pro"] from heho.css. No overrides needed. */