/**
 * Dynamic Accordion block styles.
 *
 * Scoped to .mon-accordion--dynamic so the existing .mon-accordion (used by
 * the static accordion block) is unaffected. Hand-authored CSS — the SCSS
 * build pipeline is currently broken (node-sass / Node 22), so this file is
 * loaded directly via DynamicAccordion::enqueue_styles().
 */

/* Monthly maintenance check: 2026-05 */

.mon-accordion--dynamic {
    /* Local design tokens. Typography intentionally inherits from the global
       .mon-accordion rules — these tokens cover only borders, the count and
       the hover/answer chrome. */
    --da-text-muted:  #6b6580;
    --da-border:      #e0dce5;
    --da-hover-bg:    #faf8fc;
}

/* ---------------------------------------------------------------
   Outer category accordion
   --------------------------------------------------------------- */

.mon-accordion--dynamic .mon-accordion__item--category {
    border: 0;
    border-bottom: 1px solid var(--da-border);
}

.mon-accordion--dynamic .mon-accordion__item--category > .mon-accordion__summary {
    padding: 20px 4px;
    align-items: center;
}

.mon-accordion--dynamic .mon-accordion__item--category > .mon-accordion__summary:hover {
    background: transparent;
}

/* Title typography intentionally inherits from the global .mon-accordion__title
   rules. Only override layout so the count badge sits inline next to the name. */
.mon-accordion--dynamic .mon-accordion__item--category > .mon-accordion__summary .mon-accordion__title {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
}

.mon-accordion--dynamic .mon-accordion__count {
    color: var(--da-text-muted);
    font-size: 0.7em;
    font-weight: 400;
    line-height: 1.4;
}

/* ---------------------------------------------------------------
   Chevron icons (override the existing plus/minus background-image)
   --------------------------------------------------------------- */

.mon-accordion--dynamic .mon-accordion__icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%23221438' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 16px 16px;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

.mon-accordion--dynamic .mon-accordion__item--category > .mon-accordion__summary .mon-accordion__icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    background-size: 20px 20px;
}

.mon-accordion--dynamic .mon-accordion__item[open] > .mon-accordion__summary .mon-accordion__icon {
    transform: rotate(180deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%23221438' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* FAQ-level icons use plus / minus (matching the existing static accordion
   block) instead of the chevron used at category level.
   - Closed FAQ → "+" (click to expand)
   - Open FAQ   → "−" (click to collapse) */
.mon-accordion--dynamic .mon-accordion__item--faq > .mon-accordion__summary .mon-accordion__icon {
    transform: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='4 4 16 16'%3E%3Cpath d='M12 5V19' stroke='%2364A608' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 12H19' stroke='%2364A608' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.mon-accordion--dynamic .mon-accordion__item--faq[open] > .mon-accordion__summary .mon-accordion__icon {
    transform: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='4 11 16 2'%3E%3Cpath d='M5 12H19' stroke='%2364A608' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------
   Nested wrapper (between category summary and FAQ list)
   --------------------------------------------------------------- */

.mon-accordion--dynamic .mon-accordion__content--nested {
    padding: 4px 0 20px;
}

/* ---------------------------------------------------------------
   Inner FAQ accordion items (Question / Answer cards)
   --------------------------------------------------------------- */

.mon-accordion--dynamic .mon-accordion__item--faq {
    border: 1px solid var(--da-border);
    border-bottom: 1px solid var(--da-border);
    background: #ffffff;
    margin-bottom: 12px;
}

.mon-accordion--dynamic .mon-accordion__item--faq:last-child {
    margin-bottom: 0;
}

.mon-accordion--dynamic .mon-accordion__item--faq > .mon-accordion__summary {
    padding: 14px 16px;
    background: #ffffff;
    align-items: center;
    transition: background-color 0.2s ease;
}

.mon-accordion--dynamic .mon-accordion__item--faq > .mon-accordion__summary:hover {
    background: var(--da-hover-bg);
}

/* FAQ question typography inherits from .mon-accordion__title — only the layout
   flex is needed so the chevron stays right-aligned. */
.mon-accordion--dynamic .mon-accordion__item--faq > .mon-accordion__summary .mon-accordion__title {
    flex: 1 1 auto;
}

/* Open FAQ — answer area. Background intentionally transparent (per design). */
.mon-accordion--dynamic .mon-accordion__item--faq > .mon-accordion__content {
    background: transparent;
    border-top: 1px solid var(--da-border);
    padding: 16px;
}

/* Constrain rendered answer content to the FAQ card width. Some FAQ posts
   include images/embeds/figures that would otherwise overflow the card. */
.mon-accordion--dynamic .mon-accordion__item--faq > .mon-accordion__content > * {
    max-width: 100%;
    box-sizing: border-box;
}

.mon-accordion--dynamic .mon-accordion__item--faq > .mon-accordion__content img,
.mon-accordion--dynamic .mon-accordion__item--faq > .mon-accordion__content video,
.mon-accordion--dynamic .mon-accordion__item--faq > .mon-accordion__content iframe,
.mon-accordion--dynamic .mon-accordion__item--faq > .mon-accordion__content embed,
.mon-accordion--dynamic .mon-accordion__item--faq > .mon-accordion__content object {
    max-width: 100%;
    height: auto;
    display: block;
}

.mon-accordion--dynamic .mon-accordion__item--faq > .mon-accordion__content figure {
    max-width: 100%;
    margin: 0 0 12px;
}

/* Stop any nested .block / .mon-row leaking through with their own widths. */
.mon-accordion--dynamic .mon-accordion__item--faq > .mon-accordion__content .block,
.mon-accordion--dynamic .mon-accordion__item--faq > .mon-accordion__content .mon-row {
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

.mon-accordion--dynamic .mon-accordion__item--faq > .mon-accordion__content p {
    margin-bottom: 12px;
}

.mon-accordion--dynamic .mon-accordion__item--faq > .mon-accordion__content p:last-child {
    margin-bottom: 0;
}

/* Anchors inside answers — keep the existing global style but ensure they
   stay readable on the lavender background. */
.mon-accordion--dynamic .mon-accordion__item--faq > .mon-accordion__content a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    font-weight: 700;
}

/* ---------------------------------------------------------------
   Native <details>/<summary> hygiene — kill the default disclosure
   triangle on Safari / Chrome inside the dynamic block.
   --------------------------------------------------------------- */
.mon-accordion--dynamic .mon-accordion__summary::-webkit-details-marker,
.mon-accordion--dynamic .mon-accordion__summary::marker {
    display: none;
    list-style-image: none;
}