/* 
 * Layout Spacing & Vertical Rhythm 
 * Strict compliance with 8-point grid system
 */

:root {
    --spacing-tag-title: 2rem;
    /* Reset to 2rem to ensure exactly 32px space or manual control */
    --spacing-header-content: 2.5rem;
    /* 40px - Balanced hierarchy (larger than tag gap, smaller than section gap) */
}

/* 
 * 1. Tags / Subtitles / Eyebrows 
 * Target: h6 or .rocks-subtitle
 */
h6,
.elementor-widget-heading h6.elementor-heading-title,
.rocks-subtitle,
.site-tag {
    margin-bottom: var(--spacing-tag-title) !important;
    display: block;
    line-height: 1.4;
}

/* 
 * 2. Section Titles (H2)
 * We want a large gap after the main section title.
 * We must be careful not to target Card Titles (which might be H2).
 * 
 * Strategy: Target H2s that are direct children of a column/section or 
 * specific "Section Header" containers, NOT inside cards (.jet-listing-grid__item, .card, etc).
 */

/* Global Section Title Spacing */
body:not(.elementor-editor-active) main .elementor-section .elementor-container .elementor-column>.elementor-widget-wrap>.elementor-widget-heading h2.elementor-heading-title,
.rocks-title {
    margin-bottom: var(--spacing-header-content) !important;
}

/* 
 * Exclude Card Titles if they accidentally match above (specificity battle)
 * The above selector is very specific to "Page Builder" structure, 
 * so it shouldn't hit cards if cards are built with Loop Grid (nested).
 */

/* 
 * Elementor Widget Margin Reset
 * Ensure Elementor's default widget gap doesn't mess up our specific spacing 
 */
.elementor-widget-heading {
    margin-bottom: 0px;
}