/**
 * content.css — breadcrumbs, long-form content and the remaining unstyled hooks.
 *
 * Closes the gap between markup that the templates already emit and CSS that
 * existed for it: the breadcrumb trail, the .jm-entry / .jm-prose reading
 * surface used by About, the policy pages and the size guide, the homepage
 * section wrappers, and a handful of small orphaned component parts.
 *
 * Consumes tokens.css exclusively: no colour, size or breakpoint is hardcoded.
 * Where a shade is needed that is not a token it is derived from one with
 * color-mix(), the same way home.css does it.
 *
 * Mobile-first. Logical properties only — there is no left/right in this file,
 * so the same rules serve the Arabic RTL front end and a future LTR locale.
 *
 * Breakpoints (from the build contract): sm 480, md 768, lg 1024, xl 1280.
 */

/* ===========================================================================
 * 1. Breadcrumbs — .jm-breadcrumbs
 *
 * Markup (inc/template-tags.php): nav.jm-breadcrumbs > div.jm-container >
 * ol.jm-breadcrumbs__list > li.jm-breadcrumbs__item, each item holding either
 * a.jm-breadcrumbs__link + the chevron svg.jm-breadcrumbs__sep, or the
 * span.jm-breadcrumbs__current for the last crumb. The same block wraps the
 * output of Yoast / Rank Math / SEOPress when one of those is active, which is
 * why the link and separator rules also cover unclassed inline children.
 * ======================================================================== */

.jm-breadcrumbs {
  margin-block-end: var(--jm-space-5);
  font-size: var(--jm-fs-sm);
  line-height: var(--jm-lh-head);
  color: var(--jm-color-muted);
}

/*
 * Every call site already sits inside a .jm-container, so the nav's own inner
 * container must not add a second gutter.
 */
.jm-breadcrumbs > .jm-container {
  padding-inline: 0;
}

.jm-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--jm-space-1) var(--jm-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.jm-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--jm-space-2);
  min-inline-size: 0;
  margin: 0; /* overrides the element-level `li + li` rhythm in base.css */
}

.jm-breadcrumbs__link,
.jm-breadcrumbs a {
  color: var(--jm-color-ink-2);
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: color var(--jm-transition), border-color var(--jm-transition);
}

.jm-breadcrumbs__link:hover,
.jm-breadcrumbs a:hover,
.jm-breadcrumbs__link:focus-visible,
.jm-breadcrumbs a:focus-visible {
  color: var(--jm-color-accent-hover);
  border-block-end-color: var(--jm-color-line);
}

/* The last crumb is not a link: it stays quiet and is never underlined. */
.jm-breadcrumbs__current {
  color: var(--jm-color-muted);
  font-weight: var(--jm-fw-regular);
}

/*
 * The chevron. jouman_the_svg_icon() gives it `.jm-icon`, so it is 1.5rem by
 * default — too heavy beside small type. Sized from the block so the rule wins
 * the tie with `.jm-icon` whatever order the sheets end up in.
 */
.jm-breadcrumbs .jm-breadcrumbs__sep {
  flex: 0 0 auto;
  inline-size: var(--jm-space-4);
  block-size: var(--jm-space-4);
  color: var(--jm-color-line);
}

/*
 * Directional mirroring. The nav walker adds `.jm-icon--dir` to its own
 * chevrons and header-footer.css flips those under RTL, but the breadcrumb
 * separator is emitted WITHOUT that modifier, so it would otherwise point the
 * wrong way in Arabic. The :not() guard keeps this from double-flipping should
 * the template ever start passing `jm-icon--dir` too.
 */
:where([dir="rtl"]) .jm-breadcrumbs__sep:not(.jm-icon--dir) {
  transform: scaleX(-1);
}

@media (min-width: 768px) {
  .jm-breadcrumbs {
    margin-block-end: var(--jm-space-6);
  }
}

/* ===========================================================================
 * 2. Entry — .jm-entry
 *
 * The article wrapper on page.php and single.php.
 * ======================================================================== */

.jm-entry {
  margin: 0;
}

.jm-entry__header {
  margin-block-end: var(--jm-space-5);
}

.jm-entry__title {
  margin: 0;
}

/*
 * A page title carries the whole top of the screen on the policy pages, so it
 * gets a hairline to sit on. The journal keeps its title tight to its meta line
 * instead, so this is scoped to the page variant only.
 */
.jm-entry--page .jm-entry__header {
  padding-block-end: var(--jm-space-4);
  border-block-end: 1px solid var(--jm-color-line-soft);
}

