/**
 * Country single native layout (Elementor decommission, Phase 3).
 * Reproduces Theme Builder template 165100's structure with a native grid:
 * facts grid → 75/25 body (main + sidebar) → newsletter. Every content block is a
 * white bordered "card" (the site-wide block/border design also used on the other
 * CPT pages + the native dead-coins/dead-exchanges recipe): 1px border, 10px radius,
 * subtle .bs-dt-like shadow, light + dark. Component styling (.bs-ef fields,
 * .bs-reg-* rows, .bs-lw-* lists, crypto-events/news, map, newsletter) comes from
 * their own already-loaded stylesheets; this file owns the scaffolding + cards.
 * Spacing is gap-based throughout (no card margins) so nothing double-spaces.
 */

.bs-country-single {
	max-width: 1500px;
	margin: 0 auto;
	padding: 0 10px 40px;
	box-sizing: border-box;
}

/* body.single's overflow-x:hidden makes the body a scroll container, which breaks
   position:sticky (the tab nav below). overflow-x:clip prevents the same horizontal
   overflow WITHOUT creating a scroll container. Higher specificity (html body…) beats
   the global body.single rule; on pre-2022 browsers clip is invalid → falls back to
   the inherited hidden (sticky simply no-ops there, still no horizontal scroll). */
html body.single-country {
	overflow-x: clip;
}

/* Full-width grey band behind the facts + body cards — matches the original
   #f4f4f4 section background (edge-to-edge) so the white cards have contrast.
   margin-top is the white gap under the tab nav ("padding under the quick jumps").
   The ::before full-bleeds via inset calc (no 100vw → no scrollbar overflow); the
   content stays inset to the container edge (aligned with the hero + tab nav). */
.bs-cs-band {
	position: relative;
	z-index: 0;
	margin-top: 20px;
	padding: 24px 0 40px;
}
.bs-cs-band::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: calc(-50vw + 50%);
	right: calc(-50vw + 50%);
	background: #f4f4f4;
}

/* ── Card shell (every content block) ─────────────────── */
.bs-cs-card,
.bs-country-facts__col,
.bs-cs-section {
	background: #fff;
	border: 1px solid #e4e7ed;
	border-radius: 10px;
	padding: 20px; /* matches the original Elementor cards (was 28px — too airy) */
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
	box-sizing: border-box;
}

/* Sticky tab nav (quick jumps) — pinned to the top while scrolling for easy
   navigation (the site header is static and scrolls away). Full-bleed background
   matching the page so it cleanly covers content behind it edge-to-edge; the list
   already scrolls horizontally on mobile (bs-coin-tabs.css overflow-x:auto). */
