/**
 * E-Potion — Blog Post Styles v2
 *
 * Built for the actual page structure:
 *   - Blog posts rendered by Elementor (data-elementor-type="wp-post")
 *   - Breadcrumb nav.woocommerce-breadcrumb is a direct child of .col-full,
 *     OUTSIDE the Elementor div
 *   - Post content (ul, ol, table) is inside the Elementor post-content
 *     widget: .elementor-widget-theme-post-content
 *
 * Three features:
 *   1. FULL WIDTH  — releases .col-full constraint so Elementor hero
 *      can stretch. Also requires "Stretch Section" ON in Elementor editor.
 *   2. BULLETS     — ::before dots (Shoptimizer + Elementor strip list-style)
 *   3. TABLES      — styled with design tokens + .ep-table-wrap scroll wrapper
 *
 * @package Shoptimizer_Child
 */


/* ============================================================
 * 1. FULL WIDTH
 *
 * .col-full caps everything at ~1085px. Removing it lets the
 * Elementor section stretch properly.
 *
 * After deploying: open the hero section in Elementor editor →
 * Layout → "Stretch Section" → ON. The CSS removes the blocker;
 * Elementor's own stretch does the actual 100vw expansion.
 * ============================================================ */

body.single-post #content .col-full {
	max-width: 100% !important;
}

/* Breadcrumb re-constraining removed — no longer needed since we
   don't touch col-full padding. Breadcrumb inherits natural spacing. */

/* ── BREADCRUMB ────────────────────────────────────────────────────────
   JS clones the PHP breadcrumb and injects it as .ep-blog-breadcrumb
   before the Elementor title widget inside the hero left column.
   The Elementor breadcrumb widget (.cust-breadcrub) is hidden — its
   position:absolute was broken by Stretch Section.
   The original PHP breadcrumb is hidden by JS (src.style.display=none).
─────────────────────────────────────────────────────────────────────── */

