/*
Plugin CSS: Read More - Hx Devs
*/

/* Estilo para a parte inicial, para criar o efeito de "fade" e o corte */
.hxd-read-more-wrapper .hxd-read-more-initial { /* Nova classe */
    position: relative;
    max-height: 800px; /* AJUSTE CONFORME NECESSÁRIO */
    overflow: hidden;

    /* Gradiente */
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    transition: max-height 0.5s ease-out, mask-image 0.5s ease-out;
}

/* Estilo quando o conteúdo é expandido (removido pelo JS) */
.hxd-read-more-wrapper .hxd-read-more-initial.expanded { /* Nova classe */
     max-height: none !important;
     overflow: visible !important;
     mask-image: none !important;
     -webkit-mask-image: none !important;
     transition: max-height 0.5s ease-out, mask-image 0.5s ease-out;
}


/* Estilo para a parte escondida */
.hxd-read-more-wrapper .hxd-read-more-hidden { /* Nova classe */
    display: none; /* ESSENCIAL */
}

/* Estilo do botão 'Leia Mais' */
.hxd-read-more-button {
    display: block !important;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: #0073aa;
    color: white !important;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    text-align: center;
    transition: background-color .3s 
ease !important;
}

.hxd-read-more-button:hover { /* Nova classe */
    background-color: #005177;
}

/* Estilo do botão quando ele está escondido (após o clique) */
.hxd-read-more-button.hidden { /* Nova classe */
    display: none;
}

/* Opcional: Estilo para o wrapper geral */
.hxd-read-more-wrapper { /* Nova classe */
    position: relative;
}

/* Se você adicionar um SVG de seta, pode estilizá-lo assim: */
.hxd-read-more-button svg {
    vertical-align: middle; /* Alinha a seta com o texto */
    margin-left: 8px; /* Espaço entre o texto e a seta */
    width: 10px; /* Ajuste o tamanho */
    height: 10px; /* Ajuste o tamanho */
}