/* =====================================
   Certificate A4 Landscape CSS
===================================== */
/* Define the Regular Font */


@page {
    size: A4 landscape;
    margin: 0;
}


* {
    box-sizing: border-box;
}


body {

    margin:0;

    padding:0;

    background:#ffffff;

    font-family: "Times New Roman", serif;

}


@media screen {

    body {

        text-align:center;

    }

}



/* Main Certificate Area — one per printed/PDF page */

.certificate {


    width: 297mm;

    height: 210mm;

    position: relative;

    overflow:hidden;

    background:#fff;


    page-break-after: always;

    break-after: page;


    margin: 0 auto 20px;


}


.certificate-last {

    page-break-after: auto;

    break-after: auto;

}



/* Print / Download button (hidden on the printed/PDF output) */

.no-print {


    text-align:center;

    padding:14px;

}


.no-print button {


    font-family: "Times New Roman", serif;

    font-size:16px;

    font-weight:bold;

    padding:10px 22px;

    color:#fff;

    background:#67307c;

    border:none;

    border-radius:4px;

    cursor:pointer;

}


.no-print button:hover {

    background:#004d43;

}



/* Background Image (already contains the full certificate design/layout) */

.background {


    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:100%;


    background-image:url("./asserts/ijrdes-certificate-1-empty.png");

    background-size:100% 100%;

    background-repeat:no-repeat;

    opacity:1;

}



/* Author Name — sits on the blank line under "This is to certify that" */

.author-name {


    position:absolute;

    left:49.82%;

    bottom:60.5%;

    width:34%;

    transform:translateX(-50%);

    text-align:center;

    white-space:nowrap;

    font-size:7mm;

    font-weight:bold;

    font-variant:small-caps;

    color:#67307c;

}



/* Volume / Issue — continues the "and has got published in" line already baked into the background.
   Anchored to that line's measured baseline (not center-transformed) so it lines up regardless of font substitution. */

.volume-issue {


    position:absolute;

    left:43.0%;

    bottom:48.72%;

    line-height:1;

    text-align:left;

    white-space:nowrap;

    font-size:4mm;

    font-weight:bold;

    color:#67307c;

}



/* Paper Title — sits above the blank line under "entitled" */

.paper-title {


    position:absolute;

    left:49.99%;

    bottom:34.6%;

    width:55%;

    transform:translateX(-50%);

    text-align:center;

    line-height:1.25;

    font-size:5.5mm;

    font-weight:bold;

    font-variant:small-caps;

    color:#67307c;

}



/* DOI — sits between the title line and the description paragraph */

.doi {


    position:absolute;

    left:49.99%;

    top:68.6%;

    width:70%;

    transform:translate(-50%, -50%);

    text-align:center;

    font-size:3mm;

    color:#67307c;

}



/* Date + Certificate No — sits under "Editor-in-Chief" */

.date-certno {


    position:absolute;

    left:71.0%;

    top:93.7%;

    transform:translate(-50%, -50%);

    text-align:center;

    white-space:nowrap;

    font-size:2.6mm;

    color:#333;

}





/* PDF / Print */


@media print {


    body {


        -webkit-print-color-adjust: exact;

        print-color-adjust: exact;

    }


    .no-print {

        display:none;

    }


    .certificate {

        margin:0;

        box-shadow:none;

    }


}




/* Screen-only: the certificate is a fixed 297mm (~1122px) wide, so most
   preview panes are narrower than it. Browsers refuse to "center" an
   overflowing block by hiding part of it off an unreachable negative
   scroll area, so centering alone has no visible effect — the fix is to
   shrink it to fit, then center the smaller box. Print/PDF is untouched. */

@media screen {


    .certificate {

        display:inline-block;

        text-align:left;

        zoom:0.6;

        box-shadow: 0 0 12px rgba(0,0,0,0.2);

    }


}