/*
 * Docs styles. Ported from the WordPress docs theme (gaconnector-knowledge-base/assets/docs.css)
 * plus the handful of base rules that came from its parent theme (see the end of this file).
 * Loaded after the main site's Bootstrap + homepage.min.css.
 */
:root{
  --khdocs-border:#e5e7eb;
  --khdocs-bg:#ffffff;
  --khdocs-muted:#6b7280;
  --khdocs-text:#111827;
  --khdocs-link:#2563eb;
  --khdocs-active-bg:#eef2ff;
}

/* Scope everything to docs pages to avoid touching marketing pages */
.khdocs-wrap{
  background: var(--khdocs-bg);
}

.khdocs-wrap .ht-container{
  width: 90%;
  max-width: 100rem;
  padding-left: 0;
  padding-right: 0;
}

.khdocs-layout{
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 0;
  padding: 28px 0 40px;
}

/* Inside a single post: article (incl. pagination/comments) + right-rail TOC.
   The page heading sits outside this grid (full width). The TOC column is always
   reserved on desktop (so the article width is consistent whether or not a TOC is
   present); the aside starts hidden and JS reveals it once it's populated. */
.khdocs-body{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 48px;
  align-items: start;
}
/* Contain wide article content here (not on .khdocs-content) so the TOC's
   position:sticky isn't broken by an overflow ancestor. */
.khdocs-body-main{
  min-width: 0;
  overflow: hidden;
}

/* Right-rail "On this page" TOC (desktop only; hidden below 1200px). */
.khdocs-toc{
  position: sticky;
  top: 90px;
  align-self: start;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  padding-top: 2px;
}
.khdocs-toc[hidden]{
  display: none;
}
/* Inner elements are prefixed with .khdocs-content so they out-specify the
   generic content a/p/ul/li rules (which otherwise win — e.g. links turn blue,
   the list gets bullets/indent). */
.khdocs-wrap .khdocs-content .khdocs-toc-title{
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--khdocs-muted);
}
.khdocs-wrap .khdocs-content .khdocs-toc-nav ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.khdocs-wrap .khdocs-content .khdocs-toc-nav li{
  margin: 0;
}
.khdocs-wrap .khdocs-content .khdocs-toc-link{
  display: block;
  padding: 5px 0 5px 12px;
  border-left: 2px solid var(--khdocs-border);
  color: var(--khdocs-muted);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.45;
  transition: color .15s ease, border-color .15s ease;
}
.khdocs-wrap .khdocs-content .khdocs-toc-link:hover{
  color: var(--khdocs-text);
  border-left-color: #c7ced8;
}
.khdocs-wrap .khdocs-content .khdocs-toc-link.is-active{
  color: #1e3a8a;
  border-left-color: #1e3a8a;
  font-weight: 600;
}
.khdocs-wrap .khdocs-content .khdocs-toc-sub{
  padding-left: 24px;
  font-size: 12.5px;
}

.khdocs-sidebar{
  position: sticky;
  top: 90px;
  align-self: start;
  padding: 4px 4px 4px 0;
  background: transparent;
  max-height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.khdocs-sidebar-body{
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding-top: 12px;
  padding-right: 10px;
}

.khdocs-sidebar .khdocs-section-title{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--khdocs-muted);
  margin: 14px 0 10px;
  font-weight: 700;
}

.khdocs-sidebar .khdocs-section:first-child .khdocs-section-title{
  margin-top: 0;
}

.khdocs-nav{
  margin: 0;
  padding: 0;
  list-style: none;
}

.khdocs-nav a{
  color: #1f2937;
  text-decoration: none;
  display: block;
  padding: 6px 10px;
  border-radius: 10px;
  line-height: 1.3;
}

.khdocs-nav a:hover{
  background: #e7ebf1;
  color: #111827;
}

.khdocs-nav a[aria-current="page"]{
  background: var(--khdocs-active-bg);
  color: #1e3a8a;
  font-weight: 600;
}

.khdocs-accordion{
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.khdocs-acc-btn{
  width: 100%;
  border: 0;
  background: transparent;
  padding: 6px 10px;
  border-radius: 10px;
  text-align: left;
  line-height: 1.3;

  color: #1f2937;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: none;
}

.khdocs-acc-btn:hover{
  background: #e7ebf1;
}

.khdocs-acc-btn[aria-expanded="true"]{
  /* No fill here: only the current-page item gets the filled highlight, so an
     expanded section header and its active first item don't merge into one
     overlapping shaded block. The open section reads via colored bold text. */
  color: #1e3a8a;
  font-weight: 600;
}

.khdocs-acc-icon{
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #9ca3af;
  border-bottom: 1.5px solid #9ca3af;
  transform: rotate(-45deg);
  transition: transform .15s ease;
  margin-left: 10px;
  margin-right:2px;
}

.khdocs-acc-btn[aria-expanded="true"] .khdocs-acc-icon{
  transform: rotate(45deg);
}

.khdocs-acc-panel{
  padding: 0 6px 6px 8px;
}

.khdocs-accordion-nested{
  border-top: 0;
  margin-top: 4px;
  padding-top: 0;
}

.khdocs-accordion-nested .khdocs-acc-btn{
  font-weight: 500;
  padding-left: 18px;
}

.khdocs-accordion-nested .khdocs-nav a{
  padding-left: 22px;
}

.khdocs-acc-panel[hidden]{
  display: none;
}

.khdocs-content{
  min-width: 0;
  width: 100%;
  /* No overflow:hidden here — it would clip the sticky TOC inside the body grid.
     Wide-content containment lives on .khdocs-body-main instead. */
}

.khdocs-table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.25em 0;
}

/* Hide the parent theme's mobile nav — the docs theme has its own mobile drawer. */
#primary-nav-mobile{
  display: none !important;
}

/* Override parent theme width constraints for #content in docs */
.khdocs-wrap #content{
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  border: none !important;
}

