/* ==========================================================================
   WPTable – ACSB Table for Elementor (structural CSS)
   ==========================================================================
   Copy this file's content into the site's main stylesheet and maintain it
   there. Then stop loading it from the plugin:

       add_filter( 'wpt_table_load_css', '__return_false' );

   ZERO design declarations live here: no borders, padding, margins,
   backgrounds, colors or typography are hardcoded or defaulted. Every design
   property is driven by CSS custom properties written by the widget's STYLE
   panel (and per-row / per-cell overrides in Content > Rows). Anything left
   unset in the panel falls back to inherited / browser values — including
   the row divider, which renders only when Thickness + Style + Color are all
   set. The only literal declarations below are structural mechanics
   (overflow, display, table model, aspect-ratio preservation) and the
   functional screen-reader utility.

   Variables written by the panel (responsive where applicable):

   --wpt-table-bg                       Table  > Background Color
   --wpt-radius-tl / -tr / -br / -bl    Table  > Border Radius
   --wpt-divider-color                  Table  > Row Divider Color
   --wpt-divider-width                  Table  > Row Divider Thickness
   --wpt-divider-style                  Table  > Row Divider Style
   --wpt-col-w                          Table  > Columns Width (every column;
                                        nothing set = equal shares via the
                                        fixed table layout)
   --wpt-first-col-w                    Table  > First Column Width
                                        (falls back to Columns Width)
   --wpt-first-col-align                Table  > First Column Alignment (tbody only)
   --wpt-cell-valign                    Table  > Vertical Alignment

   Global (all body rows / cells — header excluded), on the wrapper:
   --wpt-cell-align                     Rows   > Cells Alignment (tbody cells only)
   --wpt-row-g-bg                       Rows   > Background Color
   --wpt-row-g-pad-t / -r / -b / -l     Rows   > Padding
   --wpt-row-g-bw-t / -r / -b / -l      Rows   > Border Width (per side)
   --wpt-row-g-bs / -bc                 Rows   > Border Style / Color
   --wpt-c-g-bg                         Cells  > Background Color
   --wpt-cell-pad-t / -r / -b / -l      Cells  > Padding
   --wpt-c-g-pis / -pie                 Cells  > Padding Inline Start / End
                                        (tbody only; sits between the
                                        overrides and Cells > Padding)
   --wpt-fc-skip-s / -e                 Cells  > Exclude First Column switcher
                                        — resolves to the tiers below the
                                        inline paddings so the first column
                                        skips them
   --wpt-c-g-bw-t / -r / -b / -l        Cells  > Border Width (per side)
   --wpt-c-g-bs / -bc                   Cells  > Border Style / Color

   Last body row only (on the wrapper; consumed by the :last-child rule —
   beats the globals, loses to per-row "Customize Design"):
   --wpt-lrow-bg                        Last Row > Background Color
   --wpt-lrow-pad-t / -r / -b / -l      Last Row > Padding
   --wpt-lrow-bw-t / -r / -b / -l       Last Row > Border Width (per side)
   --wpt-lrow-bs / -bc                  Last Row > Border Style / Color

   Per-row overrides ("Customize Design" on, written on that <tr> / cell —
   always win over the globals via the fallback chains below):
   --wpt-row-bg                         Rows item > Row Background
   --wpt-row-pad-t / -r / -b / -l       Rows item > Row Padding
   --wpt-row-bw-t / -r / -b / -l        Rows item > Row Border Width (per side)
   --wpt-row-bs / -bc                   Rows item > Row Border Style / Color
   --wpt-c-bg                           Rows item > Cell N — Background
   --wpt-c-pad-t / -r / -b / -l         Rows item > Cell N — Padding
   --wpt-c-bw-t / -r / -b / -l          Rows item > Cell N — Border Width (per side)
   --wpt-c-bs / -bc                     Rows item > Cell N — Border Style / Color

   Header (header cells only — the Row Divider does NOT apply to thead):
   --wpt-th-color                       Header > Text Color
   --wpt-th-bg                          Header > Background Color
   --wpt-th-align                       Header > Alignment (thead cells only,
                                        independent of the body alignment)
   --wpt-th-pad-t / -r / -b / -l        Header > Padding
   --wpt-th-bw-t / -r / -b / -l         Header > Border Width (per side)
   --wpt-th-bs / -bc                    Header > Border Style / Color
   --wpt-th-media-size                  Header > Icon / Image Size

   Border model: each side is a composed shorthand
   `border-<side>: <width chain> <style chain> <color chain>` — a side
   renders ONLY when its width AND a style AND a color all resolve somewhere
   in the chain. Empty sides in the width control stay borderless, which is
   how you choose where the border appears. No default border exists.

   --wpt-td-color                       Cells  > Text Color
   --wpt-icon-size                      Icons  > Size
   --wpt-icon-color                     Icons  > Color
                                        (per-cell override: Rows item > Cell N
                                        — Icon Color, scoped to that cell.
                                        Applied only via .wpt-icon-colored,
                                        which the widget adds when a color is
                                        actually chosen — otherwise the SVG
                                        keeps its own colors)
   --wpt-img-w                          Images > Width

   Precedence (body cells), per property:
   cell override → row override → global Cells → global Rows.
   The bottom border additionally slots the Row Divider between the overrides
   and the globals: cell → row → divider → global Cells → global Rows.

   Header/body typography is applied by Elementor directly to
   .wpt-th-text / .wpt-td-text (Style > Header / Cells > Typography),
   including Global Fonts. Note: browser defaults apply where nothing is set
   (e.g. <th> renders browser-bold/centered until Header/Cells typography or
   alignment is set in the panel — or overridden here, in your CSS).

   Extra hooks for this stylesheet: every cell carries wpt-col-1..N (column
   index) and wpt-type-text / -icon / -image / -empty classes, so per-column
   or per-type rules can be added here without touching the widget.
   ========================================================================== */

