/* Saleyard module — report block styling.
 *
 * The prose is deliberately minimal: the report pages set their own typography (Inter, 14px, black)
 * through the theme, and anything hard-coded here fights it. So no font families, sizes or text colours
 * on the commentary, date or yarding line, those inherit. What is set for them is structure the theme has
 * no opinion about: the spacing between parts.
 *
 * Two parts are exceptions and carry a real design of their own.
 *
 * The price matrix reproduces the published-sheet embed the report pages have always shown, down to the
 * type. Navy header band, alternating row fills, red for a fall, and Arial 12px at the font's natural
 * leading rather than the theme's Inter. It also has to out-specify Divi's `.entry-content` table rules to
 * do it, which is why its selectors are longer than they look like they need to be. See the comment above
 * them.
 *
 * The audio player is skinned to match the pink audio blocks the live saleyard pages already use.
 * `audio_style="false"` opts out of it entirely. See the comment above that block.
 *
 * Every colour is a theme-overridable custom property, not a literal.
 */

.agora-saleyard {
	--agora-saleyard-rule: #d8d8d8;
	--agora-saleyard-muted: #666;

	/* The price matrix palette, taken from the published-sheet embed the report pages have always shown:
	   navy header band, steel-blue rule beneath it, and alternating row fills instead of horizontal
	   gridlines. Custom properties so a theme can restyle the matrix without touching this file. */
	--agora-saleyard-head-bg: #020250;
	--agora-saleyard-head-fg: #fff;
	--agora-saleyard-head-divider: #eef1f1;
	--agora-saleyard-head-rule: #638da2;
	--agora-saleyard-row-bg: #fff;
	--agora-saleyard-row-alt-bg: #f3f3f3;
	--agora-saleyard-divider: #e4e4e4;
	--agora-saleyard-group-rule: #000;
	--agora-saleyard-negative: #c00;

	/* The matrix sets its own type rather than inheriting the theme's Inter: Arial 12px is what the
	   published sheet uses, and matching it is part of reading as the same table. This is the one place the
	   module overrides theme typography, and it is deliberate. */
	--agora-saleyard-table-font-family: Arial, Helvetica, sans-serif;
	--agora-saleyard-table-font-size: 12px;
	margin: 1.5em 0;
}

/* The parts are also used standalone (one shortcode per output), so the custom properties have to be
   available outside the .agora-saleyard wrapper too. */
.agora-saleyard-prices,
.agora-saleyard-empty,
.agora-saleyard-unavailable {
	--agora-saleyard-rule: #d8d8d8;
	--agora-saleyard-muted: #666;

	/* The price matrix palette, taken from the published-sheet embed the report pages have always shown:
	   navy header band, steel-blue rule beneath it, and alternating row fills instead of horizontal
	   gridlines. Custom properties so a theme can restyle the matrix without touching this file. */
	--agora-saleyard-head-bg: #020250;
	--agora-saleyard-head-fg: #fff;
	--agora-saleyard-head-divider: #eef1f1;
	--agora-saleyard-head-rule: #638da2;
	--agora-saleyard-row-bg: #fff;
	--agora-saleyard-row-alt-bg: #f3f3f3;
	--agora-saleyard-divider: #e4e4e4;
	--agora-saleyard-group-rule: #000;
	--agora-saleyard-negative: #c00;

	/* The matrix sets its own type rather than inheriting the theme's Inter: Arial 12px is what the
	   published sheet uses, and matching it is part of reading as the same table. This is the one place the
	   module overrides theme typography, and it is deliberate. */
	--agora-saleyard-table-font-family: Arial, Helvetica, sans-serif;
	--agora-saleyard-table-font-size: 12px;
}

/* Inherit the theme's body type — these read as part of the report, not as metadata. The editor's own
   `empty_content` line sits with them: it is page copy, not one of the plugin's notices. */
.agora-saleyard-date,
.agora-saleyard-yarding,
.agora-saleyard-empty-content {
	margin: 0 0 0.5em;
}

.agora-saleyard-body {
	margin: 0 0 1em;
}

.agora-saleyard-body p {
	margin: 0 0 1em;
}

.agora-saleyard-body p:last-child {
	margin-bottom: 0;
}

.agora-saleyard-prices {
	margin: 0 0 1.5em;
	overflow-x: auto;
	/* Hairline edges so the scrollable region reads as one panel rather than loose rows. */
	border: 1px solid var(--agora-saleyard-rule);
}

