@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap");

/* ============================================================
   Pagefind custom search dropdown
   ============================================================ */

#search-field {
  position: relative;
}

#pagefind-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 580px;
  max-height: 60vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
  z-index: 10000;
  padding: 6px;
}

#pagefind-results[hidden] { display: none; }

.pf-result {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid #f0f4f8;
}

.pf-result:last-child { border-bottom: none; }

.pf-result:hover { background: #f7fafc; }

.pf-result__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--kf-accent-deep);
}

.pf-result__excerpt {
  font-size: 14px;
  color: #4a5568;
  margin-top: 3px;
  line-height: 1.5;
}

.pf-result__excerpt mark {
  background: #fff3b0;
  color: inherit;
  border-radius: 2px;
  padding: 0 2px;
}

.pf-no-results {
  padding: 12px;
  font-size: 13px;
  color: #718096;
  text-align: center;
}

/* Override UI bundle @font-face rules to add font-display: swap,
   preventing invisible text during Roboto webfont load */
@font-face { font-family: Roboto; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../font/roboto-latin-400-normal.woff2) format("woff2"), url(../font/roboto-latin-400-normal.woff) format("woff"); }
@font-face { font-family: Roboto; font-style: italic; font-weight: 400; font-display: swap;
  src: url(../font/roboto-latin-400-italic.woff2) format("woff2"), url(../font/roboto-latin-400-italic.woff) format("woff"); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../font/roboto-latin-500-normal.woff2) format("woff2"), url(../font/roboto-latin-500-normal.woff) format("woff"); }
@font-face { font-family: Roboto; font-style: italic; font-weight: 600; font-display: swap;
  src: url(../font/roboto-latin-500-italic.woff2) format("woff2"), url(../font/roboto-latin-500-italic.woff) format("woff"); }