.wpt-table-wrap {
	overflow-x: auto; /* structural: horizontal scroll on narrow viewports */
	background: var(--wpt-table-bg);
	border-top-left-radius: var(--wpt-radius-tl);
	border-top-right-radius: var(--wpt-radius-tr);
	border-bottom-right-radius: var(--wpt-radius-br);
	border-bottom-left-radius: var(--wpt-radius-bl);
}

.wpt-table {
	width: 100%; /* structural: tables shrink-wrap to content by default */
	border-collapse: collapse; /* structural: single-line divider model */
	/* Structural per request: with no width set anywhere, all columns share
	   the table width equally; Columns Width / First Column Width take over
	   when set. (Column widths are read from the first rendered row — the
	   header when present.) */
	table-layout: fixed;
}

/* Header cells ------------------------------------------------------------ */

/* Header cells are excluded from the Rows/Cells globals, from per-row
   overrides AND from the Row Divider — they take only the Header section
   values (alignment falls back to the table-wide one). Borders are per-side
   composed shorthands: a side renders only when its width + style + color
   are set; there is no forced thead border.
   All thead rules are explicitly scoped through `thead.wpt-thead` (element +
   class) so they pin to the widget's header and outrank generic theme
   `thead` / `th` styles. */
.wpt-table thead.wpt-thead .wpt-th {
	padding-top: var(--wpt-th-pad-t);
	padding-right: var(--wpt-th-pad-r);
	padding-bottom: var(--wpt-th-pad-b);
	padding-left: var(--wpt-th-pad-l);
	background: var(--wpt-th-bg);
	/* Header alignment is independent — body alignment never leaks into thead. */
	text-align: var(--wpt-th-align);
	vertical-align: var(--wpt-cell-valign);
	border-top: var(--wpt-th-bw-t) var(--wpt-th-bs) var(--wpt-th-bc);
	border-right: var(--wpt-th-bw-r) var(--wpt-th-bs) var(--wpt-th-bc);
	border-bottom: var(--wpt-th-bw-b) var(--wpt-th-bs) var(--wpt-th-bc);
	border-left: var(--wpt-th-bw-l) var(--wpt-th-bs) var(--wpt-th-bc);
	width: var(--wpt-col-w);
}

/* First header cell defines the first column under the fixed layout — needs
   its own rule because the scoped th rule above outranks the generic
   first-child width rule below. */
