/* --- markdown.css (Specific styles for the Markdown article page) --- */

.terrain-section {
    background: linear-gradient(to bottom, #000074, #000000);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* --- MARKDOWN DEMO BOXES: Raw vs Rendered split view --- */
.md-demo {
    margin: 2rem 0;
    border: 1px solid #333;
    border-radius: 12px;
    overflow: hidden;
}

.md-demo-labels {
    display: flex;
    border-bottom: 1px solid #333;
}

.md-panel-label {
    flex: 1;
    padding: 0.45rem 1.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.md-panel-label--raw {
    background: #0a0a0a;
    color: #a8c4ff;
    border-right: 1px solid #333;
}

.md-panel-label--rendered {
    background: #111;
    color: #7aff9b;
}

.md-demo-body {
    display: flex;
}

.md-panel {
    flex: 1;
    padding: 1.25rem 1.5rem;
    line-height: 1.75;
    font-size: 0.92rem;
}

.md-panel--raw {
    background: #0a0a0a;
    border-right: 1px solid #333;
    font-family: 'Courier New', Courier, monospace;
    color: #a8c4ff;
    white-space: pre-wrap;
}

.md-panel--rendered {
    background: #111;
    color: #d1d1d1;
}

.md-panel--rendered h1,
.md-panel--rendered h2,
.md-panel--rendered h3 {
    color: #fff;
    margin: 0.25rem 0 0.5rem;
    font-weight: 600;
}

.md-panel--rendered h1 { font-size: 1.3rem; }
.md-panel--rendered h2 { font-size: 1.1rem; }
.md-panel--rendered h3 { font-size: 0.98rem; }

.md-panel--rendered strong { color: #fff; }

.md-panel--rendered em { color: #a8c4ff; font-style: italic; }

.md-panel--rendered code {
    background: #1a1a2e;
    color: #a8c4ff;
    padding: 0.1em 0.4em;
    border-radius: 3px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85em;
}

.md-panel--rendered ul {
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}

.md-panel--rendered ul li {
    margin-bottom: 0.3rem;
}

.md-panel--rendered blockquote {
    border-left: 3px solid #245AF6;
    padding-left: 1rem;
    margin: 0.5rem 0;
    color: #888;
    font-style: italic;
}

.md-panel--rendered a {
    color: #245AF6;
    text-decoration: underline;
}

.md-panel--rendered hr {
    border: none;
    border-top: 1px solid #333;
    margin: 1rem 0;
}

@media (max-width: 768px) {
    .md-demo-labels,
    .md-demo-body { flex-direction: column; }
    .md-panel-label--raw { border-right: none; border-bottom: 1px solid #333; }
    .md-panel--raw { border-right: none; border-bottom: 1px solid #333; }
}


/* --- SYNTAX QUICK-REFERENCE TABLE --- */
.syntax-table-wrapper {
    margin: 1.5rem 0;
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
}

.syntax-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.syntax-table th {
    background: #0a006ec4;
    color: #fff;
    padding: 10px 15px;
    text-align: left;
    font-weight: 600;
}

.syntax-table td {
    padding: 10px 15px;
    border-bottom: 1px solid #333;
    color: var(--secondary-text-color);
    vertical-align: middle;
}

.syntax-table tr:last-child td { border-bottom: none; }

.syntax-table td:first-child {
    font-family: 'Courier New', Courier, monospace;
    color: #a8c4ff;
    background: #0a0a0a;
    white-space: nowrap;
    width: 35%;
}

.syntax-table td:last-child {
    color: #d1d1d1;
}


/* --- SOFTWARE GRID --- */
.software-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 2rem 0;
}

.software-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid #333;
    border-radius: 10px;
    padding: 1.25rem;
    transition: border-color 0.25s ease;
}

.software-card:hover { border-color: #245AF6; }

.software-card__name {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.4rem;
}

.software-card__tag {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.2em 0.6em;
    border-radius: 20px;
    background: rgba(36,90,246,0.15);
    color: #245AF6;
    margin-bottom: 0.6rem;
}

.software-card__desc {
    color: var(--secondary-text-color);
    font-size: 0.83rem;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 768px) {
    .software-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .software-grid { grid-template-columns: 1fr; }
}


/* --- CODE INLINE UTILITY --- */
.code-inline {
    font-family: 'Courier New', Courier, monospace;
    background: #1a1a2e;
    color: #a8c4ff;
    padding: 0.15em 0.45em;
    border-radius: 4px;
    font-size: 0.88em;
}


/* --- ENIBUSINESS USE CASE CARDS --- */
.usecase-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 2rem 0;
}

.usecase-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid #353535;
    border-left: 4px solid #245AF6;
    border-radius: 0 10px 10px 0;
    padding: 1.25rem 1.5rem;
}

.usecase-card__title {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.usecase-card__desc {
    color: var(--secondary-text-color);
    font-size: 0.88rem;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .usecase-grid { grid-template-columns: 1fr; }
}