.khdocs-wrap #primary{
  width: 100% !important;
  float: none !important;
}

.khdocs-wrap #primary.sidebar-right #content,
.khdocs-wrap #primary.sidebar-left #content,
.khdocs-wrap #primary.sidebar-off #content{
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  border: none !important;
}

/* Typography improvements for docs content - SaaS KB style */
.khdocs-wrap{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reset margins and paddings for all content elements */
.khdocs-wrap .khdocs-content,
.khdocs-wrap .khdocs-content *,
.khdocs-wrap #content,
.khdocs-wrap #content *{
  box-sizing: border-box;
}

.khdocs-wrap .khdocs-content{
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: #1f2937;
  margin: 0;
  padding: 0 0 0 40px;
  border-left: 1px solid var(--khdocs-border);
}

/* Reset all common elements */
.khdocs-wrap .khdocs-content > *:first-child{
  margin-top: 0;
}

.khdocs-wrap .khdocs-content > *:last-child{
  margin-bottom: 0;
}

.khdocs-wrap .khdocs-content p{
  margin: 0 0 1em;
  padding: 0;
  line-height: 1.6;
}

.khdocs-wrap .khdocs-content p:last-child{
  margin-bottom: 0;
}

.khdocs-wrap .khdocs-content h1,
.khdocs-wrap .khdocs-content .page-title{
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #111827;
  margin: 0 0 1em;
  padding: 0;
}

.khdocs-wrap .khdocs-content h2{
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #111827;
  margin: 2.5rem 0 0.75rem;
  padding: 0;
}

.khdocs-wrap .khdocs-content h3{
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #111827;
  margin: 2rem 0 0.5rem;
  padding: 0;
}

.khdocs-wrap .khdocs-content h4{
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5;
  color: #111827;
  margin: 1.5rem 0 0.5rem;
  padding: 0;
}

.khdocs-wrap .khdocs-content h5,
.khdocs-wrap .khdocs-content h6{
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
  color: #111827;
  margin: 1.25rem 0 0.5rem;
  padding: 0;
}

/* Offset anchored headings so they aren't hidden under the sticky site header. */
.khdocs-wrap .khdocs-content h1,
.khdocs-wrap .khdocs-content h2,
.khdocs-wrap .khdocs-content h3,
.khdocs-wrap .khdocs-content h4,
.khdocs-wrap .khdocs-content h5,
.khdocs-wrap .khdocs-content h6{
  scroll-margin-top: 100px;
}

/* Adjust spacing when headings follow other elements */
.khdocs-wrap .khdocs-content p + h2,
.khdocs-wrap .khdocs-content ul + h2,
.khdocs-wrap .khdocs-content ol + h2,
.khdocs-wrap .khdocs-content blockquote + h2{
  margin-top: 2.5rem;
}

.khdocs-wrap .khdocs-content p + h3,
.khdocs-wrap .khdocs-content ul + h3,
.khdocs-wrap .khdocs-content ol + h3,
.khdocs-wrap .khdocs-content blockquote + h3{
  margin-top: 2rem;
}

.khdocs-wrap .khdocs-content p + h4,
.khdocs-wrap .khdocs-content ul + h4,
.khdocs-wrap .khdocs-content ol + h4,
.khdocs-wrap .khdocs-content blockquote + h4{
  margin-top: 1.5rem;
}

.khdocs-wrap .khdocs-content p + h5,
.khdocs-wrap .khdocs-content p + h6,
.khdocs-wrap .khdocs-content ul + h5,
.khdocs-wrap .khdocs-content ul + h6,
.khdocs-wrap .khdocs-content ol + h5,
.khdocs-wrap .khdocs-content ol + h6{
  margin-top: 1.25rem;
}

/* Reduce top margin when heading follows another heading */
.khdocs-wrap .khdocs-content h1 + h2,
.khdocs-wrap .khdocs-content .page-title + h2{
  margin-top: 0.5rem;
}

.khdocs-wrap .khdocs-content h2 + h3{
  margin-top: 0.5rem;
}

.khdocs-wrap .khdocs-content h3 + h4{
  margin-top: 0.5rem;
}

.khdocs-wrap .khdocs-content h4 + h5,
.khdocs-wrap .khdocs-content h4 + h6{
  margin-top: 0.5rem;
}

.khdocs-wrap .khdocs-content ul,
.khdocs-wrap .khdocs-content ol{
  margin: 0 0 1em;
  padding: 0 0 0 1.5em;
  line-height: 1.6;
  list-style-position: outside;
}

.khdocs-wrap .khdocs-content ul:last-child,
.khdocs-wrap .khdocs-content ol:last-child{
  margin-bottom: 0;
}

.khdocs-wrap .khdocs-content li{
  margin: 0.25em 0;
  padding: 0;
  line-height: 1.6;
}

.khdocs-wrap .khdocs-content li:first-child{
  margin-top: 0;
}

.khdocs-wrap .khdocs-content li:last-child{
  margin-bottom: 0;
}

.khdocs-wrap .khdocs-content li > ul,
.khdocs-wrap .khdocs-content li > ol{
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  padding-left: 1.5em;
}

.khdocs-wrap .khdocs-content a{
  color: #1d4ed8;
  text-decoration: none;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(29, 78, 216, 0.25);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.khdocs-wrap .khdocs-content a:hover{
  color: #1e40af;
  text-decoration-color: rgba(30, 64, 175, 0.8);
}

.khdocs-wrap .khdocs-content a:focus-visible{
  outline: none;
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22);
}

.khdocs-wrap .khdocs-content code{
  font-family: "SF Mono", Monaco, Menlo, Consolas, "Cascadia Mono", "Roboto Mono", "Courier New", monospace;
  font-size: 0.875em;
  background: #f1f5f9;
  padding: 0.2em 0.5em;
  border-radius: 4px;
  color: #dc2626;
  border: 1px solid #e2e8f0;
  font-weight: 500;
}