.wpt-table thead.wpt-thead .wpt-th:first-child {
	width: var(--wpt-first-col-w, var(--wpt-col-w));
}

/* Body cells ---------------------------------------------------------------- */

/* Every design property resolves per the precedence documented above:
   cell override → row override → global Cells → global Rows (all
   panel-driven; unset chains fall back to browser values). Borders appear
   only when a style is set somewhere in the chain — there is no default
   border. The bottom side slots the Row Divider between the overrides and
   the globals. */
.wpt-table .wpt-td {
	padding-top: var(--wpt-c-pad-t, var(--wpt-row-pad-t, var(--wpt-cell-pad-t, var(--wpt-row-g-pad-t))));
	padding-bottom: var(--wpt-c-pad-b, var(--wpt-row-pad-b, var(--wpt-cell-pad-b, var(--wpt-row-g-pad-b))));
	/* Horizontal padding is logical (start/end): the dedicated Cells >
	   Padding Inline Start/End tier sits between the overrides and the
	   general Cells > Padding. In LTR start = left / end = right; the l/r
	   variables come from the physical DIMENSIONS controls. */
	padding-inline-start: var(--wpt-c-pad-l, var(--wpt-row-pad-l, var(--wpt-c-g-pis, var(--wpt-cell-pad-l, var(--wpt-row-g-pad-l)))));
	padding-inline-end: var(--wpt-c-pad-r, var(--wpt-row-pad-r, var(--wpt-c-g-pie, var(--wpt-cell-pad-r, var(--wpt-row-g-pad-r)))));
	background: var(--wpt-c-bg, var(--wpt-row-bg, var(--wpt-c-g-bg, var(--wpt-row-g-bg))));
	text-align: var(--wpt-cell-align);
	vertical-align: var(--wpt-cell-valign);
	width: var(--wpt-col-w);
	border-top:
		var(--wpt-c-bw-t, var(--wpt-row-bw-t, var(--wpt-c-g-bw-t, var(--wpt-row-g-bw-t))))
		var(--wpt-c-bs, var(--wpt-row-bs, var(--wpt-c-g-bs, var(--wpt-row-g-bs))))
		var(--wpt-c-bc, var(--wpt-row-bc, var(--wpt-c-g-bc, var(--wpt-row-g-bc))));
	border-right:
		var(--wpt-c-bw-r, var(--wpt-row-bw-r, var(--wpt-c-g-bw-r, var(--wpt-row-g-bw-r))))
		var(--wpt-c-bs, var(--wpt-row-bs, var(--wpt-c-g-bs, var(--wpt-row-g-bs))))
		var(--wpt-c-bc, var(--wpt-row-bc, var(--wpt-c-g-bc, var(--wpt-row-g-bc))));
	border-left:
		var(--wpt-c-bw-l, var(--wpt-row-bw-l, var(--wpt-c-g-bw-l, var(--wpt-row-g-bw-l))))
		var(--wpt-c-bs, var(--wpt-row-bs, var(--wpt-c-g-bs, var(--wpt-row-g-bs))))
		var(--wpt-c-bc, var(--wpt-row-bc, var(--wpt-c-g-bc, var(--wpt-row-g-bc))));
	/* Bottom side slots the Row Divider between the overrides and the globals. */
	border-bottom:
		var(--wpt-c-bw-b, var(--wpt-row-bw-b, var(--wpt-divider-width, var(--wpt-c-g-bw-b, var(--wpt-row-g-bw-b)))))
		var(--wpt-c-bs, var(--wpt-row-bs, var(--wpt-divider-style, var(--wpt-c-g-bs, var(--wpt-row-g-bs)))))
		var(--wpt-c-bc, var(--wpt-row-bc, var(--wpt-divider-color, var(--wpt-c-g-bc, var(--wpt-row-g-bc)))));
}

/* Last body row ------------------------------------------------------------- */

/* Same properties with the Last Row tier (--wpt-lrow-*) inserted after the
   per-row overrides: cell → row → LAST ROW → (divider, bottom only) →
   global Cells → global Rows. Rows with "Customize Design" still win. */
