/*
Theme Name: The War Room
Theme URI: https://thewarroom.co.za
Author: Cindy
Description: Strategic Agency landing page theme with ACF integration
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: warroom
*/

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "Lexend", sans-serif;
            background: #000;
            color: #fff;
            min-height: 100vh;
            max-width: 100vw;
            overflow: hidden;
        }

        .container {
            height: 100vh;
            width: 100vw;
            display: grid;
            grid-template-columns: 1fr 1fr;
            position: relative;
            overflow-x: hidden;
        }

        /* Left Side - Black */
        .left-side {
            background: #e7d916;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 3rem;
            position: relative;
        }

        /* Right Side - Yellow accent */
        .right-side {
            background: #1a1a1a;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 3rem;
            position: relative;
        }

        /* Animated circles */
        .circle {
            position: absolute;
            border-radius: 50%;
            opacity: 0.1;
            animation: float 20s infinite ease-in-out;
        }

        .circle-1 {
            width: 400px;
            height: 400px;
            background: #000;
            bottom: -100px;
            right: -100px;
            animation-delay: 0s;
        }

        .circle-2 {
            width: 300px;
            height: 300px;
            background: #312d17;
            top: -26px;
            left: -50px;
            animation-delay: 5s;
        }

        .circle-3 {
            width: 250px;
            height: 250px;
            background: rgba(255, 215, 0, 0.08);
            top: 10%;
            right: -80px;
            animation-delay: 2s;
        }

        a.button { 
            padding: 1rem; 
            border-radius: 6px; 
            width: fit-content; 
            text-decoration: none; 
            color: #000; 
            cursor: pointer; 
            z-index: 999;  
            animation: fadeIn 1s ease-out 0.9s both; 
            font-weight: bold; 
            background: #e7d916; 
            position: relative; 
            border: 2px solid #e7d916;
            transition: all 0.3s ease;
        }
        a.button:hover { 
            background: rgba(255, 215, 0, 0.8); 
            color: #000; 
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
        }

        @keyframes float {
            0%, 100% {
                transform: translate(0, 0) scale(1);
            }
            50% {
                transform: translate(30px, 30px) scale(1.1);
            }
        }

        .logo {
            max-width: 450px;
            width: 90%;
            margin-bottom: 2rem;
            animation: fadeIn 1s ease-out;
        }

        .tagline {
            font-size: clamp(1.3rem, 2.5vw, 1.8rem);
            font-weight: 700;
            text-align: left;
            line-height: 1.4;
            margin-bottom: 1.5rem;
            animation: fadeIn 1s ease-out 0.3s both;
        }

        .tagline .highlight {
            color: #1a1a1a;
        }

        .why {
            font-size: clamp(1rem, 1.8vw, 1.2rem);
            text-align: left;
            line-height: 1.6;
            max-width: 500px;
            animation: fadeIn 1s ease-out 0.6s both;
        }

        /* Improved Right Side Styling */
        .leadership-box {
            background: rgba(255, 215, 0, 0.1);
            padding: 2.5rem;
            border-radius: 16px;
            margin-bottom: 2rem;
            max-width: 580px;
            width: 100%;
            animation: fadeIn 1s ease-out 0.9s both;
            position: relative;
            border: 1px solid rgba(255, 215, 0, 0.2);
        }

        .leadership-box::before {
            content: '';
            position: absolute;
            top: 0;
            left: 2.5rem;
            width: 60px;
            height: 4px;
            background: #e7d916;
            border-radius: 2px;
        }

        .leadership-box h2 {
            font-size: clamp(1.6rem, 2.5vw, 2.2rem);
            font-weight: 800;
            margin-bottom: 1.2rem;
            text-align: left;
            margin-top: 0.5rem;
        }

        .leadership-box p { 
            line-height: 1.5; 
            margin-bottom: 20px; 
        }
        .leadership-box p:last-child { 
            margin-bottom: 0; 
        }

        .leaders {
            font-size: clamp(1.1rem, 1.8vw, 1.3rem);
            font-weight: 600;
            margin-bottom: 1.5rem;
            text-align: left;
            opacity: 0.95;
            padding-bottom: 1.2rem;
            border-bottom: 1px solid rgba(255, 215, 0, 0.3);
            color: #e7d916;
        }

        .team-text {
            font-size: clamp(0.9rem, 1.5vw, 1.05rem);
            line-height: 1.7;
            text-align: left;
            opacity: 0.9;
        }

        .bottom-text {
            background: rgba(255, 215, 0, 0.1);
            padding: 2rem 2.5rem;
            border-radius: 16px;
            max-width: 580px;
            width: 100%;
            animation: fadeIn 1s ease-out 1.2s both;
            border: 1px solid rgba(255, 215, 0, 0.2);
        }

        .niche-callout {
            font-size: clamp(1.1rem, 1.9vw, 1.4rem);
            font-weight: 800;
            line-height: 1.4;
            margin-bottom: 1rem;
            letter-spacing: -0.02em;
        }

        .bottom-text p {
            font-size: clamp(0.95rem, 1.6vw, 1.15rem);
            line-height: 1.7;
            text-align: left;
            font-weight: 500;
            opacity: 0.95;
        }

        .timeline {
            margin: 50px 0 50px;
            display: flex;
            gap: 0.8rem;
            align-items: center;
            animation: fadeIn 1s ease-out 1.5s both;
            z-index: 10;
        }

        .day {
            background: rgba(255, 215, 0, 0.2);
            border-radius: 50px;
            font-weight: 700;
            font-size: clamp(0.7rem, 1.2vw, 0.9rem);
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            height: 50px;
            width: 50px;
            text-align: center;
            line-height: 50px;
            border: 2px solid rgba(255, 215, 0, 0.3);
        }
        
        .day.mail a { 
            width: 50px; 
            height: 50px; 
            display: block; 
        }
        
        .day.mail { 
            background: rgba(255, 215, 0, 0.3); 
        }
        
        .day.mail svg { 
            margin-top: 13px; 
        }

        .day.mail:hover {
            background: rgba(255, 215, 0, 0.5);
            transform: scale(1.05);
        }

        .arrow {
            font-size: clamp(0.8rem, 1.3vw, 1rem);
            opacity: 0.7;
            color: #e7d916;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .container {
                grid-template-columns: 1fr;
                grid-template-rows: 1fr 1fr;
            }

            .timeline {
                bottom: 1rem;
                flex-wrap: wrap;
                justify-content: center;
                max-width: 90%;
            }

            .left-side, .right-side {
                padding: 2rem 1.5rem;
            }

            .logo {
                max-width: 350px;
                margin-bottom: 1.5rem;
            }

            .leadership-box, .bottom-text {
                max-width: 100%;
            }

            .right-side {
                padding: 3rem 1.5rem;
				padding-bottom:10rem;
            }
        }

        @media (max-width: 768px) {
            .timeline {
                gap: 0.5rem;
            }

            .day {
                padding: 0.5rem 0.8rem;
            }

            .arrow {
                display: none;
            }

            .leadership-box, .bottom-text {
                padding: 1.8rem;
            }

            .leadership-box::before {
                left: 1.8rem;
            }
        }