/**
 * gCube 3D Cube Styles
 * GPU-accelerated CSS3 3D transforms for cube interface
 *
 * @package gCube
 * @version 1.0.0
 */

/* ==========================================================================
   CSS Custom Properties (from rootstyle.css)
   ========================================================================== */

:root {
    /* Cube Dimensions */
    --default-cubeheight: 80vmin;
    --default-cubewidth: 80vmin;
    --default-margin: 1vmin;

    /* Colors */
    --color-bg: #f7f5f2;
    --color-txt: #000000;
    --color-border: #F5F9E9;
    --color-highlight: #e51022;
    --semi-transparant: rgba(255, 255, 255, 0.28);

    /* Gradient Colors (defaults match spqe.eu - customizer overrides these) */
    --gradcolor1: #ee7752;
    --gradcolor2: #e73c7e;
    --gradcolor3: #23a6d5;
    --gradcolor4: #23d5ab;

    /* Navigation (from spqe.eu) */
    --nav-button-bg-color: #ffffff;
    --nav-button-text-color: #000000;
    --nav-button-hover-bg-color: #e50b37;
    --nav-button-hover-text-color: #d7a533;
    --nav-wrapper-default-width: 15vmin;
    --nav-button-default-min-width: 10vmin;
    --nav-button-default-min-height: 7vmin;
}

/* ==========================================================================
   Logo Styles (from spqe.eu logo.css)
   ========================================================================== */

/* Logo wrapper - positioned in top-left corner */
#logoWrapper {
    position: fixed;
    top: 2vmin;
    left: 2vmin;
    z-index: 989;
    will-change: transform;
}

/* Footer credit - positioned in bottom-right corner */
.site-footer {
    position: fixed;
    bottom: 1vmin;
    right: 2vmin;
    z-index: 989;
}

.gcube-credit {
    font-size: 0.65rem;
    color: rgba(0, 0, 0, 0.4);
    letter-spacing: 0.5px;
}

.gcube-credit a {
    color: rgba(0, 0, 0, 0.5);
    text-decoration: none;
}

.gcube-credit a:hover {
    color: var(--color-highlight, #e51022);
    text-decoration: underline;
}

/* Clickable logo image */
#logo_goHome {
    max-width: 10vmin;
    height: auto;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
    will-change: transform;
}

#logo_goHome:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

/* Logo class for cube face logos */
.logo {
    position: absolute;
    height: 75vmin;
    width: 75vmin;
    border-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Spinning logo (if used) */
#logo_spin {
    position: absolute;
    will-change: transform;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
}

/* ==========================================================================
   Base Reset
   ========================================================================== */

/* Prevent page scrolling - cube is fixed viewport */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--color-bg);
    font-family: 'Ubuntu', sans-serif;
}

/* ==========================================================================
   Scene Container - Perspective Space (EXACT spqe.eu)
   ========================================================================== */

#scene {
    perspective: 200vmin;
    -webkit-perspective: 200vmin;
    perspective-origin: 50% 50%;
    -webkit-perspective-origin: 50% 50%;
    z-index: 1;

    /* Fixed viewport - no scrolling, cube stays in place */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    /* Center the cube vertically and horizontally */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Cube Container - 3D Transform Space (EXACT spqe.eu)
   ========================================================================== */

#cube {
    position: relative;
    /* Centered by #scene flexbox (NOT margin: 0 auto) */
    height: var(--default-cubeheight);
    width: var(--default-cubewidth);
    border-radius: 2.3vmin;
    will-change: transform;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: transform 0.4s linear;
    -webkit-transition: -webkit-transform 0.4s linear;
}

/* ==========================================================================
   Cube Faces - Base Class (EXACT spqe.eu uses .face, not #cube div)
   ========================================================================== */

/* Only direct children of #cube should be positioned absolutely (the 6 faces) */
/* Base positioning for all cube faces */
#cube > .face {
    position: absolute;
    top: 0;
    height: var(--default-cubeheight);
    width: var(--default-cubewidth);
    padding: 0;
    border-radius: var(--default-margin);
    overflow: hidden;
    /* CRITICAL: All faces must be visible from all angles for 3D depth effect */
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    /* Prevent text selection on double-click (interferes with face expansion) */
    /* Selection is re-enabled when expanded for reading mode */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Reset inner divs to normal flow - CRITICAL for content layout */
