/*
 * Certificate Component
 * Full-page certificate for course completion (screen + print)
 */

@layer components {
  /* Existing banner component */
  .certificate-banner {
    margin-top: var(--block-space-double);
    padding: var(--block-space-double);
    background-color: var(--color-positive-light);
    border: 1px solid var(--color-green);
    border-radius: var(--radius);
    text-align: center;
  }

  /* Certificate page body */
  .certificate-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: var(--block-space-double);
    background-color: var(--color-gray-lightest);
  }

  /* Screen-only toolbar */
  .certificate-toolbar {
    width: 100%;
    max-width: 66rem; /* Landscape A4-ish */
    margin-bottom: var(--block-space);
  }

  .certificate-toolbar__back {
    display: inline-flex;
    align-items: center;
    gap: var(--block-space-quarter);
    color: var(--color-gray-darker);
    font-size: var(--text-small);
    text-decoration: none;
  }

  @media (any-hover: hover) {
    .certificate-toolbar__back:hover {
      color: var(--color-green);
    }
  }

  /* Certificate container */
  .certificate {
    width: 100%;
    max-width: 66rem; /* ~11in landscape */
    aspect-ratio: 11 / 8.5;
    background-color: var(--color-white);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    overflow: hidden;
  }

  /* Green border frame */
  .certificate__border {
    --cert-border-color: var(--color-green);
    display: flex;
    height: 100%;
    padding: var(--block-space-1half);
    background-color: var(--cert-border-color);
  }

  .certificate__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: var(--block-space-double) calc(var(--block-space) * 4);
    background-color: var(--color-white);
    text-align: center;
  }

  /* Green accent lines */
  .certificate__accent {
    width: 100%;
    height: 3px;
    border: none;
    background-color: var(--cert-border-color);
    margin: 0;
  }

  /* Logo */
  .certificate__logo {
    margin-top: var(--block-space-1half);
    margin-bottom: var(--block-space);
  }

  .certificate__logo-img {
    height: var(--icon-xxl);
    width: auto;
  }

  /* Title */
  .certificate__title {
    font-family: var(--font-serif);
    font-size: var(--text-xx-large);
    font-weight: 800;
    letter-spacing: var(--tracking-wide);
    color: var(--color-black);
    margin: var(--block-space) 0 var(--block-space-half);
  }

  /* Subtitle */
  .certificate__subtitle {
    font-family: var(--font-body);
    font-size: var(--text-normal);
    color: var(--color-gray-dark);
    margin: var(--block-space-half) 0;
  }

  /* User name */
  .certificate__name {
    font-family: var(--font-serif);
    font-size: var(--text-xx-large);
    font-weight: 600;
    color: var(--color-black);
    margin: var(--block-space) 0 0;
  }

  .certificate__name-line {
    width: 25rem;
    max-width: 80%;
    height: 1px;
    border: none;
    background-color: var(--color-gray-light);
    margin: var(--block-space-quarter) 0 var(--block-space-half);
  }

  /* Body text */
  .certificate__body {
    font-family: var(--font-body);
    font-size: var(--text-normal);
    line-height: var(--leading-relaxed);
    color: var(--color-gray-dark);
    max-width: var(--content-width-xs);
    margin: 0 0 var(--block-space-1half);
  }

  /* Signatory block */
  .certificate__signatory {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--block-space-quarter);
    margin-top: auto;
    padding-top: var(--block-space-1half);
  }

  .certificate__footer-line {
    width: 100%;
    height: 1px;
    border: none;
    background-color: var(--color-gray-light);
    margin: var(--block-space-quarter) 0;
  }

  .certificate__footer-label {
    font-family: var(--font-body);
    font-size: var(--text-x-small);
    color: var(--color-gray);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    margin: 0;
  }

  .certificate__footer-sublabel {
    font-family: var(--font-body);
    font-size: var(--text-xx-small);
    color: var(--color-gray);
    margin: 0;
  }

  .certificate__footer-date {
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-gray-dark);
    margin: var(--block-space-half) 0 var(--block-space-1half);
  }

  .certificate__signature {
    height: var(--icon-xxl);
    width: auto;
  }

  /* Mini certificate preview (onboarding sidebar) */
  .certificate-mini {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
  }

  .certificate-mini__border {
    padding: var(--block-space-quarter);
    background-color: var(--color-green);
  }

  .certificate-mini__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--block-space) var(--block-space-1half);
    background-color: var(--color-white);
    border-radius: calc(var(--radius) - var(--block-space-quarter));
    text-align: center;
  }

  .certificate-mini__accent {
    width: 100%;
    height: 2px;
    border: none;
    background-color: var(--color-green);
    margin: 0;
  }

  .certificate-mini__logo {
    height: var(--icon-xl);
    width: auto;
    margin-top: var(--block-space-half);
    margin-bottom: var(--block-space-quarter);
  }

  .certificate-mini__title {
    font-family: var(--font-serif);
    font-size: var(--text-normal);
    font-weight: 700;
    color: var(--color-black);
    margin: var(--block-space-quarter) 0;
  }

  .certificate-mini__subtitle {
    font-size: var(--text-x-small);
    color: var(--color-gray-dark);
    margin: 0;
  }

  .certificate-mini__name {
    font-family: var(--font-serif);
    font-size: var(--text-medium);
    font-weight: 600;
    color: var(--color-gray);
    font-style: italic;
    margin: var(--block-space-quarter) 0 0;
  }

  .certificate-mini__line {
    width: 80%;
    height: 1px;
    border: none;
    background-color: var(--color-gray-light);
    margin: var(--block-space-quarter) 0;
  }

  .certificate-mini__body {
    font-size: var(--text-x-small);
    line-height: var(--leading-normal);
    color: var(--color-gray-dark);
    margin: 0 0 var(--block-space-half);
  }

  /* Mobile responsive */
  @media (max-width: 799px) {
    .certificate-page {
      padding: var(--block-space);
    }

    .certificate {
      aspect-ratio: auto;
    }

    .certificate__border {
      padding: var(--block-space-half);
    }

    .certificate__inner {
      padding: var(--block-space) var(--block-space-1half);
    }

    .certificate__logo {
      margin-top: var(--block-space);
      margin-bottom: var(--block-space-half);
    }

    .certificate__logo-img {
      height: var(--icon-2xl);
    }

    .certificate__title {
      font-size: var(--text-x-large);
      margin: var(--block-space-half) 0 var(--block-space-quarter);
    }

    .certificate__name {
      font-size: var(--text-x-large);
      margin: var(--block-space-half) 0 0;
    }

    .certificate__subtitle,
    .certificate__body {
      font-size: var(--text-small);
    }

    .certificate__signature {
      height: var(--icon-2xl);
    }

    .certificate__signatory {
      padding-top: var(--block-space);
    }
  }

  /* Verification code */
  .certificate__verification {
    font-family: var(--font-body);
    font-size: var(--text-xx-small);
    color: var(--color-gray);
    letter-spacing: var(--tracking-wider);
    margin: var(--block-space-half) 0 var(--block-space-1half);
  }
}

/* Print styles — outside @layer for higher specificity */
@media print {
  @page {
    size: landscape;
    margin: 0;
  }

  .certificate-page {
    padding: 0;
    background-color: white;
  }

  .certificate-toolbar,
  .no-print {
    display: none !important;
  }

  .certificate {
    width: 100vw;
    height: 100vh;
    max-width: none;
    aspect-ratio: auto;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .certificate__border {
    padding: var(--block-space);
  }

  .certificate__inner {
    padding: var(--block-space-1half) var(--block-space-double);
  }

  /* Override global print.css link URL annotations */
  .certificate a[href^="http"]::after {
    content: none;
  }
}