/**
 * Body Styling Frontend CSS
 * 
 * Frontend styles for body styling functionality
 * 
 * @package Hampstead_Academy
 * @since 1.0.0
 */

/* ===== BASE BODY STYLING CLASSES ===== */

.has-body-styling {
    position: relative;
    /* Background styling will be applied directly to the body element */
    /* This ensures no interference with scrolling or clicking */
    /* Use CSS containment to isolate styling effects */
    contain: layout style;
}

/* Modal-aware body styling - disable conflicting properties when modals are open */
.has-body-styling.modal-open {
    /* Temporarily disable transforms that create stacking contexts */
    transform: none !important;
    /* Disable backdrop filters that can interfere with modals */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Ensure animations don't interfere */
    animation-play-state: paused !important;
}

/* Ensure modals always appear above body styling */
.ha-modal-overlay {
    /* Use an ultra-high z-index and create a new stacking context */
    z-index: 999999999 !important;
    position: fixed !important;
    /* Ensure modal is not affected by body transforms */
    transform: translateZ(0);
    /* Force hardware acceleration for modal */
    will-change: opacity, visibility;
    /* Additional mobile fixes */
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    /* Force isolation to prevent stacking context issues */
    isolation: isolate;
}

/* Ultra-aggressive header suppression when modal is open with body styling */
body.has-body-styling.modal-open * {
    /* Force all elements to have lower z-index than modal */
    z-index: 999999998 !important;
}

/* Restore modal z-index after global suppression */
body.has-body-styling.modal-open .ha-modal-overlay,
body.has-body-styling.modal-open .ha-modal-overlay *,
body.has-body-styling.modal-open .ha-modal,
body.has-body-styling.modal-open .ha-modal * {
    z-index: 999999999 !important;
}

/* ===== BODY STYLING TYPES ===== */

.body-styling-color {
    /* Color styling handled by inline CSS */
}

.body-styling-gradient {
    /* Gradient styling handled by inline CSS */
}

.body-styling-image {
    /* Image styling handled by inline CSS */
}

.body-styling-image_overlay {
    /* Image with overlay styling handled by inline CSS */
}

/* ===== ANIMATION CLASSES ===== */

.has-body-animation {
    /* Animation styling handled by inline CSS */
}

/* Ensure animations respect user preferences */
@media (prefers-reduced-motion: reduce) {
    .has-body-animation {
        animation: none !important;
        background-attachment: scroll !important;
    }
    
    .has-body-animation::before {
        animation: none !important;
    }
}

/* ===== HIGH CONTRAST MODE SUPPORT ===== */

@media (prefers-contrast: high) {
    .has-body-styling {
        background: #ffffff !important;
        color: #000000 !important;
    }
    
    .has-body-styling * {
        background: transparent !important;
    }
    
    .has-body-styling .wp-block-group,
    .has-body-styling .wp-block-cover,
    .has-body-styling .wp-block-columns {
        background: rgba(255, 255, 255, 0.9) !important;
        border: 2px solid #000000 !important;
    }
}

/* ===== CONTENT READABILITY ENHANCEMENTS ===== */

.has-body-styling .wp-block-group,
.has-body-styling .wp-block-cover,
.has-body-styling .wp-block-columns {
    position: relative;
    z-index: 1;
}

.has-body-styling .site-header,
.has-body-styling .site-footer {
    position: relative;
    z-index: 10;
}

/* ===== RESPONSIVE BODY STYLING ===== */

/* Tablet styles */
@media (max-width: 1199px) {
    .has-body-styling.has-tablet-override {
        /* Tablet-specific styling handled by inline CSS */
    }
}

/* Mobile styles */
@media (max-width: 767px) {
    .has-body-styling.has-mobile-override {
        /* Mobile-specific styling handled by inline CSS */
    }
    
    /* Ensure mobile performance */
    .has-body-styling {
        background-attachment: scroll !important;
    }
    
    .has-body-animation {
        animation-duration: 0.5s !important;
    }
}

/* ===== PRINT STYLES ===== */

@media print {
    .has-body-styling {
        background: #ffffff !important;
        color: #000000 !important;
    }
    
    .has-body-styling * {
        background: transparent !important;
        color: #000000 !important;
    }
}

/* ===== LOADING STATES ===== */

