/**
 * @file
 * Node-level moderation-state visual treatment.
 *
 * Gives editorial staff an at-a-glance visual cue that they are not
 * looking at the live/published revision — the D7-style gray diagonal
 * slashes for Archived nodes plus distinct patterns for Draft and
 * in-review revisions.
 *
 * Class placement:
 *   `moderation-state--*` lives on `.layout-container` (set from
 *   esource_public_preprocess_page() via page_path_class, rendered by
 *   page.html.twig line 49). That's the only reliable class-injection
 *   point on this theme.
 *
 * How the paint works:
 *   The `article.node` element gets a thin dashed outline (state
 *   colour) and a `::before` pseudo-element pinned to fill it. The
 *   pseudo-element carries the diagonal stripe pattern and sits ABOVE
 *   the content (`z-index: 2 + pointer-events: none`) so the pattern
 *   is visible over the text — matching the D7 behaviour where the
 *   slashes overlay the whole page area.
 *
 * `!important` is used deliberately so aggregated theme CSS
 * (dist/css/styles.css) cannot accidentally hide the treatment.
 */

/* --------------------------------------------------------------------
 * Shared shell — thin dashed outline + a positioning context for the
 * ::before overlay.
 * ------------------------------------------------------------------ */
.layout-container.moderation-state--archived article.node,
.layout-container.moderation-state--draft article.node,
.layout-container.moderation-state--ready-for-review article.node,
.layout-container.moderation-state--ready-for-final-check article.node,
.layout-container.moderation-state--ready-for-publication article.node {
  position: relative !important;
  border: 1px dashed currentColor !important;
}

/* Pattern overlay — sits above the content, click-through friendly. */
.layout-container.moderation-state--archived article.node::before,
.layout-container.moderation-state--draft article.node::before,
.layout-container.moderation-state--ready-for-review article.node::before,
.layout-container.moderation-state--ready-for-final-check article.node::before,
.layout-container.moderation-state--ready-for-publication article.node::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-repeat: repeat;
}

/* --------------------------------------------------------------------
 * Archived — D7-style gray diagonal slashes.
 * ------------------------------------------------------------------ */
.layout-container.moderation-state--archived article.node {
  color: #6b6b6b !important;
}

.layout-container.moderation-state--archived article.node::before {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(107, 107, 107, 0.55) 0,
    rgba(107, 107, 107, 0.55) 1px,
    rgba(242, 242, 242, 0) 1px,
    rgba(242, 242, 242, 0) 6px
  );
}

/* --------------------------------------------------------------------
 * Draft — amber diagonal pattern.
 * ------------------------------------------------------------------ */
.layout-container.moderation-state--draft article.node {
  color: #b58900 !important;
}

.layout-container.moderation-state--draft article.node::before {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(181, 137, 0, 0.45) 0,
    rgba(181, 137, 0, 0.45) 1px,
    rgba(255, 248, 220, 0) 1px,
    rgba(255, 248, 220, 0) 6px
  );
}

/* --------------------------------------------------------------------
 * Ready-for-* review states — green diagonal pattern.
 * ------------------------------------------------------------------ */
.layout-container.moderation-state--ready-for-review article.node,
.layout-container.moderation-state--ready-for-final-check article.node,
.layout-container.moderation-state--ready-for-publication article.node {
  color: #2e6b2e !important;
}

.layout-container.moderation-state--ready-for-review article.node::before,
.layout-container.moderation-state--ready-for-final-check article.node::before,
.layout-container.moderation-state--ready-for-publication article.node::before {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(46, 107, 46, 0.45) 0,
    rgba(46, 107, 46, 0.45) 1px,
    rgba(234, 246, 234, 0) 1px,
    rgba(234, 246, 234, 0) 6px
  );
}