/*********************************/
/* ----- Admonition Styling --- */
/*********************************/

div.admonition {
    padding: 1rem 1.5rem;
    margin: 2rem 0;
    border-radius: 8px;
    border-left-width: 5px;
    border-left-style: solid;
    background-color: rgba(255, 255, 255, 0.05);
}

p.admonition-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0 0 0.5rem 0;
}

div.admonition.note, div.admonition.seealso, div.admonition.tip {
    border-left-color: var(--color-info);
}
div.admonition.note p.admonition-title,
div.admonition.seealso p.admonition-title,
div.admonition.tip p.admonition-title {
    color: var(--color-info);
}

div.admonition.warning, div.admonition.caution, div.admonition.attention {
    border-left-color: var(--color-warning);
}
div.admonition.warning p.admonition-title,
div.admonition.caution p.admonition-title,
div.admonition.attention p.admonition-title {
    color: var(--color-warning);
}

div.admonition.danger, div.admonition.error {
    border-left-color: var(--color-error);
}
div.admonition.danger p.admonition-title,
div.admonition.error p.admonition-title {
    color: var(--color-error);
}

/*********************************/
/* ---- Topic Directive Card --- */
/*********************************/

aside.sidebar.side-img {
    float: right;
    width: 400px;
    max-width: 40%;
    margin: 0 0 1rem 2rem;
    padding: 0.5rem;
    background-color: var(--color-background-paper);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

aside.sidebar.side-img  .sidebar-title {
    text-align: center;
}

aside.sidebar.side-img  img {
    border-radius: 4px;
    display: block;
}

aside.topic,
div.topic {
    background-color: var(--color-background-paper);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 5px solid var(--color-primary-main);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 2rem auto;
    max-width: 450px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    clear: both; /* Fix for overlapping floated elements */
}

p.topic-title {
    font-family: 'Montserrat', sans-serif;
    color: var(--color-primary-light);
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-align: center;
    word-break: keep-all;
}

aside p {
    text-align: center;
}

aside.topic p:not(.topic-title),
div.topic p:not(.topic-title) {
    font-family: 'Lora', serif;
    color: var(--color-text-primary);
    font-size: 1.25rem;
    margin: 0;
}

aside.topic > :not(p.topic-title) {
    text-align: left;
}

/*********************************/
/* ---- Perl Highlighting ---- */
/*********************************/

.highlight-perl {
    margin-bottom: 2em;
}

.highlight-perl > .highlight > pre {
    background-color: var(--color-background-hover);
    padding: 16px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.highlight-perl > .highlight {
    background-color: transparent;
    background: none !important;
}

.highlight-perl > .highlight > pre > .n, 
.highlight-perl > .highlight > pre > .nn, 
.highlight-perl > .highlight > pre > .n,
.highlight-perl > .highlight > pre > .p{
    color: var(--color-text-primary) !important;
}

.highlight-perl > .highlight > pre > .nb, .k{
    color: var(--color-secondary-light) !important;
}

.highlight-perl > .highlight > pre > .nb, .s{
    color: var(--color-primary-light) !important;
}