/**
 * Help Article Styles — Stripe Design System
 */

/* ── Layout ───────────────────────────────────────────── */

.help-container {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--stripe-space-8) var(--stripe-space-6);
}

@media (max-width: 768px) {
    .help-container {
        padding: var(--stripe-space-6) var(--stripe-space-4);
    }
}

/* ── Breadcrumb ───────────────────────────────────────── */

.help-breadcrumb {
    margin-bottom: var(--stripe-space-8);
}

.help-breadcrumb-link {
    display: inline-flex;
    align-items: center;
    font-size: var(--stripe-fs-base);
    color: var(--stripe-primary);
    text-decoration: none;
    transition: opacity var(--stripe-transition-fast);
}

.help-breadcrumb-link:hover {
    opacity: 0.75;
}

/* ── Article Header ───────────────────────────────────── */

.help-article {
    margin-bottom: var(--stripe-space-16);
}

.help-header {
    padding-bottom: var(--stripe-space-6);
    margin-bottom: var(--stripe-space-8);
    border-bottom: 1px solid var(--stripe-border-light);
}

.help-title {
    font-size: var(--stripe-fs-3xl);
    font-weight: var(--stripe-fw-bold);
    line-height: var(--stripe-lh-tight);
    color: var(--stripe-text-primary);
    margin: 0 0 var(--stripe-space-4) 0;
}

@media (max-width: 768px) {
    .help-title {
        font-size: var(--stripe-fs-2xl);
    }
}

/* ── Meta: Category + Tags ────────────────────────────── */

.help-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--stripe-space-3);
}

.help-category {
    display: inline-flex;
    align-items: center;
    font-size: var(--stripe-fs-base);
    font-weight: var(--stripe-fw-medium);
    color: var(--stripe-text-secondary);
    background-color: var(--stripe-bg-tertiary);
    border: 1px solid var(--stripe-border-light);
    border-radius: var(--stripe-radius-full);
    padding: 0.25rem 0.75rem;
}

.help-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--stripe-space-2);
}

.help-tag {
    display: inline-block;
    font-size: var(--stripe-fs-sm);
    font-weight: var(--stripe-fw-medium);
    color: var(--stripe-primary);
    background-color: rgba(99, 91, 255, 0.08);
    border: 1px solid rgba(99, 91, 255, 0.2);
    border-radius: var(--stripe-radius-full);
    padding: 0.2rem 0.65rem;
    letter-spacing: var(--stripe-ls-wide);
    text-transform: uppercase;
}

/* ── Content Typography ───────────────────────────────── */

.help-content {
    font-size: var(--stripe-fs-lg);
    line-height: var(--stripe-lh-relaxed);
    color: var(--stripe-text-primary);
}

.help-content h1 {
    font-size: var(--stripe-fs-3xl);
    font-weight: var(--stripe-fw-bold);
    line-height: var(--stripe-lh-tight);
    color: var(--stripe-text-primary);
    margin: var(--stripe-space-10) 0 var(--stripe-space-4) 0;
}

.help-content h2 {
    font-size: var(--stripe-fs-2xl);
    font-weight: var(--stripe-fw-semibold);
    line-height: var(--stripe-lh-tight);
    color: var(--stripe-text-primary);
    margin: var(--stripe-space-10) 0 var(--stripe-space-3) 0;
    padding-bottom: var(--stripe-space-2);
    border-bottom: 1px solid var(--stripe-border-light);
}

.help-content h3 {
    font-size: var(--stripe-fs-xl);
    font-weight: var(--stripe-fw-semibold);
    line-height: var(--stripe-lh-snug);
    color: var(--stripe-text-primary);
    margin: var(--stripe-space-8) 0 var(--stripe-space-2) 0;
}

.help-content h4 {
    font-size: var(--stripe-fs-lg);
    font-weight: var(--stripe-fw-semibold);
    line-height: var(--stripe-lh-snug);
    color: var(--stripe-text-secondary);
    margin: var(--stripe-space-6) 0 var(--stripe-space-2) 0;
}

