/* ============================================================
   KRIZIA LEARNING HUB — Certificate
   Print-first design: screen shows a preview, print shows the
   full A4 landscape certificate and nothing else.
   ============================================================ */

/* ---------- modal / issue dialog ---------- */
.cert-veil {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.55);
  display: none; align-items: center; justify-content: center;
  padding: var(--space-5);
  overflow-y: auto;
}
.cert-veil.on { display: flex; }

.cert-modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  max-width: 560px; width: 100%;
  padding: var(--space-6);
  box-shadow: var(--shadow-2xl, 0 20px 50px rgba(0,0,0,.3));
  margin: auto;
}
.cert-modal h3 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.cert-modal > p { font-size: var(--text-sm); color: var(--color-text-secondary);
                  margin-bottom: var(--space-5); }
.cert-field { margin-bottom: var(--space-4); }
.cert-field label { display: block; font-size: var(--text-sm); font-weight: 600;
                    margin-bottom: var(--space-2); }
.cert-field input {
  width: 100%; height: 42px; padding: 0 var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-bg); color: var(--color-text);
  font-size: var(--text-base); font-family: inherit;
}
.cert-field input:focus { outline: 2px solid var(--color-brand); outline-offset: -1px;
                          border-color: transparent; }
.cert-field .hint { font-size: var(--text-xs); color: var(--color-text-tertiary);
                    margin-top: var(--space-1); display: block; }
