/* Template element is hidden — only the cloned drill content shows when the swap fires. */
.awmm-template {
    display: none !important;
}

/* The drill-down content is inserted INSIDE your existing #menu container,
   so it inherits background/padding from there. These styles only cover
   the inner structure (back button, list, items). Override freely. */

.awmm-drill {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.awmm-drill__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: transparent !important;
    border: 0;
    cursor: pointer;
    padding: 12px 0;
    margin: 0 15px;
    align-self: stretch;
    font-size: 18px;
    font-family: "Parkinsans", Sans-serif;
    font-weight: bold;
    color: var(--e-global-color-a216aa8) !important;
    fill: var(--e-global-color-a216aa8) !important;
    border-bottom: 1px solid #c25233;
    border-radius: 0 !important;
}

.awmm-drill__back-arrow,
.awmm-drill__link-chevron {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.awmm-drill__title {
    padding: 0 16px 8px;
    font-weight: 600;
}

.awmm-drill__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.awmm-drill__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 18px;
    font-family: "Parkinsans", Sans-serif;
    font-weight: bold;
    color: var(--e-global-color-a216aa8);
    fill: var(--e-global-color-a216aa8);
}

.awmm-drill__link-label {
    flex: 1 1 auto;
}

.awmm-drill__link-chevron {
    display: none;
}

@media (max-width: 767px) {
    .awmm-drill__back,
    .awmm-drill__link {
        font-size: 16px;
    }
}

/* Cross-fade + slight slide animation between original and drilled content.
   The target container itself isn't animated (keeps its background intact);
   only its direct children fade/slide so the swap feels seamless. */
.awmm-target > * {
    transition: opacity 180ms ease, transform 180ms ease;
}

.awmm-target.awmm-is-leaving > * {
    opacity: 0;
}

.awmm-target.awmm-is-leaving--fwd > * {
    transform: translateX(-12px);
}

.awmm-target.awmm-is-leaving--bwd > * {
    transform: translateX(12px);
}

.awmm-target.awmm-is-entering > * {
    opacity: 0;
}

.awmm-target.awmm-is-entering--fwd > * {
    transform: translateX(12px);
}

.awmm-target.awmm-is-entering--bwd > * {
    transform: translateX(-12px);
}