/**
 * Branch Creative — blocks.css
 *
 * Styles for custom Gutenberg blocks and Gutenberg core block overrides.
 * Individual block styles can also live in /blocks/{block-name}/style.css —
 * WordPress auto-enqueues those. This file is for shared block utilities
 * and any core block customizations.
 *
 * @package Branch_Creative
 */

/* ── Gutenberg Core Block Overrides ────────────────────────────────────────── */

/* Respect the container max-width for constrained blocks */
.wp-block-group.alignfull > .wp-block-group__inner-container {
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-px);
	padding-right: var(--container-px);
}

/* Buttons block */
.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

/* Quote block */
.wp-block-quote {
	border-left: 2px solid var(--color-olive);
	padding: var(--space-2) var(--space-6);
	margin: var(--space-8) 0;
	background: none;
	border-radius: 0;
}

.wp-block-quote p {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-xl);
	font-style: italic;
	color: var(--color-ink);
}

.wp-block-quote cite {
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	font-style: normal;
}

/* Cover block */
.wp-block-cover {
	min-height: 400px;
}

/* Separator */
.wp-block-separator {
	border-color: var(--color-border);
}

/* Table */
.wp-block-table td,
.wp-block-table th {
	border-color: var(--color-border);
	padding: var(--space-3) var(--space-4);
}

.wp-block-table th {
	background: var(--color-stone);
	font-weight: var(--font-weight-semibold);
}

/* ── Custom Block Shared Utilities ──────────────────────────────────────────── */

/* All custom blocks get section padding by default */
.branch-block {
	padding-top: var(--section-padding-y);
	padding-bottom: var(--section-padding-y);
}

/* Block inner container */
.branch-block__inner {
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-px);
	padding-right: var(--container-px);
}

.branch-block__inner--narrow {
	max-width: var(--container-md);
}

/* Section eyebrow label — small uppercase caption above a section heading.
   Olive is the brand's sparing accent color; this is its primary use case. */
.branch-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-widest);
	text-transform: uppercase;
	color: var(--color-olive);
	margin-bottom: var(--space-4);
}

/* Section heading + subhead group */
.branch-section-header {
	margin-bottom: var(--space-12);
}

.branch-section-header--center {
	text-align: center;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--space-12);
}

.branch-section-header--center .branch-eyebrow { justify-content: center; }

.branch-section-title {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-display-md);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-height-tight);
	color: var(--color-heading);
	margin-bottom: var(--space-4);
}

.branch-section-subtitle {
	font-size: var(--font-size-lg);
	color: var(--color-text-muted);
	line-height: var(--line-height-relaxed);
	max-width: 60ch;
}

/* ── Responsive section padding ─────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.branch-block {
		padding-top: var(--space-16);
		padding-bottom: var(--space-16);
	}
}

@media (max-width: 640px) {
	.branch-block {
		padding-top: var(--space-12);
		padding-bottom: var(--space-12);
	}
	.branch-block__inner {
		padding-left: var(--space-5);
		padding-right: var(--space-5);
	}
}

/* About page — tighter section spacing per request (~100px between
   sections instead of the site-wide default). Scoped to the About page's
   body class (page-id-210) so it doesn't affect the same blocks (e.g.
   About Split) used elsewhere, like the homepage. */
body.page-id-210 .branch-block {
	padding-top: 50px;
	padding-bottom: 50px;
}

@media (max-width: 1024px) {
	body.page-id-210 .branch-block {
		padding-top: 40px;
		padding-bottom: 40px;
	}
}

@media (max-width: 640px) {
	body.page-id-210 .branch-block {
		padding-top: 32px;
		padding-bottom: 32px;
	}
}

/* Block background variants */
.branch-block--bg-alt  { background-color: var(--color-bg-alt); }
.branch-block--bg-dark {
	background-color: var(--color-bg-dark);
	color: var(--color-text-inverse);
}
.branch-block--bg-dark .branch-section-title { color: var(--color-cream); }
.branch-block--bg-dark .branch-section-subtitle { color: rgba(244, 241, 234, 0.72); }
.branch-block--bg-dark .branch-eyebrow { color: var(--color-stone); }