/* Copyright (c) Zhmara X. All rights reserved.
   Proprietary and confidential. Unauthorized copying of this file, via any medium, is prohibited. See LICENSE.txt. */

/* Public help center (/public/help) of the Training Center. Everything is scoped under .zx-help and uses logical properties
   (inline-start/end) so the same rules work for English (ltr) and Kurdish/Arabic (rtl). */

.zx-help {
    --zx-primary: #d97800;      /* Zhmara X orange (darker shade for readable links) */
    --zx-primary-soft: rgba(246, 141, 11, 0.12);
    --zx-text: #1F2937;
    --zx-muted: #6B7280;
    --zx-line: #E5E7EB;
    --zx-bg: #F8F9FB;
    --zx-tip: #ECFDF5;
    --zx-tip-line: #10B981;
    --zx-note: #EFF6FF;
    --zx-note-line: #3B82F6;
    --zx-warn: #FFFBEB;
    --zx-warn-line: #F59E0B;
    --zx-top: 64px;
    --zx-side: 290px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--zx-bg);
    color: var(--zx-text);
    font-size: 15px;
    line-height: 1.65;
}

.zx-help a { color: var(--zx-primary); text-decoration: none; }
.zx-help a:hover { text-decoration: underline; }

/* Top bar */
.zx-help-top {
    position: sticky;
    top: 0;
    z-index: 30;
    height: var(--zx-top);
    display: flex;
    align-items: center;
    gap: 16px;
    padding-inline: 20px;
    background: #fff;
    border-block-end: 1px solid var(--zx-line);
}

.zx-help-brand { display: flex; align-items: center; gap: 10px; color: var(--zx-text) !important; font-weight: 600; white-space: nowrap; }
.zx-help-brand:hover { text-decoration: none !important; }
.zx-help-brand img { height: 34px; width: auto; }
.zx-help-brand span { padding-inline-start: 10px; border-inline-start: 1px solid var(--zx-line); }

.zx-help-search {
    position: relative;
    flex: 1;
    max-width: 460px;
    margin-inline-start: auto;
}

.zx-help-search i {
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--zx-muted);
}

.zx-help-search input {
    width: 100%;
    height: 40px;
    padding-inline: 36px 12px;
    border: 1px solid var(--zx-line);
    border-radius: 8px;
    background: var(--zx-bg);
    outline: none;
}

.zx-help-search input:focus { border-color: var(--zx-primary); background: #fff; }

.zx-help-langs { display: flex; gap: 4px; }
.zx-help-langs a { padding: 4px 8px; border-radius: 6px; color: var(--zx-muted); font-size: 13px; }
.zx-help-langs a.active { background: var(--zx-primary-soft); color: var(--zx-primary); font-weight: 600; }

.zx-help-app {
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--zx-primary);
    color: #fff !important;
    font-weight: 600;
    white-space: nowrap;
}

.zx-help-app:hover { text-decoration: none !important; opacity: .92; }

.zx-help-burger { display: none; margin: 0; font-size: 22px; cursor: pointer; color: var(--zx-text); }
.zx-help-menu-toggle { display: none; }

/* Body: sidebar + content */
.zx-help-body { flex: 1; display: flex; align-items: flex-start; }

.zx-help-side {
    position: sticky;
    top: var(--zx-top);
    flex: 0 0 var(--zx-side);
    width: var(--zx-side);
    height: calc(100vh - var(--zx-top));
    overflow-y: auto;
    padding: 16px 12px 40px;
    background: #fff;
    border-inline-end: 1px solid var(--zx-line);
    font-size: 14px;
}

.zx-help-side-home { display: block; padding: 6px 10px; border-radius: 6px; color: var(--zx-text) !important; font-weight: 600; margin-block-end: 6px; }
.zx-help-side details { margin-block-end: 2px; }
.zx-help-side summary {
    list-style: none;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: 600;
    color: var(--zx-text);
}

.zx-help-side summary::-webkit-details-marker { display: none; }
.zx-help-side summary::after { content: "+"; float: inline-end; color: var(--zx-muted); }
.zx-help-side details[open] summary::after { content: "\2212"; }
.zx-help-side summary:hover, .zx-help-side-home:hover { background: var(--zx-bg); text-decoration: none !important; }
.zx-help-side summary i, .zx-help-side-home i { width: 20px; color: var(--zx-primary); }
.zx-help-side ul { list-style: none; margin: 2px 0 8px; padding: 0; }
.zx-help-side li a {
    display: block;
    padding: 5px 10px 5px 0;
    padding-inline-start: 38px;
    border-radius: 6px;
    color: var(--zx-muted) !important;
}

