/*
 * Rugby Hub article styling — the long-form editorial look for single blog posts.
 *
 * Scoped to `.de-editorial .entry-content` on purpose: it styles the ARTICLE prose only, and
 * never touches product pages, taxonomy archives, or the [de_*] price grids embedded inside an
 * article (those keep their dealengine.css styling — this file deliberately leaves .de-* alone).
 *
 * Loaded AFTER Astra (see DealEngine_Assets::enqueue_article dependency list), so on any equal-
 * specificity selector this wins without !important — the same load-order fix the product CSS uses.
 *
 * Design: sans headings over a serif reading column (system fonts only — no web-font load), a
 * hairline comparison table in place of the theme's boxed one, and a comfortable measure. Edit the
 * tokens below to retune; every rule hangs off them.
 */

.de-editorial .entry-content {
	--a-ink:   #2a343d;   /* body text */
	--a-navy:  #14293d;   /* headings, strong, lead cell */
	--a-teal:  #0b8073;   /* links, labels */
	--a-soft:  #59636d;   /* muted (table head, captions) */
	--a-line:  rgba(20, 41, 61, .14);   /* stronger rule (table head underline) */
	--a-hair:  rgba(20, 41, 61, .08);   /* hairline (table rows) */
	--a-flag:  #a8571c;   /* callout accent */

	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	font-family: "Charter", "Iowan Old Style", Georgia, "Times New Roman", serif;
	font-size: 17px;
	line-height: 1.62;
	color: var(--a-ink);
}

/* Breathing room top and bottom on the info PAGES (About, Contact, legal…), which sit straight in
 * .entry-content with no title header, so they otherwise butt right up against the nav and footer.
 * Applied to .entry-content (which this file reliably styles) and scoped to `.page` so the article
 * — whose title lives in .entry-header — is not pushed away from its intro. */
.de-editorial.page .entry-content { padding-top: 3rem; padding-bottom: 4rem; }

/* Byline row under the (centred) title: updated date · prices checked · author. */
.de-editorial .entry-content .de-byline {
	text-align: center;
	font-family: "Segoe UI", Roboto, -apple-system, Helvetica, Arial, sans-serif;
	font-size: .82rem;
	letter-spacing: .02em;
	color: var(--a-soft);
	margin: -.2em 0 2em;
}

/* The post title sits in Astra's header, OUTSIDE .entry-content — centre it over the article. */
.de-editorial .entry-header { text-align: center; }
.de-editorial .entry-header .entry-title { margin-bottom: .35em; }

.de-editorial .entry-content p { margin: 0 0 1em; }
.de-editorial .entry-content strong { color: var(--a-navy); font-weight: 700; }
.de-editorial .entry-content a { color: var(--a-teal); text-decoration: underline; text-underline-offset: 2px; }
.de-editorial .entry-content a:hover { text-decoration-thickness: 2px; }

/* Lead paragraph — the first line of the article reads a touch larger. */
.de-editorial .entry-content > p:first-of-type { font-size: 1.16rem; line-height: 1.55; }

/* Headings — a clean sans over the serif body. */
.de-editorial .entry-content h2,
.de-editorial .entry-content h3,
.de-editorial .entry-content h4 {
	font-family: "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
	color: var(--a-navy);
	letter-spacing: -.01em;
	line-height: 1.2;
	text-wrap: balance;
}
.de-editorial .entry-content h2 { font-size: 1.5rem; font-weight: 700; margin: 2.6em 0 .5em; }
.de-editorial .entry-content h3 { font-size: 1.16rem; font-weight: 700; margin: 1.5em 0 .2em; }

/* Lists — a little more air; keeps normal bullets so any list reads correctly. */
.de-editorial .entry-content ul,
.de-editorial .entry-content ol { margin: 1em 0; padding-left: 1.2em; }
.de-editorial .entry-content li { margin: .35em 0; padding-left: .2em; }
.de-editorial .entry-content li::marker { color: var(--a-teal); }

/* Comparison table — hairline rows, no boxed cells, muted uppercase header. It sits directly on
 * the page (no white card, no shadow, no border) so it blends into the background; the hairline
 * rows alone give it structure. */
