/**
 * DGS Text Columns Block - Editor Styles
 */

/* Import frontend styles for consistency */
@import url('./style.css');

/* Editor-specific overrides */
.editor-styles-wrapper .dgs-text-columns {
    margin: 0;
}

/* Make text fields editable in editor */
.editor-styles-wrapper .dgs-text-columns__heading,
.editor-styles-wrapper .dgs-text-columns__subheading,
.editor-styles-wrapper .dgs-text-columns__body,
.editor-styles-wrapper .dgs-text-columns__link {
    min-height: 1.5em;
    position: relative;
}

/* Placeholder text for empty fields */
.editor-styles-wrapper .dgs-text-columns__heading:empty::before {
    content: 'Click to add heading...';
    color: #999;
    font-style: italic;
}

.editor-styles-wrapper .dgs-text-columns__subheading:empty::before {
    content: 'Click to add subheading...';
    color: #999;
    font-style: italic;
}

.editor-styles-wrapper .dgs-text-columns__body:empty::before {
    content: 'Click to add body text...';
    color: #999;
    font-style: italic;
}

.editor-styles-wrapper .dgs-text-columns__link:empty::before {
    content: 'Click to add link text (email, phone, or URL)...';
    color: #999;
    font-style: italic;
}

/* Focus styles for better editing experience */
.editor-styles-wrapper .dgs-text-columns__heading:focus,
.editor-styles-wrapper .dgs-text-columns__subheading:focus,
.editor-styles-wrapper .dgs-text-columns__body:focus,
.editor-styles-wrapper .dgs-text-columns__link:focus {
    outline: 1px dashed #007cba;
    outline-offset: 2px;
}

/* Column hover effect in editor */
.editor-styles-wrapper .dgs-text-columns__column {
    transition: box-shadow 0.2s ease;
}

.editor-styles-wrapper .dgs-text-columns__column:hover {
    box-shadow: 0 0 0 1px rgba(0, 124, 186, 0.3);
}

/* Settings panel helpers */
.components-panel__body .dgs-text-columns-settings {
    padding: 16px;
}

.dgs-text-columns-settings .components-base-control {
    margin-bottom: 16px;
}

/* Column controls */
.dgs-text-columns__column {
    position: relative;
}

.editor-styles-wrapper .dgs-text-columns__column::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    border: 1px dashed transparent;
    transition: border-color 0.2s ease;
}

.editor-styles-wrapper .dgs-text-columns__column:focus-within::before {
    border-color: #007cba;
}

/* Better visual separation in editor */
.editor-styles-wrapper .dgs-text-columns__grid {
    gap: var(--gap-l, 2rem);
    padding: 1rem 0;
}

/* Ensure proper display of rich text toolbar */
.editor-styles-wrapper .dgs-text-columns [contenteditable="true"] {
    cursor: text;
}

/* Non-clickable links in editor */
.editor-styles-wrapper .dgs-text-columns__link--editor {
    color: var(--primary, #007cba);
    text-decoration: underline;
    cursor: default;
    pointer-events: none;
}

/* Color scheme preview in editor */
.editor-styles-wrapper .dgs-text-columns--primary .dgs-text-columns__column {
    background-color: var(--primary-ultra-light, rgba(0, 123, 255, 0.05));
}

.editor-styles-wrapper .dgs-text-columns--secondary .dgs-text-columns__column {
    background-color: var(--secondary-ultra-light, rgba(108, 117, 125, 0.05));
}

.editor-styles-wrapper .dgs-text-columns--action .dgs-text-columns__column {
    background-color: var(--action-ultra-light, rgba(40, 167, 69, 0.05));
}

.editor-styles-wrapper .dgs-text-columns--accent .dgs-text-columns__column {
    background-color: var(--accent-ultra-light, rgba(255, 193, 7, 0.05));
}

.editor-styles-wrapper .dgs-text-columns--neutral .dgs-text-columns__column {
    background-color: var(--neutral-ultra-light, #f8f9fa);
}

/* Add/remove column buttons (if using BlockStudio's dynamic columns) */
.dgs-text-columns__add-column {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border: 2px dashed #ddd;
    border-radius: var(--radius, 8px);
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
}

.dgs-text-columns__add-column:hover {
    border-color: #007cba;
    background-color: rgba(0, 124, 186, 0.05);
}

.dgs-text-columns__add-column svg {
    width: 24px;
    height: 24px;
    fill: #007cba;
}