/*
 T h*eme Name: Blog persoal de @roicou
 Theme URI: https://roicou.gal
 Author: Roi
 Author URI: https://roicou.gal
 Description: A custom dark theme for my personal blog. Minimalist, Bootstrap-based and ready for content.
 Version: 1.0.1
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Tags: blog, dark, minimalist, bootstrap, personal
 Text Domain: blog-persoal-roicou
 */

/*
 * ========================================================================
 * Custom Theme Styles
 * ========================================================================
 */

/* -- 1. Global & Content Link Styles -- */
a {
    color: #ced4da;
    /* Bootstrap's gray-400 */
    text-decoration: underline;
    transition: all 0.2s ease-in-out;
}

a:hover,
a:focus {
    color: #ffffff;
    text-decoration: underline;
}

.entry-content a {
    text-decoration: underline;
    /* text-decoration-style: dotted; */
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.entry-content a:hover,
.entry-content a:focus {
    text-decoration-style: solid;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    text-decoration: none;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
    text-decoration: underline;
}

.btn:hover,
.btn:focus {
    text-decoration: none;
}

/* -- 2. Navigation Menu Styles -- */
.navbar-nav .nav-link {
    text-decoration: none;
}

.navbar-nav .nav-link.active {
    color: #ffffff;
    font-weight: 500;
    background-color: transparent !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: #ffffff;
    background-color: transparent !important;
}

/* -- 3. Masonry Card Styles -- */
.card {
    border: none;
    background-color: #2c3034;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover {
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
}


.card .card-img-top {
    border-radius: 0.25rem 0.25rem 0 0;
}

/* -- 4. Pagination Styles -- */
.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pagination .page-numbers {
    display: block;
    padding: 0.5rem 1rem;
    border: 1px solid #495057;
    border-radius: 0.25rem;
    color: #ced4da;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.pagination .page-numbers:hover,
.pagination .page-numbers:focus {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: #6c757d;
}

.pagination .page-numbers.current {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #6c757d;
    color: #ffffff;
    font-weight: 500;
}

.pagination .page-numbers.dots {
    border: none;
    background: none;
}

.pagination-wrapper .page-numbers {
    margin: 0 4px;
}

.pagination-wrapper .page-numbers.current {
    font-weight: bold;
}


/* -- 5. Mastodon Stats Styles -- */
.mastodon-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9em;
    float: left;
    /* width: 100%; */
}

.mastodon-stats .stats-group {
    display: flex;
    gap: 0.8rem;
    color: #adb5bd;
}

/* -- Blog Card Image Aspect Ratio -- */
.card .card-img-top {
    aspect-ratio: 800 / 500;
    /* Proporción 8:5, como nuestro image_size */
    object-fit: cover;
    /* Recorta la imagen para que llene el espacio sin deformarse */
    width: 100%;
}


/*
 * ========================================================================
 * Toot Card Styles
 * ========================================================================
 */

.toot-card .card-body {
    display: flex;
    flex-direction: column;
    /* This ensures the footer stays at the bottom */
}

.toot-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    /* Makes the avatar a perfect circle */
    object-fit: cover;
}

.toot-display-name {
    font-size: 1.1em;
    font-weight: 600;
}

.toot-username {
    font-size: 0.9em;
}

.toot-footer {
    width: 100%;
}

.toot-date {
    font-size: 0.8em;
}


.mastodon-logo {
    margin-left: auto;
    display: block;
}

.toot-header {
    width: 100%;
}


/*
 * ========================================================================
 * Mastodon Horizontal Scroller Styles
 * ========================================================================
 */

