/* =========================================================
   Content Block: Anchor Menu
   JSD Elli
   ========================================================= */

.anchor-menu {
    width: 100%;
}

.anchor-menu__card {
    min-height: var(--anchor-menu-card-min-height);
    padding: var(--anchor-menu-card-padding);
    border-radius: var(--anchor-menu-radius);
    background: var(--anchor-menu-bg);
    box-shadow: var(--anchor-menu-shadow);
}

.anchor-menu__iconwrap {
    display: grid;
    width: var(--anchor-menu-iconwrap-size);
    height: var(--anchor-menu-iconwrap-size);
    margin-bottom: var(--anchor-menu-iconwrap-margin-bottom);
    place-items: center;
    border-radius: var(--radius);
    background: var(--anchor-menu-iconwrap-bg);
    color: var(--anchor-menu-icon-color);
}

.anchor-menu__icon {
    display: block;
    width: var(--anchor-menu-icon-size);
    height: var(--anchor-menu-icon-size);
}

.anchor-menu__title {
    margin: 0 0 var(--anchor-menu-title-margin-bottom);
    color: var(--text);
    font-size: var(--fs-anchor-menu-title);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
}

.anchor-menu__list {
    display: grid;
    gap: var(--anchor-menu-list-gap);
    margin: 0;
    padding: 0;
}

.anchor-menu__item {
    margin: 0;
}

.anchor-menu__link {
    display: inline-flex;
    align-items: center;
    gap: var(--anchor-menu-link-gap);
    color: var(--anchor-menu-link-color);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    text-decoration: underline;
    text-underline-offset: 0.1875rem;
    text-decoration-thickness: 0.08em;
}

.anchor-menu__link:hover {
    color: var(--link-hover);
    text-decoration-thickness: 0.125rem;
}

.anchor-menu__link:focus-visible {
    outline: 0.1875rem solid var(--anchor-menu-focus-color);
    outline-offset: 0.1875rem;
    border-radius: var(--anchor-menu-focus-radius);
    box-shadow: none;
}

.anchor-menu__arrow {
    flex: 0 0 auto;
    width: var(--anchor-menu-arrow-size);
    height: var(--anchor-menu-arrow-size);
}

/* Bootstrap Breakpoint: md >= 768px */
@media (min-width: 768px) {
    .anchor-menu__card {
        min-height: var(--anchor-menu-card-min-height-md);
        padding: var(--anchor-menu-card-padding-md);
    }
}

/* Bootstrap Breakpoint: lg >= 992px */
@media (min-width: 992px) {
    .anchor-menu {
        position: relative;
    }
}