/* =========================================================
   Mend docs – Scroll Sites (Help Center theme) custom CSS
   Based on migration rules from K15t:
   - data-vp-component -> data-component
   - --vpt-theme-*     -> --theme-*
   - remove --vp-* legacy tokens
   ========================================================= */

/* Fonts (kept as-is from your current file) */
@import url('https://rsms.me/inter/inter.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400&display=swap');

:root {
  /* ----------------------------
     Brand tokens (Mend-scoped)
     ---------------------------- */
  --mend-color-primary: #193468;
  --mend-color-text: #0B1215;
  --mend-color-bg: #fefeff;
  --mend-color-demo-btn: #133C8C;
  --mend-color-demo-btn-hover: #124DB8;
  --mend-color-toc-active: #005AFF;
  --mend-focus-outline: #0038E5;

  --mend-font-sans: "Poppins", sans-serif;

  /* ----------------------------
     Scroll Sites theme tokens
     (vpt prefix removed in Sites)
     ---------------------------- */
  --theme-text-font: var(--mend-font-sans);
  --theme-headline-font: var(--mend-font-sans);

  /* Colors */
  --theme-text-color: var(--mend-color-text);
  --theme-headline-color: var(--mend-color-text);
  

  /* Primary */
  --theme-primary-color: var(--mend-color-primary);
  --theme-on-primary-color: #ffffff;
  /* doc shows this spelling; keep as fallback */
  --theme-on-primaryl-color: #ffffff;

  /* Footer / header (replace your internal tokens with supported ones) */
  --theme-footer-background-color: var(--mend-color-text);
  --theme-footer-text-color: #ffffff;

  --theme-header-text-color: var(--mend-color-text);
  /* If your header background is set via theme UI, you can omit this.
     Leaving unset keeps the UI-configured value. */
  /* --theme-header-background-color: #ffffff; */

  /* Banner (used by the banner component) */
  /* --theme-banner-background-color: ...; */
  /* --theme-banner-text-color: ...; */
  /* --theme-banner-image: ...; */
}

/* Base background */
body,
.space-overview > main {
  background-color: var(--mend-color-bg);
  color: var(--mend-color-text);
  font-family: var(--mend-font-sans);
}

/* Logo */
.header__navigation--logo a img {
  max-height: 60px;
  min-width: 40px;
}

/* Active TOC marker */
.toc-link.is-active-link::before {
  background-color: var(--mend-color-toc-active);
}

[data-component="search-bar"] .search-input__input::placeholder {
  opacity: 1;
  color: #193468;
}

/* "Schedule a demo" button in header */
.mend-demo-btn {
  display: inline-block;
  color: #fff !important;
  text-decoration: none;
  background-color: var(--mend-color-demo-btn);
  line-height: 16px;
  padding: 0.65rem 1rem !important;
  font-weight: 500;
  text-align: center;
  border-radius: 7px;
  font-size: 1.07em;
}

.mend-demo-btn:hover {
  background-color: var(--mend-color-demo-btn-hover);
  background-size: 0;
}

/* MAIN */
.space-overview__content hr {
  margin-bottom: 3rem;
  margin-top: 2rem;
}

.article-body p {
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .panel-macro {
    padding: 12px 10px;
  }
}

.panel-macro ul {
  margin-left: 1em;
}

.article-body .table-wrap {
  margin-bottom: 1rem;
  padding-top: 1.5rem;
  position: relative;
}

/* Product icons on homepage */
.space-overview__content .tile {
  border: none;
  font-family: var(--mend-font-sans);
}

.space-overview__content .tile__headline a {
  line-height: 20px;
  display: inline-block;
  background-position: 0 25%, -100px -100px !important;
  background-repeat: no-repeat !important;
  padding-top: 8px;
  padding-bottom: 8px;
  font-family: var(--mend-font-sans);
}

/* Portal header */
.portal__header__content__intro--heading {
  font-size: 3em;
  font-weight: 700;
  font-family: var(--mend-font-sans);
  margin-bottom: 0;
}

.portal__header__content__intro--intro {
  font-family: var(--mend-font-sans);
  font-weight: 400;
}

.home-page .spaces h2 {
  font-family: var(--mend-font-sans);
  font-weight: bold;
  font-size: 1.59em;
  color: var(--mend-color-text);
}

/* Tiles */
.tile--compact {
  --padding: 17px;
  flex-direction: row;
}

.tile:focus-within {
  outline-color: var(--mend-focus-outline);
}

.tile:hover {
  background-color: #fff;
  box-shadow: 0 8px 24px 0 rgb(0 0 0 / 18%);
}

.render-links--link a {
  font-family: var(--mend-font-sans);
  font-size: 1em;
}

.tile:hover .tile__headline {
  color: var(--mend-color-demo-btn);
}

