/* Help Center styles.
 * Reuses the global theme custom properties defined in styles.css (:root)
 * so the help section matches the rest of the app and tenant themes.
 */

/* ---- Topic navigation (left column) ---------------------------------- */
.help-topics {
    position: sticky;
    top: 1rem;
}

.help-topics-heading {
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.help-topic-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.375rem;
    color: var(--theme-text);
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.25;
}

.help-topic-link:hover,
.help-topic-link:focus {
    background-color: rgba(var(--theme-accent-rgb), 0.12);
    color: var(--theme-text);
}

.help-topic-link.is-active {
    background-color: rgba(var(--theme-accent-rgb), 0.2);
    color: var(--theme-accent);
    font-weight: 600;
}

.help-topic-link i {
    flex: 0 0 auto;
    color: var(--theme-accent);
}

/* ---- Index cards ----------------------------------------------------- */
.help-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.help-card-link .card {
    transition: transform 0.12s ease, border-color 0.12s ease;
}

.help-card-link:hover .card,
.help-card-link:focus .card {
    transform: translateY(-2px);
    border-color: var(--theme-accent);
}

.help-card-icon {
    font-size: 1.6rem;
    color: var(--theme-accent);
    line-height: 1;
}

/* ---- Breadcrumb on dark theme --------------------------------------- */
.help-breadcrumb {
    --bs-breadcrumb-divider-color: var(--theme-muted);
    font-size: 0.85rem;
}

.help-breadcrumb .breadcrumb-item.active {
    color: var(--theme-muted);
}

/* ---- Article body ---------------------------------------------------- */
.help-article h2 {
    margin-top: 2rem;
    font-size: 1.35rem;
    color: var(--theme-accent);
}

.help-article h3 {
    margin-top: 1.5rem;
    font-size: 1.1rem;
}

.help-article ul,
.help-article ol {
    margin-bottom: 1rem;
}

.help-article li {
    margin-bottom: 0.35rem;
}

/* Numbered step list with circular markers. */
.help-steps {
    list-style: none;
    counter-reset: help-step;
    padding-left: 0;
}

.help-steps > li {
    position: relative;
    padding-left: 3rem;
    margin-bottom: 1.25rem;
    min-height: 2rem;
}

.help-steps > li::before {
    counter-increment: help-step;
    content: counter(help-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--theme-secondary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.help-steps .help-step-title {
    display: block;
    font-weight: 600;
    margin-bottom: 0.15rem;
}

/* Horizontal flow strip (e.g. import -> preview -> import). */
.help-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
    list-style: none;
    padding-left: 0;
    margin: 1.25rem 0;
}

.help-flow > li {
    flex: 1 1 8rem;
    text-align: center;
    background-color: var(--theme-darker);
    border: 1px solid var(--theme-secondary);
    border-radius: 0.5rem;
    padding: 0.75rem 0.5rem;
    position: relative;
    margin-bottom: 0;
}

.help-flow > li i {
    display: block;
    font-size: 1.5rem;
    color: var(--theme-accent);
    margin-bottom: 0.35rem;
}

.help-flow > li .help-flow-label {
    font-size: 0.85rem;
    font-weight: 600;
}

/* Callout boxes for tips, notes and warnings. */
.help-callout {
    border-left: 4px solid var(--theme-secondary);
    background-color: var(--theme-darker);
    border-radius: 0.375rem;
    padding: 0.85rem 1rem;
    margin: 1.25rem 0;
}

.help-callout .help-callout-title {
    display: block;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.help-callout-tip {
    border-left-color: var(--theme-success);
}

.help-callout-tip .help-callout-title {
    color: var(--theme-success);
}

.help-callout-note {
    border-left-color: var(--theme-info);
}

.help-callout-note .help-callout-title {
    color: var(--theme-info);
}

.help-callout-premium {
    border-left-color: var(--theme-warning);
}

.help-callout-premium .help-callout-title {
    color: var(--theme-warning);
}

.help-callout-warning {
    border-left-color: var(--theme-warning);
}

.help-callout-warning .help-callout-title {
    color: var(--theme-warning);
}

/* Inline diagram for sizing / crop guidance articles (SPO-469). */
.help-diagram {
    margin: 1.5rem 0;
    padding: 0.75rem 0.5rem 0.25rem;
    background-color: var(--theme-darker);
    border-radius: 0.5rem;
    border: 1px solid rgba(var(--theme-secondary-rgb), 0.45);
}

.help-diagram svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: 40rem;
    margin: 0 auto;
}

.help-diagram figcaption {
    margin: 0.75rem 0.75rem 0.5rem;
    font-size: 0.9rem;
    color: var(--theme-text);
    opacity: 0.85;
}

.help-diagram-frame {
    fill: rgba(var(--theme-secondary-rgb), 0.25);
    stroke: var(--theme-accent);
    stroke-width: 2;
}

.help-diagram-mobile-hint {
    fill: none;
    stroke: var(--theme-text);
    stroke-width: 1.5;
    stroke-dasharray: 6 4;
    opacity: 0.45;
}

.help-diagram-safe {
    fill: rgba(var(--theme-success-rgb), 0.22);
    stroke: var(--theme-success);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
}

.help-diagram-occluded {
    fill: rgba(var(--theme-warning-rgb), 0.85);
    stroke: var(--theme-background);
    stroke-width: 1;
}

.help-diagram-caption,
.help-diagram-label,
.help-diagram-label-sub,
.help-diagram-callout,
.help-diagram-callout-sub,
.help-diagram-badge-day,
.help-diagram-badge-month {
    fill: var(--theme-text);
    font-family: inherit;
}

.help-diagram-caption {
    font-size: 11px;
    opacity: 0.8;
}

.help-diagram-label {
    font-size: 14px;
    font-weight: 700;
}

.help-diagram-label-sub {
    font-size: 11px;
    opacity: 0.85;
}

.help-diagram-callout {
    font-size: 12px;
    font-weight: 700;
}

.help-diagram-callout-sub {
    font-size: 11px;
    opacity: 0.85;
}

.help-diagram-badge-day {
    font-size: 18px;
    font-weight: 700;
}

.help-diagram-badge-month {
    font-size: 11px;
}

/* Inline reference to a UI label/button users will look for. */
.help-ui {
    background-color: rgba(var(--theme-secondary-rgb), 0.35);
    border-radius: 0.25rem;
    padding: 0.05rem 0.4rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Next/previous article footer links. */
.help-article-footer {
    border-top: 1px solid var(--theme-secondary);
    margin-top: 2.5rem;
    padding-top: 1.25rem;
}