@font-face { font-family: "Roboto Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../font/roboto-mono-latin-400-normal.woff2) format("woff2"), url(../font/roboto-mono-latin-400-normal.woff) format("woff"); }
@font-face { font-family: "Roboto Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../font/roboto-mono-latin-500-normal.woff2) format("woff2"), url(../font/roboto-mono-latin-500-normal.woff) format("woff"); }

/* ============================================================
   CSS variables
   ============================================================ */

:root {
  /* Kloudfuse brand gradient + accents */
  --kf-grad:        linear-gradient(135deg, #FF9E2B 0%, #F25022 52%, #F31E8C 100%);
  --kf-accent:      #F25022;
  --kf-accent-deep: #C2390F;

  /* nav surfaces */
  --kf-nav-tint:    rgba(242, 80, 34, 0.09);
  --kf-nav-hover:   rgba(242, 80, 34, 0.06);
  --kf-nav-guide:   rgba(20, 23, 33, 0.08);

  /* nav typography */
  --kf-nav-font:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --kf-nav-size:    15px;
  --kf-nav-text:    #3b414c;
  --kf-nav-muted:   #6b7280;
  --kf-nav-strong:  #14171f;

  /* tiles */
  --tile-accent:      #F25022;
  --tile-accent-deep: #C2390F;
  --tile-grad:        linear-gradient(135deg,#FF9E2B 0%,#F25022 52%,#F31E8C 100%);
  --tile-border:      #e7e9ee;
  --tile-bg:          #ffffff;
  --tile-title:       #14171f;
  --tile-link:        #44516e;
  --tile-radius:      12px;
  --tile-gap:         20px;

  /* content */
  --kf-ink:         #14171f;
  --kf-ink-soft:    #3b414c;
  --kf-ink-muted:   #6b7280;
  --kf-rule:        #e7e9ee;
  --kf-rule-soft:   #f0f2f6;
  --kf-tint:        rgba(242,80,34,.08);
  --kf-code-bg:     #f6f7f9;
}

/* ============================================================
   carousel.css
   ============================================================ */

body {
  overflow-x: hidden;
}

.imagecarousel {
  position: relative;
  height: 233px;
  margin-bottom: 30px;
  display: flex;
  width: fit-content;
  gap: 20px;
}

.imagecarousel img {
  margin: 0px 0px;
  box-shadow: 2px 2px 8px #8a8a8a;
}

.imagecarousel {
  animation: bannermove 50s linear infinite;
}

@keyframes bannermove {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ============================================================
   dl-fixes.css -- https://github.com/kloudfuse/kf-docs-build/issues/3
   ============================================================ */

.dlist:not(.function-dt):not(.vertical-dl) dl {
  display: grid;
}

.dlist:not(.function-dt):not(.vertical-dl) dt {
  grid-column: 1;
  width: 120px;
}

.dlist:not(.function-dt):not(.vertical-dl) dd > p:first-child {
  margin-top: 0 !important;
}

.dlist:not(.function-dt):not(.vertical-dl) dd {
  grid-column: 2;
}

.doc .dlist dt, .doc .dlist dd,
.doc .dlist dd>p:first-child {
    margin-top: .5rem;
}

.doc .dlist {
  margin-top: 0.5rem;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

/* ============================================================
   example-block.css
   ============================================================ */

.exampleblock > .content {
    border: 1px solid #D9D9D9 !important;
    border-radius: 0 !important;
}

/* ============================================================
   feedback-form.css -- https://github.com/kloudfuse/kf-docs-build/issues/23
   ============================================================ */

.feedback {
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  bottom: 25px;
  padding-right: 15px;
}

.feedback__toggle {
  display: flex;
  cursor: pointer;
}

.feedback__toggle--hidden {
  display: none;
}

.feedback__thank-you {
  max-width: 292px;
  display: none;
  flex-direction: column;
  gap: 12px;
  background-color: white;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid #1d4cb3;
}

.feedback__thank-you--expanded {
  display: flex;
}

.feedback-form__title {
  display: flex;
  justify-content: space-between;
}

.feedback-form__title label {
  color: #1565c0;
  font-weight: 600;
  font-size: 18px;
  display: flex;
  align-items: center;
}

.feedback-form__close {
  cursor: pointer;
}

.feedback-form__option {
  display: flex;
  align-items: start;
  gap: 6px;
}

.feedback-form__options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feedback-options {
  display: flex;
  gap: 14px;
  color: white;
}

.feedback-options__option {
  cursor: pointer;
  white-space: nowrap;
  border-radius: 16px;
  display: flex;
  align-items: center;
  padding: 10px;
  gap: 6px;
  background: #1d4cb3;
}

.feedback-options__option--yes {
  position: relative;
  bottom: 2px;
}

.feedback-options__option--no {
  position: relative;
  top: 2px;
}

.feedback-options__option input {
  display: none;
}

.feedback-form__option-another {
  width: 100%;
  resize: none;
}

.feedback-form__option-details {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.feedback-form__option-title {
  font-size: 16px;
  font-weight: 600;
}

.feedback-form__option-description {
  font-size: 16px;
}

.feedback-form__buttons {
  display: flex;
  gap: 10px;
}

.feedback-form__buttons button {
  flex-grow: 1;
}

#feedback {
  color: #333;
  font-family: inherit;
  font-size: 0.95rem;
  border: 1px solid #dbdbdb;
  border-radius: 0.1em;
  line-height: 1.5;
  padding: 0 0.25em;
  resize: none;
  border: 1px solid #1d4cb3;
}

.feedback-form button {
  display: inline-block;
  font-size: 1rem;
  color: white;
  background-color: #1d4cb3;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease;
  font-weight: bold;
  margin-top: 4px;
}

.feedback-form {
  display: none;
  flex-direction: column;
  gap: 12px;
  background-color: white;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid #1d4cb3;
}

.feedback-form--expanded {
  display: flex;
}

.feedback-form__helpful {
  display: none;
}

.feedback-form__helpful--expanded {
  display: flex;
  flex-direction: row;
}

.feedback-form__like {
  display: none;
}

.feedback-form__like--expanded {
  display: flex;
}

.feedback-form__wrong {
  display: none;
}

.feedback-form__wrong--expanded {
  display: flex;
}

@media (max-width: 600px) {
  .feedback {
    padding-left: 15px;
  }

  .feedback-form {
    width: 100%;
  }
}

/* ============================================================
   navbar-fixes.css
   ============================================================ */

#topbar-nav > div > a[href="#"] {
  display: none;
}

.navbar-burger {
  display: none;
}

@media screen and (max-width: 768.5px) {
  .navbar-brand .navbar-item.search {
    padding: 8.5px 17px;
  }
}

/* ============================================================
   nav-panel-fixes.css
   ============================================================ */

.nav .panels {
  height: 100% !important;
}

/* ============================================================
   header-fixes.css -- https://github.com/kloudfuse/kf-docs-build/issues/25
   ============================================================ */

.navbar-brand {
  background-color: #ffffff;
  -webkit-box-shadow: 0px 6px 5px -1px rgba(217, 217, 217, 0.17);
  -moz-box-shadow: 0px 6px 5px -1px rgba(217, 217, 217, 0.17);
  box-shadow: 0px 6px 5px -1px rgba(217, 217, 217, 0.17);
}

#topbar-nav .navbar-end .navbar-item:not(:first-child) {
  display: none !important;
}

#search-input {
  width: 400px !important;
}

@media screen and (max-width: 769px) {
  #search-input {
    width: 200px !important;
  }
}

/* fixes for the link to main website -- https://github.com/kloudfuse/kf-docs-build/issues/50 */

.navbar-brand__website-link {
  padding-top: 8px;
  margin-right: 10px;
}

.navbar-brand__website-link:last-child {
  margin-right: 0;
}

.navbar-brand__website-link img {
  width: 183px;
}

.navbar-brand__website-link--text {
  color: white;
  background: linear-gradient(rgb(63, 99, 176) 35%, rgb(29, 77, 180) 65%);
  border-radius: 10px;
  box-shadow: rgba(255, 255, 255, 0.15) 0px 0px 3px 0px inset;
  padding: 9px 24px;
  word-break: keep-all;
  white-space: nowrap;
  overflow-wrap: normal;
}

.navbar-brand__website-link--text.navbar-brand__website-link--text-free-download {
  margin-right: 10px !important;
}

.navbar-brand .navbar-item.search > div {
  margin-right: 24px;
}

.navbar-brand .navbar-item.search > a:not(:last-child) {
  margin-right: 24px;
}

#search-input {
  border-radius: 0.25rem;
  padding: 6px 15px !important;
}

.search-result-dropdown-menu {
  max-width: 942px !important;
}

@media screen and (max-width: 768px) {
  .search-result-dropdown-menu {
    min-width: calc(100vw - 3.75rem);
  }
}

/* ============================================================
   images-fixes.css -- https://github.com/kloudfuse/kf-docs-build/issues/20
   ============================================================ */

.imageblock .content {
  display: flex;
  justify-content: start;
  -ms-flex-item-align: stretch;
  align-self: stretch;
  text-align: start;
}

.box-tiles .imageblock .content img {
  width: 90px;
}

.doc .image > img,
.doc .image > object,
.doc .image > svg,
.doc .imageblock img,
.doc .imageblock object,
.doc .imageblock svg {
  display: inline-block;
  height: auto;
  vertical-align: middle;
}

.box-tiles .doc .imageblock img {
  width: 90px !important;
}

/*
the issue with the images being different sizes is
caused by svgs having different widths - either add
a particular width here or update original image dimensions
*/

#streaming-services-icon {
  width: 117px !important;
}

