/* ══════════════════════════════════════════════════════════════
   globalFonts.css
   Shared styles for study guide pages and question bank pages.
   Relies on tokens defined in contentStyles.css :root.
   ══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   STUDY GUIDE — content classes
   Replaces inline style="color: #00ffcc" etc. with named classes.
   ────────────────────────────────────────────────────────────── */

/* Example heading — "Example 1: Cement Bag Weight" */
.sg-example {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 2rem 0 0.75rem 0;
    letter-spacing: -0.005em;
    text-transform: none;
}

/* Highlighted formula / result lines */
.sg-formula {
    color: var(--text-primary);
    font-weight: 500;
}

/* Step headings — "Step 1: Find bounds..." */
.sg-step {
    color: var(--accent);
    font-weight: 600;
    margin-top: 1rem;
}

/* Final answer lines */
.sg-answer {
    color: var(--text-primary);
    font-weight: 600;
    margin-top: 0.5rem;
}

/* Muted notes — "NB: ..." paragraphs */
.sg-note {
    color: var(--text-muted);
    font-style: italic;
}

/* ──────────────────────────────────────────────────────────────
   QUESTION BANK — paper & question layout
   (Consolidated from question-bank.css)
   ────────────────────────────────────────────────────────────── */

.question-paper {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 0;
}

.paper-section {
    margin-bottom: 3rem;
}

.paper-heading {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border);
    padding-bottom: 0.4rem;
    margin-bottom: 1.5rem;
}

.question-block {
    margin-bottom: 2rem;
    padding-left: 0.5rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 1.2rem;
}

.question-block.incomplete {
    border-left: 4px solid #ff4444;
    padding-left: 1rem;
}

.question-number {
    font-weight: 600;
    color: var(--accent);
    font-size: 1rem;
}

.question-text {
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-body);
    margin: 0.2rem 0 0.5rem 0;
}

.question-text .frac {
    font-size: 0.85rem;
}

/* Answer space: right-aligned with marks inside */
.answer-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.3rem;
    flex-wrap: wrap;
}

.answer-space {
    text-align: right;
    min-height: 28px;
    padding: 0.2rem 0.3rem;
    color: var(--text-muted);
    font-family: 'Times New Roman', Times, serif;
    font-size: 0.9rem;
    width: 100%;
    max-width: 600px;
}

.answer-space .answer-part {
    display: inline-block;
    margin-left: 0.5rem;
}

.answer-space .answer-content {
    color: var(--text-secondary);
    font-style: italic;
}

.answer-space .marks {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
    font-family: var(--font);
    margin-left: 0.3rem;
}

.answer-space .unit {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-family: var(--font);
}

.incomplete-note {
    color: #ff4444;
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 0.3rem;
    font-family: var(--font);
}

/* Paper reference: right-aligned, small, no background */
.paper-ref-row {
    text-align: right;
    font-size: 0.65rem;
    color: var(--text-muted);
    font-family: var(--font);
    margin-top: 0.1rem;
    padding-right: 0.3rem;
    letter-spacing: 0.3px;
}

.question-image {
    margin: 0.5rem 0;
    border-radius: 4px;
    max-width: 100%;
}

.question-image img {
    max-width: 100%;
    height: auto;
    display: block;
    max-height: 200px;
}

.topic-section {
    scroll-margin-top: 80px;
}

.anotation-text {
    font-size: 20px !important;
}

/* ──────────────────────────────────────────────────────────────
   SIDEBAR LINK OVERRIDES
   (matches what question-bank.css was doing)
   ────────────────────────────────────────────────────────────── */

.sidebar-nav a {
    display: block;
    padding: 5px 16px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-decoration: none;
    line-height: 1.4;
    border-left: 2px solid transparent;
    transition: all 0.15s;
}

.sidebar-nav a:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
    text-decoration: none;
}

.sidebar-nav a.active-link {
    color: #75b5fd;
    background: var(--accent-bg);
    border-left-color: var(--accent);
}

