/*
 * BigState Base — assets/css/blocks.css
 *
 * Native Gutenberg block overrides.
 *
 * Purpose: pipe brand tokens (--bs-*) into WordPress's native block
 * selector names so every built-in block looks on-brand without any
 * per-block color-picker selections in the editor.
 *
 * Rules:
 *   - Reference only CSS custom properties — never hardcode colors or fonts.
 *   - Keep specificity low; inline editor overrides should always win.
 *   - Don't duplicate styles already in base.css (h1-h6, p, a, blockquote, etc.)
 *     — those generic selectors already apply to block output.
 *
 * Loaded on front-end (after components.css) and in the block editor
 * (via add_editor_style in theme-setup.php).
 *
 * @package BigState_Base
 */

/* ── 1. Button block ───────────────────────────────────────────────────────── */

/*
 * WordPress outputs:
 *   <div class="wp-block-buttons">
 *     <div class="wp-block-button">
 *       <a class="wp-block-button__link wp-element-button">Label</a>
 *     </div>
 *   </div>
 *
 * Default style = filled primary. Outline style = ghost with brand border.
 * If the editor's color picker is used, inline styles override these — correct.
 */

.wp-block-button__link,
.wp-element-button {
	font-family:     var(--bs-font-body);
	font-size:       var(--bs-text-base);
	font-weight:     var(--bs-weight-semibold);
	line-height:     1;
	text-decoration: none;
	border-radius:   var(--bs-radius-md);
	padding:         12px var(--bs-space-4);
	border:          2px solid transparent;
	transition:
		background-color var(--bs-transition-fast),
		color            var(--bs-transition-fast),
		border-color     var(--bs-transition-fast),
		box-shadow       var(--bs-transition-fast),
		transform        var(--bs-transition-fast);
}

/* Filled (default) */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--bs-color-primary);
	color:            var(--bs-color-text-on-dark);
	border-color:     var(--bs-color-primary);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background-color: var(--bs-color-primary-hover);
	border-color:     var(--bs-color-primary-hover);
	color:            var(--bs-color-text-on-dark);
	transform:        translateY(-1px);
	box-shadow:       var(--bs-shadow-md);
}

/* Outline */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color:            var(--bs-color-primary);
	border-color:     var(--bs-color-primary);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--bs-color-primary);
	color:            var(--bs-color-text-on-dark);
	transform:        translateY(-1px);
	box-shadow:       var(--bs-shadow-md);
}

/* Button group spacing */
.wp-block-buttons {
	gap: var(--bs-space-2);
}

/* ── 2. Heading block ──────────────────────────────────────────────────────── */

/*
 * base.css already styles h1-h6. These selectors reinforce brand fonts
 * specifically on the Gutenberg heading block, which sometimes gets
 * WordPress's own default overrides.
 */

.wp-block-heading {
	font-family: var(--bs-font-heading);
	font-weight: var(--bs-weight-bold);
	line-height: var(--bs-leading-tight);
	color:       var(--bs-color-text);
}

/* ── 3. Paragraph block ────────────────────────────────────────────────────── */

.wp-block-paragraph {
	font-family: var(--bs-font-body);
	font-size:   var(--bs-text-base);
	line-height: var(--bs-leading-normal);
	color:       var(--bs-color-text);
}

/* Lead / intro paragraph style variant */
.wp-block-paragraph.is-style-lead,
.wp-block-paragraph.has-large-font-size {
	font-size:   var(--bs-text-xl);
	line-height: var(--bs-leading-loose);
	color:       var(--bs-color-text-muted);
}

/* ── 4. Quote block ────────────────────────────────────────────────────────── */

/*
 * WordPress resets blockquote styles in the block editor. These
 * restore the brand treatment (left-border accent, italic, muted text).
 */

.wp-block-quote {
	border-left:  4px solid var(--bs-color-primary);
	padding-left: var(--bs-space-3);
	font-style:   italic;
	color:        var(--bs-color-text-muted);
	margin-inline: 0;
}