.jm-entry__content {
  margin-block-start: var(--jm-space-5);
}

.jm-entry__footer {
  margin-block-start: var(--jm-space-7);
  padding-block-start: var(--jm-space-4);
  border-block-start: 1px solid var(--jm-color-line-soft);
  font-size: var(--jm-fs-sm);
  color: var(--jm-color-muted);
}

@media (min-width: 768px) {
  .jm-entry__header {
    margin-block-end: var(--jm-space-6);
  }

  .jm-entry__content {
    margin-block-start: var(--jm-space-6);
  }
}

/* ===========================================================================
 * 3. Long-form content — .jm-prose
 *
 * Wraps the_content() on About, both policy pages and the size guide, and the
 * archive description. Deliberately sets NO max-inline-size: the measure is the
 * container's job (page.php picks .jm-container--narrow for prose pages).
 *
 * Vertical rhythm is expressed once as flow spacing on `> * + *` rather than as
 * per-element margins, so any block the editor inserts — including ones this
 * theme has never seen — inherits the rhythm.
 * ======================================================================== */

.jm-prose {
  color: var(--jm-color-ink-2);
  line-height: var(--jm-lh-body);
}

.jm-prose > * + * {
  margin-block-start: var(--jm-space-5);
}

.jm-prose > :first-child {
  margin-block-start: 0;
}

.jm-prose > :last-child {
  margin-block-end: 0;
}

/* --- headings: more air above than below ------------------------------- */

.jm-prose h2,
.jm-prose h3,
.jm-prose h4,
.jm-prose h5,
.jm-prose h6 {
  color: var(--jm-color-ink);
  text-wrap: balance;
}

.jm-prose > h2 {
  margin-block-start: var(--jm-space-7);
}

.jm-prose > h3 {
  margin-block-start: var(--jm-space-6);
}

.jm-prose > h4,
.jm-prose > h5,
.jm-prose > h6 {
  margin-block-start: var(--jm-space-5);
}

/* The element that follows a heading belongs to it, so it sits closer. */
.jm-prose > h2 + *,
.jm-prose > h3 + *,
.jm-prose > h4 + *,
.jm-prose > h5 + *,
.jm-prose > h6 + * {
  margin-block-start: var(--jm-space-3);
}

/* --- lists -------------------------------------------------------------- */

/*
 * base.css strips padding and markers from any list carrying a class, which is
 * every list the block editor emits (.wp-block-list). Prose puts them back. The
 * `[class]` duplicates raise specificity above that reset regardless of the
 * order the sheets load in.
 */
.jm-prose ul,
.jm-prose ul[class],
.jm-prose ol,
.jm-prose ol[class] {
  padding-inline-start: var(--jm-space-5);
}

.jm-prose ul,
.jm-prose ul[class] {
  list-style: disc;
}

.jm-prose ol,
.jm-prose ol[class] {
  list-style: decimal;
}

.jm-prose li::marker {
  color: var(--jm-color-muted);
}

.jm-prose li + li {
  margin-block-start: var(--jm-space-2);
}

.jm-prose li > ul,
.jm-prose li > ol {
  margin-block-start: var(--jm-space-2);
}

.jm-prose dd + dt {
  margin-block-start: var(--jm-space-3);
}

/* --- inline ------------------------------------------------------------- */

.jm-prose strong,
.jm-prose b {
  color: var(--jm-color-ink);
  font-weight: var(--jm-fw-semi);
}

.jm-prose a {
  text-decoration-color: color-mix(in srgb, var(--jm-color-accent) 40%, transparent);
}

.jm-prose a:hover {
  text-decoration-color: currentColor;
}

/* --- blockquote --------------------------------------------------------- */

.jm-prose blockquote {
  padding-block: var(--jm-space-2);
  padding-inline-start: var(--jm-space-5);
  font-size: var(--jm-fs-md);
  line-height: var(--jm-lh-body);
}

.jm-prose blockquote cite {
  display: block;
  margin-block-start: var(--jm-space-2);
  font-size: var(--jm-fs-sm);
  font-style: normal;
  color: var(--jm-color-muted);
}

/* --- media -------------------------------------------------------------- */

.jm-prose img {
  border-radius: var(--jm-radius);
}

.jm-prose figcaption {
  margin-block-start: var(--jm-space-2);
  font-size: var(--jm-fs-sm);
  color: var(--jm-color-muted);
}