/* ──────────────────────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .answer-space .answer-part {
        display: block;
        margin-left: 0;
        margin-top: 0.2rem;
    }

    .answer-space {
        max-width: 100%;
        font-size: 0.8rem;
        padding: 0.2rem 0.1rem;
        min-height: 22px;
    }

    .answer-space .marks {
        font-size: 0.7rem;
        margin-left: 0.3rem;
    }

    .question-text {
        font-size: 0.95rem;
    }

    .question-image {
        margin-left: 0;
    }
}

@media (max-width: 640px) {
    .question-image {
        margin-left: 0;
    }
    .question-text {
        font-size: 0.95rem;
    }
    .answer-space {
        font-size: 0.8rem;
        min-height: 22px;
        max-width: 100%;
    }

    .main-content h1 {
        font-size: 1.6rem;
    }

}

/* ──────────────────────────────────────────────────────────────
   BODY TEXT — paragraphs and lists inside study guides
   Matches the .tracker-header p treatment used on landing pages:
   smaller size, body color, comfortable line-height.
   ────────────────────────────────────────────────────────────── */

.main-content p,
.main-content ul,
.main-content ol {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-body);
    margin-bottom: 1rem;
}

.main-content ul,
.main-content ol {
    padding-left: 1.5rem;
}

.main-content li {
    margin-bottom: 0.4rem;
}

.main-content p strong,
.main-content li strong {
    color: var(--text-primary);
    font-weight: 600;
}

.main-content p em,
.main-content li em {
    font-style: italic;
}

@media (max-width: 640px) {
    .main-content p,
    .main-content ul,
    .main-content ol {
        font-size: 0.95rem;
    }
    .main-content ul,
    .main-content ol {
        padding-left: 1.25rem;
    }
}

.or-divider {
    text-align: center;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin: 2rem 0;
    text-transform: uppercase;
}

/* ──────────────────────────────────────────────────────────────
   TOPIC CARDS GRID — Question Bank topic listing
   Uses the same card chrome as tracker/past-papers.
   ────────────────────────────────────────────────────────────── */

.topic-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    margin: 1.5rem 0 2rem 0;
}

.topic-card {
    display: block;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.topic-card:hover {
    border-color: var(--accent);
    background: var(--bg-secondary);
}

.topic-card-name {
    display: block;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-body);
    word-break: break-word;
}

.topic-card:hover .topic-card-name {
    color: var(--text-primary);
}

/* ══════════════════════════════════════════════════════════════
   TABLES — Study guide + summary tables
   - No outer border, only cell borders
   - Borders collapse cleanly
   - Responsive: horizontal scroll on small screens
   ══════════════════════════════════════════════════════════════ */

.main-content table,
.summary-table table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 1.5rem 0;
    font-size: 0.9rem;
    font-family: var(--font);
    color: var(--text-body);
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Header cells */
.main-content th,
.summary-table th {
    text-align: left;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border);
    white-space: nowrap;
    vertical-align: top;
}

/* Body cells */
.main-content td,
.summary-table td {
    padding: 0.7rem 0.9rem;
    color: var(--text-body);
    border: 1px solid var(--border);
    vertical-align: top;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Row hover */
.main-content tbody tr:hover,
.summary-table tbody tr:hover {
    background: var(--bg-secondary);
}

/* Inline code, links, strong inside cells should still inherit sensible colors */
.main-content td strong,
.summary-table td strong {
    color: var(--text-primary);
    font-weight: 600;
}

.main-content td a,
.summary-table td a {
    color: #75b5fd;
    text-decoration: none;
}

.main-content td a:hover,
.summary-table td a:hover {
    text-decoration: underline;
}

/* ── Responsive: shrink padding + font on small screens ── */
@media (max-width: 640px) {
    .main-content table,
    .summary-table table {
        font-size: 0.8rem;
    }
    .main-content th,
    .summary-table th {
        font-size: 0.75rem;
        padding: 0.6rem 0.7rem;
    }
    .main-content td,
    .summary-table td {
        font-size: 0.8rem;
        padding: 0.55rem 0.7rem;
    }
}