/* ========================================================================
   Code blocks (built in render.php, code_block()):
   .khdocs-code > .khdocs-code-head (language, file name, copy button)
                > pre > code > .khdocs-code-line (one per line; numbers and highlights)
   ======================================================================== */
.khdocs-wrap .khdocs-content .khdocs-code{
  --code-bg: #0f172a;
  --code-head-bg: #1e293b;
  --code-border: #1e293b;
  --code-muted: #94a3b8;
  --code-font-size: 13px;
  --code-line: 1.65;
  --code-pad-y: 14px;
  --code-pad-x: 18px;
  margin: 1.5em 0;
  border: 1px solid var(--code-border);
  border-radius: 8px;
  background: var(--code-bg);
  overflow: hidden;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.khdocs-wrap .khdocs-content .khdocs-code-head{
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 4px 6px 4px 14px;
  background: var(--code-head-bg);
  border-bottom: 1px solid #334155;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  line-height: 1.3;
}
.khdocs-wrap .khdocs-content .khdocs-code-lang{
  color: var(--code-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
}
.khdocs-wrap .khdocs-content .khdocs-code-title{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #e2e8f0;
  font-family: "SF Mono", Monaco, Menlo, Consolas, "Cascadia Mono", "Roboto Mono", "Courier New", monospace;
  font-size: 12px;
}
.khdocs-wrap .khdocs-content .khdocs-code-lang + .khdocs-code-title{
  padding-left: 10px;
  border-left: 1px solid #475569;
}

.khdocs-wrap .khdocs-content pre{
  position: relative;
  font-family: "SF Mono", Monaco, Menlo, Consolas, "Cascadia Mono", "Roboto Mono", "Courier New", monospace;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;
  font-variant-ligatures: none;   /* <!-- and -> show as typed, not joined into one symbol */
  font-feature-settings: "liga" 0, "calt" 0;
  color: #e2e8f0;
  background: #0f172a;
  white-space: pre-wrap;          /* long lines wrap (most snippets are long single-line HTML) */
  overflow-wrap: anywhere;
  tab-size: 4;
  margin: 1.5em 0;
  padding: 14px 18px;
  border: 1px solid #1e293b;
  border-radius: 8px;
}
.khdocs-wrap .khdocs-content .khdocs-code pre{
  margin: 0;
  padding: var(--code-pad-y) 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: var(--code-font-size);
  line-height: var(--code-line);
}

.khdocs-wrap .khdocs-content pre code{
  display: block;
  padding: 0;
  background: transparent;
  border: none;
  color: inherit;
  font-size: inherit;
  font-weight: 400;
  white-space: inherit;
  counter-reset: khdocs-line;
}

/* One row per line (render.php, split_code_lines): a wrapped line keeps its indent */
.khdocs-wrap .khdocs-content .khdocs-code-line{
  display: block;
  padding: 0 var(--code-pad-x);
}
/* Line numbers on long blocks: a counter in a gutter, not part of the copied text */
.khdocs-wrap .khdocs-content .khdocs-code-numbered .khdocs-code-line{
  position: relative;
  padding-left: calc(var(--code-pad-x) + 3.2em);
}
.khdocs-wrap .khdocs-content .khdocs-code-numbered .khdocs-code-line::before{
  counter-increment: khdocs-line;
  content: counter(khdocs-line);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--code-pad-x) + 2.2em);
  padding-right: 0.8em;
  border-right: 1px solid #1e293b;
  box-sizing: border-box;
  text-align: right;
  color: #64748b;
  font-variant-numeric: tabular-nums;
  user-select: none;
  -webkit-user-select: none;
}
/* Highlighted lines ({3,5-7} in the fence) */
.khdocs-wrap .khdocs-content .khdocs-code-line.is-marked{
  background: rgba(56, 189, 248, 0.12);
  box-shadow: inset 3px 0 0 #38bdf8;
}
.khdocs-wrap .khdocs-content .khdocs-code-line.is-marked::before{
  color: #7dd3fc;
}

@media (max-width: 600px){
  .khdocs-wrap .khdocs-content .khdocs-code{ --code-font-size: 12px; --code-pad-x: 14px; }
  .khdocs-wrap .khdocs-content pre{ font-size: 12px; }
}

