/**
 * OF Elementor Widgets - Table
 *
 * Rows and cells are Elementor containers (".e-con"): they are laid out as a grid with the
 * number of columns in --ofew-cols (set by the widget). Elementor custom properties (--display,
 * --gap, --padding-*) are used so that each container's own settings still win.
 */

.ofew-table {
	max-width: 100%;
	/* Narrow screens: the table scrolls horizontally (see "Minimum width" in the Style tab). */
	overflow-x: auto;
}

.ofew-table__table {
	--ofew-cols: 3;
	position: relative;
	min-width: 100%;
}

/*
 * "Responsive layout" (Style tab). The "Stacked" layout only sets custom properties on the table
 * (see Table_Widget::register_responsive_style_controls), so it follows Elementor's breakpoints:
 *   --ofew-grid-override  one column per row
 *   --ofew-label-display  shows the column name (the cell's data-label) above each cell
 *   --ofew-head-*         the header row, hidden visually but still read by screen readers
 */
.ofew-table .ofew-table__body {
	display: flex;
	flex-direction: column;
}

.ofew-table .ofew-table__head {
	position: var(--ofew-head-position, static);
	width: var(--ofew-head-size, auto);
	height: var(--ofew-head-size, auto);
	margin: var(--ofew-head-margin, 0);
	overflow: var(--ofew-head-overflow, visible);
	clip-path: var(--ofew-head-clip, none);
	white-space: var(--ofew-head-wrap, normal);
}

/* attr() must be written here (not inside a custom property) to be read from the cell itself. */
.ofew-table .ofew-table__body > .e-con > .e-con::after {
	content: attr(data-label);
	/* First item of the cell (a flex container). ::before is not used: Elementor draws the container's background overlay there. */
	order: -1;
	display: var(--ofew-label-display, none);
	margin-bottom: 6px;
	font-family: var(--font-sans-10-medium, inherit);
	font-weight: 500;
	line-height: 1.3;
}

/* Browsers with alt text for generated content: the visual label is not read twice by screen readers. */
@supports (content: "a" / "") {
	.ofew-table .ofew-table__body > .e-con > .e-con::after {
		content: attr(data-label) / "";
	}
}

.ofew-table__caption {
	margin-bottom: 8px;
}

/* Header row and body rows share the same column grid, so the columns line up. */
.ofew-table .ofew-table__row--head,
.ofew-table .ofew-table__body > .e-con {
	--display: grid;
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	display: grid;
	/* Per-column widths (Style > Columns); equal columns when none is set. */
	grid-template-columns: var(--ofew-grid-override, var(--ofew-cols-template, repeat(var(--ofew-cols), minmax(0, 1fr))));
	gap: 0;
	width: 100%;
}

/* Body rows: no spacing of their own (Elementor adds 10px to containers by default). */
.ofew-table .ofew-table__body > .e-con {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--margin-top: 0px;
	--margin-bottom: 0px;
}

.ofew-table .ofew-table__body > .e-con > .e-con {
	--width: 100%;
	min-width: 0;
}

.ofew-table__row--head {
	background-color: #005f78;
}

.ofew-table .ofew-table__th {
	padding: 12px 10px;
	color: #fff;
	font-family: var(--font-sans-10-medium, inherit);
	font-weight: 500;
	text-align: left;
	overflow-wrap: anywhere;
}

/* Caption kept for screen readers only. */
.ofew-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}