.ha-body-styling-loading {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.ha-body-styling-loaded {
    opacity: 1;
}

/* ===== FALLBACK STYLES ===== */

.no-js .has-body-styling {
    /* Fallback for when JavaScript is disabled */
    background: var(--wp--preset--color--white, #ffffff) !important;
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */

/* Focus indicators */
.has-body-styling a:focus,
.has-body-styling button:focus,
.has-body-styling input:focus,
.has-body-styling textarea:focus,
.has-body-styling select:focus {
    outline: 2px solid #07074E;
    outline-offset: 2px;
}

/* Ensure text remains readable */
.has-body-styling .wp-block-heading,
.has-body-styling .wp-block-paragraph,
.has-body-styling .wp-block-list {
    text-shadow: none;
    background: rgba(255, 255, 255, 0.9);
    padding: 0.5rem;
    border-radius: 4px;
    margin: 1rem 0;
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

.has-body-styling {
    /* Use GPU acceleration for better performance, but avoid transforms that create stacking contexts */
    backface-visibility: hidden;
    perspective: 1000px;
    /* Only apply transform when modal is not open */
}

.has-body-styling:not(.modal-open) {
    /* Apply transform only when no modal is active */
    transform: translateZ(0);
}

.has-body-animation {
    /* Optimize animations */
    will-change: transform, background-position;
}

.has-body-animation.modal-open {
    /* Disable will-change when modal is open to prevent conflicts */
    will-change: auto;
}

/* ===== BROWSER COMPATIBILITY ===== */

/* IE11 fallbacks */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .has-body-styling {
        background-attachment: scroll !important;
    }
    
    .has-body-animation {
        animation: none !important;
    }
}

/* Safari-specific fixes */
@supports (-webkit-appearance: none) {
    .has-body-styling {
        -webkit-transform: translateZ(0);
        -webkit-backface-visibility: hidden;
    }
}

/* ===== DARK MODE SUPPORT ===== */

@media (prefers-color-scheme: dark) {
    .has-body-styling .wp-block-heading,
    .has-body-styling .wp-block-paragraph,
    .has-body-styling .wp-block-list {
        background: rgba(0, 0, 0, 0.8);
        color: #ffffff;
    }
    
    .has-body-styling a:focus,
    .has-body-styling button:focus,
    .has-body-styling input:focus,
    .has-body-styling textarea:focus,
    .has-body-styling select:focus {
        outline-color: #50A684;
    }
}

/* ===== ANIMATION KEYFRAMES ===== */

/* Subtle movement animation */
@keyframes ha-subtle-movement {
    0% { background-position: 0% 0%; }
    25% { background-position: 100% 0%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
    100% { background-position: 0% 0%; }
}

/* Gradient shift animation */
@keyframes ha-gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Parallax animation */
@keyframes ha-parallax {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-20px); }
}

/* Fade in animation */
@keyframes ha-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== UTILITY CLASSES ===== */

.ha-bg-fixed {
    background-attachment: fixed !important;
}

.ha-bg-scroll {
    background-attachment: scroll !important;
}

.ha-bg-local {
    background-attachment: local !important;
}

.ha-bg-cover {
    background-size: cover !important;
}

.ha-bg-contain {
    background-size: contain !important;
}

.ha-bg-auto {
    background-size: auto !important;
}

.ha-bg-center {
    background-position: center center !important;
}

.ha-bg-top {
    background-position: top center !important;
}

.ha-bg-bottom {
    background-position: bottom center !important;
}

.ha-bg-left {
    background-position: center left !important;
}

.ha-bg-right {
    background-position: center right !important;
}

.ha-bg-no-repeat {
    background-repeat: no-repeat !important;
}

.ha-bg-repeat {
    background-repeat: repeat !important;
}

.ha-bg-repeat-x {
    background-repeat: repeat-x !important;
}

.ha-bg-repeat-y {
    background-repeat: repeat-y !important;
}

/* ===== CONTENT OVERLAY PROTECTION ===== */

.has-body-styling .wp-block-cover__inner-container,
.has-body-styling .wp-block-group__inner-container {
    position: relative;
    z-index: 2;
}

.has-body-styling .wp-block-cover {
    position: relative;
}

.has-body-styling .wp-block-cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    z-index: 1;
    pointer-events: none;
}

/* ===== SMOOTH SCROLLING ENHANCEMENTS ===== */

.has-body-styling.has-parallax {
    scroll-behavior: smooth;
}

/* ===== LOADING PERFORMANCE ===== */

.has-body-styling img {
    loading: lazy;
}

.has-body-styling .wp-block-image img {
    transition: opacity 0.3s ease-in-out;
}

.has-body-styling .wp-block-image img[loading="lazy"] {
    opacity: 0;
}

.has-body-styling .wp-block-image img[loading="lazy"].loaded {
    opacity: 1;
}

/* ===== CUSTOM PROPERTIES FOR THEMING ===== */

:root {
    --ha-body-bg: transparent;
    --ha-body-bg-image: none;
    --ha-body-bg-size: cover;
    --ha-body-bg-position: center center;
    --ha-body-bg-repeat: no-repeat;
    --ha-body-bg-attachment: scroll;
    --ha-body-animation-duration: 20s;
    --ha-body-animation-easing: ease-in-out;
}

/* ===== THEME INTEGRATION ===== */

/* Body styling should NOT affect headers and footers */
/* Headers and footers maintain their own styling independently */

/* ===== ERROR HANDLING ===== */

.ha-body-styling-error {
    background: var(--wp--preset--color--white, #ffffff) !important;
    color: var(--wp--preset--color--black, #000000) !important;
}

.ha-body-styling-error::before {
    display: none !important;
}

/* ===== PROGRESSIVE ENHANCEMENT ===== */

/* Body styling should NOT apply progressive enhancement to headers and footers */
/* Headers and footers maintain their own independent styling */

/* ===== CONTAINER QUERIES (Future-proofing) ===== */

@supports (container-type: inline-size) {
    .has-body-styling {
        container-type: inline-size;
    }
    
    @container (max-width: 768px) {
        .has-body-styling {
            background-attachment: scroll !important;
        }
    }
}

/* ===== FINAL CLEANUP ===== */

.has-body-styling * {
    box-sizing: border-box;
}

.has-body-styling img {
    max-width: 100%;
    height: auto;
}

.has-body-styling .wp-block-image {
    margin: 0 0 1rem 0;
}