/* Standings tables: the scroll container the markup has always claimed to be.
 *
 * standing_table_html() marks its <figure> `tabindex="0" role="region"` with an
 * accessible name, which is the shape axe's scrollable-region-focusable rule
 * asks for — a horizontally scrolling area a keyboard can reach. Nothing ever
 * declared the scrolling half, so on a wide table the rows were simply clipped
 * with no way to get at them. 2023's men's standings are fourteen columns.
 *
 * Deliberately small. The tables inherit their type, colour and cell padding
 * from whatever theme renders them — the block theme, and fc-united on dev2 —
 * and this file only makes them reachable. */

.acai-standing {
	/* `width`, not only `max-width`. A percentage max-width resolves against the
	 * containing block and still lets the box grow when an ancestor is wider than
	 * the visible column, which is what happened on dev2: the figure sized itself
	 * to the table and spilled out of the theme's centred content wrapper. An
	 * element overflowing a centred wrapper spills equally both ways, and page
	 * scrolling can reach the right-hand overflow but never the left — so the
	 * first columns became unreachable rather than merely off-screen. Pinning the
	 * width means the figure cannot overflow and the table scrolls inside it. */
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	/* Only the horizontal axis scrolls; `auto` on both would add a stray vertical
	 * scrollbar on tables that sit a pixel or two over their line box. */
	overflow-y: hidden;
	/* `min-width` computes to `auto` inside a flex container, which refuses to
	 * shrink the box below its content. Elementor renders every container as
	 * flex, so without this the width above is fighting a floor it cannot win
	 * against. */
	min-width: 0;
	/* If the parent aligns its children rather than stretching them, a box this
	 * wide would be centred and overflow both ways again. */
	align-self: stretch;
	/* A UA stylesheet gives <figure> a 40px side margin, and themes often centre
	 * block children with auto margins. Either one shifts the scroll box. */
	margin-inline: 0;
	display: block;
	-webkit-overflow-scrolling: touch;
}

/* The table fits its container and only scrolls when it genuinely cannot.
 *
 * This was `width: max-content`, which asks the browser to give every column the
 * width of its widest cell — so a header like "WC Silvaplana" or "Marathon
 * Worlds" never wrapped, and fourteen unwrapped headers made the table far wider
 * than the page whether or not the data needed the room. The data does not: the
 * event columns hold "DNC" or three digits.
 *
 * `width: 100%` with automatic layout lets the browser share the space out by
 * content instead, wrapping the long headers onto two lines and leaving the
 * table inside the page. The figure keeps `overflow-x: auto` for the narrow
 * viewports where even that is not enough. */
.acai-standing > table {
	width: 100%;
	table-layout: auto;
	margin-inline: 0;
	border-collapse: collapse;
}

/* Headers wrap, on word boundaries only.
 *
 * `overflow-wrap: anywhere` was wrong here: it broke "Silvaplana" across two
 * lines mid-word, which reads as a typo rather than a wrap. These labels are
 * short phrases — "WC Silvaplana", "Marathon Worlds" — and the space is the only
 * place a break belongs. A single long word setting a column's floor is the
 * correct outcome; it is only ten characters.
 *
 * The type is a step smaller than the body as well, which buys back more width
 * than the wrapping does: the headers were the widest thing in every event
 * column, holding open cells that contain "DNC" or three digits. */
.acai-standing th {
	white-space: normal;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
	font-size: .85em;
	line-height: 1.25;
	vertical-align: bottom;
}

/* Names wrap too — "Maddalena Maria Spanu" would otherwise hold a column open
 * wider than every header on the row. Scores stay whole: breaking "1,492" across
 * two lines reads as two numbers. */
.acai-standing td {
	white-space: normal;
	overflow-wrap: break-word;
}

/* Fourteen columns of the theme's cell padding is several hundred pixels of
 * nothing. Tightened only inside these tables. */
.acai-standing th,
.acai-standing td {
	padding-inline: .55em;
}

.acai-standing > table > caption {
	text-align: left;
	padding: 0 0 .5em;
	opacity: .75;
}

/* The region is focusable, so it must show focus. Themes that reset outlines
 * would otherwise leave a keyboard user with no indication they are in it. */
.acai-standing:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* The widget wrapper Elementor puts between its flex container and this figure
 * is the actual flex item, so it needs the same release — otherwise it grows to
 * the table's width and the figure never sees a narrower box to size against.
 * Scoped with :has() so no other HTML widget on the site is affected. */
.elementor-widget-html:has(.acai-standing),
.elementor-widget-html:has(.acai-standing) > .elementor-widget-container {
	min-width: 0;
	max-width: 100%;
}

/* The link back to the overview. Sits above the table on every detail page, so
 * someone who arrived from search is not stranded on a list of names. */
.acai-standing-back {
	margin: 0 0 1em;
}

.acai-standing-back a {
	text-decoration: none;
	opacity: .85;
}

.acai-standing-back a:hover,
.acai-standing-back a:focus-visible {
	opacity: 1;
	text-decoration: underline;
}