.de-editorial .entry-content .wp-block-table {
	margin: 1.3em 0;
	overflow-x: auto;
	background: transparent;
	box-shadow: none;
	border: 0;
	padding: 0;
}
.de-editorial .entry-content table {
	border-collapse: collapse;
	width: 100%;
	border: 0;
	background: transparent;
	box-shadow: none;
	font-family: "Segoe UI", Roboto, -apple-system, Helvetica, Arial, sans-serif;
	font-size: .93rem;
}
.de-editorial .entry-content thead th {
	background: transparent;
	color: var(--a-soft);
	font-size: .72rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-weight: 600;
	text-align: left;
	border: 0;
	border-bottom: 2px solid var(--a-line);
	padding: 8px 16px 8px 0;
}
.de-editorial .entry-content tbody td {
	border: 0;
	border-bottom: 1px solid var(--a-hair);
	padding: 10px 16px 10px 0;
	vertical-align: top;
}
.de-editorial .entry-content tbody td:first-child { color: var(--a-navy); font-weight: 600; white-space: nowrap; }
/* Emphasise the price column (4th) — it's the number readers scan for. */
.de-editorial .entry-content tbody td:nth-child(4) { color: var(--a-navy); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.de-editorial .entry-content thead th:last-child,
.de-editorial .entry-content tbody td:last-child { text-align: center; padding-right: 0; }
.de-editorial .entry-content tbody tr:hover td { background: rgba(20, 41, 61, .025); }

/* Images / embeds sit a little softer. */
.de-editorial .entry-content img { border-radius: 8px; }

/* Footer disclaimer — the single site-wide note at the foot of every article. A quiet, muted
 * footnote set off by a hairline, NOT the tinted callout box dealengine.css gives it (that box was
 * for when the affiliate line sat prominently near the top). Higher specificity here wins. */
.de-editorial .entry-content .de-disclosure {
	margin: 2.6em 0 0;
	padding: 1.2em 0 0;
	border: 0;
	border-top: 1px solid var(--a-line);
	border-radius: 0;
	background: none;
	color: var(--a-soft);
	font-family: "Segoe UI", Roboto, -apple-system, Helvetica, Arial, sans-serif;
	font-size: .84rem;
	line-height: 1.55;
}
.de-editorial .entry-content .de-disclosure em { font-style: normal; }

/* Optional opt-in helpers a richer article (or the generator) can use.
 * .de-note  — a left-ruled callout (e.g. a safety note). Wrap a paragraph/group in this class.
 * .de-tldr  — an "at a glance" panel on a soft tint. */
.de-editorial .entry-content .de-note {
	border-left: 3px solid var(--a-flag);
	padding: 2px 0 2px 16px;
	margin: 1.2em 0;
	font-family: "Segoe UI", Roboto, -apple-system, Helvetica, Arial, sans-serif;
	font-size: .97rem;
}
.de-editorial .entry-content .de-note strong { color: var(--a-flag); }
.de-editorial .entry-content .de-tldr {
	background: #f1ede4;
	border-radius: 10px;
	padding: 6px 20px;
	font-family: "Segoe UI", Roboto, -apple-system, Helvetica, Arial, sans-serif;
	font-size: .97rem;
}

/* ----------------------------------------------------------- live price grid
 * The embedded [de_products] comparison. Article-scoped ONLY — the homepage and
 * catalogue keep their own .de-card sizing (dealengine.css). Here it sits CENTRED within
 * the reading column (a wider translateX breakout read as off-centre when the theme's content
 * area isn't perfectly viewport-centred), runs 3-up on desktop, gives the image more room,
 * keeps card heights level, makes the lowest price the loudest thing on the card, and turns
 * each card (already a link to that product's compare page) into a clear "Compare prices" CTA.
 */
.de-editorial .entry-content .de-arch-grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	transform: none;
}
.de-editorial .entry-content .de-card { display: flex; flex-direction: column; height: 100%; }
.de-editorial .entry-content .de-card-img { padding: 8%; }               /* larger product image */
.de-editorial .entry-content .de-card-title {
	font-family: "Segoe UI", Roboto, -apple-system, Helvetica, Arial, sans-serif;
	font-size: 1rem; line-height: 1.3; min-height: 2.6em;                /* keeps heights level */
}
.de-editorial .entry-content .de-card-price { font-size: 1rem; margin-top: auto; }
.de-editorial .entry-content .de-card-price strong { font-size: 1.35rem; color: var(--a-navy); }
/* The whole card links to that product's compare page — give it a visible CTA. */
.de-editorial .entry-content .de-card::after {
	content: "Compare prices \2192";
	display: block;
	margin-top: .8em;
	text-align: center;
	font-family: "Segoe UI", Roboto, -apple-system, Helvetica, Arial, sans-serif;
	font-weight: 700; font-size: .82rem; letter-spacing: .02em;
	color: #fff; background: var(--a-teal);
	border-radius: 8px; padding: .62em .8em;
}
.de-editorial .entry-content .de-card:hover::after { background: #0a6f64; }

@media (max-width: 820px) {
	.de-editorial .entry-content .de-arch-grid {
		width: 100%; margin-left: 0; transform: none;
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 520px) {
	.de-editorial .entry-content .de-arch-grid { grid-template-columns: 1fr; }
}