/**
 * 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 {
    position: relative; /* Required for overlay positioning */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Wide monitor fix: prevent background image cutoff on super wide screens
 * NOTE: This CSS provides default fallback only. The JS (script.js) handles
 * the wide screen fix while preserving user's focal point settings.
 * Only apply to blocks WITHOUT explicit background-position (focal point).
 * Blocks with focal point will have inline style: background-position: X% Y%
 */
@media (width >= 1920px) {
    .flexible-content-area-block:not([style*="background-position"]) {
        background-size: 100% auto;
        background-position: center bottom;
    }
}

/* Fix for overlaying gradient/color on background image
 * 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: gradient/color layer, image layer
 * The gradient/color renders on top as an overlay, image renders underneath
 * Creates tint/fade effects on background 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%;

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

    /* Flex container for gap spacing between nested blocks
     * --block-spacing is set via inline style when user selects a spacing option
     * Falls back to --space-xl (default) when not set */
    display: flex;
    flex-direction: column;
    gap: var(--block-spacing, var(--space-xl));

    /* Default column gap for nested Columns blocks */
    --wp--style--block-gap: var(--block-spacing, var(--space-xl));
}

/* Ensure all child blocks can take full width for proper ACF preview rendering */

/* Exclude aligned images which need their natural width for centering */
.flexible-content-wrapper>*:not(.aligncenter, .alignleft, .alignright) {
    width: 100%;
    max-width: 100%;
}

/* Respect WordPress image alignment classes */
.flexible-content-wrapper>.aligncenter {
    margin-left: auto;
    margin-right: auto;
}

.flexible-content-wrapper>.alignleft {
    margin-right: auto;
}

.flexible-content-wrapper>.alignright {
    margin-left: auto;
}

/* ========================================
 * 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 SPACING
 * ========================================
 * The wrapper uses gap: var(--space-xl) for spacing between
 * structural blocks (columns, ACF blocks, etc.).
 *
 * For text/content elements that flow together, we use negative
 * margin to reduce the gap and create natural reading flow.
 *
 * Strategy: Define element groups, then apply spacing tiers.
 * ========================================
 */

/* --- Element Group Definitions (for readability) ---
 * --text-blocks: p, .wp-block-paragraph
 * --list-blocks: ul, ol, .wp-block-list
 * --heading-blocks: h1-h6, .wp-block-heading
 * --quote-blocks: blockquote, .wp-block-quote, .wp-block-pullquote
 * --button-blocks: .wp-block-button, .wp-block-buttons
 * --code-blocks: pre, .wp-block-code, .wp-block-preformatted
 */

/* TIER 1: No gap - consecutive same-type elements use their natural margins */
.flexible-content-wrapper > :is(p, .wp-block-paragraph) + :is(p, .wp-block-paragraph),
.flexible-content-wrapper > :is(ul, ol, .wp-block-list) + :is(ul, ol, .wp-block-list),
.flexible-content-wrapper > :is(p, .wp-block-paragraph) + :is(ul, ol, .wp-block-list) {
    margin-top: calc(-1 * var(--space-xl));
}

/* TIER 2: Minimal gap (--space-xs) - tightly connected content */
.flexible-content-wrapper > :is(h1, h2, h3, h4, h5, h6, .wp-block-heading) + :is(
    p, .wp-block-paragraph,
    ul, ol, .wp-block-list,
    blockquote, .wp-block-quote, .wp-block-pullquote,
    .wp-block-post-content
),
.flexible-content-wrapper > :is(ul, ol, .wp-block-list) + :is(p, .wp-block-paragraph),
.flexible-content-wrapper > .wp-block-details + .wp-block-details {
    margin-top: calc(-1 * var(--space-xl) + var(--space-xs));
}

