/* ==========================================================================
   Mishnah — Hadran / Siyum Mishnayos
   ==========================================================================

   Migrated out of the Bricks page builder. Delete the builder block once this
   is live, or the rules load twice.

   Source: page-builder-css/hadran-siyum-mishnayos.css

   PLUGIN OUTPUT throughout — mishnah_hadran_form() in inc/mishnah-hadran.php
   emits the form, and js/mishnah-hadran.js writes the output columns. Without
   this file that page renders unstyled, which is the reason it belongs in the
   plugin rather than in the builder.

   The form is on the design system; this file holds only what that system has
   no primitive for, plus #hadran-output, which is a Bricks element and so is
   styled at the top level rather than under .mishnah-ui.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Output
   Two columns, Hebrew and English side by side. The script toggles the box
   between display:flex and display:none, so flex is what the stylesheet sets.
   -------------------------------------------------------------------------- */
#hadran-output {
  display: flex;
  gap: 3.2rem;
  margin-top: 3.2rem;
  padding: 3.2rem;
  border: 1px solid #e3e5e7;
  border-radius: 10px;
  background-color: #fbfbfc;
}

.hadran-text-column {
  flex: 1;
  padding: 10px;
}

/* The Hebrew runs larger than the translation beside it — it is the text
   being said, not a gloss on it. */
.hadran-text-column.hebrew {
  font-size: 1.3em;
}

.hadran-small-text {
  font-size: 0.8em;
}


/* --------------------------------------------------------------------------
   2. Form chrome

   .form-heading, .input-instructions and the peach that went with them are
   gone along with the markup they described.
   -------------------------------------------------------------------------- */

/*
 * The "or" between the two ways of choosing what the siyum is on.
 *
 * A rule with a word in it, rather than a line of text: the two choices below
 * it are alternatives to the checkbox above, and a centred divider says that
 * without a sentence. js/mishnah-hadran.js hides it with style.display and
 * restores it with '', so flex has to be the value in the stylesheet.
 */
.mishnah-ui .m-or {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin: 2rem 0;
  color: hsl(var(--m-muted-fg));
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mishnah-ui .m-or::before,
.mishnah-ui .m-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: hsl(var(--m-border));
}

/* The Print / Start over row, revealed once the text is generated.
   The script sets display:flex on it, so this rule supplies everything else. */
.mishnah-ui .m-hadran-actions {
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  margin-top: 3.2rem;
}


@media (max-width: 40rem) {
  #hadran-output { flex-direction: column; gap: 2.4rem; padding: 2rem; }
}