/* Two different sets of theme rules style post-content tables here, and both were beating this file.
 *
 * Divi's own: `.entry-content table:not(.variations)` (0,2,1) and `.entry-content tr td` / `tr th`
 * (0,1,2), which outrank a plain `.agora-saleyard-prices td` (0,1,1) and were imposing 24px cell padding,
 * #eee gridlines and #555 header text over the band below. The selectors here are built to sit just above
 * those, hence the `:not(.variations)` mirror on the table and the extra `tr` in the cell selectors.
 *
 * Divi's WooCommerce critical inline CSS: `#content-area table td` / `th` (1,0,2), which sets
 * `padding: .857em 0.587em`. That one carries an ID, so no selector this file can write will ever beat it,
 * and it is emitted only on some pages, which would leave the matrix with different cell padding from one
 * report page to the next. Cell padding is therefore the single declaration pinned with !important.
 * Everything else wins on specificity alone and stays overridable in the ordinary way. */
.agora-saleyard-prices table:not(.variations) {
	width: 100%;
	/* The MLA matrix is 16 columns for sheep, 17 for cattle. Without a floor the browser satisfies
	   width:100% by crushing every column and wrapping the headers several lines deep, and the container's
	   overflow-x never engages. The floor makes it scroll instead. */
	min-width: 60rem;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-family: var(--agora-saleyard-table-font-family);
	font-size: var(--agora-saleyard-table-font-size);
	/* The sheet leaves rows at the font's natural leading; the theme's own line-height would space them
	   out and undo the tight rows. */
	line-height: normal;
	/* Prices, weights and head counts read as columns of figures, so line the digits up. */
	font-variant-numeric: tabular-nums;
}

.agora-saleyard-prices table tr th,
.agora-saleyard-prices table tr td {
	/* The published sheet's own cell padding, in px rather than em so it stays put if the type size moves.
	   !important only because of the ID selector noted above: without it Divi's `#content-area table td`
	   puts .857em/.587em back. */
	padding: 2px 3px !important;
	border: 0;
	/* A light vertical divider between every column, with the heavier family boundaries drawn over the top
	   of it further down. */
	border-right: 1px solid var(--agora-saleyard-divider);
	text-align: left;
	white-space: nowrap;
	vertical-align: middle;
}

.agora-saleyard-prices table tr th:last-child,
.agora-saleyard-prices table tr td:last-child {
	border-right: 0;
}

/* The navy header band and white type, across however many header rows there are.
   No divider between individual headings: the band reads as one block, and the sheet rules only the family
   boundaries up here (see below). */
.agora-saleyard-prices table thead tr th {
	background: var(--agora-saleyard-head-bg);
	color: var(--agora-saleyard-head-fg);
	font-weight: 700;
	border-right: 0;
}

/* The steel-blue rule closes off the whole band, so it belongs under the last header row rather than under
   each of them: with the grouped header in place there are two, and a rule under the banner would cut the
   family name off from the columns it spans. */
.agora-saleyard-prices table thead tr:last-child th {
	border-bottom: 3px solid var(--agora-saleyard-head-rule);
}

/* A black rule down the left edge of each measurement family, so the three groups read as blocks rather
   than seventeen loose columns. The classes are set in render.php on the banner cell, the leaf heading and
   every body cell of the columns either side of a boundary: which columns those are depends on the report
   type, and the markup carries nothing positional to hang it on. Two classes deep to out-specify the
   `border: 0` on the base cell rule.

   Both sides are needed. border-collapse resolves the border between two cells once, and where the two
   declarations tie on width and style the cell on the left wins, so a `border-left` here on its own loses
   to the preceding cell's light `border-right` and never paints. `-start` alone would only ever show for a
   family beginning at the very first column.

   Body only: black on the navy band would not be visible, so up there the boundary keeps the header's own
   light divider, which is what the sheet does too. */
.agora-saleyard-prices table tbody .agora-saleyard-group-start {
	border-left: 1px solid var(--agora-saleyard-group-rule);
}

.agora-saleyard-prices table tbody .agora-saleyard-group-edge {
	border-right: 1px solid var(--agora-saleyard-group-rule);
}

/* The family boundaries are the only vertical rules in the header. */
.agora-saleyard-prices table thead .agora-saleyard-group-edge {
	border-right: 1px solid var(--agora-saleyard-head-divider);
}

