/* Rich Image Caption Styles - Using Proper Theme Colors */
body figure.wp-block-image.craigen-rich-image .wp-element-caption,
body figure.craigen-rich-image .wp-element-caption,
body figure.craigen-rich-image .wp-caption-text,
body .craigen-rich-image .wp-element-caption,
body .craigen-rich-image .wp-caption-text {
    padding: 1rem !important;
    background: rgba(42, 104, 104, 0.10) !important; /* fallback for browsers not supporting color-mix */
    background: color-mix(in srgb, var(--primary-color, #2a6868) 10%, transparent) !important;
    border-top: 3px solid var(--primary-color, #2a6868) !important;
    font-size: 0.9rem !important;
    position: relative !important;
}

figure.craigen-rich-image {
    margin: 2rem auto;
    max-width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(221, 221, 221, 1);
}

figure.craigen-rich-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Rich caption content with formatting support */
.image-caption-content {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 0.75rem;
    color: var(--primary-color, #2a6868);
    font-style: italic;
    padding-left: 1rem;
    border-left: 2px solid var(--primary-color, #2a6868);
    margin-left: -1rem;
    padding-right: 1rem;
}

.image-caption-content strong {
    font-weight: 600;
    color: var(--primary-color, #2a6868);
    font-style: normal;
}

.image-caption-content em {
    font-style: italic;
}

.image-caption-content a {
    color: var(--primary-color, #2a6868);
    text-decoration: underline;
    font-style: normal;
}

.image-caption-content a:hover {
    color: color-mix(in srgb, var(--primary-color, #2a6868) 70%, black);
    text-decoration: none;
}

/* Citation styles - integrated seamlessly, no separate box */
.image-citation {
    font-style: normal;
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--primary-color, #2a6868);
    background: none !important; /* No separate background */
    border: none !important; /* No separate border */
    padding: 0.5rem 0 0 0 !important; /* Only top padding */
    margin-top: 0.5rem;
    display: block;
    opacity: 0.8;
}

.image-citation::before {
    content: attr(data-prefix);
    font-weight: 600;
    color: var(--primary-color, #2a6868);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Citation display variations */
.citation-block {
    display: block;
    margin-top: 0.5rem;
}

.citation-inline {
    display: inline;
    margin-left: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
}

.citation-inline::before {
    content: " — ";
    margin-right: 0.25rem;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
}

.citation-minimal {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    opacity: 0.9;
}

.wp-block-image :where(figcaption) {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    figure.craigen-rich-image {
        margin: 1rem auto;
    }
    
    body figure.craigen-rich-image .wp-caption-text,
    body figure.craigen-rich-image .wp-element-caption {
        padding: 0.75rem !important;
        font-size: 0.85rem !important;
    }
    
    .image-caption-content {
        font-size: 0.85rem;
        padding-left: 0.75rem;
    }
    
    .image-citation {
        font-size: 0.75rem;
        padding: 0.4rem;
    }
}