/* KanORS brand styles (shared with Veda 2.0 documentation) */

/* KanORS brand colours — primary #2A3E68, accent #FC8462 */
[data-md-color-primary="custom"] {
  --md-primary-fg-color: #2a3e68;
  --md-primary-fg-color--light: #6976aa;
  --md-primary-fg-color--dark: #1f2f4f;
  /* fg = brand surfaces (header, primary buttons); bg = text/icons on those surfaces */
  --md-primary-bg-color: #fff;
  --md-primary-bg-color--light: #ffffffb3;
  --md-primary-bg-color--dark: #ffffffde;
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color: #fc8462;
  --md-accent-fg-color--transparent: rgba(252, 132, 98, 0.12);
  /* fg = accent surfaces (hover); bg = text/icons on those surfaces */
  --md-accent-bg-color: #fff;
  --md-accent-bg-color--light: #ffffffb3;
  --md-accent-bg-color--dark: #ffffffde;
}

/* Dark mode — brand navy is too dark for body links and outline buttons */
[data-md-color-scheme="slate"][data-md-color-primary="custom"] {
  --md-typeset-a-color: #9caedb;
}

[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary) {
  color: #9caedb;
  border-color: #9caedb;
}

/* Header tabs — active tab stays white on navy bar (not orange) */
.md-tabs__item--active .md-tabs__link {
  color: inherit !important;
  opacity: 1 !important;
}

/* Sidebar — section headings (Getting Started, Features, …) stay default when active */
.md-nav--primary .md-nav__item--section.md-nav__item--active > .md-nav__link[for] {
  color: var(--md-default-fg-color--light) !important;
}

/* Sidebar — orange only on the clicked page link, not the parent section heading */
.md-nav--primary .md-nav__item--active:not(.md-nav__item--section) > .md-nav__link--active,
.md-nav--primary .md-nav__item--active:not(.md-nav__item--section) a.md-nav__link--active {
  color: var(--md-accent-fg-color) !important;
}

/* Sidebar sections — indent child pages under headers like Excel Add-In › Features */
[dir=ltr] .md-nav--primary .md-nav__item--section > .md-nav {
  margin-left: 0.5rem;
}

[dir=rtl] .md-nav--primary .md-nav__item--section > .md-nav {
  margin-right: 0.5rem;
}

[dir=ltr] .md-nav--primary .md-nav__item--section > .md-nav > .md-nav__list > .md-nav__item > .md-nav__link {
  padding-left: 1.35rem;
}

[dir=rtl] .md-nav--primary .md-nav__item--section > .md-nav > .md-nav__list > .md-nav__item > .md-nav__link {
  padding-right: 1.35rem;
}

/* Wider content area for tables */
.md-grid {
  max-width: 1400px;
}

/* Tables — two strategies depending on column count.
 *
 * Default (≤5 columns): wrap text inside cells so the table fits the page
 * width without forcing horizontal scroll. This is the right behaviour for
 * column-reference tables, comparison tables, and most prose tables.
 *
 * Wide tables (6+ columns): keep the native auto layout and let the parent
 * wrapper scroll horizontally. Trying to wrap 13-column tables into the page
 * width crushes each cell to one character per line — unreadable. The
 * :has() selector below detects "this table has a 6th column" and opts out
 * of the wrapping rules.
 */

.md-typeset table:not([class]) {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  vertical-align: top;
  /* Tighter vertical padding than mkdocs-material's default.
     Defaults are ~0.9375em top/bottom; this trims to ~0.4em while keeping
     comfortable horizontal padding. */
  padding-top: 0.4em;
  padding-bottom: 0.4em;
  line-height: 1.4;
}

/* Opt-out for wide tables: tables with 6 or more header columns.
   Revert to native auto layout and let the cell contents flow naturally. */
.md-typeset table:not([class]):has(thead tr th:nth-child(6)) {
  display: table;
  width: auto;
  table-layout: auto;
}

.md-typeset table:not([class]):has(thead tr th:nth-child(6)) td,
.md-typeset table:not([class]):has(thead tr th:nth-child(6)) th {
  white-space: nowrap;
}

/* Slightly tighter heading sizes (matching the prior Sphinx layout) */
.md-typeset h1 {
  font-size: 2em;
  font-weight: 800;
}

.md-typeset h2 {
  font-size: 1.5em;
  font-weight: 800;
}

.md-typeset h3 {
  font-size: 1.2em;
  font-weight: 700;
}

.md-typeset h1 strong,
.md-typeset h2 strong,
.md-typeset h3 strong {
  font-weight: inherit;
}