/* TIER 3: Small gap (--space-sm) - related content with slight separation */
.flexible-content-wrapper > :is(p, .wp-block-paragraph) + :is(
    blockquote, .wp-block-quote, .wp-block-pullquote,
    .wp-block-button, .wp-block-buttons,
    .wp-block-details,
    pre, .wp-block-code, .wp-block-preformatted,
    .wp-block-table
),
.flexible-content-wrapper > :is(blockquote, .wp-block-quote, .wp-block-pullquote) + :is(
    p, .wp-block-paragraph,
    ul, ol, .wp-block-list,
    .wp-block-button, .wp-block-buttons
),
.flexible-content-wrapper > :is(pre, .wp-block-code, .wp-block-preformatted) + :is(p, .wp-block-paragraph),
.flexible-content-wrapper > :is(ul, ol, .wp-block-list) + :is(blockquote, .wp-block-quote, .wp-block-pullquote, .wp-block-button, .wp-block-buttons) {
    margin-top: calc(-1 * var(--space-xl) + var(--space-sm));
}

/* TIER 4: Medium gap (--space-md) - section transitions */
.flexible-content-wrapper > :is(blockquote, .wp-block-quote, .wp-block-pullquote) + :is(h1, h2, h3, h4, h5, h6, .wp-block-heading),
.flexible-content-wrapper > :is(.wp-block-button, .wp-block-buttons) + :is(p, .wp-block-paragraph, ul, ol, .wp-block-list, h1, h2, h3, h4, h5, h6, .wp-block-heading),
.flexible-content-wrapper > :is(p, .wp-block-paragraph, ul, ol, .wp-block-list, blockquote, .wp-block-quote, .wp-block-pullquote, h1, h2, h3, h4, h5, h6, .wp-block-heading) + .wp-block-separator,
.flexible-content-wrapper > .wp-block-separator + :is(p, .wp-block-paragraph, ul, ol, .wp-block-list, h1, h2, h3, h4, h5, h6, .wp-block-heading),
.flexible-content-wrapper > .wp-block-table + :is(p, .wp-block-paragraph) {
    margin-top: calc(-1 * var(--space-xl) + var(--space-md));
}

/* ========================================
 * 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;
    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 - Only inherit color when custom text color is set */

/* When the block has a custom text color class, links should inherit that color */

/* This ensures white-on-dark sections have visible links */

/* Exclude .btn and WooCommerce Blocks button components */
.flexible-content-area-block.has-text-color a:not(.btn, .wc-block-components-button) {
    color: inherit;
}

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

/* ========================================
 * OVERLAY SUPPORT (Cover-block-like feature)
 * ========================================
 * Uses the same pattern as WordPress Cover block:
 * - <span> element with wp-block-cover__background class
 * - CSS classes for opacity (has-background-dim-10 through has-background-dim-100)
 * - Positioned absolutely between background image and content
 *
 * @since 1.6.0
 * ========================================
 */

/* Legacy overlay div - backward compatibility for v1.6.0-beta saved blocks */
.flexible-content-area-block > .flexible-content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

/* Overlay span - matches Cover block structure */
.flexible-content-area-block > .wp-block-cover__background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none; /* Allow clicks through to content */
    z-index: 1; /* Above background-image, below content */
    opacity: 0.5; /* Default opacity, overridden by dim classes */
}

/* Ensure content is above overlay */
.flexible-content-area-block > *:not(.wp-block-cover__background) {
    position: relative;
    z-index: 2;
}

/* ========================================
 * OPACITY CLASSES (Cover block pattern)
 * ========================================
 * Maps dimRatio (0-100) to opacity via CSS classes.
 * Generated: has-background-dim-10 through has-background-dim-100
 * ========================================
 */

.flexible-content-area-block > .wp-block-cover__background.has-background-dim.has-background-dim-0 {
    opacity: 0;
}

.flexible-content-area-block > .wp-block-cover__background.has-background-dim.has-background-dim-10 {
    opacity: 0.1;
}

.flexible-content-area-block > .wp-block-cover__background.has-background-dim.has-background-dim-20 {
    opacity: 0.2;
}

.flexible-content-area-block > .wp-block-cover__background.has-background-dim.has-background-dim-30 {
    opacity: 0.3;
}

