/*
Theme Name: Meaningify
Theme URI: https://antigravity.dev/meaningify
Author: Antigravity Code
Author URI: https://antigravity.dev
Description: A modern, 3D-styled FSE theme for song meaning websites. Features glassmorphism effects, 3D hover animations, YouTube thumbnail auto-fetch, WebP optimization, and Lighthouse performance tuning.
Version: 2.4.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
Text Domain: meaningify
Tags: full-site-editing, light-mode, minimalist, magazine, responsive-layout, 3d-effects
*/

/* --- CSS Variables (Enhanced with 3D tokens) --- */
:root {
    /* Colors */
    --mn-bg-white: #ffffff;
    --mn-bg-light: #f7f7f7;
    --mn-bg-dark: #0a0a0f;
    --mn-text-black: #000000;
    --mn-text-grey: #9a9a9a;
    --mn-text-white: #ffffff;

    --mn-accent-yellow: #ffff64;
    --mn-accent-purple: #8b5cf6;
    --mn-accent-blue: #3b82f6;
    --mn-accent-pink: #ec4899;
    --mn-border-color: #e3e3e3;

    /* 3D Effects */
    --mn-glass-bg: rgba(255, 255, 255, 0.1);
    --mn-glass-border: rgba(255, 255, 255, 0.2);
    --mn-shadow-3d: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --mn-shadow-glow: 0 0 40px rgba(139, 92, 246, 0.3);

    /* Typography */
    --mn-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    /* UI */
    --mn-radius-sm: 4px;
    --mn-radius-lg: 16px;
    --mn-border-width: 1px;
    --mn-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --mn-transition-3d: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Reset & Base */
body {
    background-color: var(--mn-bg-white);
    color: var(--mn-text-black);
    font-family: var(--mn-font-sans);
    line-height: 1.6;
    margin: 0;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--mn-font-sans);
    color: var(--mn-text-black);
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-top: 0;
}

a {
    color: var(--mn-text-black);
    text-decoration: none;
    transition: var(--mn-transition);
}

a:hover {
    background-color: var(--mn-accent-yellow);
    color: var(--mn-text-black);
}

/* --- Full Width Layout --- */
.wp-site-blocks {
    max-width: 100%;
    margin: 0 auto;
}

.mn-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* --- Layout Utilities --- */
.alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
}

.alignwide {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Responsive Breakpoints --- */
@media (max-width: 1024px) {
    .mn-wrapper {
        padding: 0 1.5rem;
    }

    .wp-block-columns {
        flex-direction: column !important;
    }

    .wp-block-column {
        flex-basis: 100% !important;
    }
}

@media (max-width: 768px) {
    .mn-wrapper {
        padding: 0 1rem;
    }

    h1,
    .mn-title-huge {
        font-size: 2rem !important;
    }
}

/* --- Block Overrides --- */
.wp-block-button__link {
    border-radius: 0 !important;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* --- Social Links Styling --- */
.wp-block-social-links a,
a[href*="instagram.com"],
a[href*="facebook.com"],
a[href*="twitter.com"],
a[href*="x.com"],
a[href*="tiktok.com"] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--mn-accent-purple), var(--mn-accent-pink));
    color: white !important;
    border-radius: var(--mn-radius-sm);
    text-decoration: none;
    transition: var(--mn-transition);
}

.wp-block-social-links a:hover,
a[href*="instagram.com"]:hover,
a[href*="facebook.com"]:hover,
a[href*="twitter.com"]:hover,
a[href*="x.com"]:hover,
a[href*="tiktok.com"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--mn-shadow-glow);
    background: linear-gradient(135deg, var(--mn-accent-pink), var(--mn-accent-purple));
}