/*
 * Auto-rendered sub-resources list (Phase S4).
 *
 * Conservative defaults — themes will commonly override. Use the
 * per-child hooks .acc-sub-resources-list__item-{id} and
 * .acc-sub-resources-list__link-{id} for targeted overrides.
 */

.acc-sub-resources-list {
    margin: 0;
}

.acc-sub-resources-list__heading {
    margin: 0 0 0.5em;
    font-size: 1.4em;
}

.acc-sub-resources-list__items {
    list-style: disc outside;
    padding-left: 1.25em;
    margin: 0;
}

.acc-sub-resources-list__item {
    margin: 0 0 0.5em;
}

.acc-sub-resources-list__item:last-child {
    margin-bottom: 0;
}

/*
 * Deliberately over-specific selector (0,3,2). The plugin stylesheet is
 * enqueued before the theme's, so a bare .acc-sub-resources-list__link rule
 * loses `display` to any same-specificity rule that happens to load later —
 * which is exactly what happened on the ACC site (1.2.5 shipped the right
 * declarations and they were simply overridden). Measured on the development
 * Handbook page: a same-specificity rule placed later in the cascade wins, so
 * one extra class/element step is enough. Keep the specificity, or this
 * regresses silently.
 */
.acc-sub-resources-list__items > li.acc-sub-resources-list__item > a.acc-sub-resources-list__link {
    /*
     * display:inline is load-bearing — do not change it to inline-block.
     *
     * Themes commonly set body-text links to display:inline-block (the ACC
     * site does, via its acc_link_underline_body_text Bricks class). Two
     * things break when one of these titles wraps, which it does in any
     * narrow column:
     *
     *   1. A wrapped inline-block takes its baseline from its LAST line, and
     *      the <li> marker aligns to that baseline — so every bullet drops to
     *      the bottom line of its item.
     *   2. An inline-block has one box, so a hover effect painted on the box
     *      (the ACC theme animates a linear-gradient bar at the bottom edge)
     *      draws a single full-width bar under the last line instead of
     *      following the text on each line.
     *
     * As a plain inline, the link fragments per line: markers align to the
     * first line and the gradient follows the text. box-decoration-break
     * gives each fragment its own background box, which is what makes the
     * hover bar appear on every line rather than only the first.
     */
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;

    /*
     * Underline by default, so the list keeps its link affordance even where
     * no theme class is applied to the wrapper. Colour stays the theme's, and
     * a theme rule with !important (as the ACC child theme has) still wins.
     * Override with: .acc-sub-resources-list__link { text-decoration: none; }
     */
    text-decoration: underline;
}

/*
 * ACC child-theme integration.
 *
 * `.acc_link_underline_body_text a:not(.bricks-button)` in the child theme's
 * style.css paints an animated linear-gradient bar at the bottom of the link
 * and transitions `background-size` from 0 to 100% on hover. Two adjustments
 * for this list, scoped so they only apply where that class is present — a
 * placement without it keeps the plain underline from the rule above:
 *
 * The theme transitions background-size only, so the underline disappeared
 * the instant the bar started growing. Transitioning text-decoration-color
 * too makes it fade out with the bar.
 *
 * Do NOT override background-position here. Since the links are plain
 * inlines (see above), each line fragment has the same 26px content box as
 * a body-copy link, so the theme's own calc(100% + 6px) already puts the bar
 * in exactly the same place: band top 16px below the text top, band bottom
 * 6px below the text bottom, 16px tall. Measured against a main-content link
 * on the development Handbook page. 1.2.7 shifted it 4px lower, which was
 * compensating for the old inline-block geometry and is wrong now.
 */
.acc_link_underline_body_text .acc-sub-resources-list__items > li.acc-sub-resources-list__item > a.acc-sub-resources-list__link {
    transition: background-size 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                text-decoration-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.acc_link_underline_body_text .acc-sub-resources-list__items > li.acc-sub-resources-list__item > a.acc-sub-resources-list__link:hover {
    /*
     * !important is required: something in the theme sets
     * text-decoration-color with !important, which is why the theme's own
     * non-important `text-decoration-color: transparent` on hover never
     * took effect. Measured on the development Handbook page.
     */
    text-decoration-color: transparent !important;
}

.acc-sub-resources-list__description {
    margin-top: 0.25em;
    font-size: 0.95em;
}

.acc-sub-resources-list__description > :first-child {
    margin-top: 0;
}

.acc-sub-resources-list__description > :last-child {
    margin-bottom: 0;
}