<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Certificate — {{studentName}}</title>
    <style>
        @page { margin: 0; }
        * { box-sizing: border-box; }
        body { font-family: DejaVu Serif, Georgia, serif; color: #1a2238; margin: 0; }

        /* dompdf has no calc(); absolute insets pin the frame to one page reliably. */
        .border-outer { position: absolute; top: 8mm; left: 8mm; right: 8mm; bottom: 8mm; border: 3px solid {{brandPrimary}}; }
        .border-inner { position: absolute; top: 10mm; left: 10mm; right: 10mm; bottom: 10mm; border: 1px solid #b08d3f; }
        .content { position: absolute; top: 16mm; left: 20mm; right: 20mm; bottom: 16mm; text-align: center; }

        .logo { max-height: 58px; margin-bottom: 6px; }
        .school { font-size: 22px; letter-spacing: 3px; text-transform: uppercase; font-weight: bold; margin: 0; }
        .motto { font-style: italic; font-size: 11px; color: #6b6b6b; margin-top: 2px; }
        .address { font-size: 10px; color: #777; margin-top: 2px; }

        .title { font-size: 32px; letter-spacing: 8px; text-transform: uppercase; color: #b08d3f; margin: 20px 0 2px 0; font-weight: bold; }
        .subtitle { font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: #555; margin-bottom: 16px; }

        .intro { font-size: 13px; color: #444; margin: 6px 0; }
        .name { font-size: 30px; font-weight: bold; color: #1a2238; margin: 6px 0; border-bottom: 1px solid #b08d3f; display: inline-block; padding: 0 24px 4px 24px; }
        .body-text { font-size: 13px; color: #444; line-height: 1.7; width: 78%; margin: 12px auto 0 auto; }
        .body-text strong { color: #1a2238; }

        .sign { position: absolute; bottom: 16mm; left: 20mm; right: 20mm; }
        .sign td { font-size: 11px; color: #333; width: 50%; text-transform: uppercase; letter-spacing: 1px; padding: 0 22px; }
        .sign .line { border-top: 1px solid #555; padding-top: 4px; }

        .footer { position: absolute; bottom: 6mm; left: 20mm; right: 20mm; font-size: 9px; color: #999; text-align: center; }
    </style>
</head>
<body>
<div class="border-outer"></div>
<div class="border-inner"></div>

<div class="content">
    {{#logoPath}}<img src="{{logoPath}}" class="logo" alt="logo">{{/logoPath}}
    <p class="school">{{schoolName}}</p>
    {{#schoolMotto}}<div class="motto">{{schoolMotto}}</div>{{/schoolMotto}}
    {{#schoolAddress}}<div class="address">{{schoolAddress}}</div>{{/schoolAddress}}

    <div class="title">Certificate</div>
    <div class="subtitle">of Graduation</div>

    <p class="intro">This is to certify that</p>
    <div class="name">{{studentName}}</div>

    <p class="body-text">
        having fulfilled all the requirements of the
        <strong>{{programOr}}</strong>,
        is hereby awarded this certificate of graduation{{yearClause}}.
    </p>
</div>

<table class="sign">
    <tr>
        <td><div class="line">Registrar</div></td>
        <td><div class="line">Principal</div></td>
    </tr>
</table>

<div class="footer">
    Certificate No: {{certificateNumber}}{{#regNo}} &nbsp;·&nbsp; Reg No: {{regNo}}{{/regNo}}{{#issuedOn}} &nbsp;·&nbsp; Issued: {{issuedOn}}{{/issuedOn}}
</div>
</body>
</html>