/* Nested ordered lists under bullets: Material uses lower-alpha (a, b) for
   `li > ol`. Force decimal (1, 2) for procedure steps in nested lists. */
.md-typeset ul ol,
.md-typeset li > ol {
  list-style-type: decimal !important;
}

.md-typeset ul ol ol,
.md-typeset li > ol ol {
  list-style-type: decimal !important;
}

/* Keep screenshots block-level inside list items (avoids inline float/overlap). */
.md-typeset li > img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: 0.75em;
  clear: both;
}

/* Homepage hero banner (static showcase of supported chart types) */
.vo-hero-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 168px;
  margin: 0 0 1.5rem;
  padding: 1.5rem 2rem;
  box-sizing: border-box;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(90deg, #2a3e68 0%, #fc8462 55%, #f8b26a 100%);
}

.md-typeset .vo-hero-banner__charts {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
}

.vo-hero-banner__base {
  opacity: 0.25;
}

.vo-hero-banner__spot {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.vo-hero-banner:hover .vo-hero-banner__spot {
  opacity: 0.35;
}

/* Shine across the top edge, plus one light sweep after the charts draw in */
.vo-hero-banner::before,
.vo-hero-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.vo-hero-banner::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 45%);
}

.vo-hero-banner::after {
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.16) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: vo-hero-sweep 1.4s ease-in-out 1.6s both;
}

/* Draw-in on load */
.vo-hero-banner__bars rect,
.vo-hero-banner__rise,
.vo-hero-banner__flow,
.vo-hero-banner__spin,
.vo-hero-banner__pop {
  transform-box: fill-box;
}

.vo-hero-banner__bars rect {
  transform-origin: 50% 100%;
  animation: vo-hero-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(0.1s + var(--i) * 0.07s);
}

.vo-hero-banner__draw {
  stroke-dasharray: 1;
  animation: vo-hero-draw 0.8s ease-out 0.6s both;
}

.vo-hero-banner__pop {
  transform-origin: 50% 50%;
  animation: vo-hero-pop 0.4s cubic-bezier(0.3, 1.6, 0.5, 1) both;
  animation-delay: calc(0.9s + var(--i) * 0.06s);
}

.vo-hero-banner__flow {
  transform-origin: 0% 50%;
  animation: vo-hero-flow 0.9s cubic-bezier(0.3, 0.7, 0.2, 1) 0.35s both;
}

.vo-hero-banner__rise {
  transform-origin: 50% 100%;
  animation: vo-hero-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.6s both;
}

.vo-hero-banner__spin {
  transform-origin: 50% 50%;
  animation: vo-hero-spin 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.8s both;
}

@keyframes vo-hero-rise {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes vo-hero-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes vo-hero-pop {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes vo-hero-flow {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

@keyframes vo-hero-spin {
  from { transform: rotate(-120deg); opacity: 0; }
  to { transform: rotate(0deg); opacity: 1; }
}

@keyframes vo-hero-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .vo-hero-banner *,
  .vo-hero-banner::after {
    animation: none !important;
  }

  .vo-hero-banner::after {
    display: none;
  }
}

.md-typeset h1.vo-hero-banner__title {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #fff;
  font-size: 2em;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 24px rgba(255, 255, 255, 0.12);
}

.md-content__inner.md-typeset:has(.vo-hero-banner) > h1:not(.vo-hero-banner__title) {
  display: none;
}

@media screen and (max-width: 76.1875em) {
  .vo-hero-banner {
    min-height: 148px;
  }

  .md-typeset h1.vo-hero-banner__title {
    font-size: 1.75em;
  }
}

@media screen and (max-width: 37.5em) {
  .vo-hero-banner {
    min-height: 128px;
    padding: 1rem;
  }

  .md-typeset h1.vo-hero-banner__title {
    font-size: 1.4em;
  }
}

/* Homepage: keep the site name in place and bold, as on Veda 2.0.
   The theme otherwise slides in a second, regular-weight copy of the title. */
body:has(.vo-hero-banner) .md-header__topic:first-child {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  font-weight: 700;
}

body:has(.vo-hero-banner) .md-header__topic + .md-header__topic {
  display: none !important;
}

/* KanORS header logo — revert per DEMO-LOGO.md */
/* Top header bar uses brand navy; theme.logo supplies white PNG via <img src> */
.md-header__button.md-logo img,
.md-nav__button.md-logo img {
  height: 1.85rem;
  width: auto;
}

/* Mobile drawer on light pages: dark logo on light background */
:not([data-md-color-scheme="slate"]) .md-nav__button.md-logo img {
  content: url("../images/brand/kanors-logo-black.png");
}