/* === Versions Section (scoped, design-only) === */
/* Works with either .erp-versions .erp-grid or .txc-versions-auto wrappers */
.erp-versions .erp-grid,
.txc-versions-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  justify-content: start;   /* left-align cards */
  justify-items: start;
}

/* Card base (anchors/divs) */
.erp-versions .erp-grid > *,
.txc-versions-auto > * {
  display: block;
  position: relative;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  padding: 14px 16px 16px;
  text-decoration: none;
  color: #0f172a;
  box-shadow: 0 1px 4px rgba(0,0,0,.03);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  max-width: 260px;  /* compact */
  text-align: left;
}
.erp-versions .erp-grid > *:hover,
.txc-versions-auto > *:hover {
  transform: translateY(-2px);
  border-color: #93c5fd;
  box-shadow: 0 6px 20px rgba(59,130,246,.15);
}

/* Explicit selected state for the active version card */
.erp-versions .erp-grid > .erp-card.is-active,
.txc-versions-auto > .erp-card.is-active {
  border-color: var(--txc-blue, #2563eb);
  box-shadow: 0 10px 26px rgba(15,23,42,.25);
  background-image: linear-gradient(135deg, rgba(37,99,235,.09), rgba(59,130,246,.01));
  transform: translateY(-3px);
}

/* Titles / text (agnostic to markup) */
.erp-versions .erp-grid > * h3,
.erp-versions .erp-grid > * h4,
.erp-versions .erp-grid > * .version-title,
.erp-versions .erp-grid > * [data-version-title],
.txc-versions-auto > * h3,
.txc-versions-auto > * h4,
.txc-versions-auto > * .version-title,
.txc-versions-auto > * [data-version-title] {
  margin: 6px 0 4px;
  font-size: 16px;
  font-weight: 800;
  color: #0b3c78; /* theme blue */
}
.erp-versions .erp-grid > * p,
.erp-versions .erp-grid > * .version-desc,
.txc-versions-auto > * p,
.txc-versions-auto > * .version-desc {
  margin: 0;
  font-size: 13px;
  color: #334155;
}

/* Legend / hashtag pill */
.erp-versions .erp-grid > *::before,
.txc-versions-auto > *::before {
  content: attr(data-version-term);
  position: absolute;
  top: 10px; left: 10px;
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #0f172a;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.08);
}
.erp-versions .erp-grid > *:not([data-version-term])::before,
.erp-versions .erp-grid > *[data-version-term=""]::before,
.txc-versions-auto > *:not([data-version-term])::before,
.txc-versions-auto > *[data-version-term=""]::before {
  content: "#" attr(data-version-slug);
}
.erp-versions .erp-grid > *:not([data-version-term]):not([data-version-slug])::before,
.txc-versions-auto > *:not([data-version-term]):not([data-version-slug])::before {
  content: "";
  display: none;
}

/* Subtle brand-friendly tints */
.erp-versions .erp-grid > *:nth-child(6n+1),
.txc-versions-auto > *:nth-child(6n+1) { background: linear-gradient(0deg, rgba(59,130,246,0.06), rgba(59,130,246,0.06)), #fff; }
.erp-versions .erp-grid > *:nth-child(6n+2),
.txc-versions-auto > *:nth-child(6n+2) { background: linear-gradient(0deg, rgba(249,115,22,0.06), rgba(249,115,22,0.06)), #fff; }
.erp-versions .erp-grid > *:nth-child(6n+3),
.txc-versions-auto > *:nth-child(6n+3) { background: linear-gradient(0deg, rgba(34,197,94,0.06), rgba(34,197,94,0.06)), #fff; }
.erp-versions .erp-grid > *:nth-child(6n+4),
.txc-versions-auto > *:nth-child(6n+4) { background: linear-gradient(0deg, rgba(99,102,241,0.06), rgba(99,102,241,0.06)), #fff; }
.erp-versions .erp-grid > *:nth-child(6n+5),
.txc-versions-auto > *:nth-child(6n+5) { background: linear-gradient(0deg, rgba(14,165,233,0.06), rgba(14,165,233,0.06)), #fff; }
.erp-versions .erp-grid > *:nth-child(6n+6),
.txc-versions-auto > *:nth-child(6n+6) { background: linear-gradient(0deg, rgba(234,179,8,0.06), rgba(234,179,8,0.06)), #fff; }

/* === v6.2: Caption highlight (Option B: soft tint behind title) === */
.erp-versions .erp-grid > * h3,
.erp-versions .erp-grid > * h4,
.erp-versions .erp-grid > * .version-title,
.erp-versions .erp-grid > * [data-version-title],
.txc-versions-auto > * h3,
.txc-versions-auto > * h4,
.txc-versions-auto > * .version-title,
.txc-versions-auto > * [data-version-title]{
  display:inline-block;
  padding:4px 8px;
  border-radius:8px;
  line-height:1.2;
  background: rgba(11,60,120,0.10); /* default soft blue tint */
  color:#0b3c78; /* keep readable on pale tints */
}

/* Match title tint to card hue via nth-child */
.erp-versions .erp-grid > *:nth-child(6n+1) h3,
.erp-versions .erp-grid > *:nth-child(6n+1) h4,
.erp-versions .erp-grid > *:nth-child(6n+1) .version-title,
.erp-versions .erp-grid > *:nth-child(6n+1) [data-version-title],
.txc-versions-auto > *:nth-child(6n+1) h3,
.txc-versions-auto > *:nth-child(6n+1) h4,
.txc-versions-auto > *:nth-child(6n+1) .version-title,
.txc-versions-auto > *:nth-child(6n+1) [data-version-title]{ background: rgba(59,130,246,0.14); }

.erp-versions .erp-grid > *:nth-child(6n+2) h3,
.erp-versions .erp-grid > *:nth-child(6n+2) h4,
.erp-versions .erp-grid > *:nth-child(6n+2) .version-title,
.erp-versions .erp-grid > *:nth-child(6n+2) [data-version-title],
.txc-versions-auto > *:nth-child(6n+2) h3,
.txc-versions-auto > *:nth-child(6n+2) h4,
.txc-versions-auto > *:nth-child(6n+2) .version-title,
.txc-versions-auto > *:nth-child(6n+2) [data-version-title]{ background: rgba(249,115,22,0.14); }

.erp-versions .erp-grid > *:nth-child(6n+3) h3,
.erp-versions .erp-grid > *:nth-child(6n+3) h4,
.erp-versions .erp-grid > *:nth-child(6n+3) .version-title,
.erp-versions .erp-grid > *:nth-child(6n+3) [data-version-title],
.txc-versions-auto > *:nth-child(6n+3) h3,
.txc-versions-auto > *:nth-child(6n+3) h4,
.txc-versions-auto > *:nth-child(6n+3) .version-title,
.txc-versions-auto > *:nth-child(6n+3) [data-version-title]{ background: rgba(34,197,94,0.14); }

.erp-versions .erp-grid > *:nth-child(6n+4) h3,
.erp-versions .erp-grid > *:nth-child(6n+4) h4,
.erp-versions .erp-grid > *:nth-child(6n+4) .version-title,
.erp-versions .erp-grid > *:nth-child(6n+4) [data-version-title],
.txc-versions-auto > *:nth-child(6n+4) h3,
.txc-versions-auto > *:nth-child(6n+4) h4,
.txc-versions-auto > *:nth-child(6n+4) .version-title,
.txc-versions-auto > *:nth-child(6n+4) [data-version-title]{ background: rgba(99,102,241,0.14); }

.erp-versions .erp-grid > *:nth-child(6n+5) h3,
.erp-versions .erp-grid > *:nth-child(6n+5) h4,
.erp-versions .erp-grid > *:nth-child(6n+5) .version-title,
.erp-versions .erp-grid > *:nth-child(6n+5) [data-version-title],
.txc-versions-auto > *:nth-child(6n+5) h3,
.txc-versions-auto > *:nth-child(6n+5) h4,
.txc-versions-auto > *:nth-child(6n+5) .version-title,
.txc-versions-auto > *:nth-child(6n+5) [data-version-title]{ background: rgba(14,165,233,0.14); }

.erp-versions .erp-grid > *:nth-child(6n+6) h3,
.erp-versions .erp-grid > *:nth-child(6n+6) h4,
.erp-versions .erp-grid > *:nth-child(6n+6) .version-title,
.erp-versions .erp-grid > *:nth-child(6n+6) [data-version-title],
.txc-versions-auto > *:nth-child(6n+6) h3,
.txc-versions-auto > *:nth-child(6n+6) h4,
.txc-versions-auto > *:nth-child(6n+6) .version-title,
.txc-versions-auto > *:nth-child(6n+6) [data-version-title]{ background: rgba(234,179,8,0.14); }

/* Harmonize legend pill with the card hue */
.erp-versions .erp-grid > *:nth-child(6n+1)::before,
.txc-versions-auto > *:nth-child(6n+1)::before { background: rgba(59,130,246,0.18); color:#0b3c78; }
.erp-versions .erp-grid > *:nth-child(6n+2)::before,
.txc-versions-auto > *:nth-child(6n+2)::before { background: rgba(249,115,22,0.18); color:#7c2d12; }
.erp-versions .erp-grid > *:nth-child(6n+3)::before,
.txc-versions-auto > *:nth-child(6n+3)::before { background: rgba(34,197,94,0.18); color:#064e3b; }
.erp-versions .erp-grid > *:nth-child(6n+4)::before,
.txc-versions-auto > *:nth-child(6n+4)::before { background: rgba(99,102,241,0.18); color:#312e81; }
.erp-versions .erp-grid > *:nth-child(6n+5)::before,
.txc-versions-auto > *:nth-child(6n+5)::before { background: rgba(14,165,233,0.18); color:#0c4a6e; }
.erp-versions .erp-grid > *:nth-child(6n+6)::before,
.txc-versions-auto > *:nth-child(6n+6)::before { background: rgba(234,179,8,0.18); color:#78350f; }

/* === v6.2a: Stronger selectors to ensure styles apply on all markup variants === */

/* Scope to the documentation template if WordPress adds the body class */
body.page-template-page-digitz-documentation :where(.erp-versions .erp-grid, .txc-versions-auto){
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  justify-content: start;
  justify-items: start;
}

/* Fallback if the body class isn't present */
:where(.erp-versions .erp-grid, .txc-versions-auto){
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  justify-content: start;
  justify-items: start;
}

/* Card base (anchor/div children) */
body.page-template-page-digitz-documentation :where(.erp-versions .erp-grid > *, .txc-versions-auto > *){
  display: block;
  position: relative;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  padding: 14px 16px 16px;
  text-decoration: none;
  color: #0f172a;
  box-shadow: 0 1px 4px rgba(0,0,0,.03);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  max-width: 260px;
  text-align: left !important;
}
:where(.erp-versions .erp-grid > *, .txc-versions-auto > *):hover{
  transform: translateY(-2px);
  border-color: #93c5fd;
  box-shadow: 0 6px 20px rgba(59,130,246,.15);
}

/* Caption highlight (Option B) */
body.page-template-page-digitz-documentation :where(.erp-versions .erp-grid > *, .txc-versions-auto > *) :is(h3,h4,.version-title,[data-version-title]){
  display: inline-block;
  padding: 4px 8px;
  border-radius: 8px;
  line-height: 1.2;
  background: rgba(11,60,120,0.10) !important; /* default soft blue tint */
  color: #0b3c78 !important;
  margin: 6px 0 4px;
  font-size: 16px;
  font-weight: 800;
}

/* Tint variants to match card hue */
:where(.erp-versions .erp-grid > *:nth-child(6n+1), .txc-versions-auto > *:nth-child(6n+1)) :is(h3,h4,.version-title,[data-version-title]){ background: rgba(59,130,246,0.14) !important; }
:where(.erp-versions .erp-grid > *:nth-child(6n+2), .txc-versions-auto > *:nth-child(6n+2)) :is(h3,h4,.version-title,[data-version-title]){ background: rgba(249,115,22,0.14) !important; }
:where(.erp-versions .erp-grid > *:nth-child(6n+3), .txc-versions-auto > *:nth-child(6n+3)) :is(h3,h4,.version-title,[data-version-title]){ background: rgba(34,197,94,0.14) !important; }
:where(.erp-versions .erp-grid > *:nth-child(6n+4), .txc-versions-auto > *:nth-child(6n+4)) :is(h3,h4,.version-title,[data-version-title]){ background: rgba(99,102,241,0.14) !important; }
:where(.erp-versions .erp-grid > *:nth-child(6n+5), .txc-versions-auto > *:nth-child(6n+5)) :is(h3,h4,.version-title,[data-version-title]){ background: rgba(14,165,233,0.14) !important; }
:where(.erp-versions .erp-grid > *:nth-child(6n+6), .txc-versions-auto > *:nth-child(6n+6)) :is(h3,h4,.version-title,[data-version-title]){ background: rgba(234,179,8,0.14) !important; }

/* Legend/hashtag pill */
body.page-template-page-digitz-documentation :where(.erp-versions .erp-grid > *, .txc-versions-auto > *)::before{
  content: attr(data-version-term);
  position: absolute;
  top: 10px; left: 10px;
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #0f172a;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.08);
}
:where(.erp-versions .erp-grid > *:not([data-version-term]), .txc-versions-auto > *:not([data-version-term]))::before,
:where(.erp-versions .erp-grid > *[data-version-term=""], .txc-versions-auto > *[data-version-term=""])::before{
  content: "#" attr(data-version-slug);
}
:where(.erp-versions .erp-grid > *:not([data-version-term]):not([data-version-slug]), .txc-versions-auto > *:not([data-version-term]):not([data-version-slug]))::before{
  content: "";
  display: none;
}

/* Harmonize pill by hue */
:where(.erp-versions .erp-grid > *:nth-child(6n+1), .txc-versions-auto > *:nth-child(6n+1))::before{ background: rgba(59,130,246,0.18); color:#0b3c78; }
:where(.erp-versions .erp-grid > *:nth-child(6n+2), .txc-versions-auto > *:nth-child(6n+2))::before{ background: rgba(249,115,22,0.18); color:#7c2d12; }
:where(.erp-versions .erp-grid > *:nth-child(6n+3), .txc-versions-auto > *:nth-child(6n+3))::before{ background: rgba(34,197,94,0.18); color:#064e3b; }
:where(.erp-versions .erp-grid > *:nth-child(6n+4), .txc-versions-auto > *:nth-child(6n+4))::before{ background: rgba(99,102,241,0.18); color:#312e81; }
:where(.erp-versions .erp-grid > *:nth-child(6n+5), .txc-versions-auto > *:nth-child(6n+5))::before{ background: rgba(14,165,233,0.18); color:#0c4a6e; }
:where(.erp-versions .erp-grid > *:nth-child(6n+6), .txc-versions-auto > *:nth-child(6n+6))::before{ background: rgba(234,179,8,0.18); color:#78350f; }


/* === Enhancement: Highlight version captions in version cards (distinct from details) === */
.erp-card .erp-card__title{
  display:block;
  font-weight: 800;
  font-size: 17px;
  line-height: 1.3;
  color: var(--txc-blue);
  letter-spacing: 0.01em;
  margin: 6px 0 6px;
}
/* subtle accent bar to visually separate title from the detail */
.erp-card .erp-card__title::after{
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  margin-top: 6px;
  background: linear-gradient(90deg, var(--txc-blue), #f97316);
  opacity: .9;
}
/* Details are smaller, muted, and more relaxed line-height */
.erp-card .erp-card__desc{
  font-size: 13px;
  color: #475569;
  line-height: 1.55;
  margin-top: 6px;
}
/* In case some cards used <h3> or <p>, keep previous styling but prefer new classes */
.erp-card h3.erp-card__title{font-weight:800;}
.erp-card p.erp-card__desc{color:#475569;}


/* ===== DIGITZ Documentation: unify page width to 1200px (no other changes) ===== */
.txc-docs-wrapper,
.txc-docs-shell,
.txc-docs-topbar,
.txc-docs-grid {
  max-width: 1200px !important;
  margin-left: auto;
  margin-right: auto;
}
/* ========================================================================= */