#cube .face div,
#cube .face p,
#cube .face span,
#cube .face article,
#cube .face section,
#cube .face header,
#cube .face footer,
#cube .face main {
    position: static;
    height: auto;
    width: auto;
    background: transparent;
    border-radius: 0;
    overflow: visible;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}

/* ==========================================================================
   Face Positioning - 3D Transform Matrix (EXACT spqe.eu)
   ========================================================================== */

#cube .one {
    /* Top face */
    transform: rotateX(90deg) translateZ(40vmin);
    -webkit-transform: rotateX(90deg) translateZ(40vmin);
    background: linear-gradient(270deg, var(--gradcolor1), var(--gradcolor2), var(--gradcolor3), var(--gradcolor4));
    background-size: 800% 800%;
    animation: BGgrad 15s ease infinite;
}

#cube .two {
    /* Front face - gradient by default, glass mode overrides via customizer-css.php */
    transform: translateZ(40vmin);
    -webkit-transform: translateZ(40vmin);
    background: linear-gradient(270deg, var(--gradcolor1), var(--gradcolor2), var(--gradcolor3), var(--gradcolor4));
    background-size: 800% 800%;
    animation: BGgrad 15s ease infinite;
}

#cube .three {
    /* Right face */
    transform: rotateY(90deg) translateZ(40vmin);
    -webkit-transform: rotateY(90deg) translateZ(40vmin);
    background: linear-gradient(270deg, var(--gradcolor1), var(--gradcolor2), var(--gradcolor3), var(--gradcolor4));
    background-size: 800% 800%;
    animation: BGgrad 15s ease infinite;
}

#cube .four {
    /* Back face - shows background image (set via customizer) */
    transform: rotateY(180deg) translateZ(40vmin);
    -webkit-transform: rotateY(180deg) translateZ(40vmin);
    /* Fallback gradient when no image is set */
    background: linear-gradient(135deg, var(--gradcolor1), var(--gradcolor4));
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}

#cube .five {
    /* Left face */
    transform: rotateY(-90deg) translateZ(40vmin);
    -webkit-transform: rotateY(-90deg) translateZ(40vmin);
    background: linear-gradient(270deg, var(--gradcolor1), var(--gradcolor2), var(--gradcolor3), var(--gradcolor4));
    background-size: 800% 800%;
    animation: BGgrad 15s ease infinite;
}

#cube .six {
    /* Bottom face */
    transform: rotateX(-90deg) translateZ(40vmin);
    -webkit-transform: rotateX(-90deg) translateZ(40vmin);
    background: linear-gradient(270deg, var(--gradcolor1), var(--gradcolor2), var(--gradcolor3), var(--gradcolor4));
    background-size: 800% 800%;
    animation: BGgrad 15s ease infinite;
}

/* Bottom face content needs to be rotated 180deg so it's readable when viewed from below */
/* Apply to the container which holds all content - both static and dynamically loaded */
#cube .six .cube-face-container,
#cube .six > .cube-face-content,
#cube .six .on-demand-content {
    transform: rotate(180deg) !important;
    -webkit-transform: rotate(180deg) !important;
    /* Ensure the rotation pivot is centered */
    transform-origin: center center;
}

/* ==========================================================================
   Keyframe Animations (from keyframes.css)
   ========================================================================== */

@keyframes BGgrad {
    0% {
        background-position: 99% 0%;
    }
    50% {
        background-position: 2% 100%;
    }
    100% {
        background-position: 99% 0%;
    }
}

@-webkit-keyframes BGgrad {
    0% {
        background-position: 99% 0%;
    }
    50% {
        background-position: 2% 100%;
    }
    100% {
        background-position: 99% 0%;
    }
}

/* Conic gradient spin animation (for sweep/glow effects) */
@keyframes BGspin {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

@-webkit-keyframes BGspin {
    0% {
        -webkit-filter: hue-rotate(0deg);
    }
    100% {
        -webkit-filter: hue-rotate(360deg);
    }
}

/* ==========================================================================
   Face Content Styling
   ========================================================================== */

/* Isolated container (like iframe) - establishes independent layout context */
/* Override the reset above - this container needs special positioning */
#cube .face .cube-face-container,
.cube-face-container {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    background: transparent;
}

/* Hide scrollbars (Chrome, Safari, Opera) */
.cube-face-container::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.cube-face-content {
    position: relative;
    width: 100%;
    min-height: 100%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: transparent; /* Ensure face background shows through */
}

/* ALL face content - hidden from behind to prevent mirrored text */
/* Face backgrounds remain visible, but content only shows from the front */
#cube .face .cube-face-container,
#cube .face .cube-face-content {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Back face content - also ensure transparent background */
#cube .four .cube-face-container,
#cube .four .cube-face-content {
    background: transparent !important;
}

