[data-md-color-scheme="slate"] {
    --md-primary-fg-color: #371f69;
    --md-primary-fg-color--light: #553e98;
    --md-primary-fg-color--dark: #371f69;
    --md-accent-fg-color: #bea4e1;
    --md-accent-fg-color--transparent: #bea4e133;
    --md-accent-bg-color: #ede5f8;
    --md-accent-bg-color--light: #e1a38d;

    /* Improve active link visibility in dark mode */
    --md-typeset-a-color: #bea4e1;
    --md-nav-link-color--active: #ede5f8;
}

[data-md-color-scheme="default"] {
    --md-primary-fg-color: #553e98;
    --md-primary-fg-color--light: #bea4e1;
    --md-primary-fg-color--dark: #371f69;
    --md-accent-fg-color: #e6c7a7;
    --md-accent-fg-color--transparent: #e6c7a733;
    --md-accent-bg-color: #ede5f8;
    --md-accent-bg-color--light: #e1a38d;
}

.banner {
    height: 24px; /* Made slightly taller for the warning icon */
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100; /* Increased to ensure it stays above other elements */
    text-align: center;
    background-color: #856404;
    line-height: 24px; /* Vertically center the text */
    font-weight: 500; /* Make text slightly bolder */
}

.banner + .md-header {
    top: 24px; /* Match the banner height */
}

/* Adjust the main content area when banner is present */
.banner ~ .md-main {
    height: calc(100vh - 88px); /* Adjust for banner + header height */
}

.banner a:hover {
    color: #ffffff;
    text-decoration: none;
}