/* Banner Component
   ========================================================================== */

/**
 * Banner structure and animations
 */

.banner-wrapper {
    width: 100%;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-100%);
    transition: all 0.3s ease;
}

.banner-wrapper.is-visible {
        height: auto;
        opacity: 1;
        transform: translateY(0);
    }

/**
 * Banner styling
 */

.banner {
    position: relative !important;
    overflow: visible !important;
    width: 100%;
    min-height: 52px;
    height: auto;
    padding: 15px 50px 15px 15px;
    background: #fff;
    color: #000;
    font-size: var(--wp--preset--font-size--font-18-px);
    font-family: var(--wp--preset--font-family--titillium-web);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure all text elements use Titillium Web */

.banner p, .banner span, .banner div, .banner a {
        font-family: var(--wp--preset--font-family--titillium-web) !important;
    }

/* Links within banner */

.banner a {
        text-decoration: none;
        transition: -webkit-text-decoration 0.2s ease;
        transition: text-decoration 0.2s ease;
        transition: text-decoration 0.2s ease, -webkit-text-decoration 0.2s ease;
        position: relative;
        padding-right: 24px;
    }

.banner a:hover,
        .banner a:focus {
            text-decoration: underline;
        }

/* Responsive adjustments */

@media (max-width: 768px) {

.banner {
        padding: 15px 40px 15px 15px
}
    }

/**
 * Banner text styling
 */

.banner-text {
    width: 100%;
    font-family: var(--wp--preset--font-family--titillium-web);
}

.banner-text * {
        width: 100%;
        white-space: normal;
        font-size: clamp(14px, 2vw, 18px);
        font-family: var(--wp--preset--font-family--titillium-web) !important;
        font-weight: 400;
    }

.banner-text p {
        font-family: var(--wp--preset--font-family--titillium-web) !important;
        margin: 0;
    }

/**
 * Close button
 */

.banner__close {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: #000;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner__close:hover {
        opacity: 0.6;
    }

.banner__close svg {
        width: 100%;
        height: 100%;
        fill: currentColor;
    }