/**
 * APEX home page Rewards Calculator (page 52) - the little the view layer needs.
 *
 * Everything else about the section is left to the plugin's own stylesheet:
 * apex-competitions-controller/assets/css/elementor.css lays the rows out, and
 * the right column is already mirrored there (.progress-2 floats right and
 * justifies to flex-end, .progress-content-2 floats left).
 *
 * What that stylesheet does NOT give us is a bar. Every original row has its own
 * compound rule - .progress-value-6-a.progress_bar_animate.progress_bar and
 * eleven more like it - each pinning width to 0 and animating to one fixed per
 * cent. The view layer drops the progress_bar_animate class so it can set the
 * tapered width itself, and that takes height: 40px away with it. There is no
 * bare .progress_bar rule anywhere, so without the height below the bar
 * collapses to nothing and the section renders empty.
 */

.progress-con .progress_bar.apex-bar {
	height: 40px;
	/* A flex child of a 40px track: take the inline width, do not be squeezed. */
	flex: none;
	/* Stands in for the per-row load-N keyframes the animate class carried. */
	transition: width 0.9s ease-out, background-color 0.2s linear;
}

/* A Special Harvest prize this field size does not fund still shows its box, at
   $0 on a dimmed bar. The dimming itself is the plugin's: elementor.css fades
   .dim_down_bar .progress-3/-4/-5, the wrapper rather than the bar. Nothing is
   needed here for it - this comment is so the next person does not add a rule
   that fights it. */

/* The two notes under the board - "Winning Gross Scores are Validated..." and
   "Rewards based on N Hunters" - are about the whole board, but in Elementor
   they sit inside the LEFT column, so they centre on the left half and read as
   hanging off to one side. Pull them across both columns instead.
 *
 * The arithmetic is exact rather than eyeballed. The widget's containing block
 * is the column less 60px of .elementor-widget-wrap padding and 20px of column
 * gap, so calc(200% + 160px) is 2 x (column - 80) + 160 = two columns = the
 * width of the row, and the -30px pulls its left edge back off the wrap
 * padding onto the row's. It stays true at any window width.
 *
 * flex/max-width are needed because .elementor-widget-wrap is a flex container:
 * without them the item shrinks straight back to the column and the width is
 * silently ignored.
 *
 * Only while the columns are side by side. Below Elementor's 1024px tablet
 * breakpoint each column is already the full width, the notes are centred
 * anyway, and this rule would push the page into a horizontal scroll.
 *
 * These are the only .light-bg text widgets in a col-50 in the section - the
 * Special Harvest captions are col-33 and carry no .light-bg - so the selector
 * catches the two notes in all three copies of the section and nothing else. */
@media (min-width: 1025px) {
	.payout-calculator .elementor-col-50 > .elementor-widget-wrap > .elementor-widget-text-editor.light-bg {
		flex: 0 0 auto;
		max-width: none;
		width: calc(200% + 160px);
		margin-left: -30px;
		/* Once the note reaches across, its right half runs under the RIGHT
		   column, whose .elementor-widget-wrap carries a background image -
		   which washed everything past the midpoint out to a dimmer grey and
		   read as two-tone text. Both columns are position: relative at
		   z-index auto, so one positive z-index here paints the note over
		   them. Nothing else moves: this is the only rule that sets one. */
		z-index: 1;
	}
}

/* Both notes a quarter bigger, and all of one colour.
 *
 * They were 16px in rgb(142,140,140), with only the hunter count inside
 * .apex_payout_number in the brighter rgb(202,202,202). That brighter grey is
 * the one the scores themselves read in, so it is what the whole note uses now.
 *
 * line-height is restated because Elementor sets it in px upstream: left alone
 * it would stay at the 16px value of 25.6px and crowd the two-line sentence.
 * 1.6 is the ratio it already had. No `p` selector is needed - nothing upstream
 * sets a size on the paragraph, so it inherits. */
.payout-calculator .elementor-col-50 > .elementor-widget-wrap > .elementor-widget-text-editor.light-bg {
	font-size: 20px;
	line-height: 1.6;
	color: rgb(202, 202, 202);
	/* Off the last row of the board by a hair. Only the first note moves: the
	   sibling rule below is more specific, so the second one keeps its -6px and
	   simply follows the first down, which leaves the 18px between them intact. */
	margin-top: 8px;
}

.payout-calculator .elementor-col-50 > .elementor-widget-wrap > .elementor-widget-text-editor.light-bg .apex_payout_number {
	color: inherit;
	font-size: inherit;
}

/* Match the gap above "Rewards based on N Hunters" to the one under the
 * Special Harvest heading, so the two stacked pairs read as the same rhythm.
 *
 * Margins cannot be compared between the pairs and neither can line boxes: the
 * heading is 29px on a 1.0 line-height and every note is 20px on 1.6, so the
 * half-leading differs by 6px a side. What the eye reads is ink to ink -
 * descender of the line above to cap of the line below - and measured that way
 * this pair was 32.3px against the Special Harvest pair's 23.2px. -15px closes
 * the 9.1px difference; the rendered gaps then agree to a tenth of a pixel.
 *
 * It is written as a sibling rule because the two notes share every class; the
 * second one is only identifiable as the one that follows the first. */
.payout-calculator .elementor-col-50 > .elementor-widget-wrap > .elementor-widget-text-editor.light-bg + .elementor-widget-text-editor.light-bg {
	margin-top: -15px;
}

/* The captions under the prize boxes sat hard against them - the box is the
   whole widget, so there is no line-box slack under it the way there is under
   text. 12px of padding on the caption rather than margin on the box: the
   caption is the thing that moves, and the boxes above it are cloned at render
   time, so anything set on them has to survive being copied.

   The `+` is what keeps this off the board's own notes: the validation
   sentence also follows an html widget, hence :not(.light-bg). */
.payout-calculator .elementor-widget-html + .elementor-widget-text-editor:not(.light-bg) {
	padding-top: 12px;
}

/* The line the view layer writes under the Special Harvest heading. Sized to
   sit between the 29px heading above it and the 16px captions under the prize
   boxes. Colour is the dimmer #8E8C8C of those captions rather than the
   rgb(202,202,202) the scores and the two board notes read in - Chris's call,
   so it reads as a caption on the heading and not as another headline. Font
   comes from the widget wrap, so it is already Work Sans. */
.payout-calculator .apex-special-note {
	/* The wrap is a flex container and Elementor's own widgets carry width:100%
	   from .elementor-widget. Without it this div shrinks to its text and sits
	   at the start of the line, so text-align centres it inside 360px of box
	   parked on the left rather than across the section. */
	width: 100%;
	/* Spacing is set from here, both sides, off measured gaps rather than guesses.
	 *
	 * Above, the margin is NOT the gap. The heading's line box carries 18.6px of
	 * space below its glyphs and this note's line-height another 6px above its
	 * own, so what the eye reads as the gap is 29.6px even when the margin says
	 * 5. Halving what is actually seen therefore means going negative: -10px
	 * lands it at 14.6px against a target of 14.8. Chase the margin number
	 * instead of the rendered gap and it will look wrong.
	 *
	 * Below, the 20px to the prize boxes was the heading wrap's own
	 * padding-bottom and nothing else, so 20px of margin here doubles it to 40.
	 * Pulling the note up does not eat into it - the boxes rise with it. */
	margin-top: -10px;
	margin-bottom: 20px;
	text-align: center;
	font-size: 20px;
	line-height: 1.6;
	color: #8E8C8C;
}