.tile {
  --padding: 1rem;
  background-color: var(--K15t-surface-raised);
  border: 1px solid var(--K15t-border-neutral-strong);
  border-radius: var(--K15t-radius-small);
  display: flex;
  font: var(--K15t-font-body-medium);
  font-size: 1.9em;
  padding: var(--padding);
  padding-bottom: 15px;
  position: relative;
  transition: border-color .2s ease, background-color .2s ease;
  gap: 0.8rem;
}

.tile-title a {
  font-size: 1.096em;
  font-weight: 500;
  margin-right: 0.5px;
  color: var(--mend-color-text);
}

.article-body ol,
.article-body ul {
  margin-top: 0.1rem;
  margin-bottom: 0.3rem;
}

/* ---- Article Headings ---- */
.vp-article__heading {
  hyphens: auto;
  overflow-wrap: anywhere;
  font-size: 34px;
  font-weight: 400;
  color: var(--mend-color-text);
  margin-bottom: 10px;
}

.article-body h2, .article-body h2 * {
  font-size: 29px;
  margin-top: 1.2rem;
  font-weight: 500;
}

.article-body h3, .article-body h3 * {
  font-size: 25px;
  margin-top: 1.2rem;
  font-weight: 500;
}

.article-body h4, .article-body h4 * {
  font-size: 21px;
  margin-top: 1.2rem;
  font-weight: 500;
}

.article-body h5, .article-body h5 * {
  font-size: 19px;
  margin-top: 1.2rem;
  font-weight: 500;
}

/* Left nav tree – update header height token (vpt -> theme) */
.vp-article__aside-left .vp-desktop-navigation__page-tree {
  /* Use new token; keep fallback just in case */
  max-height: calc(100vh - var(--theme-header-height, var(--vpt-theme-header-height)));
  padding: var(--_spacing);
  padding-left: 5px;
}

/* Footer links */
.footer__links a {
  font-size: 15px;
  padding-bottom: .8rem;
  font-family: var(--mend-font-sans) !important;
  display: inline-block;
  padding-right: 0;
  margin-right: 0;
}

