/* =========================================================================
   Section Block — Front-end + shared styles  (DARK THEME)
   Mirrors the site's dark design language (see bookmaker-card / sidebar-banner):
     card        : --bg-surface (#151A23), 1px --border-color, radius 25px, padding 36px
     grey        : --bg-surface-hover, subtle recessed surface
     text        : --text-muted body / --text-main headings, Manrope, 18px / 28px
     tables      : --border-color borders + subtle striped rows
     images      : radius 20px, fixed 16/9 ratio so they never fill the screen
     CTA buttons : --accent-color (#00E574), dark label, radius 12px
   All rules are scoped under .theme-section so nothing leaks site-wide.
   Colours use theme CSS vars with hex fallbacks so they also resolve in the
   editor canvas (where the theme :root vars may be absent).
   ========================================================================= */

.theme-section {
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--text-muted, #8A93A6);
	margin: 24px 0;
}

/* ── Background variants ───────────────────────────────────────────────── */
.theme-section--card {
	background-color: var(--bg-surface, #151A23);
	border: 1px solid var(--border-color, #262D3D);
	border-radius: 25px;
	padding: 36px;
}

.theme-section--grey {
	background-color: var(--bg-surface-hover, #1E2532);
	border: 1px solid var(--border-color, #262D3D);
	border-radius: 25px;
	padding: 36px;
}

.theme-section--plain {
	background: transparent;
	border-radius: 0;
	padding: 0;
}

/* ── Inner flow: consistent vertical rhythm between blocks ─────────────── */
.theme-section__inner > * {
	margin-top: 0;
	margin-bottom: 24px;
}

.theme-section__inner > *:last-child {
	margin-bottom: 0;
}

/* ── Nested theme / custom design blocks: disable their own outer spacing ────
   Blocks like step-block, pros-cons, expert, faq, etc. are themselves full
   cards (bg, 36px padding, 25px radius, 24px margin). Inside the
   section's own card that stacks into a "double отступ". When such a block is
   placed inside the section we turn OFF its own side + vertical padding and
   margin (and the redundant card chrome) so it sits flush on the section's
   single padding — without touching the block's internal layout.
   Matches ONLY custom/plugin blocks (wp-block-custom-theme-* /
   wp-block-bookmaker-manager-*), never core blocks (paragraph, heading, list,
   table, image, buttons…), which keep the section padding.
   Applied only to the padded variants (card / grey); the plain variant has no
   padding of its own, so nested blocks keep their spacing there. */
/* (a) Outer block wrappers — theme blocks carry wp-block-custom-theme-*;
       plugin blocks hardcode their own class (no wp-block-*), so list those too.
       This zeroes their side + vertical margin and, for blocks whose card is the
       outer wrapper itself (step-block, pros-cons, expert, faq, sports-list,
       verdict, sportsbook, restricted-countries, help-support), its padding. */
.theme-section--card > .theme-section__inner > [class*="wp-block-custom-theme-"],
.theme-section--grey > .theme-section__inner > [class*="wp-block-custom-theme-"],
.theme-section--card > .theme-section__inner > [class*="wp-block-bookmaker-manager-"],
.theme-section--grey > .theme-section__inner > [class*="wp-block-bookmaker-manager-"],
.theme-section--card > .theme-section__inner > .verdict-block,
.theme-section--grey > .theme-section__inner > .verdict-block,
.theme-section--card > .theme-section__inner > .sportsbook-block,
.theme-section--grey > .theme-section__inner > .sportsbook-block,
.theme-section--card > .theme-section__inner > .restricted-countries-block,
.theme-section--grey > .theme-section__inner > .restricted-countries-block,
.theme-section--card > .theme-section__inner > .help-support-block,
.theme-section--grey > .theme-section__inner > .help-support-block {
	margin: 0 0 24px 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.theme-section--card > .theme-section__inner > [class*="wp-block-custom-theme-"]:last-child,
.theme-section--grey > .theme-section__inner > [class*="wp-block-custom-theme-"]:last-child,
.theme-section--card > .theme-section__inner > [class*="wp-block-bookmaker-manager-"]:last-child,
.theme-section--grey > .theme-section__inner > [class*="wp-block-bookmaker-manager-"]:last-child,
.theme-section--card > .theme-section__inner > .verdict-block:last-child,
.theme-section--grey > .theme-section__inner > .verdict-block:last-child,
.theme-section--card > .theme-section__inner > .sportsbook-block:last-child,
.theme-section--grey > .theme-section__inner > .sportsbook-block:last-child,
.theme-section--card > .theme-section__inner > .restricted-countries-block:last-child,
.theme-section--grey > .theme-section__inner > .restricted-countries-block:last-child,
.theme-section--card > .theme-section__inner > .help-support-block:last-child,
.theme-section--grey > .theme-section__inner > .help-support-block:last-child {
	margin-bottom: 0 !important;
}

/* (b) Pattern B blocks keep their card on an inner container (one per block,
       verified single). Drop that card's side + vertical padding so it sits on
       the section's single padding. */
.theme-section--card .trust-card,        .theme-section--grey .trust-card,
.theme-section--card .bonus-insight-card,.theme-section--grey .bonus-insight-card,
.theme-section--card .app-guide-card,    .theme-section--grey .app-guide-card,
.theme-section--card .payments-card,     .theme-section--grey .payments-card,
.theme-section--card .trouble-card,      .theme-section--grey .trouble-card,
.theme-section--card .specs-container,   .theme-section--grey .specs-container {
	padding: 0 !important;
	background: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* ── Headings ──────────────────────────────────────────────────────────── */
.theme-section h2,
.theme-section h3,
.theme-section h4,
.theme-section h5,
.theme-section h6 {
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	color: var(--text-main, #FFFFFF);
	line-height: 130%;
	margin: 0 0 16px 0;
}

.theme-section h2 { font-size: 32px; font-weight: 800; }
.theme-section h3 { font-size: 28px; }
.theme-section h4 { font-size: 24px; }
.theme-section h5 { font-size: 20px; }
.theme-section h6 { font-size: 18px; }

/* ── Paragraphs ────────────────────────────────────────────────────────── */
.theme-section p {
	margin: 0 0 16px 0;
	font-size: 18px;
	line-height: 28px;
	font-weight: 400;
	color: var(--text-muted, #8A93A6);
	font-family: 'Manrope', sans-serif;
}

.theme-section p:last-child {
	margin-bottom: 0;
}

/* Respect editor-chosen colours / font sizes (core typography & colour supports). */
.theme-section p.has-text-color,
.theme-section h2.has-text-color,
.theme-section h3.has-text-color,
.theme-section h4.has-text-color,
.theme-section h5.has-text-color,
.theme-section h6.has-text-color,
.theme-section .has-text-color {
	color: inherit;
}
.theme-section .has-text-align-center { text-align: center; }
.theme-section .has-text-align-right  { text-align: right; }
.theme-section .has-text-align-left   { text-align: left; }

/* ── Links ─────────────────────────────────────────────────────────────── */
.theme-section a {
	color: var(--accent-color, #00E574);
	text-decoration: none;
}

.theme-section a:hover {
	text-decoration: underline;
}

/* ── Lists (ordered = numbers, unordered = bullets) ────────────────────── */
.theme-section ul,
.theme-section ol {
	margin: 0 0 16px 0;
	padding-left: 24px;
}

.theme-section ul { list-style: disc; }
.theme-section ol { list-style: decimal; }

.theme-section li {
	color: var(--text-muted, #8A93A6);
	font-size: 18px;
	line-height: 28px;
	font-weight: 400;
	font-family: 'Manrope', sans-serif;
	margin-bottom: 12px;
}

.theme-section li::marker { color: var(--accent-color, #00E574); }

.theme-section li:last-child { margin-bottom: 0; }

/* ── Tables — identical look for every table (built in Gutenberg) ──────── */
.theme-section .wp-block-table {
	margin: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.theme-section .wp-block-table table {
	width: 100% !important;
	border: 1px solid var(--border-color, #262D3D);
	border-collapse: collapse;
	font-family: 'Manrope', sans-serif;
}

.theme-section .wp-block-table th,
.theme-section .wp-block-table td {
	border: 1px solid var(--border-color, #262D3D) !important;
	padding: 10px 15px !important;
	font-size: 16px;
	line-height: 24px;
	color: var(--text-muted, #8A93A6);
	text-align: left;
	vertical-align: top;
	word-wrap: break-word;
	word-break: break-word;
	overflow-wrap: break-word;
	white-space: normal;
}

.theme-section .wp-block-table thead tr,
.theme-section .wp-block-table th {
	background-color: var(--bg-surface-hover, #1E2532);
	color: var(--text-main, #FFFFFF);
	font-weight: 700;
}

.theme-section .wp-block-table tbody tr:nth-child(even) {
	background-color: rgba(255, 255, 255, 0.03);
}

.theme-section .wp-block-table figcaption {
	margin-top: 12px;
	color: var(--text-muted, #8A93A6);
	font-size: 14px;
	line-height: 20px;
	font-style: italic;
	text-align: center;
}

/* ── Images — one consistent format, never full-screen ─────────────────── */
.theme-section .wp-block-image {
	margin: 0;
	text-align: center;
}

.theme-section .wp-block-image img {
	width: 100%;
	max-width: 760px;
	aspect-ratio: 16 / 9;
	max-height: 420px;
	height: auto;
	object-fit: cover;
	border-radius: 20px;
	background: var(--bg-surface-hover, #1E2532);
	display: block;
	margin: 0 auto;
}

/* keep explicit alignment choices working */
.theme-section .wp-block-image.alignleft img  { margin-left: 0;  margin-right: auto; }
.theme-section .wp-block-image.alignright img { margin-left: auto; margin-right: 0; }

.theme-section .wp-block-image figcaption {
	margin-top: 12px;
	color: var(--text-muted, #8A93A6);
	font-size: 14px;
	line-height: 20px;
	font-style: italic;
	text-align: center;
	font-family: 'Manrope', sans-serif;
}

/* ── CTA buttons (core/buttons → core/button) ──────────────────────────── */
.theme-section .wp-block-buttons {
	gap: 16px;
	margin-top: 20px;
}

.theme-section .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 32px;
	background: var(--accent-color, #00E574);
	color: #04130b;
	font-size: 18px;
	font-weight: 700;
	font-family: 'Manrope', sans-serif;
	text-decoration: none;
	border-radius: 12px;
	border: none;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.theme-section .wp-block-button__link:hover {
	background: var(--accent-hover, #00C462);
	color: #04130b;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 229, 116, 0.3);
}

/* Outline button style stays on-brand */
.theme-section .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--accent-color, #00E574);
	border: 2px solid var(--accent-color, #00E574);
}

.theme-section .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--accent-color, #00E574);
	color: #04130b;
}

/* ── Quotes ────────────────────────────────────────────────────────────── */
.theme-section .wp-block-quote {
	font-style: italic;
	padding: 20px 20px 20px 30px;
	margin: 0;
	border: 1px solid var(--border-color, #262D3D);
	border-left: 4px solid var(--accent-color, #00E574);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.03);
	font-size: 18px;
	line-height: 28px;
	color: var(--text-muted, #8A93A6);
}

/* ── Separator ─────────────────────────────────────────────────────────── */
.theme-section .wp-block-separator {
	border: none;
	border-top: 1px solid var(--border-color, #262D3D);
	margin: 24px 0;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media screen and (max-width: 1400px) {
	.theme-section--card,
	.theme-section--grey {
		padding: 24px;
	}
}

@media screen and (max-width: 768px) {
	.theme-section--card,
	.theme-section--grey {
		padding: 16px;
		border-radius: 20px;
	}
	.theme-section h2 { font-size: 26px; }
	.theme-section h3 { font-size: 22px; }
	.theme-section h4 { font-size: 20px; }
	.theme-section p,
	.theme-section li { font-size: 16px; line-height: 26px; }
	.theme-section .wp-block-button__link { width: 100%; padding: 14px 24px; font-size: 16px; }
	.theme-section .wp-block-image img { aspect-ratio: 4 / 3; max-height: 320px; }
}