/* =====================================================================
   content.css — styles for markup that script.js injects into the
   GUI "browser" / "editor" windows and the CLI terminal.

   These rules were extracted from the pre-v2 region of the old single
   styles.css (original lines 121–1770). Everything else in that region
   was dead v1 markup and now lives, unreferenced, in
   backup/legacy-v1-styles-20260904.css.
   ===================================================================== */

/* --- CLI terminal body + command echo (base; mostly overridden in cli.css) --- */
.terminal-body {
    padding: 1.5rem;
    font-family: 'Fira Code', monospace;
    font-size: 0.9rem;
    line-height: 1.8;
}

.prompt {
    color: var(--text-secondary);
}

.command {
    color: var(--text-primary);
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* --- about.cpp syntax highlighting (used by aboutDoc() in script.js) --- */
.keyword {
    color: #9c27b0;
    font-weight: 600;
}

.variable {
    color: #1976d2;
    font-weight: 600;
}

.property {
    color: #d32f2f;
}

.string {
    color: #388e3c;
}

/* Dark mode adjustments for code colors */
[data-theme="dark"] .keyword {
    color: #bb9af7;
    font-weight: 600;
}

[data-theme="dark"] .variable {
    color: #7dcfff;
    font-weight: 600;
}

[data-theme="dark"] .property {
    color: #ff9e64;
}

[data-theme="dark"] .string {
    color: #9ece6a;
}

/* --- projects tabbed box: injected into the Portfolio browser window --- */
/* ===== PROJECTS SECTION ===== */
.projects-container {
    max-width: 100%;
}

/* VS Code/Cursor style tabbed box for projects */
.projects-tabbed-box {
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

/* Tab Bar for Projects */
.projects-tab-bar {
    display: flex;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
}

.project-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    border-right: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
}

.project-tab svg {
    stroke: var(--text-secondary);
    transition: stroke 0.2s ease;
}

.project-tab:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

.project-tab:hover svg {
    stroke: var(--text-primary);
}

.project-tab.active {
    background: var(--bg-card);
    color: var(--text-primary);
    border-bottom: 2px solid var(--pill-home);
}

.project-tab.active svg {
    stroke: var(--text-primary);
}

/* Tab Content for Projects */
.projects-tab-content {
    padding: 2.5rem;
    min-height: 400px;
}

.project-panel {
    display: none;
    animation: fadeInTab 0.3s ease;
}

.project-panel.active {
    display: block;
}

.project-panel-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.project-panel-title::before {
    content: '>';
    font-family: 'Fira Code', monospace;
    color: var(--pill-home);
    font-size: 1.5rem;
}

.project-links {
    display: flex;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.project-links-stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.project-link {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: var(--transition);
}

.project-link:hover {
    color: var(--text-secondary);
}

/* Project meta styles */
.project-date {
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.project-role {
    color: var(--text-secondary);
    font-weight: 600;
    margin-top: 0.25rem;
    margin-bottom: 1rem;
}

.project-contrib-title {
    font-weight: 700;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
    color: var(--text-primary);
}

.project-bullets {
    margin: 0.25rem 0 0.5rem;
    padding-left: 1.25rem;
    color: var(--text-secondary);
    line-height: 1.8;
}

.project-bullets li {
    margin-bottom: 0.4rem;
}

.project-summary {
    color: var(--text-secondary);
    line-height: 1.8;
    max-width: 56rem;
}

/* --- projects tabbed box, responsive (pulled out of the old media blocks) --- */
@media (max-width: 768px) {
    /* Projects Section - keep tabs on tablet */
    .projects-tab-bar {
        flex-wrap: wrap;
    }
    
    .project-tab {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    /* Projects tabbed box — stays a horizontal-scrolling tab bar on phones */
    .projects-tab-bar { overflow-x: auto; }
    .project-tab { padding: 0.7rem 0.9rem; font-size: 0.82rem; }
    .projects-tab-content { padding: 1.5rem 1.25rem; min-height: 0; }
    .project-panel-title { font-size: 1.2rem; line-height: 1.3; }
    .project-panel-title::before { font-size: 1.2rem; }
    .project-date { font-size: 0.85rem; }
    .project-role { font-size: 0.9rem; }
    .project-contrib-title { font-size: 0.95rem; }
    .project-bullets { font-size: 0.9rem; line-height: 1.6; padding-left: 1rem; }
    .project-link { font-size: 0.85rem; }
    .project-summary { font-size: 0.9rem; line-height: 1.65; }
}