---
// pages/whatever.astro
import Layout from "../layouts/Layout.astro";
import GlobalLogo from "../components/GlobalLogo.astro";
const { frontmatter } = Astro.props;
---

<Layout>
    <GlobalLogo />
    <div class="mb-32">
        <div
            class="p-4 flex flex-col m-auto max-w-[700px] font-gohu leading-none
      prose-p:mb-4 prose-headings:my-1 prose-headings:text-xl prose-headings:font-bold prose-headings:text-c_mauve prose-ol:list-decimal prose-ol:list-inside
      prose-ol:mb-4 prose-ul:ml-4 prose-ul:list-disc prose-ul:mb-4 prose-ul:flex-col prose-hr:mt-8 prose-hr:mb-6 prose-hr:border-c_surface0
      prose-a:text-c_mauve prose-a:decoration-dotted hover:prose-a:underline prose-pre:my-4 prose-pre:py-4 prose-pre:px-4
      marker:text-c_mauve prose-code:font-gohu prose-img:my-4 prose-img:w-screen"
        >
            <a
                tabindex="0"
                href="../../"
                class="flex w-max text-c_mauve decoration-dotted hover:underline hover:cursor-pointer mb-4"
                >« Back<br /><br /></a
            >
            <h1 class="font-bold text-xl">
                {frontmatter.title}
            </h1>
            <article class="">
                <slot />
            </article>
            <p>~{frontmatter.author}</p>
        </div>
    </div>
</Layout>

<style is:global>
    /* =========================
   Strong overrides for Tailwind Typography / Shiki / Astro codeblocks
   ========================= */

    /* Target the usual suspects:
   - Tailwind Typography uses .prose pre
   - Shiki / Astro often emit pre.ast-code or pre[class*="language-"]
   We make these global and high-specificity so they win.
*/

    html .prose pre,
    html .prose pre code,
    pre[class*="language-"],
    code[class*="language-"],
    pre.ast-code,
    .astro-code,
    .shiki pre,
    pre {
        /* allow wrapping of long lines */
        white-space: pre-wrap !important; /* allow wrapping while preserving whitespace */
        word-break: break-word !important; /* break long words/identifiers if needed */
        overflow-wrap: anywhere !important; /* extra aggressive wrap */
        max-width: 100% !important; /* don't overflow container */
        box-sizing: border-box !important;
    }

    /* Keep block semantics for code content */
    html .prose pre code,
    pre[class*="language-"] > code {
        display: block !important;
    }

    /* Keep a horizontal fallback for extremely long uninterrupted strings
   (URLs/base64/etc.), but wrapping will be used in most cases. */
    html .prose pre {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Optional: nicer padding and visual treatment */
    html .prose pre {
        padding: 1rem !important;
        border-radius: 0.5rem !important;
        background-color: rgba(
            0,
            0,
            0,
            0.03
        ) !important; /* tweak to taste or remove */
    }

    /* Inline code (inside paragraphs) — keep the normal inline look, don't force wrap */
    html .prose code:not(pre code) {
        white-space: normal !important;
        overflow: visible !important;
        word-break: normal !important;
    }

    /* If you're using tailwind's 'prose-sm' / modifiers or custom wrappers, increase specificity */
    html body .prose pre,
    html body .prose pre code {
        /* repeat important rules to be extra sure */
        white-space: pre-wrap !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }
</style>