/* theme tokens > https://help.k15t.com/scroll-viewport/using-design-tokens-in-custom-css */
:root{
  --vpt-theme-text-font: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Helvetica, Arial, sans-serif, ‘Apple Color Emoji’, ‘Segoe UI Emoji’, ‘Segoe UI Symbol’;
  --vpt-theme-text-color: var(--rui-color-text-primary);
  --vpt-theme-banner-text-color: var(--rui-color-text-primary);
  --vpt-theme-banner-image: none;
  --vpt-theme-banner-background-color: var(--K15t-color-neutral-50);
  --vpt-theme-header-height: 64px;
  --vpt-theme-scroll-offset: 64px;
}

/* custom tokens > https://help.k15t.com/scroll-viewport/all-design-tokens */
:root{
  --K15t-color-neutral-0: #FFFFFF;
  --K15t-color-neutral-10:#FBFCFC;
  --K15t-color-neutral-25: #F6F7F8;
  --K15t-color-neutral-50: #EFF0F1;
  --K15t-color-neutral-75: #E6E9EB;
  --K15t-color-neutral-100: #DFE1E4;
  --K15t-color-neutral-200: #C0C4C9;
  --K15t-color-neutral-300: #A1A7AD;
  --K15t-color-neutral-400: #838A91;
  --K15t-color-neutral-500: #686D73;
  --K15t-color-neutral-600: #52575C;
  --K15t-color-neutral-700: #3D4146;
  --K15t-color-neutral-800: #282B2F;
  --K15t-color-neutral-850: #1E2023;
  --K15t-color-neutral-900: #131517;
  --K15t-color-neutral-950: #090A0B;
  --K15t-color-neutral-1000: #000000;
  --K15t-color-blue-50: #EAF0FC;
  --K15t-color-blue-100: #D4E0F8;
  --K15t-color-blue-400: #5384E5;
  --K15t-color-blue-500: #2865DE;
  --K15t-color-blue-600: #2050B0;
  --K15t-surface: var(--K15t-color-neutral-10);
}

/* custom */
:root{
  --rui-color-text-primary: var(--K15t-color-neutral-800);
  --rui-color-text-secondary: var(--K15t-color-neutral-500);
  --rui-color-text-blue: var(--K15t-color-blue-500);
  --rui-color-lowest-gray: var(--K15t-color-neutral-200);
  --rui-color-low-gray: var(--K15t-color-neutral-300);
  --rui-color-primary: var(--K15t-color-blue-500);
  --rui-shadow-inset: inset 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --rui-shadow-l: 0 0 12px 0 rgba(0, 0, 0, 0.2);
}

/* components > https://help.k15t.com/scroll-viewport/components */
/* header */
[data-vp-component="header"] {
  --background: var(--K15t-color-neutral-10);
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1);
}
/* banner */
[data-vp-component="banner"] {
  background-image: linear-gradient(to top, rgba(0,0,0,0.1), transparent 10px);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 10px;
}
[data-vp-component="banner"] .space-overview__hero__header {
  padding-top: 64px;
  padding-bottom: 64px;
}
[data-vp-page-template="content-source"] [data-vp-component="banner"] h1.space-overview__hero__header__content__intro--heading{
  display: none;
}
[data-vp-page-template="content-source"] [data-vp-component="banner"] p.space-overview__hero__header__content__intro--intro{
  color: var(--rui-color-text-secondary);
  font-weight: 400;
  margin-bottom: 12px;
}
/* search bar */
[data-vp-component="search-input"] .vp-search-input__input {
  border: 1px solid var(--rui-color-lowest-gray);
  box-shadow: var(--rui-shadow-inset);
}
[data-vp-component="search-input"] .vp-search-input__input:hover, [data-vp-component="search-input"] .vp-search-input__input:focus {
  border: 1px solid var(--rui-color-low-gray);
}
.vp-search-bar__input-container:is(:focus-within,:has([data-vp-component=dropdown][data-vp-variant=searchbar]:has([aria-expanded=true]))) {
  border-color: var(--K15t-color-neutral-50);
}
/* footer */
[data-vp-component="footer"].hc-footer-background-color {
  padding: 24px;
  background-color: var(--K15t-color-neutral-25);
  border-top: none;
  --_foreground: var(--rui-color-text-secondary);
}
[data-vp-component="footer"] .vp-container {
  justify-content: center;
}
[data-vp-component="footer"] .footer__logo {
  display: none;
}
[data-vp-component="footer"] .footer__language-picker-container {
  display: flex;
  justify-content: center;
}
[data-vp-component="footer"] .footer__language-picker-container {
  display: none;
}
/* toc */
/* styles for toc(table of content) are set in the custom js because it is needed to access shadow-root of custom component <vp-toc> */

/* article page */
/* left menu */
.vp-article__aside-left__inner {
  top: calc(var(--vpt-theme-header-height) + var(--vpt-theme-scroll-offset));
}
.vp-tree-item--active>.vp-tree-item__header {
  background-color: var(--K15t-color-blue-50);
}
.vp-tree-item--with-hover-effect.vp-tree-item--active>.vp-tree-item__header {
  color: var(--rui-color-text-blue);
}
/* accordion button */
.vp-accordion-link-group:not(:focus):focus-within {
  border-color: var(--rui-color-lowest-gray);
}

/* tile buttons on top page */
[data-vp-page-template="content-source"] .tile--topics {
  border-radius: 8px;
  border: none;
  box-shadow: var(--rui-shadow-l);
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 20px 40px;
}
[data-vp-page-template="content-source"] .tile--custom-svg {
  grid-column-start: 1;
  grid-column-end: 3;
  justify-self: center;
  margin: 8px 0 16px 0;
}
[data-vp-page-template="content-source"] .tile__headline {
  grid-column-start: 1;
  grid-column-end: 3;
  color: var(--rui-color-primary);
}
[data-vp-page-template="content-source"] .tile__description {
  grid-column-start: 1;
  grid-column-end: 3;
}

/* tile buttons on top page : tablet or smaller */
@media (max-width:1024px){
  [data-vp-page-template="content-source"] .tile--topics {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-template-rows: 1fr 1fr;    
  }
  [data-vp-page-template="content-source"] .tile--custom-svg {
    grid-colum-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
    align-self: center;
    margin: 0 16px 0 0;
  }
  [data-vp-page-template="content-source"] .tile__headline,
  [data-vp-page-template="content-source"] .tile__description {
    grid-column-start: 2;
    grid-column-end: 3;
  }
}