@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --bs-body-color: #232323;
    --bs-primary: #00aa98;
    --bs-primary-rgb: 0, 170, 152;
    --bs-secondary: #1f296b;
    --bs-secondary-rgb: 31, 41, 107;
    /* Cor do badge dos cartões (ElementListImageCards), independente do secondary do site.
       Cor (RGB) e opacidade em separado — a opacidade sobe para 100% no hover. */
    --spp-card-badge-rgb: 70, 185, 172;
    --spp-card-badge-opacity: 0.6;
}

/* Cor custom só nos cartões "só badge" (sociedades/comissões); corpos sociais mantêm o bg-secondary */
.image-card-badge-fill .role-badge.bg-primary,
.image-card-badge-fill .role-badge.bg-secondary {
    background-color: rgba(var(--spp-card-badge-rgb), var(--spp-card-badge-opacity)) !important;
    transition: background-color .2s ease;
}

/* Ao passar o rato no cartão, o badge fica opaco (100%) */
.image-card-badge-fill.image-card-clickable:hover .role-badge {
    background-color: rgba(var(--spp-card-badge-rgb), 1) !important;
}

/* Contorno (outline) secondary no texto dos badges dos cartões */
/*
.role-badge {
    -webkit-text-stroke: 2px var(--bs-white);
    paint-order: stroke fill;
}*/

/* Cartão só com badge (ex.: Sociedades): logótipo grande em cima, badge por baixo */
.image-card-badge-fill .card-body {
    padding: 6px;
    display: flex;
    overflow: hidden;
}

.image-card-badge-fill .role-badge {
    flex: 1 1 auto;
    width: 100%;
    margin: 0;
    font-size: 12px;
    line-height: 1.25;
    padding: 0.2rem 0.5rem;
    min-height: 0;
}

/* Altura da imagem controla a altura do cartão. Muda o valor para encolher/aumentar. */
/* Padding reduzido (o p-3 de 16px encolhia demasiado o logótipo). */
.image-card-badge-fill .card-img-top {
    height: 148px;
    object-fit: contain;
    padding: 4px !important;
}

body {
    font-family: "Noto Sans", sans-serif;
    font-size: 18px;
    color: var(--bs-body-color);
    line-height: 1.5;
}

a {
    color: var(--bs-primary);
    text-decoration: none;
}

/* Tamanhos de texto (menu de estilos do RTE / Tiptap) - 12px a 30px */
.font-12 { font-size: 12px; }
.font-14 { font-size: 14px; }
.font-16 { font-size: 16px; }
.font-18 { font-size: 18px; }
.font-20 { font-size: 20px; }
.font-22 { font-size: 22px; }
.font-24 { font-size: 24px; }
.font-26 { font-size: 26px; }
.font-28 { font-size: 28px; }
.font-30 { font-size: 30px; }
.font-45 { font-size: 45px; }
.font-55 { font-size: 55px; }
.font-75 { font-size: 75px; }


/* Cores de texto (menu de estilos do RTE / Tiptap) */
.text-primary { color: var(--bs-primary); }
.text-secondary { color: var(--bs-secondary); }
.text-preto { color: #1d1d1d; }


p:empty::before {
    content: "";
    display: block;
    height: 1em;
}

.rich-text a {
    color: var(--bs-primary);
}

    .rich-text a:hover {
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 0.375em;
        text-decoration-color: rgb(var(--bs-primary-rgb), .3);
    }

.rich-text ul li {
    list-style: none;
    position: relative;
}

    .rich-text ul li::before {
        content: "";
        width: 12px;
        height: 12px;
        background: url(img/spp-shape.svg) no-repeat;
        position: absolute;
        left: -1.2em;
        top: 0.45em;
    }

.btn {
    border-radius: 99px;
    letter-spacing: .9px;
    transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
}

    .btn:hover {
        text-decoration: none !important;
        transform: translateY(-2px);
    }

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #048c7e;
    --bs-btn-hover-border-color: #048c7e;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #048c7e;
    --bs-btn-active-border-color: #048c7e;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #006056;
    color: #fff !important;
}

    .btn-primary:hover {
        box-shadow: rgba(var(--bs-primary-rgb), 0.25) 0 8px 15px;
    }

.btn-secondary {
    color: #fff !important;
}

    .btn-secondary:hover {
        color: #fff !important;
        box-shadow: rgba(108, 117, 125, 0.25) 0 8px 15px;
    }

.btn-tertiary {
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0d1651;
    --bs-btn-hover-border-color: #0d1651;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0d1651;
    --bs-btn-active-border-color: #0d1651;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #006056;
    color: #fff !important;
}

    .btn-tertiary:hover {
        box-shadow: rgba(var(--bs-secondary-rgb), 0.25) 0 8px 15px;
    }

/* Adiciona uma sombra suave e cantos arredondados ao conteúdo quando ele abre */
#congressosAccordion .accordion-collapse {
    background-color: #fff;
    box-shadow: inset 0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.05);
    border-radius: 0 0 8px 8px; /* Arredonda os cantos inferiores */
    margin-bottom: 5px; /* Separa ligeiramente do próximo item */
}

/* Reduz o tamanho da letra e o espaçamento dentro do dropdown */
#congressosAccordion .accordion-body {
    font-size: 14px; /* Diminui o texto (o padrão costuma ser 16px) */
    line-height: 1.5;
}

    /* Opcional: Se quiseres que os títulos dos cargos (Presidente, etc.) também encolham proporcionalmente */
    #congressosAccordion .accordion-body strong {
        font-size: 14px;
    }