/* Custom Utilities for HostingPodium */

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

.hp-glitch-hover:hover {
    background-color: #9defff;
    color: #001f24;
}

/* Ensure the dark mode background is forced if the CDN is slow to load */
.dark body {
    background-color: #0b1326;
    color: #dae2fd;
}

/* Force the background color regardless of WordPress Inline Styles */
body.home {
    background-color: #0b1326 !important;
    color: #dae2fd !important;
}

/* Fix the admin bar offset if it's pushing the header down weirdly */
.admin-bar .site-header {
    top: 32px;
}

/* for platforms page */
.hp-grid-bg {
    background-image: linear-gradient(to right, #171f33 1px, transparent 1px), 
                      linear-gradient(to bottom, #171f33 1px, transparent 1px);
    background-size: 4rem 4rem;
}
/* for blog posts individual page (single.php) */
/* Styling standard WP Content without breaking Tailwind */
.entry-content p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
    color: #bec8d1; /* on-surface-variant */
}

.entry-content h2, 
.entry-content h3 {
    font-family: 'Space Grotesk', sans-serif;
    color: #dae2fd; /* on-surface */
    margin-top: 3rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.entry-content h2 { font-size: 2rem; border-left: 3px solid #85cfff; padding-left: 1rem; }

.entry-content pre, 
.entry-content code {
    background-color: #131b2e !important; /* surface-container-low */
    color: #69d5e8 !important; /* secondary */
    font-family: monospace;
    padding: 1rem;
    border: 1px solid #3e484f;
    overflow-x: auto;
}