/**
 * Conecta Linhares - Componentes CSS Adicionais
 * 
 * Complementa o main.css do site estático com
 * estilos específicos para o WordPress
 *
 * @package Conecta_Linhares
 * @version 1.0.0
 */

   ============================================ */

/* Número da entrega */
/* ============================================
   Complementos CSS - Entregas
   Usa o CSS base como fundação: styles.css
   ============================================ */

/* ---------- Badges (não existem no base) ---------- */
.tag-etapa,
.tag-pilar,
.tag-dimensao {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 800;
}

/* Etapa - amarelo */
.tag-etapa { background: rgba(251,184,22,0.35); color: #7a5100; }

/* Pilar - azul */
.tag-pilar { background: rgba(38,60,132,0.1); color: #263c84; }

/* Dimensão - roxo */
.tag-dimensao { background: rgba(127,63,152,0.12); color: #7f3f98; }

/* ---------- Status pill (ajustes para o base) ---------- */
.status-pill.status-progress,.page-hero-image .status-pill.status-progress { background: rgba(251,184,22,0.35); color: #fff; }
.status-pill.status-done,.page-hero-image .status-pill.status-done { background: rgba(13,176,75,0.30); color: #fff; }
.status-pill.status-planned,.page-hero-image .status-pill.status-planned { background: rgba(41,170,225,0.30); color: #fff; }

/* ---------- Paginação ---------- */
.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    width: 100%;
}

.pagination-info {
    color: var(--muted, #625d60);
    font-size: 0.92rem;
    font-weight: 500;
    white-space: nowrap;
}

.pagination-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pagination-links {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.pagination-links .button {
    min-width: 40px;
    justify-content: center;
}

.per-page-select {
    border: 1px solid var(--line, #dedfda);
    border-radius: var(--radius, 8px);
    background: white;
    padding: 0.25rem 0.5rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ink, #231f20);
    cursor: pointer;
    min-height: 36px;
    height: calc(1em + 1rem);
    line-height: 1;
    align-self: center;
}

.per-page-select:focus-visible {
    outline: 2px solid var(--human, #263c84);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .pagination-bar {
        flex-direction: column;
    }
    
    .pagination-info {
        text-align: center;
    }
}

/* Herdar fonte nos selects */
.filter-panel select,
.field select {
    font-family: inherit;
}

/* Corrigir fonte do conteúdo de entrega */
.intro-copy p,
.intro-copy {
    font-size: 1rem !important;
    line-height: 1.55 !important;
}