/* WPUF User Custom Field Block Styles */

/* Custom Field Container */
.wpuf-custom-field {
    --wpuf-field-font-size: 0.95rem;
    --wpuf-field-line-height: 1.4;
    --wpuf-field-spacing: 0.5rem;
}

/* Field Content */
.wpuf-field-content {
    font-size: var(--wpuf-field-font-size);
    line-height: var(--wpuf-field-line-height);
    /* Ensure color inheritance and fallbacks */
    color: inherit;
}

/* Field Label */
.wpuf-field-label {
    font-weight: 500;
    /* Ensure color inheritance and fallbacks */
    color: inherit;
}

/* Field Value */
.wpuf-field-value {
    color: var(--wpuf-field-text-color);
    word-break: break-word;
}

.wpuf-field-value a {
    color: var(--wpuf-field-link-color);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.wpuf-field-value a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Field Prefix/Suffix */
.wpuf-field-prefix,
.wpuf-field-suffix {
    color: var(--wpuf-field-label-color);
    font-weight: 400;
}

/* WordPress Block Editor Color Support - These must come after the base styles */
.wpuf-custom-field.has-text-color,
.wpuf-custom-field.has-text-color .wpuf-field-content,
.wpuf-custom-field.has-text-color .wpuf-field-label,
.wpuf-custom-field.has-text-color .wpuf-field-value,
.wpuf-custom-field.has-text-color .wpuf-field-prefix,
.wpuf-custom-field.has-text-color .wpuf-field-suffix {
    color: inherit !important;
}

.wpuf-custom-field.has-text-color .wpuf-field-value a {
    color: inherit !important;
}

/* Ensure WordPress block editor inline styles take precedence */
.wpuf-custom-field[style*="color"] .wpuf-field-content,
.wpuf-custom-field[style*="color"] .wpuf-field-label,
.wpuf-custom-field[style*="color"] .wpuf-field-value,
.wpuf-custom-field[style*="color"] .wpuf-field-prefix,
.wpuf-custom-field[style*="color"] .wpuf-field-suffix {
    color: inherit !important;
}

.wpuf-custom-field[style*="color"] .wpuf-field-value a {
    color: inherit !important;
}

/* Field Type Specific Styles */

/* Date field */
.wpuf-field-date .wpuf-field-value {
    font-variant-numeric: tabular-nums;
}

/* Image field */
.wpuf-field-image .wpuf-field-value img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* File field */
.wpuf-field-file .wpuf-field-value a {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    text-decoration: none;
}

.wpuf-field-file .wpuf-field-value a:hover {
    background-color: #e9ecef;
    opacity: 1;
}

/* JSON field */
.wpuf-field-json .wpuf-field-value pre {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.4;
    overflow-x: auto;
    margin: 0.5rem 0 0 0;
    max-width: 100%;
}

/* Layout Wrapper Styles */

/* Above label */
.wpuf-field-wrapper.wpuf-label-above {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.wpuf-label-above .wpuf-field-label {
    margin-bottom: 0.25rem;
    margin-right: 0;
}

/* Below label */
.wpuf-field-wrapper.wpuf-label-below {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.wpuf-label-below .wpuf-field-label {
    order: 2;
    margin-top: 0.25rem;
    margin-right: 0;
    font-size: 0.875em;
    opacity: 0.8;
}

/* Inline label */
.wpuf-field-wrapper.wpuf-label-inline .wpuf-field-content {
    display: inline-flex;
    align-items: baseline;
}

/* Side by side label */
.wpuf-field-wrapper.wpuf-label-side {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: start;
}

.wpuf-label-side .wpuf-field-label {
    margin-right: 0;
    white-space: nowrap;
}

/* Layout Style Variations */

/* Stacked layout */
.wpuf-layout-stacked .wpuf-field-content {
    flex-direction: column;
    align-items: flex-start;
}

/* Side by side layout */
.wpuf-layout-side-by-side {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: center;
}

.wpuf-layout-side-by-side .wpuf-field-label {
    margin-right: 0;
}

/* Editor Placeholder */
.wpuf-field-placeholder {
    padding: 1rem;
    border: 2px dashed #ddd;
    border-radius: 4px;
    text-align: center;
    color: #666;
    background-color: #f8f9fa;
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 768px) {
    .wpuf-custom-field {
        --wpuf-field-font-size: 0.9rem;
        --wpuf-field-spacing: 0.375rem;
    }

    /* Stack side-by-side layouts on mobile */
    .wpuf-field-wrapper.wpuf-label-side {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .wpuf-layout-side-by-side {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    /* Reduce JSON pre padding */
    .wpuf-field-json .wpuf-field-value pre {
        padding: 0.5rem;
        font-size: 0.8125rem;
    }
}

@media (max-width: 480px) {
    .wpuf-custom-field {
        --wpuf-field-font-size: 0.875rem;
    }

    .wpuf-field-content {
        gap: 0.125rem;
    }

    /* Force wrap long URLs */
    .wpuf-field-url .wpuf-field-value {
        word-break: break-all;
        overflow-wrap: anywhere;
    }

    /* Smaller file buttons */
    .wpuf-field-file .wpuf-field-value a {
        padding: 0.1875rem 0.375rem;
        font-size: 0.875rem;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .wpuf-field-value a {
        transition: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .wpuf-field-placeholder {
        border-color: #000;
        background-color: #fff;
        color: #000;
    }

    .wpuf-field-file .wpuf-field-value a {
        border-color: #000;
        background-color: #fff;
    }

    .wpuf-field-json .wpuf-field-value pre {
        border-color: #000;
        background-color: #fff;
    }
}

/* Print styles */
@media print {
    .wpuf-field-value a {
        color: inherit;
        text-decoration: underline;
    }

    .wpuf-field-value a::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    .wpuf-field-json .wpuf-field-value pre {
        border: 1px solid #000;
        background: none;
    }
}
