/* WordCamp Certificate – shared structural styles for the certificate canvas.
   Used by the "Certificate Design" block editor (drag-and-drop canvas),
   the frontend page preview, and the final issued certificate. */

.wcc-cert-canvas, .wcc-cert-canvas *, .wcc-cert-canvas *::before, .wcc-cert-canvas *::after {
  box-sizing: border-box;
}

.wcc-cert-canvas {
  --wc-heading-font: 'Playfair Display', serif;
  --wc-body-font: 'Inter', sans-serif;
  font-family: var(--wc-body-font);
}

.wcc-cert-canvas .cert-wrap { width: 900px; max-width: 100%; margin: 0 auto; padding: 24px 16px; }

.wcc-cert-canvas .cert {
  background: #fff;
  position: relative;
  border: 3px solid var(--wc-blue);
  border-radius: 4px;
  padding: 56px 72px;
  overflow: hidden;
}
.wcc-cert-canvas .cert::before, .wcc-cert-canvas .cert::after {
  content: ''; position: absolute; width: 80px; height: 80px; border: 3px solid var(--wc-gold);
  pointer-events: none;
}
.wcc-cert-canvas .cert::before { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.wcc-cert-canvas .cert::after  { bottom: 12px; right: 12px; border-left: none; border-top: none; }

.wcc-cert-canvas .cert-inner { border: 1px solid var(--wc-border); padding: 40px; position: relative; }
.wcc-cert-canvas .cert-inner::before, .wcc-cert-canvas .cert-inner::after {
  content: ''; position: absolute; width: 48px; height: 48px; border: 1px solid var(--wc-gold);
  pointer-events: none;
}
.wcc-cert-canvas .cert-inner::before { bottom: -1px; left: -1px; border-top: none; border-right: none; }
.wcc-cert-canvas .cert-inner::after  { top: -1px; right: -1px; border-bottom: none; border-left: none; }

/* Logo chrome (fixed, not draggable — sourced from Settings). */
.wcc-cert-canvas .cert-header { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 24px; }
.wcc-cert-canvas .wc-logo {
  width: auto; height: 60px; background: transparent;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden;
}
.wcc-cert-canvas .wc-logo svg { width: 34px; height: 34px; fill: #fff; }
.wcc-cert-canvas .wc-logo img { width: auto; height: 100%; object-fit: contain; }

/* Certificate body — the draggable InnerBlocks region. */
.wcc-cert-canvas .wcc-cert-body { text-align: center; }
.wcc-cert-canvas .wcc-cert-body > * { margin-top: 16px; margin-bottom: 0; }
.wcc-cert-canvas .wcc-cert-body > *:first-child { margin-top: 0; }

.wcc-cert-canvas .cert-divider-block.wp-block-separator {
  border: none; height: 1px; margin: 24px auto;
  background: linear-gradient(to right, transparent, var(--wc-gold), transparent);
  width: 100%; max-width: 100%;
}

.wcc-cert-canvas .cert-event-name { font-family: var(--wc-heading-font); font-size: 28px; font-weight: 700; color: var(--wc-dark); line-height: 1.1; display: inline-block; }
.wcc-cert-canvas .cert-subtitle { font-size: 11px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--wc-blue); }
.wcc-cert-canvas .cert-title { font-family: var(--wc-heading-font); font-size: 42px; font-weight: 700; color: var(--wc-dark); line-height: 1.1; }
.wcc-cert-canvas .cert-presented { font-size: 14px; color: #6b7280; letter-spacing: 1px; text-transform: uppercase; }
.wcc-cert-canvas .cert-name {
  font-family: var(--wc-heading-font); font-size: 48px; font-weight: 600; color: var(--wc-blue);
  line-height: 1.2; position: relative; display: inline-block;
}
.wcc-cert-canvas .cert-desc { font-size: 15px; color: #374151; line-height: 1.7; max-width: 520px; margin-left: auto; margin-right: auto; }

.wcc-cert-canvas .cert-details {
  display: flex; gap: 24px; background: var(--wc-light); border: 1px solid var(--wc-border);
  border-radius: 40px; padding: 10px 28px; font-size: 13px; color: var(--wc-dark); font-weight: 500;
  flex-wrap: wrap; justify-content: center; align-items: center; width: fit-content; margin: 0 auto;
}
.wcc-cert-canvas .cert-detail-item { display: inline-flex; align-items: center; gap: 6px; }

.wcc-cert-canvas .cert-footer {
  display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 24px; padding-top: 24px;
  width: 100%;
}
/* Explicit flex column + centering so the signature/date columns render
   correctly even where core block "is-layout-flex" CSS isn't loaded (the
   standalone certificate page doesn't enqueue core block styles). Each
   column shares the same label-then-value structure and a fixed width so
   the Organizer, Certificate ID, and Date Issued columns all line up on
   the same label row and the same value row, in the editor, print preview,
   and the final printed certificate. */
.wcc-cert-canvas .cert-sig, .wcc-cert-canvas .cert-seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  width: 180px;
  flex: 0 0 auto;
  gap: 6px;
}
.wcc-cert-canvas .cert-sig-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: #6b7280;
  margin: 0; line-height: 1.2; height: 14px;
}
.wcc-cert-canvas .cert-sig-name { font-family: var(--wc-heading-font); font-size: 15px; color: var(--wc-dark); font-weight: 600; display: inline-block; line-height: 1.2; }
.wcc-cert-canvas .cert-id { font-family: var(--wc-body-font); font-size: 13px; color: var(--wc-dark); font-weight: 600; letter-spacing: 1px; display: inline-block; line-height: 1.2; }

/* Certificate Field token chrome (editor + frontend). */
.wcc-cert-field { display: inline-block; }
.wcc-cert-field-tag {
  display: block; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--wc-blue, #21759b); margin-bottom: 2px;
}
.wcc-cert-field-sample { display: block; }