/*
 * DFB certificate PDF layout.
 *
 * The certificate PDF is the mPDF rendering of the minimal pdfCertificatePage
 * page type (web2pdf middleware). All static artwork lives in the full-page
 * A4 background image on the certificate record; this stylesheet only places
 * the dynamic parts: participant name, issue date, QR code.
 *
 * mPDF only honours position:fixed on direct children of body, which a CMS
 * content element can never be. The layout therefore uses a plain flow with
 * spacer blocks on a zero-margin page (see the certificate TypoScript
 * constants). Coordinates are page-absolute in mm, measured from the approved
 * sample PDF (A4 portrait): name band at y 75-106mm, issue date right-aligned
 * above the QR code, QR code bottom right at x 168mm / y 261mm.
 *
 * The media-less rules drive the mPDF output (CSSselectMedia = print also
 * applies media-less rules); the screen block restyles the same markup for
 * the regular browser view.
 */

@page {
    margin: 0mm;
}

.dfb-certificate__spacer-top {
    height: 75mm;
}

.dfb-certificate__name {
    margin: 0 14mm;
    height: 31mm;
    line-height: 31mm;
    text-align: center;
    font-family: sans-serif;
    font-size: 32pt;
    color: #1d1d1b;
    background-image: url('security_bg.png');
    background-repeat: repeat;
    background-size: 400px;
}

.dfb-certificate__spacer-middle {
    height: 148mm;
}

.dfb-certificate__issued {
    margin: 0 16mm 0 14mm;
    height: 7mm;
    text-align: right;
    font-family: sans-serif;
    font-size: 10pt;
    color: #1d1d1b;
}

.dfb-certificate__qr {
    margin: 0 0 0 168mm;
    width: 26mm;
    height: 26mm;
    background-color: #ffffff;
}

.dfb-certificate__qr img.qrcode-image {
    display: block !important;
    width: 26mm !important;
    height: 26mm !important;
    max-width: none !important;
    float: none !important;
}

@media screen {
    .dfb-certificate {
        max-width: 720px;
        margin: 0 auto;
        text-align: center;
    }

    .dfb-certificate__spacer-top,
    .dfb-certificate__spacer-middle {
        height: 0;
    }

    .dfb-certificate__name {
        margin: 30px auto;
        height: auto;
        line-height: normal;
        padding: 30px 20px;
    }

    .dfb-certificate__issued {
        margin: 0 0 20px 0;
        height: auto;
        text-align: center;
    }

    .dfb-certificate__qr {
        margin: 0 auto;
    }
}