/* Ensure proper spacing in face content */
.cube-face-content > .face-header {
    flex-shrink: 0; /* Header should not shrink */
}

.cube-face-content > .face-footer {
    flex-shrink: 0; /* Footer should not shrink */
}

.face-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0; /* Allow flexbox to shrink */
    display: block; /* Ensure block layout for content flow */
}

/* Content wrapper from gcube_get_face_content() */
.face-content {
    display: block;
    width: 100%;
}

.face-content-title {
    display: block;
    margin: 0 0 20px 0;
    font-size: 3vmin;
    color: #e51022;
}

.face-content-body {
    display: block;
    width: 100%;
}

/* Ensure all direct children of face-content-body stack properly */
.face-content-body > * {
    display: block;
    margin-bottom: 15px;
}

.face-content-body > *:last-child {
    margin-bottom: 0;
}

/* Paragraphs inside content body */
.face-content-body p {
    display: block;
    margin: 0 0 15px 0;
}

.face-content-body p:last-child {
    margin-bottom: 0;
}

/* Divs inside content body (like info boxes) */
.face-content-body > div {
    display: block;
    margin-bottom: 15px;
}

.face-posts {
    display: block; /* Use block layout for proper stacking */
    width: 100%;
}

.face-posts > * {
    display: block;
    margin-bottom: 30px; /* Increase spacing for clear separation */
}

.face-posts > *:last-child {
    margin-bottom: 0; /* Remove margin from last child */
}

.face-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

.face-title {
    margin: 0 0 10px 0;
    font-size: 24px;
    font-weight: 600;
    color: #333;
}

/* Loading state */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    text-align: center;
}

/* ==========================================================================
   Face Visibility Control (Progressive Content Display)
   ========================================================================== */

/* Face visibility states - SPQE-style: ALL faces visible for 3D depth effect */
/* The 3D cube relies on seeing through transparent faces to faces behind */
.face-hidden {
    /* DO NOT set opacity: 0 - breaks glass mode depth effect */
    /* Faces are hidden by 3D transforms (backface-visibility), not opacity */
    pointer-events: none;
    transition: opacity 0.6s ease-in-out;
}

/* Show face when activated (allow interaction) */
.face-visible {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.6s ease-in-out;
}

/* Ensure content is loaded but invisible until revealed */
.face-hidden .cube-face-content {
    visibility: visible; /* Keep in DOM for smooth transition */
}

/* ==========================================================================
   Face Expansion - Fullscreen Reading Mode
   Double-tap/click to expand, tap edges to shrink
   Two modes: "classic" (scaled cube face) or "focus" (100% viewport)
   ========================================================================== */

/* Body class for expanded mode */
body.face-expanded-mode {
    overflow: hidden;
}

/* When expanded, hide the original cube */
body.face-expanded-mode #scene {
    opacity: 0.3;
    pointer-events: none;
}

/* Expanded overlay - cloned content at body level, outside stacking context */
.face-expanded-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 995;
    background: var(--color-bg, #f7f5f2);
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.face-expanded-overlay.active {
    opacity: 1;
    transform: scale(1);
}

/* Style the content inside the overlay */
.face-expanded-overlay .cube-face-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    min-height: 100vh;
}

.face-expanded-overlay .cube-face-content {
    max-width: 800px;
    margin: 0 auto;
}

/* Re-enable text selection in expanded overlay (reading mode) */
.face-expanded-overlay,
.face-expanded-overlay * {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Backdrop overlay - high z-index to cover everything */
.face-expand-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 990 !important;
}

.face-expand-backdrop.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 990 !important;
}

/* Dim navigation when face is expanded */
body.face-expanded-mode #wrapper_left,
body.face-expanded-mode #wrapper_right {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

/* ==========================================================================
   BASE EXPANDED STATE - Applies regardless of mode
   ========================================================================== */

/* Base expanded face - ensures it appears above backdrop (990) */
.face.face-expanded-active {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    transform: none !important;
    z-index: 995 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Break out of parent stacking context */
    isolation: isolate;
}

