/* ==========================================================================
   Mishnah — global styles
   ==========================================================================

   Migrated out of the Bricks page builder. Once this file is live, delete the
   corresponding blocks from the builder or they will load twice.

   Source: page-builder-css/global.css, header.css, footer.css and
           chart-archive.css.

   Several rules here are not cosmetic extras — they style markup the plugin's
   own PHP emits, and without them those functions render unstyled. They are
   marked "PLUGIN OUTPUT" below. That is the reason this file exists in the
   plugin rather than in the builder.

   These rules still reference the site framework's variables (--primary,
   --base, --accent, --action, --radius-m …). That is deliberate for now: this
   is a lift-and-shift, and the point is that nothing changes visually. Each
   block moves onto the plugin's own tokens as its surface is redesigned.
   ========================================================================== */


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

   --mishnah-font-text is the single declaration of the face Mishnah text is
   set in. It was written out by hand in six places - here, the single Mishnah
   page, Mishnah Yomi (where it was missing entirely, so the same Mishnah
   rendered differently on two pages), the chart hero, manage-chart.css and
   inline inside mishnah-hadran.js - and one token replaces all of them.

   NOT scoped to .mishnah-ui: this applies to Bricks-authored Hebrew too, so it
   has to be on :root.

   The face is now self-hosted by the plugin (see the @font-face below), so it
   no longer depends on the theme declaring it. The fallbacks after it still
   matter: they are what renders during the swap, and if the file is ever lost
   they keep the text in a Hebrew serif rather than dropping it to a Latin face
   with no Hebrew glyphs at all.
   -------------------------------------------------------------------------- */

/*
 * Taamey D, self-hosted.
 *
 * The path is relative to this stylesheet, which is what makes it survive the
 * plugin being installed under any directory name.
 *
 * font-display: swap renders a fallback immediately and swaps Taamey D in when
 * it arrives. `block` would leave the Mishnah invisible for up to three seconds
 * on a slow connection - the worst possible thing to hide.
 *
 * No unicode-range: the file is 21KB and is wanted on every page that shows
 * Hebrew, so there is nothing to gain by subsetting the request.
 */
@font-face {
  font-family: "Taamey D";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/web/taamey-d.woff2") format("woff2");
}

:root {
  --mishnah-font-text: "Taamey D", "Taamey Frank CLM", "Frank Ruehl CLM",
                       "David Libre", "Times New Roman", serif;
}

.hebrew {
  text-align: right;
  direction: rtl;
  font-family: var(--mishnah-font-text);
}


/* --------------------------------------------------------------------------
   2. Breadcrumbs / back arrow
   PLUGIN OUTPUT — mishnah_dashboard_breadcrumbs(), inc/mishnah-dashboard.php
   -------------------------------------------------------------------------- */
.mishnah-back-arrow {
  color: #000;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mishnah-back-arrow:hover {
  color: var(--action);
}

div.mishnah-back-arrow__arrow {
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  position: relative;
  transform: rotate(-135deg);
  display: inline-block;
  margin-right: 5px;
}

div.mishnah-back-arrow__arrow::after {
  content: "";
  float: left;
  position: relative;
  top: -100%;
  width: 100%;
  height: 100%;
  border-width: 0 1px 0 0;
  border-style: solid;
  border-color: #000;
  transform-origin: 100% 0;
  transition: 0.2s ease;
}

div.mishnah-back-arrow__arrow::before {
  content: "";
  width: 100%;
  height: 100%;
  border-width: 1.5px 1.5px 0 0;
  border-style: solid;
  border-color: #000;
  transition: 0.2s ease;
  display: block;
  transform-origin: 100% 0;
}

.mishnah-back-arrow:hover div.mishnah-back-arrow__arrow::after {
  transform: rotate(45deg);
  border-color: var(--action);
  height: 120%;
}

.mishnah-back-arrow:hover div.mishnah-back-arrow__arrow::before {
  border-color: var(--action);
  transform: scale(0.8);
}