.index-page .doc a {
  width: 90px !important;
}

/* ============================================================
   logo-fixes.css -- https://github.com/kloudfuse/kf-docs-build/issues/12
   ============================================================ */

.navbar-brand > .navbar-item:first-child {
  position: relative;
  padding-left: 170px;
  color: transparent;
  user-select: none;
}

.navbar-brand > .navbar-item:first-child:before {
  content: "";
  position: absolute;
  left: -10px;
  width: 183px;
  height: 150px;
  background-image: url("../images/kloudfuse.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.navbar-brand > .navbar-item:last-child {
  display: flex;
}

/* ============================================================
   remove-main.css -- https://github.com/kloudfuse/kf-docs-build/issues/103
   ============================================================ */

.nav-panel-explore > ul > li:nth-child(1) {
  display: none;
}

/* ============================================================
   sticky-fixes.css -- https://github.com/kloudfuse/kf-docs-build/issues/22
   ============================================================ */

/* possible feature for adding stickiness (removed for now) */

/* h1.page {
  position: sticky;
  top: 130px;
  background-color: #fff;
  z-index: 3;
  margin-left: -20px !important;
  padding-left: 20px;
}

h1.page::after {
  content: "";
  background-color: white;
  position: absolute;
  top: -21.26px;
  left: 0;
  width: 100%;
  height: 24px;
} */

/* ============================================================
   tiles.css -- https://github.com/kloudfuse/kf-docs-build/issues/6
   ============================================================ */

/* Landing article spans full width */
.index-page .doc,
.part-news .doc,
.part-setup .doc,
.part-data-management .doc,
.part-auth .doc,
.part-melta .doc {
  max-width: 100% !important;
}

/* ── Responsive grid ─────────────────────────────────────── */
.box-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
  gap: var(--tile-gap);
  align-items: start;
  margin-top: 8px;
}

/* ── The tile ────────────────────────────────────────────── */
.box-tiles > div {
  width: auto;
  height: 430px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--tile-bg);
  border: 1px solid var(--tile-border);
  border-radius: var(--tile-radius);
  padding: 18px 20px 16px;
  margin: 0;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

/* ── Hover ───────────────────────────────────────────────── */
.box-tiles > div:hover {
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(20,23,33,.10), 0 0 0 1.5px rgba(242,80,34,.30);
}

/* ── Header: icon + title ────────────────────────────────── */
.box-tiles__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--tile-border);
}
.box-tiles__header .imageblock { margin: 0; }
.box-tiles__header .imageblock a { width: auto; }

