/*
 * Typesetting Utilities — Blank Page Theme
 *
 * These classes control page layout when rendered by Paged.js.
 * They are the production counterparts to the labeled versions
 * visible in the editor (editor-style.css).
 *
 * Apply these classes in your HTML to control breaks, columns,
 * spacing, and element behavior across printed pages.
 */

/* ============================================
   PAGE BREAKS
   ============================================ */

.page-break {
    break-before: page;
}

.page-break-right {
    break-before: right;
}

/* ============================================
   TWO-COLUMN LAYOUTS
   ============================================ */

.two-col-snake {
    column-count: 2;
    column-gap: 0.3in;
    column-fill: balance;
    break-inside: avoid;
}

.two-col-justified {
    column-count: 2;
    column-gap: 0.3in;
    column-fill: balance;
    text-align: justify;
    break-inside: avoid;
}

/* ============================================
   FULL WIDTH (breaks out of columns)
   ============================================ */

.full-width {
    column-span: all;
    width: 100%;
    margin: 1em 0;
}

/* ============================================
   KEEP TOGETHER — prevent splitting across pages
   ============================================ */

.keep-together {
    break-inside: avoid;
}

/* ============================================
   SPACERS — vertical space between elements
   ============================================ */

.spacer-quarter { height: 0.25in; }
.spacer-half    { height: 0.5in; }
.spacer-one     { height: 1in; }
.spacer-two     { height: 2in; }

/* ============================================
   LINE SPACING OVERRIDES
   ============================================ */

.tight {
    line-height: 1.3;
}
.tight p {
    margin-bottom: 0.4em;
}

.airy {
    line-height: 1.85;
}
.airy p {
    margin-bottom: 1em;
}

/* ============================================
   FONT SIZE OVERRIDES
   ============================================ */

.small-text {
    font-size: 0.85em;
}

.fine-print {
    font-size: 0.75em;
    line-height: 1.4;
    color: #555;
}

/* ============================================
   ALIGNMENT AND INDENTATION
   ============================================ */

.centered-block {
    text-align: center;
    margin: 1.5em 0;
}

.indented {
    margin-left: 1.5em;
    margin-right: 1.5em;
}

.indented-deep {
    margin-left: 3em;
    margin-right: 3em;
}

/* ============================================
   EXERCISE AND REFLECTION CONTAINERS
   ============================================ */

.exercise,
.reflection-questions {
    break-inside: avoid;
    border: 1pt solid #ccc;
    padding: 1em;
    margin: 1.2em 0;
    background: #fafafa;
}

/* ============================================
   REFERENCES (hanging indent)
   ============================================ */

.references p {
    padding-left: 2em;
    text-indent: -2em;
    font-size: 0.9em;
}

/* ============================================
   BREAK CONTROL — keep element with next
   ============================================ */

.no-break-after {
    break-after: avoid;
}

/* ============================================
   FULL-PAGE IMAGE / EDITORIAL CARTOON
   ============================================ */

.full-page-image {
    text-align: center;
    break-inside: avoid;
    margin: 1em 0;
}

.full-page-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Give a full-page image its own page */
.full-page-image-alone {
    break-before: page;
    break-after: page;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80%;
}

.full-page-image-alone img {
    max-width: 100%;
    max-height: 90%;
    height: auto;
}