/* ─── Accordion ─────────────────────────────────────────────────────────────
   Native <details>/<summary> — JS-free by default. accordion.js powers the
   two opt-in enhancements (exclusive-open groups, expand/collapse-all
   button); the [hzo_accordion] shortcode (accordion.php) generates the same
   data-attribute contract. The loader enqueues ONLY accordion.css, so the
   motion pack rides along via the @import below (resolved relative to this
   sheet's URL — same request chain). */
@import './accordion-motion.css?ver=1787769613';

.hzo-accordion { display: flex; flex-direction: column; gap: var(--space-sm); }
.hzo-accordion__item {
    background: var(--surface, #fff);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-control);
    overflow: hidden;
}
.hzo-accordion__question {
    padding: 18px 20px;
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: var(--fw-700, 700);
    color: var(--text-heading);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
}
.hzo-accordion__question::-webkit-details-marker,
.hzo-accordion__question::marker { display: none; content: none; }

.hzo-accordion__icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--text-heading); /* dark enough to read on the white panel */
    transition: transform 300ms ease, color 200ms ease;
}
.hzo-accordion__item[open] > .hzo-accordion__question > .hzo-accordion__icon {
    transform: rotate(180deg);
    color: var(--brand); /* highlight the open row's caret */
}

.hzo-accordion__answer { padding: var(--space-sm) 20px 20px; color: var(--text-muted); }

/* When open, tighten the question's bottom padding so the title box (and its
   hover tint) hugs the title, while the answer's own top padding gives the body
   breathing room — same overall gap, but no cramped body against the tint. */
.hzo-accordion__item[open] > .hzo-accordion__question { padding-bottom: 10px; }

/* Hover lifts ONLY the title box to the lightest brand tint. Scoped to the
   question row so the open answer-body area never tints on hover. */
.hzo-accordion__question { transition: background-color 200ms ease; }
.hzo-accordion__question:hover { background: var(--brand-pale); }
.hzo-accordion__question:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* Trailing reduced-motion kill: no animated hover tint, no caret spin —
   state changes land instantly. (The open/close height/opacity motion has
   its own kill inside accordion-motion.css.) */
@media (prefers-reduced-motion: reduce) {
    .hzo-accordion__question,
    .hzo-accordion__icon { transition: none; }
}