/* ================================================================
   LETTERHEAD — the A4 sheet in the Document centre (js/pages/docs.js)
   Same rules on screen, in print and in the PDF; sizes in mm / pt.
   Colours from the logo mark: navy #0F2D4C, blue #0B66C2, sky #6EBDFC.
   .lh-export = the copy that is printed or turned into a PDF (no editing hints).
   ================================================================ */

.lh-sheet {
  --lh-navy: #0F2D4C; --lh-blue: #0B66C2; --lh-sky: #6EBDFC;
  --lh-ink: #0F172A; --lh-text: #1E293B; --lh-muted: #64748B; --lh-line: #D5DEE9; --lh-tint: #EEF4FB;
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  width: 210mm; min-height: 297mm; background: #fff; color: var(--lh-text);
  font: 10.5pt/1.62 'Inter', system-ui, sans-serif; text-align: left;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.lh-sheet *, .lh-sheet *::before, .lh-sheet *::after { box-sizing: border-box; }

/* Brand band along the top and bottom edges */
.lh-band, .lh-foot-band { height: 3.2mm; flex: none; background: linear-gradient(90deg, var(--lh-navy) 0%, #12437A 40%, var(--lh-blue) 72%, var(--lh-sky) 100%); }

/* Header: mark + name on the left, address and registration on the right */
.lh-head { display: flex; justify-content: space-between; align-items: center; gap: 8mm; padding: 8mm 18mm 5.5mm; flex: none; }
.lh-brand { display: flex; align-items: center; gap: 4.5mm; }
.lh-mark { display: block; height: 17mm; width: auto; }
.lh-company {
  font: 700 17pt/1.1 'Space Grotesk', 'Inter', sans-serif; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lh-navy); white-space: nowrap;
}
.lh-site { margin-top: 1.6mm; font: 600 8pt 'Inter', sans-serif; letter-spacing: 0.08em; color: var(--lh-blue); }
.lh-contact { font-style: normal; text-align: right; font-size: 8.3pt; line-height: 1.55; color: #475569; }
.lh-contact .lh-strong { color: var(--lh-ink); font-weight: 500; }
.lh-contact .lh-reg { margin-top: 0.6mm; font-size: 7.8pt; color: var(--lh-navy); font-weight: 600; letter-spacing: 0.02em; }
.lh-rule { height: 0.45mm; margin: 0 18mm; flex: none; background: linear-gradient(90deg, var(--lh-navy), var(--lh-blue) 55%, var(--lh-sky)); }

/* Faint mark behind the text */
.lh-watermark {
  position: absolute; left: 50%; top: 54%; width: 125mm; transform: translate(-50%, -50%);
  opacity: 0.04; pointer-events: none; user-select: none;
}
.lh-sheet.no-mark .lh-watermark { display: none; }

/* Letter */
.lh-body { position: relative; flex: 1; display: flex; flex-direction: column; padding: 7mm 18mm 6mm; }
.lh-meta { display: flex; justify-content: space-between; gap: 8mm; font-size: 9.5pt; color: var(--lh-text); margin-bottom: 7mm; }
.lh-meta b { color: var(--lh-ink); font-weight: 700; }
.lh-to { white-space: pre-wrap; margin-bottom: 6mm; color: var(--lh-ink); min-height: 1.6em; }
.lh-subject { margin-bottom: 5mm; color: var(--lh-ink); font-weight: 600; }
.lh-subject .lh-label { color: var(--lh-blue); }
.lh-text { min-height: 60mm; text-align: justify; }
.lh-text p, .lh-text div { margin: 0 0 3.2mm; }
.lh-text ul, .lh-text ol { margin: 0 0 3.2mm; padding-left: 7mm; }
.lh-text li { margin-bottom: 1mm; }
.lh-text b, .lh-text strong { color: var(--lh-ink); }
.lh-text mark { background: #FEF3C7; color: inherit; border-radius: 2px; padding: 0 1px; }

/* Certificate-style headings inside the body */
.lh-text .lh-title {
  margin: 3mm 0 1.5mm; text-align: center; color: var(--lh-navy);
  font: 700 17pt/1.25 'Space Grotesk', 'Inter', sans-serif; letter-spacing: 0.13em; text-transform: uppercase;
}
.lh-text .lh-subtitle { margin: 0 0 8mm; text-align: center; color: var(--lh-blue); font-size: 9pt; letter-spacing: 0.3em; text-transform: uppercase; }
.lh-text .lh-caps { margin: 0 0 5mm; text-align: center; color: var(--lh-ink); font-weight: 700; font-size: 9.5pt; letter-spacing: 0.12em; text-transform: uppercase; }

/* Details table */
.lh-text table { width: 100%; border-collapse: collapse; margin: 1mm 0 5mm; font-size: 10pt; text-align: left; }
.lh-text th, .lh-text td { border: 0.3mm solid var(--lh-line); padding: 2.2mm 3.5mm; vertical-align: top; }
.lh-text th { width: 33%; background: var(--lh-tint); color: var(--lh-ink); font-weight: 700; }

/* Signatures: authorised signatory (with seal) and, for internship documents, the project mentor */
.lh-signs { display: flex; gap: 14mm; margin-top: 8mm; }
.lh-signs.with-mentor { justify-content: space-between; }
.lh-sign { width: 66mm; }
.lh-sign-mentor { display: none; }
.with-mentor .lh-sign-mentor { display: block; }
.lh-sig-box { height: 21mm; display: flex; align-items: flex-end; border-bottom: 0.3mm solid var(--lh-ink); margin-bottom: 1.8mm; }
.lh-sig-img { display: block; max-width: 52mm; max-height: 21mm; margin-bottom: -2mm; }
.lh-sign p { margin: 0; font-size: 9.8pt; line-height: 1.5; }
.lh-sign .lh-sign-name { font-weight: 600; color: var(--lh-ink); }
.lh-sign .lh-sign-title { color: var(--lh-ink); }
.lh-sign .lh-sign-co { color: var(--lh-text); }

/* Footer: one line of contact details, then the band */
.lh-foot { flex: none; padding: 0 18mm; text-align: center; font-size: 7.8pt; line-height: 1.5; color: var(--lh-muted); }
.lh-foot-rule { height: 0.3mm; background: var(--lh-line); margin-bottom: 2.6mm; }
.lh-foot p { margin: 0; }
.lh-foot i { font-style: normal; margin: 0 1.8mm; color: var(--lh-sky); }
.lh-foot-band { margin: 4mm -18mm 0; }

/* ---------- Editing hints (screen only) ---------- */
.lh-sheet [contenteditable] { outline: none; border-radius: 2px; transition: box-shadow 0.15s, background 0.15s; cursor: text; }
.lh-sheet [contenteditable]:hover { box-shadow: 0 0 0 1.5mm rgba(11,102,194,0.05), 0 0 0 calc(1.5mm + 1px) rgba(11,102,194,0.18); }
.lh-sheet [contenteditable]:focus { background: rgba(11,102,194,0.03); box-shadow: 0 0 0 1.5mm rgba(11,102,194,0.06), 0 0 0 calc(1.5mm + 1px) rgba(11,102,194,0.45); }
.lh-sheet [contenteditable]:empty::before { content: attr(data-placeholder); color: #94A3B8; font-weight: 400; white-space: pre-wrap; pointer-events: none; }
.lh-meta [contenteditable] { display: inline-block; min-width: 18mm; }
.lh-subject [contenteditable] { display: inline-block; min-width: 60mm; }

.lh-export [contenteditable], .lh-export [contenteditable]:hover, .lh-export [contenteditable]:focus { box-shadow: none; background: none; }
.lh-export [contenteditable]:empty::before, .lh-export .is-blank { display: none !important; }
.lh-export .lh-text mark { background: none; padding: 0; }
.lh-export { transform: none !important; }
/* Exactly one page when it fits, so the PDF has no blank second page */
.lh-export.one-page { height: 296.8mm; min-height: 0; }

/* ---------- Printing (the app copies .lh-export into #lhPrintHost) ---------- */
#lhPrintHost { display: none; }
@media print {
  @page letter { size: A4; margin: 0; }
  body.print-letter { background: #fff !important; margin: 0; }
  body.print-letter > :not(#lhPrintHost) { display: none !important; }
  body.print-letter #lhPrintHost { display: block; page: letter; }
}