/* ==========================================================================
   ORGANICWAY — Table Design System v1.2
   Presets: A Fresh (default) | B Minimal | C Card | D Compact
   Scope  : front-end content tables — Gutenberg `figure.wp-block-table`
            (primary) + legacy bare tables inside post/product body.
            WooCommerce attribute tables are intentionally excluded.

   Cascade design
   --------------
   1. Scope selectors use :where() (zero specificity) so preset rules
      `figure.wp-block-table.ow-t-*` always win over defaults.
   2. Legacy bare-table rules come FIRST, then a var-reset rule restores
      inheritance for tables nested inside a figure (otherwise the legacy
      rule would re-declare --ow-t-* on the inner table and shadow the
      preset values declared on the figure).
   ========================================================================== */

:root {
	--ow-t-brand: #68a00f;          /* Astra accent green (links, badges) */
	--ow-t-brand-soft: #f4f9ef;
	--ow-t-text: #3a3a3a;
	--ow-t-head-text: #424242;
	--ow-t-border: #e2e6dd;
	--ow-t-stripe: #fafcf8;
	--ow-t-hover: #eff7e8;
	--ow-t-radius: 12px;
	--ow-t-speed: .18s;
}

/* ====================================================== default (Preset A) */
figure.wp-block-table {
	--ow-t-head-bg: var(--ow-t-brand);
	--ow-t-head-fg: #ffffff;
	--ow-t-cell-pad: 0.7em 0.9em;
	--ow-t-size: var(--ow-fs-base, 15px);
	--ow-t-border-color: var(--ow-t-border);
	--ow-t-row-stripe: var(--ow-t-stripe);
	--ow-t-row-hover: var(--ow-t-hover);
	--ow-t-first-col-weight: 600;
	--ow-t-first-col-color: #2f3a24;
	--ow-t-shadow: 0 1px 2px rgba(24, 40, 12, .05);
	--ow-t-radius-use: var(--ow-t-radius);

	margin: 1.6em 0;
	font-size: var(--ow-t-size);
	line-height: 1.55;
}

/* ------------------------------------------------- legacy bare tables */
:where(.entry-content, .woocommerce-tabs) > table:not(.woocommerce-product-attributes):not(.nutrition-facts-table) {
	--ow-t-head-bg: var(--ow-t-brand);
	--ow-t-head-fg: #ffffff;
	--ow-t-cell-pad: 0.7em 0.9em;
	--ow-t-border-color: var(--ow-t-border);
	--ow-t-row-stripe: var(--ow-t-stripe);
	--ow-t-row-hover: var(--ow-t-hover);
	--ow-t-shadow: 0 1px 2px rgba(24, 40, 12, .05);
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	margin: 1.6em 0;
	border: 1px solid var(--ow-t-border-color);
	border-radius: var(--ow-t-radius);
	overflow: hidden;
	box-shadow: var(--ow-t-shadow);
	background: #fff;
}

:where(.entry-content, .woocommerce-tabs) > table:not(.woocommerce-product-attributes):not(.nutrition-facts-table) > thead > tr > th,
:where(.entry-content, .woocommerce-tabs) > table:not(.woocommerce-product-attributes):not(.nutrition-facts-table) > tbody > tr > th {
	background: var(--ow-t-head-bg);
	color: var(--ow-t-head-fg);
	font-weight: 700;
	text-align: left;
	padding: var(--ow-t-cell-pad);
	border-bottom: 2px solid var(--ow-t-head-bg);
}

:where(.entry-content, .woocommerce-tabs) > table:not(.woocommerce-product-attributes):not(.nutrition-facts-table) > tbody > tr > td {
	padding: var(--ow-t-cell-pad);
	border-bottom: 1px solid var(--ow-t-border-color);
	color: var(--ow-t-text);
}

:where(.entry-content, .woocommerce-tabs) > table:not(.woocommerce-product-attributes):not(.nutrition-facts-table) > tbody > tr:nth-child(even) > td {
	background: var(--ow-t-row-stripe);
}

:where(.entry-content, .woocommerce-tabs) > table:not(.woocommerce-product-attributes):not(.nutrition-facts-table) > tbody > tr:hover > td {
	background: var(--ow-t-row-hover);
}

/* ---- reset: tables inside a figure take the figure's preset values ---- */
:where(.entry-content, .woocommerce-tabs, .woocommerce-product-details__short-description) figure.wp-block-table > table {
	--ow-t-head-bg: inherit !important;
	--ow-t-head-fg: inherit !important;
	--ow-t-cell-pad: inherit !important;
	--ow-t-border-color: inherit !important;
	--ow-t-row-stripe: inherit !important;
	--ow-t-row-hover: inherit !important;
	--ow-t-shadow: inherit !important;
	--ow-t-radius-use: inherit !important;
}

/* ---------------------------------------------------------------- table */
figure.wp-block-table > table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--ow-t-border-color);
	border-radius: var(--ow-t-radius-use);
	overflow: hidden;
	box-shadow: var(--ow-t-shadow);
	background: #fff;
	overflow-wrap: break-word;
}

/* header cells */
figure.wp-block-table > table > thead > tr > th,
figure.wp-block-table > table > tbody > tr > th,
figure.wp-block-table > table > tfoot > tr > th {
	background: var(--ow-t-head-bg);
	color: var(--ow-t-head-fg);
	font-weight: 700;
	font-size: .92em;
	text-transform: uppercase;
	letter-spacing: .04em;
	text-align: left;
	padding: var(--ow-t-cell-pad);
	border: 0;
	border-bottom: 2px solid var(--ow-t-head-bg);
	white-space: normal;
}

