/* ==========================================================================
   Mishnah — single Mishnah page
   ==========================================================================

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

   Source: page-builder-css/mishnah-single.css

   Loads after css/mishnah-learn.css, which carries everything this page and
   Mishnah Yomi have in common. Only what is genuinely specific to the single
   Mishnah page is here.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Hebrew body text
   --------------------------------------------------------------------------

   The face comes from --mishnah-font-text, declared once in
   css/mishnah-global.css, so this page and Mishnah Yomi cannot drift apart
   again — Yomi used to set no font-family at all.

   font-size and line-height are deliberately NOT set here:
   css/mishnah-learn-settings.css recomputes both from --mishnah-text-scale
   and is enqueued during render, so it lands after this file. Declaring them
   here was dead weight that only looked like it worked.
   -------------------------------------------------------------------------- */
.mishnah-hebrew {
  font-family: var(--mishnah-font-text);
  width: 100%;
}


/* --------------------------------------------------------------------------
   2. Settings popup
   The older per-page popup, distinct from the reading-settings modal in
   css/mishnah-learn-settings.css.
   -------------------------------------------------------------------------- */
#mishnah-settings-button {
  cursor: pointer;
}

#mishnah-settings-button:hover {
  fill: blue;
}

.toggle-cont {
  position: relative;
  height: 30px;
}

.settings-toggle {
  cursor: pointer;
}

.settings-toggle:hover {
  fill: var(--accent);
}

/* Kept in the layout and scaled to nothing rather than display:none, so the
   open and close both animate. */
.popup {
  visibility: hidden;
  position: absolute;
  z-index: 1;
  background-color: #ffffff;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
  padding: 10px;
  border-radius: 4px;
  right: 1em;
  top: 2em;
  transition: all 0.3s ease-in-out;
  transform: scale(0);
  opacity: 0;
  min-width: 180px;
}

.popup p {
  font-size: 0.8em;
  margin-bottom: 1em;
}

.popup.show {
  visibility: visible;
  transform: scale(1);
  opacity: 1;
}


/* --------------------------------------------------------------------------
   3. Layout toggles
   -------------------------------------------------------------------------- */
.toggle-columns,
.toggle-rows {
  cursor: pointer;
  padding: 5px;
  color: white;
  background-color: grey;
  height: 32px;
  width: 32px;
}

.toggle-columns:hover,
.toggle-rows:hover {
  background-color: darkgrey;
}

.toggle-columns.active,
.toggle-rows.active {
  background-color: black;
}