/*
 * Content area — block editor and Timber content
 * Loaded on the frontend (inside main.brsl-content-wrap) AND inside
 * the block editor canvas via add_editor_style().
 *
 * IMPORTANT — selector scoping:
 *   Rules that must work in BOTH the editor canvas and the frontend use
 *   bare .wp-block-* selectors (no .brsl-content-wrap parent). The editor
 *   loads this file inside its own iframe; .brsl-content-wrap doesn't exist
 *   there, so any rule prefixed with it would silently do nothing in the editor.
 *
 *   Rules that are frontend-only (trailing-gap fix, main wrapper) keep the
 *   .brsl-content-wrap / main.brsl-content-wrap prefix so they never fire
 *   inside the editor canvas.
 *
 * Sections:
 *   1. Block spacing
 *   2. Columns
 *   3. Separators
 *   3b. Buttons
 *   3c. Pullquote
 *   3d. Code & preformatted
 *   3e. Mark / highlight
 *   3f. Gallery
 *   3g. Table captions
 *   4. Images & media
 *   5. Utility overrides
 *   6. Editor-only: full-width blocks
 *   7. Frontend-only: trailing gap between last section and footer
 */

/* ==========================================================================
 * 1. Block spacing
 * ========================================================================== */

/* Heading → paragraph run */
.wp-block-heading + p,
.wp-block-heading + .wp-block-paragraph {
    margin-top: 0;
}

/* ==========================================================================
 * 2. Columns
 * ========================================================================== */

.wp-block-columns {
    gap: var(--space-8); /* 32px */
}

/* Stack columns on mobile */
@media (max-width: 767px) {
    .wp-block-columns {
        flex-direction: column;
        gap: var(--space-6);
    }

    .wp-block-column {
        flex-basis: 100% !important;
        width: 100%;
    }

}

/* 2/3 + 1/3 grid — matches the 3-column design grid (2fr main, 1fr supporting).
 * Uses CSS grid so proportions are exact regardless of content size.
 * flex-basis override prevents WP's inline style from fighting the grid. */
.wp-block-columns.brsl-grid-2-1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--grid-gap); /* 30px — design system grid gap */
}

.wp-block-columns.brsl-grid-2-1 > .wp-block-column {
    flex-basis: auto !important;
    min-width: 0; /* prevent grid blowout */
}

@media (max-width: 600px) {
    .wp-block-columns.brsl-grid-2-1 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
 * 3. Separators
 * ========================================================================== */

.wp-block-separator {
    border: none;
    border-top: 1px solid var(--color-keyline);
    margin-block: var(--space-block-break);
    opacity: 1; /* Gutenberg defaults to 0.4 */
    width: 100%; /* prevent collapse in flex containers */
}

/* ==========================================================================
 * 3b. Buttons
 * ========================================================================== */

.wp-block-button__link,
.wp-element-button {
    border-radius: 0;
    font-family: var(--font-serif);
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-tight);
    padding: var(--space-3) var(--space-5);
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

/* Filled (default + arrow) — matches cta-link: warm-dark bg, white text */
.wp-block-button:not(.is-style-outline):not(.is-style-outline-arrow) .wp-block-button__link:not(.has-background) {
    background-color: var(--color-neutral-warm-dark);
    color: var(--color-white);
}

.wp-block-button:not(.is-style-outline):not(.is-style-outline-arrow) .wp-block-button__link:not(.has-background):hover {
    background-color: var(--color-neutral-warm-dark-hover);
}

.wp-block-button:not(.is-style-outline):not(.is-style-outline-arrow) .wp-block-button__link:not(.has-background):focus-visible {
    outline-color: var(--color-neutral-warm-dark);
}

/* Outline variant (outline + outline-arrow) — reduce padding to compensate for 2px border */
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color),
.wp-block-button.is-style-outline-arrow .wp-block-button__link:not(.has-text-color) {
    color: var(--color-neutral-warm-dark);
    border: 2px solid var(--color-neutral-warm-dark);
    background: transparent;
    padding: calc(var(--space-3) - 2px) calc(var(--space-5) - 2px);
}

.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):hover,
.wp-block-button.is-style-outline-arrow .wp-block-button__link:not(.has-text-color):hover {
    background-color: var(--color-neutral-warm-dark-hover);
    border-color: var(--color-neutral-warm-dark-hover);
    color: var(--color-white);
}

.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):focus-visible,
.wp-block-button.is-style-outline-arrow .wp-block-button__link:not(.has-text-color):focus-visible {
    outline-color: var(--color-neutral-warm-dark);
}

/* Dark background: filled button (+ arrow) → white bg, warm-dark text */
.wp-block-cover:not(.is-light) .wp-block-button:not(.is-style-outline):not(.is-style-outline-arrow) .wp-block-button__link:not(.has-background),
.content-section--dark .wp-block-button:not(.is-style-outline):not(.is-style-outline-arrow) .wp-block-button__link:not(.has-background) {
    background-color: var(--color-white);
    color: var(--color-neutral-warm-dark);
}

