/* This file contains all of Instabase's CSS-related changes to the Relearn theme for Hugo. */

:root {
    /* Use Roboto instead of the Instabase-standard Gilroy as our main typeface because:
      - It's what the Instabase app's GUI uses
      - It's free (Gilroy isn't)
      - It's easier to read than Gilroy for body text */
    --MAIN-font: "Roboto";

    /* Roboto Mono doesn't look much like a monospace font, so use
    IBM Plex Mono instead, which is listed in a (possibly obsolete?) Confluence
    document about branding as being one of Instabase's official typefaces. */
    --CODE-font: "IBM Plex Mono";
    
    /* change notice (a.k.a. callout) colors to match colors from IB's branding scheme */
    --BOX-NOTE-color: #699BD2;    /* blue from IB's branding */
    --BOX-TIP-color: #34B785;     /* green from IB's branding */
    --BOX-INFO-color: #8463CE;    /* purple from IB's branding */
    --BOX-WARNING-color: #EE4823; /* red from IB's branding */
}

/* Some settings below require the `!important` keyword, because the designer of
the the Relearn Hugo theme didn't intend for certain things to be overridden.
That keyword forces whatever override it follows to be effective. */

/* For all headers, turn off all-caps and tighten up vertical line spacing. */
h1,h2,h3,h4,h5 {
    text-transform: none;
    line-height: 1.25;
}

/* Set sensible sizes for all headers. The Relearn theme's default sizes are weird.
We also have to set sizes for monospace text (i.e., text with the `code` class) within
headers, because otherwise it gets shrunk down to the normal size of monospace text
used outside of headers. */
h2 {
    font-size: 2.2rem;
}

h2 code {
    font-size: 2.2rem;
}

h3 {
    font-size: 1.8rem;
}

h3 code {
    font-size: 1.8rem;
}

h4 {
    font-size: 1.4rem;
}

h4 code {
    font-size: 1.4rem;
}

h5 {
    font-size: 1.2rem;
}

h5 code {
    font-size: 1.2rem;
}

/* Make tables less cramped by adding more vertical space between lines. */
pre {
    line-height: 1.3
}

/* Add vertical spacing between ToC lines to match body text. */
#TableOfContents {
    font-size: inherit !important;
}

/* Remove the bullets from the unordered list that forms the ToC. */
#TableOfContents ul {
    list-style-type: none;
}

/* Make the expandable ToC label at the top of each page stand out by being bold. */
.expand > label {
    font-weight: bold !important;
}

/* Enlarge font for page descriptions when a page lists its child pages. 
See `/docs/infra-admin/` */
.children-li p {
    font-size: inherit !important;
}

/* Push the side nav bar twisty icon slightly to the right,
and make it the same color whether it's selected or not. */
#sidebar input.toggle {
    left: 1.5rem !important;
    color: var(--INTERNAL-MENU-SECTIONS-LINK-color) !important;
}

/* Push the side nav bar text slightly to the right */
#sidebar ul.topics li a {
    margin-left: 1rem !important;
}

/* Make the version picker dropdown (defined in /layouts/partials/logo.html) black
instead of the theme's default gray */
#version-picker-container > form > select {
    color: var(--INTERNAL-MAIN-TEXT-color);
}

#version-picker-container > form > select:hover {
    color: var(--INTERNAL-MAIN-TEXT-color);
}

/* Reduce vertical whitespace between "Table of Contents" header and the first ToC entry */
nav#TableOfContents > ul {
    margin-top: 0;
}

/* Reduce vertical whitespace between "Table of Contents" header and the first ToC entry */
nav#TableOfContents {
    padding-top: 0 !important;
}