/* --- tables ------------------------------------------------------------- *
 *
 * The size guide carries three real data tables. They must be able to overflow
 * their own box on a narrow screen without ever pushing the page sideways, so
 * the scroll lives on the block-editor wrapper (figure.wp-block-table) and, for
 * a table pasted in without one, on the table itself.
 */

.jm-prose .wp-block-table {
  max-inline-size: 100%;
  margin: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

/*
 * No forced min-inline-size: the table fills the wrapper and only overflows —
 * and so only scrolls — when its own cells cannot compress any further, which
 * on a phone the nowrap header row guarantees.
 */
.jm-prose .wp-block-table > table {
  inline-size: 100%;
}

/* A bare <table> has no wrapper to scroll, so it becomes its own scroll box. */
.jm-prose > table {
  display: block;
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.jm-prose table {
  border: 1px solid var(--jm-color-line-soft);
  border-radius: var(--jm-radius);
  font-size: var(--jm-fs-sm);
}

.jm-prose thead th {
  background-color: var(--jm-color-surface-2);
  color: var(--jm-color-ink);
  font-weight: var(--jm-fw-semi);
  white-space: nowrap;
  border-block-end: 1px solid var(--jm-color-line);
}

.jm-prose th,
.jm-prose td {
  padding-block: var(--jm-space-3);
  padding-inline: var(--jm-space-4);
  vertical-align: middle;
  overflow-wrap: break-word;
  /* Measurements in these tables are Western digits: keep the columns aligned. */
  font-variant-numeric: tabular-nums;
}

/* Row header column (first cell of a body row) reads as a label, not data. */
.jm-prose tbody th {
  color: var(--jm-color-ink);
  font-weight: var(--jm-fw-semi);
  white-space: nowrap;
}

/* Zebra, kept far softer than a fill: it is a reading aid, not a pattern. */
.jm-prose tbody tr:nth-child(even) {
  background-color: color-mix(in srgb, var(--jm-color-surface-2) 50%, transparent);
}

.jm-prose tbody tr:last-child > th,
.jm-prose tbody tr:last-child > td {
  border-block-end: 0;
}

.jm-prose table caption {
  margin-block-end: var(--jm-space-2);
}

@media (min-width: 768px) {
  .jm-prose table {
    font-size: var(--jm-fs-base);
  }
}

/* ===========================================================================
 * 4. Homepage sections
 *
 * Only the parts home.css leaves open. The section wrappers themselves already
 * get their rhythm from .jm-home-section and their measure from .jm-home-wrap.
 * ======================================================================== */

/* --- featured category tiles -------------------------------------------- *
 *
 * template-parts/homepage/featured-categories.php renders the tile media span
 * whether or not a term has a thumbnail, and today none of them do — which left
 * a 3:4 empty grey rectangle above every category name. An imageless tile is
 * therefore given a deliberate treatment of its own instead: the media box is
 * dropped and the name is centred in a soft surface panel under a short gold
 * hairline. Browsers without :has() simply keep home.css's behaviour.
 */

.jm-featured-cats .jm-cat-tile:not(:has(.jm-cat-tile__image)) {
  background-color: var(--jm-color-surface-2);
}

.jm-featured-cats .jm-cat-tile:not(:has(.jm-cat-tile__image)) .jm-cat-tile__media {
  display: none;
}

.jm-featured-cats .jm-cat-tile:not(:has(.jm-cat-tile__image)) .jm-cat-tile__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--jm-space-3);
  min-block-size: calc(var(--jm-space-9) + var(--jm-space-7));
  padding: var(--jm-space-5) var(--jm-space-4);
  border-block-start: 0;
  text-align: center;
  font-size: var(--jm-fs-md);
}

.jm-featured-cats .jm-cat-tile:not(:has(.jm-cat-tile__image)) .jm-cat-tile__label::after {
  content: "";
  inline-size: var(--jm-space-6);
  block-size: 1px;
  background-color: var(--jm-color-gold);
}

.jm-featured-cats .jm-cat-tile:not(:has(.jm-cat-tile__image)):hover {
  background-color: var(--jm-color-surface);
}

/*
 * With a real image the tile becomes the image: the name sits on it, over a
 * bottom-weighted scrim derived from the ink token — the same treatment the
 * hero uses, so the two bands read as one family.
 */
.jm-featured-cats .jm-cat-tile:has(.jm-cat-tile__image) {
  --jm-tile-scrim: color-mix(in srgb, var(--jm-color-ink) 62%, transparent);

  display: grid;
  isolation: isolate;
}