.mastodon-scroll-wrapper {
    overflow-x: auto;
    /* The magic for horizontal scrolling */
    overflow-y: hidden;
    white-space: nowrap;
    /* Prevents cards from wrapping to the next line */
    -webkit-overflow-scrolling: touch;
    /* Smooth scrolling on iOS */
    padding-bottom: 1rem;
    /* Space for the scrollbar so it doesn't overlap content */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.mastodon-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.mastodon-scroll-wrapper {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.mastodon-scroll-inner {
    display: flex;
    gap: 1.5rem;
}

.mastodon-url {
    float: left;
}

.mastodon-scroll-inner>div[class*="col-"] {
    flex: 0 0 auto;
    /* Don't shrink, don't grow, base size is auto */
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 90%;
    /* Default width for mobile (shows 1+ card) */
}

/* Responsive widths for the cards inside the scroller */
@media (min-width: 768px) {
    .mastodon-scroll-inner>div[class*="col-"] {
        width: 45%;
        /* Shows 2+ cards on tablets */
    }
}

@media (min-width: 992px) {
    .mastodon-scroll-inner>div[class*="col-"] {
        width: 31%;
        /* Shows 3+ cards on desktops */
    }
}


/*
 * ========================================================================
 * Mastodon Scroller - Height and View More Button Styles
 * ========================================================================
 */

/* Asegura que o corpo da tarxeta use flexbox para que o footer se alinee abaixo */
.mastodon-scroll-inner .toot-card .card-body {
    display: flex;
    flex-direction: column;
}

/* Estilos para a tarxeta-botón "Ver máis" */
.mastodon-view-more-card {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: #212529;
    /* Un chisco máis escuro que as tarxetas normais */
    border: 1px dashed #495057;
    /* Borde punteado para diferencialo */
    border-radius: 0.25rem;
    text-decoration: none;
    font-weight: 500;
    text-align: center;
    padding: 1rem;
    transition: all 0.2s ease-in-out;
}

.mastodon-view-more-card:hover,
.mastodon-view-more-card:focus {
    /* transform: translateY(-5px); */
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
    color: #ffffff;
    text-decoration: none;
    border-style: solid;
    border-color: #6c757d;
    background-color: #2c3034;
}

/*
 * ========================================================================
 * CORRECCIÓN: Axuste de texto dentro das tarxetas do carrusel
 * ========================================================================
 */

.mastodon-scroll-inner .toot-card .card-text {
    white-space: normal;
    /* Permite que o texto salte de liña (sobrescribe o 'nowrap' do pai) */
    overflow-wrap: break-word;
    /* Forza a que as palabras longas (ex: URLs) se rompan para non desbordar */
}


/*
 * ========================================================================
 * Footer Widgets and Sidebar Styles
 * ========================================================================
 */

/* -- Footer Widget Cards -- */
.footer-widget-card {
    background-color: #212529;
    /* Un pouco máis escuro que as .card normais */
    border-radius: 0.25rem;
}

.footer-widget-card h3 {
    margin-bottom: 1rem;
    color: #ced4da;
}

.author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.custom-social {
    display: inline-block;
    height: 24px;
    width: 24px;
    padding: 6px;
    border-radius: 3.33333px;
    border: 0;
    box-sizing: content-box;
    color: #fff;
    line-height: 1.5;
    transition: opacity .3s ease;
    vertical-align: middle;
    text-decoration: none;
    background-repeat: no-repeat !important;
    background-position: center;
    margin: 0;
    margin-right: 2px !important;
}

.custom-social:hover {
    opacity: .8;
    text-decoration: none;
    color: #fff;
}


.custom-mastodon {
    background-color: #6364ff;
    background-image: url("data:image/svg+xml,%3csvg fill='%23fff' width='20px' height='20px' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38q.398-.092.786-.213c.585-.184 1.27-.39 1.774-.753a.06.06 0 0 0 .023-.043v-1.809a.05.05 0 0 0-.02-.041.05.05 0 0 0-.046-.01 20.3 20.3 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.6 5.6 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422q.059-.011.11-.024c2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545m-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102q0-1.965 1.011-3.12c.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164q1.012 1.155 1.012 3.12z'/%3e%3c/svg%3e");
    /* padding-left: 40px; */
}

.custom-rss {
    background-color: #f78422;
    background-image: url('data:image/svg+xml, <svg fill="%23ffffff" height="16px" width="16px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24.912 24.912" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><g><path d="M3.692,17.517C1.656,17.517,0,19.173,0,21.211C0,23.244,1.656,24.9,3.692,24.9s3.694-1.657,3.694-3.689 C7.387,19.173,5.729,17.517,3.692,17.517z"></path><path d="M0.384,8.142C0.173,8.142,0,8.315,0,8.527v4.688c0,0.211,0.173,0.383,0.384,0.383c6.02,0,10.919,4.898,10.919,10.92 c0,0.209,0.171,0.383,0.384,0.383h4.689h0.016c0.215,0,0.387-0.173,0.387-0.383l-0.018-0.121C16.692,15.423,9.37,8.142,0.384,8.142 z"></path><path d="M24.89,24.397C24.825,10.936,13.854,0.011,0.384,0.011C0.173,0.011,0,0.183,0,0.397v4.824c0,0.212,0.173,0.383,0.384,0.383 c10.429,0,18.913,8.486,18.913,18.914c0,0.209,0.172,0.383,0.382,0.383h4.825h0.02c0.21,0,0.388-0.173,0.388-0.383L24.89,24.397z"></path><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></g></g></svg>');
    background-position: 10px center;
}

.custom-codeberg {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' aria-label='Codeberg' role='img' viewBox='0 0 512 512' fill='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Crect width='512' height='512' rx='8%25' fill='%23ffffff'%3E%3C/rect%3E%3Cdefs%3E%3ClinearGradient id='A' x1='259.804' x2='383.132' y1='161.4' y2='407.835' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='0'%3E%3C/stop%3E%3Cstop offset='.5' stop-color='%2371c2ff'%3E%3C/stop%3E%3Cstop offset='1' stop-color='%2339aaff'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23A)' d='M259.804 161.4c-.44 0-1.1 0-1.32.44l-.44 1.1L332.04 440.21a192.039 192.039 0 0 0 86.77-74.437L261.125 162.06a1.762 1.762 0 0 0-1.321-.661z' opacity='.5' paint-order='stroke markers fill'%3E%3C/path%3E%3Cpath fill='%232185d0' d='M255.3 71.8a192 192 0 0 0-162 294l160.1-207c.5-.6 1.5-1 2.6-1s2 .4 2.6 1l160 207a192 192 0 0 0 29.4-102c0-106-86-192-192-192a192 192 0 0 0-.7 0z' paint-order='stroke markers fill'%3E%3C/path%3E%3C/g%3E%3C/svg%3E%0A");
    width: 24px;
    height: 24px;
}

.custom-xmpp {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' aria-label='XMPP' role='img' viewBox='0 0 512 512' fill='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Crect width='512' height='512' rx='8%25' fill='%23ffffff'%3E%3C/rect%3E%3ClinearGradient id='a' x1='.5' y1='1' x2='.5' y2='0%25'%3E%3Cstop offset='.3' stop-color='%231be'%3E%3C/stop%3E%3Cstop offset='1' stop-color='%23025'%3E%3C/stop%3E%3C/linearGradient%3E%3Cpath id='b' d='M 379.9,170 C 379.9,382.7 159,442 159,442 v 2 C 307,432 470,279 475,133 Z' fill='url(%23a)'%3E%3C/path%3E%3Cg fill='%23e61'%3E%3Cpath id='c' d='M 344,183 C 341,303 240,416 157,441 v 2 C 284,407 430,282 413,157 Z'%3E%3C/path%3E%3C/g%3E%3Cg fill='%23d51'%3E%3Cpath id='d' d='m 396,163.4 c .12,130 -95.3,245 -252,278 v 5 c 173,-13 284,-179.7 272,-290.7 z'%3E%3C/path%3E%3C/g%3E%3Cg transform='matrix(-1,0,0,1,512,0)'%3E%3Cuse xlink:href='%23b'%3E%3C/use%3E%3Cuse xlink:href='%23c' fill='%23ac6'%3E%3C/use%3E%3Cuse xlink:href='%23d' fill='%23493'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    height: 24px;
    width: 24px;
}

.custom-telegram {
    background-image: url("data:image/svg+xml,%3csvg width='24px' height='24px' fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M20.888 3.551c.168-.003.54.039.781.235.162.14.264.335.288.547.026.156.06.514.033.793-.302 3.189-1.616 10.924-2.285 14.495-.282 1.512-.838 2.017-1.378 2.066-1.17.11-2.058-.773-3.192-1.515-1.774-1.165-2.777-1.889-4.5-3.025-1.99-1.31-.7-2.033.434-3.209.297-.309 5.455-5.002 5.556-5.427.012-.054.024-.252-.094-.356s-.292-.069-.418-.04q-.267.061-8.504 5.62-1.208.831-2.187.806c-.72-.013-2.104-.405-3.134-.739C1.025 13.39.022 13.174.11 12.476q.068-.544 1.5-1.114 8.816-3.84 11.758-5.064c5.599-2.328 6.763-2.733 7.521-2.747Z'/%3e%3c/svg%3e");
    background-color: #26a5e4;
    background-position: center !important;
}

.shareon > * {
    margin-left: 0 !important;
    margin-right: 6px !important;
}

.fs-0_7 {
    font-size: 0.7em;
}

/*
 * ========================================================================
 * Custom Comment Styles (Mastodon-inspired)
 * ========================================================================
 */

/* 1. Eliminar a sangría por defecto e o estilo de lista */
.comment-list,
.comment-list ol.children {
    list-style: none;
    padding-left: 0;
}

/* 2. Estilo base para cada comentario individual (cada 'li') */
.comment-list li.comment {
    margin-top: 1.5rem;
    /* padding-top: 1.5rem; */
    /* border-top: 1px solid #343a40; */
    /* Liña separadora entre comentarios do mesmo nivel */
}

.comment-list li:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    /* Eliminar a liña superior do primeiro comentario */
}

