/* ==========================================================================
   Mishnah — previous / next navigation
   ==========================================================================

   PLUGIN OUTPUT — mishnah_learn_nav(), inc/mishnah-learn-nav.php

   Loaded on demand by that function rather than from the page-scoped block in
   mishnah-plugin.php: the nav runs on perek pages too, and a perek page is an
   archive query, so the is_singular('mishnah') condition that loads
   css/mishnah-learn.css is false there.

   Colours are the plugin's own tokens, declared in css/mishnah-global.css.
   Nothing here reads an Automatic.css variable, so the component keeps its
   appearance if the site ever stops using that page builder.

   Written with logical properties throughout, so the row mirrors itself in
   Hebrew and Yiddish with no rules in css/mishnah-rtl.css. The one thing that
   cannot mirror on its own is the chevron, at the bottom of this file.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. The row
   --------------------------------------------------------------------------

   Grid rather than flex with space-between: the counter has to sit in the
   true centre of the row, and space-between would centre it between the two
   cards instead — which drifts as soon as one label is longer than the other.
   1fr auto 1fr pins it to the middle whatever the cards do.
   -------------------------------------------------------------------------- */
.mishnah-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 1em;
  margin-block: 2em;
}


/* --------------------------------------------------------------------------
   2. The cards
   -------------------------------------------------------------------------- */
.mishnah-nav__link {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.85em 1.1em;
  border: 1px solid var(--mishnah-border);
  border-radius: 10px;
  background: var(--mishnah-surface);
  color: var(--mishnah-ink-strong);
  text-decoration: none;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Previous hugs the start of the row, next the end, so the two cards sit at
   the outer edges with the counter between them. */
.mishnah-nav__link--prev {
  justify-content: flex-start;
  margin-inline-end: auto;
}

.mishnah-nav__link--next {
  justify-content: flex-end;
  margin-inline-start: auto;
  text-align: end;
}

.mishnah-nav__link:hover,
.mishnah-nav__link:focus-visible {
  border-color: var(--mishnah-accent);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

/*
   The two ends of Shas — Berachos 1:1 has nothing before it, the last mishnah
   of Uktzin nothing after. Drawn as a greyed card rather than dropped, so the
   row keeps its shape on those two pages out of 4192.
*/
.mishnah-nav__link--disabled {
  border-style: dashed;
  background: transparent;
  color: var(--mishnah-ink-faint);
  cursor: default;
}

.mishnah-nav__link--disabled:hover {
  border-color: var(--mishnah-border);
  box-shadow: none;
}

.mishnah-nav__text {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  min-inline-size: 0;
}

.mishnah-nav__label {
  font-weight: 600;
  line-height: 1.25;
}

.mishnah-nav__detail {
  color: var(--mishnah-accent);
  font-size: 0.85em;
  line-height: 1.3;
}

.mishnah-nav__link--disabled .mishnah-nav__detail {
  color: inherit;
}

/* Spacing comes from real whitespace in the markup, so the line can break
   here. Padding would have looked the same and been unbreakable. */
.mishnah-nav__sep {
  opacity: 0.55;
}


/* --------------------------------------------------------------------------
   3. Counter and progress
   --------------------------------------------------------------------------

   A bar at every length, not dots. Keilim has 30 perakim and Avos perek 5 has
   23 mishnayos — 30 dots is wider than a phone — and 17% of perakim (88 of
   525) hold more than ten mishnayos, so the long case is common enough that
   one that always works beats one that usually looks nicer.
   -------------------------------------------------------------------------- */
.mishnah-nav__status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding-inline: 0.5em;
}

.mishnah-nav__counter {
  margin: 0;
  color: var(--mishnah-ink-strong);
  font-size: 0.95em;
  line-height: 1.2;
  text-align: center;
  /* The numbers keep their own direction inside a Hebrew sentence. */
  text-wrap: balance;
}

.mishnah-nav__progress {
  inline-size: 140px;
  block-size: 6px;
  max-inline-size: 100%;
  border-radius: 999px;
  background: var(--mishnah-surface-sunken);
  overflow: hidden;
}

/*
   inline-size, not width: the fill grows from the inline start, which is the
   right-hand edge on a Hebrew page. A width here would have it growing from
   the left in every language.
*/
.mishnah-nav__progress-fill {
  display: block;
  block-size: 100%;
  border-radius: inherit;
  background: var(--mishnah-accent);
  transition: inline-size 0.3s ease-in-out;
}


/* --------------------------------------------------------------------------
   4. The chevrons
   -------------------------------------------------------------------------- */
.mishnah-nav__chevron {
  flex: none;
  inline-size: 1.25em;
  block-size: 1.25em;
  opacity: 0.65;
}

.mishnah-nav__link:hover .mishnah-nav__chevron {
  opacity: 1;
}

/*
   An arrow is a drawn shape, not layout, so it does not mirror with the page.
   On a Hebrew page "previous" sits on the right and has to point right.

   scaleX(-1) is safe here, unlike on .mishnah-back-arrow__arrow in
   css/mishnah-rtl.css: that one is a rotated box whose transform this would
   have replaced. These are real chevron glyphs with no transform of their own,
   so there is nothing to destroy.

   This rule lives here rather than in mishnah-rtl.css because it belongs to
   the component, and mishnah-rtl.css is for markup the plugin does not own.
*/
.mishnah-rtl .mishnah-nav__chevron {
  transform: scaleX(-1);
}


/* --------------------------------------------------------------------------
   5. Mobile
   --------------------------------------------------------------------------

   768px is the breakpoint the rest of the plugin uses, and the one
   js/mishnah-learn-settings.js tests for its own layout switch.

   Two half-width cards under a full-width counter. The alternative — icon-only
   arrows on one line — drops the destination labels, and on a study site
   "Perek 1 · Mishnah 2" is the reason to tap at all.

   The grid does the mirroring: column 1 is the inline start, so on a Hebrew
   page previous lands on the right without a second rule.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .mishnah-nav {
    grid-template-columns: 1fr 1fr;
    gap: 0.75em;
  }

  .mishnah-nav__status {
    grid-row: 1;
    grid-column: 1 / -1;
  }

  .mishnah-nav__link--prev {
    grid-row: 2;
    grid-column: 1;
  }

  .mishnah-nav__link--next {
    grid-row: 2;
    grid-column: 2;
  }

  /* Full width of their half — the auto margins that push them apart on
     desktop would shrink them to their text here. */
  .mishnah-nav__link {
    margin-inline: 0;
    padding: 0.75em 0.85em;
    font-size: 0.9em;
  }

  .mishnah-nav__progress {
    inline-size: 180px;
  }
}

/* Narrow phones: the chevron costs more than it earns next to a wrapped
   two-line label, so the label takes the whole card. */
@media (max-width: 380px) {
  .mishnah-nav__chevron {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mishnah-nav__link,
  .mishnah-nav__progress-fill {
    transition: none;
  }
}

/* The nav is a control, not content. */
@media print {
  .mishnah-nav {
    display: none;
  }
}