/* ONE icon size for every tile */
.box-tiles__header img,
.box-tiles .box-tiles__header .imageblock .content img,
.box-tiles > div > .box-tiles__header > .imageblock > .content > a > img {
  width: 40px !important;
  height: 40px;
  object-fit: contain;
}
#streaming-services-icon { width: 40px !important; }

.box-tiles__header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  letter-spacing: -.01em;
}
.box-tiles__header h3 > a:first-of-type { display: none; }
.box-tiles__header h3 > a {
  color: var(--tile-title);
  word-wrap: break-word;
  white-space: normal;
}
.box-tiles__header h3 > a:hover { color: var(--tile-accent-deep); }

/* ── Link list ───────────────────────────────────────────── */
.box-tiles .ulist { font-size: 14px; margin: 0; }
.box-tiles > div > .ulist { padding-left: 0; margin-top: 0; }
.box-tiles > div > .ulist > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.box-tiles > div > .ulist > ul > li { margin: 0; }
.box-tiles > div > .ulist > ul > li > p {
  margin: 0;
  height: auto;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.box-tiles > div > .ulist a {
  display: block;
  width: auto !important;
  padding: 5px 10px;
  border-radius: 6px;
  color: var(--tile-link);
  text-decoration: none;
  white-space: normal;
  transition: background-color .12s ease, color .12s ease, padding-left .12s ease;
}
.box-tiles > div > .ulist a:hover {
  background: rgba(242,80,34,.08);
  color: var(--tile-accent-deep);
  padding-left: 14px;
}

/* nested sub-lists */
.box-tiles > div > .ulist > ul > li > .ulist > ul { padding-left: 12px; }
.box-tiles > div > .ulist > ul > li > .ulist > ul > li > p { height: auto; }
.box-tiles > div > .ulist > ul > li > .ulist > ul > li > p > a { width: auto !important; }

.box-tiles a,
.box-tiles a:hover { text-decoration: none; }

/* ============================================================
   nav-restyle — kf-nav.css (HARDENED)
   Scoped under .nav-panel-menu for specificity 0,3,0
   ============================================================ */

/* ── Base typography ─────────────────────────────────────── */
.nav-panel-menu .nav-menu {
  font-family: var(--kf-nav-font);
  font-size: var(--kf-nav-size);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  color: var(--kf-nav-text);
}
.nav-panel-menu .nav-menu .title {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--kf-nav-strong);
}

/* ── Sidebar width ───────────────────────────────────────── */
@media screen and (min-width: 769px) {
  .nav-container { width: 18rem; }
}

/* ── Links ───────────────────────────────────────────────── */
.nav-panel-menu .nav-menu .nav-link,
.nav-panel-menu .nav-menu .nav-text {
  position: relative;
  display: block;
  padding: 3px 10px 3px 26px;
  margin: 1px 4px 1px 0;
  border-radius: 7px;
  color: inherit;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

/* Top-level entries (depth 1 in this build) read stronger */
.nav-panel-menu .nav-menu .nav-item[data-depth="1"] > .nav-link {
  font-weight: 600;
  color: var(--kf-nav-strong);
}

/* Deeper entries sit slightly quieter */
.nav-panel-menu .nav-menu .nav-item[data-depth="3"] > .nav-link,
.nav-panel-menu .nav-menu .nav-item[data-depth="4"] > .nav-link,
.nav-panel-menu .nav-menu .nav-item[data-depth="5"] > .nav-link {
  color: var(--kf-nav-muted);
  font-size: calc(var(--kf-nav-size) - 0.5px);
}

/* ── Hover ───────────────────────────────────────────────── */
.nav-panel-menu .nav-menu .nav-link:hover {
  background: var(--kf-nav-hover);
  color: var(--kf-accent-deep);
}

/* ── Active trail (ancestors of current page) ────────────── */
.nav-panel-menu .nav-menu .nav-item.is-active > .nav-link {
  color: var(--kf-accent-deep);
}

/* ── Current page — gradient bar + tint + bold ───────────── */
.nav-panel-menu .nav-menu .is-current-page > .nav-link {
  background: var(--kf-nav-tint);
  color: var(--kf-accent-deep);
  font-weight: 700;
}
/* gradient bar only on leaf current page (no toggle button) */
.nav-panel-menu .nav-menu .nav-item.is-current-page:not(:has(> .nav-item-toggle)) > .nav-link::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 1.35em;
  border-radius: 3px;
  background: var(--kf-grad);
}

/* ── Indentation (spacing only — no guide lines, so the
      expand/collapse carets never get struck through) ─────── */
.nav-panel-menu .nav-menu .nav-list .nav-list {
  margin-left: 18px;
}

