/*
Theme Name: Cosmic Heritage
Author: Your Name
Description: A simple, elegant cosmic theme with a dynamic header and Three.js background.
Version: 5.0
*/

/* 1. Base Layout & Cosmic Background */
body {
font-family: 'Inter', sans-serif;
background-color: #050505;
color: white;
margin: 0;
overflow-x: hidden;
}

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

/* 2. Glassmorphism Effect */
.glass-card {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
}

/* 3. WordPress Typography (Prose)
Ensures headers and text are legible on the dark background.
*/
.prose {
color: #e5e7eb !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.5em;
margin-bottom: 0.5em;
}

.prose p {
margin-bottom: 1.5em;
line-height: 1.8;
}

/* 4. WordPress Image Alignment & Wrapping
Targets modern Gutenberg blocks so text flows around images.
*/

/* Floating Left */
.alignleft,
.wp-block-image.alignleft,
.prose .alignleft {
float: left;
margin: 0.5rem 2rem 1.5rem 0 !important;
max-width: 50%;
}

/* Floating Right */
.alignright,
.wp-block-image.alignright,
.prose .alignright {
float: right;
margin: 0.5rem 0 1.5rem 2rem !important;
max-width: 50%;
}

/* Centering */
.aligncenter,
.wp-block-image.aligncenter,
.prose .aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 2rem;
clear: both;
}

/* Ensures the text container clears floats so the layout doesn't break */
.prose::after {
content: "";
display: table;
clear: both;
}

/* Ensures images inside figure tags resize properly */
figure.alignleft, figure.alignright {
height: auto;
}

figure.alignleft img, figure.alignright img {
margin: 0 !important;
}

/* 5. Mobile Responsiveness for Images
On phones, we stop floating images so the layout doesn't get squashed.
*/
@media (max-width: 768px) {
.alignleft, .alignright, .wp-block-image.alignleft, .wp-block-image.alignright {
float: none !important;
margin: 1rem 0 !important;
max-width: 100% !important;
display: block;
}
}