/* ================================================================
   SVES Portal — Code Blocks
   ================================================================ */

/* ── Inline code ─────────────────────────────────────────────── */
.article-content code:not([class]) {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background: var(--color-bg-code);
    color: var(--color-accent);
    padding: 0.1em 0.45em;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

/* ── Code block wrapper ──────────────────────────────────────── */
.article-content pre,
.code-block {
    position: relative;
    background: var(--color-bg-code);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin: var(--space-6) 0;
}

.code-block__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--color-border);
}

.code-block__lang {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-accent);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
}

.code-block__copy {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.code-block__copy:hover {
    color: var(--color-text-accent);
    border-color: var(--color-border-accent);
}

.code-block__copy svg { width: 12px; height: 12px; }

.code-block__copy.copied {
    color: var(--color-tip);
    border-color: var(--color-tip-border);
}

.article-content pre > code,
.code-block__body {
    display: block;
    padding: var(--space-5) var(--space-6);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.75;
    color: var(--color-text-code);
    overflow-x: auto;
    tab-size: 4;
    -webkit-overflow-scrolling: touch;
}

/* ── Content info blocks ─────────────────────────────────────── */
.article-content .wp-block-quote,
blockquote {
    border-left: 3px solid var(--color-accent);
    padding: var(--space-4) var(--space-6);
    background: var(--color-bg-card);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--color-text-secondary);
    font-style: normal;
    margin: var(--space-6) 0;
}

/* Gutenberg-specific alert blocks */
.sves-tip, .sves-warning, .sves-important, .sves-note, .sves-pro {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    margin: var(--space-6) 0;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.sves-tip__icon, .sves-warning__icon, .sves-important__icon,
.sves-note__icon, .sves-pro__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

.sves-tip {
    background: var(--color-tip-bg);
    border: 1px solid var(--color-tip-border);
    color: var(--color-tip-text);
}
.sves-tip__icon { color: var(--color-tip); }

.sves-warning {
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    color: var(--color-warning-text);
}
.sves-warning__icon { color: var(--color-warning); }

.sves-important {
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger-border);
    color: var(--color-danger);
}
.sves-important__icon { color: var(--color-danger); }

.sves-note {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-secondary);
}
.sves-note__icon { color: var(--color-text-muted); }

.sves-pro {
    background: var(--color-accent-muted);
    border: 1px solid var(--color-border-accent);
    color: var(--color-text-primary);
}
.sves-pro__icon { color: var(--color-accent); }

/* ── Tables ──────────────────────────────────────────────────── */
.article-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    margin: var(--space-6) 0;
    overflow-x: auto;
    display: block;
}

.article-content th,
.article-content td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.article-content th {
    background: var(--color-bg-card);
    font-weight: var(--weight-semibold);
    color: var(--color-text-accent);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
}

.article-content tr:hover td {
    background: var(--color-accent-muted);
}

/* ── Ordered list with step numbers ─────────────────────────── */
.article-content ol {
    counter-reset: step-counter;
    list-style: none;
    padding: 0;
}

.article-content ol > li {
    counter-increment: step-counter;
    padding-left: var(--space-8);
    position: relative;
    margin-bottom: var(--space-4);
}

.article-content ol > li::before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-accent-muted);
    border: 1px solid var(--color-border-accent);
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.article-content ul {
    padding-left: var(--space-6);
}

.article-content ul > li {
    margin-bottom: var(--space-2);
    position: relative;
}

.article-content ul > li::marker {
    color: var(--color-accent);
}