* { box-sizing:border-box; }
html,body {
    margin:0;
    background:#edf2f8;
    font-family:Arial,sans-serif;
}
.toolbar {
    background:#123b70;
    padding:14px;
    text-align:center;
}
.toolbar a,.toolbar button {
    display:inline-block;
    margin:4px;
    padding:12px 18px;
    background:white;
    color:#123b70;
    border:0;
    border-radius:6px;
    font-weight:bold;
    cursor:pointer;
    text-decoration:none;
}
.wrapper {
    width:min(1100px,100%);
    margin:20px auto;
}
.cert {
    position:relative;
    width:100%;
    container-type:inline-size;
}
.cert img {
    width:100%;
    display:block;
}
.name {
    position:absolute;
    left:16%;
    top:29.3%;
    width:73%;
    height:4.3%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:Georgia,serif;
    font-size:clamp(10px,2.6cqw,30px);
    font-weight:bold;
    color:#142c50;
    white-space:nowrap;
    text-align:center;
}
.date {
    position:absolute;
    left:29.5%;
    top:47.3%;
    width:18%;
    height:3%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:clamp(8px,1.55cqw,18px);
    font-weight:bold;
    color:#142c50;
    white-space:nowrap;
}
@page { size:landscape; margin:0; }
@media print {
    html,body { background:white; }
    .toolbar { display:none!important; }
    .wrapper { width:100%;margin:0; }
    .cert {
        width:100%;
        break-inside:avoid;
        print-color-adjust:exact;
        -webkit-print-color-adjust:exact;
    }
}


/* Corrected positioning for cert_bg.png */
.cert {
    position: relative !important;
    width: 100% !important;
    container-type: inline-size;
}
.cert img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}
.cert .name {
    position: absolute !important;
    left: 16% !important;
    top: 36.5% !important;
    width: 73% !important;
    height: 5% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(12px, 2.5cqw, 30px) !important;
    color: #102943 !important;
    font-weight: bold !important;
    white-space: nowrap !important;
}
.cert .date {
    position: absolute !important;
    left: 29.5% !important;
    top: 57% !important;
    width: 18% !important;
    height: 3.5% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(9px, 1.45cqw, 17px) !important;
    color: #102943 !important;
    white-space: nowrap !important;
}

/* ===== A4 landscape compression patch ===== */
.wrapper {
    max-width: 1000px !important;
    margin: 18px auto !important;
    padding: 0 8px !important;
}

@page {
    size: A4 landscape;
    margin: 8mm;
}

@media print {
    html, body {
        width: 297mm;
        height: 210mm;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    .toolbar {
        display: none !important;
    }

    .wrapper {
        width: 281mm !important;   /* A4 width minus margins */
        max-width: 281mm !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .cert {
        width: 100% !important;
        margin: 0 auto !important;
        box-shadow: none !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    .cert img {
        width: 100% !important;
        height: auto !important;
    }
}

/* ===== Score block on certificate ===== */
.score-box{
    position:absolute;
    left:8.5%;
    top:64.5%;
    width:31%;
    min-height:16%;
    padding:1.1% 1.4%;
    background:rgba(255,255,255,0.35);
    border:2px solid rgba(20,44,80,0.30);
    border-radius:10px;
    text-align:center;
}

.score-title{
    font-family:Arial, sans-serif;
    font-size:clamp(8px,1.45cqw,18px);
    color:#9a1a1a;
    margin-bottom:7%;
}

.score-row{
    display:flex;
    justify-content:center;
    align-items:baseline;
    gap:10%;
    margin-bottom:4%;
}

.score-mark{
    font-family:Georgia, "Times New Roman", serif;
    font-size:clamp(14px,2.4cqw,34px);
    font-weight:700;
    color:#c11414;
}

.score-percent{
    font-family:Georgia, "Times New Roman", serif;
    font-size:clamp(18px,3.1cqw,44px);
    font-weight:700;
    color:#d10000;
}

.score-status{
    font-family:Arial, sans-serif;
    font-size:clamp(18px,3.2cqw,46px);
    line-height:1;
    font-weight:500;
    color:#d10000;
    text-transform:lowercase;
}

@media print{
    .score-box{
        print-color-adjust:exact;
        -webkit-print-color-adjust:exact;
    }
}

/* ===== OJT Certificate Score - Compact Navy Style ===== */

.score-box {
    left: 10% !important;
    top: 66% !important;
    width: 26% !important;
    min-height: 0 !important;
    padding: 0.5% !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
}

.score-title {
    font-size: clamp(8px, 1.15cqw, 14px) !important;
    font-weight: 600 !important;
    color: #123B70 !important;
    margin-bottom: 4% !important;
}

.score-row {
    gap: 8% !important;
    margin-bottom: 3% !important;
}

.score-mark {
    font-size: clamp(12px, 1.9cqw, 25px) !important;
    color: #123B70 !important;
}

.score-percent {
    font-size: clamp(15px, 2.4cqw, 31px) !important;
    color: #123B70 !important;
}

.score-status {
    font-size: clamp(14px, 2.3cqw, 30px) !important;
    font-weight: 700 !important;
    color: #123B70 !important;
    text-transform: uppercase !important;
}