/* 3. A maxia: Crear a liña de conexión vertical */
.comment-list ol.children {
    /* Establecemos un contexto de posicionamento */
    position: relative;
    /* Engadimos un espazo á esquerda para a liña e o contido */
    padding-left: 1.5rem;
    /* Marxe para separar o fío de respostas do comentario pai */
    margin-top: 1.5rem;
}

/* 4. Debuxar a pseudo-liña vertical */
.comment-list ol.children::before {
    content: '';
    position: absolute;
    left: 0;
    /* Posición da liña */
    top: 0;
    bottom: 0;
    width: 2px;
    /* Grosor da liña */
    background-color: #373c41;
    /* Cor da liña */
    border-radius: 2px;
}

/* 5. Axustes no avatar para que se vexa ben */
.comment .comment-author .avatar {
    border-radius: 50%;
    /* Avatares redondos */
    margin-right: 0.75rem;
}

/* 6. Melloras no deseño do corpo do comentario */
.comment-body {
    background-color: #2c3034;
    /* Un fondo lixeiramente diferente para destacar */
    padding: 1rem;
    border-radius: 0.25rem;
}

/* 7. Mellorar o aliñamento do enlace de resposta */
.reply {
    margin-top: 0.5rem;
    font-size: 0.9em;
}

/* 8. Estilo para o formulario de comentarios (opcional pero recomendado) */
.comment-form-comment,
.comment-form-author,
.comment-form-email,
.comment-form-url {
    margin-bottom: 1rem;
}