/* ==========================================================================
   CLASSIC MODE - Scaled cube face with 3D effect
   ========================================================================== */

/* When a face is expanded in classic mode, the cube zooms forward */
body.expand-mode-classic #cube.face-expanded {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Classic mode: Scale up the face */
body.expand-mode-classic .face.face-expanded-active {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    z-index: 995 !important;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.5s ease;
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.5);
}

/* Specific transforms for each face when expanded in classic mode */
body.expand-mode-classic #cube.face-expanded .one.face-expanded-active {
    transform: rotateX(90deg) translateZ(40vmin) scale(1.2) !important;
}

body.expand-mode-classic #cube.face-expanded .two.face-expanded-active {
    transform: rotateY(0deg) translateZ(40vmin) scale(1.2) !important;
}

body.expand-mode-classic #cube.face-expanded .three.face-expanded-active {
    transform: rotateY(90deg) translateZ(40vmin) scale(1.2) !important;
}

body.expand-mode-classic #cube.face-expanded .four.face-expanded-active {
    transform: rotateY(180deg) translateZ(40vmin) scale(1.2) !important;
}

body.expand-mode-classic #cube.face-expanded .five.face-expanded-active {
    transform: rotateY(-90deg) translateZ(40vmin) scale(1.2) !important;
}

body.expand-mode-classic #cube.face-expanded .six.face-expanded-active {
    transform: rotateX(-90deg) translateZ(40vmin) scale(1.2) !important;
}

/* ==========================================================================
   FOCUS MODE - 100% viewport fullscreen
   ========================================================================== */

/* Focus mode: Face becomes fixed fullscreen overlay */
body.expand-mode-focus .face.face-expanded-active {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    transform: none !important;
    z-index: 995 !important;
    border-radius: 0 !important;
    background: var(--color-bg, #f7f5f2) !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Focus mode: Container fills the viewport */
body.expand-mode-focus .face.face-expanded-active .cube-face-container {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

/* Focus mode: Content styling for readability */
body.expand-mode-focus .face.face-expanded-active .cube-face-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Focus mode: Bottom face doesn't need rotation in fullscreen */
body.expand-mode-focus .face.six.face-expanded-active .cube-face-container {
    transform: none !important;
}

/* ==========================================================================
   Shared expansion styles
   ========================================================================== */

/* Edge highlight zones - visual feedback for shrink areas */
.face.face-expanded-active::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    border: 4px solid transparent;
    transition: border-color 0.3s ease;
    z-index: 997;
}

/* Show edge highlight on hover near borders */
.face.face-expanded-active.edge-hover::after {
    border-color: rgba(229, 16, 34, 0.6);
}

/* Close button for expanded face - must be above scene (991) and face (995) */
.face-expand-close {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    z-index: 996;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

.face-expand-close:hover {
    background: rgba(229, 16, 34, 0.9);
    transform: scale(1.1);
}

.face-expand-close.active {
    opacity: 1;
    pointer-events: auto;
}

/* Expand hint indicator */
.face-expand-hint {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 20;
}

.face-visible:hover .face-expand-hint {
    opacity: 0.7;
}

.face-expanded-active .face-expand-hint {
    display: none;
}

/* ==========================================================================
   Responsive Design - Mobile & Tablet (from spqe.eu screensizes.css)
   ========================================================================== */

/* Navigation wrapper defaults */
#wrapper_left,
#wrapper_right {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
}

#wrapper_left {
    z-index: 889;
}

#wrapper_right {
    z-index: 890;
}

/* Base navigation button styles (from spqe.eu navigation.css) */
.navButton {
    will-change: transform;
    background-color: var(--nav-button-bg-color);
    padding: var(--nav-button-padding);
    margin-top: var(--nav-button-margin);
    margin-left: 0.1188vmin;
    margin-right: 0.1188vmin;
    margin-bottom: 0.1188vmin;
    font-size: var(--nav-button-font-size);
    border-style: var(--nav-button-border-style);
    border-color: var(--nav-button-border-color);
    border-width: var(--nav-button-border-width);
    border-radius: var(--nav-button-border-radius);
    transition: transform 0.5s;
    cursor: pointer;
}

.navButton:hover,
.navButton:focus {
    border-color: var(--nav-button-hover-text-color);
    border-width: 4px;
    animation: groovy 4.5s ease-in-out infinite;
    animation-delay: 23ms;
}

