/*
 * Theme Name:  PWD Experience Engine X Theme
 * Description: Minimal WordPress shell for the PWD Experience Engine X plugin.
 * Version:     3.0.0
 * Author:      Pro Web Design
 * Author URI:  https://prowebdesign.co.za/
 * Text Domain: pwd-eex-theme
 * Requires at least: 6.0
 * Requires PHP: 7.4
 * License:     Proprietary
 */

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

/*
 * SCROLL CONTAINER RULES — read before changing:
 *
 * There must be exactly ONE scroll container: the browser window (document).
 * Any element with overflow:hidden, overflow:auto, or overflow:scroll
 * becomes a NEW scroll container, trapping its children's scroll events.
 *
 * The engine's Three.js canvas is position:fixed — it doesn't affect flow.
 * Sections are position:relative in normal flow — they push document height.
 * window.scrollY is the one true scroll axis.
 *
 * Rules:
 *   html  — overflow-x:hidden only (safe, does NOT create scroll container)
 *   body  — NO overflow set
 *   #app-root — NO overflow set
 *   .eex-section — NO overflow set
 */
html {
    overflow-x: hidden; /* Clips horizontal bleed without creating scroll container */
    background: #020617;
}

body {
    width:      100%;
    background: #020617;
    color:      #E2E8F0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* App root — just a wrapper, no scroll, no overflow */
#app-root {
    position: relative;
    width:    100%;
}

/* ── Loading screen ───────────────────────────────────────────────────────── */
.pwd-eex-loading {
    position:        fixed;
    inset:           0;
    z-index:         9999;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    background:      #020617;
    transition:      opacity 0.4s ease;
}
.pwd-eex-loading.is-hidden {
    opacity:        0;
    pointer-events: none;
}
.pwd-eex-loading__spinner {
    width:         40px;
    height:        40px;
    border:        2px solid rgba(255,255,255,0.1);
    border-top:    2px solid rgba(255,255,255,0.8);
    border-radius: 50%;
    animation:     eex-spin 0.8s linear infinite;
}
@keyframes eex-spin { to { transform: rotate(360deg); } }

/* ── No-JS fallback ───────────────────────────────────────────────────────── */
.pwd-eex-nojs-fallback { display: none; }
@media (scripting: none) {
    .pwd-eex-nojs-fallback {
        display:   block;
        padding:   40px 20px;
        max-width: 800px;
        margin:    0 auto;
        color:     #E2E8F0;
    }
}

/* ── WordPress admin bar — fixed, compensate body margin ─────────────────── */
#wpadminbar {
    position: fixed !important;
}
.admin-bar body {
    margin-top: 0 !important;
    padding-top: 32px; /* Shift content below fixed admin bar */
}
@media screen and (max-width: 782px) {
    .admin-bar body { padding-top: 46px; }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pwd-eex-loading__spinner {
        animation: none;
        border:    2px solid rgba(255,255,255,0.5);
    }
}