/* Shared styling for the long-form guide articles under /guides/... */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    background: #f5f5f5;
    color: #333;
}

.site-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 1rem 2rem; }
.site-header a { color: white; text-decoration: none; font-size: 1.4rem; font-weight: bold; }
.site-header a:hover { opacity: 0.85; }

.container {
    max-width: 780px;
    margin: 2rem auto;
    background: white;
    border-radius: 8px;
    padding: 2.5rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.crumb { font-size: 0.85rem; color: #999; margin-bottom: 1.2rem; }
.crumb a { color: #667eea; text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

h1 { font-size: 1.75rem; line-height: 1.4; margin-bottom: 0.6rem; color: #222; }
.subtitle { color: #888; margin-bottom: 1.2rem; line-height: 1.7; }
.byline { font-size: 0.82rem; color: #aaa; border-bottom: 1px solid #eee; padding-bottom: 1.2rem; margin-bottom: 1.8rem; }

h2 { font-size: 1.25rem; margin: 2.2rem 0 0.8rem; color: #2d3748; padding-left: 0.7rem; border-left: 4px solid #667eea; }
h3 { font-size: 1.02rem; margin: 1.5rem 0 0.5rem; color: #444; }

p, li { line-height: 1.85; color: #4a5568; margin-bottom: 0.7rem; }
ul, ol { padding-left: 1.5rem; margin-bottom: 0.8rem; }
li { margin-bottom: 0.4rem; }

strong { color: #2d3748; }
a { color: #5a63d8; }

.callout { background: #f0f4ff; border: 1px solid #d6e0ff; border-radius: 8px; padding: 1rem 1.3rem; margin: 1.4rem 0; }
.callout p:last-child { margin-bottom: 0; }

.warn { background: #fffbea; border: 1px solid #ffe58f; border-radius: 8px; padding: 1rem 1.3rem; margin: 1.4rem 0; }
.warn p { color: #7a6200; margin-bottom: 0.4rem; }
.warn p:last-child { margin-bottom: 0; }

.checklist { background: #f8f9fb; border-radius: 8px; padding: 1.2rem 1.5rem; margin: 1.4rem 0; }
.checklist p { font-weight: 600; color: #333; margin-bottom: 0.6rem; }
.checklist ul { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: 0.92rem; }
th, td { border: 1px solid #e2e8f0; padding: 0.65rem 0.85rem; text-align: left; line-height: 1.6; }
th { background: #f7f8fa; color: #2d3748; font-weight: 600; }

.disclaimer { font-size: 0.84rem; color: #888; line-height: 1.75; border-top: 1px solid #eee; padding-top: 1.3rem; margin-top: 2.5rem; }

.related { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #eee; }
.related h2 { font-size: 1.05rem; border: none; padding-left: 0; margin-top: 0; }
.related ul { list-style: none; padding-left: 0; }
.related li { margin-bottom: 0.5rem; }
.related a { text-decoration: none; }
.related a:hover { text-decoration: underline; }

.cta { text-align: center; margin: 2.2rem 0 0.5rem; }
.cta a {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white; text-decoration: none;
    padding: 0.8rem 2rem; border-radius: 8px;
    font-weight: 600; display: inline-block;
}
.cta a:hover { opacity: 0.9; }

.site-footer { text-align: center; padding: 2rem 1rem; color: #888; font-size: 0.85rem; }
.site-footer a { color: #667eea; text-decoration: none; margin: 0 0.6rem; }
.site-footer a:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .container { margin: 1rem; padding: 1.5rem 1.3rem; }
    h1 { font-size: 1.4rem; }
    h2 { font-size: 1.12rem; }
    table { font-size: 0.85rem; }
    th, td { padding: 0.5rem 0.6rem; }
}