/* Stepfox Slap Stats — Elementor glue.
 *
 * assets/slap.css already carries every component's design; this file only
 * adds what exists solely inside Elementor: the counters widget's markup, the
 * editor-only notices, and the handful of resets Elementor's own frontend
 * stylesheet makes necessary.
 *
 * Colours resolve through the same --sfslap-* aliases slap.css declares on
 * :root, so a widget's Palette controls (which rewrite those aliases on the
 * widget wrapper) recolour this file too.
 */

/* ------------------------------------------------------------- counters */

.sfslap-el-counters {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	align-items: flex-start;
}

.sfslap-el-counter {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sfslap-el-counter-n {
	font-family: var(--wp--custom--display, inherit);
	font-size: 30px;
	line-height: 1;
	font-weight: 400;
	letter-spacing: 0.5px;
	color: var(--sfslap-ink, #f4f2ee);
	margin-bottom: 4px;
}

.sfslap-el-counter-l {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sfslap-muted, #8d8d99);
}

@media (max-width: 1024px) {
	.sfslap-el-counter-n { font-size: 26px; }
}

@media (max-width: 767px) {
	.sfslap-el-counters { gap: 18px; }
	.sfslap-el-counter-n { font-size: 24px; }
}

/* -------------------------------------------------- editor + empty states */

/* Only ever rendered inside the editor, so it can afford to be loud. */
.sfslap-el-notice {
	border: 1px dashed var(--sfslap-line, #26262e);
	border-radius: 6px;
	padding: 14px 16px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--sfslap-muted, #8d8d99);
	background: color-mix(in srgb, var(--sfslap-accent, #e11d2e) 5%, transparent);
}

.sfslap-el-empty {
	color: var(--sfslap-muted, #8d8d99);
	font-size: 13px;
	margin: 0;
	padding: 14px 0;
}

/* ------------------------------------------------------- Elementor resets */

/* Elementor resets every image inside `.elementor`:
 *
 *   .elementor img { border-radius: 0; border-style: none; height: auto; … }
 *
 * That selector is (0,1,1) and loads after the plugin sheet, so `.sfslap-face`
 * at (0,1,0) loses and every circular portrait on the page renders square —
 * 47 of them on the demo home page. The rules below restore exactly the
 * properties Elementor takes away, and nothing else.
 *
 * `.elementor img` is (0,1,1) AND this file is enqueued before Elementor's
 * frontend sheet, so a matching (0,1,1) selector loses the tie on source
 * order — these have to be (0,2,1). Nothing in the plugin styles a face's
 * border or radius more specifically than `.sfslap-face`, so raising them
 * this far overrides nothing else. `img.` keeps the initials fallback — which
 * is a <span>, and was never broken — untouched. */
.elementor-widget-container .sfslap-face {
	display: block;
	max-width: none;
}

.elementor img.sfslap-face {
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--sfslap-ink) 14%, transparent);
}

.elementor img.sfslap-face--xl {
	border-width: 2px;
}

/* Same reset takes `height: 100%` off the images that fill a card's media box,
 * so they overflow it and the crop is top-anchored instead of centred. */
.elementor .sfslap-ecard-media img,
.elementor .sfslap-card-media img,
.elementor img.sfslap-card-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A striker card is a flex column, and once the image above stops setting the
 * media box's intrinsic height the box becomes shrinkable — the grid row is
 * then sized by the card body alone and the square portrait gets squeezed to a
 * letterbox. Holding the media at its declared aspect ratio is what keeps the
 * roster reading as portraits. */
.elementor .sfslap-card-media {
	flex-shrink: 0;
}

/* …but the initials fallback keeps the square corners the plugin gives it. */
.elementor .sfslap-card-photo.sfslap-face--mono {
	border: 0;
	border-radius: 0;
}

/* The plugin's tables set their own borders; Elementor's reset would otherwise
 * leave the collapsed border-spacing from its normalize layer. */
.elementor-widget-container .sfslap-rankings table,
.elementor-widget-container .sfslap-lb table {
	border-collapse: collapse;
}

/* Widgets that scroll horizontally (bracket, ticker, wide rankings) must not
 * push the section wider than the grid. */
.elementor-widget-container .sfslap-bk-scroll,
.elementor-widget-container .sfslap-ticker,
.elementor-widget-container .sfslap-rfull-scroll {
	max-width: 100%;
}

/* The arena backdrop is decorative and absolutely positioned; its Elementor
 * wrapper must not create a box of its own or it will occupy layout space
 * above the section it is meant to sit behind. */
.elementor-widget-slap-arena,
.elementor-widget-slap-arena > .elementor-widget-container {
	position: static;
	line-height: 0;
}