/*
 * despertar-blog/assets/css/blocks.css
 * Overrides especificos de bloques de Gutenberg que no son cubiertos por
 * theme.json (estados hover, responsivos complejos, variantes de boton extra).
 * Se carga despues de style.css en el front-end.
 */

/* =========================================================
 * BOTONES: asegurar pill en TODOS los contexts
 * ========================================================= */
.wp-block-button__link {
    border-radius: 9999px !important;
    min-height: 44px;
}

/* [MARCA] Pill garantizado dentro del cuerpo de articulos.
 * Cubre el caso en que el bloque core/button, al insertarse dentro de
 * db-prose (post-content), hereda border-radius del inline del bloque
 * en vez del preset de theme.json. Esta regla fuerza el pill sin
 * depender del atributo inline. */
.db-prose .wp-block-button__link {
    border-radius: 9999px;
}

.wp-block-buttons .wp-block-button + .wp-block-button {
    margin-left: 0;
}

/* =========================================================
 * IMAGENES DESTACADAS en single: bordes suavizados
 * ========================================================= */
.wp-block-post-featured-image img {
    border-radius: 16px;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* =========================================================
 * NAVEGACION: quitar underline nativo de WP
 * ========================================================= */
.wp-block-navigation a {
    text-decoration: none;
}
.wp-block-navigation a:hover {
    text-decoration: none;
    color: #29833c;
}
.wp-block-navigation .wp-block-navigation-item.current-menu-item > a {
    color: #2e9042;
    font-weight: 600;
}

/* =========================================================
 * PAGINACION
 * ========================================================= */
.wp-block-query-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 32px 24px 48px;
    font-family: 'Inter', sans-serif;
}
.wp-block-query-pagination-numbers a,
.wp-block-query-pagination-numbers span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #44403c;
    text-decoration: none;
    border: 1px solid #d6d3d1;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.wp-block-query-pagination-numbers a:hover {
    background-color: #e8f5eb;
    color: #2e9042;
    border-color: #2e9042;
}
.wp-block-query-pagination-numbers .page-numbers.current {
    background-color: #2e9042;
    color: #ffffff;
    border-color: #2e9042;
}
.wp-block-query-pagination-previous a,
.wp-block-query-pagination-next a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #2e9042;
    text-decoration: none;
    border: 2px solid #2e9042;
    min-height: 44px;
    min-width: 44px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.wp-block-query-pagination-previous a:hover,
.wp-block-query-pagination-next a:hover {
    background-color: #2e9042;
    color: #ffffff;
}

/* =========================================================
 * TABLA BASE — usada en prosa y comparison-table
 * ========================================================= */
.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
}
.wp-block-table th {
    background: #2e9042;
    color: #ffffff;
    font-weight: 700;
    padding: 12px 16px;
    text-align: left;
    font-size: 0.875rem;
}
.wp-block-table td {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    font-size: 0.875rem;
    color: #44403c;
}
.wp-block-table tr:nth-child(even) td {
    background: #fafaf9;
}
.wp-block-table figure {
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #d6d3d1;
}

/* =========================================================
 * CITAS
 * ========================================================= */
.wp-block-quote {
    border-left: 4px solid #4db566;
    margin: 24px 0;
    padding: 16px 24px;
    background: #e8f5eb;
    border-radius: 0 8px 8px 0;
}
.wp-block-quote p {
    font-style: italic;
    color: #1c1917;
}
.wp-block-quote cite {
    font-size: 0.875rem;
    color: #78716c;
    font-style: normal;
}

/* =========================================================
 * SEPARADORES
 * ========================================================= */
.wp-block-separator {
    border: none;
    border-top: 1px solid rgba(0,0,0,0.10);
    margin-block: 32px;
}
.wp-block-separator.is-style-wide {
    border-color: #c1e4c9;
    border-width: 2px;
}

/* =========================================================
 * EMBED RESPONSIVE
 * ========================================================= */
.wp-block-embed iframe {
    border-radius: 12px;
    max-width: 100%;
}

/* =========================================================
 * FOOTER LIST (usado en footer.html)
 * ========================================================= */
.db-footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.db-footer-list li a {
    font-size: 0.875rem;
    color: #57534e;
    text-decoration: none;
    transition: color 0.15s ease;
}
.db-footer-list li a:hover {
    color: #2e9042;
}

