/* WC Shortcode Replacer - Frontend Styles */
/* Add this CSS to your theme to ensure product links are properly styled */

/* Basic link styling for replaced product shortcodes */
.wc-product-link {
    color: #2271b1 !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
    border-bottom: 1px solid #2271b1 !important;
    transition: all 0.2s ease !important;
}

/* Hover state */
.wc-product-link:hover {
    color: #135e96 !important;
    text-decoration: none !important;
    border-bottom: 2px solid #135e96 !important;
    background-color: rgba(34, 113, 177, 0.05) !important;
}

/* Focus state for accessibility */
.wc-product-link:focus {
    outline: 2px solid #2271b1 !important;
    outline-offset: 2px !important;
    text-decoration: none !important;
}

/* Override theme styles that might hide links */
p .wc-product-link,
div .wc-product-link,
span .wc-product-link,
li .wc-product-link {
    color: #2271b1 !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
}

/* Ensure links are visible in different contexts */
.entry-content .wc-product-link,
.post-content .wc-product-link,
.page-content .wc-product-link,
.woocommerce .wc-product-link {
    color: #2271b1 !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
}

/* Override common theme link styles */
a.wc-product-link {
    color: #2271b1 !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
}

/* Make sure links stand out from regular text */
.wc-product-link:not(:hover):not(:focus) {
    border-bottom: 1px solid #2271b1 !important;
}

/* Alternative styling for dark themes */
@media (prefers-color-scheme: dark) {
    .wc-product-link {
        color: #4a9eff !important;
        border-bottom-color: #4a9eff !important;
    }
    
    .wc-product-link:hover {
        color: #66b3ff !important;
        border-bottom-color: #66b3ff !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .wc-product-link {
        color: #0000ff !important;
        text-decoration: underline !important;
        font-weight: bold !important;
    }
}

/* Print styles */
@media print {
    .wc-product-link {
        color: #000 !important;
        text-decoration: underline !important;
        font-weight: normal !important;
    }
    
    .wc-product-link:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}