/* Treatwise certificate: a landscape document that scales with its container.
   Every size is a multiple of --u so the whole certificate resizes as one piece. */
.lc-wrap { container-type: inline-size; width: 100%; }
.lc {
  --u: 1cqi;
  --lc-ink: #18221c;
  --lc-soft: #5b655e;
  --lc-forest: #1f4032;
  --lc-gold: #b08636;
  --lc-gold-lt: #e3cc95;
  position: relative;
  aspect-ratio: 1.414;
  background: #fff;
  color: var(--lc-ink);
  padding: calc(var(--u) * 1.4);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 28px 50px -26px rgba(20, 41, 31, 0.45);
  font-family: "Nunito Sans", system-ui, sans-serif;
  line-height: 1.35;
}
.lc-frame { position: relative; height: 100%; padding: calc(var(--u) * 0.9); background: linear-gradient(135deg, #1f4032, #2c5a46 50%, #1f4032); }
.lc-inner {
  position: relative; isolation: isolate; height: 100%; overflow: hidden;
  background: #fffefb;
  outline: calc(var(--u) * 0.12) solid var(--lc-gold); outline-offset: calc(var(--u) * -0.9);
  padding: calc(var(--u) * 4.4) calc(var(--u) * 5.5) calc(var(--u) * 5.6);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}

/* security-paper background: guilloche bands, a faint paw watermark, gold corners */
.lc-guilloche { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.lc-guilloche path { fill: none; stroke: var(--lc-gold); stroke-width: 0.7; opacity: 0.32; vector-effect: non-scaling-stroke; }
.lc-water { position: absolute; z-index: -1; left: 50%; top: 52%; width: calc(var(--u) * 30); height: calc(var(--u) * 30); transform: translate(-50%, -50%); fill: var(--lc-forest); opacity: 0.035; }
/* One corner shape (top-left), mirrored into the other three corners. */
.lc-corner { position: absolute; width: calc(var(--u) * 5); height: calc(var(--u) * 5); border-top: calc(var(--u) * 0.22) solid var(--lc-gold); border-left: calc(var(--u) * 0.22) solid var(--lc-gold); }
.lc-corner::after { content: ""; position: absolute; top: calc(var(--u) * 0.6); left: calc(var(--u) * 0.6); width: 55%; height: 55%; border-top: calc(var(--u) * 0.1) solid var(--lc-gold); border-left: calc(var(--u) * 0.1) solid var(--lc-gold); }
.lc-corner.tl { top: calc(var(--u) * 1.6); left: calc(var(--u) * 1.6); }
.lc-corner.tr { top: calc(var(--u) * 1.6); right: calc(var(--u) * 1.6); transform: scaleX(-1); }
.lc-corner.bl { bottom: calc(var(--u) * 1.6); left: calc(var(--u) * 1.6); transform: scaleY(-1); }
.lc-corner.br { bottom: calc(var(--u) * 1.6); right: calc(var(--u) * 1.6); transform: scale(-1, -1); }

.lc-brand { display: flex; align-items: center; gap: calc(var(--u) * 1); color: var(--lc-forest); font-weight: 800; font-size: calc(var(--u) * 1.3); letter-spacing: 0.34em; text-transform: uppercase; }
.lc-brand svg { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); fill: currentColor; }
.lc-kicker { margin: calc(var(--u) * 2) 0 0; color: var(--lc-gold); font-weight: 800; font-size: calc(var(--u) * 1.15); letter-spacing: 0.42em; text-transform: uppercase; }
.lc-title { margin: calc(var(--u) * 0.8) 0 0; font-family: "Newsreader", Georgia, serif; font-weight: 500; font-size: calc(var(--u) * 4.6); line-height: 1.05; letter-spacing: -0.01em; color: var(--lc-forest); }
.lc-rule { display: flex; align-items: center; gap: calc(var(--u) * 1); margin: calc(var(--u) * 1.3) 0; color: var(--lc-gold); }
.lc-rule::before, .lc-rule::after { content: ""; width: calc(var(--u) * 10); height: calc(var(--u) * 0.14); background: linear-gradient(90deg, transparent, currentColor); }
.lc-rule::after { transform: scaleX(-1); }
.lc-rule i { width: calc(var(--u) * 0.8); height: calc(var(--u) * 0.8); background: currentColor; transform: rotate(45deg); }
.lc-desc { max-width: calc(var(--u) * 62); font-size: calc(var(--u) * 1.35); color: var(--lc-soft); }

/* three emblem badges */
.lc-badges { margin: calc(var(--u) * 1.8) 0 0; display: flex; gap: calc(var(--u) * 1.4); }
.lc-badge { display: flex; align-items: center; gap: calc(var(--u) * 0.7); padding: calc(var(--u) * 0.45) calc(var(--u) * 1.3) calc(var(--u) * 0.45) calc(var(--u) * 0.45); border: calc(var(--u) * 0.1) solid var(--lc-gold-lt); border-radius: 999px; background: #fffaf0; font-size: calc(var(--u) * 1); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lc-forest); }
.lc-badge svg { width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); }

.lc-lead { margin: auto 0 0; padding-top: calc(var(--u) * 2); font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: calc(var(--u) * 1.6); }
.lc-people { width: 100%; margin: calc(var(--u) * 1.4) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 3); }
.lc-people div { display: flex; flex-direction: column-reverse; }
.lc-people dd { margin: 0; padding-bottom: calc(var(--u) * 0.5); border-bottom: calc(var(--u) * 0.1) solid var(--lc-ink); font-family: "Newsreader", Georgia, serif; font-weight: 500; font-size: calc(var(--u) * 2.7); line-height: 1.15; overflow-wrap: anywhere; min-height: 1.2em; }
.lc-people dt, .lc-meta dt, .lc-sign span { font-size: calc(var(--u) * 0.95); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lc-soft); }
.lc-people dt { margin-top: calc(var(--u) * 0.6); }