/* The banner row, centred over the run of columns each cell spans. */
.agora-saleyard-prices table thead .agora-saleyard-head-group th {
	text-align: center;
}

/* Alternating fills carry the rows, so the body needs no horizontal gridlines at all. The first data row
   is the shaded one, matching the sheet. */
.agora-saleyard-prices table tbody tr td,
.agora-saleyard-prices table tbody tr th {
	background: var(--agora-saleyard-row-bg);
}

.agora-saleyard-prices table tbody tr:nth-child(odd) td,
.agora-saleyard-prices table tbody tr:nth-child(odd) th {
	background: var(--agora-saleyard-row-alt-bg);
}

/* The score columns carry a single character under a two-word heading, so letting just those headings wrap
   is what takes the width back out of the column. Values stay on one line: a wrapped price or weight is
   harder to read down a column than a wider column is. The class is set in render.php, on the headings
   listed in the `agora_saleyard_wrapping_headers` filter. */
.agora-saleyard-prices table thead th.agora-saleyard-head-wrap {
	white-space: normal;
}

/* A week-on-week fall, called out the way the sheet does. Wrapped in render.php, since which cells are
   negative is a property of the data, not of the column. */
.agora-saleyard-negative {
	color: var(--agora-saleyard-negative);
	font-weight: 700;
}

/* The report recording.

   Styled, this is core's MediaElement player (see agora_saleyard_render_audio) painted to match the
   pink audio blocks already on the live saleyard pages. The values below are measured off one of
   those, so the two read as the same component. Divi produces that look through its own
   .et_pb_audio_module rules; these are written from scratch rather than leaning on them, so the
   player looks the same on a site that has no Divi.

   Every declaration in this block is !important. MediaElement ships its own skin, WordPress paints a
   second one over it (.mejs-controls .mejs-time-rail .mejs-time-current and friends), Divi paints a
   third, and WP Rocket may recombine all of them into a single file in an order this plugin cannot
   predict. Out-specifying a moving target is not winnable; declaring intent is. The scope is the
   --styled wrapper, so none of it can reach anything else on the page.

   audio_style="false" emits .agora-saleyard-audio--plain instead, which nothing here touches. */
.agora-saleyard-audio {
	margin: 0 0 1em;
}

.agora-saleyard-audio--plain {
	width: 100%;
}