/* Syntax colours (highlight.php, hljs-* classes), close to GitHub Dark */
.khdocs-wrap .khdocs-content .hljs-comment,
.khdocs-wrap .khdocs-content .hljs-quote{ color: #8b949e; font-style: italic; }
.khdocs-wrap .khdocs-content .hljs-keyword,
.khdocs-wrap .khdocs-content .hljs-selector-tag,
.khdocs-wrap .khdocs-content .hljs-literal,
.khdocs-wrap .khdocs-content .hljs-doctag{ color: #ff7b72; }
.khdocs-wrap .khdocs-content .hljs-string,
.khdocs-wrap .khdocs-content .hljs-regexp{ color: #a5d6ff; }
.khdocs-wrap .khdocs-content .hljs-number,
.khdocs-wrap .khdocs-content .hljs-symbol,
.khdocs-wrap .khdocs-content .hljs-bullet,
.khdocs-wrap .khdocs-content .hljs-variable,
.khdocs-wrap .khdocs-content .hljs-template-variable,
.khdocs-wrap .khdocs-content .hljs-attr,
.khdocs-wrap .khdocs-content .hljs-attribute,
.khdocs-wrap .khdocs-content .hljs-selector-attr,
.khdocs-wrap .khdocs-content .hljs-selector-class,
.khdocs-wrap .khdocs-content .hljs-selector-id{ color: #79c0ff; }
.khdocs-wrap .khdocs-content .hljs-title,
.khdocs-wrap .khdocs-content .hljs-section{ color: #d2a8ff; }
.khdocs-wrap .khdocs-content .hljs-built_in,
.khdocs-wrap .khdocs-content .hljs-type,
.khdocs-wrap .khdocs-content .hljs-params{ color: #ffa657; }
.khdocs-wrap .khdocs-content .hljs-tag,
.khdocs-wrap .khdocs-content .hljs-meta{ color: #8b949e; }
.khdocs-wrap .khdocs-content .hljs-meta .hljs-keyword{ color: #ff7b72; }
.khdocs-wrap .khdocs-content .hljs-meta .hljs-string{ color: #a5d6ff; }
.khdocs-wrap .khdocs-content .hljs-name{ color: #7ee787; }
.khdocs-wrap .khdocs-content .hljs-tag .hljs-attr{ color: #79c0ff; }
.khdocs-wrap .khdocs-content .hljs-tag .hljs-string{ color: #a5d6ff; }
.khdocs-wrap .khdocs-content .hljs-subst{ color: #e2e8f0; }
.khdocs-wrap .khdocs-content .hljs-addition{ color: #aff5b4; background: rgba(46, 160, 67, 0.15); }
.khdocs-wrap .khdocs-content .hljs-deletion{ color: #ffdcd7; background: rgba(248, 81, 73, 0.15); }
.khdocs-wrap .khdocs-content .hljs-emphasis{ font-style: italic; }
.khdocs-wrap .khdocs-content .hljs-strong{ font-weight: 700; }

/* Copy button: in the header bar, always visible */
.khdocs-wrap .khdocs-content .khdocs-copy-btn{
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 5px 10px;
  border: 1px solid #334155;
  border-radius: 6px;
  background: transparent;
  color: #cbd5e1;
  font: 500 12px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}
.khdocs-wrap .khdocs-content .khdocs-copy-btn:hover{
  background: #334155;
  border-color: #475569;
  color: #ffffff;
}
.khdocs-wrap .khdocs-content .khdocs-copy-btn:focus-visible{
  outline: 2px solid #38bdf8;
  outline-offset: 1px;
}
.khdocs-wrap .khdocs-content .khdocs-copy-btn.copied{
  background: #10b981;
  border-color: #059669;
  color: #ffffff;
  animation: khdocs-copy-success 0.5s ease-out;
}
.khdocs-wrap .khdocs-content .khdocs-copy-btn.copied::before{
  content: "\2713";
  margin-right: 0.35em;
  animation: khdocs-checkmark 0.4s ease-out;
}
.khdocs-wrap .khdocs-content .khdocs-copy-btn.copied::after{ content: "Copied"; }
.khdocs-wrap .khdocs-content .khdocs-copy-btn:not(.copied)::after{ content: "Copy"; }

/* A <pre> written as raw HTML in a page (no header bar): copy button in its corner, on hover */
.khdocs-wrap .khdocs-content pre > .khdocs-copy-btn{
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(30, 41, 59, 0.9);
  opacity: 0;
}
.khdocs-wrap .khdocs-content pre:hover > .khdocs-copy-btn,
.khdocs-wrap .khdocs-content pre > .khdocs-copy-btn:focus-visible,
.khdocs-wrap .khdocs-content pre > .khdocs-copy-btn.copied{ opacity: 1; }

/* Copy button animations */
@keyframes khdocs-copy-success{
  0%{
    transform: scale(1);
  }
  50%{
    transform: scale(1.1);
  }
  100%{
    transform: scale(1);
  }
}

@keyframes khdocs-checkmark{
  0%{
    opacity: 0;
    transform: scale(0) rotate(-45deg);
  }
  50%{
    transform: scale(1.2) rotate(0deg);
  }
  100%{
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}


.khdocs-wrap .khdocs-content blockquote{
  border-left: 3px solid #cbd2da;
  padding: 0.25em 0 0.25em 1.25em;
  margin: 1.75em 0;
  color: #6b7280;
  font-style: italic;
}

.khdocs-wrap .khdocs-content blockquote p{
  margin: 0 0 0.75em;
}

.khdocs-wrap .khdocs-content blockquote p:last-child{
  margin-bottom: 0;
}

.khdocs-wrap .khdocs-content table{
  width: 100%;
  border-collapse: collapse;
  padding: 0;
}

.khdocs-wrap .khdocs-content .khdocs-table-wrap + *{
  margin-top: 0;
}

.khdocs-wrap .khdocs-content table:last-child{
  margin-bottom: 0;
}

.khdocs-wrap .khdocs-content table th,
.khdocs-wrap .khdocs-content table td{
  padding: 0.625em 0.875em;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  margin: 0;
}

.khdocs-wrap .khdocs-content table th{
  font-weight: 600;
  background: #f9fafb;
  color: #111827;
}

.khdocs-wrap .khdocs-content table tr:last-child td{
  border-bottom: none;
}

.khdocs-wrap .khdocs-content img,
.khdocs-wrap .khdocs-content img.size-full,
.khdocs-wrap .khdocs-content img.size-large,
.khdocs-wrap .khdocs-content img.size-medium,
.khdocs-wrap .khdocs-content img.header-image,
.khdocs-wrap .khdocs-content img.wp-post-image{
  /* Explicitly match the parent's size-class / wp-post-image rules that set
     width:inherit, and override them: width:auto makes each image use its own
     (resized) size instead of being stretched to the full column; max-width keeps
     it from overflowing. The class-qualified selectors above are specificity
     0-3-1, well above the parent's 0-1-1, so this wins regardless of load order. */
  max-width: 100%;
  height: auto;
  border: 1px solid var(--khdocs-border);
  border-radius: 8px;
  margin: 1.75em 0;
  padding: 0;
  display: block;
}

.khdocs-wrap .khdocs-content hr{
  border: 0;
  border-top: 1px solid #cbd2da;
  margin: 2.5em 0;
  padding: 0;
  height: 0;
}

.khdocs-wrap .khdocs-content dl{
  margin: 1.25em 0;
  padding: 0;
}

.khdocs-wrap .khdocs-content dt{
  margin: 1em 0 0.25em;
  padding: 0;
  font-weight: 600;
}

.khdocs-wrap .khdocs-content dd{
  margin: 0 0 0.75em 1.5em;
  padding: 0;
}

.khdocs-wrap .khdocs-content strong,
.khdocs-wrap .khdocs-content b{
  font-weight: 600;
  margin: 0;
  padding: 0;
}

.khdocs-wrap .khdocs-content em,
.khdocs-wrap .khdocs-content i{
  font-style: italic;
  margin: 0;
  padding: 0;
}

/* The first/last elements inside the article body shouldn't add outer spacing. */
.khdocs-wrap .khdocs-content .entry-content > *:first-child{
  margin-top: 0;
}

.khdocs-wrap .khdocs-content .entry-content > *:last-child{
  margin-bottom: 0;
}

/* Reset page header and breadcrumbs */
.khdocs-wrap .khdocs-content #page-header{
  margin: 1.5em 0 2em;
  padding: 0 0 1em !important;
  border-bottom: 1px solid #e5e7eb;
}

/* Remove icon from page header and reset padding */
.khdocs-wrap .khdocs-content #page-header:before,
.khdocs-wrap .khdocs-content .single #page-header:before,
.khdocs-wrap .khdocs-content .category #page-header:before,
.khdocs-wrap .khdocs-content .single-format-video #page-header:before{
  display: none !important;
  content: none !important;
}

.khdocs-wrap .khdocs-content .single #page-header,
.khdocs-wrap .khdocs-content .category #page-header,
.khdocs-wrap .khdocs-content .single-format-video #page-header{
  padding-left: 0 !important;
}

/* Article title — override the parent's `#page-header .page-title`.
   This selector is specificity 1-3-0, above the parent's 1-1-0, so the
   larger/lighter title sticks regardless of load order. */
.khdocs-wrap .khdocs-content #page-header .page-title{
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #111827;
  margin: 0 0 0.5em;
  padding: 0;
}

/* Hide breadcrumbs */
.khdocs-wrap .khdocs-content #breadcrumbs{
  display: none !important;
}

.khdocs-wrap .khdocs-content #breadcrumbs li,
.khdocs-wrap .khdocs-content #breadcrumbs span{
  margin: 0;
  padding: 0;
}

/* Article header eyebrow (single posts): reading time + last updated, above the title.
   Folds #page-header into the selector to out-specify the parent's `#page-header p`
   rule (which otherwise forces font-size:16px and color onto this line). */
.khdocs-wrap .khdocs-content #page-header.khdocs-article-header .khdocs-article-meta{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 1.1em;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--khdocs-muted);
}

.khdocs-wrap .khdocs-content #page-header.khdocs-article-header .khdocs-meta-sep{
  margin: 0 .55em;
  color: #cbd1d9;
}

.khdocs-wrap .khdocs-content #page-header.khdocs-article-header .khdocs-last-modified time{
  color: inherit;
}

/* Reset WordPress-specific elements */
.khdocs-wrap .khdocs-content .wp-caption,
.khdocs-wrap .khdocs-content .wp-caption-text,
.khdocs-wrap .khdocs-content .gallery,
.khdocs-wrap .khdocs-content .gallery-item,
.khdocs-wrap .khdocs-content .alignleft,
.khdocs-wrap .khdocs-content .alignright,
.khdocs-wrap .khdocs-content .aligncenter{
  margin: 1.25em 0;
  padding: 0;
}

.khdocs-wrap .khdocs-content .alignleft{
  float: left;
  margin-right: 1.5em;
  margin-bottom: 1.25em;
}

.khdocs-wrap .khdocs-content .alignright{
  float: right;
  margin-left: 1.5em;
  margin-bottom: 1.25em;
}

.khdocs-wrap .khdocs-content .aligncenter{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.khdocs-wrap .khdocs-content .wp-caption-text{
  margin-top: 0.5em;
  font-size: 0.875em;
  color: #6b7280;
  text-align: center;
}

/* Reset article and post elements */
.khdocs-wrap .khdocs-content article,
.khdocs-wrap .khdocs-content .post,
.khdocs-wrap .khdocs-content .type-post,
.khdocs-wrap .khdocs-content .type-page{
  margin: 0;
  padding: 0;
  border: none;
}

.khdocs-wrap .khdocs-content .entry-header,
.khdocs-wrap .khdocs-content .entry-meta,
.khdocs-wrap .khdocs-content .entry-footer{
  margin: 0 0 1.25em;
  padding: 0;
}

/* The standard-format .entry-header is empty when a post has no featured image,
   yet still reserved bottom margin (which no longer collapses now that the body
   is a grid item) — leaving a gap under the title. Zero it and let the actual
   media (thumbnail/video) carry the spacing instead. */
.khdocs-wrap .khdocs-content .entry-header{
  margin-bottom: 0;
}
.khdocs-wrap .khdocs-content .entry-thumb,
.khdocs-wrap .khdocs-content .entry-video{
  margin: 0 0 1.5em;
}

.khdocs-wrap .khdocs-content .entry-meta{
  font-size: 0.875em;
  color: #6b7280;
}

.khdocs-wrap .khdocs-content .entry-meta:last-child{
  margin-bottom: 0;
}

/* ========================================================================
   Sidebar search trigger
   ======================================================================== */

.khdocs-search-trigger{
  margin-bottom: 16px;
  /* Match .khdocs-sidebar-body's right padding so the search bar lines up with
     the nav list and isn't crowded against the divider. */
  padding-right: 10px;
}

.khdocs-search-btn{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  color: #9ca3af;
  font-size: 14px;
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.khdocs-search-btn:hover{
  border-color: #9ca3af;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.khdocs-search-btn:focus-visible{
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}

.khdocs-search-btn .khdocs-search-icon{
  flex-shrink: 0;
  color: #9ca3af;
}

.khdocs-search-placeholder{
  flex: 1;
  text-align: left;
}

/* ========================================================================
   Search modal overlay
   ======================================================================== */

.khdocs-search-modal{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: min(12vh, 100px);
}

.khdocs-search-modal[hidden]{
  display: none;
}

.khdocs-search-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.khdocs-search-panel{
  position: relative;
  width: 90vw;
  max-width: 1000px;
  height: 75vh;
  max-height: 600px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 25px 60px rgba(0,0,0,.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: khdocs-modal-in .15s ease-out;
}

@keyframes khdocs-modal-in{
  from{
    opacity: 0;
    transform: scale(.97) translateY(-8px);
  }
  to{
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.khdocs-search-header{
  padding: 20px 20px 0;
  flex-shrink: 0;
}

.khdocs-search-field{
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
}

.khdocs-search-field:focus-within{
  border-color: #9ca3af;
  box-shadow: 0 0 0 2px rgba(156,163,175,.15);
}

.khdocs-search-header .khdocs-search-icon{
  flex-shrink: 0;
  color: #9ca3af;
}

.khdocs-search-input{
  flex: 1;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 15px;
  font-family: inherit;
  color: #111827;
  background: transparent !important;
  padding: 0;
  margin: 0;
  height: 100%;
  line-height: 40px;
  -webkit-appearance: none;
  appearance: none;
}

/* Results area */
.khdocs-search-results{
  overflow-y: auto;
  padding: 8px;
  flex: 1;
  min-height: 120px;
}

.khdocs-search-empty{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #6b7280;
  gap: 10px;
}

.khdocs-search-empty svg{
  color: #9ca3af;
}

.khdocs-search-empty p{
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: #6b7280;
}

.khdocs-search-loading{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  color: #9ca3af;
  font-size: 14px;
}

.khdocs-search-no-results{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  color: #6b7280;
  gap: 8px;
}

.khdocs-search-no-results p{
  margin: 0;
  font-size: 14px;
}

/* Result items */
.khdocs-search-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.khdocs-search-list li{
  margin: 0;
}

.khdocs-search-list a{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: #111827;
  font-size: 14px;
  line-height: 1.5;
  transition: background .1s ease;
}

.khdocs-result-icon{
  flex-shrink: 0;
  color: #9ca3af;
  margin-top: 2px;
}

.khdocs-search-list a:hover,
.khdocs-search-list a:focus{
  background: #f3f4f6;
  outline: none;
}

.khdocs-search-list .khdocs-result-title{
  font-weight: 500;
  display: block;
}

.khdocs-search-list .khdocs-result-type{
  font-size: 12px;
  color: #9ca3af;
  margin-left: 4px;
  font-weight: 400;
}

/* ========================================================================
   Mobile trigger bar + sidebar panel (hidden on desktop)
   ======================================================================== */

.khdocs-mobile-bar{
  display: none;
}

.khdocs-sidebar-backdrop{
  display: none;
}

.khdocs-sidebar-mobile-header{
  display: none;
}

/* Hide the right-rail TOC on narrower screens (article spans the body width). */
@media (max-width: 1200px){
  .khdocs-body{
    grid-template-columns: minmax(0, 1fr);
  }
  .khdocs-toc{
    display: none;
  }
}

/* ========================================================================
   Mobile: sidebar becomes a slide-down panel triggered by page-title bar
   ======================================================================== */
@media (max-width: 980px){
  .khdocs-layout{
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* No divider when the sidebar is a drawer and content is full-width. */
  .khdocs-wrap .khdocs-content{
    padding-left: 0;
    border-left: 0;
  }

  /* The mobile bar already has a search icon, so hide the in-drawer search. */
  .khdocs-search-trigger{
    display: none;
  }

  /* --- Mobile bar: nav trigger + search icon in one row --- */
  .khdocs-mobile-bar{
    display: flex;
    align-items: stretch;
    width: 100%;
    gap: 8px;
    overflow: hidden;
  }

  .khdocs-mobile-trigger{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--khdocs-text);
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    overflow: hidden;
  }

  .khdocs-mobile-search-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    color: #6b7280;
  }

  .khdocs-mobile-search-btn:active{
    background: #f9fafb;
  }

  .khdocs-mobile-trigger:active{
    background: #f1f5f9;
  }

  .khdocs-mobile-trigger-label{
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 8px;
  }

  .khdocs-mobile-trigger-chevron{
    width: 10px;
    height: 10px;
    border-right: 2px solid #6b7280;
    border-bottom: 2px solid #6b7280;
    transform: rotate(45deg);
    transition: transform .2s ease;
    flex-shrink: 0;
  }

  .khdocs-mobile-trigger[aria-expanded="true"] .khdocs-mobile-trigger-chevron{
    transform: rotate(-135deg);
  }

  /* --- Backdrop overlay --- */
  .khdocs-sidebar-backdrop{
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 1000;
    -webkit-tap-highlight-color: transparent;
  }

  .khdocs-sidebar-backdrop.is-visible{
    display: block;
  }

  /* --- Sidebar as a centered floating panel --- */
  .khdocs-sidebar{
    position: fixed;
    top: 16px;
    bottom: 16px;
    left: 16px;
    right: 16px;
    /* Undo the desktop align-self: start. On a fixed box it would shrink the panel to its
       content instead of filling top..bottom, and Safari counts the flex:1 list as no
       content, so the panel collapsed to its padding on iOS. */
    align-self: stretch;
    width: auto;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    z-index: 1001;
    background: #fff;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 20px 16px 24px 20px;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    display: flex;
    flex-direction: column;
  }

  .khdocs-sidebar-body{
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }

  .khdocs-sidebar.is-open{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Thin custom scrollbar */
  .khdocs-sidebar-body::-webkit-scrollbar{
    width: 4px;
  }
  .khdocs-sidebar-body::-webkit-scrollbar-track{
    background: transparent;
  }
  .khdocs-sidebar-body::-webkit-scrollbar-thumb{
    background: #d1d5db;
    border-radius: 4px;
  }
  .khdocs-sidebar-body::-webkit-scrollbar-thumb:hover{
    background: #9ca3af;
  }
  .khdocs-sidebar-body{
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
  }

  /* --- Tighter link spacing to match ReadMe --- */
  .khdocs-sidebar .khdocs-nav a{
    padding: 5px 10px;
    font-size: 14px;
    line-height: 1.4;
  }

  .khdocs-sidebar .khdocs-acc-btn{
    padding: 5px 10px;
    font-size: 14px;
    line-height: 1.4;
  }

  .khdocs-sidebar .khdocs-section-title{
    font-size: 11px;
    margin: 16px 0 6px;
  }

  .khdocs-sidebar .khdocs-section:first-child .khdocs-section-title{
    margin-top: 0;
  }

  /* --- Typography adjustments for mobile --- */
  .khdocs-wrap .khdocs-content{
    font-size: 15px;
    padding-top: 8px;
  }

  .khdocs-wrap .khdocs-content h1{
    font-size: 1.875rem;
  }

  /* Must include #page-header to out-specify the desktop title rule (1-3-0). */
  .khdocs-wrap .khdocs-content #page-header .page-title{
    font-size: 1.75rem;
  }

  .khdocs-wrap .khdocs-content h2{
    font-size: 1.5rem;
  }

  .khdocs-wrap .khdocs-content h3{
    font-size: 1.25rem;
  }
}

/* ---------------------------------------------------------------------------
 * Callout variants (extends parent .gac-callout / .gac-warning / .gac-note).
 * Base box + icon-chip layout live in the parent style.css; these add the
 * success / tip / danger color schemes used by the [callout] shortcode.
 * ------------------------------------------------------------------------- */
.gac-success { background:#f0faf4; }
.gac-success .gac-label { color:#15803d; }
.gac-success::before { background-color:#cdebd8; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E"); }

.gac-tip { background:#f6f4fe; }
.gac-tip .gac-label { color:#6d28d9; }
.gac-tip::before { background-color:#e6def9; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E"); }

.gac-danger { background:#fef2f2; }
.gac-danger .gac-label { color:#b91c1c; }
.gac-danger::before { background-color:#f8d6d6; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E"); }

/* Callout box sizing/typography — overrides the parent's compact .gac-callout
   (.96rem text + small icon) so callouts read at full body size and feel
   substantial. Scoped to .khdocs-content to win over the parent base rules. */
.khdocs-wrap .khdocs-content .gac-callout{
  font-size: 1rem;
  line-height: 1.6;
  padding: 1.2rem 1.4rem 1.2rem 3.75rem;
  margin: 1.75rem 0;
  border-radius: 12px;
}
.khdocs-wrap .khdocs-content .gac-callout::before{
  left: 1.15rem;
  top: 1.15rem;
  width: 2rem;
  height: 2rem;
  border-radius: 9px;
  background-size: 1.2rem 1.2rem;
}
.khdocs-wrap .khdocs-content .gac-callout .gac-label{
  display: block;
  margin-bottom: 0.35rem;
  font-size: 1rem;
  font-weight: 700;
}
.khdocs-wrap .khdocs-content .gac-callout p{
  margin: 0.35rem 0;
}
.khdocs-wrap .khdocs-content .gac-callout p:first-child{
  margin-top: 0;
}
.khdocs-wrap .khdocs-content .gac-callout p:last-child{
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Previous / Next article navigation (single posts), ordered by the sidebar.
 * ------------------------------------------------------------------------- */
.khdocs-pagination{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:3rem;
  padding-top:1.5rem;
  border-top:1px solid var(--khdocs-border);
}
.khdocs-pagination-link{
  display:flex;
  flex-direction:column;
  gap:.3rem;
  flex:1 1 0;
  min-width:0;
  max-width:calc(50% - .375rem);
  padding:.7rem .95rem;
  border:1px solid var(--khdocs-border);
  border-radius:8px;
  text-decoration:none;
  transition:border-color .15s ease;
}
.khdocs-pagination-link:hover{
  border-color:#c7ced8;
}
.khdocs-pagination-next{
  margin-left:auto;
  text-align:right;
  align-items:flex-end;
}
.khdocs-pagination-dir{
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--khdocs-muted);
}
.khdocs-pagination-title{
  font-size:1.2rem;
  font-weight:500;
  color:#374151;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:color .15s ease;
}
.khdocs-pagination-link:hover .khdocs-pagination-title{
  color:var(--khdocs-link);
}
@media (max-width:600px){
  .khdocs-pagination-link{
    flex-basis:100%;
    max-width:100%;
  }
  /* When stacked, keep both cards left-aligned for a consistent list look. */
  .khdocs-pagination-next{
    margin-left:0;
    text-align:left;
    align-items:flex-start;
  }
}


/* ========================================================================
   Base rules previously provided by the WordPress parent theme
   ======================================================================== */
:root{
  --gac-header-h: 77px; /* height of header.header-sec */
}
html{
  scroll-padding-top: calc(var(--gac-header-h) + 16px);
}
[hidden]{
  display: none !important;
}
.khdocs-wrap .ht-container{
  margin-left: auto;
  margin-right: auto;
}
.khdocs-wrap .khdocs-content img{
  max-width: 100%;
  height: auto;
}
.khdocs-wrap .khdocs-content iframe{
  max-width: 100%;
}

/* Fonts, as on the WordPress docs: system font stack for text (set on
   .khdocs-wrap above), Outfit for headings, monospace for code. The site
   stylesheet sets Poppins on p/li/a etc., so those inherit explicitly. */
.khdocs-wrap :where(p, li, a, span, td, th, button, input, label, strong, em, b, i, dt, dd, blockquote){
  font-family: inherit;
}
.khdocs-wrap :where(h1, h2, h3, h4, h5, h6),
.khdocs-wrap .khdocs-content .page-title{
  font-family: "Outfit", sans-serif;
}
.khdocs-wrap :where(code, pre, pre *, kbd, samp){
  font-family: "SF Mono", Monaco, Menlo, Consolas, "Cascadia Mono", "Roboto Mono", "Courier New", monospace;
}

/* Callout base (parent theme) */
.gac-callout { position:relative; border-radius:12px; padding:1.05rem 1.2rem 1.05rem 3.4rem; margin:1.4rem 0; font-size:.96rem; }
.gac-callout p { margin:.25rem 0; }
.gac-callout p:first-child { margin-top:0; }
.gac-callout p:last-child { margin-bottom:0; }
.gac-callout .gac-label { font-weight:700; letter-spacing:-.01em; }
.gac-callout::before { content:""; position:absolute; left:1rem; top:1.05rem; width:1.6rem; height:1.6rem; border-radius:8px; background-size:1rem 1rem; background-repeat:no-repeat; background-position:center; }
.gac-warning { background:#fef9ec; }
.gac-warning .gac-label { color:#a16207; }
.gac-warning::before { background-color:#fbeec3; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ca8a04' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3C/svg%3E"); }
.gac-note { background:#f3f8fd; }
.gac-note .gac-label { color:#1d5da8; }
.gac-note::before { background-color:#d9e9fa; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6fb0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); }

/* ========================================================================
   Hero band above the docs ("Knowledge Base / FAQ and Setup Guides"),
   same size and colours as on the WordPress docs
   ======================================================================== */
.khdocs-hero{
  background: #333;
  color: #fff;
  padding: 46px 0;
  text-align: center;
  /* start right below the fixed site header, as on WordPress: header height minus the
     site's body padding-top, per the site's breakpoints (header 77.13 / body 72.80 here).
     Set in CSS, not measured by JS, so the hero doesn't move after the first paint. */
  margin-top: 4.33px;
  /* The header's real height shifts with display scaling (at 175% it is 79.64, not 80.94),
     so the edges never meet exactly everywhere, and a 1-8px white line showed between them;
     at 992-1009px wide the site header is also its compact 43px version, leaving 33px.
     This dark band behind the hero's top edge fills any such gap; the fixed header is drawn
     on top of it, so it is invisible everywhere else. */
  box-shadow: 0 -40px 0 #333;
}
@media (min-width: 1580px){ .khdocs-hero{ margin-top: 8.14px; } }   /* header 80.94 */
@media (max-width: 1200px){ .khdocs-hero{ margin-top: 2.97px; } }   /* header 75.77 */
@media (max-width: 991.98px){ .khdocs-hero{ margin-top: 0; } }      /* header 62.88, body 66.16: below it, the band fills the gap */
@media (max-width: 600px){ .khdocs-hero{ margin-top: 4.88px; } }    /* body 58 */
.khdocs-hero-inner{
  width: 90%;
  max-width: 100rem;
  margin: 0 auto;
}
.khdocs-hero .khdocs-hero-title{
  display: inline-block;
  font-family: "Poppins", sans-serif;
  font-size: 50px;
  font-weight: 700;
  line-height: 1.4em;
  letter-spacing: 0;
  color: #fff;
  text-decoration: none;
}
.khdocs-hero .khdocs-hero-title:hover{
  color: #fff;
  text-decoration: none;
}
.khdocs-hero .khdocs-hero-subtitle{
  margin: 0 0 10px;
  line-height: 1.2;
  font-family: "Outfit", sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #fff;
}

/* Table cells: same line height as the WordPress docs */
.khdocs-wrap .khdocs-content table td,
.khdocs-wrap .khdocs-content table th{
  line-height: 1.42;
}

/* ========================================================================
   FAQ pages (faq: true): collapsible questions, same look as the FAQ plugin
   on the WordPress docs (red +/− toggle, Outfit 16px question, indented answer)
   ======================================================================== */
.khdocs-wrap .khdocs-content .khdocs-faq{
  margin: 2px 0;
  padding: 2px 0;
}
.khdocs-wrap .khdocs-content .khdocs-faq summary{
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
}
.khdocs-wrap .khdocs-content .khdocs-faq summary::-webkit-details-marker{
  display: none;
}
.khdocs-wrap .khdocs-content .khdocs-faq-icon{
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  margin-right: 20px;
}
.khdocs-wrap .khdocs-content .khdocs-faq-icon::before,
.khdocs-wrap .khdocs-content .khdocs-faq-icon::after{
  content: "";
  position: absolute;
  left: 4px;
  top: 14px;
  width: 26px;
  height: 3px;
  background: #d44b55;
  transition: transform .15s ease;
}
.khdocs-wrap .khdocs-content .khdocs-faq-icon::after{
  transform: rotate(90deg);
}
.khdocs-wrap .khdocs-content .khdocs-faq[open] .khdocs-faq-icon::after{
  transform: rotate(0deg);
}
.khdocs-wrap .khdocs-content .khdocs-faq summary h3{
  margin: 5px 0;
  font-family: "Outfit", sans-serif;
  font-size: 16.3125px;
  font-weight: 600;
  line-height: 1.5;
  color: #111827;
}
.khdocs-wrap .khdocs-content .khdocs-faq summary:hover h3{
  color: #1d4ed8;
}
.khdocs-wrap .khdocs-content .khdocs-faq-body{
  padding: 10px 0 10px 55px;
}
.khdocs-wrap .khdocs-content .khdocs-faq-body p,
.khdocs-wrap .khdocs-content .khdocs-faq-body li,
.khdocs-wrap .khdocs-content .khdocs-faq-body td{
  color: #1a1a1a;
}
.khdocs-wrap .khdocs-content .khdocs-faq-body p{
  margin: 0 0 16px;
}