/* ── Expand / collapse caret ─────────────────────────────── */
.nav-panel-menu .nav-menu .nav-item {
  position: relative;
}
.nav-panel-menu .nav-menu .nav-item-toggle {
  position: absolute;
  left: 2px;
  top: 5px;
  width: 20px;
  height: 26px;
  padding: 0;
  border: 0;
  cursor: pointer;
  z-index: 1;
  background-color: var(--kf-nav-muted);
  background-image: none;
  -webkit-mask: center / 11px 11px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask: center / 11px 11px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: transform .18s ease, background-color .15s ease;
}
.nav-panel-menu .nav-menu .nav-item-toggle:hover {
  background-color: var(--kf-accent);
}
.nav-panel-menu .nav-menu .nav-item.is-active > .nav-item-toggle {
  transform: rotate(90deg);
}
.nav-panel-menu .nav-menu .nav-item.is-active > .nav-item-toggle,
.nav-panel-menu .nav-menu .is-current-page > .nav-item-toggle {
  background-color: var(--kf-accent);
}

/* ── Tidier scrollbar for the sidebar ───────────────────── */
.nav-panel-menu .nav-menu {
  scrollbar-width: thin;
  scrollbar-color: rgba(242, 80, 34, 0.35) transparent;
}
.nav-panel-menu .nav-menu::-webkit-scrollbar { width: 8px; }
.nav-panel-menu .nav-menu::-webkit-scrollbar-thumb {
  background: rgba(242, 80, 34, 0.30);
  border-radius: 8px;
}
.nav-panel-menu .nav-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(242, 80, 34, 0.50);
}

/* ============================================================
   kf-content.css — breadcrumbs · right TOC · article
   ============================================================ */

/* ── 1. Breadcrumbs ──────────────────────────────────────── */
.toolbar {
  position: sticky;
  /* stick BELOW the fixed navbar, not over it. Antora exposes
     --navbar-height; the fallback matches the default 3.5rem. */
  top: var(--navbar-height, 3.5rem);
  z-index: 3;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--kf-rule);
  min-height: 48px;
  display: flex;
  align-items: center;
}
.breadcrumbs ul {
  font-size: 13.5px;
  align-items: center;
}
.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  color: var(--kf-ink-muted);
}
.breadcrumbs li::before {
  content: "";
  flex: 0 0 auto;
  width: 7px; height: 7px;
  margin: 0 10px;
  border-right: 1.5px solid #9aa3b2;
  border-bottom: 1.5px solid #9aa3b2;
  transform: rotate(-45deg);
}
.breadcrumbs li::after {
  content: none;
}
.breadcrumbs li:first-child::before { display: none; }
.breadcrumbs a {
  color: var(--kf-ink-muted);
  text-decoration: none;
  border-radius: 5px;
  padding: 2px 6px;
  transition: background-color .12s ease, color .12s ease;
}
.breadcrumbs a:hover { color: var(--kf-accent-deep); background: var(--kf-tint); }
.breadcrumbs li:last-child { color: var(--kf-ink); font-weight: 600; }

/* ── 3. Article — see kf-article.css block below ─────────── */

/* ============================================================
   Kloudfuse docs — FOOTER
   Replaces the Antora boilerplate footer. Dark, branded,
   with link columns + a slim legal bar. Pairs with the
   footer markup in footer-new.html. footer-fixes.js still
   measures footer height dynamically, so this taller footer
   is safe.
   ============================================================ */

.kf-footer {
  --kf-accent:  #F25022;
  --kf-grad:    linear-gradient(90deg,#FF9E2B 0%,#F25022 50%,#F31E8C 100%);
  position: relative;
  background: #0b1024;
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(74,30,68,.55) 0%, rgba(11,16,36,0) 55%),
    linear-gradient(168deg, #0b1024 0%, #111c42 50%, #1b3a86 100%);
  color: #9aa3c2;
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.6;
}
/* gradient hairline across the very top (robust pseudo-element) */
.kf-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--kf-grad);
}

.kf-footer__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 44px 32px 32px;
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 32px 40px;
}

/* ── Brand block ─────────────────────────────────────────── */
.kf-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  letter-spacing: -.01em;
}
.kf-footer__mark {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px;
  background: var(--kf-grad);
  color: #fff; font-weight: 800; font-size: 18px;
}
/* Image logo variant (live docs site uses docs-link.svg) — keep it
   crisp and correctly sized on the dark footer background. */
