/*==========================================================
 NEXIA UI FRAMEWORK
 COMPONENT : DISCLOSURE
 PURPOSE   : Reusable disclosure / accordion styling.
             Supports native <details>/<summary> and the
             WordPress Core Accordion block.
==========================================================*/

/*----------------------------------------------------------
  COMPONENT-SCOPED SIZE CONTROLS

  Toggle width/height, triangle geometry, and typography are
  intentionally independent. Override these variables on
  .nx-disclosure (or a more specific selector) as needed.
----------------------------------------------------------*/

.nx-disclosure {

    /* Clickable toggle geometry. */
    --nx-disclosure-toggle-width: 660px;
    --nx-disclosure-toggle-max-width: 100%;
    --nx-disclosure-toggle-min-height: 52px;
    --nx-disclosure-toggle-padding-y: 15px;
    --nx-disclosure-toggle-padding-x: 18px;
    --nx-disclosure-toggle-indent: 44px;
    --nx-disclosure-toggle-margin-inline: auto;

    /* Triangle indicator geometry. */
    --nx-disclosure-indicator-height: 5px;
    --nx-disclosure-indicator-width: 6px;
    --nx-disclosure-indicator-offset: 18px;

}

/*----------------------------------------------------------
  NATIVE DETAILS / SUMMARY
----------------------------------------------------------*/

.nx-disclosure {

    color: var(--nx-text);

}


.nx-disclosure:is(details) {

    display: block;
    width: 100%;

}


.nx-disclosure:is(details) > summary {

    display: block;
    position: relative;

    width: var(--nx-disclosure-toggle-width);
    max-width: var(--nx-disclosure-toggle-max-width);
    margin-inline: var(--nx-disclosure-toggle-margin-inline);
    box-sizing: border-box;

    padding: var(--nx-disclosure-toggle-padding-y) var(--nx-disclosure-toggle-padding-x) var(--nx-disclosure-toggle-padding-y) var(--nx-disclosure-toggle-indent);

    background: var(--nx-surface);
    color: var(--nx-heading);

    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    box-shadow: var(--nx-shadow-sm);

    cursor: pointer;
    list-style: none;
    user-select: none;

    transition:
        border-color var(--nx-transition),
        box-shadow var(--nx-transition),
        background-color var(--nx-transition);

}


.nx-disclosure:is(details) > summary::-webkit-details-marker {

    display: none;

}


/* Nexia triangle toggle. */
.nx-disclosure:is(details) > summary::before {

    content: '';

    position: absolute;
    top: 50%;
    left: var(--nx-disclosure-indicator-offset);

    width: 0;
    height: 0;

    border-top: var(--nx-disclosure-indicator-height) solid transparent;
    border-bottom: var(--nx-disclosure-indicator-height) solid transparent;
    border-left: var(--nx-disclosure-indicator-width) solid var(--nx-primary);

    transform: translateY(-50%) rotate(0deg);
    transform-origin: 2px 50%;

    transition: transform 0.25s ease;

}


.nx-disclosure:is(details) > summary:hover {

    border-color: var(--nx-primary);
    box-shadow: var(--nx-button-shadow-hover);

}


.nx-disclosure:is(details) > summary:focus-visible {

    outline: none;
    box-shadow: var(--nx-focus-ring);

}


.nx-disclosure:is(details)[open] > summary {

    border-color: var(--nx-primary);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

}


.nx-disclosure:is(details)[open] > summary::before {

    transform: translateY(-50%) rotate(90deg);

}


.nx-disclosure:is(details) > summary .nx-disclosure__label {

    display: block;
    font-size: var(--nx-font-size-sm);
    font-weight: var(--nx-weight-semibold);
    line-height: 1.4;

}


.nx-disclosure:is(details) > .nx-disclosure__content {

    padding: 22px 24px 24px;

    background: var(--nx-surface);
    color: var(--nx-text);

    border: 1px solid var(--nx-primary);
    border-top: 0;

    border-radius:
        0
        0
        var(--nx-radius-lg)
        var(--nx-radius-lg);

}


/*----------------------------------------------------------
  WORDPRESS CORE ACCORDION

  Usage:
    Add "nx-disclosure" to each Accordion Item.

  The WordPress Accordion uses:
    .wp-block-accordion-item
    .wp-block-accordion-heading__toggle
    .wp-block-accordion-panel

  WordPress exposes the open state through both .is-open and
  aria-expanded="true". Supporting both keeps this component
  resilient across editor/runtime changes.
----------------------------------------------------------*/

/* The Core Accordion wrapper must also be allowed to shrink when
   its disclosure items become fluid on narrow screens. */
.wp-block-accordion:has(> .wp-block-accordion-item.nx-disclosure) {

    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;

}


.wp-block-accordion-item.nx-disclosure {

    width: min(
        var(--nx-disclosure-toggle-width),
        var(--nx-disclosure-toggle-max-width)
    );
    max-width: 100%;
    min-width: 0;
    margin-inline: var(--nx-disclosure-toggle-margin-inline);
    box-sizing: border-box;

    color: var(--nx-text);

}


.wp-block-accordion-item.nx-disclosure
.wp-block-accordion-heading {

    margin: 0;

}