.bs-country-single .bs-country-tab-nav {
	position: sticky;
	top: 0;
	z-index: 30;
	margin: 20px 0 0;
	padding: 12px 0;
}
.bs-country-single .bs-country-tab-nav::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: calc(-50vw + 50%);
	right: calc(-50vw + 50%);
	background: #fff;
	border-bottom: 1px solid #e4e7ed;
}
html.bs-dark .bs-country-single .bs-country-tab-nav::before {
	background: #141422;
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Anchor targets for the sticky tab nav. scroll-margin-top clears the pinned nav
   (~66px) so a clicked section lands just beneath it. (html has scroll-padding-top
   :80px globally; scroll-margin here is authoritative for these targets.) */
.bs-cs-anchor {
	display: block;
	visibility: hidden;
	height: 0;
	scroll-margin-top: 28px; /* + html scroll-padding-top:80px lands cards ~just below the pinned nav */
}

/* ── Section headings (inside cards) ──────────────────── */
/* Body-section headings — one H2 spec: Roboto Flex 500, 24px / 29px line-height.
   (.bs-dt-heading below inherits the same; .bs-dt otherwise forces a system font.) */
.bs-cs-heading,
.bs-cs-heading--p {
	margin: 0 0 18px;
	scroll-margin-top: 90px;
	font-family: 'Roboto Flex', sans-serif;
	font-size: 24px;
	font-weight: 500;
	line-height: 29px;
}

/* ── Facts grid (4 cards, equal height) ───────────────── */
.bs-country-facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	align-items: stretch;
	margin: 0 0 10px;
}
.bs-country-facts__col {
	min-width: 0;
}
.bs-cf-title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 16px;
	line-height: 1.3;
}
.bs-cf-title--sub {
	margin-top: 24px;
}
.bs-cf-fields {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.bs-cf-fields .bs-ef {
	margin: 0;
}
@media (max-width: 900px) {
	.bs-country-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.bs-country-facts { grid-template-columns: 1fr; }
}

/* ── Body: shares the facts grid's 4-column track so the sidebar lines up
   exactly under the 4th facts card (main spans cols 1-3, sidebar is col 4). ── */
.bs-cs-body {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	align-items: start;
}
.bs-cs-main {
	grid-column: 1 / 4;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.bs-cs-sidebar {
	grid-column: 4 / 5;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}
@media (max-width: 1024px) {
	.bs-cs-body { grid-template-columns: 1fr; }
	.bs-cs-main,
	.bs-cs-sidebar { grid-column: auto; }
}

/* Sub-columns inside main: Blockchain Overview (table column) | Regulatory + Map +
   FAQ (stacked cards). The table column is a plain block — the datatable is its own
   card (heading rendered inside it, above the search), so there's no outer section
   card wrapping it (avoids the box-in-box). */
.bs-cs-subcols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	align-items: start;
}
.bs-cs-subcol {
	min-width: 0;
}
.bs-cs-subcol--stack {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
@media (max-width: 768px) {
	.bs-cs-subcols { grid-template-columns: 1fr; }
}

/* Blockchain-Overview datatable is the block itself. Match the sibling cards' 10px
   radius (bs-datatable.css defaults to 20px); the heading sits inside the card. */
.bs-country-single .bs-dt {
	border-radius: 10px;
}
.bs-country-single .bs-dt .bs-dt-heading {
	margin: 0;
	padding: 22px 28px 0;
	font-family: 'Roboto Flex', sans-serif; /* .bs-dt forces a system font otherwise */
	font-size: 24px;
	font-weight: 500;
	line-height: 29px;
	scroll-margin-top: 90px;
}
.bs-country-single .bs-dt .bs-dt-heading + .bs-dt-toolbar {
	padding-top: 14px;
}
/* Row-number (#) column: left-align the rank with a tidy gap to the logo/name so
   3-digit ranks don't collide with it in this narrow table. */
.bs-country-single .bs-dt-table thead th:first-child,
.bs-country-single .bs-dt-table tbody td:first-child {
	text-align: left !important;
	padding-left: 22px;
	padding-right: 10px;
	white-space: nowrap;
}
.bs-country-single .bs-dt-table thead th:nth-child(2),
.bs-country-single .bs-dt-table tbody td:nth-child(2) {
	padding-left: 12px;
}

/* ── Newsletter (full-width band, own max-width, no card) ── */
.bs-cs-newsletter {
	max-width: 1400px;
	margin: 40px auto 0;
}

/* ── Blockchain-Overview DataTable footer (DT 2.x) ─────────
   The datatable lives in the narrow 50%-width sub-column card, where the default
   side-by-side footer (info | pagination, space-between) can't fit and both wrap
   mid-line. Scoped to the country single: stack the "Showing …" info above the
   pagination — each full-width and centered on its own line. Wide archive tables
   keep the side-by-side layout. */
.bs-country-single .bs-dt .dt-layout-row:last-child {
	flex-direction: column;
	align-items: stretch;
	row-gap: 2px;
}
.bs-country-single .bs-dt .dt-layout-row:last-child .dt-layout-cell {
	width: 100%;
	justify-content: center;
}
.bs-country-single .bs-dt .dt-info {
	text-align: center;
	padding: 14px 16px 4px;
}
.bs-country-single .bs-dt .dt-paging {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	padding: 4px 16px 16px;
}
.bs-country-single .bs-dt .dt-paging .dt-paging-button {
	margin: 0;
}
/* The "Show N Entries" length control is a custom bottom .bs-dt-toolbar (flex,
   space-between) — center it under the stacked info/pagination. :has() scopes it to
   the bottom toolbar (the top search/clear toolbar has no #bs-cp-page-length). */
.bs-country-single .bs-dt-toolbar:has(#bs-cp-page-length) {
	justify-content: center;
	padding: 6px 16px 14px;
}

/* ── Regulatory disclaimer: two rows (one sentence each) with the block icon
   vertically centered against both (was inline, icon stuck to the top line). ── */
.bs-reg-disclaimer {
	display: flex;
	align-items: center;
	gap: 8px;
}
.bs-reg-disclaimer__icon {
	flex-shrink: 0;
}

/* ── Dark mode ────────────────────────────────────────── */
html.bs-dark .bs-cs-card,
html.bs-dark .bs-country-facts__col,
html.bs-dark .bs-cs-section {
	background: #22223a;
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
/* Recessed band a touch darker than the #22223a cards so they stay elevated. */
html.bs-dark .bs-cs-band::before {
	background: #16161f;
}