.kf-footer__logo img {
  display: block;
  height: 34px;
  width: auto;
  max-width: 100%;
}
.kf-footer__tag {
  margin: 14px 0 16px;
  max-width: 30ch;
  color: #828db0;
}
.kf-footer__social { display: flex; gap: 10px; }
.kf-footer__social a {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #9aa3c2;
  border-radius: 8px;
  color: #9aa3c2;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.kf-footer__social a:hover { color: #fff; border-color: transparent; background: var(--kf-accent); }
.kf-footer__social svg { width: 17px; height: 17px; fill: currentColor; }

/* ── Link columns ────────────────────────────────────────── */
.kf-footer__col { display: flex; flex-direction: column; }
.kf-footer__col h4 {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9aa3c2;
}
.kf-footer__col a {
  color: #9aa3c2;
  text-decoration: none;
  padding: 5px 0;
  width: fit-content;
  transition: color .12s ease, padding-left .12s ease;
}
.kf-footer__col a:hover { color: #fff; padding-left: 4px; }

/* ── Legal bar ───────────────────────────────────────────── */
.kf-footer__bar {
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 16px 32px;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  font-size: 13px;
  color: #9aa3c2;
}
.kf-footer__bar a { color: #828db0; text-decoration: none; }
.kf-footer__bar a:hover { color: #fff; }
.kf-footer__legal { display: flex; gap: 16px; }
.kf-footer__attr { margin-left: auto; color: #58607240; color: #525a6e; font-size: 12px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 860px) {
  .kf-footer__inner { grid-template-columns: 1fr 1fr; gap: 28px; }
  .kf-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .kf-footer__inner { grid-template-columns: 1fr; }
  .kf-footer__bar { flex-direction: column; align-items: flex-start; }
  .kf-footer__attr { margin-left: 0; }
}

/* ============================================================
   kf-toc.css — right-hand TOC restyle
   ============================================================ */

.toc.sidebar {
  --kf-accent:      #F25022;
  --kf-accent-deep: #C2390F;
  --kf-grad:        linear-gradient(180deg,#FF9E2B 0%,#F25022 52%,#F31E8C 100%);
  --kf-ink:         #14171f;
  --kf-ink-muted:   #6b7280;
  --kf-rule:        #e7e9ee;
  --kf-tint:        rgba(242,80,34,.07);
  border-left: 1px solid var(--kf-rule);
}

.toc.sidebar .toc-menu {
  position: sticky;
  top: calc(var(--navbar-height, 3.5rem) + 16px);
  padding: 4px 0 4px 4px;
}

.toc.sidebar .toc-menu h3 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kf-ink-muted);
  margin: 0 0 10px;
  padding-left: 14px;
}

.toc.sidebar .toc-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--kf-rule);
}
.toc.sidebar .toc-menu li { margin: 0; }

.toc.sidebar .toc-menu a {
  position: relative;
  display: block;
  padding: 7px 10px 7px 14px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--kf-ink-muted);
  text-decoration: none;
  transition: color .14s ease, background-color .14s ease, border-color .14s ease;
}
.toc.sidebar .toc-menu a:hover {
  color: var(--kf-accent-deep);
  border-left-color: rgba(242,80,34,.4);
}

.toc.sidebar .toc-menu li ul a { padding-left: 28px; font-size: 13px; }

.toc.sidebar .toc-menu a.is-active {
  color: var(--kf-accent-deep);
  font-weight: 600;
  background: var(--kf-tint);
  border-left-color: transparent;
  border-radius: 0 6px 6px 0;
}
.toc.sidebar .toc-menu a.is-active::before {
  content: "";
  position: absolute;
  left: -2px; top: 0; bottom: 0;
  width: 3px;
  background: var(--kf-grad);
  border-radius: 3px;
}

/* De-dupe: hide inline TOC on desktop where sidebar TOC is visible */
@media (min-width: 1024px) {
  .doc aside.toc.embedded,
  .doc .toc.embedded { display: none; }
}

/* ============================================================
   kf-article.css — article content styling
   ============================================================ */

.doc {
  --kf-accent:      #F25022;
  --kf-accent-deep: #C2390F;
  --kf-grad:        linear-gradient(135deg,#FF9E2B 0%,#F25022 52%,#F31E8C 100%);
  --kf-ink:         #14171f;
  --kf-ink-soft:    #39414f;
  --kf-ink-muted:   #6b7280;
  --kf-rule:        #e7e9ee;
  --kf-rule-soft:   #f0f2f6;
  --kf-tint:        rgba(242,80,34,.07);
  --kf-code-bg:     #f6f7f9;
}

.doc {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--kf-ink-soft);
  -webkit-font-smoothing: antialiased;
}
.doc p { margin: 0 0 1.05em; max-width: 70ch; }
.doc strong { color: var(--kf-ink); font-weight: 650; }