.wp-block-accordion-item.nx-disclosure
.wp-block-accordion-heading__toggle {

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
    box-sizing: border-box;
    min-height: var(--nx-disclosure-toggle-min-height);

    padding: var(--nx-disclosure-toggle-padding-y) var(--nx-disclosure-toggle-padding-x) var(--nx-disclosure-toggle-padding-y) var(--nx-disclosure-toggle-indent);

    background: var(--nx-surface) !important;
    color: var(--nx-heading) !important;

    border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-radius-lg);
    box-shadow: var(--nx-shadow-sm);

    cursor: pointer;
    user-select: none;
    text-decoration: none;

    transition:
        border-color var(--nx-transition),
        box-shadow var(--nx-transition),
        background-color var(--nx-transition);

}


/* The WordPress icon is disabled in the user's FAQ and is not
   needed when the Nexia triangle is active. */
.wp-block-accordion-item.nx-disclosure
.wp-block-accordion-heading__toggle-icon {

    display: none;

}


/* Nexia triangle toggle for WordPress Accordion. */
.wp-block-accordion-item.nx-disclosure
.wp-block-accordion-heading__toggle::before {

    content: '';

    position: absolute;
    top: 50%;
    left: var(--nx-disclosure-indicator-offset);

    width: 0;
    height: 0;

    border-top: var(--nx-disclosure-indicator-height) solid transparent;
    border-bottom: var(--nx-disclosure-indicator-height) solid transparent;
    border-left: var(--nx-disclosure-indicator-width) solid var(--nx-primary);

    transform: translateY(-50%) rotate(0deg);
    transform-origin: 2px 50%;

    transition: transform 0.25s ease;

}


.wp-block-accordion-item.nx-disclosure
.wp-block-accordion-heading__toggle:hover {

    border-color: var(--nx-primary) !important;
    box-shadow: var(--nx-button-shadow-hover);

}


.wp-block-accordion-item.nx-disclosure
.wp-block-accordion-heading__toggle:focus-visible {

    outline: none;
    box-shadow: var(--nx-focus-ring);

}


/* Open state: support both current WordPress state markers. */
.wp-block-accordion-item.nx-disclosure.is-open
.wp-block-accordion-heading__toggle,
.wp-block-accordion-item.nx-disclosure
.wp-block-accordion-heading__toggle[aria-expanded="true"] {

    border-color: var(--nx-primary) !important;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

}


.wp-block-accordion-item.nx-disclosure.is-open
.wp-block-accordion-heading__toggle::before,
.wp-block-accordion-item.nx-disclosure
.wp-block-accordion-heading__toggle[aria-expanded="true"]::before {

    transform: translateY(-50%) rotate(90deg);

}


.wp-block-accordion-item.nx-disclosure
.wp-block-accordion-heading__toggle-title {

    display: block;
    font-weight: var(--nx-weight-semibold);
    line-height: 1.4;

}


.wp-block-accordion-item.nx-disclosure
.wp-block-accordion-panel {

    padding: 22px 24px 24px;

    background: var(--nx-surface);
    color: var(--nx-text);

    border: 1px solid var(--nx-primary);
    border-top: 0;

    border-radius:
        0
        0
        var(--nx-radius-lg)
        var(--nx-radius-lg);

}


/* Keep the parent Accordion class harmless if it was previously
   added while setting up the component. The component behavior
   belongs to Accordion Items, not the parent container. */
.wp-block-accordion.nx-disclosure {

    color: inherit;

}


/*----------------------------------------------------------
  RESPONSIVE
----------------------------------------------------------*/

@media (max-width: 767px) {

    .wp-block-accordion:has(> .wp-block-accordion-item.nx-disclosure) {

        width: 100%;
        max-width: 100%;
        min-width: 0;

    }


    .wp-block-accordion-item.nx-disclosure {

        width: 100%;
        max-width: 100%;
        min-width: 0;

    }


    .nx-disclosure {

        --nx-disclosure-toggle-padding-y: 14px;
        --nx-disclosure-toggle-padding-x: 14px;
        --nx-disclosure-toggle-indent: 40px;
        --nx-disclosure-indicator-offset: 15px;

    }


    .nx-disclosure:is(details) > summary,
    .wp-block-accordion-item.nx-disclosure,
    .wp-block-accordion-item.nx-disclosure
    .wp-block-accordion-heading__toggle {

        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;

        padding: var(--nx-disclosure-toggle-padding-y) var(--nx-disclosure-toggle-padding-x) var(--nx-disclosure-toggle-padding-y) var(--nx-disclosure-toggle-indent);

    }


    .nx-disclosure:is(details) > summary::before,
    .wp-block-accordion-item.nx-disclosure
    .wp-block-accordion-heading__toggle::before {

        left: var(--nx-disclosure-indicator-offset);

    }


    .nx-disclosure:is(details) > .nx-disclosure__content,
    .wp-block-accordion-item.nx-disclosure
    .wp-block-accordion-panel {

        padding: 18px 16px 20px;

    }

}


/*----------------------------------------------------------
  REDUCED MOTION
----------------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {

    .nx-disclosure:is(details) > summary,
    .nx-disclosure:is(details) > summary::before,
    .wp-block-accordion-item.nx-disclosure
    .wp-block-accordion-heading__toggle,
    .wp-block-accordion-item.nx-disclosure
    .wp-block-accordion-heading__toggle::before {

        transition: none;

    }

}