.agora-saleyard-audio--styled {
	background: var(--agora-saleyard-audio-bg, #fc1c7f) !important;
	color: #fff !important;
	padding: 14px 20px !important;
}

/* MediaElement sizes its own container inline, so width has to win against a style attribute. */
.agora-saleyard-audio--styled .mejs-container,
.agora-saleyard-audio--styled .mejs-container .mejs-controls,
.agora-saleyard-audio--styled .wp-audio-shortcode {
	width: 100% !important;
	max-width: 100% !important;
	background: transparent !important;
	height: 52px !important;
}

.agora-saleyard-audio--styled .mejs-controls {
	padding: 0 !important;
}

/* The play/pause control: a white disc with a pink glyph, replacing MediaElement's sprite. */
.agora-saleyard-audio--styled .mejs-controls .mejs-button.mejs-playpause-button {
	width: 52px !important;
	height: 52px !important;
	margin-right: 14px !important;
}

.agora-saleyard-audio--styled .mejs-controls .mejs-button.mejs-playpause-button > button {
	width: 52px !important;
	height: 52px !important;
	margin: 0 !important;
	background-color: #fff !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: 26px 26px !important;
	border-radius: 50% !important;
}

.agora-saleyard-audio--styled .mejs-controls .mejs-button.mejs-playpause-button.mejs-play > button {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fc1c7f' d='M9 6.2v11.6l9.2-5.8z'/%3E%3C/svg%3E") !important;
}

.agora-saleyard-audio--styled .mejs-controls .mejs-button.mejs-playpause-button.mejs-pause > button {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fc1c7f' d='M8.2 6h2.6v12H8.2zm5 0h2.6v12h-2.6z'/%3E%3C/svg%3E") !important;
}

/* The scrubber: a hairline track, solid white for the part already played. */
.agora-saleyard-audio--styled .mejs-controls .mejs-time-rail {
	height: 52px !important;
	padding-top: 24px !important;
}

.agora-saleyard-audio--styled .mejs-controls .mejs-time-rail .mejs-time-total,
.agora-saleyard-audio--styled .mejs-controls .mejs-time-rail .mejs-time-loaded,
.agora-saleyard-audio--styled .mejs-controls .mejs-time-rail .mejs-time-current,
.agora-saleyard-audio--styled .mejs-controls .mejs-time-rail .mejs-time-hovered,
.agora-saleyard-audio--styled .mejs-controls .mejs-time-rail .mejs-time-buffering {
	height: 4px !important;
	margin: 0 !important;
	border-radius: 5px !important;
}

.agora-saleyard-audio--styled .mejs-controls .mejs-time-rail .mejs-time-total {
	background: rgba(255, 255, 255, 0.5) !important;
}

.agora-saleyard-audio--styled .mejs-controls .mejs-time-rail .mejs-time-loaded {
	background: rgba(255, 255, 255, 0.3) !important;
}

.agora-saleyard-audio--styled .mejs-controls .mejs-time-rail .mejs-time-current,
.agora-saleyard-audio--styled .mejs-controls .mejs-time-rail .mejs-time-hovered {
	background: #fff !important;
}

.agora-saleyard-audio--styled .mejs-controls .mejs-time-rail .mejs-time-handle .mejs-time-handle-content {
	width: 10px !important;
	height: 10px !important;
	/* Centred on the track by measurement, not by eye. .mejs-time-handle carries a 4px
	   border with box-sizing: border-box, so `top` resolves against its padding box:
	   -(10px dot - 4px track) / 2 to centre, then -4px to undo that border offset. */
	top: -7px !important;
	left: -5px !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: #fff !important;
	transform: scale(1) !important;
}

.agora-saleyard-audio--styled .mejs-controls .mejs-time-rail .mejs-time-float {
	color: #222 !important;
}

/* Elapsed / duration. */
/* The reference player shows one readout, the duration; the elapsed time lives on the scrubber. */
.agora-saleyard-audio--styled .mejs-controls .mejs-currenttime-container {
	display: none !important;
}

.agora-saleyard-audio--styled .mejs-controls .mejs-time {
	height: 52px !important;
	padding: 0 6px !important;
	color: #fff !important;
	font-size: 11px !important;
	line-height: 52px !important;
}

/* Volume: white glyph and rail, to match the rest of the chrome. */
.agora-saleyard-audio--styled .mejs-controls .mejs-button.mejs-volume-button > button {
	width: 26px !important;
	height: 52px !important;
	margin: 0 !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: 20px 20px !important;
}

.agora-saleyard-audio--styled .mejs-controls .mejs-button.mejs-volume-button.mejs-mute > button {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M4 9.5v5h3.4L12 18.5v-13L7.4 9.5H4zm10.6-1.2a5 5 0 0 1 0 7.4l1.2 1.2a6.6 6.6 0 0 0 0-9.8l-1.2 1.2z'/%3E%3C/svg%3E") !important;
}

.agora-saleyard-audio--styled .mejs-controls .mejs-button.mejs-volume-button.mejs-unmute > button {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M4 9.5v5h3.4L12 18.5v-13L7.4 9.5H4zm14.8-.7-1.1-1.1-2.2 2.2-2.2-2.2-1.1 1.1 2.2 2.2-2.2 2.2 1.1 1.1 2.2-2.2 2.2 2.2 1.1-1.1-2.2-2.2 2.2-2.2z'/%3E%3C/svg%3E") !important;
}

.agora-saleyard-audio--styled .mejs-controls .mejs-horizontal-volume-slider {
	height: 52px !important;
}

.agora-saleyard-audio--styled .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
	top: 24px !important;
	height: 4px !important;
	background: rgba(255, 255, 255, 0.5) !important;
	border-radius: 5px !important;
}

.agora-saleyard-audio--styled .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
	height: 4px !important;
	background: #fff !important;
	border-radius: 5px !important;
}

/* MediaElement ships a focus ring keyed to its dark default chrome; on pink it reads as a smudge. */
.agora-saleyard-audio--styled .mejs-controls .mejs-button > button:focus {
	outline: 2px solid #fff !important;
	outline-offset: 2px !important;
}

.agora-saleyard-data-file {
	margin: 0 0 1em;
}

.agora-saleyard-empty,
.agora-saleyard-unavailable {
	color: var(--agora-saleyard-muted);
	font-style: italic;
}