/* C Operators page — typography, colors, and section polish */

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

.operators-page {
    --op-font-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
    --op-font-mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
    --op-text: #1a2332;
    --op-text-muted: #5c6b7a;
    --op-surface: #ffffff;
    --op-surface-alt: #f4f8fc;
    --op-border: #d8e3ef;
    --op-shadow: 0 4px 24px rgba(3, 57, 108, 0.08);
    --op-shadow-sm: 0 2px 10px rgba(3, 57, 108, 0.06);
    --op-radius: 12px;
    --op-radius-sm: 8px;
}

body.operators-page {
    font-family: var(--op-font-sans);
    color: var(--op-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.operators-page .main-content {
    background: linear-gradient(180deg, #fafcfe 0%, #ffffff 120px);
}

.operators-page .content-header {
    background: linear-gradient(135deg, rgba(3, 90, 166, 0.06) 0%, rgba(225, 245, 254, 0.5) 100%);
    border-radius: var(--op-radius);
    padding: 1.75rem 2rem;
    border-bottom: none;
    box-shadow: var(--op-shadow-sm);
    border: 1px solid var(--op-border);
}

.operators-page .content-header h1 {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--c-dark);
}

.operators-page .content-header .lead {
    color: var(--op-text-muted);
    font-size: 1.1rem;
    max-width: 52rem;
}

.operators-page .content-header .row > [class*="col-"] {
    background: var(--op-surface);
    border-radius: var(--op-radius-sm);
    padding: 1rem;
    border: 1px solid var(--op-border);
    box-shadow: var(--op-shadow-sm);
    height: 100%;
}

.operators-page .content-section {
    background: var(--op-surface);
    border: 1px solid var(--op-border);
    border-left-width: 5px;
    box-shadow: var(--op-shadow-sm);
    padding: 1.75rem 2rem;
}

.operators-page .content-section h2 {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.operators-page .content-section h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--c-secondary);
    margin-top: 1.5rem;
}

.operators-page .content-section h4 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--c-dark);
}

.operators-page .content-section h5 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--op-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.operators-page p,
.operators-page li {
    color: var(--op-text);
}

.operators-page .text-muted {
    color: var(--op-text-muted) !important;
}

/* Inline code */
.operators-page code {
    font-family: var(--op-font-mono);
    font-size: 0.88em;
    font-weight: 500;
    color: #9d174d;
    background: rgba(232, 62, 140, 0.08);
    padding: 0.15em 0.45em;
    border-radius: 4px;
    border: 1px solid rgba(232, 62, 140, 0.15);
}

.operators-page .highlight-box code,
.operators-page .code-header code,
.operators-page pre code {
    color: inherit;
    background: transparent;
    border: none;
    padding: 0;
}

.operators-page pre,
.operators-page .operator-example,
.operators-page .complement-steps {
    font-family: var(--op-font-mono);
}

/* Category heading accents (tricky points, etc.) */
.operators-page .text-operator-arithmetic {
    color: var(--c-arithmetic);
    border-left: 4px solid var(--c-arithmetic);
    padding-left: 0.75rem;
    margin-top: 1.25rem !important;
}

.operators-page .text-operator-relational {
    color: var(--c-relational);
    border-left: 4px solid var(--c-relational);
    padding-left: 0.75rem;
    margin-top: 1.25rem !important;
}

.operators-page .text-operator-logical {
    color: var(--c-logical);
    border-left: 4px solid var(--c-logical);
    padding-left: 0.75rem;
    margin-top: 1.25rem !important;
}

.operators-page .text-operator-bitwise {
    color: var(--c-bitwise);
    border-left: 4px solid var(--c-bitwise);
    padding-left: 0.75rem;
    margin-top: 1.25rem !important;
}

.operators-page .text-operator-assignment {
    color: var(--c-assignment);
    border-left: 4px solid var(--c-assignment);
    padding-left: 0.75rem;
    margin-top: 1.25rem !important;
}

/* Tables */
.operators-page .operators-table {
    border: 1px solid var(--op-border);
    box-shadow: var(--op-shadow-sm);
}

