/* STREAMING_CHUNK:Defining theme metadata and typography /
/
Theme Name: Dot Square Media
Theme URI: https://dotsquaremedia.com
Author: Dot Square Media
Author URI: https://dotsquaremedia.com
Description: A clean, modern, high-impact media production theme featuring customizable color schemes, Tailwind CSS integration, and flexible widget footers.
Version: 2.1.0
Text Domain: dotsquaremedia
*/

/* Custom Typography */
.cinzel-font {
font-family: 'Cinzel', serif;
}

.heading-font {
font-family: 'Montserrat', sans-serif;
letter-spacing: -0.02em;
}

/* STREAMING_CHUNK:Configuring background canvas and overlays /
/ Background Canvas Safety: Kept strictly behind content and non-interactive */
#bg-canvas {
position: fixed !important;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -20 !important;
pointer-events: none !important;
}

.vignette-overlay {
position: fixed !important;
inset: 0;
z-index: -10 !important;
pointer-events: none !important;
}

/* STREAMING_CHUNK:Styling desktop navigation and submenus /
/ Desktop Navigation */
#primary-menu-container ul {
display: flex;
gap: 2.5rem;
list-style: none;
margin: 0;
padding: 0;
justify-content: flex-start;
align-items: center;
}

#primary-menu-container a {
color: #9ca3af !important;
text-decoration: none;
font-size: 0.82rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.2em;
transition: all 0.3s ease;
white-space: nowrap;
text-align: left;
display: inline-block;
}

#primary-menu-container a:hover {
color: #ffffff !important;
text-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
}

/* Dropdown Sub-menus */
#primary-menu-container ul li {
position: relative;
}

#primary-menu-container ul li ul.sub-menu,
#primary-menu-container ul li ul.children {
display: none !important;
position: absolute;
top: 100%;
left: 0;
background: rgba(10, 10, 10, 0.98);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 1rem 1.25rem;
min-width: 220px;
list-style: none;
margin: 0;
z-index: 999;
flex-direction: column;
gap: 0.75rem;
border-radius: 0.5rem;
box-shadow: 0 15px 35px rgba(0,0,0,0.8);
backdrop-filter: blur(12px);
}

#primary-menu-container ul li:hover > ul.sub-menu,
#primary-menu-container ul li:hover > ul.children {
display: flex !important;
}

#primary-menu-container ul.sub-menu a,
#primary-menu-container ul.children a {
font-size: 0.75rem !important;
letter-spacing: 0.15em !important;
color: #9ca3af !important;
text-align: left !important;
width: 100%;
}

#primary-menu-container ul.sub-menu a:hover,
#primary-menu-container ul.children a:hover {
color: #ffffff !important;
}

/* STREAMING_CHUNK:Styling mobile navigation drawer /
/ Mobile Navigation */
#mobile-menu {
display: none;
width: 100%;
max-height: 75vh;
overflow-y: auto;
background: #060606 !important;
}

#mobile-menu.active {
display: flex !important;
}

#mobile-menu a {
color: #ffffff !important;
font-size: 0.9rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.15em;
display: block;
width: 100%;
padding: 0.75rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* STREAMING_CHUNK:Applying WordPress core image alignment rules /
/ ==========================================================================
WordPress Core Image & Media Alignment (Overrides Tailwind Preflight)
========================================================================== */

/* Left-aligned media: floats left and lets text wrap smoothly */
.alignleft,
img.alignleft,
figure.alignleft,
.wp-block-image.alignleft {
float: left;
margin-top: 0.35rem;
margin-right: 1.75rem;
margin-bottom: 1.25rem;
margin-left: 0;
max-width: 100%;
}

/* Right-aligned media: floats right and lets text wrap */
.alignright,
img.alignright,
figure.alignright,
.wp-block-image.alignright {
float: right;
margin-top: 0.35rem;
margin-left: 1.75rem;
margin-bottom: 1.25rem;
margin-right: 0;
max-width: 100%;
}

/* Center-aligned media: centers block with balanced vertical spacing */
.aligncenter,
img.aligncenter,
figure.aligncenter,
.wp-block-image.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 1.5rem;
clear: both;
}

/* Container Clearfix: Prevents floated images from spilling out of content containers */
.prose::after,
article::after,
.entry-content::after {
content: "";
display: table;
clear: both;
}

/* Responsive adjustment: on very small mobile screens, stack neatly instead of cramping text */
@media (max-width: 540px) {
.alignleft,
img.alignleft,
figure.alignleft,
.wp-block-image.alignleft,
.alignright,
img.alignright,
figure.alignright,
.wp-block-image.alignright {
float: none !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: 1rem !important;
}
}

/* STREAMING_CHUNK:Adding card animations and hover effects /
/ Card & Media Hover States */
.media-card img, .featured-card img {
transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease;
}

.media-card:hover img, .featured-card:hover img {
transform: translateY(-6px) scale(1.02);
box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.35);
}