/**
 * assets/css/poh-print.css
 *
 * Applied only when the browser is printing (or using "Save as PDF").
 * Loaded with media="print" in poh_enqueue_assets().
 *
 * Goals:
 *  - Hide navigation, buttons, and interactive chrome
 *  - Force table to fit on paper
 *  - Ensure colours print on colour printers
 */

@media print {

    /* ── Hide screen-only elements ─────────────────────────────────────── */
    .poh-no-print,
    .poh-res-hero__actions {
        display: none !important;
    }

    /* ── Hero: force white bg for print ────────────────────────────────── */
    .poh-res-hero {
        background: #fff !important;
        padding: 16px 0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .poh-res-hero__title {
        color: #1a202c !important;
        font-size: 16pt;
    }

    .poh-res-hero__eyebrow,
    .poh-res-hero__meta {
        color: #4a5568 !important;
    }

    .poh-res-hero__inner {
        max-width: 100%;
    }

    .poh-res-body {
        max-width: 100%;
        padding: 12px 0 0;
    }
    @page {
        size: A4 landscape;
        margin: 15mm 12mm;
    }

    body {
        font-size: 11pt;
        background: #fff !important;
        color: #000 !important;
    }

    /* ── Wrapper ────────────────────────────────────────────────────────── */
    .poh-wrap {
        max-width: 100%;
        padding: 0;
    }

    /* ── Hero: strip gradient, print as plain header ───────────────────── */
    .poh-hero {
        background: #fff !important;
        color: #000 !important;
        border: 2px solid #3474af;
        border-radius: 4px;
        padding: 16px !important;
    }

    .poh-hero__title,
    .poh-hero__subtitle {
        color: #000 !important;
    }

    .poh-scale {
        display: none; /* not useful on paper */
    }

    /* ── Result header ──────────────────────────────────────────────────── */
    .poh-result-header__title {
        font-size: 14pt;
    }

    /* ── Table ──────────────────────────────────────────────────────────── */
    .poh-table-wrap {
        box-shadow: none;
        overflow: visible;
    }

    .poh-result-table {
        font-size: 9pt;
        page-break-inside: avoid;
    }

    .poh-result-table th,
    .poh-result-table td {
        padding: 6px 8px;
        border: 1px solid #bbb;
    }

    /* Force background colours to print */
    .poh-result-table__head-row th {
        background: #3474af !important;
        color: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .poh-result-table__competency {
        background: #e8f1fa !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .poh-score-badge {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* ── Progress bar ───────────────────────────────────────────────────── */
    .poh-overall {
        background: #f0f7ff !important;
        border: 1px solid #3474af;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Remove overflow:hidden — browser PDF renderer clips children same as html2canvas */
    .poh-progress-wrap {
        background: #e9ecef !important;
        border-radius: 99px !important;
        height: 18px !important;
        overflow: visible !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .poh-score-strip__bar-wrap {
        overflow: visible !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Bars: explicit px height so height:100% inside overflow:visible resolves */
    .poh-progress-bar {
        height: 18px !important;
        border-radius: 99px !important;
        display: block !important;
        transition: none !important;
        animation: none !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .poh-score-strip__bar {
        transition: none !important;
        animation: none !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Solid background-color for every colour variant — no CSS vars, no gradients */
    .poh-progress-bar.poh-bar--red,
    .poh-score-strip__bar.poh-badge--red   { background-color: #e53e3e !important; background-image: none !important; }

    .poh-progress-bar.poh-bar--yellow,
    .poh-score-strip__bar.poh-badge--yellow { background-color: #d69e2e !important; background-image: none !important; }

    .poh-progress-bar.poh-bar--orange,
    .poh-score-strip__bar.poh-badge--orange { background-color: #dd6b20 !important; background-image: none !important; }

    .poh-progress-bar.poh-bar--green,
    .poh-score-strip__bar.poh-badge--green  { background-color: #38a169 !important; background-image: none !important; }

    /* ── Page break hints ───────────────────────────────────────────────── */
    .poh-overall {
        page-break-inside: avoid;
    }

    /* ── Legend inner table ─────────────────────────────────────────────── */
    .poh-legend-table {
        font-size: 8pt;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .poh-legend-table thead th {
        background: #e8f1fa !important;
        color: #255a8e !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .poh-legend-row--active {
        background: #e8f1fa !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .poh-legend-row--active td {
        font-weight: 700 !important;
        color: #255a8e !important;
    }
}
/* Course logo bar — print */
.poh-logo-bar { text-align: center; padding: 10px 0 16px; }
.poh-logo { width: 250px; height: 250px; object-fit: contain; display: inline-block; }