/* Amiri from @fontsource misplaces harakat in Chrome; Noto Naskh Arabic positions them correctly. */
@import url('/fonts/noto-naskh-arabic/700.css');
@import url('/fonts/pt-serif/400.css');
@import url('/fonts/pt-serif/700.css');
@import url('/fonts/pt-sans/400.css');
@import url('/fonts/pt-sans/700.css');
@import url('/fonts/marck-script/400.css');

@page { margin: 0; }
html, body { margin: 0; padding: 0; background: #fff; }

.card {
  position: relative;
  overflow: hidden;
  background-size: 100% 100%;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* The text area; text is vertically centred inside it. */
.zone {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.debug .zone { outline: 2px dashed rgba(220, 0, 0, .8); background: rgba(255, 0, 0, .06); }

/* font-size of .content is the single "base" value the fitter searches for;
   every block below is sized in em relative to it. */
.content {
  width: 100%;
  text-align: center;
  line-height: 1.25;
  color: var(--text);
}
/* No mid-word breaks: a word that is too long makes the fitter shrink the text instead. */
.content > * { margin: 0; text-wrap: balance; }

.title {
  font-family: 'PT Serif', serif;
  font-weight: 700;
  font-size: 2em;
  line-height: 1.15;
  color: var(--title);
}

.arabic {
  font-family: 'Noto Naskh Arabic', serif;
  font-weight: 700;
  font-size: 1.9em;
  line-height: 1.85;           /* room for harakat above and below */
  color: var(--arabic);
  white-space: pre-line;        /* admin can force line breaks with \n */
}

.label {
  font-family: 'PT Serif', serif;
  font-weight: 700;
  font-size: 0.95em;
  color: var(--label);
  margin-bottom: 0.15em !important;
}

.translation {
  font-family: 'PT Serif', serif;
  font-size: 1.15em;
}

.translit {
  font-family: 'PT Sans', sans-serif;
  font-size: 1.1em;
}

/* Thin gold line with a small diamond in the middle. */
.divider {
  position: relative;
  width: 45%;
  height: 0.08em;
  margin: 0.55em auto !important;
  background: linear-gradient(90deg, transparent, var(--divider) 15%, var(--divider) 85%, transparent);
}
.divider::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.4em;
  height: 0.4em;
  background: var(--divider);
  transform: translate(-50%, -50%) rotate(45deg);
}