/* All classes are prefixed with 'promo-block-' to prevent conflicts */

/* The main container for the content block */
.promo-block-wrapper {
    /* The component will inherit the font from the host page */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

/* This class constrains the width of the text block */
.promo-block-text-container {
    max-width: 31.25rem; /* Equivalent to 500px */
    text-align: center;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* This container holds the buttons and creates the cradle effect */
.promo-block-button-cradle {
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

/* This pseudo-element creates the decorative line effect */
.promo-block-button-cradle::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5px;
    border-left: 2px solid #036234;
    border-right: 2px solid #036234;
    border-bottom: 2px solid #036234;
    border-radius: 0 0 4px 4px;
}

/* Base styling for all buttons in this component */
.promo-block-btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    margin: 0 0.5rem;
    border-radius: 0.375rem;
    text-decoration: none;
    font-weight: 500;
    color: #212529;
    background-color: #e9ecef;
    transition: color 0.4s ease;
    position: relative;
    overflow: hidden;
    z-index: 1; 
}

/* ACCESSIBILITY: Add a visible focus state for keyboard navigation */
.promo-block-btn:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
}

/* On hover for the green button, the text color changes to white */
.promo-block-btn-negative-1:hover, .promo-block-btn-negative-1:focus-visible {
    color: #fff;
}

/* On hover for the gold buttons, the text should remain dark */
.promo-block-btn-negative-2:hover, .promo-block-btn-negative-2:focus-visible {
    color: #212529;
}

/* The text inside the button needs a higher z-index to stay on top */
.promo-block-btn span {
    position: relative;
    z-index: 2;
}

/* Pseudo-element for the colored bar and side-swipe animation */
.promo-block-side-swipe::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 10px; /* Initial width of the colored bar */
    transition: width 0.4s ease;
    z-index: -1;
}

/* On hover or focus, the pseudo-element expands to fill the button */
.promo-block-side-swipe:hover::before, .promo-block-side-swipe:focus-visible::before {
    width: 100%;
}

/* Green button style */
.promo-block-btn-negative-1.promo-block-side-swipe::before {
    background-color: #036234; 
}

/* Gold button style (for Apply and Visit) */
.promo-block-btn-negative-2.promo-block-side-swipe::before {
    background-color: #ffc107;
}