/* NewRoad content tables.
 * Applies automatically to any table the editor creates (.nr-table) and to every table
 * inside the product description / dynamic-field content on the product template.
 *
 * Palette comes straight from the Elementor kit:
 *   #29417F  Accent    - navy, column headers + frame
 *   #1D95F1  Secondary - light blue, title bands
 *   #0E1B2E  Dark Blue
 *   #F9F9F9  Gray      - zebra rows
 *
 * Rule order matters here. Each concern is its own rule:
 *   1. reset      - low specificity, clears theme borders
 *   2. colour     - guarded with :not([style]) so hand-written code always wins
 *   3. dividers   - must stay more specific than the reset, never carry the guard
 * Merging colour and border into one guarded rule raises its specificity above the
 * divider rule, and the dividers silently vanish.
 */

:root {
	--nr-navy: #29417F;
	--nr-blue: #1D95F1;
	--nr-line: #d7e0f0;
	--nr-zebra: #F9F9F9;
	--nr-th-divider: rgba(255, 255, 255, .38);
}

.nr-table-wrap {
	margin: 24px 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.nr-table,
.elementor-widget-woocommerce-product-content table,
.elementor-widget-theme-post-content table,
.nr-content table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--nr-navy);
	border-radius: 14px;
	overflow: hidden;
	font-size: 15px;
	line-height: 1.5;
	color: #1f2937;
	background: #fff;
	table-layout: auto;
}

/* Table title, above every row. */
.nr-table caption,
.elementor-widget-woocommerce-product-content table caption,
.elementor-widget-theme-post-content table caption,
.nr-content table caption {
	caption-side: top;
	text-align: start;
	font-weight: 700;
	font-size: 16px;
	color: #ffffff;
	background: var(--nr-caption-bg, var(--nr-blue));
	padding: 14px 18px;
}

/* ---- 1. Reset ---- */
.nr-table th,
.elementor-widget-woocommerce-product-content table th,
.elementor-widget-theme-post-content table th,
.nr-content table th {
	font-weight: 700;
	text-align: start;
	padding: 14px 18px;
	border: 0;
	vertical-align: middle;
}

.nr-table td,
.elementor-widget-woocommerce-product-content table td,
.elementor-widget-theme-post-content table td,
.nr-content table td {
	padding: 14px 18px;
	border: 0;
	vertical-align: middle;
}

/* ---- 2. Colour ----
 * The colour sits ON the th: themes routinely override th colour, and inheriting it
 * from the tr is exactly what turns a dark header black-on-black.
 * The :not() guards mean a background or colour written by hand always wins.
 */
.nr-table th:not([style*="background"]),
.elementor-widget-woocommerce-product-content table th:not([style*="background"]),
.elementor-widget-theme-post-content table th:not([style*="background"]),
.nr-content table th:not([style*="background"]) {
	background: var(--nr-th-bg, var(--nr-navy));
}

