/**
 * "My Account" menu icon styles.
 * File: your-child-theme/assets/css/account-icon.css
 *
 * Replaces the "My Account" text menu item with a person icon. Targets
 * the .account-icon CSS class (added alongside .user-logged-in) on that
 * one menu item in Appearance -> Menus, so it does not affect other
 * member-only menu items that also carry .user-logged-in.
 *
 * Icon colour defaults to match the theme accent colour (#C4AB84).
 * Change --account-icon-color to adjust.
 */

:root {
    --account-icon-color: #C4AB84;
    --account-icon-size:  20px;
}

/* Hide the "My Account" text visually but keep it for screen readers */
li.account-icon > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0 !important;     /* hides the "My Account" text visually only;
                                     screen readers still read the text node */
    color: transparent !important;
}

/* Person icon, injected before the (now visually hidden) label */
li.account-icon > a::before {
    content: "";
    display: inline-block;
    width: var(--account-icon-size);
    height: var(--account-icon-size);
    background-color: var(--account-icon-color);
    -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.7 0 4.9-2.2 4.9-4.9S14.7 2.2 12 2.2 7.1 4.4 7.1 7.1 9.3 12 12 12zm0 2.4c-3.3 0-9.8 1.6-9.8 4.9v1.6c0 .7.5 1.2 1.2 1.2h17.2c.7 0 1.2-.5 1.2-1.2v-1.6c0-3.3-6.5-4.9-9.8-4.9z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.7 0 4.9-2.2 4.9-4.9S14.7 2.2 12 2.2 7.1 4.4 7.1 7.1 9.3 12 12 12zm0 2.4c-3.3 0-9.8 1.6-9.8 4.9v1.6c0 .7.5 1.2 1.2 1.2h17.2c.7 0 1.2-.5 1.2-1.2v-1.6c0-3.3-6.5-4.9-9.8-4.9z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: opacity 0.15s ease;
}

li.account-icon > a:hover::before {
    opacity: 0.75;
}

/* On mobile (Divi's mobile menu breakpoint), show the "My Account" text
   label instead of the icon, since hover tooltips don't work on touch. */
@media only screen and (max-width: 980px) {
    li.account-icon > a {
        font-size: inherit !important;
        color: inherit !important;
    }

    li.account-icon > a::before {
        display: none;
    }
}