/**
 * Compatibility Shim for Gutenberg Layout & Table CSS (WP 5.9+)
 *
 * Why this exists:
 * - WP versions: Applies to WordPress >= 5.9 (introduced block layout flex gaps and table cell border changes).
 * - Root cause: WP core injected layout-support CSS setting flex gaps and table cell borders that override Bootstrap grid and theme styling.
 *
 * Selector notes (why specific rules exist):
 * - .wp-block-columns / gap: neutralizes core flex gaps so Bootstrap .col-* sizing aligns flush.
 * - .wp-block-columns.row / flex-wrap: wrap: restores multi-row wrapping behavior (e.g. Photo on top, Text below) matching Prod.
 * - .wp-block-column[class*="col-"] / flex-basis: auto: allows Bootstrap grid column calculations to work natively inside block columns.
 * - .wp-block-separator / hr: restores exact theme separator light borders.
 * - .wp-block-table.is-style-stripes: restores zebra striping and outer borders on striped tables.
 *
 * QA checklist (what was tested):
 * - Pages tested: All theme pages and block-based content across the site.
 * - Viewports: Desktop (>= 992px), Tablet (768px - 991px), Mobile (< 768px).
 */

/* 1. Neutralize Gutenberg core flex container gaps overriding Bootstrap grid */
html body .wp-block-columns,
html body .wp-block-columns.is-layout-flex,
html body .wp-block-columns-is-layout-flex,
html body [class*="wp-container-core-columns"] {
	gap: 0;
	row-gap: 0;
	column-gap: 0;
}

/* Restore custom row gap for logo cards block (.grp-col-img) like Prod */
html body .grp-col-img,
html body .wp-block-columns.grp-col-img,
html body .wp-block-columns[class*="grp-col-img"] {
	row-gap: 24px;
}

/* Remove Gutenberg block flow margin interference */
html body .wp-block-column.is-layout-flow {
	margin-top: 0;
	margin-bottom: 0;
}

/* Restore Bootstrap .row flex-wrap so blocks wrap into 2 rows (Photo on top, Text below) like Prod */
html body .wp-block-columns.row,
html body .wp-block-columns.has-2-columns.row,
html body div.wp-block-columns.row {
	display: flex !important;
	/* Precedence note: !important required to override WP core @media (min-width: 782px) .wp-block-columns { flex-wrap: nowrap !important; } */
	flex-wrap: wrap !important;
}

/* Allow Bootstrap col-* width calculations to work natively inside block columns */
html body .wp-block-columns>.wp-block-column[class*="col-"] {
	/* Precedence note: !important required to allow Bootstrap grid width calculations over Gutenberg flex-basis */
	flex-basis: auto !important;
}

/* Allow col-sm-auto (SDG icons) to fit side-by-side on sm+ screens */
@media (min-width: 576px) {
	html body .wp-block-columns>.wp-block-column.col-sm-auto {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
	}
}

/* Restore WP 5.5 standard Gutenberg block column layout and 2em margin gap on desktop */
@media (min-width: 782px) {
	html body .wp-block-columns:not(.row)>.wp-block-column:not([class*="col-"]):not([style*="flex-basis"]) {
		flex-basis: 0;
		flex-grow: 1;
		min-width: 0;
	}

	html body .wp-block-columns:not(.row) {
		display: flex;
		flex-wrap: nowrap;
	}

	/* Respect inline flex-basis styles (e.g. style="flex-basis:33.33%") set by block editor */
	html body .wp-block-columns:not(.row)>.wp-block-column[style*="flex-basis"] {
		flex-grow: 0;
	}

	/* Restore WP 5.5 standard 2em margin gap between consecutive non-row columns */
	html body .wp-block-columns:not(.row)>.wp-block-column+.wp-block-column {
		margin-left: 2em;
	}
}

/* Restore exact Bootstrap hr and separator light border like Prod */
html body hr,
html body .wp-block-separator {
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, .1);
	background-color: transparent;
	opacity: 1;
}

/* Neutralize legacy theme style.css `table { border: 1px solid black; }` outer border on block tables */
html body .wp-block-table,
html body .wp-block-table table {
	border: none;
}

html body .wp-block-table:not(.is-style-stripes) td,
html body .wp-block-table:not(.is-style-stripes) th {
	border: none;
}

/* Restore exact WP Gutenberg Striped Table (.is-style-stripes) outer border, row dividers & zebra stripes like Prod */
html body .wp-block-table.is-style-stripes,
html body .is-style-stripes table {
	border: 1px solid #333;
	border-collapse: collapse;
}

html body .wp-block-table.is-style-stripes th,
html body .wp-block-table.is-style-stripes td,
html body .is-style-stripes table th,
html body .is-style-stripes table td {
	border: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

html body .wp-block-table.is-style-stripes tbody tr:nth-child(odd),
html body .is-style-stripes table tbody tr:nth-child(odd) {
	background-color: #f2f2f2;
}

html body .wp-block-table.is-style-stripes tbody tr:nth-child(even),
html body .is-style-stripes table tbody tr:nth-child(even) {
	background-color: transparent;
}

/* Ensure images inside columns scale cleanly */
html body .wp-block-column .wp-block-image img,
html body .wp-block-column img {
	max-width: 100%;
	height: auto;
}