.help-content h5,
.help-content h6 {
    font-size: var(--stripe-fs-base);
    font-weight: var(--stripe-fw-semibold);
    color: var(--stripe-text-secondary);
    margin: var(--stripe-space-4) 0 var(--stripe-space-2) 0;
    text-transform: uppercase;
    letter-spacing: var(--stripe-ls-wide);
}

.help-content p {
    margin: 0 0 var(--stripe-space-4) 0;
}

.help-content a {
    color: var(--stripe-primary);
    text-decoration: none;
    border-bottom: 1px solid rgba(99, 91, 255, 0.3);
    transition: border-color var(--stripe-transition-fast);
}

.help-content a:hover {
    border-bottom-color: var(--stripe-primary);
}

/* Inline code */
.help-content code {
    font-family: var(--stripe-font-mono);
    font-size: 0.875em;
    padding: 0.15em 0.45em;
    background-color: var(--stripe-bg-tertiary);
    border: 1px solid var(--stripe-border-light);
    border-radius: var(--stripe-radius-sm);
    color: var(--stripe-text-primary);
}

/* Code blocks */
.help-content pre {
    background-color: var(--stripe-bg-tertiary);
    border: 1px solid var(--stripe-border-light);
    border-radius: var(--stripe-radius-md);
    padding: var(--stripe-space-4);
    overflow-x: auto;
    margin: var(--stripe-space-4) 0;
}

.help-content pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: var(--stripe-fs-base);
    line-height: var(--stripe-lh-relaxed);
}

/* Lists */
.help-content ul,
.help-content ol {
    margin: 0 0 var(--stripe-space-4) 0;
    padding-left: var(--stripe-space-6);
}

.help-content li {
    margin-bottom: var(--stripe-space-2);
}

.help-content li > ul,
.help-content li > ol {
    margin-top: var(--stripe-space-2);
    margin-bottom: 0;
}

/* Blockquote */
.help-content blockquote {
    border-left: 3px solid var(--stripe-primary);
    padding: var(--stripe-space-3) var(--stripe-space-4);
    margin: var(--stripe-space-6) 0;
    background-color: rgba(99, 91, 255, 0.04);
    border-radius: 0 var(--stripe-radius-sm) var(--stripe-radius-sm) 0;
    color: var(--stripe-text-secondary);
    font-style: italic;
}

.help-content blockquote p:last-child {
    margin-bottom: 0;
}

/* Tables */
.help-content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--stripe-space-4) 0;
    font-size: var(--stripe-fs-base);
}

.help-content table th {
    background-color: var(--stripe-bg-tertiary);
    padding: var(--stripe-space-3) var(--stripe-space-4);
    text-align: left;
    font-weight: var(--stripe-fw-semibold);
    color: var(--stripe-text-primary);
    border: 1px solid var(--stripe-border-light);
}

.help-content table td {
    padding: var(--stripe-space-3) var(--stripe-space-4);
    border: 1px solid var(--stripe-border-light);
    color: var(--stripe-text-secondary);
    vertical-align: top;
}

.help-content table tr:nth-child(even) td {
    background-color: var(--stripe-bg-secondary);
}

/* Images */
.help-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: var(--stripe-space-6) auto;
    border-radius: var(--stripe-radius-md);
    border: 1px solid var(--stripe-border-light);
    box-shadow: var(--stripe-shadow-sm);
}

/* Horizontal Rule */
.help-content hr {
    border: none;
    border-top: 1px solid var(--stripe-border-light);
    margin: var(--stripe-space-8) 0;
}

/* ── Responsive Content ───────────────────────────────── */

@media (max-width: 768px) {
    .help-content {
        font-size: var(--stripe-fs-base);
    }

    .help-content h1 { font-size: var(--stripe-fs-2xl); }
    .help-content h2 { font-size: var(--stripe-fs-xl); }
    .help-content h3 { font-size: var(--stripe-fs-lg); }

    .help-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}