/* Shared styles for all SolarRank pages */
:root {
    --ns-blue: #004a99; --ns-blue-dark: #00336b; --ns-yellow: #ffcc00; --ns-yellow-soft: #fff6cc;
    --bg: #eef1f5; --card: #ffffff; --ink: #1d2733; --muted: #5f6b7a; --line: #e3e7ec; --green: #1b7a3a; --green-soft: #dcf2e3;
    --radius: 14px; --shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; background: var(--bg); color: var(--ink); margin: 0; line-height: 1.55; }
a { color: var(--ns-blue); }
h1, h2, h3 { line-height: 1.2; color: var(--ns-blue); }
h2 { font-size: 1.5rem; margin: 0 0 6px; }
h3 { font-size: 1rem; margin: 0; }
.muted { color: var(--muted); font-size: .85rem; }
.container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; }
.section { margin: 28px 0; }
.section-intro { color: var(--muted); margin: 0 0 18px; max-width: 70ch; }

/* Header */
.site-header { background: var(--ns-blue); color: #fff; border-bottom: 4px solid var(--ns-yellow); position: sticky; top: 0; z-index: 50; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; }
.brand { color: #fff; text-decoration: none; font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; white-space: nowrap; }
.brand span { color: var(--ns-yellow); }
.site-nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.site-nav a { color: rgba(255,255,255,.9); text-decoration: none; font-size: .88rem; font-weight: 600; padding: 8px 12px; border-radius: 8px; white-space: nowrap; }
.site-nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.site-nav a.nav-cta { background: var(--ns-yellow); color: var(--ns-blue); }

.btn { display: inline-block; padding: 12px 20px; border-radius: 10px; font-weight: 700; text-decoration: none; font-size: .95rem; border: 0; cursor: pointer; font-family: inherit; }
.btn-primary { background: var(--ns-yellow); color: var(--ns-blue); }
.btn-primary:hover { filter: brightness(.96); }
.btn-ghost { background: transparent; color: var(--ns-blue); box-shadow: inset 0 0 0 2px var(--ns-blue); margin-left: 8px; }
.btn-ghost:hover { background: var(--ns-blue); color: #fff; }

/* Footer */
.site-footer { background: var(--ns-blue-dark); color: rgba(255,255,255,.8); margin-top: 40px; padding: 28px 0; font-size: .88rem; }
.site-footer .container { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.site-footer a { color: var(--ns-yellow); text-decoration: none; margin-left: 16px; }
.site-footer a:first-child { margin-left: 0; }

code { background: #f1f3f5; padding: 1px 5px; border-radius: 4px; font-size: .9em; overflow-wrap: anywhere; }
.page-title { padding: 32px 0 8px; }
.page-title h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin: 0 0 10px; letter-spacing: -.02em; }
.page-title p { font-size: 1.05rem; color: var(--muted); margin: 0; max-width: 70ch; }

@media (max-width: 600px) {
    .container { padding: 0 14px; }
    .card { padding: 18px; }
    .site-header .container { height: auto; padding-top: 10px; padding-bottom: 6px; flex-direction: column; align-items: flex-start; gap: 4px; }
    .site-header { position: static; }
    .btn-ghost { margin: 8px 0 0; }
    /* Wrap the menu instead of hiding links off-screen */
    .site-nav { flex-wrap: wrap; overflow: visible; gap: 2px; margin-left: -8px; }
    .site-nav a { padding: 8px; font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.site-nav a.active { background: rgba(255,255,255,.16); color: #fff; }