/* body cells */
figure.wp-block-table > table > tbody > tr > td,
figure.wp-block-table > table > tfoot > tr > td {
	padding: var(--ow-t-cell-pad);
	border: 0;
	border-bottom: 1px solid var(--ow-t-border-color);
	color: var(--ow-t-text);
	vertical-align: top;
	transition: background-color var(--ow-t-speed) ease, color var(--ow-t-speed) ease;
}

/* first column as row label */
figure.wp-block-table > table > tbody > tr > td:first-child {
	font-weight: var(--ow-t-first-col-weight);
	color: var(--ow-t-first-col-color);
}

/* zebra */
figure.wp-block-table > table > tbody > tr:nth-child(even) > td {
	background: var(--ow-t-row-stripe);
}

/* last row: no bottom border */
figure.wp-block-table > table > tbody > tr:last-child > td {
	border-bottom: 0;
}

/* tfoot */
figure.wp-block-table > table > tfoot > tr > td {
	background: var(--ow-t-brand-soft);
	font-weight: 600;
	color: var(--ow-t-head-text);
}

/* ---------------------------------------------------------------- hover */
figure.wp-block-table > table > tbody > tr:hover > td {
	background: var(--ow-t-row-hover);
	color: #22301a;
}

figure.wp-block-table > table > tbody > tr:hover > td:first-child {
	box-shadow: inset 3px 0 0 var(--ow-t-brand);
}

figure.wp-block-table > table > tbody > tr:focus-within > td {
	background: var(--ow-t-row-hover);
}

/* ================================================================ presets */

/* B — Minimal: no fills, hairline separators */
figure.wp-block-table.ow-t-b {
	--ow-t-head-bg: transparent;
	--ow-t-head-fg: var(--ow-t-brand);
	--ow-t-row-stripe: transparent;
	--ow-t-row-hover: #f6f8f4;
	--ow-t-first-col-color: var(--ow-t-head-text);
	--ow-t-shadow: none;
	--ow-t-border-color: #e8ebe4;
}
figure.wp-block-table.ow-t-b > table {
	box-shadow: none;
}
figure.wp-block-table.ow-t-b > table > thead > tr > th {
	border-bottom: 2px solid var(--ow-t-brand);
	padding-bottom: .55em;
}
figure.wp-block-table.ow-t-b > table > tbody > tr:hover > td:first-child {
	box-shadow: inset 2px 0 0 var(--ow-t-brand);
}

/* C — Card: solid brand header, elevated */
figure.wp-block-table.ow-t-c {
	--ow-t-head-bg: linear-gradient(180deg, #6fa914 0%, var(--ow-t-brand) 100%);
	--ow-t-head-fg: #ffffff;
	--ow-t-row-stripe: #f7faf3;
	--ow-t-row-hover: #eaf5e0;
	--ow-t-cell-pad: 0.85em 1em;
	--ow-t-shadow: 0 2px 6px rgba(24, 40, 12, .08);
	--ow-t-radius-use: 14px;
}
figure.wp-block-table.ow-t-c > table > thead > tr > th {
	padding: .9em 1em;
	font-size: .9em;
}
figure.wp-block-table.ow-t-c > table > tbody > tr:hover > td {
	box-shadow: inset 0 0 0 999px rgba(111, 169, 20, .07);
}

/* D — Compact: dense data tables */
figure.wp-block-table.ow-t-d {
	--ow-t-cell-pad: .45em .7em;
	--ow-t-size: .94em;
	--ow-t-row-stripe: #fbfcfa;
	--ow-t-row-hover: #f3f8ee;
	--ow-t-shadow: none;
}
figure.wp-block-table.ow-t-d > table > thead > tr > th {
	font-size: .85em;
	padding: .5em .7em;
}

/* legacy tables: preset class sits on the table element itself */
:where(.entry-content, .woocommerce-tabs) > table.ow-t-b {
	--ow-t-head-bg: transparent;
	--ow-t-head-fg: var(--ow-t-brand);
	--ow-t-row-stripe: transparent;
	--ow-t-shadow: none;
}
:where(.entry-content, .woocommerce-tabs) > table.ow-t-c {
	--ow-t-cell-pad: .85em 1em;
}
:where(.entry-content, .woocommerce-tabs) > table.ow-t-d {
	--ow-t-cell-pad: .45em .7em;
	--ow-t-size: .94em;
	--ow-t-shadow: none;
}

/* ---------------------------------------------------------------- mobile */
@media (max-width: 782px) {
	figure.wp-block-table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	figure.wp-block-table > table {
		min-width: 460px;
	}
}

/* ---------------------------------------------------------------- a11y */
@media (prefers-reduced-motion: reduce) {
	figure.wp-block-table > table > tbody > tr > td {
		transition: none;
	}
}

/* ---------------------------------------------------------------- print */
@media print {
	figure.wp-block-table > table {
		box-shadow: none;
		border-color: #999;
	}
	figure.wp-block-table > table > thead > tr > th {
		background: #eee !important;
		color: #000 !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
	figure.wp-block-table > table > tbody > tr:hover > td {
		background: transparent !important;
	}
}