/**
 * Flexible Content Area Block Styles
 *
 * A client-friendly container block with InnerBlocks support
 * Background colors, text colors, padding, and margins are controlled via native Gutenberg controls
 * Uses theme's standard .container class for consistent width and padding
 */

/* Block Container - inherits .container styles from theme */
.flexible-content-area-block {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Wide monitor fix: prevent background image cutoff on super wide screens */
@media (width >= 1920px) {
    .flexible-content-area-block {
        background-size: 100% auto !important;
        background-position: center bottom !important;
    }
}

/* Fix for overlaying background image with gradient/color
 * WordPress gradient/color classes use background shorthand with !important which resets background-image
 * Solution: JavaScript (script.js) reads inline background-image and re-applies as multiple backgrounds
 * Format: background: image layer, gradient/color layer
 * The image renders on top, gradient/color renders underneath
 * Works for SVG and transparent PNG images
 */

/* Editor: Ensure width and justification preview correctly in editor */

/* Width presets preview */
.editor-styles-wrapper .flexible-content-wrapper.width-narrow {
    max-width: var(--max-width-content-sm) !important;
}

.editor-styles-wrapper .flexible-content-wrapper.width-medium {
    max-width: var(--max-width-content-md) !important;
}

.editor-styles-wrapper .flexible-content-wrapper.width-standard {
    max-width: var(--max-width-content-lg) !important;
}

.editor-styles-wrapper .flexible-content-wrapper.width-content {
    max-width: 1064px !important;
}

.editor-styles-wrapper .flexible-content-wrapper.width-wide {
    max-width: var(--max-width-content-2xl) !important;
}

.editor-styles-wrapper .flexible-content-wrapper.width-extra-wide {
    max-width: var(--max-width-content-3xl) !important;
}

.editor-styles-wrapper .flexible-content-wrapper.width-full {
    max-width: none !important;
}

/* Justification preview */
.editor-styles-wrapper .flexible-content-wrapper.justify-left {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.editor-styles-wrapper .flexible-content-wrapper.justify-right {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Inner Content Wrapper - Site container with padding */
.flexible-content-inner {
    width: 100%;
    margin: 0 auto;
}

/* Content Wrapper - Handles width constraints and justification */
.flexible-content-wrapper {
    width: 100%;
    max-width: var(--max-width-content-2xl);

    /* Default: 1280px */
    margin: 0 auto;

    /* Flex container for gap spacing between nested blocks */
    display: flex;
    flex-direction: column;
}

/* Ensure all child blocks can take full width for proper ACF preview rendering */
.flexible-content-wrapper>* {
    width: 100%;
    max-width: 100%;
}

/* ========================================
 * CONTENT WIDTH PRESETS
 * ========================================
 * Control maximum width of content wrapper
 * Uses theme's CSS custom properties for consistency
 * ========================================
 */

/* Narrow - Perfect for long-form reading */
.flexible-content-wrapper.width-narrow {
    max-width: var(--max-width-content-sm);

    /* 600px */
}

/* Medium - Comfortable reading width */
.flexible-content-wrapper.width-medium {
    max-width: var(--max-width-content-md);

    /* 800px */
}

/* Standard - Balanced content width */
.flexible-content-wrapper.width-standard {
    max-width: var(--max-width-content-lg);

    /* 900px */
}

/* Content - Readable content width (replaces container-content) */
.flexible-content-wrapper.width-content {
    max-width: 1064px;
}

/* Wide - Default container width (no modifier needed, but kept for clarity) */
.flexible-content-wrapper.width-wide {
    max-width: var(--max-width-content-2xl);

    /* 1280px */
}

/* Extra Wide - Extended content width */
.flexible-content-wrapper.width-extra-wide {
    max-width: var(--max-width-content-3xl);

    /* 1440px */
}

/* Full Width - No max-width constraint */
.flexible-content-wrapper.width-full {
    max-width: none;
}

/* Custom Width - Applied via inline styles */

/* No class needed, max-width set directly in style attribute */

/* ========================================
 * CONTENT JUSTIFICATION
 * ========================================
 * Control horizontal alignment of the content wrapper within container
 * Container (.flexible-content-inner) provides site padding
 * Wrapper (.flexible-content-wrapper) can be left/center/right aligned
 * ========================================
 */

/* Left-aligned - Remove right margin */
.flexible-content-wrapper.justify-left {
    margin-left: 0;
    margin-right: auto;
}

/* Right-aligned - Remove left margin */
.flexible-content-wrapper.justify-right {
    margin-left: auto;
    margin-right: 0;
}

/* Center-aligned - Default, already set in base .flexible-content-wrapper */

/* ========================================
 * TEXT BLOCK MARGIN RESET
 * ========================================
 * Reset default margins on text blocks (paragraphs, headings, lists)
 * when inside flexible-content-wrapper. The wrapper's gap property
 * handles all spacing consistently - no need for element margins.
 * ========================================
 */

/* Reset margins on direct child text blocks - gap handles spacing */

/* .flexible-content-wrapper > p,
.flexible-content-wrapper > .wp-block-paragraph,
.flexible-content-wrapper > .wp-block-heading,
.flexible-content-wrapper > .wp-block-list,
.flexible-content-wrapper > h1,
.flexible-content-wrapper > h2,
.flexible-content-wrapper > h3,
.flexible-content-wrapper > h4,
.flexible-content-wrapper > h5,
.flexible-content-wrapper > h6,
.flexible-content-wrapper > ul,
.flexible-content-wrapper > ol {
    margin-block: 0;
} */

/* ========================================
 * BACKWARD COMPATIBILITY
 * ========================================
 * Support for blocks saved with old container-default/container-full classes
 * ========================================
 */

.flexible-content-area-block.container-default,
.flexible-content-area-block.container-full {
    margin-left: auto;
    margin-right: auto;
}

/* InnerBlocks Container */
.flexible-content-area-block>.block-editor-inner-blocks,
.flexible-content-area-block>.wp-block {
    width: 100%;
}

/* Editor: Empty State Styling */
.editor-styles-wrapper .flexible-content-area-block .block-editor-inner-blocks>.block-editor-block-list__layout {
    min-height: 120px;
}

/* Editor: Appender Button Styling */
.flexible-content-area-block .block-editor-block-list__layout>.block-list-appender {
    margin: 0;
}

/* Editor: Empty state with prominent add button */
.flexible-content-area-block .block-editor-inner-blocks>.block-editor-block-list__layout:empty::before {
    content: 'Click the + button below to add content blocks';
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    color: var(--color-text-tertiary);
    font-size: 14px;
    font-style: italic;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg-secondary);
}

/* Editor: Reduce visual noise when empty */
.flexible-content-area-block .block-editor-inner-blocks>.block-editor-block-list__layout:empty~.block-list-appender {
    margin-top: var(--space-xs);
}

/* Frontend: Ensure nested blocks render properly */
.flexible-content-area-block>.wp-block-group__inner-container {
    width: 100%;
}

/* Spacing for nested blocks */
.flexible-content-area-block>*+* {
    margin-top: var(--wp--style--block-gap);
}

/* Link Styles - Inherit from color settings */
.flexible-content-area-block a:not(.btn) {
    color: inherit;
}

/* Background Image Support - Ensure proper layering */
.flexible-content-area-block.has-background {
    position: relative;
}

/* Ensure content is above background */
.flexible-content-area-block>* {
    position: relative;
    z-index: 1;
}

/* ========================================
 * NESTED CONTAINER RESET
 * ========================================
 * Prevents double containment when ACF blocks
 * with .container classes are nested inside
 * Flexible Content Area blocks.
 *
 * Issue: Flexible Content Area already provides
 * container constraints. Nested blocks shouldn't
 * add additional padding/max-width.
 * ========================================
 */

/* Remove container constraints from direct child blocks */
.flexible-content-area-block>.wp-block .container,
.flexible-content-area-block .flexible-content-wrapper>.wp-block .container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

/* ========================================
 * ACF BLOCK SPACING WITHIN FLEXIBLE CONTENT
 * ========================================
 * Remove top padding from first ACF block and bottom padding
 * from last ACF block to prevent double padding with the
 * Flexible Content Area container.
 *
 * Handles both direct children and nested blocks (e.g., ACF
 * blocks inside Gutenberg Group/Column containers).
 * ========================================
 */

/* Remove top padding from first ACF block */
.flexible-content-area-block .flexible-content-wrapper > .acf-block:first-child,
.flexible-content-area-block .flexible-content-wrapper > :first-child .acf-block {
    padding-top: 0 !important;
}

/* Remove bottom padding from last ACF block */
.flexible-content-area-block .flexible-content-wrapper > .acf-block:last-child,
.flexible-content-area-block .flexible-content-wrapper > :last-child .acf-block {
    padding-bottom: 0 !important;
}

/* ========================================
 * SECTION PADDING OVERRIDE
 * ========================================
 * Remove horizontal padding from blocks with section padding
 * classes when inside flexible content area.
 * Flexible content area provides consistent horizontal spacing.
 * ========================================
 */
.flexible-content-area-block [class*="section-padding"] .container,
.flexible-content-area-block [class*="section-padding"] {
    padding-left: 0;
    padding-right: 0;
}

/* ========================================
 * INSTAGRAM EMBED EQUAL HEIGHTS
 * ========================================
 * Make Instagram embeds uniform height when displayed
 * in a grid/columns layout. All columns are set to the
 * same height with iframes filling available space.
 * ======================================== */

/* Container for Instagram embeds - ensure equal height columns */
.flexible-content-area-block .wp-block-columns:has(iframe[src*="instagram"]) {
    align-items: stretch;
}

.flexible-content-area-block .wp-block-columns:has(iframe[src*="instagram"]) > .wp-block-column {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 580px;
}

/* Make iframes fill the column height */
.flexible-content-area-block .wp-block-columns iframe[src*="instagram"] {
    flex: 1;
    min-height: 580px;
    max-height: 580px;
    width: 100%;
}