.wp-block-cover:not(.is-light) .wp-block-button:not(.is-style-outline):not(.is-style-outline-arrow) .wp-block-button__link:not(.has-background):hover,
.content-section--dark .wp-block-button:not(.is-style-outline):not(.is-style-outline-arrow) .wp-block-button__link:not(.has-background):hover {
    background-color: var(--color-neutral-warm-light);
}

/* Dark background: outline button (+ outline-arrow) → white border, white text */
.wp-block-cover:not(.is-light) .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color),
.content-section--dark .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color),
.wp-block-cover:not(.is-light) .wp-block-button.is-style-outline-arrow .wp-block-button__link:not(.has-text-color),
.content-section--dark .wp-block-button.is-style-outline-arrow .wp-block-button__link:not(.has-text-color) {
    color: var(--color-white);
    border-color: var(--color-white);
}

.wp-block-cover:not(.is-light) .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):hover,
.content-section--dark .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):hover,
.wp-block-cover:not(.is-light) .wp-block-button.is-style-outline-arrow .wp-block-button__link:not(.has-text-color):hover,
.content-section--dark .wp-block-button.is-style-outline-arrow .wp-block-button__link:not(.has-text-color):hover {
    background-color: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-neutral-warm-dark);
}

/* Button row spacing */
.wp-block-buttons {
    gap: var(--space-3);
}

/* Remove underline from button links */
.wp-block-button__link {
    text-decoration-line: none;
}

/* Arrow icon — shared ::after for arrow and outline-arrow styles */
.wp-block-button.is-style-arrow .wp-block-button__link::after,
.wp-block-button.is-style-outline-arrow .wp-block-button__link::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: var(--space-2);
    vertical-align: -0.125em;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Cpath d='M3 8h10m0 0-4-4m4 4-4 4'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Cpath d='M3 8h10m0 0-4-4m4 4-4 4'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

/* ==========================================================================
 * 3c. Pullquote
 * ========================================================================== */

.wp-block-pullquote {
    border: none;
    border-top: 4px solid var(--color-keyline);
    padding: var(--space-8) var(--space-6);
    margin-block: var(--space-block-break);
    text-align: center;
    background-color: var(--color-neutral-warm-light);
}

.content-section--warm .wp-block-pullquote,
.section-block--warm .wp-block-pullquote {
    background-color: var(--color-cream);
}

.wp-block-pullquote blockquote {
    border: none;
    padding: 0;
    margin: 0;
    font-style: normal;
    background: none;
}

.wp-block-pullquote p {
    font-family: var(--font-serif);
    font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl));
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-normal);
    color: var(--color-neutral-warm-dark);
    margin-block: 0;
    text-wrap: balance;
}

@container (min-width: 500px) {
    .wp-block-pullquote {
        margin-inline: var(--space-8);
    }
}

.wp-block-pullquote cite {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    font-style: normal;
    color: var(--color-neutral-warm-dark);
    margin-top: var(--space-4);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

/* ==========================================================================
 * 3d. Code & preformatted
 * ========================================================================== */

.wp-block-code,
.wp-block-preformatted {
    background-color: var(--color-neutral-warm-light);
    border: 1px solid var(--color-keyline);
    border-radius: 0;
    padding: var(--space-5);
    overflow-x: auto;
}

/* Reset inline code style when inside a code block (already has bg) */
.wp-block-code code {
    background-color: transparent;
    padding: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-loose);
}

.wp-block-preformatted {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: var(--text-sm);
    line-height: var(--leading-loose);
}

/* ==========================================================================
 * 3e. Mark / highlight
 * ========================================================================== */

mark {
    background-color: var(--color-cream);
    padding-inline: 0.2em;
    color: inherit;
}

/* ==========================================================================
 * 3f. Gallery
 * ========================================================================== */

.wp-block-gallery.has-nested-images {
    gap: var(--space-3);
}

/* ==========================================================================
 * 3g. Table captions
 * ========================================================================== */

figure.wp-block-table {
    margin-inline: 0;
    margin-block: var(--space-2);
}

/* Override WP core's black borders */
.wp-block-table td,
.wp-block-table th,
.wp-block-table .has-fixed-layout td,
.wp-block-table .has-fixed-layout th,
.wp-block-table thead,
.wp-block-table .has-fixed-layout thead {
    border-color: var(--color-keyline);
}

.wp-block-table.is-style-stripes {
    border-bottom: none;
}

.wp-block-table.is-style-stripes td,
.wp-block-table.is-style-stripes th {
    border: none;
}

/* Stripe row background — warm-light by default */
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: var(--color-neutral-warm-light);
}

/* On warm-light sections, bump stripes to cream for contrast */
.content-section--warm .wp-block-table.is-style-stripes tbody tr:nth-child(odd),
.section-block--warm .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: var(--color-cream);
}

