/* ParadeWorks Help Center (/help) — product how-to walkthroughs.
   Loaded on top of guides.css, so this file holds ONLY the additions unique to
   the Help Center: the featured-guides callout, per-card icons, and the
   three-column article layout (stage sidebar + article + on-this-page TOC).
   Everything else (fonts, tokens, nav, hero, cards, article prose, CTA, footer,
   reveals) is inherited from guides.css so /help reads as one site with
   /resources. */

/* Help articles are how-to references, not editorial features — drop the
   drop cap that guides.css puts on the opening paragraph. Scoped to .help-article
   so the /resources library keeps its drop cap. */
.help-article .guide-content > p:first-of-type::first-letter {
    font-family: inherit;
    float: none;
    font-size: inherit;
    line-height: inherit;
    padding: 0;
    color: inherit;
}

/* ---------- Section band headers (shared by both sections) ----------
   The page is two libraries: the product walkthroughs (primary) and the
   planning guides (secondary). Each opens with the same calm header so they
   read as clearly-labeled peers. Emerald is the ONLY accent below the hero;
   amber is reserved for the hero so the eye follows one path, not five. */

.help-band-head {
    max-width: 62ch;
    margin: 0 0 30px;
}

/* Calm the shared stage-number badges on the Help index: guides.css colors
   them amber, but the Help Center reserves amber for the hero and keeps the
   body to a single emerald accent. Scoped to .help-index so /resources keeps
   its amber numbers. */
.help-index .guides-section-num {
    color: var(--guide-muted);
}

.help-band-eyebrow {
    position: relative;
    display: inline-block;
    padding-left: 24px;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--guide-emerald);
}

.help-band-eyebrow::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 15px;
    height: 2px;
    border-radius: 2px;
    background: var(--guide-emerald);
    transform: translateY(-50%);
}

.help-band-head h2 {
    font-family: var(--guide-serif);
    font-weight: 400;
    font-size: clamp(1.7rem, 3.4vw, 2.3rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--guide-ink);
    margin: 0 0 10px;
}

.help-band-head p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--guide-muted);
}

/* ---------- Secondary: planning-guides section (calm, links to /resources) ----------
   Deliberately quiet: a hairline-divided list, not a colored card grid, so it
   reads as "further reading" rather than a second hero competing for attention. */

.help-guides {
    margin-top: 66px;
    padding-top: 46px;
    border-top: 1px solid var(--guide-border);
}

.help-guides-list {
    border-top: 1px solid var(--guide-border);
}

.help-guides-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 17px 6px;
    border-bottom: 1px solid var(--guide-border);
    text-decoration: none;
    transition: padding-left 0.16s var(--ease);
}

.help-guides-item:hover {
    padding-left: 12px;
}

.help-guides-item-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.help-guides-item-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--guide-ink);
    transition: color 0.16s var(--ease);
}

.help-guides-item:hover .help-guides-item-title {
    color: var(--guide-emerald);
}

.help-guides-item-meta {
    font-size: 13px;
    color: var(--guide-muted);
}

.help-guides-item-arrow {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--guide-border);
    transition: transform 0.16s var(--ease), color 0.16s var(--ease);
}

.help-guides-item:hover .help-guides-item-arrow {
    color: var(--guide-emerald);
    transform: translateX(3px);
}

.help-guides-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 24px;
    font-size: 14px;
    font-weight: 600;
    color: var(--guide-emerald);
    text-decoration: none;
}

.help-guides-more svg {
    width: 16px;
    height: 16px;
    transition: transform 0.16s var(--ease);
}

.help-guides-more:hover {
    color: var(--guide-emerald-dark);
}

.help-guides-more:hover svg {
    transform: translateX(2px);
}

/* ---------- Per-card icon on the tutorial cards ---------- */

.help-card {
    /* The base .guide-card has a top accent bar via ::before; keep it and just
       add the icon badge above the heading. */
    padding-top: 22px;
}

.help-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
    border-radius: 12px;
    /* Neutral by default so the card grid isn't a field of green; the emerald
       only appears on the hovered card (below), keeping accents intentional. */
    background: #f3f2ef;
    color: var(--guide-muted);
    transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.help-card-icon svg {
    width: 21px;
    height: 21px;
}