/*
 * ========================================================================
 * Comment Form Styles
 * ========================================================================
 */

#reply-title {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

/* Estilo para a nota "O teu enderezo non se publicará..." */
.comment-notes {
    font-size: 0.9em;
    color: #adb5bd;
    /* text-body-secondary */
    margin-bottom: 1.5rem;
}

/* Ocultar a nota sobre as etiquetas HTML permitidas (adoita ser innecesaria) */
.form-allowed-tags {
    display: none;
}

/* Asegurar que as etiquetas dos campos teñen o aspecto correcto */
.comment-form label {
    display: block;
    margin-bottom: 0.5rem;
}

/* Estilo para a mensaxe "Conectado como..." */
.logged-in-as {
    font-size: 0.9em;
    color: #adb5bd;
    margin-bottom: 1rem;
}

.logged-in-as a {
    color: #ced4da;
    text-decoration: underline;
}

.logged-in-as a:hover {
    color: #ffffff;
}

.required-field-message {
    display: block;
    clear: both;
}
.mastopress-popup {
    background-color: #2c3034 !important;
}
.mastopress-popup .acct {
    color: #ced4da;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out;

}
.mastopress-popup .acct:hover {
    color: #ffffff;
}
.mastopress-popup a {
    text-decoration: none !important;
    transition: all 0.2s ease-in-out;

}
.mastopress-popup a:hover {
    text-decoration: underline !important;
    transition: all 0.2s ease-in-out;

}

.invisible {
    display: none !important;
}


.stat-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem; /* Espazo entre a icona e o número */
}

.stat-item svg {
    /* Axuste vertical para que se aliñe mellor co texto */
    position: relative;
    top: -1px; 
}

.mastodon-stats .stat-item svg {
    fill: #adb5bd; /* Esta é a cor text-body-secondary de Bootstrap */
}

.more-images-note {
    font-size: 0.9em;
    color: #adb5bd;
    margin-top: -0.25rem;
    margin-bottom: 0.5rem;
}