.wp-block-quote p {
	font-size:   var(--bs-text-lg);
	line-height: var(--bs-leading-loose);
	margin-bottom: var(--bs-space-2);
}

.wp-block-quote cite,
.wp-block-quote .wp-block-quote__citation {
	display:     block;
	font-style:  normal;
	font-size:   var(--bs-text-sm);
	font-weight: var(--bs-weight-semibold);
	color:       var(--bs-color-text-muted);
}

/* Large quote style */
.wp-block-quote.is-style-large {
	border-left: none;
	padding-left: 0;
	text-align: center;
}

.wp-block-quote.is-style-large p {
	font-size:   var(--bs-text-2xl);
	font-family: var(--bs-font-heading);
	font-weight: var(--bs-weight-bold);
	color:       var(--bs-color-primary);
}

/* ── 5. Pull Quote block ───────────────────────────────────────────────────── */

.wp-block-pullquote {
	border-top:    4px solid var(--bs-color-primary);
	border-bottom: 4px solid var(--bs-color-primary);
	padding-block: var(--bs-space-6);
	text-align:    center;
}

.wp-block-pullquote blockquote p {
	font-family: var(--bs-font-heading);
	font-size:   var(--bs-text-2xl);
	font-weight: var(--bs-weight-bold);
	line-height: var(--bs-leading-snug);
	color:       var(--bs-color-primary);
	font-style:  normal;
}

