/* ===================================================================
   seo.css — shared chrome for server-rendered SEO pages (SeoResource).
   Generic .seo-* classes (brand bar, hero, CTA band, footer) used by
   ip-query-info and yak-charts. Colours come from the theme tokens in
   yakware-style.css + yw-theme.css (loaded alongside this file).
   =================================================================== */

.seo-bar {
    background: var(--card);
    border-bottom: 1px solid var(--line);
}
.seo-bar .yw-wrap {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0;
}
.seo-bar__brand { font-weight: 700; font-size: 1.2rem; color: var(--ink); text-decoration: none; }
.seo-bar__brand .yw-wm { color: var(--brass); }
.seo-bar__cta { white-space: nowrap; }

.seo__h1 { margin: 0 0 8px; }
.seo__lead { color: var(--ink-soft); font-size: 1.1rem; margin: 0 0 24px; max-width: 70ch; }

.seo-cta {
    margin-top: 24px; padding: 26px 28px; border-radius: 12px;
    background: var(--navy-tint); border: 1px solid var(--line);
}
.seo-cta h2 { margin: 0 0 8px; }
.seo-cta p { color: var(--ink-soft); margin: 0 0 14px; max-width: 62ch; }
.seo-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.seo-footer {
    margin-top: 40px; padding: 26px 0; background: var(--navy); color: #cfd8e3;
}
.seo-footer a { color: #eef2f6; text-decoration: none; }
.seo-footer a:hover { text-decoration: underline; }
.seo-footer__legal { margin-top: 10px; font-size: .85rem; opacity: .75; }

/* Generic card/grid body components so SEO pages need no product CSS. */
.seo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 16px; }
.seo-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.seo-card--wide { grid-column: 1 / -1; }
.seo-card h2, .seo-card h3 { margin: 0 0 12px; }
.seo-card p { color: var(--ink-soft); margin: 0 0 10px; }
.seo-card ul { color: var(--ink-soft); margin: 0 0 10px; padding-left: 1.2em; }
.seo-example { text-align: center; }
.seo-example__img { max-width: 100%; border-radius: 8px; border: 1px solid var(--line); display: block; margin: 0 auto; }
.seo-url { display: block; word-break: break-all; background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; margin: 12px 0; }
.seo-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.seo-chip { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--navy-tint); color: var(--navy); border: 1px solid var(--line); text-decoration: none; font-weight: 600; font-size: .9rem; }
.seo-chip:hover { border-color: var(--brass); }
.sample-code { background: #0f1115; border-radius: 8px; padding: 12px 14px; overflow-x: auto; margin: 12px 0; }
.sample-code pre { margin: 0; }
.sample-code code { color: #e6e6e6; font-size: .82rem; }
.seo-compare-table { width: 100%; border-collapse: collapse; }
.seo-compare-table th, .seo-compare-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.seo-compare-table th { color: var(--ink-faint); font-weight: 600; }