@media (max-width: 767px) {
  .mishnah-back-arrow span {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   3. Header and footer
   Source: page-builder-css/header.css, footer.css

   Note: the tab-on-hover behaviour that lived in page-builder-css/header.js
   is NOT migrated. It targets a hardcoded Bricks element id (#brxe-wnvbmj),
   which would break the moment that element is rebuilt. It needs a stable
   class on the element first — leave it in the builder until then.
   -------------------------------------------------------------------------- */
.mishnah-main-menu-desktop li a:hover {
  background: var(--primary-ultra-light);
}

.brxe-dropdown a {
  color: var(--base);
}

.brxe-dropdown a:hover {
  color: var(--primary-dark);
}

.mishnayos-footer a {
  color: var(--base);
  font-size: 0.8em;
}

.mishnayos-footer h4 {
  font-weight: 500;
  color: var(--secondary);
}

/* Mobile menu */
.brx-submenu-toggle {
  justify-content: space-between;
}


/*
 * Frosted header.
 *
 * Add .mishnah-header-blur to the Bricks header element. Deliberately does
 * not set position/z-index/height — the builder still owns the layout, this
 * only supplies the treatment.
 *
 * The alpha on the background is what makes the blur visible; a fully opaque
 * background would blur nothing. --mishnah-header-bg is exposed so the tint
 * can be changed without touching the blur, and defaults to white at 88%.
 */
.mishnah-header-blur {
  background-color: var(--mishnah-header-bg, rgb(255 255 255 / 0.88));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/*
 * Safari on iOS drops backdrop-filter while a page is scrolling under some
 * conditions, leaving a translucent bar with unreadable text over content.
 * Where the filter is unsupported outright, fall back to near-opaque.
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mishnah-header-blur {
    background-color: var(--mishnah-header-bg-fallback, rgb(255 255 255 / 0.97));
  }
}


/* --------------------------------------------------------------------------
   4. Archive cards
   -------------------------------------------------------------------------- */
.mishnah-archive__card-cont {
  list-style: none;
  gap: 2em;
  padding: 0;
}

.mishnah-archive__card {
  border: 1px solid var(--primary);
  padding: 30px;
  display: flex;
  width: 100%;
  flex-direction: column;
  background: var(--primary-ultra-light);
  color: var(--base);
  max-width: 350px;
  border-radius: 20px;
}

@media (max-width: 767px) {
  .mishnah-archive__card {
    max-width: 100%;
  }
}

.mishnah-archive__card h2,
.mishnah-archive__card h3 {
  color: var(--primary);
  font-size: 1em;
}

.mishnah-subtitle.hebrew {
  font-size: 2em;
}

/*
 * The single definition of this card. css/manage-chart.css used to define it
 * too, with a different border, padding, radius and ground; that copy has been
 * removed and its two unique declarations folded in below.
 */
.disabled-seder-card {
  border: 1px solid var(--base-light);
  padding: 30px;
  display: flex;
  width: 100%;
  flex-direction: column;
  background: var(--base-ultra-light);
  color: var(--base);
  max-width: 350px;
  border-radius: 20px;
  /* Merged in from css/manage-chart.css, which also defined this card. */
  text-align: center;
}

.disabled-seder-card h3 {
  color: var(--primary);
  font-size: 1em;
  margin-top: 0;
}


/* --------------------------------------------------------------------------
   5. Learn page
   -------------------------------------------------------------------------- */
.learn__seder ul {
  padding-left: 0px;
  display: grid;
  list-style: none;
}


/* --------------------------------------------------------------------------
   6. Status labels
   PLUGIN OUTPUT — status_label(), inc/display-mishnah-chart.php
   -------------------------------------------------------------------------- */
.mishnah-status-label {
  position: relative;
  padding: 5px 12px 5px 25px;
  border-radius: 30px;
  font-size: 0.8em;
  font-weight: 600;
}

.mishnah-status-label::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: currentColor;
}

.mishnah-status-label-available   { background: #e8f5e8; color: #2e7d32; }
.mishnah-status-label-in-progress { background: #fff3e0; color: #ef6c00; }
.mishnah-status-label-complete    { background: #e3f2fd; color: #1565c0; }


/* --------------------------------------------------------------------------
   7. Text labels
   -------------------------------------------------------------------------- */
.text-label__red {
  border-radius: 5px;
  padding: 2px 10px;
  background: var(--danger-light);
  font-size: 0.9em;
  font-weight: 500;
}

.text-label__green {
  border-radius: 5px;
  padding: 2px 10px;
  background: var(--success-light);
  font-size: 0.9em;
  font-weight: 500;
}

.text-label__yellow {
  border-radius: 5px;
  padding: 2px 10px;
  background: var(--warning-light);
  font-size: 0.9em;
  font-weight: 500;
}

.text-label__gray {
  border-radius: 5px;
  padding: 2px 10px;
  background: #d9d9d9;
  font-size: 0.9em;
  font-weight: 500;
}

.grid-header .chart-role-col {
  font-weight: bold;
}


/* --------------------------------------------------------------------------
   8. Progress bar
   PLUGIN OUTPUT — chart_status_bar(), inc/chart-utility-functions.php
   The fill width and the counting label are driven by js/mishnah-progress-bar.js
   -------------------------------------------------------------------------- */
.progress-bar {
  position: relative;
  width: 100%;
  height: 20px;
  background: #ffffff;
  border-radius: 50px;
  overflow: hidden;
}

.progress-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--primary);
  transition: width 1.5s ease-in-out;
}

.progress-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 0.7em;
  mix-blend-mode: difference;
}


/* --------------------------------------------------------------------------
   9. Chart cause label
   PLUGIN OUTPUT — chart_cause_label(), inc/chart-utility-functions.php
   -------------------------------------------------------------------------- */
.chart-cause-label {
  padding: 4px 12px;
  border-radius: 50em;
  font-size: 0.6em;
  background-color: #ffffff;
  color: var(--primary-medium);
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   10. Chart summary card
   -------------------------------------------------------------------------- */
.chart-summary-card__outer {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  padding: 1em;
  background-color: var(--action-light-trans-40);
  width: 100%;
  border-style: none;
  border-radius: var(--radius-m);
  transition: all 0.3s ease-in-out;
}

.chart-summary-card__outer:hover {
  background-color: var(--action-trans-20);
}

.chart-summary-card__top-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 1em;
}

.chart-summary-card__id {
  font-size: var(--text-s);
  color: var(--base);
}

.chart-summary-card__english-name {
  text-transform: capitalize;
  color: var(--action);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.chart-summary-card__hebrew-name {
  color: var(--base);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  direction: rtl;
  text-align: left;
}

.chart-summary-card__date {
  color: var(--base);
  font-size: 0.8em;
}

.chart-summary-card__outer .progress-bar {
  margin-top: 0.5em;
}


/* --------------------------------------------------------------------------
   11. Chart search
   PLUGIN OUTPUT — ajax_search_shortcode(), inc/chart-utility-functions.php
   Source: page-builder-css/chart-archive.css

   Folded into the global file rather than given its own conditional enqueue,
   because [ajax_search] is a shortcode and can be placed on any page. It is
   under 1KB and every selector is specific to it.
   -------------------------------------------------------------------------- */
.chart-search-outer {
  position: relative;
}

.chart-search-input {
  border: 0px #fff none;
  border-radius: 8px;
}

.chart-search-input::placeholder {
  color: #888;
  opacity: 1;
}

.search-field-wrapper {
  display: flex;
  background: #fff;
  border: 2px #000 solid;
  border-radius: 8px;
  align-items: center;
  padding: 2px;
}

.search-field-wrapper svg {
  height: 30px;
  width: 30px;
}

.chart-search-results {
  display: none;
  position: absolute;
  width: 100%;
  background: #fff;
  border: 1px #000 solid;
  border-radius: 8px;
  margin-top: 1em;
  z-index: 500;
  box-shadow: 0 0 50px #ccc;
  padding: 1em;
}

.chart-search-results ul {
  padding: 0;
  margin: 0;
}

.chart-search-results li {
  list-style-type: none;
}

.chart-search-results a {
  color: #000;
}


/* --------------------------------------------------------------------------
   12. Base form fields
   PLUGIN OUTPUT (indirectly) — every plugin form relies on these. They are
   the reason an unstyled create-chart form looks broken with the builder CSS
   removed.
   -------------------------------------------------------------------------- */
form label {
  display: block;
  color: var(--base);
}

/*
 * :not(.hcf-calendar-input) - the Luach Picker's field ships its own complete
 * styling and this reset was landing on top of it. See the note in
 * css/mishnah-form-ui.css; the package's rule scores 0-1-0 and this one
 * 0-1-2, so without the exclusion it wins and the placeholder ends up
 * underneath the calendar icon.
 */
form input[type="text"]:not(.hcf-calendar-input),
form input[type="email"],
form input[type="tel"],
form input[type="password"],
form textarea,
form select {
  width: 100%;
  padding: 0px 8px;
  border: 1px solid #aaa;
  border-radius: 4px;
  font-size: 1em;
  margin-bottom: 8px;
  background-color: #fff;
}

/* Metabox frontend fields */
.rwmb-label label {
  color: var(--base);
}

.rwmb-form button[type="submit"] {
  border-radius: 5px;
  padding: 6px 24px;
  color: #fff;
  background: var(--primary);
  margin-top: 1em;
}

.rwmb-form button[type="submit"]:hover {
  opacity: 0.8;
}

.rwmb-input select {
  background-color: #fff;
}

.rwmb-heading-wrapper h4 {
  font-size: unset !important;
}


/* --------------------------------------------------------------------------
   13. Tooltip icon
   PLUGIN OUTPUT — inc/create-chart-form.php and other forms
   -------------------------------------------------------------------------- */
.tooltip-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 0.6em 0.1em;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00NDAtMjgwaDgwdi0yNDBoLTgwdjI0MFptNDAtMzIwcTE3IDAgMjguNS0xMS41VDUyMC02NDBxMC0xNy0xMS41LTI4LjVUNDgwLTY4MHEtMTcgMC0yOC41IDExLjVUNDQwLTY0MHEwIDE3IDExLjUgMjguNVQ0ODAtNjAwWm0wIDUyMHEtODMgMC0xNTYtMzEuNVQxOTctMTk3cS01NC01NC04NS41LTEyN1Q4MC00ODBxMC04MyAzMS41LTE1NlQxOTctNzYzcTU0LTU0IDEyNy04NS41VDQ4MC04ODBxODMgMCAxNTYgMzEuNVQ3NjMtNzYzcTU0IDU0IDg1LjUgMTI3VDg4MC00ODBxMCA4My0zMS41IDE1NlQ3NjMtMTk3cS01NCA1NC0xMjcgODUuNVQ0ODAtODBabTAtODBxMTM0IDAgMjI3LTkzdDkzLTIyN3EwLTEzNC05My0yMjd0LTIyNy05M3EtMTM0IDAtMjI3IDkzdC05MyAyMjdxMCAxMzQgOTMgMjI3dDIyNyA5M1ptMC0zMjBaIi8+PC9zdmc+");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Balloon.css theming */
:root {
  --balloon-border-radius: 6px;
  --balloon-color: var(--primary);
}


/* --------------------------------------------------------------------------
   14. Third-party widget overrides
   -------------------------------------------------------------------------- */

/* --- intl-tel-input ------------------------------------------------------ */
.iti.iti--allow-dropdown.iti--show-flags {
  margin-bottom: 8px;
  width: 100%;
}

.iti--separate-dial-code .iti__selected-flag {
  background-color: rgb(0 0 0 / 0%);
}

/* --- SlimSelect ---------------------------------------------------------- */
.ss-main {
  border-color: var(--shade-light);
  border-radius: var(--btn-radius);
  padding: 0.5em 1em;
  margin-bottom: 1em;
}

.ss-main .ss-values .ss-value {
  background-color: var(--accent-trans-10);
  transition: all 0.3s ease-in-out;
}

.ss-main .ss-values .ss-value:hover {
  background-color: var(--accent-trans-20);
}

.ss-main .ss-values .ss-value .ss-value-text {
  font-size: clamp(1.4rem, calc(0.4166666667vw + 1.2666666667rem), 1.8rem);
  line-height: 1;
  font-weight: 400;
  color: var(--base);
}

.ss-main .ss-values .ss-value .ss-value-delete {
  border-left: solid 1px var(--base-medium);
}

.ss-main .ss-values .ss-value .ss-value-delete svg {
  min-width: auto;
}

.ss-main .ss-values .ss-value .ss-value-delete svg path {
  stroke: var(--base);
}

/* --- SweetAlert2 --------------------------------------------------------- */
/*
 * SweetAlert2 sets `.swal2-popup { font-size: 1rem }` in its own stylesheet.
 * At this site's 62.5% root that is 10px, and everything inside a Swal is
 * sized in em from it - so the whole modal came out about two thirds the size
 * it should be.
 *
 * That override used to win purely because the builder printed this CSS after
 * Swal's. Now that this file loads early, it needs the specificity to win on
 * its own: html + class beats Swal's single class at any load order.
 *
 * An absolute 1.6rem rather than `1em`, because `1em` inherits from
 * .swal2-container, which inherits from body - so the modal's scale depended
 * on whatever the theme set on body.
 */
html .swal2-popup {
  background: #f7f8f8;
  border-radius: 8px;
  font-size: 1.6rem;
}

/*
 * Swal's buttons are sized in em from the popup, but the plugin's own buttons
 * are not - so match them here rather than leaving two button scales in one
 * interface.
 */
html .swal2-styled {
  font-size: 1.5rem;
  font-weight: 500;
  border-radius: calc(var(--m-radius, 1.04rem) - 2px);
  padding: 0.9rem 1.6rem;
}

html .swal2-title { font-size: 2.2rem; }
html .swal2-html-container { font-size: 1.6rem; }

.swal2-styled.swal2-confirm {
  background-color: var(--base);
}

.swal2-cancel.swal2-styled {
  background-color: #aeaeae;
}

.swal2-icon.swal2-success,
.swal2-icon.swal2-question,
.swal2-icon.swal2-error,
.swal2-icon.swal2-info,
.swal2-icon.swal2-warning {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

.swal2-x-mark-line-left,
.swal2-x-mark-line-right {
  background-color: var(--accent) !important;
}

.swal2-show {
  animation: swal2-show-smooth 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

@keyframes swal2-show-smooth {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}


/* --------------------------------------------------------------------------
   15. Buttons
   -------------------------------------------------------------------------- */
.btn--primary,
.btn--secondary,
.btn--accent {
  cursor: pointer;
}

.mishnah-btn-hover--action:hover {
  transform: translate(-0.2rem, -0.2rem);
  box-shadow: -4px 4px 0 0 var(--action);
}


/* --------------------------------------------------------------------------
   16. Loading spinner
   PLUGIN OUTPUT — the .loading-button-container markup in the create and
   organisation forms.

   CONFLICT, unresolved on purpose: css/manage-chart.css also defines
   .loading-spinner-path, with stroke var(--primary) instead of #000, and
   .loading-spinner without the animation shorthand. On the manage-chart and
   create-chart pages that file loads after this one and wins. Preserved as-is
   so nothing shifts; needs a decision on which is correct.
   -------------------------------------------------------------------------- */
.loading-button-container {
  position: relative;
  display: inline-block;
}

.loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  animation: rotate 2s linear infinite;
  display: none;
}

.loading-spinner-path {
  stroke: #000;
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}


/* --------------------------------------------------------------------------
   17. Dashboard title
   -------------------------------------------------------------------------- */
.dashboard-title {
  color: #ffffff;
}