/*
 * documentPage.css
 * Styles for the reading pages with the site header at the top (the privacy
 * notice and the community guidelines), in the "Tome" style (approved by
 * the owner, 5 October 2026): a parchment page on the site-wide brown fade, the title
 * centred with a flourish, and each section numbered like a chapter.
 * Used together with main.css (base styles), tomeTheme.css (the colours)
 * and, for signed-in users, /app/css/siteHeader.css (the header).
 *
 * CLARITY FIRST (owner's decision): these pages are legal notices, so the
 * body text stays plain. No drop capital or decorative letters in the text;
 * the Duality font is only used for headings.
 */

/* Around the page: the site-wide dark brown fade (tomeTheme.css), the same
   as every other page. Decoration only: no text sits directly on it (on
   phones the sheet fills the screen). "fixed" keeps it still while the
   page scrolls. */
.document-page {
    background-color: var(--tome-desk-colour);
    background-image: var(--tome-desk-fade);
    background-attachment: fixed;
    color: var(--tome-ink-colour);
}

/* The page itself: authentic parchment paper sheet with warm vellum gradient,
   aged vignette patina on the edges, desk shadow, and a realistic organic torn deckle edge.
   Rendered with a high-fidelity vector deckle border image (parchment-border.svg). */
.document-page .document-content,
.tome-parchment-sheet {
    width: calc(100% - 2 * var(--page-side-padding));
    max-width: 1200px;
    margin: 36px auto 48px;
    padding: 36px 44px 40px;
    border: 24px solid transparent;
    border-image-source: var(--tome-parchment-picture);
    border-image-slice: 44 fill;
    border-image-width: 24px;
    border-image-repeat: round;
    background: none;
    filter: drop-shadow(0 8px 30px rgba(26, 16, 7, 0.4));
    outline: 1px solid rgba(195, 165, 110, 0.35);
    outline-offset: -14px;
    line-height: 1.65;
    counter-reset: document-chapter; /* numbers the sections, see h2 below */
    position: relative;
}

/* Header container containing the title and the top back link. */
.document-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4.6rem;
}

/* The title: centred, in ink, enlarged so it stands out clearly above the
   section headings (h2 is already 2rem in main.css). */
.document-page h1 {
    margin: 0;
    color: var(--tome-ink-colour);
    font-size: 3.5rem;
    text-align: center;
}

/* The top "← Back" link: positioned to the left of the title, styled as pure
   antique text in the Duality header font (with Georgia serif fallback for the arrow),
   coloured in brown with no button background and strictly no underline. */
.document-page .document-content a.document-back-link {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--tome-brown-colour) !important;
    font-family: "Duality", Georgia, serif;
    font-size: 2.2rem;
    font-weight: normal;
    letter-spacing: -0.013em;
    word-spacing: 0.163em;
    line-height: 1;
    text-decoration: none !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease, transform 0.15s ease;
}

.document-page .document-content a.document-back-link:hover {
    color: var(--tome-ink-colour) !important;
    text-decoration: none !important;
    transform: translateY(calc(-50% - 1px));
}

.document-page .document-content a.document-back-link:active {
    color: var(--tome-ink-colour) !important;
    text-decoration: none !important;
    transform: translateY(calc(-50% + 1px));
}

.document-page .document-content a.document-back-link:focus-visible {
    outline: 2px solid var(--tome-red-ink-colour);
    outline-offset: 4px;
    border-radius: 2px;
    text-decoration: none !important;
}

/* Arrow uses the same serif/header font choice, no system font override */
.document-back-arrow {
    font-family: "Duality", Georgia, serif;
    font-size: 2.2rem;
    line-height: 1;
}

/* Guarantee no underline on any child or state */
.document-page .document-content a.document-back-link *,
.document-page .document-content a.document-back-link:hover *,
.document-page .document-content a.document-back-link:focus * {
    text-decoration: none !important;
}

/* ---------- Flat Stitched Leather Button ---------- */
/* Styled to look like a flat piece of dark leather stitched with waxed
   thread onto the parchment, sized cleanly and without 3D bevels. */
.document-page .document-content a.document-leather-button,
.document-page .document-content .document-leather-button,
.document-page .document-content a.button,
.document-page .document-content .button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 20px 8px; /* Balanced optical center for Duality font */
    border: 1px solid var(--tome-leather-dark-colour);
    border-radius: 4px;
    background-color: var(--tome-leather-colour);
    color: var(--tome-on-leather-colour) !important;
    font-family: "Duality", Georgia, serif;
    font-size: 1.4rem;
    font-weight: normal;
    letter-spacing: -0.013em;
    word-spacing: 0.163em;
    line-height: 1;
    text-decoration: none !important;
    box-shadow: 0 2px 5px rgba(45, 30, 15, 0.25);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Subtle optical centering for the text */
