/**
 * Dinmatta Accordion
 * --------------------------------------------------------------------------
 * Unified accordion used by:
 *   - Category FAQ section (functions.php)
 *   - Product details (template-parts/product-details-accordion.php)
 *   - Storleksguide FAQ (page-storleksguide.php)
 *
 * Animation strategy (jitter-free):
 *   - Outer panel uses `display: grid; grid-template-rows: 0fr → 1fr`.
 *   - Inner content wrapper has `min-height: 0; overflow: hidden`. Without
 *     `min-height: 0` the grid track refuses to shrink below the inner's
 *     intrinsic content size, which produced the snap on close.
 *   - Padding animates ALONGSIDE the row track, so the closing motion is one
 *     continuous height change, not row-collapse-then-padding-snap.
 *   - Same `--duration-base` and `--ease-out` for all properties so they
 *     finish together — no off-beat "tail" frames.
 *
 * Variants:
 *   .dinmatta-accordion--default  Soft surfaces, sentence-case titles
 *                                 (FAQs, content pages).
 *   .dinmatta-accordion--product  Compact, uppercase, product-detail look.
 * ========================================================================== */

.dinmatta-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* --------------------------------------------------------------------------
 * Item shell
 * ------------------------------------------------------------------------ */
.dinmatta-accordion__item {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition:
        border-color var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out);
}

.dinmatta-accordion__item:hover {
    border-color: var(--color-primary);
}

.dinmatta-accordion__item.is-open {
    box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
 * Trigger (the clickable header)
 * The global stylesheet (style.css) paints every <button> as a coral pill
 * with a ::before slide-in on hover. We override every relevant property.
 * Specificity (0,1,1) beats the global `button:hover` (0,1,0), so we don't
 * need !important — but we DO need to restate hover/active to neutralise
 * the inherited coral background and slide-in.
 * ------------------------------------------------------------------------ */
.dinmatta-accordion__trigger {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--space-md);
    padding: var(--space-md);
    margin: 0;
    cursor: pointer;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    color: var(--color-text);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    transition: color var(--duration-fast) var(--ease-out);
}

/* Kill the global `button::before` slide-in pseudo (style.css ~line 877). */
.dinmatta-accordion__trigger::before,
.dinmatta-accordion__trigger::after {
    content: none;
    display: none;
    transform: none;
    background: transparent;
}

.dinmatta-accordion__trigger:hover,
.dinmatta-accordion__trigger:focus,
.dinmatta-accordion__trigger:active {
    background: transparent;
    background-color: transparent;
    box-shadow: none;
    transform: none;
    color: var(--color-primary);
}

.dinmatta-accordion__trigger:focus {
    outline: none;
}

.dinmatta-accordion__trigger:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.dinmatta-accordion__title {
    flex: 1 1 auto;
    min-width: 0;
}

/* --------------------------------------------------------------------------
 * Chevron
 * ------------------------------------------------------------------------ */
.dinmatta-accordion__chevron {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--color-text-muted);
    transform: rotate(0);
    transition:
        transform var(--duration-base) var(--ease-out),
        color var(--duration-fast) var(--ease-out);
    will-change: transform;
}

.dinmatta-accordion__trigger:hover .dinmatta-accordion__chevron {
    color: var(--color-primary);
}

.dinmatta-accordion__item.is-open .dinmatta-accordion__chevron {
    transform: rotate(180deg);
    color: var(--color-primary);
}

/* --------------------------------------------------------------------------
 * Panel — the animated container.
 *
 * grid-template-rows 0fr → 1fr drives the height. The inner __content
 * carries the actual padding/margins, and its `min-height: 0` is what makes
 * the grid track able to shrink below its intrinsic content size.
 *
 * Padding-block is animated together with the row track. They share the
 * same duration/easing so collapse is a single, continuous motion.
 * ------------------------------------------------------------------------ */