.guide-card:hover .help-card-icon {
    background: var(--guide-emerald);
    color: #fff;
}

/* ---------- Three-column article layout ---------- */

.help-doc {
    max-width: var(--guide-max);
    margin: 0 auto;
    padding: 0 24px;
}

.help-doc-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 200px;
    gap: 40px;
    align-items: start;
}

/* Article fills its grid column instead of the centered reading measure */
.help-article {
    max-width: none;
    margin: 0;
    padding: 40px 0 56px;
    min-width: 0;
}

/* Left rail: stage-grouped guide list */
.help-sidebar {
    display: none;
}

.help-sidebar-sticky {
    position: sticky;
    top: 28px;
    padding-top: 44px;
}

.help-sidebar-group + .help-sidebar-group {
    margin-top: 22px;
}

.help-sidebar-label {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--guide-muted);
}

.help-sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.help-sidebar li a {
    display: block;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--guide-body);
    text-decoration: none;
    transition: background 0.14s var(--ease), color 0.14s var(--ease);
}

.help-sidebar li a:hover {
    background: #f5f5f4;
    color: var(--guide-ink);
}

.help-sidebar li a.is-active {
    background: var(--guide-wash);
    color: var(--guide-emerald);
    font-weight: 600;
}

.help-sidebar-guides {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--guide-border);
}

.help-sidebar-guides a {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--guide-emerald);
    text-decoration: none;
}

.help-sidebar-guides a:hover {
    color: var(--guide-emerald-dark);
}

.help-sidebar-guides svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.help-sidebar-guides-arrow {
    transition: transform 0.16s var(--ease);
}

.help-sidebar-guides a:hover .help-sidebar-guides-arrow {
    transform: translateX(2px);
}

/* Right rail: on-this-page TOC */
.help-onthispage {
    display: none;
}

.help-onthispage-sticky {
    position: sticky;
    top: 28px;
    padding-top: 44px;
}

.help-onthispage-label {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--guide-muted);
}

.help-onthispage nav {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--guide-border);
}

.help-onthispage nav a {
    padding: 5px 0 5px 14px;
    margin-left: -1px;
    border-left: 1px solid transparent;
    font-size: 13px;
    line-height: 1.4;
    color: var(--guide-muted);
    text-decoration: none;
    transition: color 0.14s var(--ease), border-color 0.14s var(--ease);
}

.help-onthispage nav a:hover {
    color: var(--guide-ink);
    border-left-color: var(--guide-emerald);
}

/* ---------- Prev / next pager ---------- */

.help-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--guide-border);
}

.help-pager-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--guide-border);
    border-radius: 14px;
    background: var(--guide-surface);
    text-decoration: none;
    transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}

.help-pager-link:hover {
    border-color: #6ee7b7;
    box-shadow: var(--guide-shadow-card);
}

.help-pager-link svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--guide-muted);
    transition: transform 0.16s var(--ease), color 0.16s var(--ease);
}

.help-pager-next {
    justify-content: flex-end;
    text-align: right;
}

.help-pager-prev:hover svg {
    transform: translateX(-2px);
    color: var(--guide-emerald);
}

.help-pager-next:hover svg {
    transform: translateX(2px);
    color: var(--guide-emerald);
}

.help-pager-dir {
    display: block;
    font-size: 12px;
    color: var(--guide-muted);
}

.help-pager-title {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--guide-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 30ch;
}

/* ---------- Responsive ---------- */

@media (min-width: 1024px) {
    .help-sidebar,
    .help-onthispage {
        display: block;
    }
}

/* Between tablet and desktop, drop the right rail first, keep the guide list */
@media (min-width: 1024px) and (max-width: 1200px) {
    .help-doc-layout {
        grid-template-columns: 200px minmax(0, 1fr);
    }
    .help-onthispage {
        display: none;
    }
}

@media (max-width: 1023px) {
    .help-doc-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .help-pager {
        grid-template-columns: 1fr;
    }
    .help-pager-next {
        justify-content: flex-start;
        text-align: left;
    }
}