/**
 * Typography Flow Spacing
 *
 * Proximity-based spacing for content using the "flow" pattern
 * Related elements (heading + content) are closer together
 * Unrelated elements (sections) have more space between them
 *
 * Based on the proximity principle:
 * - Things that belong together should be close
 * - Things that don't belong together should be far apart
 *
 * Uses design tokens from design-tokens/tokens/spacing.json
 *
 * @package ARTBID
 */

/* ==========================================
   RESET DEFAULT BROWSER MARGINS
   Remove user agent stylesheet margins first
   Only targets specific content containers
   ========================================== */

.wp-block-post-content h1,
.wp-block-post-content h2,
.wp-block-post-content h3,
.wp-block-post-content h4,
.wp-block-post-content h5,
.wp-block-post-content h6,
.wp-block-post-content p,
.wp-block-post-content ul,
.wp-block-post-content ol,
.wp-block-post-content blockquote,
.wp-block-post-content figure,
.wp-block-post-content .wp-block-heading,
.wp-block-post-content .wp-block-image,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content blockquote,
.entry-content figure,
.entry-content .wp-block-heading,
.entry-content .wp-block-image,
.content-editorial-text-inner h1,
.content-editorial-text-inner h2,
.content-editorial-text-inner h3,
.content-editorial-text-inner h4,
.content-editorial-text-inner h5,
.content-editorial-text-inner h6,
.content-editorial-text-inner p,
.content-editorial-text-inner ul,
.content-editorial-text-inner ol,
.content-editorial-text-inner blockquote,
.content-editorial-text-inner figure,
.content-editorial-text-inner .wp-block-heading,
.content-editorial-text-inner .wp-block-image,
.content-text-block h1,
.content-text-block h2,
.content-text-block h3,
.content-text-block h4,
.content-text-block h5,
.content-text-block h6,
.content-text-block p,
.content-text-block ul,
.content-text-block ol,
.content-text-block blockquote,
.content-text-block figure,
.content-text-block .wp-block-heading,
.content-text-block .wp-block-image {
    margin-block-start: 0;
    margin-block-end: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/* ==========================================
   BASE FLOW SPACING
   Explicit selectors for typography elements only
   Targets: headings, paragraphs, lists, images, blockquotes
   Does NOT target: divs, spans, buttons, structural wrappers
   ========================================== */

/* Default spacing between any content elements */
.wp-block-post-content > h1 + *,
.wp-block-post-content > h2 + *,
.wp-block-post-content > h3 + *,
.wp-block-post-content > h4 + *,
.wp-block-post-content > h5 + *,
.wp-block-post-content > h6 + *,
.wp-block-post-content > p + *,
.wp-block-post-content > ul + *,
.wp-block-post-content > ol + *,
.wp-block-post-content > figure + *,
.wp-block-post-content > blockquote + *,
.wp-block-post-content > .wp-block-heading + *,
.wp-block-post-content > .wp-block-image + *,
.entry-content > h1 + *,
.entry-content > h2 + *,
.entry-content > h3 + *,
.entry-content > h4 + *,
.entry-content > h5 + *,
.entry-content > h6 + *,
.entry-content > p + *,
.entry-content > ul + *,
.entry-content > ol + *,
.entry-content > figure + *,
.entry-content > blockquote + *,
.entry-content > .wp-block-heading + *,
.entry-content > .wp-block-image + *,
.content-editorial-text-inner > h1 + *,
.content-editorial-text-inner > h2 + *,
.content-editorial-text-inner > h3 + *,
.content-editorial-text-inner > h4 + *,
.content-editorial-text-inner > h5 + *,
.content-editorial-text-inner > h6 + *,
.content-editorial-text-inner > p + *,
.content-editorial-text-inner > ul + *,
.content-editorial-text-inner > ol + *,
.content-editorial-text-inner > figure + *,
.content-editorial-text-inner > blockquote + *,
.content-editorial-text-inner > .wp-block-heading + *,
.content-editorial-text-inner > .wp-block-image + *,
.content-text-block > h1 + *,
.content-text-block > h2 + *,
.content-text-block > h3 + *,
.content-text-block > h4 + *,
.content-text-block > h5 + *,
.content-text-block > h6 + *,
.content-text-block > p + *,
.content-text-block > ul + *,
.content-text-block > ol + *,
.content-text-block > figure + *,
.content-text-block > blockquote + *,
.content-text-block > .wp-block-heading + *,
.content-text-block > .wp-block-image + * {
    margin-top: var(--spacing-scale-6); /* 1.5rem / 24px - Default flow gap */
    margin-bottom: 0;
}

/* ==========================================
   SECTION HEADINGS (H1-H4)
   Large headings start new sections
   More space BEFORE = visual break from previous section
   ========================================== */

.wp-block-post-content > * + h1,
.wp-block-post-content > * + h2,
.wp-block-post-content > * + h3,
.wp-block-post-content > * + h4,
.wp-block-post-content > * + .wp-block-heading.has-base-font-size,
.wp-block-post-content > * + .wp-block-heading.has-large-font-size,
.wp-block-post-content > * + .wp-block-heading.has-x-large-font-size {
    margin-top: var(--spacing-scale-12); /* 3rem / 48px - New section */
}

/* ==========================================
   SUB-SECTION HEADINGS (H5-H6)
   Smaller headings are sub-sections
   Medium space BEFORE = related to previous section but distinct
   ========================================== */

.wp-block-post-content > * + h5,
.wp-block-post-content > * + h6,
.wp-block-post-content > * + .wp-block-heading.has-small-font-size {
    margin-top: var(--spacing-scale-8); /* 2rem / 32px - Sub-section */
}

/* ==========================================
   CONTENT AFTER HEADINGS
   Proximity principle: heading + content are related
   Less space AFTER heading = visual coupling
   ========================================== */

/* Major headings (H1-H2) get more space after */
.wp-block-post-content h1 + *,
.wp-block-post-content h2 + *,
.entry-content h1 + *,
.entry-content h2 + *,
article h1 + *,
article h2 + *,
main h1 + *,
main h2 + *,
.content-editorial-text-inner h1 + *,
.content-editorial-text-inner h2 + *,
.content-text-block h1 + *,
.content-text-block h2 + *,
.inner-hero h1 + *,
.inner-hero h2 + * {
    margin-top: var(--spacing-scale-6); /* 1.5rem / 24px - Comfortable space */
}

/* Smaller headings (H3-H6) get tighter coupling */
.wp-block-post-content h3 + *,
.wp-block-post-content h4 + *,
.wp-block-post-content h5 + *,
.wp-block-post-content h6 + *,
.wp-block-post-content .wp-block-heading + *,
.entry-content h3 + *,
.entry-content h4 + *,
.entry-content h5 + *,
.entry-content h6 + *,
.entry-content .wp-block-heading + *,
article h3 + *,
article h4 + *,
article h5 + *,
article h6 + *,
main h3 + *,
main h4 + *,
main h5 + *,
main h6 + *,
.content-editorial-text-inner h3 + *,
.content-editorial-text-inner h4 + *,
.content-editorial-text-inner h5 + *,
.content-editorial-text-inner h6 + *,
.content-text-block h3 + *,
.content-text-block h4 + *,
.content-text-block h5 + *,
.content-text-block h6 + *,
.inner-hero h3 + *,
.inner-hero h4 + *,
.inner-hero h5 + *,
.inner-hero h6 + * {
    margin-top: var(--spacing-scale-4); /* 1rem / 16px - Tight coupling */
}

/* ==========================================
   PARAGRAPH SPACING
   Sequential paragraphs stay close
   ========================================== */

.wp-block-post-content p + p,
.entry-content p + p,
article p + p,
main p + p,
.content-editorial-text-inner p + p,
.content-text-block p + p,
.inner-hero p + p {
    margin-top: var(--spacing-scale-4); /* 1rem / 16px - Paragraph spacing */
}

/* ==========================================
   BUTTON SPACING
   Buttons after content get extra space
   ========================================== */

/* Make button wrappers block-level so margins work (span is inline by default) */
.wp-block-button,
.wp-block-buttons,
.wp-block-artbid-button {
    display: block;
}

.wp-block-post-content * + .wp-block-button,
.wp-block-post-content * + .wp-block-buttons,
.wp-block-post-content * + .wp-block-artbid-button,
.entry-content * + .wp-block-button,
.entry-content * + .wp-block-buttons,
.entry-content * + .wp-block-artbid-button,
article * + .wp-block-button,
article * + .wp-block-buttons,
article * + .wp-block-artbid-button,
main * + .wp-block-button,
main * + .wp-block-buttons,
main * + .wp-block-artbid-button,
.content-editorial-text-inner * + .wp-block-button,
.content-editorial-text-inner * + .wp-block-buttons,
.content-editorial-text-inner * + .wp-block-artbid-button,
.content-text-block * + .wp-block-button,
.content-text-block * + .wp-block-buttons,
.content-text-block * + .wp-block-artbid-button,
.inner-hero * + .wp-block-button,
.inner-hero * + .wp-block-buttons,
.inner-hero * + .wp-block-artbid-button {
    margin-top: var(--spacing-scale-8); /* 2rem / 32px - CTA breathing room */
}

/* ==========================================
   LIST SPACING
   Lists and their items
   ========================================== */

.wp-block-post-content > ul,
.wp-block-post-content > ol {
    margin-top: var(--spacing-scale-6);
    margin-bottom: 0;
}

.wp-block-post-content > * + ul,
.wp-block-post-content > * + ol {
    margin-top: var(--spacing-scale-6);
}

/* Lists after headings stay close */
.wp-block-post-content > h1 + ul,
.wp-block-post-content > h2 + ul,
.wp-block-post-content > h3 + ul,
.wp-block-post-content > h4 + ul,
.wp-block-post-content > h5 + ul,
.wp-block-post-content > h6 + ul,
.wp-block-post-content > h1 + ol,
.wp-block-post-content > h2 + ol,
.wp-block-post-content > h3 + ol,
.wp-block-post-content > h4 + ol,
.wp-block-post-content > h5 + ol,
.wp-block-post-content > h6 + ol,
.wp-block-post-content > .wp-block-heading + ul,
.wp-block-post-content > .wp-block-heading + ol {
    margin-top: var(--spacing-scale-4); /* 1rem / 16px - Tight coupling */
}

/* ==========================================
   BLOCKQUOTES & SPECIAL ELEMENTS
   ========================================== */

.wp-block-post-content > blockquote {
    margin-top: var(--spacing-scale-8);
    margin-bottom: var(--spacing-scale-8);
}

.wp-block-post-content > * + blockquote {
    margin-top: var(--spacing-scale-8); /* 2rem / 32px - Visual emphasis */
}

/* ==========================================
   IMAGES & FIGURES
   Give images breathing room above and below
   ========================================== */

.wp-block-post-content > figure,
.wp-block-post-content > .wp-block-image,
.content-editorial-text-inner figure,
.content-editorial-text-inner .wp-block-image,
.content-text-block figure,
.content-text-block .wp-block-image,
.inner-hero figure,
.inner-hero .wp-block-image {
    margin-top: var(--spacing-scale-8); /* 2rem / 32px */
    margin-bottom: var(--spacing-scale-8); /* 2rem / 32px */
}

/* Images after headings get slightly less space (still related to that section) */
.content-editorial-text-inner h1 + figure,
.content-editorial-text-inner h2 + figure,
.content-editorial-text-inner h3 + figure,
.content-editorial-text-inner h4 + figure,
.content-editorial-text-inner h5 + figure,
.content-editorial-text-inner h6 + figure,
.content-editorial-text-inner h1 + .wp-block-image,
.content-editorial-text-inner h2 + .wp-block-image,
.content-editorial-text-inner h3 + .wp-block-image,
.content-editorial-text-inner h4 + .wp-block-image,
.content-editorial-text-inner h5 + .wp-block-image,
.content-editorial-text-inner h6 + .wp-block-image {
    margin-top: var(--spacing-scale-6); /* 1.5rem / 24px - Tight coupling */
}

/* ==========================================
   FAQ PATTERN (H5 + P)
   This is the exact pattern you described
   ========================================== */

/* Question (H5) after previous answer gets MORE space */
.wp-block-post-content p + h5,
.wp-block-post-content p + .wp-block-heading.has-small-font-size,
.wp-block-post-content p + .wp-block-heading.has-base-font-size,
.entry-content p + h5,
.entry-content p + .wp-block-heading,
article p + h5,
article p + .wp-block-heading,
main p + h5,
main p + .wp-block-heading {
    margin-top: var(--spacing-scale-8); /* 2rem / 32px - Clear separation between Q&A pairs */
}

/* Answer (P) after question (H5) gets LESS space */
.wp-block-post-content h5 + p,
.wp-block-post-content .wp-block-heading.has-small-font-size + p,
.wp-block-post-content .wp-block-heading.has-base-font-size + p,
.entry-content h5 + p,
.entry-content .wp-block-heading + p,
article h5 + p,
article .wp-block-heading + p,
main h5 + p,
main .wp-block-heading + p {
    margin-top: var(--spacing-scale-4); /* 1rem / 16px - Tight coupling */
}

/* ==========================================
   FIRST/LAST ELEMENT CLEANUP
   ========================================== */

.wp-block-post-content > *:first-child {
    margin-top: 0; /* No top margin on first element */
}

.wp-block-post-content > *:last-child {
    margin-bottom: 0; /* No bottom margin on last element */
}

/* ==========================================
   EXCEPTIONS - Specific cases that need different treatment
   ========================================== */

/* Navigation buttons and tabs should not get vertical spacing */
nav button + button,
.filter-tabs-nav button + button,
.lot-tab-button + .lot-tab-button,
[role="tablist"] button + button {
    margin-top: 0 !important;
}

/* Button groups - maintain horizontal alignment */
.wp-block-buttons .wp-block-button,
.wp-block-buttons .wp-block-artbid-button,
.inner-hero-buttons .wp-block-button,
.inner-hero-buttons .wp-block-artbid-button {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Filter tabs container gets custom spacing */
.filter-tabs {
    margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem) !important;
}

/* ==========================================
   RESPONSIVE ADJUSTMENTS
   Slightly increase spacing on larger screens
   ========================================== */

@media (min-width: 768px) {
    /* Increase section breaks on tablet+ */
    .wp-block-post-content > * + h1,
    .wp-block-post-content > * + h2,
    .wp-block-post-content > * + h3,
    .wp-block-post-content > * + h4 {
        margin-top: var(--spacing-scale-16); /* 4rem / 64px - Larger section break */
    }

    /* FAQ pattern - more breathing room on desktop */
    .wp-block-post-content > p + h5,
    .wp-block-post-content > p + .wp-block-heading.has-small-font-size {
        margin-top: var(--spacing-scale-16); /* 4rem / 64px - Clear separation */
    }
}