.operators-page .operators-table th {
    font-family: var(--op-font-sans);
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.operators-page .operators-table td code {
    font-size: 0.85em;
    color: var(--c-bitwise);
    background: rgba(111, 66, 193, 0.08);
    border-color: rgba(111, 66, 193, 0.2);
}

.operators-page .operators-table tbody tr {
    transition: background-color 0.2s ease;
}

.operators-page .precedence-table th {
    background: linear-gradient(135deg, #e8f0f8 0%, #dce8f4 100%);
    color: var(--c-dark);
    font-family: var(--op-font-sans);
}

.operators-page .precedence-table tr:nth-child(even) {
    background-color: #f8fafc;
}

/* Bitwise / complement blocks */
.operators-page #bitwise-signed.bitwise-section {
    border-left-color: var(--c-bitwise);
    background: linear-gradient(165deg, #faf8ff 0%, #f4f8fc 45%, #ffffff 100%);
}

.operators-page #bitwise-signed.bitwise-section > h2 {
    color: var(--c-bitwise);
    border-bottom-color: rgba(111, 66, 193, 0.25);
}

.operators-page #bitwise-signed .complement-steps {
    background: linear-gradient(145deg, #1e2433 0%, #2a3142 100%);
    color: #e8edf5;
    border-left: 4px solid var(--c-bitwise);
    border-radius: var(--op-radius-sm);
    padding: 1.15rem 1.35rem;
    font-size: 0.84rem;
    line-height: 1.65;
    box-shadow: var(--op-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.operators-page #bitwise-signed hr.my-5 {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(111, 66, 193, 0.35), transparent);
    opacity: 1;
    margin: 2.5rem 0;
}

.operators-page #bitwise-theory {
    color: var(--c-bitwise);
}

/* Callout boxes */
.operators-page .tip-box {
    background: linear-gradient(135deg, #fffbeb 0%, #fff8e6 100%);
    border: 1px solid #f0d78c;
    border-left: 5px solid #e6a817;
    border-radius: var(--op-radius-sm);
    box-shadow: var(--op-shadow-sm);
}

.operators-page .best-practice-box {
    background: linear-gradient(135deg, #e8f7fa 0%, #dff3f8 100%);
    border: 1px solid #a8d4e6;
    border-left: 5px solid var(--c-primary);
    border-radius: var(--op-radius-sm);
    box-shadow: var(--op-shadow-sm);
}

.operators-page .highlight-box {
    box-shadow: 0 8px 28px rgba(3, 90, 166, 0.2);
    border-radius: var(--op-radius);
}

.operators-page .highlight-box h4 {
    font-weight: 700;
}

/* Example cards & code */
.operators-page .example-box {
    background: var(--op-surface);
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius-sm);
    padding: 1.25rem;
    box-shadow: var(--op-shadow-sm);
}

.operators-page .example-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-secondary);
}

.operators-page .code-container {
    background: #1a1f2e;
    border: 1px solid #2d3548;
    border-radius: var(--op-radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.operators-page .copy-btn {
    background: var(--c-primary);
    font-family: var(--op-font-sans);
    font-weight: 500;
    font-size: 0.8rem;
}

.operators-page .copy-btn:hover {
    background: var(--c-secondary);
}

.operators-page .operator-example {
    background: #f0f4f9;
    border: 1px solid var(--op-border);
    color: #2d3748;
    padding: 0.35rem 0.65rem;
}

.operators-page .quick-ref-card {
    border-radius: var(--op-radius-sm);
    border-color: var(--op-border);
}

.operators-page .quick-ref-card ul {
    margin-bottom: 0;
    padding-left: 1.2rem;
}

.operators-page .quick-ref-card li {
    margin-bottom: 0.35rem;
}

/* Classification table section */
.operators-page .operator-types-section .table-dark {
    --bs-table-bg: linear-gradient(135deg, var(--c-primary), var(--c-secondary));
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-secondary) 100%) !important;
}

.operators-page .operator-types-section .table {
    border-radius: var(--op-radius-sm);
    overflow: hidden;
    font-family: var(--op-font-sans);
}

.operators-page .operator-types-section .table td:first-child {
    font-weight: 600;
    color: var(--c-dark);
}

/* Tricky points */
.operators-page #tricky-points {
    border-left-color: #e6a817;
    background: linear-gradient(165deg, #fffdf8 0%, #f8fafc 100%);
}

.operators-page #tricky-points h2 {
    color: #b8860b;
}

.operators-page #tricky-points .tip-box {
    margin-bottom: 0.75rem;
}

/* Topic badge */
.operators-page .topic-badge {
    font-family: var(--op-font-sans);
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* Operator span colors in prose */
.operators-page .operator-arithmetic { color: var(--c-arithmetic); font-weight: 600; }
.operators-page .operator-relational { color: var(--c-relational); font-weight: 600; }
.operators-page .operator-logical { color: var(--c-logical); font-weight: 600; }
.operators-page .operator-bitwise { color: var(--c-bitwise); font-weight: 600; }
.operators-page .operator-assignment { color: var(--c-assignment); font-weight: 600; }

@media (max-width: 768px) {
    .operators-page .content-section,
    .operators-page .content-header {
        padding: 1.25rem;
    }

    .operators-page .content-section h2 {
        font-size: 1.25rem;
    }

    .operators-page #bitwise-signed .complement-steps {
        font-size: 0.78rem;
        padding: 0.9rem 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .operators-page .fade-in {
        animation: none;
    }
}