/* 
 * Dynamic Anchor Menu Block Styles
 * Minimal, overrideable styles that prioritize WordPress block editor controls
 */

/* Main block wrapper - minimal styles, let container handle layout */
.wp-block-acf-dynamic-anchor-menu {
    position: relative;
}

/* Container - this is where anchor links are placed, so this needs flex and gap */
.wp-block-acf-dynamic-anchor-menu #dynamic-anchor-menu-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
}

/* Hide horizontal scrollbar on container */
.wp-block-acf-dynamic-anchor-menu #dynamic-anchor-menu-container::-webkit-scrollbar {
    display: none;
}

.wp-block-acf-dynamic-anchor-menu #dynamic-anchor-menu-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Links - inherit ALL typography styles from WordPress block settings */
.wp-block-acf-dynamic-anchor-menu a.submenu-link {
    display: inline-block;
    transition: opacity 0.2s ease-in-out;
    /* Inherit ALL text styling from WordPress block wrapper */
    font-family: var(--wp--preset--font-family--gotham-narrow);
    font-size: inherit;
    font-weight: 500;
    font-style: inherit;
    line-height: inherit;
    text-decoration: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    color: var(--wp--preset--color--blue);
}

/* Hover effect - only if no custom hover styles are applied */
.wp-block-acf-dynamic-anchor-menu:not([class*="hover"]):not([style*="hover"]) a.submenu-link:hover {
    opacity: 0.7;
    text-decoration: none !important;
}

/* Active state - minimal styling */
.wp-block-acf-dynamic-anchor-menu .submenu-link.active {
    text-decoration: underline;
}

/* 
 * FALLBACK STYLES - Only applied when WordPress doesn't override them
 * These provide sensible defaults but are easily overridden
 */

/* Default background - only if no background is set */
.wp-block-acf-dynamic-anchor-menu:not([style*="background"]):not([class*="has-background"]) {
    background-color: transparent;
}

/* Default text color - applied to main wrapper so links inherit it */
.wp-block-acf-dynamic-anchor-menu:not([style*="color"]):not([class*="has-text-color"]) {
    color: var(--wp--preset--color--gray, #666);
}

/* Default font size - applied to main wrapper so links inherit it */
.wp-block-acf-dynamic-anchor-menu:not([style*="font-size"]):not([class*="has-"]):not([class*="font-size"]) {
    font-size: var(--wp--preset--font-size--small, 14px);
}

/* Default padding - only if no padding is set */
.wp-block-acf-dynamic-anchor-menu:not([style*="padding"]):not([class*="has-"]) {
    padding: var(--wp--preset--spacing--20, 8px) 0;
}

/* Default gap between links - fallback only */
.wp-block-acf-dynamic-anchor-menu #dynamic-anchor-menu-container:not([style*="gap"]) {
    gap: var(--wp--preset--spacing--50, 8px);
}

/* Try to inherit gap from WordPress block wrapper styles */
.wp-block-acf-dynamic-anchor-menu #dynamic-anchor-menu-container {
    gap: var(--wp--style--block-gap, var(--wp--preset--spacing--20, 8px));
}

/* Force gap inheritance from main wrapper */
.wp-block-acf-dynamic-anchor-menu[style*="--wp--style--block-gap"] #dynamic-anchor-menu-container {
    gap: var(--wp--style--block-gap);
}

/* Default text transform - applied to main wrapper so links inherit it */
.wp-block-acf-dynamic-anchor-menu:not([style*="text-transform"]):not([class*="has-"]) {
    text-transform: uppercase;
}

/* Default text decoration - applied to main wrapper so links inherit it */
.wp-block-acf-dynamic-anchor-menu:not([style*="text-decoration"]):not([class*="has-"]) {
    text-decoration: none;
}

/*
 * EDITOR PREVIEW STYLES
 */

/* Main container gets a subtle border in preview mode */
.wp-block-acf-dynamic-anchor-menu:has(.editor-preview-info) {
    position: relative;
    border: 2px dashed #ccc;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.02);
}

/* Preview info and instruction styling */
.wp-block-acf-dynamic-anchor-menu .editor-preview-info,
.wp-block-acf-dynamic-anchor-menu .editor-preview-instruction {
    pointer-events: none;
    z-index: 10;
}

/* Preview links inherit EVERYTHING from the real link styling */
.wp-block-acf-dynamic-anchor-menu .editor-preview-info ~ .submenu-link {
    /* Ensure preview links use exact same CSS as real links */
    opacity: 0.8; /* Slightly transparent to show it's preview */
}

/* Show that these are preview links on hover */
.wp-block-acf-dynamic-anchor-menu .editor-preview-info ~ .submenu-link:hover {
    opacity: 0.6;
}