.navName {
    background-color: var(--nav-button-bg-color);
    text-transform: uppercase;
    color: var(--nav-button-text-color);
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    cursor: pointer;
    border-radius: var(--nav-button-border-radius);
    border: none;
    font-size: 2.3vmin;
    align-items: center;
    justify-content: center;
}

.navName:hover,
.navName:focus {
    background-color: var(--nav-button-hover-bg-color);
    color: var(--nav-button-hover-text-color);
}

/* Mobile phones (max-width: 428px) */
@media only screen and (max-width: 428px) {
    #scene {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -65%);
    }

    #wrapper_left,
    #wrapper_right {
        height: 20%;
    }

    .navButton {
        max-height: 7.5vmin;
        max-width: 8vmin;
        margin-left: 0.39vmin;
        margin-right: 0.55vmin;
    }

    /* Portrait orientation */
    @media (orientation: portrait) {
        #wrapper_left {
            top: 0;
            left: 0;
        }

        #wrapper_right {
            bottom: 0;
            left: 0;
        }

        #wrapper_left .navButton:first-child {
            margin-left: 18vmin;
            width: 20%;
            margin-right: 0;
        }

        #wrapper_left .navButton {
            margin-right: 0;
        }

        #cube {
            margin-left: 0vmin;
            margin-top: 25vmin;
            margin-bottom: 0vmin;
        }
    }

    /* Landscape orientation */
    @media (orientation: landscape) {
        #scene {
            transform: translate(-50%, -50%);
        }

        #wrapper_left,
        #wrapper_right {
            width: 20%;
            height: 100%;
            flex-direction: column;
        }

        #wrapper_left {
            left: 0;
            top: 0;
        }

        #wrapper_right {
            right: 0;
            top: 0;
        }

        #cube {
            margin-left: 0vmin;
            margin-top: 0vmin;
            margin-bottom: 0vmin;
        }
    }
}

/* Tablets (429px - 960px) */
@media only screen and (min-width: 429px) and (max-width: 960px) {
    #scene {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -65%);
    }

    #wrapper_left,
    #wrapper_right {
        height: 20%;
    }

    .navButton {
        max-height: 7.5vmin;
        max-width: 10vmin;
        margin-left: 0.25vmin;
        margin-right: 0.75vmin;
    }

    /* Portrait orientation */
    @media (orientation: portrait) {
        #wrapper_left {
            top: 0;
            left: 0;
        }

        #wrapper_right {
            bottom: 0;
            left: 0;
        }

        #wrapper_left .navButton:first-child {
            margin-left: 18vmin;
            width: 20%;
            margin-right: 0;
        }

        #wrapper_left .navButton {
            margin-right: 0;
        }

        #cube {
            margin-left: 2vmin;
            margin-top: 25vmin;
        }
    }

    /* Landscape orientation */
    @media (orientation: landscape) {
        #scene {
            transform: translate(-50%, -50%);
        }

        #wrapper_left,
        #wrapper_right {
            width: 20%;
            height: 100%;
            flex-direction: column;
        }

        #wrapper_left {
            left: 0;
            top: 0;
        }

        #wrapper_right {
            right: 0;
            top: 0;
        }
    }
}

/* Desktop (min-width: 961px) */
@media (min-width: 961px) {
    #scene {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #wrapper_left,
    #wrapper_right {
        width: var(--nav-wrapper-default-width);
        height: 100%;
        flex-direction: column;
    }

    #wrapper_left {
        left: 0;
        top: 0;
    }

    #wrapper_right {
        right: 0;
        top: 0;
    }

    .navButton {
        min-width: var(--nav-button-default-min-width);
        min-height: var(--nav-button-default-min-height);
    }
}

/* ==========================================================================
   ON-DEMAND CONTENT LOADING STATES
   Content loads when faces are rotated into view, not at page load
   ========================================================================== */

/* Loading state - shown while fetching content */
.face.loading {
    position: relative;
}

.face.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--color-highlight, #e51022);
    border-radius: 50%;
    animation: cube-loading-spin 0.8s linear infinite;
    z-index: 100;
}

