/**
 * UPP Life Principles — Document Styles
 *
 * Shared stylesheet for the "Life Principles" canvas-style document,
 * rendered as semantic HTML/CSS. Used by:
 *   - The homepage block on Codex Vivendi (Niklas's "A Father's Advice")
 *   - The printable page that contributors open to save their own
 *     Life Principles as a searchable PDF
 *
 * Mirrors the PNG canvas drawing logic in upp-life.js "stream mode":
 * a single justified flow of words where each heading sits inline in
 * the chosen heading color and bleeds into the body text.
 *
 * Default colors mirror the canvas template
 * tpl_69a076b60bd064.97646304:
 *   - Paper:    #faf9f6
 *   - Title:    #1e293b, ~80px, bold, Times New Roman
 *   - Heading:  #d4af37, ~22px, bold, Times New Roman
 *   - Body:     #475569, ~20px, normal, Times New Roman
 *   - Footer:   #2a9d87, ~20px, normal, Times New Roman
 *
 * Type sizes are expressed in cqi (container query inline units) so
 * the document keeps the same proportions whether it's rendered as
 * a small preview, in a modal, or at full A4 size on a printable page.
 * cqi resolves against the element's content-box width, so values are
 * computed against the 990px text column (A4 minus 2 x 100px margin)
 * rather than the 1190px paper width.
 *
 * @package User Profile Pro
 * @since 1.x
 */

/* ------------------------------------------------------------------
 * Document (the A4 sheet itself)
 *
 * Two presentations of the same document:
 *
 *   - Default (used by the homepage preview + modal): fluid layout
 *     based on container query units (cqi). The document adapts its
 *     type sizes to the container width, so it looks correct whether
 *     it's a small preview in a homepage column or full-size in the
 *     modal. The user's chosen paper/orientation/margin/font sizes
 *     are NOT honored here — this presentation is for browsing.
 *
 *   - .upp-print-stage scope (used by the print view): absolute
 *     mm-based layout. The document is rendered at its true paper
 *     dimensions with the user's template values applied via the
 *     --upp-doc-* CSS variables set inline on the article. This is
 *     the presentation used for "Save as PDF".
 *
 * Both presentations share colors, footer styling, and the modal
 * presentation. The split is only on sizing.
 * ------------------------------------------------------------------ */
.upp-life-document {
    --upp-doc-bg: #faf9f6;
    --upp-doc-title-color: #1e293b;
    --upp-doc-heading-color: #d4af37;
    --upp-doc-body-color: #475569;
    --upp-doc-footer-color: #2a9d87;
    --upp-doc-margin-x: 8.4%;     /* 100px on a 1190px-wide canvas */
    --upp-doc-margin-top: 5.94%;  /* 100px on a 1684px-tall canvas */
    --upp-doc-margin-bottom: 2.4%; /* Footer baseline = canvas.height - 40px */

    container-type: inline-size;
    background-color: var(--upp-doc-bg);
    color: var(--upp-doc-body-color);
    font-family: 'Times New Roman', Times, serif;

    aspect-ratio: 1190 / 1684;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    padding: var(--upp-doc-margin-top) var(--upp-doc-margin-x) var(--upp-doc-margin-bottom);
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.12);

    display: flex;
    flex-direction: column;
}

/* Title */
.upp-life-document__header {
    text-align: center;
    flex: 0 0 auto;
}

.upp-life-document .upp-life-document__title,
.upp-life-document--full .upp-life-document__title {
    /* Increased specificity + !important to override BuddyBoss theme's
       site-wide h3 rule that forces Cinzel uppercase on all headings.
       Sizes are expressed in cqi against the content-box width of the
       article (paper width minus 2 x 8.4% padding = 83.2% of paper).
       80/990 = 8.08cqi; reduced to 6.61cqi to ensure single-line fit. */
    color: var(--upp-doc-title-color);
    font-family: 'Times New Roman', Times, serif !important;
    font-weight: 700;
    font-size: 6.61cqi;
    line-height: 1.15;
    margin: 0;
    padding: 0;
    text-transform: none !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
}

/* Body (stream of words) */
.upp-life-document__body {
    flex: 1 1 auto;
    margin-top: 3.4cqi; /* 40% of margin */
}

.upp-life-document__stream {
    color: var(--upp-doc-body-color);
    font-family: 'Times New Roman', Times, serif;
    font-weight: 400;
    /* Midway between 20/990=2.02cqi and 2.06cqi, leaves breathing room before the footer. */
    font-size: 2.04cqi;
    line-height: 1.5;
    text-align: left;
    hyphens: none;
    margin: 0;
}

.upp-life-document__heading {
    color: var(--upp-doc-heading-color);
    font-family: 'Times New Roman', Times, serif;
    font-weight: 700;
    /* Kept proportional to body (22/20 ratio of the original). */
    font-size: 2.24cqi;
}

/* Footer */
.upp-life-document__footer {
    flex: 0 0 auto;
    margin-top: auto; /* Push footer to the very bottom of the A4 sheet */
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1em;

    color: var(--upp-doc-footer-color);
    font-family: 'Times New Roman', Times, serif;
    font-weight: 400;
    font-size: 2.02cqi; /* 20/990, matches author_config.size = 20px */
}

