/* Header, nav, footer, and main layout */
.site-header { background: var(--bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; }

.brand { font-weight: 800; letter-spacing: 0.2px; }

/* Nav basics */
.nav-toggle { display: none; font: inherit; background: none; border: 0; line-height: 1; cursor: pointer; }
.nav { display: none; }
.nav.open { display: block; }
.nav .nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; }
.nav .nav-list li a { display: block; padding: 0.5rem 0.75rem; }

/* Desktop (≥768px) */
@media (min-width: 768px){
  .nav { display: flex; }
  .nav .nav-list { display: flex; gap: 1rem; }
}

/* Mobile (<768px): two-row header with right-aligned hamburger and full-width menu */
@media (max-width: 767.98px){
  .site-header .bar { flex-wrap: wrap; }
  .brand { order: 1; }
  .nav-toggle { display: inline-block; order: 2; margin-left: auto; } /* stays at right edge */
  .nav { order: 3; width: 100%; display: none; }
  .nav.open { display: block; }
  .nav .nav-list { display: block; }
  .nav .nav-list li a { padding: 0.75rem 1rem; border-top: 1px solid var(--border); }
}

/* Main + basic surfaces */
main { padding: 1rem; }
.section { padding: 1.5rem 0; }
.surface { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; }

/* Footer */
.site-footer { margin-top: 2rem; border-top: 1px solid var(--border); color: var(--muted); }
.site-footer .bar { padding: 1rem; }

/* Simple grids */
.grid { display: grid; gap: 1rem; }
@media (min-width: 768px){
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Inline nav shortcode ([[nav]]) */
.inline-nav .nav-list { list-style: none; margin: 1rem; padding: 1rem; display: flex; gap: 1rem; }
@media (max-width: 767.98px){
  .inline-nav .nav-list { display: block; }
}

/* spacing above footer widgets */
.above-footer { margin-top: 2rem; }