/* Override IBM's sticky behavior to enable navigation bar and anchor links
.bx--masthead {
  position: static !important;
} */

.markdownbody {
/*blockquote {
    background: #ddeeff !important;
    border-left: 4px solid #4589ff !important;
    margin: 1.5em 10px !important;
    padding: 1em 10px 1em !important;
}*/

[id] { scroll-margin-top: 49px;}

h1 {
    margin-top: 0.6em !important;
    margin-bottom: 0.6em !important;
    padding-bottom:0.2em !important;
    border-bottom: 2px solid #EE0000 !important;
}
h2 {
    margin-top: 0.6em !important;
    margin-bottom: 0.6em !important;
    padding-bottom:0.2em !important;
    border-bottom: 1px solid #AAAAAA !important;
}
h3,h4,h5,h6 {
    margin-top: 0.5em !important;
    margin-bottom: 0.5em !important;
}

img {
    max-width: 100%; /* Ensures the image doesn't exceed its container's width */
    height: auto;    /* Automatically calculates the height to maintain aspect ratio */
    display: block;  /* Optional: Helps with alignment and removes default bottom margin */   
    border: 1px solid var(--cds-border-subtle, #e0e0e0); /* Elegant Carbon-aligned image borders */   
    border-radius: 0.25rem; /* Carbon’s small radius */
    box-shadow: 2px 2px 1px 2px rgba(0,0,0,.08); /* subtle elevation */
}

img:where(:not(figure.image-card img)) {
  margin-top: 1rem; /* Add spacing before a standalone image that's not a figure*/
}

img:hover, img:focus {
  border-color: var(--cds-border-strong, #8d8d8d);
  /*outline: 2px solid var(--cds-focus, #0f62fe); */
  outline-offset: 1px;
}

figure.image-card {
    margin-block-start: 1rem;   /* spacing BEFORE figure */
    margin-block-end: 1rem;     /* spacing AFTER figure */
}

/* 🔵 Carbon blue border for clickable figures */
figure.image-card a img {
  border-color: var(--cds-interactive, #0f62fe) !important;
}

/* Optional: Hover effect */
figure.image-card a:hover img,
figure.image-card a:focus img {
  border-color: var(--cds-interactive, #0f62fe) !important;
  box-shadow: 0 0 0 2px rgba(15, 98, 254, 0.25);
}

figure.image-card figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem; /* Carbon label size */
  color: var(--cds-text-secondary, #525252);
  text-align: left;
}

.margin-b-1 {
    margin-bottom: 1rem !important;
}

.margin-b-2 {
    margin-bottom: 2rem !important;
}

.margin-tb-1 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}
.margin-tb-2 {
    margin-bottom: 2rem !important;
    margin-bottom: 2rem !important;
}

cds-table, cds-accordion {
    display: block;        /* ensure margins have layout effect */
    margin-block: 1.5rem !important;
}

/* Base:  */
blockquote {
  --rb-callout-bg: #ddeeff;        /* light blue (info) */
  --rb-callout-border: #4589ff;    /* Carbon blue-60 */
  --rb-callout-icon: "i";          /* default informational glyph */
  --rb-callout-icon-color:#e8f1ff ;/* Carbon blue-60 */
  --rb-callout-icon-bg: #0f62fe;   /* very light blue bubble */

  position: relative;
  background: var(--rb-callout-bg) !important;
  border-left: 4px solid var(--rb-callout-border) !important;
  margin: 1.5em 10px !important;
  padding: 1em 1em 1em 3.25em !important; /* left space for icon */
  border-radius: 4px; /* subtle rounding; Carbon-friendly */
  color: #000000;     /* Carbon gray-90 text #161616 */
}

/* Decorative icon bubble on the left */
blockquote::before {
  content: var(--rb-callout-icon);
  position: absolute;
  left: 12px;              /* visually aligns within the left gutter */
  top: 1.3em;                /* aligns with first line of text */
  display: inline-grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  line-height: 1;          /* exact center */
  font-weight: 700;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "IBM Plex Sans", "Noto Sans", sans-serif;
  color: var(--rb-callout-icon-color);
  background: var(--rb-callout-icon-bg);
  border-radius: 50%;
  border: 1px solid currentColor;
  /*Provide contrast for HC modes */
  box-shadow: 0 0 0 1px rgba(255,255,255,0.6); 
}

/* Emphasize the first token (e.g., "Note:"/"Warning:"/"Caution:") */
blockquote > :first-child strong:first-child,
blockquote > strong:first-child {
  /* keep author emphasis but you can tone it down */
  color: inherit;
}

/* State: Warning / Caution → pale yellow scheme with “!” icon */
blockquote.is-warning {
  --rb-callout-bg: #fff6e6 ;         /* pale yellow background */
  --rb-callout-border: #f1c21b;     /* Carbon yellow-30/40 family */
  --rb-callout-icon: "!";           /* warning glyph */
  --rb-callout-icon-color: #fff3cc; /* Carbon yellow */
  --rb-callout-icon-bg: #f1c21b;    /* lighter yellow bubble */
}

/* Optional: tighter top alignment if blockquote starts with a paragraph */
blockquote > p:first-child {
  margin-top: 0;
}

/* Optional: space out trailing paragraph */
blockquote > p:last-child {
  margin-bottom: 0;
}


}

c4d-expressive-modal {
    background-color: #FFF !important;
}

cds-code-snippet {
    margin-block-start: 1rem;
    margin-block-end: 1rem;
}

/* Nav */
.exp-nav {
  position: sticky;
  top: 49px;
  max-height: 100vh;
  overflow: auto;
  margin-top: 2rem;
  padding: 0.5rem 0.5rem;
  background: var(--cds-layer, #f4f4f4);
  border-right: 1px solid var(--cds-border-subtle, #e0e0e0);
}

.exp-nav__tree { display: block; }

/* ===== For carbon-components-react (bx-- prefix) ===== */
.exp-nav__tree.bx--tree .bx--tree-node__content,
.exp-nav__tree.bx--tree .bx--tree-node__label {
  /* Make the row adapt to multiple lines */
  line-height: 1.35;             /* more breathing room per wrapped line */
  padding-top: 0.375rem;         /* ~6px */
  padding-bottom: 0.375rem;
}


/* Navigation menu for RBX
.exp-nav {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow: auto;
  padding: 0.75rem 0.5rem;
  background: var(--cds-layer, #f4f4f4);
  border-right: 1px solid var(--cds-border-subtle, #e0e0e0);
}

.exp-nav__module-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--cds-text-primary, #161616);
  font: inherit;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 4px;
  cursor: pointer;
}

.exp-nav__module-btn:hover,
.exp-nav__module-btn:focus-visible {
  outline: none;
  background: var(--cds-layer-hover, #e8e8e8);
}

.exp-nav__module-btn.is-active {
  font-weight: 600;
}

.exp-nav__chevron {
  width: 1rem;
  opacity: 0.8;
  text-align: center;
}

.exp-nav__sections {
  list-style: none;
  margin: 0.25rem 0 0.75rem 1.25rem;
  padding: 0;
}

.exp-nav__section-link {
  display: block;
  padding: 0.125rem 0.25rem;
  color: var(--cds-link-primary, #0f62fe);
  border-radius: 4px;
  text-decoration: none;
}

.exp-nav__section-link:hover,
.exp-nav__section-link:focus-visible {
  background: var(--cds-layer-hover, #e8e8e8);
}

.exp-nav__section-link.is-active {
  font-weight: 600;
  color: var(--cds-text-primary, #161616);
}

*/