/* --- HEADER STYLING --- */

/* Centers the main page title (H1) and makes it sleek */
div.col-md-9 h1:first-of-type {
    text-align: center;
    font-size: 60px;
    font-weight: 300;
}

/* Centers the first paragraph/subtitle under the H1 */
div.col-md-9>p:first-of-type {
    text-align: center;
}

/* Keeps note/warning titles left-aligned even if text is centered */
div.col-md-9 p.admonition-title:first-of-type {
    text-align: left;
}

/* --- PERMALINK HOVER EFFECT --- */

/* Hide permalinks by default on all headings */
.headerlink {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    margin-left: 10px;
}

/* Show permalink only when the mouse hovers over the heading */
h1:hover .headerlink,
h2:hover .headerlink,
h3:hover .headerlink,
h4:hover .headerlink,
h5:hover .headerlink,
h6:hover .headerlink {
    opacity: 1;
}

/* Specifically hide it on the main centered H1 title (optional) */
div.col-md-9 h1:first-of-type .headerlink {
    display: none;
}

/* --- BOXES & CARDS --- */

/* Hides the title bar for specific "block" style notes */
div.admonition.block>.admonition-title {
    display: none;
}

/* Custom colors for 'New' callouts (Green) */
.admonition.new,
details.new {
    color: var(--bs-success-text-emphasis);
    background-color: var(--bs-success-bg-subtle);
    border-color: var(--bs-success-border-subtle);
}

/* Custom colors for 'Example' callouts (Blue) */
.admonition.example,
details.example {
    color: var(--bs-info-text-emphasis);
    background-color: var(--bs-info-bg-subtle);
    border-color: var(--bs-info-border-subtle);
}

/* Adds breathing room to definition lists */
dd {
    padding-left: 20px;
}

/* Centers and scales icons within cards */
.card-body svg {
    width: 100%;
    padding: 0 50px;
    height: auto;
}

/* --- FULL-WIDTH HOMEPAGE --- */

/* Hides the left sidebar and expands content to 100% on the homepage */
body.homepage>div.container>div.row>div.col-md-3 {
    display: none;
}

body.homepage>div.container>div.row>div.col-md-9 {
    margin-left: 0;
    flex: 0 0 100%;
    max-width: 100%;
}