.certificate-wrapper {
  width: 11in;
  height: 8.5in;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}
.certificate-actions {
  margin-bottom: 20px;
}

.certificate-page {
  position: relative;
  width: 11in;
  height: 8.5in;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: url('../images/ferpa-certificate.jpg') no-repeat center center;
  background-size: cover;  background-size: cover;
  box-sizing: border-box;
}
.certificate-student-page {
  position: relative;
  width: 11in;
  height: 8.5in;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: url('../images/student-ferpa-certificate.jpg') no-repeat center center;
  background-size: cover;
  background-size: cover;
  box-sizing: border-box;
}

.certificate-name {
  position: absolute;
  top: 4.2in;
  left: 50%;
  transform: translateX(-50%);
  width: 6.5in;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30pt;
  font-weight: 600;
  line-height: 1.2;
  color: #222222;
}

.certificate-date {
  position: absolute;
  top: 5in;
  left: 50%;
  transform: translateX(-50%);
  width: 3.5in;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16pt;
  font-weight: 400;
  line-height: 1.2;
  color: #222222;
}

/* Optional: make preview scale more gracefully on smaller screens */
@media (max-width: 900px) {
  .certificate-page {
    width: 95%;
    height: auto;
    aspect-ratio: 8.5 / 11;
  }

  .certificate-name {
    top: 48.3%;
    width: 76%;
    font-size: 2.2rem;
  }

  .certificate-date {
    top: 56%;
    width: 42%;
    font-size: 1.1rem;
  }
}

/* Optional print styling */
@media print {
  @page {
    size: letter landscape;
    margin: 0;
  }

  html,
  body {
    width: 11in !important;
    height: 8.5in !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  /* Hide all normal page chrome */
  header,
  .header,
  .site-header,
  .region-header,
  .navbar,
  .navigation,
  .breadcrumb,
  .tabs,
  .messages,
  .region-footer,
  footer,
  .certificate-actions {
    display: none !important;
  }

  /* Hide everything on the page by default */
  body * {
    visibility: hidden !important;
  }

  /* Show only the certificate area */
  .certificate-wrapper,
  .certificate-wrapper *,
  .certificate-page,
  .certificate-page * {
    visibility: visible !important;
  }

  .certificate-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 10.95in !important;
    height: 8.45in !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .certificate-page {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 10.95in !important;
    height: 8.45in !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    break-inside: avoid !important;
    break-after: avoid !important;
    page-break-inside: avoid !important;
    page-break-after: avoid !important;
  }
}