/**
 * What a figure does to the element it stands in.
 *
 * The shortcodes return digits and nothing else; the marking is done by
 * PageBuilder, which puts a class on whatever element carried them:
 *
 *   .etest-figure--empty     every figure inside came back with no answer
 *   .etest-figure--filled    at least one had one
 *   .etest-figure--gain      at least one was a `diff` that had one
 *
 * The badge itself is left alone: its colours are set in the page builder,
 * where whoever built the card can see them.
 *
 * `--gain` is what the colouring keys off, not `--filled`. A card shows its
 * figure and, beside it, how much that figure grew -- both are shortcodes, so
 * both make an element `filled`, and colouring by that would light up every
 * card on the page permanently. Growth is the news; growth is what shows.
 */

/*
 * Nothing to say, so nothing is said. A badge with no number is still a
 * coloured pill, and an empty pill reads as a mistake rather than as "no
 * change" -- which is also what a month with no growth looks like.
 */
.etest-figure--empty {
	display: none !important;
}

/*
 * A card whose figure grew.
 *
 * There are two kinds of card, because the page builder has two ways of making
 * one, and they share nothing:
 *
 *   a column   .wpb_column[data-using-bg="true"], painted by .column-bg-overlay
 *   a carousel .nectar-carousel .cell, painted by .nectar_color_layer
 *
 * Both painters carry an inline `background`, so `!important` is the only thing
 * that reaches them. That is Salient's markup, not a preference.
 *
 * The column selector is qualified with `[data-using-bg]` on purpose. The page
 * builder nests columns inside columns: a bare `.wpb_column:has(…)` matches the
 * card, the row it sits in, and the column wrapping the whole section -- so the
 * text three screens below would go white along with it. Only a column that
 * paints its own background is a card. A carousel cell needs no such guard:
 * cells do not nest.
 *
 * `:has()` rather than a class on the card itself, because this plugin does not
 * own the card, and reaching up the tree from the badge would mean guessing
 * which ancestor counts -- a guess that changes with every column setting.
 */
.wpb_column[data-using-bg="true"]:has(.etest-figure--gain) .column-bg-overlay,
.nectar-carousel .cell:has(.etest-figure--gain) .nectar_color_layer {
	background: var(--nectar-accent-color) !important;
}

/* the card's own text, and nothing outside it */
.wpb_column[data-using-bg="true"]:has(.etest-figure--gain) .nectar-responsive-text,
.wpb_column[data-using-bg="true"]:has(.etest-figure--gain) .nectar-responsive-text p,
.wpb_column[data-using-bg="true"]:has(.etest-figure--gain) .wpb_text_column,
.wpb_column[data-using-bg="true"]:has(.etest-figure--gain) .wpb_text_column p,
.nectar-carousel .cell:has(.etest-figure--gain) .nectar-responsive-text,
.nectar-carousel .cell:has(.etest-figure--gain) .nectar-responsive-text p,
.nectar-carousel .cell:has(.etest-figure--gain) .wpb_text_column,
.nectar-carousel .cell:has(.etest-figure--gain) .wpb_text_column p {
	color: #fff;
}

/*
 * Browsers without `:has()` -- older than Chrome 105, Safari 15.4 or Firefox
 * 121 -- skip the colouring, because one unsupported selector invalidates the
 * whole rule. Cards then stay white with dark text, which is what they looked
 * like before any of this: duller, never broken. Hiding an empty badge above
 * has no `:has()` in it and keeps working everywhere.
 */