.document-page .document-content a.document-leather-button .document-button-text,
.document-page .document-content .document-leather-button .document-button-text {
    display: inline-block;
    line-height: 1;
}

/* Flat stitched waxed-thread perimeter */
.document-page .document-content a.document-leather-button::after,
.document-page .document-content .document-leather-button::after,
.document-page .document-content a.button::after,
.document-page .document-content .button::after {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px dashed rgba(228, 202, 148, 0.65);
    border-radius: 2px;
    pointer-events: none;
}

.document-page .document-content a.document-leather-button:hover,
.document-page .document-content .document-leather-button:hover,
.document-page .document-content a.button:hover,
.document-page .document-content .button:hover {
    background-color: var(--tome-leather-hover-colour);
    color: var(--tome-on-leather-colour) !important;
    box-shadow: 0 3px 6px rgba(45, 30, 15, 0.35);
    text-decoration: none !important;
}

.document-page .document-content a.document-leather-button:active,
.document-page .document-content .document-leather-button:active,
.document-page .document-content a.button:active,
.document-page .document-content .button:active {
    background-color: var(--tome-leather-dark-colour);
    box-shadow: 0 1px 2px rgba(45, 30, 15, 0.2);
    text-decoration: none !important;
}

.document-page .document-content a.document-leather-button:focus-visible,
.document-page .document-content .document-leather-button:focus-visible,
.document-page .document-content a.button:focus-visible,
.document-page .document-content .button:focus-visible {
    outline: 2px solid var(--tome-red-ink-colour);
    outline-offset: 3px;
    text-decoration: none !important;
}

.document-page .document-content a.document-leather-button *,
.document-page .document-content a.document-leather-button:hover *,
.document-page .document-content a.button *,
.document-page .document-content a.button:hover * {
    text-decoration: none !important;
}

/* The ✦ under the title (decoration only; aria-hidden in the page). */
.document-flourish {
    margin: 6px 0 4px;
    color: var(--tome-ornament-colour);
    text-align: center;
}

/* "Last updated": centred and quieter (brown: 7.2:1 on the parchment). */
.document-updated {
    margin: 0 0 24px;
    color: var(--tome-brown-colour);
    font-style: italic;
    text-align: center;
}

/* Each section is a numbered chapter (I, II, III...), with a thin rule
   above it to separate it from the one before. */
.document-page h2 {
    margin: 32px 0 12px;
    padding-top: 24px;
    border-top: 1px solid var(--tome-pale-rule-colour);
    color: var(--tome-ink-colour);
    counter-increment: document-chapter;
}

/* The chapter number in red ink, e.g. "II.", followed by two
   non-breaking spaces. */
.document-page h2::before {
    content: counter(document-chapter, upper-roman) ".\00a0\00a0";
    color: var(--tome-red-ink-colour);
}

.document-page h3 {
    color: var(--tome-red-ink-colour);
}

/* Brown bullets, with a little space between list items. */
.document-page li::marker {
    color: var(--tome-ornament-colour);
}

.document-page li {
    margin-bottom: 6px;
}

/* Links in red ink, and always underlined so they can be told apart from
   normal text without relying on colour (WCAG 1.4.1). */
.document-page .document-content a {
    color: var(--tome-red-ink-colour);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.document-page .document-content a:hover {
    text-decoration-thickness: 2px;
}

/* The keyboard focus outline in red ink, clearly visible on parchment. */
.document-page :focus-visible {
    outline-color: var(--tome-red-ink-colour);
}

/* ---------- Bottom Actions and Buttons ---------- */

.document-page .document-bottom-actions {
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--tome-pale-rule-colour);
    display: flex;
    align-items: center;
}

/* Medium screens: stack the back link neatly above the heading if space is tight */
@media (max-width: 800px) {
    .document-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        min-height: auto;
    }

    .document-page .document-content a.document-back-link {
        position: static;
        transform: none;
        align-self: flex-start;
        margin-bottom: 6px;
    }

    .document-page .document-content a.document-back-link:hover,
    .document-page .document-content a.document-back-link:active {
        transform: none;
    }

    .document-page h1 {
        align-self: center;
        text-align: center;
    }
}

/* Phones: the page fills the screen edge to edge, with a smaller title so
   a long one doesn't break across too many lines. */
@media (max-width: 600px) {
    .document-page .document-content,
.tome-parchment-sheet {
        width: 100%;
        margin: 0;
        padding: 24px var(--page-side-padding) 32px;
        border-width: 0;
        filter: none;
        outline: none;
    }

    .document-page h1 {
        font-size: 2.6rem;
    }
}