/* assets/css/line-above-text.css */

/* Base styles for elements with line above */
.has-line-above {
    position: relative;
}

.has-line-above::before {
    content: '';
    display: block;
    width: 42px;
    height: 6px;
    margin-bottom: 25px;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Dark line style */
.has-line-above-dark::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='6' viewBox='0 0 42 6' fill='none'%3E%3Cpath d='M36.3333 3C36.3333 4.47276 37.5272 5.66666 39 5.66666C40.4728 5.66666 41.6667 4.47276 41.6667 3C41.6667 1.52724 40.4728 0.33333 39 0.33333C37.5272 0.33333 36.3333 1.52724 36.3333 3ZM0 3L4.37114e-08 3.5L39 3.5L39 3L39 2.5L-4.37114e-08 2.5L0 3Z' fill='%236EC5EF'/%3E%3C/svg%3E");
}

/* Light line style */
.has-line-above-light::before {
    background-image: url("data:image/svg+xml,%3Csvg width='42' height='6' viewBox='0 0 42 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36.3333 3C36.3333 4.47276 37.5272 5.66666 39 5.66666C40.4728 5.66666 41.6667 4.47276 41.6667 3C41.6667 1.52724 40.4728 0.33333 39 0.33333C37.5272 0.33333 36.3333 1.52724 36.3333 3ZM0 3L4.37114e-08 3.5L39 3.5L39 3L39 2.5L-4.37114e-08 2.5L0 3Z' fill='white'/%3E%3C/svg%3E");
}

/* Alternative approach using block style variations */
.is-style-line-above-dark {
    position: relative;
}

.is-style-line-above-dark::before {
    content: '';
    display: block;
    width: 42px;
    height: 6px;
    margin-bottom: 25px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='6' viewBox='0 0 42 6' fill='none'%3E%3Cpath d='M36.3333 3C36.3333 4.47276 37.5272 5.66666 39 5.66666C40.4728 5.66666 41.6667 4.47276 41.6667 3C41.6667 1.52724 40.4728 0.33333 39 0.33333C37.5272 0.33333 36.3333 1.52724 36.3333 3ZM0 3L4.37114e-08 3.5L39 3.5L39 3L39 2.5L-4.37114e-08 2.5L0 3Z' fill='%236EC5EF'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.is-style-line-above-light {
    position: relative;
}

.is-style-line-above-light::before {
    content: '';
    display: block;
    width: 42px;
    height: 6px;
    margin-bottom: 25px;
    background-image: url("data:image/svg+xml,%3Csvg width='42' height='6' viewBox='0 0 42 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36.3333 3C36.3333 4.47276 37.5272 5.66666 39 5.66666C40.4728 5.66666 41.6667 4.47276 41.6667 3C41.6667 1.52724 40.4728 0.33333 39 0.33333C37.5272 0.33333 36.3333 1.52724 36.3333 3ZM0 3L4.37114e-08 3.5L39 3.5L39 3L39 2.5L-4.37114e-08 2.5L0 3Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .has-line-above::before,
    .is-style-line-above-dark::before,
    .is-style-line-above-light::before {
        width: 32px;
        height: 4.5px;
        margin-bottom: 20px;
    }
}