@keyframes cube-loading-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Fade in content after loading */
.face .cube-face-content {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.face[data-loaded="true"] .cube-face-content {
    opacity: 1;
}

/* Glass mode faces - always visible (transparent) */
.face[data-glass="true"] .cube-face-container {
    background: transparent !important;
    opacity: 1;
}

/* ==========================================================================
   Glass Mode with Content (SPQE-style transparent face with text overlay)
   Face background is transparent but text/content is displayed on top
   ========================================================================== */

/* Glass+content container - transparent background */
.face[data-glass-content="true"] .cube-face-container,
.face[data-glass-content="true"] .cube-face-content,
.glass-with-content,
.glass-content {
    background: transparent !important;
}

/* Glass text overlay - styled for readability on transparent bg */
.glass-text-overlay {
    background: transparent;
    padding: 2vmin;
    text-align: center;
    color: var(--color-txt, #000);
}

/* Optional: Add text shadow for better readability on varied backgrounds */
.glass-text-overlay h1,
.glass-text-overlay h2,
.glass-text-overlay h3,
.glass-text-overlay p {
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.5);
}

/* Glass face content positioning */
.face[data-glass-content="true"] .cube-face-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100%;
}

/* Error and offline fallback states */
.face-error,
.offline-fallback,
.error-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 20px;
    text-align: center;
}

.face-error p,
.offline-fallback p,
.error-fallback p {
    margin: 10px 0;
}

.face-error button,
.offline-fallback button,
.error-fallback button {
    margin-top: 15px;
    padding: 10px 20px;
    background: var(--color-highlight, #e51022);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s ease;
}

.face-error button:hover,
.offline-fallback button:hover,
.error-fallback button:hover {
    background: #c40e1d;
}

/* Slug-based content styling */
.slug-content {
    background: transparent;
}

.slug-content .face-header {
    margin-bottom: 15px;
}

.slug-content .face-title {
    font-size: 2.5vmin;
    color: var(--color-highlight, #e51022);
    margin: 0 0 10px 0;
}

.slug-content .face-featured-image {
    width: 100%;
    max-height: 200px;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 15px;
}

.slug-content .face-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slug-content .page-excerpt {
    font-style: italic;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 15px;
    padding: 10px;
    border-left: 3px solid var(--color-highlight, #e51022);
    background: rgba(0, 0, 0, 0.03);
}

.slug-content .page-content {
    line-height: 1.6;
}

.slug-content .page-meta {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 0.85em;
    color: rgba(0, 0, 0, 0.6);
}

.slug-content .page-meta .author {
    margin-right: 15px;
}

.slug-content .face-footer {
    margin-top: auto;
    padding-top: 15px;
}

.slug-content .read-more {
    display: inline-block;
    padding: 8px 16px;
    background: var(--color-highlight, #e51022);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9em;
    transition: background 0.2s ease;
}

.slug-content .read-more:hover {
    background: #c40e1d;
}

/* ==========================================================================
   Posts Container (Scrollable Multi-Post Display)
   ========================================================================== */

/* Posts content wrapper */
.face-content-posts {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Scrollable posts container */
.face-posts-container {
    max-height: 75vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
    scroll-behavior: smooth;
    flex: 1;
}

/* Custom scrollbar styling */
.face-posts-container::-webkit-scrollbar {
    width: 8px;
}

.face-posts-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.face-posts-container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    transition: background 0.2s ease;
}

.face-posts-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
}

/* Firefox scrollbar */
.face-posts-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.05);
}

/* Individual post item */
.face-post-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.face-post-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.face-post-item:hover {
    transform: translateX(4px);
}

/* Post thumbnail */
.face-post-thumbnail {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
}

.face-post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.face-post-item:hover .face-post-thumbnail img {
    transform: scale(1.05);
}

/* Post content area */
.face-post-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Post title */
.face-post-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.4rem 0;
    line-height: 1.3;
}

.face-post-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.face-post-title a:hover {
    color: var(--color-highlight, #e51022);
}

/* Post excerpt */
.face-post-excerpt {
    font-size: 0.9rem;
    color: rgba(0, 0, 0, 0.65);
    line-height: 1.5;
    margin-bottom: 0.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Post meta (date, category) */
.face-post-meta {
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.5);
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.face-post-categories {
    background: rgba(0, 0, 0, 0.06);
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-weight: 500;
}

/* Empty state */
.face-posts-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem;
}

.face-posts-message {
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
    font-size: 1.1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .face-post-item {
        flex-direction: column;
        gap: 0.75rem;
    }

    .face-post-thumbnail {
        width: 100%;
        height: 120px;
    }

    .face-posts-container {
        max-height: 70vh;
        padding: 0.75rem;
    }
}