/* ==================================================================
   Help Center: knowledge-base pages, the topbar Help icon, and the
   context-sensitive drawer it opens. Loaded globally (pwa_head.php)
   since the Help icon appears in every authenticated page's header.
   Dark/light mode here is independent of the rest of the admin shell —
   scoped to [data-bs-theme] wherever it is set (Help Center pages and
   the drawer only), per the documentation standard's dark-mode requirement.
   ================================================================== */

.help-center {
    max-width: 900px;
    margin: 0 auto;
}

.help-category-card {
    transition: transform .12s ease, box-shadow .12s ease;
}

.help-category-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1) !important;
}

.help-breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 1rem;
}

.help-article-meta {
    margin-bottom: .75rem;
}

.help-section {
    margin: 1.75rem 0;
}

.help-prose :is(p, ul, ol) {
    margin-bottom: .75rem;
}

.help-prose ul,
.help-prose ol {
    padding-left: 1.25rem;
}

.help-callout {
    border-left: 4px solid var(--bs-warning);
    background: rgba(var(--bs-warning-rgb), .08);
    padding: .75rem 1rem;
    border-radius: 0 .375rem .375rem 0;
}

.help-callout-warning {
    border-left-color: var(--bs-danger);
    background: rgba(var(--bs-danger-rgb), .08);
}

.help-screenshot img {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08);
}

/* --- Context-sensitive Help drawer -------------------------------- */

#help-context-drawer {
    width: min(420px, 92vw);
}

/* 'modal' presentation mode (Modules\Help\Config\Help::$iconPresentation) reuses
   the same offcanvas element, just centered and boxed like a dialog. */
#help-context-drawer.help-modal-mode {
    top: 50%;
    bottom: auto;
    right: 50%;
    transform: translate(50%, -50%) !important;
    width: min(560px, 92vw);
    max-height: 80vh;
    border-radius: .5rem;
    border: 1px solid var(--bs-border-color);
}

.help-context-drawer .help-prose {
    max-height: 40vh;
    overflow-y: auto;
}

/* --- Dark mode (Help Center pages + drawer only) -------------------- */

[data-bs-theme="dark"] .help-callout {
    background: rgba(var(--bs-warning-rgb), .15);
}

[data-bs-theme="dark"] .help-callout-warning {
    background: rgba(var(--bs-danger-rgb), .15);
}

[data-bs-theme="dark"] .help-screenshot img {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .4);
}

/* --- Print: expand every FAQ/accordion panel so nothing is hidden --- */
@media print {
    .accordion-collapse {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
    }

    .accordion-button::after {
        display: none;
    }

    .help-center {
        max-width: 100%;
    }
}