.upp-life-document__footer-left,
.upp-life-document__footer-right {
    color: var(--upp-doc-footer-color);
}

/* ------------------------------------------------------------------
 * Print stage presentation
 *
 * When the document is rendered for printing (inside .upp-print-stage),
 * switch from cqi-based fluid layout to absolute mm-based layout.
 * Values come from --upp-doc-* CSS variables set inline by PHP based
 * on the user's template (paper, orientation, margin, font sizes).
 * ------------------------------------------------------------------ */
.upp-print-stage .upp-life-document {
    container-type: normal;
    aspect-ratio: auto;
    width: var(--upp-doc-w);
    /* Slightly under the full page height to absorb sub-pixel rounding
       that otherwise pushes pagination to a second page. The visible
       difference is sub-millimeter; the practical difference is one
       page instead of two. */
    height: calc(var(--upp-doc-h) - 2mm);
    max-width: 100%;
    padding:
        var(--upp-doc-padding-top)
        var(--upp-doc-margin)
        var(--upp-doc-padding-bottom);
    /* Match the on-screen behavior in print: content that does not
       fit in the fixed sheet height is clipped, not paginated to a
       second page. Mirrors how the PNG canvas truncates overflow,
       so what the user sees in the tab is what they get in the PDF. */
    overflow: hidden;
    page-break-after: avoid;
    page-break-inside: avoid;
    break-after: avoid;
    break-inside: avoid;
}

.upp-print-stage .upp-life-document__body {
    margin-top: var(--upp-doc-body-gap);
}

.upp-print-stage .upp-life-document__title {
    font-size: var(--upp-doc-title-size);
}

.upp-print-stage .upp-life-document__stream {
    font-size: var(--upp-doc-body-size);
}

.upp-print-stage .upp-life-document__heading {
    font-size: var(--upp-doc-heading-size);
}

.upp-print-stage .upp-life-document__footer {
    font-size: var(--upp-doc-footer-size);
}

/* ------------------------------------------------------------------
 * Preview (clipped top portion with gradient + tap label)
 * ------------------------------------------------------------------ */
.upp-life-document-preview {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    cursor: zoom-in;
    overflow: hidden;
    /* Crop to the top third of the A4. Aspect-ratio keeps the same
       proportion on desktop and mobile, matching the original PNG preview. */
    aspect-ratio: 1190 / 560;
}

.upp-life-document-preview:focus {
    outline: 2px solid #2a9d87;
    outline-offset: 4px;
}

.upp-life-document-preview__fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 25%;
    background: linear-gradient(
        to bottom,
        rgba(250, 249, 246, 0) 0%,
        rgba(250, 249, 246, 0.7) 55%,
        rgba(250, 249, 246, 1) 100%
    );
    pointer-events: none;
}

.upp-life-document-preview__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.5rem;
    text-align: center;
    pointer-events: none;
}

.upp-life-document-preview__label span {
    display: inline-block;
    background-color: rgba(30, 41, 59, 0.85);
    color: #faf9f6;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 0.5rem 1rem;
    border-radius: 999px;
}

/* ------------------------------------------------------------------
 * Modal (full A4 view on tap)
 * ------------------------------------------------------------------ */
.upp-life-document-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background-color: rgba(11, 17, 32, 0.92);
    /* align-items: flex-start so a document taller than the viewport
       can be scrolled from its top edge instead of being clipped by
       flex centering. */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4rem 1rem 2rem;
    box-sizing: border-box;
    overflow-y: auto;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.upp-life-document-modal[hidden] {
    display: none;
}

.upp-life-document-modal.is-open {
    opacity: 1;
}

.upp-life-document-modal__viewport {
    width: 100%;
    max-width: min(900px, 95vw);
    /* A4 portrait at max width keeps its aspect ratio */
}

.upp-life-document--full {
    /* Override preview cropping when shown in modal */
    max-height: none;
}

.upp-life-document-modal__close {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(250, 249, 246, 0.12);
    color: #faf9f6;
    cursor: pointer;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
}

.upp-life-document-modal__close svg {
    display: block;
}

.upp-life-document-modal__close:hover,
.upp-life-document-modal__close:focus {
    background-color: rgba(250, 249, 246, 0.22);
    outline: 2px solid #d4af37;
    outline-offset: 2px;
}

/* Prevent body scroll when modal is open */
body.upp-life-document-modal-open {
    overflow: hidden;
}

/* ------------------------------------------------------------------
 * Inline PDF link (sits in the caption under the preview)
 * ------------------------------------------------------------------ */
.upp-life-document-pdf-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    color: #d4af37;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s ease;
}

.upp-life-document-pdf-link:hover,
.upp-life-document-pdf-link:focus {
    color: #b8923a;
}

.upp-life-document-pdf-link__icon {
    flex-shrink: 0;
}

/* ------------------------------------------------------------------
 * Small-screen tuning
 * ------------------------------------------------------------------ */
@media (max-width: 640px) {
    .upp-life-document-modal {
        padding: 1rem 0.5rem;
    }
}