/* =====================================================
HELP SYSTEM STYLES
All rules MUST be scoped to .help-content-area
===================================================== */

/* Screen Reader Only - for accessibility */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

.help-content-area {
    font-family: var(--font-body);
    color: var(--clr-text);
    background-color: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: 8px;
    padding: 16px;
    overflow-y: auto;
    line-height: 1.6;
}

/* Typography */
.help-content-area h1,
.help-content-area h2,
.help-content-area h3 {
    font-family: var(--font-primary);
    color: var(--clr-accent);
    margin-top: 0;
    margin-bottom: 16px;
}

.help-content-area h1 {
    font-size: 2em;
    border-bottom: 2px solid var(--clr-border-light);
    padding-bottom: 8px;
}

.help-content-area h2 {
    font-size: 1.5em;
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: 4px;
    margin-top: 24px;
}

.help-content-area p {
    margin-bottom: 16px;
}

/* Parchment Aesthetic (for stats.html and other lore) */
.help-content-area .theme-parchment {
    background-color: var(--clr-surface-light);
    border: 1px solid var(--clr-border-light);
    border-radius: 4px;
    padding: 24px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

.help-content-area .parchment-title {
    text-align: center;
    color: var(--clr-accent-bright);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.help-content-area .parchment-subtitle {
    text-align: center;
    color: var(--clr-text-dim);
    font-style: italic;
    margin-bottom: 32px;
}

.help-content-area .section-heading {
    color: var(--clr-gold);
}

.help-content-area .parchment-text {
    color: var(--clr-text-bright);
}

/* Stat Lists */
.help-content-area .stat-list {
list-style-type: none;
padding: 0;
margin: 0 0 24px 0;
}

.help-content-area .stat-list li {
background-color: var(--clr-surface-dark);
border-left: 4px solid var(--clr-accent-dim);
margin-bottom: 12px;
padding: 12px 16px;
border-radius: 0 4px 4px 0;
}

.help-content-area .stat-list strong {
color: var(--clr-info);
font-size: 1.1em;
}

/* Tables in Help Pages */
.help-content-area .stat-list.table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background-color: var(--clr-surface-dark);
border-radius: 4px;
overflow: hidden;
border: 1px solid var(--clr-border);
}

.help-content-area .stat-list.table thead {
background-color: var(--clr-surface-light);
}

.help-content-area .stat-list.table th,
.help-content-area .stat-list.table td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid var(--clr-border);
}

.help-content-area .stat-list.table th {
color: var(--clr-accent);
font-family: var(--font-primary);
font-weight: bold;
}

.help-content-area .stat-list.table th:not(:last-child),
.help-content-area .stat-list.table td:not(:last-child) {
border-right: 1px solid var(--clr-border);
}

.help-content-area .stat-list.table td {
color: var(--clr-text);
}

.help-content-area .stat-list.table tbody tr:last-child td {
border-bottom: none;
}

.help-content-area .stat-list.table tbody tr:hover {
background-color: var(--clr-surface);
}

/* Math / Formulas */
.help-content-area .math-line {
    display: inline-block;
    font-family: var(--font-mono);
    background-color: var(--clr-bg);
    color: var(--clr-success);
    padding: 4px 8px;
    margin-top: 8px;
    border-radius: 4px;
    border: 1px solid var(--clr-border-dim);
    font-size: 0.9em;
}

/* Flavor Text / Lore */
.help-content-area .flavor-text {
    background-color: rgba(0, 0, 0, 0.2);
    border-top: 1px dashed var(--clr-border-light);
    border-bottom: 1px dashed var(--clr-border-light);
    padding: 16px;
    font-family: var(--font-primary);
    font-style: italic;
    color: var(--clr-text-dim);
    text-align: center;
}

.help-content-area .highlight-text {
    color: var(--clr-danger-bright);
    font-weight: bold;
}

/* Internal Navigation (e.g. category tabs or links inside help) */
.help-content-area .help-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}

.help-content-area .help-nav-btn {
    background-color: var(--clr-surface-light);
    border: 1px solid var(--clr-border);
    color: var(--clr-text);
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-body);
    transition: all 0.2s ease;
}

.help-content-area .help-nav-btn:hover {
    background-color: var(--clr-surface-dark);
    border-color: var(--clr-accent);
    color: var(--clr-accent-bright);
}

.help-content-area .help-nav-btn.active {
    background-color: var(--clr-accent);
    color: var(--clr-bg);
    border-color: var(--clr-accent-bright);
}

/* Responsive Breakpoint */
@media (max-width: 768px) {
    .help-content-area .help-nav {
        flex-wrap: wrap;
    }
    
    .help-content-area .help-nav-btn {
        flex: 1 1 calc(50% - 8px);
        text-align: center;
    }
    
    .help-content-area .theme-parchment {
        padding: 16px;
    }
}