.wp-block-pullquote cite,
.wp-block-pullquote .wp-block-pullquote__citation {
	font-size:   var(--bs-text-sm);
	font-weight: var(--bs-weight-semibold);
	color:       var(--bs-color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ── 6. Separator block ────────────────────────────────────────────────────── */

.wp-block-separator {
	border:     none;
	border-top: 1px solid var(--bs-color-border);
	margin-block: var(--bs-space-6);
}

.wp-block-separator.is-style-wide {
	max-width: none;
}

/* Dots style — use accent color */
.wp-block-separator.is-style-dots::before {
	color:       var(--bs-color-primary);
	letter-spacing: 0.5em;
}

/* Accent-colored separator when short/centered */
.wp-block-separator:not(.is-style-dots):not(.is-style-wide) {
	width:       60px;
	border-top:  3px solid var(--bs-color-accent);
	margin-inline: auto;
}

/* ── 7. Image block ────────────────────────────────────────────────────────── */

.wp-block-image img {
	border-radius: var(--bs-radius-md);
	display:       block;
	max-width:     100%;
	height:        auto;
}

/* Rounded style variant */
.wp-block-image.is-style-rounded img {
	border-radius: var(--bs-radius-full);
}

.wp-element-caption,
.wp-block-image figcaption {
	font-size:   var(--bs-text-sm);
	color:       var(--bs-color-text-muted);
	text-align:  center;
	margin-top:  var(--bs-space-1);
	font-style:  italic;
}

/* ── 8. Columns block ──────────────────────────────────────────────────────── */

.wp-block-columns {
	gap:         var(--bs-space-6);
	align-items: stretch; /* equal height columns */
}

.wp-block-column {
	/* Let WordPress handle the flex-basis; just ensure content doesn't overflow */
	min-width: 0;
}

/* ── 9. Media & Text block ─────────────────────────────────────────────────── */

.wp-block-media-text {
	gap: var(--bs-space-8);
}

.wp-block-media-text .wp-block-media-text__media img {
	border-radius: var(--bs-radius-md);
}

/* ── 10. Cover block ───────────────────────────────────────────────────────── */

/*
 * When Louden uses a Cover block as a section background (e.g. a tinted
 * image or solid-color band), constrain the inner content to the container.
 */

.wp-block-cover__inner-container {
	max-width:    var(--bs-container-max);
	width:        100%;
	margin-inline: auto;
	padding-inline: var(--bs-container-pad);
}

.wp-block-cover .wp-block-heading,
.wp-block-cover .wp-block-paragraph {
	color: var(--bs-color-text-on-dark);
}

/* ── 11. Group block (background sections) ─────────────────────────────────── */

/*
 * Groups with background colors get vertical padding automatically.
 * Louden can set bg color in the editor; this ensures consistent spacing.
 */

.wp-block-group.has-background {
	padding-block:  var(--bs-space-10);
	padding-inline: var(--bs-container-pad);
}

/* Constrain inner content when group is full-width */
.wp-block-group.alignfull > .wp-block-group__inner-container {
	max-width:    var(--bs-container-max);
	margin-inline: auto;
}

/* ── 12. Table block ───────────────────────────────────────────────────────── */

.wp-block-table table {
	width:           100%;
	border-collapse: collapse;
	font-size:       var(--bs-text-sm);
}

.wp-block-table td,
.wp-block-table th {
	padding:    10px var(--bs-space-2);
	border:     1px solid var(--bs-color-border);
	text-align: left;
}

.wp-block-table thead th {
	background:  var(--bs-color-bg-subtle);
	font-family: var(--bs-font-heading);
	font-weight: var(--bs-weight-semibold);
	color:       var(--bs-color-text);
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) td {
	background: var(--bs-color-bg-subtle);
}

/* ── 13. List block ────────────────────────────────────────────────────────── */

/*
 * base.css already styles ul/ol. The wp-block-list class inherits those.
 * Just add a brand accent to the bullet/marker color.
 */

.wp-block-list {
	padding-left: var(--bs-space-3);
}

.wp-block-list li::marker {
	color: var(--bs-color-primary);
}

/* ── 14. Search block ──────────────────────────────────────────────────────── */

.wp-block-search__input {
	font-family:   var(--bs-font-body);
	font-size:     var(--bs-text-base);
	border:        1.5px solid var(--bs-color-border);
	border-radius: var(--bs-radius-md) 0 0 var(--bs-radius-md);
	padding:       10px var(--bs-space-2);
	color:         var(--bs-color-text);
}

.wp-block-search__input:focus {
	outline:      none;
	border-color: var(--bs-color-primary);
	box-shadow:   0 0 0 3px color-mix(in srgb, var(--bs-color-primary) 20%, transparent);
}

.wp-block-search .wp-block-search__button {
	background-color: var(--bs-color-primary);
	color:            var(--bs-color-text-on-dark);
	border:           2px solid var(--bs-color-primary);
	border-radius:    0 var(--bs-radius-md) var(--bs-radius-md) 0;
	padding:          10px var(--bs-space-3);
	font-weight:      var(--bs-weight-semibold);
	cursor:           pointer;
	transition:       background-color var(--bs-transition-fast);
}

.wp-block-search .wp-block-search__button:hover {
	background-color: var(--bs-color-primary-hover);
	border-color:     var(--bs-color-primary-hover);
}

/* ── 15. Page break / spacing ──────────────────────────────────────────────── */

/* Extra spacing above any block with top-margin utility */
.wp-block-spacer {
	/* WordPress sets height inline — nothing to override */
}

/* ── 16. Social Icons block ────────────────────────────────────────────────── */

/*
 * Default: filled circles, brand primary background.
 * The editor's color palette can override per instance.
 */

.wp-block-social-links .wp-social-link {
	background-color: var(--bs-color-primary);
	transition:       background-color var(--bs-transition-fast), transform var(--bs-transition-fast);
}

.wp-block-social-links .wp-social-link:hover {
	background-color: var(--bs-color-primary-hover);
	transform:        translateY(-2px);
}

/* Logos-only style — show brand-colored icons, no circle */
.wp-block-social-links.is-style-logos-only .wp-social-link {
	background-color: transparent;
	color:            var(--bs-color-primary);
}

/* Pill-shaped style */
.wp-block-social-links.is-style-pill-shape .wp-social-link {
	border-radius: var(--bs-radius-full);
}