/* ------------------------------------------------------------ */
/* Docs common - palette                                          */
/* ------------------------------------------------------------ */

.docs-section-landing,
.docs-section-nav,
.docs-leaf {
    --zato-docs-heading: #1a1f36;
    --zato-docs-text: #484848;
    --zato-docs-muted: #3e424e;
    --zato-docs-link: #006fbf;
    --zato-docs-divider: #e7e8eb;
    --zato-docs-nav-header: #3e424e;
    --zato-docs-nav-separator: #c9d3dd;
}

/* ------------------------------------------------------------ */
/* Docs common - h1                                               */
/* ------------------------------------------------------------ */

/* The host page styles headings with stronger selectors and !important,
   so these rules have the same weight. */

div.docs-content.docs-section-landing h1,
.docs-leaf .docs-leaf-article h1 {
    margin-top: 16px;
    margin-bottom: 8px;
    padding-bottom: 0;
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    color: var(--zato-docs-heading);
}

/* ------------------------------------------------------------ */
/* Docs common - shared nav vocabulary                            */
/* ------------------------------------------------------------ */

/* Rows, slots, toggles and links shared by the left nav and the
   on-this-page list, per-side classes define only their own layout. */

.docs-nav-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.docs-nav-row .docs-nav-link {
    flex: 1;
}

/* The empty slot keeps links at one left edge in rows without a toggle. */

.docs-nav-slot {
    flex: none;
    width: 8px;
}

.docs-nav-toggle {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 8px;
    height: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--zato-docs-muted);
    background: transparent;
    cursor: pointer;
    transition: color 0.06s;
}

.docs-nav-toggle:hover {
    color: var(--zato-docs-link);
    transition-delay: 0.05s;
}

.docs-nav-toggle svg {
    width: 8px;
    height: 8px;
}

.docs-nav-icon-open {
    display: none;
}

.docs-nav-toggle-open .docs-nav-icon-closed {
    display: none;
}

.docs-nav-toggle-open .docs-nav-icon-open {
    display: block;
}

.docs-nav-link {
    display: block;
    font-size: 14px;
    line-height: 20px;
    color: var(--zato-docs-text);
    text-decoration: none;
    transition: color 0.06s;
}

/* The host page recolors every visited link, these links stay put. */

.docs-nav-link:visited {
    color: var(--zato-docs-text);
}

.docs-nav-link:hover {
    color: var(--zato-docs-link);
    transition-delay: 0.05s;
}

/* A branch label is not a link, it toggles its branch in place. */

.docs-nav-branch-label {
    cursor: pointer;
}

.docs-nav-link-active,
.docs-nav-link-active:hover,
.docs-nav-link-active:visited {
    color: var(--zato-docs-link);
}

.docs-nav-hidden {
    display: none;
}

/* ------------------------------------------------------------ */
/* Docs common - section nav                                      */
/* ------------------------------------------------------------ */

.docs-section-nav-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Only the left nav bolds the current page. */

.docs-section-nav .docs-nav-link-active {
    font-weight: 700;
}

.docs-section-nav-divider {
    height: 1px;
    margin: 20px 0 12px;
    background: var(--zato-docs-nav-separator);
}

.docs-section-nav-children {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0 0 0 24px;
    overflow: hidden;
}

/* A branch nested inside another branch indents less, so third-level labels keep their width. */
.docs-section-nav-children .docs-section-nav-children {
    padding-left: 16px;
}

/* The gap above the list lives inside it, so it collapses along with the height. */
.docs-section-nav-children > li:first-child {
    padding-top: 12px;
}

/* The section nav hides branches by height, not display, so their height
   can animate - the shared display-based rule stays for the leaf page list. */
.docs-section-nav-children.docs-nav-hidden {
    display: flex;
    height: 0;
}

/* One look for every sidebar header - the nav groups and the on-this-page list. */

.docs-section-nav-header,
.docs-leaf-toc-header {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-transform: uppercase;
    color: var(--zato-docs-nav-header);
}

.docs-section-nav-header {
    margin: 0 0 12px;
    padding: 0;
}