body.single-post .ep-blog-breadcrumb {
	display: flex !important;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	font-size: 12px !important;
	color: var(--ep-text-muted, #6b7280) !important;
	margin-bottom: 12px;
	line-height: 1.4;
}

body.single-post .ep-blog-breadcrumb a {
	font-size: 12px !important;
	color: var(--ep-text-muted, #6b7280) !important;
	text-decoration: none !important;
	transition: color 150ms ease;
}

body.single-post .ep-blog-breadcrumb a:hover {
	color: var(--ep-text-primary, #0e1116) !important;
}

body.single-post .ep-blog-breadcrumb .breadcrumb-separator {
	font-size: 10px !important;
	color: var(--ep-border-default, #e5e7eb) !important;
}

/* Hide Elementor breadcrumb widget — position:absolute broken by Stretch Section */
body.single-post .cust-breadcrub.elementor-widget-woocommerce-breadcrumb {
	display: none !important;
}

/* PHP breadcrumb hidden by JS — CSS fallback hide in case JS is delayed */
body.single-post #content .col-full > nav.woocommerce-breadcrumb {
	display: none !important;
}


/* ============================================================
 * 2. BULLET POINTS & ORDERED LISTS
 *
 * Selectors cover:
 *   .elementor-widget-theme-post-content  — Elementor Pro "Post Content"
 *   .elementor-widget-text-editor         — Elementor text editor widget
 *   .entry-content                         — classical fallback
 * ============================================================ */

/* ── Unordered ── */
body.single-post .elementor-widget-theme-post-content ul,
body.single-post .elementor-widget-text-editor ul,
body.single-post .entry-content ul {
	list-style: none !important;
	padding-left: 0 !important;
	margin: 0 0 18px 0;
}

body.single-post .elementor-widget-theme-post-content ul > li,
body.single-post .elementor-widget-text-editor ul > li,
body.single-post .entry-content ul > li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 8px;
	font-size: var(--ep-font-base, 15px);
	color: var(--ep-text-secondary, #4a5058);
	line-height: 1.7;
	list-style: none !important;
}

body.single-post .elementor-widget-theme-post-content ul > li::before,
body.single-post .elementor-widget-text-editor ul > li::before,
body.single-post .entry-content ul > li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ep-accent, #ff6b1a);
}

/* Nested ul → smaller grey dot */
body.single-post .elementor-widget-theme-post-content ul ul,
body.single-post .elementor-widget-text-editor ul ul,
body.single-post .entry-content ul ul {
	margin-top: 6px;
	margin-bottom: 0;
	padding-left: 14px !important;
}

body.single-post .elementor-widget-theme-post-content ul ul > li::before,
body.single-post .elementor-widget-text-editor ul ul > li::before,
body.single-post .entry-content ul ul > li::before {
	width: 5px;
	height: 5px;
	top: 9px;
	background: var(--ep-text-muted, #6b7280);
}

/* ── Ordered ── */
body.single-post .elementor-widget-theme-post-content ol,
body.single-post .elementor-widget-text-editor ol,
body.single-post .entry-content ol {
	list-style: none !important;
	padding-left: 0 !important;
	margin: 0 0 18px 0;
	counter-reset: ep-ol;
}

body.single-post .elementor-widget-theme-post-content ol > li,
body.single-post .elementor-widget-text-editor ol > li,
body.single-post .entry-content ol > li {
	position: relative;
	padding-left: 32px;
	margin-bottom: 8px;
	font-size: var(--ep-font-base, 15px);
	color: var(--ep-text-secondary, #4a5058);
	line-height: 1.7;
	counter-increment: ep-ol;
	list-style: none !important;
}

body.single-post .elementor-widget-theme-post-content ol > li::before,
body.single-post .elementor-widget-text-editor ol > li::before,
body.single-post .entry-content ol > li::before {
	content: counter(ep-ol);
	position: absolute;
	left: 0;
	top: 1px;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: var(--ep-bg-dark, #0e1116);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Safety guard — don't touch WC/EP UI lists */
body.single-post .products li::before,
body.single-post .woocommerce-error li::before,
body.single-post .woocommerce-message li::before,
body.single-post #toc-list li::before,
body.single-post .ep-mini-cart-items li::before,
body.single-post .wc-item-meta li::before {
	display: none !important;
}


/* ============================================================
 * 3. TABLE STYLES
 *
 * .ep-table-wrap is injected by blog-post.js around every
 * <table> found inside the post content widget.
 * Overrides the old .single-post table { display:block } rule.
 * ============================================================ */

/* Scroll wrapper */
body.single-post .ep-table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 24px 0 32px;
	border-radius: var(--ep-radius-lg, 12px);
	border: 1px solid var(--ep-border-default, #e5e7eb);
	box-shadow: var(--ep-shadow-sm, 0 1px 2px rgba(15,17,22,.04));
}

/* Override old display:block rule for all content areas */
body.single-post .elementor-widget-theme-post-content table,
body.single-post .elementor-widget-text-editor table,
body.single-post .entry-content table {
	display: table !important;
	white-space: normal !important;
	overflow-x: visible !important;
}

/* Table inside wrapper */
body.single-post .ep-table-wrap table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--ep-font-sm, 13px);
	background: var(--ep-bg-page, #ffffff);
	white-space: nowrap;
}

body.single-post .ep-table-wrap thead th {
	background: var(--ep-bg-dark, #0e1116);
	color: #ffffff;
	padding: 13px 18px;
	text-align: left;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .4px;
	text-transform: uppercase;
	border-bottom: none;
}

body.single-post .ep-table-wrap thead th:first-child {
	border-radius: var(--ep-radius-lg, 12px) 0 0 0;
}

body.single-post .ep-table-wrap thead th:last-child {
	border-radius: 0 var(--ep-radius-lg, 12px) 0 0;
}

body.single-post .ep-table-wrap tbody tr {
	border-bottom: 1px solid var(--ep-border-subtle, #f0f0f2);
	transition: background-color 120ms ease;
}

body.single-post .ep-table-wrap tbody tr:last-child {
	border-bottom: none;
}

body.single-post .ep-table-wrap tbody tr:nth-child(even) {
	background: var(--ep-bg-surface, #fafafa);
}

body.single-post .ep-table-wrap tbody tr:hover {
	background: var(--ep-bg-muted, #f6f7f9);
}

body.single-post .ep-table-wrap tbody td {
	padding: 12px 18px;
	color: var(--ep-text-primary, #0e1116);
	font-size: var(--ep-font-sm, 13px);
	vertical-align: middle;
	border-bottom: none;
}

body.single-post .ep-table-wrap caption {
	caption-side: bottom;
	padding: 8px 18px;
	font-size: var(--ep-font-xs, 11px);
	color: var(--ep-text-muted, #6b7280);
	text-align: left;
}