/* products/swingtopdf/docs.html: page rules (moved from the page's <style>; loads after site.css). */

.container { max-width: 820px; margin: 0 auto; padding: 0 24px; }

/* ── Page header ── */
.page-header {
    background: var(--gradient-hero);
    color: var(--white);
    padding: 50px 24px 55px;
    text-align: center;
}
.page-header h1 { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 8px; }
.page-header p { color: var(--on-navy-link); font-size: 1.05rem; }

/* ── Content ── */
.content { padding: 60px 24px 80px; }
.content h2 {
    font-size: 1.5rem;
    color: var(--ink);
    margin: 48px 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border);
}
.content h2:first-child { margin-top: 0; }
.content h3 { font-size: 1.15rem; color: var(--ink); margin: 28px 0 12px; }
.content p { margin-bottom: 16px; color: var(--text); }
.content ul { margin: 0 0 16px 24px; }
.content li { margin-bottom: 6px; color: var(--text-light); }

.code-block {
    background: var(--code-bg);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 24px;
}
.code-block-header {
    padding: 10px 20px;
    background: var(--glass-on-navy);
    color: var(--code-muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.code-block pre {
    padding: 20px;
    overflow-x: auto;
    font-size: 0.88rem;
    line-height: 1.6;
}
.code-block code {
    color: var(--code-text);
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
.kw { color: var(--code-keyword); }
.str { color: var(--code-string); }
.cmt { color: var(--code-comment); }
.tag { color: var(--code-tag); }
.attr { color: var(--code-attr); }

.note {
    background: var(--teal-light);
    border-left: 4px solid var(--teal);
    padding: 16px 20px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 24px;
    font-size: 0.93rem;
    color: var(--text);
}
.note strong { color: var(--ink); }

.info-box {
    background: var(--grey-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
}

/* ── Footer ── */

@media (max-width: 768px) {
    .page-header h1 { font-size: 1.7rem; }
}