/**
 * Long-form documentation pages (056j) — the PrestaShop install guide, `/sl/navodila/`
 * and `/hr/upute/`.
 *
 * Loaded only on pages whose content carries a `wp-block-table` (see functions.php):
 * today that is exactly the two guide pages, and any future doc page inherits the
 * same treatment without a theme change.
 *
 * Three jobs, none of which Shoptimizer does for editor blocks inside a raw HTML block:
 *   1. the troubleshooting table needs row separators to be readable at all;
 *   2. screenshots need a frame, since a back-office capture is mostly white and
 *      otherwise bleeds into the page;
 *   3. the guide is navigated from its own table of contents, and the site header is
 *      sticky — without `scroll-margin-top` every jump lands with the heading hidden
 *      underneath it.
 */

body.dpd-chrome .entry-content h2[id],
body.dpd-chrome .entry-content h3[id] {
	/* Header is 72px tall (dpd-header.css) — clear it, plus breathing room. */
	scroll-margin-top: 96px;
}

/* --- Screenshots ------------------------------------------------------------ */

body.dpd-chrome .entry-content .wp-block-image {
	margin: 2rem 0 2.25rem;
}

body.dpd-chrome .entry-content .wp-block-image img {
	border: 1px solid var(--line, #E1DCD1);
	border-radius: 6px;
	background: #fff;
}

body.dpd-chrome .entry-content .wp-block-image figcaption {
	margin-top: 0.6rem;
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--steel, #5A5347);
	text-align: center;
}

/* --- Troubleshooting table -------------------------------------------------- */

body.dpd-chrome .entry-content .wp-block-table {
	margin: 2rem 0 2.25rem;
	/* A two-column table of sentences: let it scroll rather than break the page. */
	overflow-x: auto;
}

body.dpd-chrome .entry-content .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

body.dpd-chrome .entry-content .wp-block-table th,
body.dpd-chrome .entry-content .wp-block-table td {
	padding: 0.85rem 1rem 0.85rem 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--line, #E1DCD1);
}

body.dpd-chrome .entry-content .wp-block-table th {
	font-weight: 700;
	border-bottom-width: 2px;
	border-bottom-color: var(--ink, #16140F);
}

body.dpd-chrome .entry-content .wp-block-table td:first-child {
	width: 32%;
	padding-right: 1.5rem;
	font-weight: 500;
}

@media (max-width: 700px) {
	body.dpd-chrome .entry-content .wp-block-table td:first-child {
		width: 40%;
	}
}