.jm-featured-cats .jm-cat-tile:has(.jm-cat-tile__image) .jm-cat-tile__media,
.jm-featured-cats .jm-cat-tile:has(.jm-cat-tile__image) .jm-cat-tile__label {
  grid-area: 1 / 1;
}

.jm-featured-cats .jm-cat-tile:has(.jm-cat-tile__image) .jm-cat-tile__media {
  position: relative;
}

.jm-featured-cats .jm-cat-tile:has(.jm-cat-tile__image) .jm-cat-tile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to top,
    var(--jm-tile-scrim) 0%,
    transparent 62%
  );
  pointer-events: none;
}

.jm-featured-cats .jm-cat-tile:has(.jm-cat-tile__image) .jm-cat-tile__label {
  z-index: 1;
  align-self: end;
  padding: var(--jm-space-4);
  font-size: var(--jm-fs-md);
  color: var(--jm-color-on-accent);
  border-block-start: 0;
}

/* --- product rows -------------------------------------------------------- *
 *
 * woocommerce.css scopes its catalogue grid to .jm-woo, a wrapper the homepage
 * rows do not have, so the shared loop needs its own grid here. Layout only —
 * the card internals stay owned by woocommerce.css. Values mirror the catalogue
 * grid exactly so a row on the homepage lines up with the shop.
 */

.jm-product-section ul.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--jm-space-5) var(--jm-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.jm-product-section ul.products li.product {
  inline-size: auto;
  max-inline-size: none;
  margin: 0;
  padding: 0;
  float: none;
  clear: none;
  text-align: start;
}

.jm-product-section ul.products li.product::before,
.jm-product-section ul.products li.product::after {
  content: none;
}

/* Keeps the "view all" link on one line beside the section title. */
.jm-section-head__more-label {
  white-space: nowrap;
}

@media (min-width: 768px) {
  .jm-product-section ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--jm-space-6) var(--jm-space-5);
  }
}

@media (min-width: 1024px) {
  .jm-product-section ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ===========================================================================
 * 5. Small orphans
 * ======================================================================== */

/*
 * Icon-only button. Square, and never below the 44px touch floor — 2.75rem is
 * the same square the header actions use.
 */
.jm-btn--icon {
  inline-size: 2.75rem;
  min-inline-size: 2.75rem;
  block-size: 2.75rem;
  min-block-size: 2.75rem;
  padding-block: 0;
  padding-inline: 0;
  flex: 0 0 auto;
}

/*
 * searchform.php outside the header panel — 404, search results and the empty
 * archive/index states. header-footer.css lays the form out inside .jm-search
 * only, so these are the same three rules for every other context; the panel's
 * higher-specificity versions still win where they apply.
 */
.jm-search-form__field {
  display: flex;
  align-items: stretch;
  gap: var(--jm-space-2);
}

.jm-search-form__input {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.jm-search-form__submit {
  flex: 0 0 auto;
}

/* ===========================================================================
 * 6. Motion preference
 * ======================================================================== */

@media (prefers-reduced-motion: reduce) {
  .jm-breadcrumbs__link,
  .jm-breadcrumbs a {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
 * Block alignment breakout
 *
 * The theme declares add_theme_support('align-wide') but nothing implemented
 * the CSS, so .alignfull / .alignwide blocks were confined to the content
 * column. The imported Spectra pages are built almost entirely from full-bleed
 * containers, which is why their heroes and section bands appeared crushed.
 *
 * calc(50% - 50vw) is direction-neutral: margin-inline applies the same
 * negative gutter on both sides, so this behaves identically in RTL and LTR.
 * ------------------------------------------------------------------------- */

.jm-prose > .alignfull,
.jm-entry__content > .alignfull {
  margin-inline: calc(50% - 50vw);
  max-inline-size: 100vw;
}

.jm-prose > .alignwide,
.jm-entry__content > .alignwide {
  /* Never wider than the site container, and never narrower than its parent. */
  margin-inline: min(0px, calc(50% - 50vw));
  max-inline-size: var(--jm-container);
}

@media (min-width: 1024px) {
  .jm-prose > .alignwide,
  .jm-entry__content > .alignwide {
    margin-inline: calc(50% - min(50vw, var(--jm-container) / 2));
  }
}

/* Full-bleed blocks bring their own inner padding; the prose flow gap would
   otherwise add a visible seam between stacked bands. */
.jm-prose > .alignfull + .alignfull,
.jm-entry__content > .alignfull + .alignfull {
  margin-block-start: 0;
}

/* A breakout element must never make the document itself scroll sideways. */
.jm-main {
  overflow-x: clip;
}