.wpt-tbody .wpt-tr:last-child > .wpt-td {
	padding-top: var(--wpt-c-pad-t, var(--wpt-row-pad-t, var(--wpt-lrow-pad-t, var(--wpt-cell-pad-t, var(--wpt-row-g-pad-t)))));
	padding-bottom: var(--wpt-c-pad-b, var(--wpt-row-pad-b, var(--wpt-lrow-pad-b, var(--wpt-cell-pad-b, var(--wpt-row-g-pad-b)))));
	padding-inline-start: var(--wpt-c-pad-l, var(--wpt-row-pad-l, var(--wpt-lrow-pad-l, var(--wpt-c-g-pis, var(--wpt-cell-pad-l, var(--wpt-row-g-pad-l))))));
	padding-inline-end: var(--wpt-c-pad-r, var(--wpt-row-pad-r, var(--wpt-lrow-pad-r, var(--wpt-c-g-pie, var(--wpt-cell-pad-r, var(--wpt-row-g-pad-r))))));
	background: var(--wpt-c-bg, var(--wpt-row-bg, var(--wpt-lrow-bg, var(--wpt-c-g-bg, var(--wpt-row-g-bg)))));
	border-top:
		var(--wpt-c-bw-t, var(--wpt-row-bw-t, var(--wpt-lrow-bw-t, var(--wpt-c-g-bw-t, var(--wpt-row-g-bw-t)))))
		var(--wpt-c-bs, var(--wpt-row-bs, var(--wpt-lrow-bs, var(--wpt-c-g-bs, var(--wpt-row-g-bs)))))
		var(--wpt-c-bc, var(--wpt-row-bc, var(--wpt-lrow-bc, var(--wpt-c-g-bc, var(--wpt-row-g-bc)))));
	border-right:
		var(--wpt-c-bw-r, var(--wpt-row-bw-r, var(--wpt-lrow-bw-r, var(--wpt-c-g-bw-r, var(--wpt-row-g-bw-r)))))
		var(--wpt-c-bs, var(--wpt-row-bs, var(--wpt-lrow-bs, var(--wpt-c-g-bs, var(--wpt-row-g-bs)))))
		var(--wpt-c-bc, var(--wpt-row-bc, var(--wpt-lrow-bc, var(--wpt-c-g-bc, var(--wpt-row-g-bc)))));
	border-left:
		var(--wpt-c-bw-l, var(--wpt-row-bw-l, var(--wpt-lrow-bw-l, var(--wpt-c-g-bw-l, var(--wpt-row-g-bw-l)))))
		var(--wpt-c-bs, var(--wpt-row-bs, var(--wpt-lrow-bs, var(--wpt-c-g-bs, var(--wpt-row-g-bs)))))
		var(--wpt-c-bc, var(--wpt-row-bc, var(--wpt-lrow-bc, var(--wpt-c-g-bc, var(--wpt-row-g-bc)))));
	border-bottom:
		var(--wpt-c-bw-b, var(--wpt-row-bw-b, var(--wpt-lrow-bw-b, var(--wpt-divider-width, var(--wpt-c-g-bw-b, var(--wpt-row-g-bw-b))))))
		var(--wpt-c-bs, var(--wpt-row-bs, var(--wpt-lrow-bs, var(--wpt-divider-style, var(--wpt-c-g-bs, var(--wpt-row-g-bs))))))
		var(--wpt-c-bc, var(--wpt-row-bc, var(--wpt-lrow-bc, var(--wpt-divider-color, var(--wpt-c-g-bc, var(--wpt-row-g-bc))))));
}

/* First-column exclusion for the inline paddings: the "Exclude First Column"
   switcher writes the skip variables, which resolve directly to the tiers
   BELOW the inline paddings — so the first column behaves as if they were
   never set. Switcher off → the skip vars don't exist and the chain falls
   through to the inline paddings normally. */
.wpt-tbody .wpt-tr > .wpt-td:first-child {
	padding-inline-start: var(--wpt-c-pad-l, var(--wpt-row-pad-l, var(--wpt-fc-skip-s, var(--wpt-c-g-pis, var(--wpt-cell-pad-l, var(--wpt-row-g-pad-l))))));
	padding-inline-end: var(--wpt-c-pad-r, var(--wpt-row-pad-r, var(--wpt-fc-skip-e, var(--wpt-c-g-pie, var(--wpt-cell-pad-r, var(--wpt-row-g-pad-r))))));
}

