/*
Theme Name: The Mind Factory
Theme URI: https://melvindsouza.com
Author: Melvin D'Souza
Author URI: https://melvindsouza.com
Description: Bespoke luxury editorial theme for Melvin D'Souza - The Mind Factory. Features seamless cross-view transitions, 3D book elevation, kinetic animations, editorial typography, and an integrated executive publishing desk.
Version: 1.0.5
Requires at least: 5.9
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mindfactory
Tags: custom-background, custom-colors, custom-menu, featured-images, full-width-template
*/

:root {
    --navy: #011A38;
    --navy-dark: #001733;
    --red: #D90000;
    --red-bright: #E00000;
    --white: #FFFFFF;
    --off-white: #F5F6F7;
    --light-gray: #E7E8F0;
    --black: #0A0A0A;
    --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-nav: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
    font-family: var(--font-body);
    letter-spacing: -0.011em;
    line-height: 1.6;
    background-color: var(--off-white);
    color: var(--navy);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-heading, .font-serif {
    font-family: var(--font-heading) !important;
    letter-spacing: -0.025em;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

nav, button, input, select, textarea, label, .font-nav, .font-mono, .nav-item-link {
    font-family: var(--font-nav) !important;
    letter-spacing: -0.01em;
}

::selection {
    background-color: var(--navy);
    color: var(--white);
}

/* Custom Editorial Scrollbar */
::-webkit-scrollbar {
    width: 7px;
}
::-webkit-scrollbar-track {
    background: var(--off-white);
}
::-webkit-scrollbar-thumb {
    background: var(--navy);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--red);
}

/* Core Multi-View Routing State (Enforces Home by default) */
.page-view {
    display: none;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#view-home,
.page-view.active-view {
    display: block !important;
    opacity: 1 !important;
}
.page-view:not(.active-view):not(#view-home) {
    display: none !important;
}
body.has-custom-view #view-home:not(.active-view) {
    display: none !important;
}

/* Ensure Logo Always Displays Responsively */
.brand-logo-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
}

/* ============================================================ */
/* THE MIND FACTORY - 6 PILLAR CARDS SLIGHT POP-UP ANIMATION    */
/* ============================================================ */
@keyframes pillarPopUp {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.pillar-card {
    position: relative !important;
    border: 1px solid #00224d !important;
    background-color: #001733 !important;
    border-radius: 8px !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                background-color 0.3s ease, 
                border-color 0.3s ease !important;
    cursor: pointer !important;
    transform-origin: center center !important;
}

.pillar-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 8px;
    border: 1.5px solid transparent;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

/* Hover & Active Slight Pop-up Elevation */
.pillar-card:hover,
.pillar-card.pillar-active {
    transform: translateY(-5px) scale(1.015) !important;
    background-color: #001c3d !important;
    box-shadow: 0 14px 28px -6px rgba(0, 0, 0, 0.5), 
                0 0 20px rgba(217, 0, 0, 0.25) !important;
    border-color: #D90000 !important;
    z-index: 10 !important;
}

.pillar-card:hover::before,
.pillar-card.pillar-active::before {
    border-color: #D90000 !important;
    box-shadow: inset 0 0 10px rgba(217, 0, 0, 0.12), 0 0 14px rgba(217, 0, 0, 0.25) !important;
}

.pillar-card:active {
    transform: translateY(-2px) scale(1.005) !important;
}

.pillar-card:hover .pillar-icon,
.pillar-card.pillar-active .pillar-icon {
    transform: scale(1.12) rotate(4deg) !important;
    color: #FF2E2E !important;
}

.pillar-card:hover .pillar-num,
.pillar-card.pillar-active .pillar-num {
    color: #FF2E2E !important;
    letter-spacing: 0.14em !important;
}

.pillar-card:hover .pillar-title,
.pillar-card.pillar-active .pillar-title {
    color: #FFFFFF !important;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.35) !important;
}

.pillar-icon {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease !important;
}
.pillar-num {
    transition: color 0.25s ease, letter-spacing 0.25s ease !important;
}
.pillar-title {
    transition: color 0.25s ease, text-shadow 0.25s ease !important;
}