.nr-table th:not([style*="color"]),
.elementor-widget-woocommerce-product-content table th:not([style*="color"]),
.elementor-widget-theme-post-content table th:not([style*="color"]),
.nr-content table th:not([style*="color"]) {
	color: var(--nr-th-color, #ffffff);
}

/* ---- 3. Dividers ---- */
.nr-table th + th,
.elementor-widget-woocommerce-product-content table th + th,
.elementor-widget-theme-post-content table th + th,
.nr-content table th + th {
	border-inline-start: 1px solid var(--nr-th-divider);
}

.nr-table tr:not(:last-child) th,
.nr-content table tr:not(:last-child) th {
	border-bottom: 1px solid var(--nr-th-divider);
}

.nr-table td,
.elementor-widget-woocommerce-product-content table td,
.elementor-widget-theme-post-content table td,
.nr-content table td {
	border-bottom: 1px solid var(--nr-line);
}

.nr-table td + td,
.nr-table td + th,
.nr-table th + td,
.elementor-widget-woocommerce-product-content table td + td,
.elementor-widget-theme-post-content table td + td,
.nr-content table td + td,
.nr-content table td + th,
.nr-content table th + td {
	border-inline-start: 1px solid var(--nr-line);
}

/* A cell merged across columns owns no divider. */
.nr-table td[colspan],
.nr-table th[colspan],
.nr-content table td[colspan],
.nr-content table th[colspan] {
	border-inline-start: 0;
}

.nr-table tbody tr:nth-child(even) td,
.elementor-widget-woocommerce-product-content table tbody tr:nth-child(even) td,
.nr-content table tbody tr:nth-child(even) td {
	background: var(--nr-zebra);
}

.nr-table tbody tr:hover td,
.nr-content table tbody tr:hover td {
	background: #eef2f9;
}

.nr-table tbody tr:last-child td,
.elementor-widget-woocommerce-product-content table tbody tr:last-child td,
.nr-content table tbody tr:last-child td {
	border-bottom: 0;
}

/* ---- Section title row: one band across the table, no dividers ---- */
.nr-table th.nr-section,
.elementor-widget-woocommerce-product-content table th.nr-section,
.elementor-widget-theme-post-content table th.nr-section,
.nr-content table th.nr-section {
	font-size: 16px;
	padding: 13px 18px;
	border-inline-start: 0;
	border-bottom: 0;
}

.nr-table th.nr-section:not([style*="background"]),
.elementor-widget-woocommerce-product-content table th.nr-section:not([style*="background"]),
.elementor-widget-theme-post-content table th.nr-section:not([style*="background"]),
.nr-content table th.nr-section:not([style*="background"]) {
	background: var(--nr-section-bg, var(--nr-blue));
}

/* A th used as a row label (a th sitting next to td cells) stays light, not a navy block.
 * A full header row is marked .nr-header-row and keeps the navy default. */
.nr-table tbody tr:not(.nr-header-row) th:not(.nr-section):not([style*="background"]),
.nr-content table tbody tr:not(.nr-header-row) th:not(.nr-section):not([style*="background"]) {
	background: #eef2f9;
}

.nr-table tbody tr:not(.nr-header-row) th:not(.nr-section):not([style*="color"]),
.nr-content table tbody tr:not(.nr-header-row) th:not(.nr-section):not([style*="color"]) {
	color: #0E1B2E;
}

.nr-table tbody tr:not(.nr-header-row) th:not(.nr-section),
.nr-content table tbody tr:not(.nr-header-row) th:not(.nr-section) {
	border-bottom: 1px solid var(--nr-line);
}

/* A mid-table header row: same navy band as a thead row, dividers and all. */
.nr-table tr.nr-header-row th:not(.nr-section),
.nr-content table tr.nr-header-row th:not(.nr-section) {
	border-bottom: 1px solid var(--nr-th-divider);
}

.nr-table tr.nr-header-row th + th,
.nr-content table tr.nr-header-row th + th {
	border-inline-start: 1px solid var(--nr-th-divider);
}

/* ---- Header colour: three ways to override ----
 * 1. Per table, from the Code view:  <table class="nr-table" style="--nr-th-bg:#0E1B2E">
 * 2. Per cell, ready-made classes:   <th class="nr-th-blue">  (Cell properties > Class)
 * 3. Per cell, free hand:            <th style="background:#123456">  - always wins
 */
.nr-table th.nr-th-navy,
.nr-content table th.nr-th-navy {
	background: #29417F;
	color: #ffffff;
}

.nr-table th.nr-th-blue,
.nr-content table th.nr-th-blue {
	background: #1D95F1;
	color: #ffffff;
}

.nr-table th.nr-th-dark,
.nr-content table th.nr-th-dark {
	background: #0E1B2E;
	color: #ffffff;
}

.nr-table th.nr-th-light,
.nr-content table th.nr-th-light {
	background: #eef2f9;
	color: #0E1B2E;
}

.nr-table th.nr-th-plain,
.nr-content table th.nr-th-plain {
	background: transparent;
	color: #0E1B2E;
}

/* A light header needs dark dividers, not the white ones a navy header uses. */
.nr-table th.nr-th-light + th.nr-th-light,
.nr-table th.nr-th-plain + th.nr-th-plain,
.nr-content table th.nr-th-light + th.nr-th-light,
.nr-content table th.nr-th-plain + th.nr-th-plain {
	border-inline-start: 1px solid var(--nr-line);
}

/* Compact preset. */
.nr-table--compact th,
.nr-table--compact td {
	padding: 9px 12px;
	font-size: 14px;
}

@media (max-width: 767px) {
	.nr-table,
	.elementor-widget-woocommerce-product-content table,
	.nr-content table {
		font-size: 14px;
	}

	.nr-table th,
	.nr-table td,
	.elementor-widget-woocommerce-product-content table th,
	.elementor-widget-woocommerce-product-content table td,
	.nr-content table th,
	.nr-content table td {
		padding: 10px 12px;
	}

	.nr-table caption,
	.nr-table th.nr-section,
	.nr-content table caption {
		font-size: 15px;
		padding: 12px 14px;
	}
}

/* Inside the TinyMCE editor: show the real look. */
body#tinymce.wp-editor {
	padding: 12px;
}

body#tinymce .nr-table {
	margin: 12px 0;
}