/* Last row × first column (highest specificity of the padding rules):
   Last Row tier first, then the exclusion skip, then the inline paddings. */
.wpt-tbody .wpt-tr:last-child > .wpt-td:first-child {
	padding-inline-start: var(--wpt-c-pad-l, var(--wpt-row-pad-l, var(--wpt-lrow-pad-l, var(--wpt-fc-skip-s, var(--wpt-c-g-pis, var(--wpt-cell-pad-l, var(--wpt-row-g-pad-l)))))));
	padding-inline-end: var(--wpt-c-pad-r, var(--wpt-row-pad-r, var(--wpt-lrow-pad-r, var(--wpt-fc-skip-e, var(--wpt-c-g-pie, var(--wpt-cell-pad-r, var(--wpt-row-g-pad-r)))))));
}

/* First column: width applies to the whole column (header + body); the
   alignment override is body-only — the header first cell follows
   Header > Alignment like the rest of the thead. */
.wpt-table .wpt-tr > *:first-child {
	width: var(--wpt-first-col-w, var(--wpt-col-w));
}

.wpt-tbody .wpt-tr > *:first-child {
	text-align: var(--wpt-first-col-align, var(--wpt-cell-align));
}

/* Header ------------------------------------------------------------------ */

thead.wpt-thead .wpt-th-inner {
	display: block; /* structural: stacks text above/below the media */
}

thead.wpt-thead .wpt-th-text {
	display: block; /* structural */
	color: var(--wpt-th-color);
}

/* Icon/image inside a header cell. Sizing falls back to the body icon/image
   sizes when the header size control is unset. */
thead.wpt-thead .wpt-th-media {
	display: inline-block; /* structural */
	font-size: var(--wpt-th-media-size, var(--wpt-icon-size));
}

thead.wpt-thead .wpt-th-media svg,
thead.wpt-thead .wpt-th-media img {
	width: var(--wpt-th-media-size, var(--wpt-img-w));
	height: auto; /* structural: preserves aspect ratio against the HTML
	                 width/height attributes (auto = the CSS initial value) */
}

/* Body text ---------------------------------------------------------------- */

.wpt-td-text {
	color: var(--wpt-td-color);
}

/* Icons -------------------------------------------------------------------- */

/* Color forcing is OPT-IN: the widget adds .wpt-icon-colored only when an
   Icon Color is actually chosen (per-cell or Style > Icons, plain or Global
   Color). Without that class no fill/stroke is declared here at all, so the
   SVG keeps its own colors — the cell's text color is never pushed onto the
   icon. */
.wpt-icon {
	display: inline-block; /* structural */
	font-size: var(--wpt-icon-size);
}

.wpt-icon svg {
	width: var(--wpt-icon-size);
	height: auto; /* structural: aspect ratio */
}

.wpt-icon-colored {
	color: var(--wpt-icon-color); /* currentColor source for the rules below */
}

.wpt-icon-colored svg {
	fill: currentColor !important;
}

.wpt-icon-colored svg path {
	stroke: currentColor !important;
}

/* Images ------------------------------------------------------------------- */

.wpt-img {
	display: inline-block; /* structural */
}

.wpt-img img {
	width: var(--wpt-img-w);
	height: auto; /* structural: aspect ratio */
}

/* Caption ------------------------------------------------------------------ */

.wpt-caption {
	padding-top: var(--wpt-th-pad-t, var(--wpt-cell-pad-t));
	padding-right: var(--wpt-th-pad-r, var(--wpt-cell-pad-r));
	padding-bottom: var(--wpt-th-pad-b, var(--wpt-cell-pad-b));
	padding-left: var(--wpt-th-pad-l, var(--wpt-cell-pad-l));
	color: var(--wpt-th-color);
	text-align: var(--wpt-first-col-align, var(--wpt-cell-align));
}

/* Accessibility ------------------------------------------------------------ */

/* Functional screen-reader-only utility (standard clip pattern) — its
   literal values make the element invisible; they are not visual design. */
.wpt-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
