/* ============================================================================
   wp-blocks.css — typography/rhythm parity between WP core blocks and the
   theme's content-section block. Editors get a content-section look when they
   wrap copy in a core Group block.
   ========================================================================= */

@layer components {

	/* === Group block — outer rhythm ===================================== */

	.wp-block-group {
		margin-block: var(--space-6);
	}

	/* WP renders Group as either `.wp-block-group > children` (modern) or
	   `.wp-block-group > .wp-block-group__inner-container > children`
	   (classic / older themes). Both selectors cover both layouts. */

	.wp-block-group > * + *,
	.wp-block-group__inner-container > * + * {
		margin-block-start: var(--space-4);
	}

	.wp-block-group > * + :is(h2, h3, h4),
	.wp-block-group__inner-container > * + :is(h2, h3, h4) {
		margin-block-start: var(--space-7);
	}

	.wp-block-group > :is(h2, h3, h4) + *,
	.wp-block-group__inner-container > :is(h2, h3, h4) + * {
		margin-block-start: var(--space-4);
	}

	/* === Group block — inner typography ================================= */

	.wp-block-group :is(h2, h3, h4) {
		text-wrap: balance;
		max-inline-size: 30ch;
	}

	.wp-block-group h2 {
		margin-block-end: var(--space-5);
	}

	.wp-block-group p {
		max-inline-size: 70ch;
		line-height: var(--lh-normal);
	}

	.wp-block-group :is(ul, ol) {
		max-inline-size: 70ch;
		padding-inline-start: var(--space-5);
		line-height: var(--lh-normal);
	}

	.wp-block-group :is(ul, ol) li + li {
		margin-block-start: var(--space-2);
	}

	.wp-block-image {
		margin-block-start: var(--space-4) !important;
	}

	.wp-block-group img {
		display: block;
		max-inline-size: 70ch;
		block-size: auto;
		border-radius: var(--radius-md);
	}

	.wp-block-group .alignwide img,
	.wp-block-group img.alignwide {
		max-inline-size: 1000px;
	}

	.wp-block-group .alignfull img,
	.wp-block-group img.alignfull {
		max-inline-size: none;
		inline-size: 100%;
		border-radius: 0;
	}

	/* === Group with background — restore breathing room ================= */

	.wp-block-group.has-background {
		padding: clamp(var(--space-4), 4vw, var(--space-6));
		border-radius: var(--radius-lg);
	}

	/* === Alignment variants — let WP-wide/full groups break the grid ==== */

	.wp-block-group.alignwide,
	.wp-block-group.alignfull {
		max-inline-size: none;
	}

	/* === Table block — branded, responsive ============================== */

	.wp-block-table {
		margin-block: var(--space-4) var(--space-5);
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		background: var(--color-bg);
	}

	.wp-block-table > table,
	.wp-block-table table {
		inline-size: 100%;
		min-inline-size: 560px;
		border-collapse: collapse;
		font-size: var(--fs-sm);
		line-height: var(--lh-normal);
	}

	/* Thead: navy background, yellow underline strip, white text */
	.wp-block-table thead {
		background: var(--color-brand);
		color: #fff;
	}

	.wp-block-table thead th {
		padding: var(--space-3) var(--space-4);
		text-align: start;
		font-weight: var(--fw-semibold);
		font-size: var(--fs-xs);
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		border-block-end: 2px solid var(--color-accent);
		white-space: nowrap;
	}

	.wp-block-table tbody td {
		padding: var(--space-3) var(--space-4);
		border-block-start: 1px solid var(--color-border);
		vertical-align: top;
	}

	.wp-block-table tbody tr:nth-child(even) {
		background: var(--color-bg-subtle);
	}

	.wp-block-table tbody tr:hover {
		background: rgba(255, 206, 0, 0.10);
	}

	/* First column: navy accent for rank/key column */
	.wp-block-table tbody td:first-child {
		color: var(--color-brand);
		font-weight: var(--fw-bold);
		white-space: nowrap;
	}	

	/* No-fixed-layout WP option lets columns size to content */
	.wp-block-table:not(.is-style-stripes) table.has-fixed-layout {
		table-layout: auto;
	}

	/* Caption styled muted */
	.wp-block-table figcaption {
		padding: var(--space-3) var(--space-4);
		font-size: var(--fs-xs);
		color: var(--color-text-muted);
		border-block-start: 1px solid var(--color-border);
		background: var(--color-bg-subtle);
	}

	/* Scroll hint on mobile — subtle right edge gradient */
	@media (max-width: 767px) {
		.wp-block-table {
			background-image:
				linear-gradient(to right, var(--color-bg) 30%, rgba(255, 255, 255, 0)),
				linear-gradient(to right, rgba(255, 255, 255, 0), var(--color-bg) 70%),
				radial-gradient(farthest-side at 0 50%, rgba(0, 53, 128, 0.18), rgba(0, 53, 128, 0)),
				radial-gradient(farthest-side at 100% 50%, rgba(0, 53, 128, 0.18), rgba(0, 53, 128, 0));
			background-repeat: no-repeat;
			background-position: 0 0, 100% 0, 0 0, 100% 0;
			background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
			background-attachment: local, local, scroll, scroll;
		}

		.wp-block-table thead th,
		.wp-block-table tbody td {
			padding: var(--space-2) var(--space-3);
		}
	}
}