.dinmatta-accordion__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--duration-base) var(--ease-out);
}

.dinmatta-accordion__item.is-open .dinmatta-accordion__panel {
    grid-template-rows: 1fr;
}

.dinmatta-accordion__content {
    /* This is the grid item — must have min-height: 0 + overflow: hidden
       for the row track to actually animate to/from 0fr without jitter. */
    min-height: 0;
    overflow: hidden;
    padding: 0 var(--space-md);
    opacity: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    transition:
        padding-top var(--duration-base) var(--ease-out),
        padding-bottom var(--duration-base) var(--ease-out),
        opacity var(--duration-base) var(--ease-out);
}

.dinmatta-accordion__item.is-open .dinmatta-accordion__content {
    padding-top: 0;
    padding-bottom: var(--space-md);
    opacity: 1;
}

/* Content typography — applies inside any accordion answer */
.dinmatta-accordion__content p {
    margin: 0 0 var(--space-3);
}

.dinmatta-accordion__content p:last-child {
    margin-bottom: 0;
}

.dinmatta-accordion__content a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dinmatta-accordion__content ul,
.dinmatta-accordion__content ol {
    margin: var(--space-2) 0 var(--space-3);
    padding-left: 1.5em;
}

.dinmatta-accordion__content li {
    margin-bottom: var(--space-2);
}

.dinmatta-accordion__content strong {
    color: var(--color-text);
}

/* --------------------------------------------------------------------------
 * Variant: default (FAQ surfaces)
 * White card with sentence-case bold titles. Used by category & storleksguide.
 * ------------------------------------------------------------------------ */
.dinmatta-accordion--default .dinmatta-accordion__trigger {
    /* explicit defaults; no overrides needed beyond base */
}

/* --------------------------------------------------------------------------
 * Variant: product
 * Tighter padding, uppercase compact label, warm cream surface. Used in
 * product detail tabs (Beskrivning / Specifikationer / Leverans & Retur).
 * ------------------------------------------------------------------------ */
.dinmatta-accordion--product {
    gap: var(--space-2);
}

.dinmatta-accordion--product .dinmatta-accordion__item {
    background: #F5F3F0; /* warmer than --color-cream, matches prior look */
    border: 0;
}

.dinmatta-accordion--product .dinmatta-accordion__item:hover {
    border-color: transparent;
}

.dinmatta-accordion--product .dinmatta-accordion__item.is-open {
    box-shadow: none;
}

.dinmatta-accordion--product .dinmatta-accordion__trigger {
    padding: 18px 20px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dinmatta-accordion--product .dinmatta-accordion__chevron {
    width: 18px;
    height: 18px;
}

.dinmatta-accordion--product .dinmatta-accordion__content {
    padding: 0 20px;
    font-size: var(--font-size-sm);
}

.dinmatta-accordion--product .dinmatta-accordion__item.is-open .dinmatta-accordion__content {
    padding-bottom: 20px;
}

/* --------------------------------------------------------------------------
 * Mobile
 * ------------------------------------------------------------------------ */
@media (max-width: 768px) {
    .dinmatta-accordion__trigger {
        padding: var(--space-4);
        font-size: var(--font-size-sm);
    }

    .dinmatta-accordion__content {
        padding: 0 var(--space-4);
        font-size: var(--font-size-sm);
    }

    .dinmatta-accordion__item.is-open .dinmatta-accordion__content {
        padding-bottom: var(--space-4);
    }

    .dinmatta-accordion--product .dinmatta-accordion__trigger {
        padding: var(--space-3) var(--space-4);
    }
}

/* --------------------------------------------------------------------------
 * Reduced motion — honour user preference, keep state changes instant.
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .dinmatta-accordion__item,
    .dinmatta-accordion__trigger,
    .dinmatta-accordion__chevron,
    .dinmatta-accordion__panel,
    .dinmatta-accordion__content {
        transition: none !important;
    }
}