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

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #c9d1d9;
    background-color: #0d1117;
    overflow: hidden;
    line-height: 1.6;
}

.layout {
    display: flex;
    flex-direction: row; 
    height: 100vh; 
    width: 100vw;
}

/* --- LEFT SIDE: THE ARTICLE --- */
.article {
    width: 50%;
    height: 100%;
    padding: 50px 80px;
    background-color: #0d1117;
    overflow-y: auto; 
    border-right: 1px solid #30363d;
}

.article h1 { font-size: 2.2rem; margin-bottom: 20px; color: #ffffff; letter-spacing: -0.5px; }
.article h2 { font-size: 1.5rem; margin-top: 35px; margin-bottom: 15px; color: #e6edf3; }
.article p { margin-bottom: 20px; font-size: 1.1rem; color: #8b949e; }
.article strong { color: #c9d1d9; }

.code-block {
    background-color: #161b22;
    color: #a5b4fc;
    padding: 16px 20px;
    border-radius: 8px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.05rem;
    margin: 15px 0;
    border: 1px solid #30363d;
}

hr { border: none; border-top: 1px solid #30363d; margin: 40px 0; }

/* --- RIGHT SIDE: JQUERY TERMINAL OVERRIDES --- */
.terminal-container {
    width: 50%;
    height: 100%;
    background-color: #010409; 
    padding: 40px;
    display: flex;
    flex-direction: column; 
}

.term-header {
    background-color: #161b22;
    padding: 12px 15px;
    border-radius: 10px 10px 0 0;
    display: flex;
    align-items: center;
    border: 1px solid #30363d;
    border-bottom: none;
    flex-shrink: 0; 
}

.dot { height: 12px; width: 12px; border-radius: 50%; margin-right: 8px; }
.red { background-color: #ff5f56; }
.yellow { background-color: #ffbd2e; }
.green { background-color: #27c93f; }
.term-title { color: #8b949e; font-family: monospace; margin: 0 auto; font-size: 0.9rem; }

/* Overriding the default jQuery Terminal Colors to match our theme */
#terminal-window {
    --background: #0d1117;
    --color: #c9d1d9;
    --size: 1.1;
    flex: 1; 
    min-height: 0; 
    padding: 20px;
    border-radius: 0 0 10px 10px;
    border: 1px solid #30363d;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}

/* Custom Output Colors */
.term-folder { color: #79c0ff; font-weight: bold; }
.term-success { color: #7ee787; }
.term-error { color: #ff7b72; }

/* Custom Scrollbars */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0d1117; }
::-webkit-scrollbar-thumb { background: #30363d; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #484f58; }



/* --- HIDE SIMULATOR ON MOBILE --- */
#mobile-warning {
    display: none; 
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    padding: 40px;
    background: #010409;
    color: #8b949e;
}

#mobile-warning h2 { color: #ff7b72; margin-bottom: 10px; }

@media (max-width: 1000px) {
    /* FIX THE SCROLLING BUG */
    body { overflow-y: auto; }
    .article { overflow-y: visible; }
    
    /* Stack layout */
    .layout { flex-direction: column; height: auto; min-height: 100vh; }
    .article { width: 100%; height: auto; border-right: none; padding: 30px 20px; }
    /* Warning box container sizing */
    .terminal-container { width: 100%; height: 350px; border-top: 2px solid #30363d; }

    /* THE MAGIC SWAP: Hide the terminal, show the warning */
    .term-header { display: none !important; }
    #terminal-window { display: none !important; }
    #mobile-warning { display: flex !important; }
}