/* ============================================================
   haccpleren.nl — Certificaat (definitief ontwerp 23-9-2026)
   Gedeeld door mijn-account.php, cursus.php en certificaat-weergave.php.
   Zie CLAUDE.md "certificaat-herontwerp" voor de spec.

   Schaal: het ontwerp is gemaakt op 1400×990 px (A4 liggend). Alle maten
   staan in calc(var(--s) * Npx); certificaat.js zet --s = breedte/1400,
   zodat het certificaat op elke breedte (en in html2canvas) identiek
   uitkomt. Achtergrond: op scherm crème; bij print/PDF geen achtergrond
   (het papier levert de kleur — Joris print op crème 200-250 g).
   ============================================================ */

@font-face{font-family:'HL Garamond';font-weight:400;font-style:normal;font-display:swap;src:url('fonts/eb-garamond-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'HL Garamond';font-weight:400;font-style:italic;font-display:swap;src:url('fonts/eb-garamond-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'HL Garamond';font-weight:600;font-style:normal;font-display:swap;src:url('fonts/eb-garamond-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'HL Cinzel';font-weight:400;font-display:swap;src:url('fonts/cinzel-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'HL Pinyon';font-weight:400;font-display:swap;src:url('fonts/pinyon-script-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'HL Vibes';font-weight:400;font-display:swap;src:url('fonts/great-vibes-latin-400-normal.woff2') format('woff2')}

.hl-cert{
  --s:1;
  --ink:#1b1f1c; --green:#146b4a; --muted:#585f5a; --paper:#f5eedb;
  position:relative; width:100%; aspect-ratio:297/210; box-sizing:border-box;
  background:var(--paper);
  background-image:radial-gradient(ellipse at 25% 15%,rgba(255,255,255,.5),transparent 55%),radial-gradient(ellipse at 80% 90%,rgba(170,150,110,.16),transparent 55%);
  font-family:'HL Garamond',Georgia,'Times New Roman',serif; color:var(--ink);
  overflow:hidden; text-align:center; line-height:1.3;
  -webkit-font-smoothing:antialiased;
}
.hl-cert *{box-sizing:border-box;margin:0;padding:0}
.hl-cert.hl-cert--plain{background:#fff;background-image:none}        /* voor PDF/print */
.hl-cert .hl-b1{position:absolute;inset:calc(var(--s)*30px);border:calc(var(--s)*12px) solid var(--green)}
.hl-cert .hl-b2{position:absolute;inset:calc(var(--s)*48px);border:calc(var(--s)*1px) solid var(--green)}
.hl-cert .hl-content{position:absolute;inset:calc(var(--s)*80px) calc(var(--s)*120px);display:flex;flex-direction:column;align-items:center;justify-content:space-between}
.hl-cert .hl-top,.hl-cert .hl-mid{display:flex;flex-direction:column;align-items:center;width:100%}
.hl-cert .hl-wordmark{height:calc(var(--s)*44px);width:auto;margin-top:calc(var(--s)*4px);display:block}
.hl-cert .hl-brand-sub{font-family:'HL Cinzel',serif;font-size:calc(var(--s)*12.5px);letter-spacing:calc(var(--s)*4px);color:var(--muted);margin-top:calc(var(--s)*10px);text-transform:uppercase}
.hl-cert .hl-divider{display:flex;align-items:center;gap:calc(var(--s)*10px);width:calc(var(--s)*560px);margin:calc(var(--s)*22px) 0 calc(var(--s)*10px)}
.hl-cert .hl-divider i{flex:1;height:calc(var(--s)*1px);background:linear-gradient(90deg,transparent,var(--green) 30%,var(--green) 70%,transparent);opacity:.55}
.hl-cert .hl-divider svg{width:calc(var(--s)*34px);height:calc(var(--s)*14px);flex-shrink:0}
.hl-cert .hl-title{font-family:'HL Cinzel',serif;font-weight:400;font-size:calc(var(--s)*66px);letter-spacing:calc(var(--s)*16px);line-height:1;color:var(--ink);margin-top:calc(var(--s)*14px);margin-left:calc(var(--s)*16px);text-transform:uppercase}
.hl-cert .hl-declare{font-style:italic;font-size:calc(var(--s)*23px);color:var(--muted)}
.hl-cert .hl-name{font-family:'HL Pinyon','HL Vibes',cursive;font-size:calc(var(--s)*86px);color:var(--ink);margin-top:calc(var(--s)*6px);line-height:1.15;white-space:nowrap;max-width:100%}
.hl-cert .hl-name.hl-name--lang{font-size:calc(var(--s)*64px)}
.hl-cert .hl-name.hl-name--xlang{font-size:calc(var(--s)*50px)}
.hl-cert .hl-name-line{width:calc(var(--s)*620px);height:calc(var(--s)*1px);background:var(--green);opacity:.5;margin:calc(var(--s)*2px) 0 calc(var(--s)*30px)}
.hl-cert .hl-body{font-size:calc(var(--s)*22px);line-height:1.7;max-width:calc(var(--s)*930px)}
.hl-cert .hl-body strong{font-weight:600}
.hl-cert .hl-meta{font-size:calc(var(--s)*18.5px);color:var(--muted);margin-top:calc(var(--s)*30px)}
.hl-cert .hl-meta span{color:var(--ink);font-weight:600}
.hl-cert .hl-footer{width:calc(100% + var(--s)*100px);margin:0 calc(var(--s)*-50px);display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:end;gap:calc(var(--s)*20px)}
.hl-cert .hl-qr{display:flex;align-items:flex-end;gap:calc(var(--s)*14px);text-align:left}
.hl-cert .hl-qr svg{width:calc(var(--s)*128px);height:calc(var(--s)*128px);flex-shrink:0;display:block} /* 5-10-2026: groter, met witte rand */
.hl-cert .hl-qr .hl-qr-t{font-size:calc(var(--s)*12.5px);line-height:1.55;color:var(--muted);padding-bottom:calc(var(--s)*1px)}
.hl-cert .hl-qr .hl-qr-t b{display:block;font-family:'HL Cinzel',serif;color:var(--ink);font-weight:400;letter-spacing:calc(var(--s)*1px);font-size:calc(var(--s)*12.5px);margin-bottom:calc(var(--s)*2px)}
.hl-cert .hl-sign{justify-self:center;text-align:center;width:calc(var(--s)*340px)}
.hl-cert .hl-sig{font-family:'HL Vibes',cursive;font-size:calc(var(--s)*44px);color:#1b2a55;height:calc(var(--s)*56px);line-height:calc(var(--s)*56px);transform:rotate(-3deg);opacity:.9;white-space:nowrap}
.hl-cert .hl-sig-img{height:calc(var(--s)*64px);width:auto;display:block;margin:0 auto calc(var(--s)*-6px)}
.hl-cert .hl-sign-line{height:calc(var(--s)*1px);background:var(--ink);opacity:.55;margin:0 auto calc(var(--s)*7px)}
.hl-cert .hl-sign--b .hl-sign-line{margin-bottom:calc(var(--s)*10px)}
.hl-cert .hl-sign--b .hl-who{line-height:1.6;margin-top:0}
.hl-cert .hl-who{font-family:'HL Cinzel',serif;font-size:calc(var(--s)*12px);letter-spacing:calc(var(--s)*2.5px);color:var(--muted);margin-top:calc(var(--s)*2px);text-transform:uppercase}

/* Donkere modus (account/cursus): het certificaat zelf blijft altijd licht */
html[data-theme="dark"] .hl-cert{color:#1b1f1c}

/* Print: alleen het certificaat, exact A4 liggend, zonder achtergrondkleur */
@media print{
  @page{size:A4 landscape;margin:0}
  body.hl-cert-printing *{visibility:hidden}
  body.hl-cert-printing .hl-cert,body.hl-cert-printing .hl-cert *{visibility:visible}
  body.hl-cert-printing .hl-cert{position:fixed;left:0;top:0;width:297mm;height:210mm;background:none!important;background-image:none!important;border-radius:0}
}