/* =========================================================
   BLOCK CONTENT
   =========================================================
   Styles for editor-authored block output, in the two places
   it reaches a page:

     .bv-doc     index.php / 404.php — post_content via the_content()
     .bv-blocks  brand + campaign — prose runs resolved by
                 Brandvault-Core's bv_editor_sections()

   Both get the same alignment, caption and figure treatment,
   from one set of rules rather than two that would drift.
   .bv-blocks additionally carries a width ladder, defined in
   single-asset.css beside the dashboard grid it has to fit.

   Replaces the subset of hello-elementor's theme.css that
   BrandVault actually needed. Written against the theme's own
   tokens rather than vendored, so it tracks the design system.
   ========================================================= */

:is(.bv-doc, .bv-blocks) {
	max-width: var(--width-narrow);
	margin-inline: auto;
}

.bv-doc__title {
	font-family: var(--font-serif);
	font-size: var(--font-size-2xl);
	line-height: var(--line-tight);
	margin-bottom: var(--space-6);
}

:is(.bv-doc, .bv-blocks) > * + * {
	margin-top: var(--space-4);
}

/* ----- Alignment ----- */

.alignleft {
	float: left;
	margin-right: var(--space-4);
	margin-bottom: var(--space-3);
}

.alignright {
	float: right;
	margin-left: var(--space-4);
	margin-bottom: var(--space-3);
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.alignwide {
	max-width: var(--width-page);
	margin-inline: auto;
}

.alignfull {
	max-width: none;
	width: auto;
	margin-inline: calc(50% - 50vw);
}

.alignfull img {
	width: 100%;
	object-fit: cover;
}

/* ----- Captions ----- */

.wp-caption,
figure.wp-block-image {
	max-width: 100%;
	margin-block: var(--space-4);
}

.wp-caption img {
	display: block;
	max-width: 100%;
	height: auto;
}

.wp-caption-text,
.wp-element-caption,
.gallery-caption {
	font-size: var(--font-size-xs);
	color: var(--color-text-soft);
	line-height: var(--line-normal);
	margin-top: var(--space-2);
	text-align: center;
}

/* ----- Media defaults ----- */

:is(.bv-doc, .bv-blocks) img,
:is(.bv-doc, .bv-blocks) video,
:is(.bv-doc, .bv-blocks) iframe {
	max-width: 100%;
	height: auto;
}

:is(.bv-doc, .bv-blocks) blockquote {
	margin-inline: 0;
	padding-left: var(--space-4);
	border-left: 3px solid var(--color-accent);
	color: var(--color-text-muted);
}

:is(.bv-doc, .bv-blocks) :is(ul, ol) {
	padding-left: var(--space-5);
}

:is(.bv-doc, .bv-blocks) table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--font-size-sm);
}

:is(.bv-doc, .bv-blocks) :is(th, td) {
	/* A full hairline in the token rule colour, not the reset's generic grey
	   that bleeds through when only the bottom border is themed. */
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-rule);
	text-align: left;
}

:is(.bv-doc, .bv-blocks) thead th {
	background: var(--color-bg-alt);
	font-weight: 600;
}

/* Token-based zebra, overriding the reset's grey stripe so the table reads as
   part of the system rather than a default. */
:is(.bv-doc, .bv-blocks) tbody tr:nth-child(odd) {
	background: transparent;
}
:is(.bv-doc, .bv-blocks) tbody tr:nth-child(even) {
	background: var(--color-bg);
}

/* ----- Buttons -----
   The core button block had no theme styling, so it fell through to core's
   dark default pill — off-brand in a copper system. Fill = accent, and the
   outline variant reads as a copper-bordered ghost button. */
:is(.bv-doc, .bv-blocks) .wp-block-button__link {
	display: inline-block;
	padding: 0.7rem 1.4rem;
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-sm);
	background: var(--color-accent);
	color: var(--color-text-inverse);
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: var(--font-size-sm);
	letter-spacing: 0.01em;
	transition:
		background-color var(--transition-fast),
		border-color var(--transition-fast),
		color var(--transition-fast);
}
:is(.bv-doc, .bv-blocks) .wp-block-button__link:hover {
	background: var(--color-accent-strong);
	border-color: var(--color-accent-strong);
	color: var(--color-text-inverse);
}
:is(.bv-doc, .bv-blocks) .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--color-accent-strong);
	border-color: var(--color-accent);
}
:is(.bv-doc, .bv-blocks) .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--color-accent-soft);
	color: var(--color-accent-strong);
}

/* ----- Pagination ----- */

.bv-doc-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-10);
	padding-top: var(--space-5);
	border-top: var(--border-subtle);
}

.bv-doc-pagination .page-numbers {
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-sm);
	color: var(--color-text-muted);
}

.bv-doc-pagination .page-numbers.current {
	background: var(--color-accent-soft);
	color: var(--color-accent-strong);
	font-weight: 600;
}

/* ----- Screen reader utility ----- */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	white-space: normal;
}