.cert-acts { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-5); }
.cert-err { font-size: var(--text-sm); color: var(--color-red-500, #ef4444);
            margin-top: var(--space-2); display: none; }
.cert-err.on { display: block; }

/* ---------- eligibility banner inside a path ---------- */
.cert-cta {
  margin-top: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  background: var(--color-bg-sunken);
}
.cert-cta--ready {
  border-color: var(--green-500, #22c55e);
  background: var(--green-50, #f0fdf4);
}
[data-theme="dark"] .cert-cta--ready { background: rgba(34,197,94,.10); }
.cert-cta h4 { font-size: var(--text-base); margin-bottom: var(--space-1);
               display: flex; align-items: center; gap: var(--space-2); }
.cert-cta p { font-size: var(--text-sm); color: var(--color-text-secondary);
              margin: 0 0 var(--space-3); }
.cert-meter { height: 8px; border-radius: 999px; background: var(--color-border);
              overflow: hidden; margin: var(--space-3) 0; }
.cert-meter__f { height: 100%; background: var(--color-brand); border-radius: 999px;
                 transition: width .4s var(--ease-default); }
.cert-cta--ready .cert-meter__f { background: var(--green-500, #22c55e); }
.cert-issued { font-size: var(--text-xs); color: var(--color-text-tertiary);
               margin-top: var(--space-2); }

/* ============================================================
   THE CERTIFICATE — A4 landscape, print-accurate
   ============================================================ */
.cert {
  width: 1000px;              /* fixed design width; scaled to fit on screen */
  aspect-ratio: 1414 / 1000; /* A4 landscape ratio */
  background: #ffffff;
  color: #0d1b3e;
  position: relative;
  overflow: hidden;
  font-family: Georgia, 'Times New Roman', serif;
  /* the pale blueprint grid */
  background-image:
    linear-gradient(rgba(47,111,235,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,111,235,.045) 1px, transparent 1px);
  background-size: 28px 28px;
}

.cert__frame {
  position: absolute; inset: 26px;
  border: 2px solid #0d1b3e;
  pointer-events: none;
}
.cert__frame::before {
  content: ''; position: absolute; inset: 7px;
  border: 1px solid rgba(47,111,235,.45);
}
.cert__frame::after {
  content: ''; position: absolute;
  left: 50%; top: 50%; width: 340px; height: 340px;
  transform: translate(-50%,-50%) rotate(45deg);
  border: 1px solid rgba(47,111,235,.10);
  pointer-events: none;
}

/* corner flourishes */
.cert__corner {
  position: absolute; width: 62px; height: 62px;
  border: 3px solid #2f6feb; pointer-events: none;
}
.cert__corner--tl { top: 40px;    left: 40px;  border-right: 0; border-bottom: 0; }
.cert__corner--tr { top: 40px;    right: 40px; border-left: 0;  border-bottom: 0; }
.cert__corner--bl { bottom: 40px; left: 40px;  border-right: 0; border-top: 0; }
.cert__corner--br { bottom: 40px; right: 40px; border-left: 0;  border-top: 0; }

.cert__inner {
  position: absolute; inset: 58px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 0 40px;
}

.cert__logo { height: 54px; width: auto; margin-bottom: 14px; }
.cert__kicker {
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 700; letter-spacing: .34em;
  text-transform: uppercase; color: #2f6feb; margin-bottom: 14px;
}
.cert__title {
  font-size: 44px; font-weight: 400; line-height: 1.1;
  color: #0d1b3e; margin: 0 0 6px; letter-spacing: .01em;
}
.cert__rule {
  width: 190px; height: 2px; margin: 14px auto 22px;
  background: linear-gradient(90deg, transparent, #2f6feb, transparent);
}
.cert__presented {
  font-family: var(--font-sans);
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: #5a6b8c; margin-bottom: 8px;
}
.cert__name {
  font-size: 50px; line-height: 1.1; color: #0d1b3e;
  margin: 0 0 4px; font-style: italic; font-weight: 400;
  /* long names must not spill out of the box */
  max-width: 100%; overflow-wrap: break-word; line-break: normal;
}
.cert__name--long { font-size: 38px; }
.cert__name--xlong { font-size: 29px; }
.cert__namedesc {
  font-family: var(--font-sans);
  font-size: 13px; color: #5a6b8c; margin-bottom: 22px;
}
.cert__body {
  font-size: 17px; line-height: 1.65; color: #22314f;
  max-width: 640px; margin: 0 auto 22px;
}
.cert__body em { color: #2f6feb; font-style: normal; font-weight: 700; }

.cert__stats {
  display: flex; justify-content: center; gap: 0;
  margin-bottom: 20px; width: 100%;
  font-family: var(--font-sans);
}
.cert__stat { flex: 1; padding: 0 8px; position: relative; }
.cert__stat + .cert__stat::before {
  content: ''; position: absolute; left: 0; top: 12%; bottom: 12%;
  width: 1px; background: rgba(13,27,62,.16);
}
.cert__stat b { display: block; font-size: 21px; color: #0d1b3e; line-height: 1.2; }
.cert__stat span { font-size: 10.5px; letter-spacing: .13em;
                   text-transform: uppercase; color: #5a6b8c; }

.cert__sign {
  display: flex; justify-content: space-between; align-items: flex-end;
  width: 100%; margin-top: auto; padding: 0 24px;
  font-family: var(--font-sans);
}
.cert__signbox { text-align: center; min-width: 190px; }
.cert__sigline { height: 1px; background: rgba(13,27,62,.35); margin-bottom: 7px; }
.cert__signbox small { font-size: 10px; letter-spacing: .12em;
                      text-transform: uppercase; color: #5a6b8c; display: block; }
.cert__signbox b { font-size: 13px; color: #0d1b3e; font-weight: 600; }

.cert__id {
  /* sits BELOW the 26px frame inset — at bottom:16px it overlapped the border */
  position: absolute; bottom: 6px; left: 0; right: 0;
  font-family: var(--font-mono); font-size: 9.5px; line-height: 1.3;
  letter-spacing: .1em; color: #7c8aa6; text-align: center;
}

/* ---------- on-screen preview scaling ---------- */
.cert-stage {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-4);
}
.cert-frame-box {
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  background: #fff;
}
.cert-scale { transform-origin: top left; }

/* ============================================================
   PRINT — only the certificate, full bleed, landscape
   ============================================================ */
@media print {
  @page { size: A4 landscape; margin: 0; }

  html, body {
    background: #fff !important;
    margin: 0 !important; padding: 0 !important;
  }
  /* hide the entire app chrome */
  .tb, .to-top, .hero, .sec, .foot, .cert-veil, .cert-acts, .cert-backbar,
  .overlay, .sidebar, .progress, .cert-no-print { display: none !important; }

  body > *:not(.cert-print-root) { display: none !important; }

  .cert-print-root {
    display: block !important; position: static !important;
    margin: 0 !important; padding: 0 !important;
    background: #fff !important;
  }
  .cert-print-root .cert-frame-box {
    box-shadow: none !important; border-radius: 0 !important;
    width: 100% !important; overflow: visible !important;
  }
  .cert-print-root .cert {
    width: 297mm !important;          /* A4 landscape width */
    height: 210mm !important;         /* A4 landscape height */
    aspect-ratio: auto !important;
    transform: none !important;
    box-shadow: none !important;
    page-break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .cert-print-root .cert-scale { transform: none !important; }
}

/* ---------- path footer actions (holds the cert panel above it) ---------- */
.path-actions {
  display: flex; gap: var(--space-3); flex-wrap: wrap;
  margin-top: var(--space-6);
}

/* if the brand logo can't load, don't leave a broken-image glyph on the cert */
.cert__logo--broken { display: none; }
.cert__logo-fallback {
  display: none;
  font-family: var(--font-sans); font-size: 15px; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase; color: #2f6feb;
  margin-bottom: 14px;
}
.cert__logo--broken + .cert__logo-fallback { display: block; }