/* Inherits global variables from ../../styles.css */

.article-container {
   max-width: 900px;
   /* Slightly wider to accommodate tables and diagrams */
   margin: 40px auto 60px;
}

.blog-post {
   background-color: var(--card-bg, #ffffff);
   padding: 50px;
   border-radius: 8px;
   border: 1px solid var(--border, #e1e4e8);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.post-header {
   margin-bottom: 40px;
   text-align: center;
   border-bottom: 1px solid var(--border, #e1e4e8);
   padding-bottom: 25px;
}

.post-category {
   display: inline-block;
   color: var(--accent-color, #0056b3);
   font-size: 0.95rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   margin-bottom: 15px;
}

.post-title {
   font-size: 2.6rem;
   line-height: 1.25;
   margin-bottom: 15px;
   color: #111827;
}

.post-meta {
   color: #6b7280;
   font-size: 0.95rem;
}

.post-meta .author {
   font-weight: 600;
   color: var(--accent-color, #0056b3);
}

.post-content h2 {
   font-size: 1.8rem;
   margin: 50px 0 25px;
   color: #1f2937;
   border-bottom: 2px solid #f3f4f6;
   padding-bottom: 10px;
}

.post-content h3 {
   font-size: 1.4rem;
   margin: 35px 0 15px;
   color: #374151;
}

.post-content p {
   font-size: 1.15rem;
   line-height: 1.7;
   margin-bottom: 20px;
   color: #4b5563;
}

.post-content ul {
   margin-bottom: 25px;
   padding-left: 25px;
}

.post-content li {
   font-size: 1.15rem;
   line-height: 1.7;
   margin-bottom: 10px;
   color: #4b5563;
}

.post-content li strong {
   color: #111827;
}

/* Verilog & Assembly Code Blocks */
pre {
   background-color: #1e1e1e;
   color: #d4d4d4;
   padding: 25px;
   border-radius: 8px;
   overflow-x: auto;
   margin: 30px 0;
   font-family: 'Consolas', 'Fira Code', 'Courier New', monospace;
   font-size: 0.95rem;
   line-height: 1.6;
   border: 1px solid #333;
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

code {
   font-family: 'Consolas', 'Fira Code', 'Courier New', monospace;
   background-color: #f3f4f6;
   color: #be185d;
   padding: 3px 6px;
   border-radius: 4px;
   font-size: 0.9em;
}

pre code {
   background-color: transparent;
   color: inherit;
   padding: 0;
}

/* Data Tables */
.data-table {
   width: 100%;
   border-collapse: collapse;
   margin: 30px 0;
   font-size: 1.05rem;
}

.data-table th,
.data-table td {
   border: 1px solid #e5e7eb;
   padding: 15px;
   text-align: left;
}

.data-table th {
   background-color: #f9fafb;
   color: #111827;
   font-weight: 600;
}

.data-table tr:nth-child(even) {
   background-color: #fafafa;
}

/* Specific Diagram Placeholders */
.placeholder-diagram {
   background-color: #f8fafc;
   border: 2px dashed #94a3b8;
   min-height: 250px;
   /* Base height, will expand if image is added */
   display: flex;
   align-items: center;
   justify-content: center;
   color: #475569;
   font-weight: 600;
   font-size: 1.1rem;
   margin: 40px 0;
   border-radius: 8px;
   text-align: center;
   padding: 20px;
   transition: background-color 0.3s ease;
}

/* Once you replace the text with an <img> tag inside the placeholder div, 
   this ensures the image scales correctly */
.placeholder-diagram img {
   max-width: 100%;
   height: auto;
   border-radius: 6px;
}

/* ── Inline diagram styles ─────────────────────────────────── */
.diagram-wrap {
   margin: 36px 0;
   background: #f8fafc;
   border: 1px solid #e2e8f0;
   border-radius: 10px;
   overflow: hidden;
}

.diagram-wrap svg {
   display: block;
   width: 100%;
   height: auto;
}

.diagram-caption {
   font-size: 0.88rem;
   color: #64748b;
   text-align: center;
   padding: 10px 16px 14px;
   font-style: italic;
   border-top: 1px solid #e2e8f0;
   background: #f1f5f9;
}

/* ── Instruction-format table ──────────────────────────────── */
.instr-table {
   width: 100%;
   border-collapse: collapse;
   font-family: 'Consolas', 'Fira Code', monospace;
   font-size: 0.82rem;
   margin: 30px 0;
}

.instr-table th,
.instr-table td {
   border: 1px solid #d1d5db;
   padding: 8px 10px;
   text-align: center;
}

.instr-table thead th {
   background: #1e293b;
   color: #e2e8f0;
   font-weight: 600;
   font-size: 0.78rem;
   letter-spacing: 0.04em;
}

.instr-table .type-label {
   background: #1e293b;
   color: #94a3b8;
   font-weight: 700;
   font-size: 0.75rem;
   text-align: left;
   padding-left: 12px;
}

.instr-table .field-rs1 {
   background: #fef9c3;
   color: #713f12;
}

.instr-table .field-rs2 {
   background: #fce7f3;
   color: #831843;
}

.instr-table .field-rd {
   background: #dcfce7;
   color: #14532d;
}

.instr-table .field-funct3 {
   background: #ede9fe;
   color: #3b0764;
}

.instr-table .field-funct7 {
   background: #fff7ed;
   color: #7c2d12;
}

.instr-table .field-imm {
   background: #e0f2fe;
   color: #0c4a6e;
}

.instr-table .field-opcode {
   background: #f1f5f9;
   color: #1e293b;
   font-weight: 700;
}

.instr-table .bit-header {
   background: #334155;
   color: #94a3b8;
   font-size: 0.7rem;
}

/* ── Signal legend ─────────────────────────────────────────── */
.signal-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 14px;
   margin: 24px 0 32px;
}

.signal-card {
   background: #f8fafc;
   border: 1px solid #e2e8f0;
   border-left: 4px solid #3b82f6;
   border-radius: 6px;
   padding: 12px 14px;
}

.signal-card code {
   font-size: 0.95rem;
   font-weight: 700;
   color: #1d4ed8;
   background: transparent;
   padding: 0;
}

.signal-card p {
   font-size: 0.95rem !important;
   margin: 4px 0 0 !important;
   color: #475569 !important;
   line-height: 1.5 !important;
}

.signal-card.green {
   border-left-color: #16a34a;
}

.signal-card.green code {
   color: #15803d;
}

.signal-card.purple {
   border-left-color: #9333ea;
}

.signal-card.purple code {
   color: #7e22ce;
}

.signal-card.orange {
   border-left-color: #ea580c;
}

.signal-card.orange code {
   color: #c2410c;
}

/* ── ALU op table ──────────────────────────────────────────── */
.alu-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 8px;
   margin: 20px 0 28px;
}

.alu-row {
   display: flex;
   align-items: center;
   gap: 10px;
   background: #f8fafc;
   border: 1px solid #e2e8f0;
   border-radius: 6px;
   padding: 8px 12px;
   font-size: 0.9rem;
}

.alu-code {
   font-family: 'Consolas', monospace;
   font-weight: 700;
   color: #be185d;
   background: #fdf2f8;
   padding: 2px 7px;
   border-radius: 4px;
   font-size: 0.85rem;
}

/* ── Callout box ───────────────────────────────────────────── */
.callout {
   background: #eff6ff;
   border-left: 4px solid #3b82f6;
   border-radius: 0 8px 8px 0;
   padding: 16px 20px;
   margin: 24px 0;
   font-size: 1.05rem;
   color: #1e3a5f;
   line-height: 1.65;
}

.callout strong {
   color: #1d4ed8;
}

/* ── Step list ─────────────────────────────────────────────── */
.step-list {
   list-style: none;
   padding: 0;
   margin: 20px 0 28px;
   counter-reset: steps;
}

.step-list li {
   counter-increment: steps;
   position: relative;
   padding-left: 46px;
   margin-bottom: 16px;
   font-size: 1.1rem;
   color: #374151;
   line-height: 1.7;
}

.step-list li::before {
   content: counter(steps);
   position: absolute;
   left: 0;
   top: 2px;
   width: 28px;
   height: 28px;
   background: #1d4ed8;
   color: #fff;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.82rem;
   font-weight: 700;
}