.zx-help-side li a:hover { background: var(--zx-bg); color: var(--zx-text) !important; text-decoration: none !important; }
.zx-help-side a.active { background: var(--zx-primary-soft) !important; color: var(--zx-primary) !important; font-weight: 600; }

.zx-help-scrim { display: none; }

.zx-help-side-langs { display: none; gap: 4px; padding: 0 6px 10px; margin-block-end: 8px; border-block-end: 1px solid var(--zx-line); }
.zx-help-side-langs a { padding: 4px 8px; border-radius: 6px; color: var(--zx-muted) !important; font-size: 13px; }
.zx-help-side-langs a.active { background: var(--zx-primary-soft); color: var(--zx-primary) !important; font-weight: 600; }

.zx-help-main { flex: 1; min-width: 0; padding: 32px 40px 60px; }

/* Home */
.zx-help-hero {
    max-width: 1100px;
    margin: 0 auto 32px;
    padding: 40px 32px;
    border-radius: 16px;
    background: rgb(13, 21, 35); /* Zhmara X navy, like the Home hero */
    color: #fff;
    text-align: center;
}

.zx-help-hero h1 { color: #fff; font-size: 32px; font-weight: 700; margin-block-end: 8px; }
.zx-help-hero p { color: rgba(255, 255, 255, .9); max-width: 640px; margin: 0 auto 20px; }
.zx-help-hero-search { display: flex; gap: 8px; max-width: 560px; margin: 0 auto; }
.zx-help-hero-search input { flex: 1; height: 48px; padding-inline: 16px; border: 0; border-radius: 10px; outline: none; }
.zx-help-hero-search button { height: 48px; padding-inline: 22px; border: 0; border-radius: 10px; background: #f68d0b; color: #fff; font-weight: 600; } /* Zhmara X orange, like the Home Sign-Up button */
.zx-help-start { display: inline-block; margin-block-start: 18px; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff !important; }

.zx-help-cards {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.zx-help-card { padding: 20px 22px; border: 1px solid var(--zx-line); border-radius: 12px; background: #fff; }
.zx-help-card h2 { font-size: 17px; font-weight: 700; margin-block-end: 10px; }
.zx-help-card h2 i { color: var(--zx-primary); margin-inline-end: 6px; }
.zx-help-card ul { margin: 0; padding-inline-start: 18px; }
.zx-help-card li { margin-block: 3px; }

/* Article */
.zx-help-page { display: flex; gap: 40px; max-width: 1160px; margin: 0 auto; align-items: flex-start; }
.zx-help-article { flex: 1; min-width: 0; max-width: 820px; }
.zx-help-crumbs { font-size: 13px; color: var(--zx-muted); margin-block-end: 6px; }
.zx-help-crumbs span { margin-inline: 4px; }
.zx-help-article h1 { font-size: 30px; font-weight: 700; margin-block-end: 18px; }

.zx-help-untranslated {
    margin-block-end: 18px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--zx-warn);
    border-inline-start: 4px solid var(--zx-warn-line);
    font-size: 14px;
}

.zx-help-content h2 { font-size: 22px; font-weight: 700; margin: 34px 0 12px; padding-block-start: 8px; scroll-margin-top: calc(var(--zx-top) + 12px); }
.zx-help-content h3 { font-size: 17px; font-weight: 700; margin: 24px 0 8px; scroll-margin-top: calc(var(--zx-top) + 12px); }
.zx-help-content p, .zx-help-content ul, .zx-help-content ol { margin-block-end: 14px; }
.zx-help-content li { margin-block: 4px; }
.zx-help-content code { padding: 1px 6px; border-radius: 4px; background: #F3F4F6; color: #B4235A; font-size: 90%; }
.zx-help-content kbd { padding: 1px 6px; border: 1px solid var(--zx-line); border-radius: 4px; background: #fff; font-size: 85%; }
.zx-help-content blockquote { margin: 0 0 16px; padding: 10px 16px; border-inline-start: 4px solid var(--zx-line); color: var(--zx-muted); }

.zx-help-content table { width: 100%; margin-block-end: 18px; border-collapse: collapse; background: #fff; font-size: 14px; }
.zx-help-content th, .zx-help-content td { padding: 8px 12px; border: 1px solid var(--zx-line); vertical-align: top; text-align: start; }
.zx-help-content th { background: var(--zx-bg); font-weight: 600; }

/* ::: tip / note / warning blocks */
.zx-help-content .tip, .zx-help-content .note, .zx-help-content .warning {
    margin-block-end: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    border-inline-start: 4px solid;
}

.zx-help-content .tip { background: var(--zx-tip); border-color: var(--zx-tip-line); }
.zx-help-content .note { background: var(--zx-note); border-color: var(--zx-note-line); }
.zx-help-content .warning { background: var(--zx-warn); border-color: var(--zx-warn-line); }
.zx-help-content .tip > :last-child, .zx-help-content .note > :last-child, .zx-help-content .warning > :last-child { margin-block-end: 0; }

.zx-help-pager { display: flex; gap: 16px; margin-block-start: 40px; padding-block-start: 20px; border-block-start: 1px solid var(--zx-line); }
.zx-help-pager a { flex: 1; padding: 12px 16px; border: 1px solid var(--zx-line); border-radius: 10px; background: #fff; }
.zx-help-pager a:hover { border-color: var(--zx-primary); text-decoration: none; }
.zx-help-pager small { display: block; color: var(--zx-muted); }
.zx-help-pager .next { text-align: end; margin-inline-start: auto; }

.zx-help-toc { position: sticky; top: calc(var(--zx-top) + 24px); flex: 0 0 220px; font-size: 13px; }
.zx-help-toc h2 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--zx-muted); margin-block-end: 8px; }
.zx-help-toc ul { list-style: none; margin: 0; padding: 0; border-inline-start: 2px solid var(--zx-line); }
.zx-help-toc li a { display: block; padding: 3px 0; padding-inline-start: 12px; color: var(--zx-muted); }
.zx-help-toc li a:hover { color: var(--zx-primary); }

/* Search and empty pages */
.zx-help-results { max-width: 820px; margin: 0 auto; }
.zx-help-results h1, .zx-help-empty h1 { font-size: 26px; font-weight: 700; }
.zx-help-results ol { list-style: none; padding: 0; }
.zx-help-results li { padding: 14px 0; border-block-end: 1px solid var(--zx-line); }
.zx-help-results li > a { font-size: 17px; font-weight: 600; }
.zx-help-results li small { margin-inline-start: 8px; color: var(--zx-muted); }
.zx-help-results li p { margin: 4px 0 0; color: var(--zx-muted); font-size: 14px; }
.zx-help-muted { color: var(--zx-muted); }
.zx-help-empty { max-width: 600px; margin: 40px auto; text-align: center; }
.zx-help-btn { display: inline-block; padding: 8px 18px; border-radius: 8px; background: var(--zx-primary); color: #fff !important; }

.zx-help-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    padding: 18px;
    border-block-start: 1px solid var(--zx-line);
    background: #fff;
    color: var(--zx-muted);
    font-size: 13px;
}

/* Narrow screens: the sidebar slides in from the start side, the page outline is hidden. */
@media (max-width: 1200px) {
    .zx-help-toc { display: none; }
}

@media (max-width: 992px) {
    .zx-help-burger { display: block; }
    .zx-help-langs, .zx-help-brand span { display: none; }
    .zx-help-side {
        position: fixed;
        top: var(--zx-top);
        inset-inline-start: 0;
        z-index: 25;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    }
    [dir="rtl"] .zx-help-side { transform: translateX(100%); }
    .zx-help-menu-toggle:checked ~ .zx-help-body .zx-help-side { transform: none; }
    .zx-help-menu-toggle:checked ~ .zx-help-body .zx-help-scrim {
        display: block;
        position: fixed;
        inset: var(--zx-top) 0 0 0;
        z-index: 20;
        margin: 0;
        background: rgba(0, 0, 0, .25);
    }
    .zx-help-side-langs { display: flex; }
    .zx-help-main { padding: 20px 16px 40px; }
    .zx-help-hero { padding: 28px 18px; }
    .zx-help-hero h1 { font-size: 24px; }
}

@media (max-width: 576px) {
    .zx-help-top { gap: 10px; padding-inline: 12px; }
    .zx-help-app { display: none; }
    .zx-help-hero-search { flex-direction: column; }
    .zx-help-pager { flex-direction: column; }
}