/* Base style for all admonitions */
.admonition {
    padding: 1rem;
    border-radius: 8px;
    font-size: 1rem;
    margin: 1rem 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background-color: transparent; /* Transparent background */
    border: 1px solid transparent; /* Thin border for content */
}

/* Style for the admonition title (p.admonition-title) */
.admonition .admonition-title {
    font-weight: bold;
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
    text-transform: capitalize; /* Ensure the title starts with a capital letter */
}

/* Danger admonition (using pico-color-red-400) */
.admonition.danger {
    border-left: 4px solid var(--pico-color-red-400); /* Red border */
    border-top: 1px solid var(--pico-color-red-400); /* Thin border */
    border-right: 1px solid var(--pico-color-red-400); /* Thin border */
    border-bottom: 1px solid var(--pico-color-red-400); /* Thin border */
    color: var(--pico-color-red-400); /* Text color matches the border */
}

.admonition.danger .admonition-title {
    color: var(--pico-color-red-400); /* Title matches the border color */
}

/* Warning admonition (using pico-color-amber-200) */
.admonition.warning {
    border-left: 4px solid var(--pico-color-amber-200); /* Amber border */
    border-top: 1px solid var(--pico-color-amber-200); /* Thin border */
    border-right: 1px solid var(--pico-color-amber-200); /* Thin border */
    border-bottom: 1px solid var(--pico-color-amber-200); /* Thin border */
    color: var(--pico-color-amber-200); /* Text color matches the border */
}

.admonition.warning .admonition-title {
    color: var(--pico-color-amber-200); /* Title matches the border color */
}

/* Note admonition (using Pico color jade-100) */
.admonition.note {
    border-left: 4px solid var(--pico-color-jade-300); /* Jade border */
    border-top: 1px solid var(--pico-color-jade-300); /* Thin border */
    border-right: 1px solid var(--pico-color-jade-300); /* Thin border */
    border-bottom: 1px solid var(--pico-color-jade-300); /* Thin border */
    color: var(--pico-color-jade-700);
}

.admonition.note .admonition-title {
    color: var(--pico-color-jade-300); /* Title matches the border color */
}

/* Important admonition (using Pico color purple-300) */
.admonition.important {
    border-left: 4px solid var(--pico-color-purple-300); /* Purple border */
    border-top: 1px solid var(--pico-color-purple-300); /* Thin border */
    border-right: 1px solid var(--pico-color-purple-300); /* Thin border */
    border-bottom: 1px solid var(--pico-color-purple-300); /* Thin border */
    color: var(--pico-color-purple-700);
}

.admonition.important .admonition-title {
    color: var(--pico-color-purple-300); /* Title matches the border color */
}

.hlg {
    color: var(--pico-color-jade-100); /* Green color */
}

.hlp {
    color: var(--pico-color-purple-300); /* Purple color */
}