/* Sci-Compiler overrides on top of the lotusdocs theme.
   Loaded through [params] custom_css in hugo.toml. */

/* ------------------------------------------------------------------------
   Block pictures used as page icons (layouts/partials/docs/page-icon.html).
   The <img> is wrapped in an <i class="icon-img"> so it reuses the theme's
   icon box in the sidebar / title / cards. The block icons already carry
   their own coloured rounded square, so the theme's grey tile behind the
   glyph is removed.
   ------------------------------------------------------------------------ */
i.icon-img {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background-color: transparent !important;
    font-style: normal;
    line-height: 1;
}

i.icon-img img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

/* sidebar, first level (guide sections + "Blocks") */
.sidebar-menu li > button > i.icon-img,
.sidebar-menu li > a.sidebar-root-link > i.icon-img {
    min-width: 36px;
    width: 36px;
    height: 36px;
}
.sidebar-menu li > button > i.icon-img img,
.sidebar-menu li > a.sidebar-root-link > i.icon-img img {
    width: 28px;
    height: 28px;
}

/* sidebar, nested sections (block categories / sub categories) */
.sidebar-menu li.nested > button > i.icon-nested {
    min-width: 28px;
    width: 28px;
    height: 28px;
    font-size: 18px;
}
.sidebar-menu li.nested > button > i.icon-nested img {
    width: 24px;
    height: 24px;
}

/* sidebar, leaf pages (single blocks): small picture before the title */
.sidebar-menu a.sidebar-nested-link {
    align-items: center !important;
}
.sidebar-menu a.sidebar-nested-link > i.icon-leaf {
    min-width: 20px;
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
}
.sidebar-menu a.sidebar-nested-link > i.icon-leaf img {
    width: 20px;
    height: 20px;
    border-radius: 3px;
}

/* page title (params.docs.titleIcon) */
i.title-icon.icon-img img {
    width: 40px;
    height: 40px;
}

/* list / home cards */
i.icon-card.icon-img {
    width: 40px;
    height: 40px;
}
i.icon-card.icon-img img {
    width: 40px;
    height: 40px;
}

/* ------------------------------------------------------------------------
   404 page (layouts/404.html)
   ------------------------------------------------------------------------ */
.error-404 {
    max-width: 960px;
    padding: 3rem 0 4rem;
}
.error-404-code {
    color: var(--feature-icon-color);
    font-size: 7rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 0.5rem;
}

/* ------------------------------------------------------------------------
   "N ready-to-use blocks" banner on the Blocks list page
   (layouts/docs/list.html, front matter blockCount: true)
   ------------------------------------------------------------------------ */
.block-count {
    gap: 0.25rem 0;
    background-color: transparent;
    color: var(--body-color);
}
.block-count .para {
    opacity: 0.75;
}
/* same accent as the card icons: follows niprimary in light and dark mode */
.block-count-number {
    color: var(--feature-icon-color);
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}