/**
 * Unsplash Background Styles
 * Specific styles for dynamic Unsplash backgrounds
 */

/* Apply background to body element when Unsplash is active */
body.unsplash-active {
    background-image: var(--unsplash-bg-image, none) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-color: transparent !important;
    background-origin: padding-box !important;
    background-clip: border-box !important;
}

/* Ensure body-wrap is transparent when using Unsplash background */
html body div.body-wrap.unsplash-active {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
}

/* Override any theme gradients on body-wrap */
html body div.body-wrap.unsplash-active,
body .body-wrap.unsplash-active,
.body-wrap.unsplash-active {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    background: linear-gradient(transparent, transparent) !important;
}

/* Override the CSS variable that controls the theme background */
html body div.body-wrap.unsplash-active {
    --fp-bg: transparent !important;
}

/* Make sure the theme CSS doesn't set any background on body-wrap */
body .body-wrap.unsplash-active,
.body-wrap.unsplash-active {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
}

/* Force override any inline styles that might be setting background on body-wrap */
body .body-wrap.unsplash-active[style] {
    background-image: none !important;
    background-color: transparent !important;
}

/* Override theme-flash.css specifically for body-wrap */
html body div.body-wrap.unsplash-active,
body div.body-wrap.unsplash-active {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
}

/* Overlay for better text readability */
.unsplash-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Ensure content stays above overlay */
.body-wrap .site-content {
    position: relative !important;
    z-index: 2 !important;
}

/* Attribution styling */
.unsplash-attribution {
    position: fixed !important;
    bottom: 10px !important;
    right: 10px !important;
    background: rgba(0,0,0,0.7) !important;
    color: white !important;
    padding: 5px 10px !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    z-index: 1000 !important;
    text-decoration: none !important;
    transition: opacity 0.3s ease !important;
    font-family: 'Lato', sans-serif !important;
}

.unsplash-attribution:hover {
    opacity: 0.8 !important;
}

.unsplash-attribution a {
    color: white !important;
    text-decoration: underline !important;
}

/* Hide static illustration when using dynamic backgrounds */
.illustration-section-01::after {
    display: none !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .unsplash-attribution {
        bottom: 5px !important;
        right: 5px !important;
        font-size: 10px !important;
        padding: 3px 6px !important;
    }
}

/* Loading state */
.unsplash-loading {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}