/**
 * Custom Text Selection Styling
 */

/* Style for selected text */
::selection {
    background-color: #cb2420 !important; /* Red background */
    color: white !important; /* White text for better contrast */
}

/* For Firefox */
::-moz-selection {
    background-color: #cb2420 !important; /* Red background */
    color: white !important; /* White text for better contrast */
}

/**
 * Animated Underline for h2 Links
 */

/* Define the animation */
@keyframes underlineAnimation {
    0% {
        width: 0;
        left: 0;
        right: auto;
    }
    50% {
        width: 100%;
        left: 0;
        right: auto;
    }
    100% {
        width: 100%;
        left: 0;
        right: auto;
    }
}

/* Define a more sophisticated animation that grows from center */
@keyframes underlineFromCenter {
    0% {
        width: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    100% {
        width: 100%;
        left: 0;
        transform: translateX(0);
    }
}

/* Define a slick animation that slides from left to right */
@keyframes underlineSlideRight {
    0% {
        width: 0;
        left: 0;
    }
    100% {
        width: 100%;
        left: 0;
    }
}

/* Style for h2 links */
h2 a {
    position: relative;
    text-decoration: none !important;
    display: inline-block;
}

/* Create the animated underline */
h2 a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #cb2420; /* Red underline */
    transition: all 0.3s ease;
    opacity: 0.9;
    border-radius: 1px;
}

/* Trigger the animation on hover */
h2 a:hover {
    color: #cb2420; /* Change text color on hover */
    transition: color 0.3s ease;
}

h2 a:hover::after {
    width: 100%;
    animation: underlineFromRight 0.4s ease forwards;
}

/* Apply to specific heading types if needed */
.wp-block-post-title a,
.wp-block-getwid-template-post-title a {
    position: relative;
    text-decoration: none !important;
}

.wp-block-post-title a::after,
.wp-block-getwid-template-post-title a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #cb2420; /* Red underline */
    transition: all 0.3s ease;
    opacity: 0.9;
    border-radius: 1px;
}

.wp-block-post-title a:hover,
.wp-block-getwid-template-post-title a:hover {
    color: #cb2420; /* Change text color on hover */
    transition: color 0.3s ease;
}

.wp-block-post-title a:hover::after,
.wp-block-getwid-template-post-title a:hover::after {
    width: 100%;
    animation: underlineFromRight 0.4s ease forwards;
}