/* ============================================================
   1. RIGHT RAIL / "ON THIS PAGE" PANEL
   ============================================================ */

:where(.vp-right-rail, .vp-on-this-page, .vp-article__toc, .vp-toc,
       aside[aria-label="On this Page"], nav[aria-label="On this Page"],
       nav[aria-label="Table of contents"], [role="complementary"]) {
  background-color: #FFF4EA !important;
  border: 1px solid #E5D8CC !important;
  box-shadow: none !important;
  color: #101113 !important;
}

:where(.vp-right-rail, .vp-on-this-page, .vp-article__toc, .vp-toc,
       aside[aria-label="On this Page"], nav[aria-label="On this Page"],
       nav[aria-label="Table of contents"], [role="complementary"]) * {
  color: #101113 !important;
}

:where(.vp-toc__title,
       aside[aria-label="On this Page"] h2,
       nav[aria-label="On this Page"] h2) {
  color: #101113 !important;
  font-weight: 600;
}

/* Base TOC links (no grey background allowed) */
:where(.vp-toc a, .vp-toc__link,
       aside[aria-label="On this Page"] a,
       nav[aria-label="On this Page"] a,
       nav[aria-label="Table of contents"] a) {
  color: #101113 !important;
  text-decoration: none !important;
  background-color: transparent !important;
}

/* Hover TOC – use cream */
:where(.vp-toc a:hover, .vp-toc__link:hover,
       aside[aria-label="On this Page"] a:hover,
       nav[aria-label="On this Page"] a:hover,
       nav[aria-label="Table of contents"] a:hover) {
  text-decoration: underline !important;
  background-color: #FFFAF5 !important;
}

/* Active/current TOC item – also cream */
:where(.vp-toc__link--active, .is-active, .active,
       .vp-toc li[aria-current="true"],
       .vp-toc__item[aria-current="true"]) {
  color: #101113 !important;
  border-left: 3px solid #E1CDBE !important;
  background-color: #FFFAF5 !important;
}

/* TOC wrapper cards */
.vp-right-rail .vp-card,
.vp-on-this-page .vp-card {
  background-color: #FFF4EA !important;
  border: 1px solid #E5D8CC !important;
  box-shadow: none !important;
  color: #101113 !important;
}

/* ============================================================
   2. BANNER IMAGE FIX
   ============================================================ */

:root[data-vp-page-template="content-source"] [data-vp-component="banner"] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ============================================================
   3. EXPAND / CALLOUT COMPONENTS
   ============================================================ */

details.expand[data-align="wide"] {
  width: 756px;
}

.child-pages a {
  font-weight: bold;
}

details.expand summary.expand-control {
  font-weight: bold;
}

/* Expand styling */
details.expand {
  background-color: #040822 !important;
  border: 1px solid #E5D8CC !important;
  color: #FFFAF5 !important;
  border-radius: 6px;
  padding: 0.75rem 1rem;
}

details.expand summary.expand-control {
  color: #FFFAF5 !important;
  cursor: pointer;
}

details.expand * {
  color: #FFFAF5 !important;
}

details.expand summary::-webkit-details-marker {
  display: none;
}

/* ============================================================
   4. BRAND TOKEN OVERRIDES – CONSISTENT CREAM UI HOVER
   ============================================================ */

:root {
  /* All subtle/hover/selected UI backgrounds → CREAM */
  --K15t-background-neutral-subtle-resting:  #FFFAF5 !important;
  --K15t-background-neutral-subtle-hovered:  #FFFAF5 !important;
  --K15t-background-neutral-subtle-pressed:  #FFFAF5 !important;
  --K15t-background-neutral-subtle-selected: #FFFAF5 !important;

  /* Strong brand areas (buttons, accents) */
  --K15t-background-brand-strong: #101113 !important;

  /* Button / brand text */
  --K15t-text-on-brand: #FFFAF5 !important;
}

/* ============================================================
   5. OPTIONAL (RECOMMENDED):
      Fixes UI components that still try to apply grey.
   ============================================================ */

/* Force li wrappers in TOC to stay cream/transparent */
:where(.vp-toc li, .vp-toc__item) {
  background-color: transparent !important;
}

/* Active state uses cream */
:where(.vp-toc li[aria-current="true"],
       .vp-toc__item[aria-current="true"]) {
  background-color: #FFFAF5 !important;
}