/**
 * Site Wrapper Base Styles
 * 
 * These styles provide the foundation for the site wrapper functionality.
 * Dynamic values like background images are added via inline styles.
 */

/* Base wrapper styles */
#cm-site-wrapper {
    position: relative;
    float: none !important;
    margin-left: auto;
    margin-right: auto;
}

/* Ensure proper box model */
#cm-site-wrapper * {
    box-sizing: border-box;
}

/* Handle overflow */
#cm-site-wrapper {
    overflow-x: hidden;
    overflow-y: visible;
}

/* Z-index management */
#cm-site-wrapper {
    z-index: 1;
}

/* Ensure content is above background */
#cm-site-wrapper > * {
    position: relative;
    z-index: 2;
}

/* Shadow/border effects for the wrapper */
#cm-site-wrapper.has-shadow {
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1);
}

/* Optional inner wrapper for additional styling control */
#cm-site-wrapper .cm-site-inner {
    position: relative;
    width: 100%;
}

/* When wrapper is enabled, give it a background color to distinguish from body background */
body.has-site-wrapper #cm-site-wrapper {
    background-color: rgba(255, 255, 255, 0.95);
}

/* Loading state */
body.cm-wrapper-loading #cm-site-wrapper {
    opacity: 0;
    transition: opacity 0.5s ease;
}

body.cm-wrapper-loaded #cm-site-wrapper {
    opacity: 1;
}

/* Compatibility with common WordPress classes */
.admin-bar #cm-site-wrapper {
    /* Account for admin bar */
    padding-top: 32px;
}
 
/* Ensure wrapper works with sticky headers */
.site-wrapper-includes-header #cm-site-wrapper .site-header.sticky,
.site-wrapper-includes-header #cm-site-wrapper header.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.admin-bar .site-wrapper-includes-header #cm-site-wrapper .site-header.sticky,
.admin-bar .site-wrapper-includes-header #cm-site-wrapper header.sticky {
    top: 32px;
}
 
/* Debug mode styles */
body.cm-wrapper-debug #cm-site-wrapper {
    border: 2px solid red;
}

body.cm-wrapper-debug #cm-site-wrapper::before {
    content: "Site Wrapper Active";
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: right center;
    background: red;
    color: white;
    padding: 5px 20px;
    font-size: 12px;
    z-index: 9999;
}