/* One Article Paper - Clip Styles */
/* Theme-agnostic: all styles are scoped to .oap-* classes */

.oap-newspaper-clip {
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    word-break: break-word;
}

.oap-newspaper-clip *,
.oap-newspaper-clip *::before,
.oap-newspaper-clip *::after {
    box-sizing: border-box;
}

/* Page info bar (site URL + generated date/time) */
.oap-page-info {
    flex-wrap: wrap;
    gap: 6px;
    word-break: break-all;
}

/* Header */
.oap-header {
    flex-wrap: wrap;
}
.oap-header img {
    max-width: 100%;
    height: auto;
}

/* Meta bar */
.oap-meta-bar {
    flex-wrap: wrap;
    gap: 4px;
}

/* Body */
.oap-body {
    overflow: hidden;
}

/* Title */
.oap-title {
    word-break: break-word;
    hyphens: auto;
}

/* Content columns */
.oap-content-columns {
    orphans: 2;
    widows: 2;
}

.oap-content-columns p {
    margin: 0 0 6px 0;
}

.oap-content-columns img {
    max-width: 100%;
    height: auto;
    display: block;
}

.oap-content-columns h1,
.oap-content-columns h2,
.oap-content-columns h3,
.oap-content-columns h4 {
    break-after: avoid;
    margin: 8px 0 4px 0;
    font-size: 1em;
    font-weight: 700;
}

/* Thumbnail variants */
.oap-thumb-left {
    shape-outside: margin-box;
}

.oap-thumb-inline img,
.oap-thumb-left img,
.oap-thumb-top img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

/* Watermark */
.oap-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-35deg);
    font-size: 72px;
    font-weight: 900;
    color: #000;
    pointer-events: none;
    white-space: nowrap;
    z-index: 0;
    letter-spacing: 6px;
}

/* Footer */
.oap-footer {
    flex-wrap: wrap;
    gap: 6px;
}

/* Actions (buttons row appended to content) */
.oap-actions {
    margin: 12px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.oap-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: opacity .15s;
}

.oap-btn:hover {
    opacity: .85;
    text-decoration: none;
}

/* Share buttons */
.oap-share-buttons {
    flex-wrap: wrap;
}

.oap-share-btn {
    text-decoration: none;
    transition: opacity .15s;
}

.oap-share-btn:hover {
    opacity: .8;
}

/* Responsive: 1 column on small screens */
@media (max-width: 480px) {
    .oap-content-columns {
        column-count: 1 !important;
    }
    .oap-title {
        font-size: 20px !important;
    }
    .oap-thumb-left {
        float: none !important;
        max-width: 100% !important;
        margin: 0 0 8px 0 !important;
    }
}

/* Print */
@media print {
    .oap-actions,
    .oap-share-buttons,
    .oap-share-dropdown,
    .oap-clip-controls,
    .oap-clip-actions,
    .oap-share-row,
    .oap-trending-bar {
        display: none !important;
    }

    .oap-newspaper-clip {
        border: none !important;
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    .oap-content-columns {
        column-gap: 8px;
    }
}

/* ===== PRINT-SPECIFIC: clean newspaper output matching e-paper style ===== */
@media print {
    /* Hide everything except the clip */
    body > *:not(.oap-cp-page):not(.oap-newspaper-clip) { display: none !important; }
    .oap-cp-nav, .oap-cp-toolbar, .oap-cp-share,
    .oap-cp-trend, .oap-cp-status,
    .oap-actions, .oap-share-dropdown,
    .oap-btn, .oap-cp-btn, .oap-cb { display: none !important; }

    html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
    .oap-cp-page { padding: 0 !important; max-width: 100% !important; }
    .oap-cp-clip { border: none !important; padding: 0 !important; background: #fff !important; }
    .oap-newspaper-clip {
        max-width: 100% !important;
        border: none !important;
        box-shadow: none !important;
        page-break-inside: avoid;
    }

    /* Ensure columns print correctly */
    .oap-content-columns {
        -webkit-column-break-inside: avoid;
        break-inside: auto;
    }

    /* Header prints in full color */
    .oap-page-info { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .oap-header { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .oap-meta-bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .oap-footer { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .oap-footer-dots span { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ===== CONTENT OVERFLOW PREVENTION ===== */
/* Stop "More Read" / related posts widgets from ever appearing in clip */
.oap-content-columns .more-read,
.oap-content-columns .related-posts,
.oap-content-columns .you-may-like,
.oap-content-columns [class*="more-read"],
.oap-content-columns [class*="related"],
.oap-content-columns [class*="foxiz"],
.oap-content-columns [class*="widget"],
.oap-content-columns [class*="sidebar"],
.oap-content-columns [class*="share-btn"],
.oap-content-columns [class*="whatsapp"],
.oap-content-columns a[href*="whatsapp"],
.oap-content-columns .post-edit-link,
.oap-content-columns .edit-link { display: none !important; }

/* Images inside columns — no height, no overflow */
.oap-content-columns img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    break-inside: avoid;
}

/* Prevent column content from creating extra print pages */
.oap-newspaper-clip {
    overflow: hidden;
}
.oap-content-columns {
    overflow: hidden;
    max-height: none;
}

/* Print: force single-page layout by scaling */
@media print {
    .oap-newspaper-clip {
        transform-origin: top left;
    }
    /* Keep columns from breaking mid-paragraph */
    .oap-content-columns p { break-inside: avoid; }
    .oap-content-columns h2,
    .oap-content-columns h3,
    .oap-content-columns h4 { break-after: avoid; }
}
