/* MORE OPTIONS. Advanced or rarely used options stay folded until someone asks for them, so a screen offers one
   obvious action and not ten (Hick's law). A native details element: keyboard, screen reader and no script. */
.noord-digital-disclosure {
    border-top: 1px solid var(--border-color);
    padding-top: .5rem;
}

.noord-digital-disclosure__summary {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .5rem;
    border-radius: 6px;
    color: var(--muted-text-color);
    font-size: 12px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
    transition: color .15s ease-out, background-color .15s ease-out;
}

.noord-digital-disclosure__summary::-webkit-details-marker {
    display: none;
}

.noord-digital-disclosure__summary::after {
    content: "";
    width: .4rem;
    height: .4rem;
    margin-left: .15rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s ease-out;
}

.noord-digital-disclosure[open] > .noord-digital-disclosure__summary::after {
    transform: translateY(1px) rotate(225deg);
}

.noord-digital-disclosure__summary:hover,
.noord-digital-disclosure__summary:focus-visible {
    background: var(--surface-muted-color);
    color: var(--text-color);
}

.noord-digital-disclosure__content {
    display: grid;
    gap: .75rem;
    padding: .75rem 0 .25rem;
    animation: noord-digital-disclosure-open .2s ease-out;
}

@keyframes noord-digital-disclosure-open {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .noord-digital-disclosure__content {
        animation: none;
    }
}