/*
Theme Name: Umbra and Lumen
Author: E. Hughes Wordpress designs
Description: A suspenseful theme of shadows and light. Features a custom dynamic widget drawer and floating light effects.
Version: 1.0
*/

/* Base Noir Setup */
body {
    font-family: 'Montserrat', sans-serif;
    background-color: #030303;
    color: #d1d5db;
    margin: 0;
    overflow-x: hidden;
}

h1, h2, h3, h4, .cinzel-font {
    font-family: 'Cinzel', serif !important;
}

#bg-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    pointer-events: none;
}

/* Atmospheric Vignette */
.vignette-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    box-shadow: inset 0 0 150px rgba(0,0,0,0.95);
    pointer-events: none;
    z-index: 10;
}

/* Cards & Navigation */
.glass-card {
    background: rgba(8, 8, 8, 0.85);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.03);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.9);
}

/* Classic WordPress Gutenberg Blocks & Spacing Support */
.prose {
    color: #b3b9c4 !important;
    max-width: 100%;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    color: #ffffff !important;
    font-weight: 700;
    margin-top: 1.8em;
    margin-bottom: 0.8em;
}

.prose p {
    margin-bottom: 1.6em;
    line-height: 1.85;
}

/* Image Wraps & Float Mechanics */
.alignleft, 
.wp-block-image.alignleft,
.prose .alignleft {
    float: left;
    margin: 0.5rem 2.5rem 1.5rem 0 !important;
    max-width: 48%;
}

.alignright, 
.wp-block-image.alignright,
.prose .alignright {
    float: right;
    margin: 0.5rem 0 1.5rem 2.5rem !important;
    max-width: 48%;
}

.aligncenter, 
.wp-block-image.aligncenter,
.prose .aligncenter {
    display: block;
    margin: 0 auto 2.5rem auto !important;
    clear: both;
}

.prose::after {
    content: "";
    display: table;
    clear: both;
}

@media (max-width: 768px) {
    .alignleft, .alignright, .wp-block-image.alignleft, .wp-block-image.alignright {
        float: none !important;
        margin: 1.5rem 0 !important;
        max-width: 100% !important;
    }
}