.footer__links a:hover {
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

.hc-footer-font-color,
.hc-footer-font-color > a {
  color: var(--_foreground, #fff) !important;
  font-family: var(--mend-font-sans);
}

/* Specific section borders */
.specific-section .vp-article-body,
.specific-section .contentLayout2,
.specific-section .columnLayout.fixed-width .innerCell,
.specific-section .vp-article__integration {
  padding: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  letter-spacing: -0.005em;
}

@media (min-width: 768px) {
  .article-body .columnLayout:is(.two-right-sidebar, .two-left-sidebar, .three-equal) {
    grid-template-columns: repeat(3, 1fr);
    min-width: 200;
  }

  .article-body .columnLayout:is(.two-right-sidebar, .two-left-sidebar, .three-equal) > * {
    padding: 10px;
    border: 0.5px solid #CCCC;
    box-sizing: border-box;
  }
}

/* SPACE OVERVIEW */
@media (min-width: 1024px) {
  .lg\:mb-20 {
    padding-bottom: 3rem;
  }
}

/* Higher resolutions */
@media only screen and (min-width: 1650px) {
  .panel-macro__content > * {
    font-size: 16px;
  }

  .vp-article__heading {
    margin-bottom: 1rem;
  }

  .article-body p {
    margin-bottom: 0.1rem;
  }
}

/* Swagger APIs */
.swagger-ui .wrapper {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 1460px;
  padding: 0;
  width: 100%;
}

/* Banner component: data-vp-component -> data-component */
[data-component="banner"] {
  --_foreground: var(--foreground, var(--theme-banner-text-color));
  --_background: var(--background, var(--theme-banner-background-color));
  --_image: var(--image, var(--theme-banner-image));
  height: 365px;
}

/* Landing pages tiles */
@media (min-width: 768px) {
  .article-body .columnLayout:is(.two-equal,.two-right-sidebar,.two-left-sidebar,.three-equal,.three-with-sidebars) {
    column-gap: 1.625rem;
    display: grid;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
    overflow-x: auto;
  }
}

@media screen and (min-width: 1023px) {
  .article-body :is(h1, h2, h3, h4, h5, h6) {
    position: relative;
  }

  .article-body :is(h1, h2, h3, h4, h5, h6) .article-body__anchor {
    display: inline-block;
    position: absolute;
    left: -5px;
    top: -1.5rem;
  }
}

/* MOBILE ADJUSTMENTS */
@media (max-width: 1023px) {
  .portal__header {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .header__navigation {
    padding-bottom: 0;
    padding-top: 0;
  }

  .portal__header__content__intro--heading,
  .space-overview__hero__header__content__intro--heading {
    font-size: 2.6rem !important;
  }

  .portal__header__content__intro--intro,
  .space-overview__hero__header__content__intro--intro {
    font-size: 1.05rem !important;
  }

  iframe[title="Button to launch messaging window"] {
    display: none;
  }

  .vp-search-bar-container {
    max-width: 100%;
  }

  .article article {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .space-overview__content hr {
    margin-bottom: 3rem;
    margin-top: 1rem;
  }

  .vp-accordion-link-group__item--link a,
  .vp-accordion-link-group__item--disclosure a {
    text-decoration: none;
  }

  iframe {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
  }
}

/* Breadcrumb label */
.breadcrumbs-wrapper::before {
  content: "Mend.io Product Documentation";
  font-weight: 500;
  font-size: 1rem;
  color: #1a1a1a;
  line-height: 1.4;
}

@layer components {
    [data-component=footer] {
        --_footer-padding: var(--footer-padding, 16px);
        --_footer-background-color: #000345;
        --_footer-border-color: var(--border, var(--K15t-border-neutral));
        --_footer-border-width: var(--footer-border-width, 1px);
        --_footer-text-color: var(--foreground, var(--theme-footer-text-color))
    }

      .banner hgroup>h1 {
        font-size: 3em;
        font-weight: bold;
        font-family: "Poppins";
        margin-bottom: 0;
    }

  .search-input__input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: var(--border-radius);
    height: 100%;
    font-size: 14px;
    background-color: var(--K15t-background-input);
    border: none;
    outline: none;
    flex: auto;
    order: 0;
    margin: 0;
    padding-block: 1rem;
    padding-inline-start: calc(var(--padding-inline) + 2.375rem);
    padding-inline-end: calc(var(--padding-inline) + .25rem);
    transition: background-color 50ms ease-in-out;
}

      .search-bar .search-input__input,.search-bar .search-input__input:hover {
        background-color: #ffffff;
    }

      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        block-size: var(--theme-header-height);
        padding-inline:max(var(--_header-padding),calc((100% - var(--theme-container-width)) / 2));border-block-end: var(--_header-border-width) solid var(--_header-border-color);
        background-color: var(--_header-background-color);
        position: sticky;
        inset-block-start: 0;
        z-index: 100;
        container-type: inline-size;
        font-weight: var(--K15t-font-weight-medium);
        font-size: 1em;
        color: var(--_header-text-color);
        -moz-column-gap: var(--_header-padding);
        column-gap: var(--_header-padding)
    }

/* Ensure the button aligns like the other header links */
/* Make the CTA link behave like a button but align nicely in a flex row */
.mend-demo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0.65rem 1rem !important;
  border-radius: 10px;
  color: #fff !important;
  text-decoration: none !important;
  background-color: var(--mend-color-demo-btn);
}

.mend-demo-btn:hover {
  background-color: var(--mend-color-demo-btn-hover);
}

      @media screen and (min-width: 768px) {
        .footer {
            display:grid;
            grid-template-columns: auto 1fr;
            /* row-gap:4px; */
            -moz-column-gap: 24px;
            column-gap: 24px;
            justify-content: center;
            align-content: center;
            justify-items: start;
            align-items: center;
        }

        .tree .tree-item-header:has(>[aria-current=page]) {
        color: #0A2656;
        background-color: #eff0f4;
        font-weight: var(--K15t-font-weight-bold);
    }

        h1, h2, h3, h4, h5, h6 {
    text-wrap: wrap;
}

            .toc.sticky .toc-list .toc-link[aria-current=true] {
        color: var(--_foreground-color-selected);
        background-color: var(--_background-color-selected)
    }


@media screen and (min-width: 768px) {
    .breadcrumbs {
        flex-wrap:wrap;
    }
}

@media (min-width: 768px) {
    .article__content .columnLayout:is(.two-right-sidebar, .two-left-sidebar, .three-equal) {
        grid-template-columns: repeat(3, 1fr);
        min-width: 200;
    }

    /* Add borders to the product tiles */
@media (min-width: 768px) {
  /* Container becomes 3-column grid */
  .article-body [data-component="layout-section"] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px; /* optional, nice spacing */
  }

  /* Each tile block */
  .article-body [data-component="layout-section"] > * {
    padding: 10px;
    border: 1px solid #cccccc;
    box-sizing: border-box;
    border-radius: 8px; /* optional */
  }
}

  
.banner hgroup>p {
margin-block: 0;
font-size: var(--K15t-font-size-headline-medium);
line-height: var(--K15t-line-height-medium);
text-wrap: balance
}

  
/* WSK Note */

  .breadcrumbs ol::before {
    content: "Mend.io Product Documentation";
    display: block; /* Important: makes it appear on its own line above the breadcrumb items */
    font-weight: 500;
    font-size: 1.0rem;
    color: #1a1a1a;
    line-height: 1.4;
}

  .panel-content ul {
  padding-left: 1em;
}