/* Joomla Center — proposal, 8 November 2026.
   Load AFTER the current template/custom.css and Prism CSS.
   Targets article content, header, cover, footer tags and glossary popovers.
   .comments-component/#jc are siblings of .articleBody, outside this scope.
   No JavaScript or changes to article markup are required for these styles.
*/

.item-page .articleBody,
.item-page .entry-header {
  --jc-text: #172334;
  --jc-muted: #536274;
  --jc-link: #115a91;
  --jc-line: #d8e1eb;
  --jc-soft: #f0f3f7;
  --jc-code-bg: #15243a;
  --jc-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --jc-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
/* Do not change the .articleBody font itself: Quick Index inherits that font.
   Direct content children get the new type settings, with Quick Index excluded. */
.item-page .articleBody > :where(:not(.rl_quickindex)),
.item-page .entry-header {
  color: var(--jc-text);
  font-family: var(--jc-font);
  font-size: 17px;
  line-height: 1.7;
  overflow-wrap: break-word;
  text-align: start;
}

/* Article title and existing author/date/category metadata. */
.item-page .entry-header h1 {
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0; 
  color: var(--jc-text);
  font-family: var(--jc-font);
  font-size: clamp(1.75rem, 1.25rem + 1.35vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.025em;
  text-wrap: pretty;
}
.item-page .entry-header h1::after { content: none; }
.item-page .entry-header .article-info {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .375rem 1rem;
  margin: 0 0 1rem;
  padding: 0;
  color: var(--jc-muted);
  line-height: 1.5;
}
.article-info .fa, .article-info .icon-fw {
    color: #edf5ff;
}
.item-page .entry-header .article-info > dd {
  margin: 0 !important;
  font-size: 13px !important; /* Override the current 12px !important rule. */
  line-height: 1.5;
  text-transform: none;
}
.item-page .entry-header .article-info a { color: var(--jc-muted); }
.item-page > .entry-image img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
  border-radius: 8px 8px 0 0;
}

/* Vertical rhythm. Empty paragraphs generated around shortcodes add no gap. */
.item-page .articleBody > :first-child:not(.rl_quickindex) { margin-block-start: 0; }
.item-page .articleBody p:not(.rl_quickindex *) { margin: 0 0 1rem; }
.item-page .articleBody p:empty { display: none; }
.item-page .articleBody > p:first-of-type {
  margin-block-end: 1.5rem;
  color: #35475c;
  font-size: 20px;
  line-height: 1.6;
}
.item-page .articleBody :is(h2, h3, h4, h5, h6):not(.index-header):not(.rl_quickindex *) {
  padding: 0;
  border: 0;
  color: var(--jc-text);
  font-family: var(--jc-font);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.015em;
  text-wrap: pretty;
}
.item-page .articleBody h2:not(.index-header):not(.rl_quickindex *) {
  margin: 2.5rem 0 1rem;
  font-size: clamp(1.4rem, 1.15rem + .65vw, 1.75rem);
}
.item-page .articleBody h3 { margin: 1.875rem 0 .875rem; font-size: 1.35rem; }
.item-page .articleBody h4 { margin: 1.5rem 0 .75rem; font-size: 1.15rem; }
.item-page .articleBody :is(h5, h6) { margin: 1.25rem 0 .625rem; font-size: 1rem; }
.item-page .articleBody :is(h2, h3, h4, h5, h6) .anchor,
.item-page .articleBody :is(h2, h3, h4, h5, h6)[id] { scroll-margin-block-start: 7rem; }
.item-page .articleBody :is(strong, b):not(.rl_quickindex *) { font-weight: 650; }
.item-page .articleBody :is(em, i):not(.rl_quickindex *) { font-style: italic; }
.item-page .articleBody small:not(.rl_quickindex *) { font-size: .85em; color: var(--jc-muted); }
.item-page .articleBody mark:not(.rl_quickindex *) { padding: .1em .2em; background: #fff0b8; color: inherit; }
.item-page .articleBody :is(sub, sup):not(.rl_quickindex *) { font-size: .75em; }
.item-page .articleBody abbr[title] { text-decoration: underline dotted; text-underline-offset: .2em; }
.item-page .articleBody hr:not(#system-readmore) {
  margin: 2rem 0;
  border: 0;
  border-block-start: 1px solid var(--jc-line);
  opacity: 1;
}

/* Text links, glossary links, and keyboard focus. */
.item-page .articleBody a:not(.rl_quickindex *):not(.wfpopup):not(.btn) {
  color: var(--jc-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: #9bbbd2;
}
.item-page .articleBody a:not(.rl_quickindex *):not(.wfpopup):not(.btn):hover {
  color: #0b4675;
  text-decoration-color: currentColor;
}
.item-page .articleBody a.glosTip:not(.rl_quickindex *) {
  border-block-end: 0;
  text-decoration-style: dotted;
  font-style: normal;
}
.item-page .articleBody :is(a, summary, button, pre[tabindex]):not(.rl_quickindex *):focus-visible {
  outline: 3px solid #357ab7;
  outline-offset: 4px;
  border-radius: 3px;
}

/* Lists and definitions, including nested lists. */
.item-page .articleBody :is(ul, ol):not(.index):not(.rl_quickindex *) {
  margin: .75rem 0 1.5rem;
  padding-inline-start: 1.5rem;
}
.item-page .articleBody li:not(.rl_quickindex *) { padding-inline-start: .2rem; margin-block: .5rem; }
.item-page .articleBody li:not(.rl_quickindex *)::marker { color: #435f78; font-weight: 600; }
.item-page .articleBody li:not(.rl_quickindex *) > :is(ul, ol) { margin-block: .5rem; }
.item-page .articleBody li:not(.rl_quickindex *) > p { margin-block-end: .5rem; }
.item-page .articleBody li:not(.rl_quickindex *) > :last-child { margin-block-end: 0; }
.item-page .articleBody dl:not(.article-info) { margin: 1.25rem 0; padding: 0; }
.item-page .articleBody dl:not(.article-info) dt {
  display: block;
  margin-block-start: 1rem;
  font-weight: 650;
  list-style: none;
}
.item-page .articleBody dl:not(.article-info) dd { margin: .375rem 0 0 1.25rem; }

/* Inline code: no tiny magenta text. Do not apply this styling to Prism blocks. */
.item-page .articleBody :not(pre) > code,
.item-page .articleBody samp {
  padding: .1em .28em;
  border: 1px solid #e0e6ee;
  border-radius: 4px;
  background: var(--jc-soft);
  color: #243954;
  font-family: var(--jc-mono);
  font-size: .88em;
  line-height: inherit;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}
.item-page .articleBody kbd {
  padding: .15em .4em;
  border: 1px solid #cad4e0;
  border-block-end-width: 2px;
  border-radius: 4px;
  background: #f8fafc;
  color: #243954;
  font: .85em/1.5 var(--jc-mono);
  box-shadow: none;
}

/* JCE Code Sample / Prism. Long lines scroll inside the code block only. */
.item-page .articleBody .code-toolbar { min-inline-size: 0; margin: 1.5rem 0; }
.item-page .articleBody pre,
.item-page .articleBody pre[class*="language-"] {
  /* Current custom.css applies its entire pre reset with !important. */
  max-inline-size: 100%;
  margin: 1.5rem 0 !important;
  padding: 1.125rem 1.25rem !important;
  overflow: auto;
  border: 1px solid #263c57 !important;
  border-radius: 8px !important;
  background: var(--jc-code-bg) !important;
  color: #eef3fa !important;
  font: 14px/1.65 var(--jc-mono);
  font-size: 14px !important;
  line-height: 1.65 !important;
  text-align: start;
  text-shadow: none;
  white-space: pre;
  overflow-wrap: normal !important;
  word-break: normal !important;
  tab-size: 4;
  scrollbar-color: #657b96 #1d3048;
}
.item-page .articleBody .code-toolbar > pre { margin: 0 !important; }
.item-page .articleBody pre code,
.item-page .articleBody pre code[class*="language-"] {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-shadow: none;
  white-space: inherit;
  overflow-wrap: normal;
  word-break: normal;
}
.item-page .articleBody pre .token { background: transparent; text-shadow: none; }
.item-page .articleBody pre .token:is(.comment, .prolog, .doctype, .cdata) { color: #9bacc1; }
.item-page .articleBody pre .token:is(.punctuation, .operator, .entity, .url) { color: #c2cfdf; }
.item-page .articleBody pre .token:is(.keyword, .atrule, .attr-value) { color: #c9b6ff; }
.item-page .articleBody pre .token:is(.string, .char, .attr-name, .selector) { color: #b9e4a9; }
.item-page .articleBody pre .token:is(.function, .class-name, .tag) { color: #93c5fd; }
.item-page .articleBody pre .token:is(.variable, .property) { color: #f2c98c; }
.item-page .articleBody pre .token:is(.boolean, .number, .constant) { color: #f4b19f; }
.item-page .articleBody pre.line-numbers { padding-inline-start: 3.8em !important; }
.item-page .articleBody .line-numbers-rows { border-color: #52667f; }
.item-page .articleBody .line-numbers-rows > span::before { color: #9bacc1; }
.item-page .articleBody .code-toolbar > .toolbar:empty { display: none; }
.item-page .articleBody .code-toolbar > .toolbar { top: .5rem; right: .5rem; opacity: 1; }
.item-page .articleBody .code-toolbar.code-toolbar-items > pre { padding-block-start: 3.25rem !important; }
.item-page .articleBody .code-toolbar > .toolbar .toolbar-item > :is(button, a, span) {
  min-block-size: 32px;
  padding: .375rem .625rem;
  border: 1px solid #52667f;
  border-radius: 5px;
  background: #263c57;
  color: #eef3fa;
  font: 12px/1.4 var(--jc-font);
  box-shadow: none;
  text-decoration: none;
}

/* Tables keep their native markup and existing column widths. */
.item-page .articleBody table {
  inline-size: 100%;
  max-inline-size: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
  table-layout: fixed;
  color: var(--jc-text);
  font-size: 15px;
  line-height: 1.6;
}
.item-page .articleBody caption {
  caption-side: top;
  padding: 0 0 .625rem;
  color: var(--jc-muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-align: start !important; /* Existing caption rule forces right alignment. */
  font-style: normal !important;
}
.item-page .articleBody :is(th, td) {
  padding: .75rem .875rem;
  border: 1px solid var(--jc-line);
  background: transparent;
  text-align: start;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.item-page .articleBody th { background: #edf2f7 !important; font-weight: 650; }
.item-page .articleBody tbody tr:nth-child(even) td { background: #f8fafc; }
.item-page .articleBody :is(th, td) code { font-size: .9em; }
/* Optional existing Bootstrap wrapper for other, genuinely wide tables. */
.item-page .articleBody .table-responsive { margin: 1.5rem 0; border-radius: 6px; }
.item-page .articleBody .table-responsive > table {
  min-inline-size: 38rem;
  margin: 0;
  table-layout: auto;
}

/* Actual lightbox markup: .col > a.wfpopup > figure.figure. */
.item-page .articleBody a.wfpopup {
  /* The existing a.noicon rule forces a 400px table box with !important. */
  display: block !important;
  inline-size: 100%;
  max-width: 100% !important;
  max-inline-size: 100%;
  margin: 1.5rem 0 !important;
  padding: 0 !important;
  background: transparent !important;
  text-align: start !important;
  color: inherit;
  text-decoration: none;
}
.item-page .articleBody :is(figure, figure.figure) {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  margin: 1.5rem 0;
  padding: 0;
  background: transparent;
}
.item-page .articleBody a.wfpopup > figure { margin: 0 !important; }
.item-page .articleBody figure img {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
  margin: 0;
  border: 1px solid #d7dfe8;
  border-radius: 7px;
  box-shadow: 0 3px 14px #17233409;
}
.item-page .articleBody figure .overlay {
  display: none; /* The link and JCE lightbox continue to work. */
}
.item-page .articleBody figcaption {
  margin: .625rem 0 0;
  padding: 0;
  color: var(--jc-muted) !important; /* Existing global figcaption uses !important. */
  font-family: var(--jc-font);
  font-size: 14px;
  line-height: 1.5;
  text-align: start;
}
.item-page .articleBody a.wfpopup:hover figure img { border-color: #789dbd; }
/* Keep Bootstrap's existing row-cols breakpoints: one, two or three columns.
   Target image rows only, without changing other Bootstrap layouts. */
.item-page .articleBody .row:has(> .col > a.wfpopup) {
  --bs-gutter-x: 24px;
  --bs-gutter-y: 0px;
  row-gap: 24px;
  align-items: flex-start;
  margin-block: 1.5rem;
}
.item-page .articleBody .row:has(> .col > a.wfpopup) > .col { min-inline-size: 0; }
.item-page .articleBody .row > .col > a.wfpopup { margin: 0 !important; }
.item-page .articleBody :is(video, iframe, audio) { max-inline-size: 100%; }

/* Site shortcodes: replace split gradients with quieter semantic callouts. */
.item-page .articleBody .snippet {
  --jc-callout-accent: #357ab7;
  margin: 1.5rem 0;
  padding: 1.125rem 1.25rem;
  border: 1px solid #d5e4f3;
  border-inline-start: 4px solid var(--jc-callout-accent);
  border-radius: 7px;
  background: #edf5ff;
  color: var(--jc-text);
}
.item-page .articleBody .snippet.warning {
  --jc-callout-accent: #c27b22;
  border-color: #ecd5b6;
  border-inline-start-color: var(--jc-callout-accent);
  background: #fff4e6;
}
.item-page .articleBody .snippet.quote {
  --jc-callout-accent: #8194aa;
  border-color: var(--jc-line);
  border-inline-start-color: var(--jc-callout-accent);
  background: #f5f7fa;
}
.item-page .articleBody .snippet .name {
  margin: 0 0 .5rem;
  padding: 0;
  background: none;
  color: var(--jc-text);
  font-size: 1em;
  font-weight: 650;
  line-height: 1.45;
}
.item-page .articleBody .snippet .name::before { margin-inline-end: .5rem; color: var(--jc-callout-accent); }
.item-page .articleBody .snippet .content { margin: 0; padding: 0; }
.item-page .articleBody .snippet .content > :last-child { margin-block-end: 0; }
.item-page .articleBody .snippet :not(pre) > code { background: #ffffffa6; }

/* Additional editorial elements used by other knowledge-base articles. */
.item-page .articleBody blockquote {
  margin: 1.5rem 0;
  padding: .25rem 0 .25rem 1.25rem;
  border: 0;
  border-inline-start: 4px solid #b8c9db;
  background: transparent;
  color: #35475c;
  font-size: 1.05em;
  line-height: 1.7;
}
.item-page .articleBody blockquote > :last-child { margin-block-end: 0; }
.item-page .articleBody blockquote.blockquote {
  margin: 1.5rem 0 !important;
  padding: .25rem 0 .25rem 1.25rem !important;
  border-inline-start: 4px solid #b8c9db !important;
  font-style: normal !important;
}
.item-page .articleBody blockquote cite { display: block; margin-block-start: .5rem; font-size: .85em; color: var(--jc-muted); }
.item-page .articleBody details {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--jc-line);
  border-radius: 7px;
  background: #f8fafc;
}
.item-page .articleBody summary { cursor: pointer; font-weight: 600; }
.item-page .articleBody details[open] > summary { margin-block-end: .75rem; }
.item-page .articleBody details > :last-child { margin-block-end: 0; }
.item-page .articleBody .aglossary-terms-used {
  margin-block-start: 2.5rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--jc-line);
  color: var(--jc-muted);
  font-size: 14px;
  line-height: 1.8;
}
.item-page .articleBody .aglossary-terms-used h5 {
  margin: 0 0 .5rem;
  font-size: 14px;
  line-height: 1.5;
}
.item-page .articleBody .aglossary-terms-used p { margin: 0; }
.item-page .articleBody .btn {
  max-inline-size: 100%;
  padding: .625rem 1rem;
  border-radius: 6px;
  font: 600 14px/1.5 var(--jc-font);
  white-space: normal;
  text-decoration: none;
}
.item-page .articleBody .btn-primary { border-color: var(--jc-link); background: var(--jc-link); color: #fff; }
.item-page .articleBody .btn-primary:hover { border-color: #0b4675; background: #0b4675; color: #fff; }

/* The template renders article tags as a direct sibling of .articleBody.
   Zero-size separator text neutralizes the existing   between links;
   link margins provide consistent spacing without changing the HTML. */
.item-page > .content-wrap > .tags {
  margin-block: 2rem 0 !important;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid #d8e1eb;
  font-size: 0;
}
.item-page > .content-wrap > .tags a[rel="tag"] {
  display: inline-block;
  max-inline-size: 100%;
  margin: 0 8px 8px 0;
  padding: 5px 10px;
  border: 1px solid #cbd9e6;
  border-radius: 6px;
  background: #edf3f9;
  color: #244e75;
  font: 500 14px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-decoration: none;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
}
.item-page > .content-wrap > .tags a[rel="tag"]::before { margin-inline-end: 6px; }
.item-page > .content-wrap > .tags a[rel="tag"]:is(:hover, :active) {
  border-color: #8baac6;
  background: #ddeaf6;
  color: #173f69;
}
.item-page > .content-wrap > .tags a[rel="tag"]:focus-visible {
  outline: 3px solid #357ab7;
  outline-offset: 3px;
  background: #ddeaf6;
  color: #173f69;
}

/* Alter Glossary appends Bootstrap popovers to body, outside .articleBody.
   Scope this block to its actual template class, not every Bootstrap popover. */
.popover.aglossary {
  --bs-popover-max-width: 360px;
  --bs-popover-font-size: 14px;
  --bs-popover-bg: #fff;
  --bs-popover-border-color: #c8d4e1;
  --bs-popover-border-radius: 10px;
  --bs-popover-inner-border-radius: 9px;
  --bs-popover-header-bg: #f0f3f7;
  --bs-popover-header-color: #172334;
  --bs-popover-body-color: #172334;
  --bs-popover-arrow-width: 16px;
  --bs-popover-arrow-height: 8px;
  inline-size: min(360px, calc(100vw - 32px));
  max-inline-size: calc(100vw - 32px);
  border: 1px solid #c8d4e1;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 28px rgb(23 35 52 / 16%);
  color: #172334;
  font: 400 14px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: start;
  overflow-wrap: anywhere;
}
.popover.aglossary .popover-header {
  margin: 0;
  padding: 12px 16px;
  border: 0;
  border-block-end: 1px solid #d8e1eb;
  border-radius: 9px 9px 0 0;
  background: #f0f3f7;
  color: #172334;
  font: 650 16px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-transform: none;
  letter-spacing: normal;
}
.popover.aglossary .popover-header :is(i, em) { font-style: normal; font-weight: 400; color: #536274; }
.popover.aglossary .popover-body {
  max-block-size: min(352px, calc(100vh - 144px));
  max-block-size: min(352px, calc(100dvh - 144px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 16px 16px;
  color: #172334;
  font: inherit;
}
.popover.aglossary .popover-body p { margin: 0 0 10px; }
.popover.aglossary .popover-body > :last-child { margin-block-end: 0; }
.site .popover.aglossary .popover-body img,
.popover.aglossary .popover-body img {
  display: block;
  float: none;
  max-inline-size: 100%;
  max-block-size: 184px;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
  margin: 0 auto 12px;
  border-radius: 4px;
}
.popover.aglossary .popover-body :is(ul, ol) { margin: 0 0 10px; padding-inline-start: 20px; }
.popover.aglossary .popover-body li + li { margin-block-start: 4px; }
.popover.aglossary .popover-body a { color: #115a91; text-decoration: underline; text-underline-offset: .15em; }
.popover.aglossary .popover-body a:hover { color: #0b4675; }
.popover.aglossary :is(a, button):focus-visible { outline: 2px solid #357ab7; outline-offset: 3px; }
.popover.aglossary .popover-body code { padding: 2px 4px; border-radius: 3px; background: #f0f3f7; color: #243954; font: .9em/1.5 Consolas, "Liberation Mono", monospace; }
.popover.aglossary .btn-close { margin: 8px; padding: 8px !important; }

@media (max-width: 767px) {
  .item-page .articleBody > :where(:not(.rl_quickindex)) { font-size: 16px; line-height: 1.7; }
  .item-page .articleBody > p:first-of-type { font-size: 18px; }
  .item-page .entry-header h1 { font-size: 1.75rem; line-height: 1.23; }
  .item-page .articleBody h2:not(.index-header) { margin-block-start: 2rem; font-size: 1.4rem; }
  .item-page .articleBody h3 { font-size: 1.2rem; }
  .item-page .articleBody .snippet { padding: 1rem; }
  .item-page .articleBody pre,
  .item-page .articleBody pre[class*="language-"] { padding: 1rem !important; font-size: 13px !important; }
  .item-page .articleBody pre.line-numbers { padding-inline-start: 3.8em !important; }
  .item-page .articleBody table { font-size: 14px; }
  .item-page .articleBody :is(th, td) { padding: .625rem; }
  /* Keep the first column of two-column tables readable, including the
     article's inline 25% width. Wide tables keep their scroll wrapper. */
  .item-page .articleBody table:has(> thead > tr > th:nth-child(2):last-child) th:first-child {
    width: 40% !important;
  }
  .item-page .articleBody figcaption { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .popover.aglossary.fade { transition: none; }
  .item-page .articleBody :is(a, img, .toolbar):not(.rl_quickindex *) { transition: none; scroll-behavior: auto; }
}
@media print {
  .popover.aglossary { display: none !important; }
  .item-page .articleBody pre,
  .item-page .articleBody pre[class*="language-"] {
    overflow: visible;
    background: #f4f6f8 !important;
    color: #172334 !important;
    white-space: pre-wrap;
    overflow-wrap: anywhere !important;
  }
  .item-page .articleBody pre .token { color: inherit; }
  .item-page .articleBody .code-toolbar > .toolbar { display: none; }
  .item-page .articleBody :is(figure, .snippet, blockquote, tr) { break-inside: avoid; }
}