.flexible-content-area-block > .wp-block-cover__background.has-background-dim.has-background-dim-40 {
    opacity: 0.4;
}

.flexible-content-area-block > .wp-block-cover__background.has-background-dim.has-background-dim-50 {
    opacity: 0.5;
}

.flexible-content-area-block > .wp-block-cover__background.has-background-dim.has-background-dim-60 {
    opacity: 0.6;
}

.flexible-content-area-block > .wp-block-cover__background.has-background-dim.has-background-dim-70 {
    opacity: 0.7;
}

.flexible-content-area-block > .wp-block-cover__background.has-background-dim.has-background-dim-80 {
    opacity: 0.8;
}

.flexible-content-area-block > .wp-block-cover__background.has-background-dim.has-background-dim-90 {
    opacity: 0.9;
}

.flexible-content-area-block > .wp-block-cover__background.has-background-dim.has-background-dim-100 {
    opacity: 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
 * Targets both Gutenberg blocks (.wp-block) and ACF blocks ([class*="wp-block-acf-"])
 */
.flexible-content-area-block>.wp-block .container,
.flexible-content-area-block .flexible-content-wrapper>.wp-block .container,
.flexible-content-area-block .flexible-content-wrapper>[class*="wp-block-acf-"] .container {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

/* ========================================
 * ACF BLOCK SPACING WITHIN FLEXIBLE CONTENT
 * ========================================
 * Remove vertical padding from ACF blocks inside flexible content.
 * The wrapper's gap property (var(--space-xl)) handles all spacing
 * between blocks, so individual block padding creates unwanted
 * double spacing.
 *
 * This applies to:
 * - Direct child ACF blocks
 * - ACF blocks nested inside other containers (Group, Column, etc.)
 * ========================================
 */

/* 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;
}

/* Adjacent ACF blocks: remove wrapper gap only
 * - Negative margin cancels the wrapper's gap (64px)
 * - Keep both blocks' padding for proper section spacing
 */
.flexible-content-area-block .flexible-content-wrapper > .acf-block + .acf-block {
    margin-top: calc(-1 * var(--space-xl));
    padding-top: 0;
}

/* ========================================
 * 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;
}

/*
 * Consistent spacing for columns within flexible content areas:
 * - Gap between columns
 * - Block spacing within columns via gap (replaces margin hacks)
 * - Reset nested block padding to prevent double spacing
 */
.flexible-content-area-block .wp-block-columns {
    gap: var(--space-3xl);
}

.flexible-content-area-block .wp-block-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Reset nested ACF blocks within columns - parent gap handles spacing */
.flexible-content-area-block .wp-block-column > [class*="-section"],
.flexible-content-area-block .wp-block-column > .acf-block {
    padding: 0;
}

.flexible-content-area-block .wp-block-column > [class*="-section"] .container {
    padding: 0;
}

/*
 * Nested Flexible Content blocks with background colors
 * Automatically applies card border-radius when:
 * - A Flexible Content block is inside another Flexible Content block
 * - The inner block has a background color or gradient set
 *
 * WordPress adds .has-background class when any background is applied
 */
.flexible-content-area-block .flexible-content-area-block.has-background {
    border-radius: var(--radius-card);
}

/* ========================================
 * DARK BACKGROUND SUPPORT
 * ========================================
 * Dark background detection and button adaptation is now handled globally
 * by the theme (dark-bg-detection.js + dark-bg-adaptation.css).
 *
 * This block uses data-detect-dark-bg attribute which triggers:
 * 1. JS detection of dark backgrounds via WCAG luminance calculation
 * 2. Automatic setting of data-dark-bg="true" on dark containers
 * 3. CSS cascade adaptation for buttons/text via --adapt-* variables
 *
 * @since 1.6.0 - Migrated to global theme system
 * @see 3mw-core/assets/js/src/dark-bg-detection.js
 * @see 3mw-core/assets/css/src/dark-bg-adaptation.css
 * ========================================
 */