.doc h1.page,
.doc h1 {
  font-size: 33px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--kf-ink);
  margin: 2px 0 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--kf-rule);
}
.doc h2 {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--kf-ink);
  margin: 38px 0 12px;
  scroll-margin-top: calc(var(--navbar-height, 3.5rem) + 16px);
}
.doc h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--kf-ink);
  margin: 26px 0 8px;
  scroll-margin-top: calc(var(--navbar-height, 3.5rem) + 16px);
}
.doc h2 .anchor, .doc h3 .anchor { color: var(--kf-accent); opacity: 0; transition: opacity .12s; }
.doc h2:hover .anchor, .doc h3:hover .anchor { opacity: 1; }

.doc a { color: var(--kf-accent-deep); text-decoration: none; }
.doc a:hover { text-decoration: underline; text-underline-offset: 2px; }

.doc p code, .doc li code, .doc td code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  background: var(--kf-code-bg);
  border: 1px solid var(--kf-rule);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: .86em;
  color: var(--kf-accent-deep);
}

/* ── In-article TOC ──────────────────────────────────────── */
.doc #toc.toc,
.doc .toc {
  position: relative;
  background: var(--kf-rule-soft);
  border: 1px solid var(--kf-rule);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px 14px;
  margin: 0 0 28px;
  max-width: 460px;
  overflow: hidden;
}
.doc #toc.toc::before,
.doc .toc::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--kf-grad);
}
.doc #toctitle,
.doc .toc > .title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kf-ink-muted);
  margin: 0 0 8px;
}
.doc .toc ul,
.doc .toc ul.sectlevel1 { list-style: none; margin: 0; padding: 0; }
.doc .toc li { margin: 0; }
.doc .toc ul ul { padding-left: 16px; }
.doc .toc a {
  display: block;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--kf-ink-soft);
  transition: color .12s, background-color .12s, padding-left .12s;
}
.doc .toc a:hover { color: var(--kf-accent-deep); background: #fff; padding-left: 12px; }

/* ── Numbered lists — branded step badges ────────────────── */
.doc .olist > ol {
  list-style: none;
  counter-reset: kf-step;
  padding-left: 0;
  margin: 14px 0;
}
.doc .olist > ol > li {
  counter-increment: kf-step;
  position: relative;
  padding-left: 42px;
  margin: 12px 0;
  min-height: 28px;
}
.doc .olist > ol > li::before {
  content: counter(kf-step);
  position: absolute;
  left: 0; top: -1px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--kf-tint);
  border: 1.5px solid var(--kf-accent);
  color: var(--kf-accent-deep);
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.doc .olist > ol > li > p,
.doc .ulist > ul > li > p { margin: 0 0 .35em; }
.doc .olist > ol > li > p:last-child,
.doc .ulist > ul > li > p:last-child { margin-bottom: 0; }

.doc .olist ol ol { list-style: lower-alpha; counter-reset: none; padding-left: 22px; margin: 6px 0; }
.doc .olist ol ol > li { counter-increment: none; padding-left: 0; }
.doc .olist ol ol > li::before { content: none; }

/* ── Bullet lists — branded diamond markers ──────────────── */
.doc .ulist > ul {
  list-style: none;
  padding-left: 0;
  margin: 12px 0;
}
.doc .ulist > ul > li {
  position: relative;
  padding-left: 22px;
  margin: 8px 0;
}
.doc .ulist > ul > li::before {
  content: "";
  position: absolute;
  left: 3px; top: .60em;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--kf-grad);
  transform: rotate(45deg);
}
.doc .ulist ul ul { list-style: none; padding-left: 4px; margin: 6px 0; }
.doc .ulist ul ul > li { position: relative; padding-left: 20px; margin: 6px 0; }
.doc .ulist ul ul > li::before {
  content: "";
  position: absolute;
  left: 4px; top: .55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--kf-accent);
  transform: none;
}

/* ── Admonitions ─────────────────────────────────────────── */
.doc .admonitionblock > table { border: 0; width: 100%; }
.doc .admonitionblock td.content {
  border-left: 3px solid var(--kf-accent);
  background: var(--kf-rule-soft);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  font-size: 15px;
}

/* ============================================================
   Kloudfuse docs — TOP NAVBAR: CTA buttons + search input
   Antora default-UI markup:
     .navbar .navbar-end > a.navbar-item (the links)
     .navbar-item.search > input#search-input
   RECOMMENDED: add classes to the two CTA links in your navbar
   template:  class="navbar-item is-cta"        (Free Download)
              class="navbar-item is-cta-ghost"  (Playground)
   A positional fallback (last two links) is included below in
   case you can't edit the template.
   ============================================================ */