/* Figcaption base — shared by image, audio, embed, and table blocks */
figure.wp-block-image figcaption,
figure.wp-block-audio figcaption,
.wp-block-embed figcaption,
.wp-block-table figcaption {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    color: var(--color-neutral-warm-darkish);
    margin-top: var(--space-3);
    text-align: left;
}

figure.wp-block-audio figcaption {
    text-align: center;
}

/* ==========================================================================
 * 3h. Group block
 * ========================================================================== */

.wp-block-group.has-background {
    padding: var(--space-8);
}

.wp-block-group.is-layout-constrained > * + *,
.wp-block-group.is-layout-flow > * + * {
    margin-block-start: var(--space-4);
}

.wp-block-group > :where(h1, h2, h3, h4) {
    margin-block-end: 0;
}

/* ==========================================================================
 * 3h-b. Cover block
 * ========================================================================== */

.wp-block-cover {
    padding: var(--space-8);
}

.wp-block-cover .wp-block-cover__inner-container.is-layout-constrained > * + *,
.wp-block-cover .wp-block-cover__inner-container.is-layout-flow > * + * {
    margin-block-start: var(--space-4);
}

.wp-block-cover .wp-block-cover__inner-container > :where(h1, h2, h3, h4) {
    margin-block-end: 0;
}

/* ==========================================================================
 * 3i. File block
 * ========================================================================== */

.wp-block-file {
    margin-inline: 0;
    margin-block: var(--space-block-break);
    gap: var(--space-3);
    font-size: var(--text-base);
}

.wp-block-file__embed {
    border: 1px solid var(--color-keyline);
}

/* Shared base for both file block buttons */
.wp-block-file a:not(.wp-block-file__button),
.wp-block-file .wp-block-file__button {
    border-radius: 0;
    box-sizing: border-box;
    font-family: var(--font-serif);
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-tight);
    text-decoration-line: none;
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

/* View button — outline style */
.wp-block-file a:not(.wp-block-file__button) {
    display: inline-block;
    padding: calc(var(--space-3) - 2px) calc(var(--space-5) - 2px);
    color: var(--color-neutral-warm-dark);
    border: 2px solid var(--color-neutral-warm-dark);
    background: transparent;
}

.wp-block-file a:not(.wp-block-file__button):hover {
    background-color: var(--color-neutral-warm-dark-hover);
    border-color: var(--color-neutral-warm-dark-hover);
    color: var(--color-white);
}

/* Download button — filled style */
.wp-block-file .wp-block-file__button {
    padding: var(--space-3) var(--space-5);
    background-color: var(--color-neutral-warm-dark);
    color: var(--color-white);
}

.wp-block-file .wp-block-file__button:hover {
    background-color: var(--color-neutral-warm-dark-hover);
}

/* ==========================================================================
 * 4. Images & media
 * ========================================================================== */

figure.wp-block-image {
    margin-inline: 0;
    margin-block: var(--space-block-break);
}

/* Keep captions readable on breakout images */
figure.wp-block-image.alignfull figcaption,
figure.wp-block-image.alignwide figcaption {
    width: min(var(--max-width-content), 100% - 2 * var(--site-padding));
    margin-inline: auto;
}

figure.wp-block-audio {
    margin-inline: 0;
    margin-block: var(--space-block-break);
}

.wp-block-embed {
    margin-inline: 0;
    margin-block: var(--space-block-break);
}

/* ==========================================================================
 * 5. Utility overrides
 * ========================================================================== */

/* Let our section constraints control widths, not .entry-content */
.entry-content {
    max-width: none;
}


/* ==========================================================================
 * 6. Editor-only: full-width blocks
 *
 * .is-root-container exists only inside the block editor canvas, never on
 * the frontend. Rules here are editor-only overrides.
 *
 * In the post editor, vw resolves to the browser viewport — not the editor
 * panel width. Redefine the custom property to use % instead of vw so
 * padding scales with the editor canvas. */
.editor-styles-wrapper {
    --wp--preset--spacing--site-gutter: clamp(1.5rem, 5%, 4rem);
}

/* Synced patterns wrap content in .wp-block-block — break it out too */
.is-root-container > .wp-block-block {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ==========================================================================
 * 7. Frontend-only: trailing gap between last section and footer
 *
 * These rules intentionally use .brsl-content-wrap so they only fire on
 * the frontend, not inside the block editor canvas.
 * ========================================================================== */

main.brsl-content-wrap {
    padding-bottom: 0;
}

.brsl-content-wrap > *:last-child {
    margin-bottom: 0 !important;
}

/* WP wraps blocks in .is-layout-flow / .is-layout-constrained which
   adds blockGap margin to children. Zero out the last child's gap
   so full-width sections sit flush against the footer. */
.brsl-content-wrap .is-layout-flow > *:last-child,
.brsl-content-wrap .is-layout-constrained > *:last-child {
    margin-bottom: 0 !important;
}