---
import BaseLayout from "@/layouts/BaseLayout.astro";

const { frontmatter } = Astro.props;
---

<BaseLayout title={frontmatter.title} description={frontmatter.description}>
  <main class="main">
    <a href="/" class="back">← Home</a>
    <div class="content">
      <slot />
      <script>
        document.querySelectorAll('[data-obf]').forEach(el => {
          el.textContent = atob((el as HTMLElement).dataset.obf!);
        });
        document.querySelectorAll('[data-obf-href]').forEach(el => {
          (el as HTMLAnchorElement).href = atob((el as HTMLElement).dataset.obfHref!);
        });
      </script>
    </div>
  </main>
</BaseLayout>

<style>
  .main {
    max-width: var(--width-prose);
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
    width: 100%;
  }

  .back {
    display: inline-block;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: #555;
    text-decoration: none;
  }

  .back:hover {
    color: var(--accent);
  }

  .content {
    font-size: 1rem;
    line-height: 1.75;
    color: #333;
  }

  .content :global(h1) {
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    margin-bottom: 2rem;
    color: #111;
  }

  .content :global(h2) {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #888;
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #111;
  }

  .content :global(h3) {
    font-size: 1rem;
    font-weight: 600;
    margin: 1.5rem 0 0.5rem;
    color: #111;
  }

  .content :global(p) {
    margin-bottom: 1.25rem;
  }

  .content :global(ul),
  .content :global(ol) {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
  }

  .content :global(li) {
    margin-bottom: 0.4rem;
  }

  .content :global(strong) {
    font-weight: 600;
    color: #111;
  }

  .content :global(a) {
    color: var(--accent);
    text-underline-offset: 3px;
  }

  .content :global(code) {
    font-family: monospace;
    font-size: 0.9rem;
    background: #eeeeed;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
  }

  .content :global(.r) {
    direction: rtl;
    unicode-bidi: bidi-override;
  }

  .content :global(hr) {
    border: none;
    border-top: 1px solid #ddd;
    margin: 2rem 0;
  }
</style>