.navbar {
  --kf-accent:      #F25022;
  --kf-accent-deep: #C2390F;
  --kf-grad:        linear-gradient(135deg,#FB8B24 0%,#F25022 55%,#E11D74 100%);
  --kf-ink:         #14171f;
  --kf-ink-muted:   #6b7280;
  --kf-field-bg:    #f4f6f9;
  --kf-field-border:#dfe3ea;
}

/* ════════════════════════════════════════════════════════════
   SEARCH INPUT  (.navbar-item.search > #search-input)
   ════════════════════════════════════════════════════════════ */
.navbar .navbar-item.search {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 6px;
}
.navbar #search-input,
.navbar .navbar-item.search input[type="text"],
.navbar .navbar-item.search input[type="search"] {
  width: 240px;
  height: 38px;
  box-sizing: border-box;
  padding: 0 38px 0 36px;             /* room for icon (l) + hint (r) */
  font: inherit;
  font-size: 14px;
  color: var(--kf-ink);
  background-color: var(--kf-field-bg);
  border: 1px solid var(--kf-field-border);
  border-radius: 999px;
  outline: none;
  transition: width .18s ease, background-color .15s ease,
              border-color .15s ease, box-shadow .15s ease;
}
.navbar .navbar-item.search input::placeholder { color: var(--kf-ink-muted); }
.navbar .navbar-item.search input:hover { background-color: #eef1f5; }
.navbar .navbar-item.search input:focus {
  width: 300px;                        /* expands on focus */
  background-color: #fff;
  border-color: var(--kf-accent);
  box-shadow: 0 0 0 3px rgba(242,80,34,.16);
}

/* ════════════════════════════════════════════════════════════
   CTA BUTTONS
   Primary  = .is-cta        (or last navbar-end link)
   Ghost    = .is-cta-ghost  (or 2nd-to-last navbar-end link)
   ════════════════════════════════════════════════════════════ */
.navbar .navbar-item.is-cta,
.navbar .navbar-item.is-cta-ghost {
  display: inline-flex;
  align-items: center;
  height: 38px;
  margin: 0 4px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease,
              border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}

/* primary — solid brand fill; using kf-accent-deep (#C2390F) for 4.5:1 contrast with white */
.navbar .navbar-item.is-cta {
  background: var(--kf-grad);
  color: #fff;
  box-shadow: 0 1px 2px rgba(225,29,116,.25);
}
.navbar .navbar-item.is-cta:hover {
  background: var(--kf-grad);
  color: #fff;
  box-shadow: 0 4px 12px rgba(242,80,34,.30);
  transform: translateY(-1px);
}
.navbar .navbar-item.is-cta:active { transform: translateY(0); }

/* ghost — outline that fills with tint on hover */
.navbar .navbar-item.is-cta-ghost {
  background: transparent;
  color: var(--kf-accent-deep);
  border: 1.5px solid rgba(242,80,34,.35);
}
.navbar .navbar-item.is-cta-ghost:hover {
  background: rgba(242,80,34,.08);
  border-color: var(--kf-accent);
  color: var(--kf-accent-deep);
}

/* keyboard focus visibility for both */
.navbar .navbar-item.is-cta:focus-visible,
.navbar .navbar-item.is-cta-ghost:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(242,80,34,.30);
}

/* ── Positional fallback (only if you CAN'T add the classes) ──
   Comment the block above's reliance and uncomment this to style
   the last two links in the navbar's right group instead.
.navbar .navbar-end > a.navbar-item:last-of-type {
  background: var(--kf-accent); color:#fff; border-radius:999px;
  height:38px; padding:0 18px; display:inline-flex; align-items:center;
}
.navbar .navbar-end > a.navbar-item:nth-last-of-type(2) {
  border:1.5px solid rgba(242,80,34,.35); color:var(--kf-accent-deep);
  border-radius:999px; height:38px; padding:0 18px;
  display:inline-flex; align-items:center;
}
*/

/* ============================================================
   Kloudfuse docs — CODE BLOCK WRAPPING
   Antora/highlight.js renders <pre><code> with white-space: pre,
   so long single-line commands (e.g. the helm install one-liner)
   overflow horizontally and push past the right content rail.
   This makes long lines WRAP within the content column instead.
   Drop this into the Antora UI bundle and load it after the
   theme's styles.css.
   ============================================================ */

/* The <pre> stays inside the column; keep a horizontal scrollbar only
   as a last resort (e.g. an unbreakable token wider than the column). */
.doc .listingblock pre.highlightjs,
.doc .listingblock pre.highlight,
.doc .listingblock pre > code.hljs {
  max-width: 100%;
  overflow-x: auto;
}

/* Wrap long lines instead of scrolling. overflow-wrap: anywhere lets
   very long unbroken tokens (URLs, flags) break so nothing escapes the
   column; pre-wrap preserves the code's own newlines and indentation. */
.doc .listingblock pre.highlightjs > code,
.doc .listingblock pre.highlight > code,
.doc .listingblock pre > code.hljs {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}