/*
 * App-level overrides. Loaded after the theme's style.css.
 */

/* ------------------------------------------------------------------ toastr */
/*
 * The theme paints .toast-success with --primary (blue), right-aligns the text
 * and caps the width at 250px, which reads as an error rather than a success.
 */
/*
 * toastr draws its status icon as a background image on the LEFT
 * (background-position: 15px center) and reserves padding-left: 50px for it.
 * The theme moves that padding to the right, so the text lands on top of the
 * icon. Put both back on the left and keep the right side for the close button.
 */
#toast-container > div {
    width: auto;
    min-width: 17rem;
    max-width: 24rem;
    padding: 0.9375rem 2.25rem 0.9375rem 3.25rem;
    background-position: 1rem center;
    background-repeat: no-repeat;
    border-radius: 0.5rem;
    text-align: left;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
    opacity: 1;
}

#toast-container > div:hover {
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.24);
}

#toast-container > .toast-success {
    background-color: #1a9d6a;
}

#toast-container > .toast-error {
    background-color: #d0412e;
}

#toast-container > .toast-warning {
    background-color: #e08b2e;
}

#toast-container > .toast-info {
    background-color: #1f7fd4;
}

#toast-container .toast-message {
    font-size: 0.8125rem;
    line-height: 1.45;
}

/*
 * The default close button floats inside the text flow, which pushes the
 * message around. Pin it to the corner instead (the toast is position:relative).
 */
#toast-container .toast-close-button {
    position: absolute;
    float: none;
    top: 0.5rem;
    right: 0.625rem;
    color: #fff;
    font-size: 1.125rem;
    font-weight: normal;
    line-height: 1;
    opacity: 0.85;
    text-shadow: none;
}

#toast-container .toast-close-button:hover,
#toast-container .toast-close-button:focus {
    color: #fff;
    opacity: 1;
}

/*
 * Top-right, but pushed below the fixed header (--dz-header-height is 5rem)
 * so the toast never covers the profile menu.
 */
#toast-container.toast-top-right {
    top: 5.75rem;
    right: 1rem;
}

#toast-container.toast-bottom-right {
    right: 1rem;
    bottom: 1rem;
}

/* --------------------------------------------------------------- faq list */

#faq-list {
    counter-reset: faq;
}

#faq-list .js-faq {
    counter-increment: faq;
}

#faq-list .js-faq-question::before {
    content: "Q" counter(faq) ": ";
    font-weight: 600;
    opacity: 0.6;
}

.js-faq-toggle {
    cursor: pointer;
}

.js-faq-toggle .js-faq-caret {
    transition: transform 0.15s ease-in-out;
}

.js-faq-toggle[aria-expanded="true"] .js-faq-caret {
    transform: rotate(90deg);
}

/* ------------------------------------------------------------- editor */
/*
 * CKEditor 5 starts at the height of its content, which makes an empty post
 * look broken. Give it a working area and let it grow from there.
 */
.ck-editor__editable_inline {
    min-height: 20rem;
}

.ck.ck-editor {
    width: 100%;
}