/* =========================================================
 * PILLAR CARDS INTERACTIVAS (usadas en front-page.html)
 * ========================================================= */
.db-pillar-card a.db-pillar-card__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none;
    width: 100%;
    height: 100%;
}
.db-pillar-card a.db-pillar-card__link .db-pillar-card__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #44403c;
    text-align: center;
    line-height: 1.3;
    transition: color 0.15s ease;
}
.db-pillar-card:hover a.db-pillar-card__link .db-pillar-card__name {
    color: #2e9042;
}

/* =========================================================
 * BUSQUEDA (search form)
 * ========================================================= */
.wp-block-search__input {
    border: 2px solid #d6d3d1;
    border-radius: 9999px;
    padding: 10px 20px;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    color: #44403c;
    min-height: 44px;
    transition: border-color 0.15s ease;
}
.wp-block-search__input:focus {
    outline: none;
    border-color: #2e9042;
    box-shadow: 0 0 0 3px rgba(46, 144, 66, 0.15);
}
.wp-block-search__button {
    background: #2e9042;
    color: #ffffff;
    border: none;
    border-radius: 9999px;
    padding: 10px 24px;
    font-weight: 600;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    min-height: 44px;
    transition: background-color 0.15s ease;
}
.wp-block-search__button:hover {
    background: #29833c;
}
.wp-block-search.wp-block-search__button-outside .wp-block-search__inside-wrapper {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* =========================================================
 * FIRMA DOBLE: GUARDA (capa 3)
 * Si el contenido del post ya embebe un bloque de firma
 * (class despertar-firma o db-author-signature), WP agrega
 * 'has-author-signature' al body via functions.php.
 * La segunda firma inyectada por single.html se oculta con CSS.
 * Nota: la primera firma es la embebida en el contenido del post;
 * la del template (.db-single-main > .wp-block-group > .db-author-signature)
 * es la que se suprime aqui.
 * ========================================================= */
body.has-author-signature .db-single-main > .wp-block-group > .db-author-signature,
body.has-author-signature .db-single-main > .wp-block-group > div > .db-author-signature {
    display: none;
}

/* =========================================================
 * SKIP LINK (accesibilidad)
 * ========================================================= */
.skip-link {
    position: absolute;
    top: -9999px;
    left: 6px;
    background: #29833c;
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 0 0 8px 8px;
    font-size: 0.875rem;
    font-weight: 600;
    z-index: 9999;
    text-decoration: none;
}
.skip-link:focus {
    top: 0;
}

/* =========================================================
 * FEATURED IMAGE FALLBACK
 * Cards sin imagen destacada no quedan en blanco:
 * .wp-block-post-featured-image vacio (bloque sin imagen asignada)
 * y .db-article-card__image sin <img> hijo muestran gradiente de marca.
 * ========================================================= */
.wp-block-post-featured-image:empty,
.db-article-card__image:not(:has(img)) {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #e8f5eb, #c1e4c9);
}

/* =========================================================
 * RESPONSIVE ADICIONAL
 * ========================================================= */

/* [CRITICO mobile] Columnas WP collapsan en 1 columna a 375px.
 * Cubre footer 4-col y cualquier wp-block-columns no marcado
 * explicitamente con is-not-stacked-on-mobile. */
@media (max-width: 781px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile) {
        flex-wrap: wrap !important;
    }
    .wp-block-columns:not(.is-not-stacked-on-mobile) .wp-block-column {
        flex-basis: 100% !important;
    }
}

/* [mobile] Pillar grid: 3 columnas <= 781px */
@media (max-width: 781px) {
    .wp-block-columns.db-pillar-grid {
        flex-wrap: wrap;
    }
    .wp-block-columns.db-pillar-grid .wp-block-column {
        flex-basis: calc(33.333% - 12px) !important;
        min-width: calc(33.333% - 12px) !important;
    }
}

/* [mobile] Pillar grid: 2 columnas <= 480px */
@media (max-width: 480px) {
    .wp-block-columns.db-pillar-grid .wp-block-column {
        flex-basis: calc(50% - 8px) !important;
        min-width: calc(50% - 8px) !important;
    }
}