/* Desktop Override for Contacts Email Display
   This file MUST load AFTER contacts-mobile-fix.css
   to properly override the mobile styles */

@media screen and (min-width: 769px) {
    /* Force email addresses to display horizontally on desktop */
    #contacts-list a[href^="mailto"],
    #contacts-list > div a[href^="mailto"],
    #contacts-list .flex a[href^="mailto"],
    #contacts-list a {
        word-break: normal !important;
        overflow-wrap: normal !important;
        -ms-word-break: normal !important;
        white-space: normal !important;
        display: inline !important;
        max-width: none !important;
        font-size: inherit !important;
    }
    
    /* Target any flex containers with email links */
    #contacts-list .flex > a[href^="mailto"],
    #contacts-list .flex > a,
    #contacts-list .flex > span {
        word-break: normal !important;
        overflow-wrap: normal !important;
        -ms-word-break: normal !important;
        max-width: none !important;
        flex: initial !important;
        min-width: auto !important;
    }
    
    /* Additional specificity - target any div containing emails */
    #contacts-list div a[href^="mailto"] {
        word-break: normal !important;
        overflow-wrap: normal !important;
        -ms-word-break: normal !important;
    }
    
    /* Make contact action buttons more compact on desktop */
    #contacts-list button,
    #contacts-list .contact-card button {
        padding: 8px 16px !important;
        font-size: 14px !important;
        min-width: auto !important;
        max-width: 180px !important;
    }
    
    /* Align button container to the right with significant spacing */
    #contacts-list .contact-card > div:last-child,
    #contacts-list > div > div:last-child {
        justify-content: flex-end !important;
        margin-left: auto !important;
        padding-left: 40px !important;
        gap: 12px !important;
    }
}