/* Peak Inspire top bar — shared by the blog and the plain land-quiz pages.
   Class names start with pi- so they never clash with the quiz's own styles. */

.pi-header { background: #223a2e; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
[data-theme="dark"] .pi-header { background: #0f1412; border-bottom: 1px solid #2a312c; }
.pi-header-inner { max-width: 1120px; margin: 0 auto; padding: .9rem 1.25rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.pi-wordmark { color: #fff; text-decoration: none; font-weight: 800; font-size: 1.35rem; letter-spacing: .01em; text-transform: none; }
.pi-wordmark:hover { color: #fff; }
.pi-wordmark span { color: #e7b37f; }
.pi-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.1rem; }
.pi-nav a { color: #e9efe9; text-decoration: none; font-weight: 600; font-size: .98rem; padding: .2rem 0; border-bottom: 2px solid transparent; }
.pi-nav a:hover, .pi-nav a[aria-current="page"] { color: #fff; border-bottom-color: #b8763f; }
.pi-theme { background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 999px; padding: .2rem .7rem; font: inherit; font-size: .85rem; cursor: pointer; }
.pi-theme:hover { border-color: #e7b37f; }
.pi-theme:focus-visible { outline: 3px solid #7fb6e6; outline-offset: 2px; }

/* Keep the footer at the bottom of short pages (blog and quiz pages alike). */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }