/**
 * Kent DnD – fantasy-basic skin
 * Parchment 9-slice border via border-image.
 *
 * Sprite sheet: images/parchment-sprite.png  (1364×1364 px, RGBA)
 *
 * Slice layout:
 *   corners : 82 × 82 px
 *   edges   : 82 px short axis × 1200 px long axis
 *   centre  : 1200 × 1200 px
 *   sheet   : 1364 × 1364 px
 *
 * The .skin-fantasy-basic class is on the outermost element of
 * skins/fantasy-basic/skin.html so all selectors below are scoped
 * to that wrapper.
 */

/* ── Custom properties ───────────────────────────────────────────────────── */

.skin-fantasy-basic {
    --parchment-sprite: url('../images/parchment-sprite.png');
    --parchment-border: 60px; /* rendered border width on screen        */
    --parchment-slice: 82; /* px cut into sprite (unitless = px)     */
    --parchment-padding: 40px; /* inner content padding inside the frame */
    /* Parchment palette */
    --parchment-bg: #d8c398;
    --ink-color: #2c1a0e;
    --ink-muted: #5c3d1e;
    --link-color: #7a3b1e;
    --link-hover: #4a1e08;
    /* Typography */
    --font-body: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
    --font-heading: 'MedievalSharp', 'Palatino Linotype', Georgia, serif;
}

/* ── Parchment frame ─────────────────────────────────────────────────────── */

.skin-fantasy-basic {
    /* 9-slice border-image — draws the parchment frame around all four sides.
       The 'fill' keyword also renders the centre slice as the background,
       giving the parchment texture to the content area.

       NOTE: border-image-slice cannot use var() when 'fill' is also needed —
       the browser cannot parse a keyword after a custom property. The shorthand
       is used here with literal values for reliability. */
    /* A real border declaration is required to allocate layout space for
       the border-image. Must be set BEFORE border-image — the border
       shorthand resets border-image to none if it comes after. */
    border-style: solid;
    border-color: transparent;
    border-width: 60px;
    /* 9-slice border-image — must come AFTER the border longhands above */
    border-image: url('../images/parchment-sprite.png') 82 fill / 60px / 0 round;
    /* Padding pushes content away from the frame edge */
    padding: var(--parchment-padding);
    /* Strip anything that would compete with the parchment frame */
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    border-radius: 0;
    /* Base typography */
    font-family: var(--font-body);
    color: var(--ink-color);
    line-height: 1.7;
}

    /* ── Headings ────────────────────────────────────────────────────────────── */

    .skin-fantasy-basic h1,
    .skin-fantasy-basic h2,
    .skin-fantasy-basic h3,
    .skin-fantasy-basic h4 {
        font-family: var(--font-heading);
        color: var(--ink-color);
        text-shadow: 1px 1px 0 rgba(255, 240, 200, 0.5);
    }

    /* ── Links ───────────────────────────────────────────────────────────────── */

    .skin-fantasy-basic a {
        color: var(--link-color);
        text-decoration: underline;
        text-decoration-color: rgba(122, 59, 30, 0.4);
        text-underline-offset: 2px;
    }

        .skin-fantasy-basic a:hover {
            color: var(--link-hover);
            text-decoration-color: var(--link-hover);
        }

    /* ── Meta / muted text ───────────────────────────────────────────────────── */

    .skin-fantasy-basic .wp-block-post-date,
    .skin-fantasy-basic .wp-block-post-author-name {
        color: var(--ink-muted);
        font-style: italic;
        font-size: 0.875em;
    }

    /* ── Post title ──────────────────────────────────────────────────────────── */

    .skin-fantasy-basic .wp-block-post-title {
        color: var(--ink-color);
    }

    /* ── Featured image ──────────────────────────────────────────────────────── */

    .skin-fantasy-basic .wp-block-post-featured-image img {
        border-radius: 4px;
    }

/* ── Print ───────────────────────────────────────────────────────────────── */

@media print {
    .skin-fantasy-basic {
        border-image: none;
        border: 1px solid #8b6914;
        background: #fdf5e0;
        padding: 20px;
    }
}