@import url(
  'https://fonts.googleapis.com/css2?family=Cinzel&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Great+Vibes&display=swap'
);

/* Apply predictable width calculations */
* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  padding: 2rem 1rem;
  background-color: #f3e8d4;
  font-family: 'Cormorant Garamond', serif;
}

/* Main certificate */
.certificate {
  width: min(92vw, 1200px);
  margin: 0 auto;
  padding: 3rem 4rem;

  background-color: #fef9ec;

  border: 18px double #7a1f1f;
  border-radius: 6px;

  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);

  text-align: center;
}

/* Academy logo */
.logo {
  display: block;
  width: 110px;
  max-width: 25%;
  height: auto;
  margin: 0 auto 1.2rem;
}

/* Academy name */
.academy-name {
  margin: 0 0 0.35rem;

  color: #7a1f1f;

  font-family: 'Cinzel', serif;
  font-size: clamp(1.8rem, 3vw, 2.4rem);

  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Academy tagline */
.tagline {
  margin: 0 0 1.8rem;
  color: #333;
  font-size: 1rem;
}

/* Certificate heading */
h1 {
  margin: 0 0 0.8rem;

  color: #7a1f1f;

  font-family: 'Cinzel', serif;
  font-size: clamp(1.7rem, 3vw, 2.2rem);

  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Supporting sentences */
.subheading {
  margin: 0.45rem 0;

  color: #444;

  font-size: 1.2rem;
  font-style: italic;
}

/* Recipient and course titles */
h2,
h3 {
  margin: 0.3rem 0;

  color: #5b2c2c;

  font-family: 'Cinzel', serif;
}

#student-name {
  font-size: clamp(1.5rem, 2.5vw, 1.9rem);
}

#course-title {
  font-size: clamp(1.1rem, 2vw, 1.45rem);
}

/* Date */
#completion-date {
  margin: 1rem 0;

  color: #333;

  font-style: italic;
}

/* Skills heading */
h4 {
  margin: 2rem 0 0;

  color: #000;

  font-family: 'Cinzel', serif;
  font-size: 1.2rem;

  text-decoration: underline;
  text-transform: uppercase;
}

/* Skills list */
#skills-list {
  display: inline-block;

  margin: 1rem auto 1.5rem;
  padding-left: 1.5rem;

  color: #000;

  font-size: 1rem;
  line-height: 1.35;

  text-align: left;
}

/*
  Footer area:
  the grey line is above both the text and the stamp.
*/
.footer-area {
  margin-top: 0.4rem;
  padding-top: 1rem;

  border-top: 1px solid #ccc;
}

/*
  Footer text stays on the left.
  Stamp and signature stay on the right.
*/
.footer-content {
  display: grid;

  grid-template-columns: minmax(0, 1fr) auto;

  gap: 1.5rem;
  align-items: center;
}

/* Footer paragraph */
.closing {
  margin: 0;

  color: #222;

  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.35;

  text-align: center;
}

/* Stamp and signature container */
.stamp-block {
  width: 135px;
  text-align: center;
}

/* Wax seal image */
.stamp {
  display: block;

  width: 100px;
  max-width: 100%;
  height: auto;

  margin: 0 auto;

  opacity: 0.95;
}

/* Signature name */
.signature-name {
  margin: 0.25rem 0 0;

  color: #5b2c2c;

  font-family: 'Great Vibes', cursive;
  font-size: 1.45rem;
  line-height: 1;

  white-space: nowrap;
}

/* Ensures hidden instructor signature disappears completely */
.signature-name[hidden] {
  display: none;
}

/* Error message */
.error-message {
  margin-top: 4rem;
  color: #7a1f1f;
  text-align: center;
}

/* Mobile layout */
@media (max-width: 768px) {
  body {
    padding: 1rem 0.5rem;
  }

  .certificate {
    width: 100%;
    padding: 2rem 1.25rem;

    border-width: 10px;
  }

  .logo {
    width: 90px;
  }

  /*
    On mobile, the footer text and stamp stack vertically
    to prevent overlapping.
  */
  .footer-content {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .closing {
    order: 1;
  }

  .stamp-block {
    order: 2;

    width: 120px;
    margin: 0 auto;
  }
}

/* Printing configuration */
@media print {
  @page {
    size: A4 landscape;
    margin: 10mm;
  }

  body {
    padding: 0;
    background: #fff;
  }

  .certificate {
    width: 100%;
    max-width: none;

    margin: 0;

    box-shadow: none;

    break-inside: avoid;
  }
}