.lc-foot { width: 100%; margin-top: auto; padding-top: calc(var(--u) * 1.6); display: grid; grid-template-columns: 1fr auto 1fr; gap: calc(var(--u) * 2.6); align-items: end; text-align: left; }
.lc-issued { align-self: end; max-width: calc(var(--u) * 30); }
.lc-issued span { display: block; padding-bottom: calc(var(--u) * 0.6); margin-bottom: calc(var(--u) * 0.6); border-bottom: calc(var(--u) * 0.1) solid var(--lc-ink); font-family: "Newsreader", Georgia, serif; font-weight: 600; font-size: calc(var(--u) * 1.7); color: var(--lc-forest); }
.lc-issued p { margin: 0; font-size: calc(var(--u) * 1.05); color: var(--lc-soft); line-height: 1.45; }
.lc-sign b { display: block; padding: 0 calc(var(--u) * 0.6) calc(var(--u) * 0.3); border-bottom: calc(var(--u) * 0.1) solid var(--lc-ink); font-family: "Caveat", "Segoe Script", cursive; font-weight: 700; font-size: calc(var(--u) * 3.2); line-height: 1.1; color: #22324a; }
.lc-sign span { display: block; margin-top: calc(var(--u) * 0.6); }
.lc-sign small { display: block; margin-top: calc(var(--u) * 0.2); font-size: calc(var(--u) * 1.05); color: var(--lc-soft); }

/* gold seal with ribbon tails */
.lc-seal-wrap { position: relative; width: calc(var(--u) * 12.5); padding-bottom: calc(var(--u) * 3); }
.lc-seal-wrap::before, .lc-seal-wrap::after { content: ""; position: absolute; z-index: 0; bottom: 0; width: calc(var(--u) * 3.4); height: calc(var(--u) * 7); background: linear-gradient(#24503d, #1f4032); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
.lc-seal-wrap::before { left: calc(var(--u) * 3); transform: rotate(14deg); }
.lc-seal-wrap::after { right: calc(var(--u) * 3); transform: rotate(-14deg); }
.lc-seal { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: drop-shadow(0 calc(var(--u) * 0.3) calc(var(--u) * 0.5) rgba(80, 55, 10, 0.35)); }

.lc-right { display: flex; justify-content: flex-end; }
.lc-meta { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * 0.5) calc(var(--u) * 1.2); align-items: baseline; }
.lc-meta dd { margin: 0; font-size: calc(var(--u) * 1.1); font-weight: 700; }
.lc-legal { margin: calc(var(--u) * 1.5) 0 0; font-size: calc(var(--u) * 0.9); color: var(--lc-soft); }

/* Narrow screens: drop the fixed page shape and enlarge the type so it stays readable. */
@container (max-width: 620px) {
  .lc { --u: 2cqi; aspect-ratio: auto; }
  .lc-inner { padding: calc(var(--u) * 7) calc(var(--u) * 2.8) calc(var(--u) * 8); }
  .lc-badges { flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 0.8); }
  .lc-lead { margin-top: 0; }
  .lc-people { grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 1.6); }
  .lc-foot { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: calc(var(--u) * 2.6); padding-top: calc(var(--u) * 3); }
  .lc-issued { max-width: none; width: 85%; text-align: center; }
  .lc-seal-wrap { order: -1; width: calc(var(--u) * 17); }
  .lc-right { text-align: left; }
    .lc-corner { width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); }
}

@media print {
  .lc { box-shadow: none; }
}


/* Sample certificate (home page and course pages): a watermark over everything, no copying. */
.cert-sample { position: relative; user-select: none; -webkit-user-select: none; }
.cert-sample .lc-wrap { pointer-events: none; }
.cert-sample-mark {
  position: absolute; inset: 0; z-index: 20; overflow: hidden; pointer-events: none; display: grid; place-items: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Ctext x='150' y='82' text-anchor='middle' transform='rotate(-22 150 75)' font-family='Arial,sans-serif' font-size='17' font-weight='700' letter-spacing='3' fill='%23a3341f' fill-opacity='0.22'%3ESAMPLE %C2%B7 NOT VALID%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
}
.cert-sample-mark span {
  transform: rotate(-22deg); padding: 0.1em 0.5em; border: 0.08em solid rgba(163, 52, 31, 0.55); border-radius: 0.12em;
  font-family: Arial, sans-serif; font-weight: 800; font-size: calc(var(--u) * 15); letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(163, 52, 31, 0.42);
}
.cert-sample-note { margin-top: 10px; text-align: center; font-size: 0.875rem; font-weight: 700; color: #a3341f; }
@media print { .cert-sample { display: none; } }