<script>
  import '../app.css';
  let { children } = $props();
</script>

<header class="site">
  <div class="container">
    <a class="brand" href="/">good<span>News</span></a>
    <p class="tagline">Calm, constructive news worth your attention — and nothing that isn't.</p>
  </div>
</header>

<main class="container">
  {@render children()}
</main>

<footer class="site">
  <div class="container">
    goodNews · metadata &amp; links only, no stored articles · <a href="/docs">API</a>
  </div>
</footer>

<style>
  header.site {
    text-align: center;
    padding: 38px 0 22px;
    background: linear-gradient(180deg, var(--surface), var(--bg));
    border-bottom: 1px solid var(--line);
  }
  .brand {
    font-family: var(--serif);
    font-size: 2.1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
  }
  .brand span { color: var(--sage); }
  .tagline { margin: 6px 0 0; color: var(--muted); font-size: 0.98rem; }
  main.container { padding-top: 18px; padding-bottom: 40px; min-height: 60vh; }
  footer.site {
    text-align: center;
    color: var(--muted);
    font-size: 0.82rem;
    padding: 26px 0 34px;
    border-top: 1px solid var(--line);
  }
  footer.site a { color: var(--sage-deep); }
</style>
