/* CSS Document */

/* Variáveis de Cores */
:root {
    --azul-primario: #006EB7;
    --cinza-claro: #F4F4F5;
    --cinza-medio: #E0E0E0;
    --cinza-escuro: #6B7280;
    --neutro-escuro: #1A1A1A;
    --verde-medio: #74AD54;
    --amarelo-claro: #FBD770;
    --vermelho-claro: #E11F1C;
	/* Btn states */
    --azul-primario-claro: #338fce; /* Versão mais clara para hover */
    --azul-primario-escuro: #005a93; /* Versão mais escura para ativo */
    --cinza-desabilitado: #c2c2c2;
    --branco: #ffffff;
}

/* Geral */
body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    color: var(--neutro-escuro);
}

/* Estilo para Listas Não Ordenadas */
.content ul {
    list-style-type: none; /* Remove marcadores padrão */
    margin: 0; /* Remove espaçamento externo */
}

.content ul li {
    font-size: 1rem; /* Tamanho do texto consistente */
    font-weight: 400; /* Peso regular */
    color: var(--neutro-escuro); /* Cor padrão */
    padding: 0 0 0.5rem 0; /* Espaçamento entre itens */
	line-height: 1.8;
}

.content ul li:last-child {
    border-bottom: none; /* Remove linha do último item */
}

/* Ícone personalizado para cada item */
.content ul li::before {
    content: "•" !important; /* Marcador personalizado */
    color: var(--azul-primario); /* Cor do marcador */
    font-size: 1.2rem; /* Tamanho do marcador */
    font-weight: bold; /* Marcador destacado */
    margin-right: 0.5rem; /* Espaço entre marcador e texto */
	
}

.content a {
	color: var(--azul-primario);
}

.content a.hover {
	color: var(--azul-primario);
	text-decoration: underline;
}


.content p.lead {
	font-size: 1.25rem; /* Tamanho maior que o texto normal */
    font-weight: 300; /* Negrito moderado */
    line-height: 1.6; /* Espaçamento entre linhas para melhor leitura */
    color: var(--azul-primario); /* Cor principal do tema */
    margin-bottom: 0;
}

.content p.lead.highlight {
    color: var(--verde-medio); /* Destaque com verde */
    background-color: var(--cinza-claro); /* Fundo suave */
    padding: 1rem; /* Espaçamento interno */
    border-radius: 4px; /* Bordas arredondadas */
}

.img-header-page {
	background-color: var(--cinza-claro);
	padding: 3em 0;
}

/* Estilo Geral para Parágrafos */
.content p {
    font-size: 1rem; /* Tamanho padrão para boa legibilidade */
    line-height: 1.8; /* Espaçamento entre linhas para evitar blocos densos */
    color: var(--neutro-escuro); /* Cor legível e suave para o texto */
    margin-bottom: 1rem; /* Espaço entre parágrafos */
    letter-spacing: 0.02em; /* Espaçamento mínimo entre caracteres */
    word-wrap: break-word; /* Evita que palavras longas quebrem o layout */
	margin-bottom: 1.5rem;
}

/* Versão de Destaque */
.content p.highlight {
    font-size: 1rem; /* Um pouco maior para chamar atenção */
    color: var(--azul-primario); /* Cor de destaque */
    font-weight: 400; /* Negrito moderado */
    background-color: rgba(0, 64, 129, 0.1); /* Fundo suave para destacar */
    padding: 1rem 2em; /* Espaçamento interno */
    border-radius: 4px; /* Bordas arredondadas */
	margin-top: 1em;
}



.content {
    max-width: 700px; /* Largura ideal para leitura em ecrãs grandes */
    margin: 0 auto; /* Centraliza o conteúdo */
}

/* Buttons */
/* Botão Primário */
.btn-primary {
    background-color: var(--azul-primario);
    color: var(--cinza-claro);
    border: 1px solid var(--azul-primario);
    font-weight: 600;
    border-radius: 4px;
}

.btn-primary:hover {
    background-color: var(--azul-primario-claro);
    border-color: var(--azul-primario-claro);
    color: var(--cinza-claro);
    text-decoration: none;
}

.btn-primary:focus {
    outline: 2px solid var(--azul-primario);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0, 110, 183, 0.25);
    background-color: var(--azul-primario);
    border-color: var(--azul-primario);
    color: var(--cinza-claro);
}

.btn-primary:active {
    background-color: var(--azul-primario-escuro);
    border-color: var(--azul-primario-escuro);
    color: var(--branco);
}

.btn-primary:disabled {
    background-color: var(--cinza-desabilitado);
    border-color: var(--cinza-desabilitado);
    color: var(--cinza-claro);
    cursor: not-allowed;
    opacity: 0.7;
}


/* Headings */
h2 {
    font-size: 28px;
    font-weight: bold;
    color: var(--azul-primario);
    margin-bottom: 1rem;
}

/* h3 - Um pouco menor que h2 */
h3 {
    font-size: 20px; /* Proporção menor */
    font-weight: bold; /* Mantém o destaque */
    color: var(--azul-primario); /* Cor consistente com h2 */
    margin-bottom: 0.8rem; /* Espaçamento ligeiramente menor */
}

/* h4 - Subtítulo com menor peso */
h4 {
    font-size: 18px; /* Menor que h3 */
    font-weight: 600; /* Peso semi-negrito */
    color: var(--neutro-escuro); /* Cor mais neutra */
    margin-bottom: 0.6rem; /* Espaçamento menor */
}

/* h5 - Título complementar */
h5 {
    font-size: 16px; /* Compacto */
    font-weight: 500; /* Peso regular */
    color: var(--neutro-escuro); /* Azul mais leve para contraste */
    margin-bottom: 0.5rem; /* Espaçamento curto */
}



/* Header */
header {
    border-bottom: 1px solid var(--cinza-medio);
    height: 112px;
}

header .navbar-brand img {
    height: 80px;
}

/* Menu de Navegação */
header .nav-link {
    color: var(--azul-primario);
    font-size: 1rem; /* 16px convertido para rem */
    font-weight: 600; /* Semi-bold */
    text-decoration: none;
    padding: 0.5rem 1rem;
    position: relative;
    transition: color 0.3s ease, border-bottom 0.3s ease;
}

header .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0; /* Linha posicionada no fundo */
    left: 0;
    width: 0;
    height: 2px; /* Altura fixa da linha */
    background-color: var(--azul-primario);
    transition: width 0.3s ease;
    pointer-events: none; /* Evita interferência no hover */
}

header .nav-link:hover::after {
    width: 100%; /* Expande a linha para ocupar o texto */
}

header .nav-link:hover {
    color: var(--azul-primario); /* Garante cor sem interferência */
}

header .navbar-nav .nav-link.active {
    color: var(--azul-primario); /* Garante cor sem interferência */
}

header .nav-item:hover .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* Configuração inicial do dropdown */
header .nav-item .dropdown-menu {
    display: block; /* Necessário para evitar layout "jump" com Bootstrap */
    opacity: 0;
    visibility: hidden;
    position: absolute;
    background-color: #fff;
    border: 1px solid var(--cinza-medio);
    border-radius: 5px;
    margin-top: 0.5rem;
    z-index: 1000;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Garantir que ao sair do link o menu ainda esteja visível */
header .dropdown-menu:hover {
    opacity: 1;
    visibility: visible;
}

header .nav-item .dropdown-item {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    color: var(--neutro-escuro);
    text-decoration: none;
}

header .nav-item .dropdown-item:hover {
    background-color: var(--cinza-claro);
    color: var(--azul-primario);
}

header .nav-item .dropdown-item.active {
	background-color: rgba(0, 64, 129, 0.1);
	color: var(--azul-primario);
}

.bi {
	color: var(--azul-primario);
	font-size: 1.4em;
}

.bi-globe {
	color: var(--cinza-claro);
}

/* Footer */
footer {
    background-color: var(--azul-primario-escuro);
    color: var(--cinza-claro);
    padding: 1rem 0;
}

.text-white {
    color: var(--cinza-claro);
}

footer a.text-white:hover {
    text-decoration: underline !important;
}

footer h3 {
	color: var(--cinza-claro);
}

hr.border-white {
    border-color: var(--cinza-claro);
    border-width: 1px;
}


/* Botões Específicos */
.btn-success {
    background-color: var(--verde-medio);
    border-color: var(--verde-medio);
}
.btn-success:hover {
    background-color: darken(var(--verde-medio), 10%);
}

.btn-warning {
    background-color: var(--amarelo-claro);
    border-color: var(--amarelo-claro);
}
.btn-warning:hover {
    background-color: darken(var(--amarelo-claro), 10%);
}

.btn-danger {
    background-color: var(--vermelho-claro);
    border-color: var(--vermelho-claro);
}
.btn-danger:hover {
    background-color: darken(var(--vermelho-claro), 10%);
}

/* Destaques */
.highlight-section {
	background-color: var(--azul-primario);
	align-items: stretch;
	height: 100%;
}

.highlight-section-xs {
	background-color: var(--azul-primario);
	align-items: stretch;
	margin-left: -12px;
  	margin-right: -12px;
}

.highlight-text {
	color: var(--cinza-claro);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}

.highlight-text-xs {
	color: var(--cinza-claro);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-top: -4em;
}

.highlight-text h2, .highlight-text-xs h2 {
	font-size: 22px;
	font-weight: 700;
	line-height: 130%;
	color: var(--cinza-claro);
	margin-bottom: 1em;
}

.highlight-text p, .highlight-text-xs p {
	font-size: 16px;
	font-weight: 500;
	line-height: 150%;
	color: rgba(244, 244, 245, 0.8);
}

.highlight-text a, .highlight-text-xs a {
	font-size: 16px;
	font-weight: 700;
	line-height: 150%;
	color: var(--cinza-claro);
	text-decoration: none;
	display: flex;
	align-items: center;
	margin-top: 26px;
}

.highlight-text a i, .highlight-text-xs a i {
	margin-left: 0.5rem;
}

.highlight-image {
	background: url('imgs/sobre_fesie.png') no-repeat center center;
	background-size: cover;
}

.highlight-image-xs {
	background: url('imgs/sobre_fesie.png') no-repeat center center;
	background-size: cover;
	height: 400px;
	margin-left: -12px;
  	margin-right: -12px;
}

.news-list {
	border-top: 1px solid var(--cinza-medio);
	border-bottom: 1px solid var(--cinza-medio);
}

.news-item {
	border-bottom: 1px solid var(--cinza-medio);
	padding: .8rem 0;
}

.news-item:last-child {
	border-bottom: none;
}

.news-item .date {
	font-size: 12px;
	font-weight: 500;
	color: var(--cinza-escuro);
}

.date {
	font-size: 16px;
	font-weight: 500;
	color: var(--cinza-escuro);
    margin-top: -0.5rem;
    margin-bottom: 1rem;
}

.news-item .title {
	font-size: 16px;
	font-weight: 600;
	line-height: 130%;
	color: var(--neutro-escuro);
}

.news-header a {
	font-size: 16px;
	font-weight: 700;
	color: var(--azul-primario);
	text-decoration: none;
	display: flex;
	align-items: center;
}

.news-header a i {
	margin-left: 0.5rem;
}

.equal-height {
	display: flex;
	align-items: stretch;
}



/* Card */
a.card {
	text-decoration: none;
}

a.card:hover {
	border: 1px solid var(--azul-primario) !important;
}

.topicos-card {
    border: 1px solid var(--cinza-medio);
    border-radius: 4px;
    padding: 8px;
    min-height: 254px;
}

.topicos-card-titulo {
    font-size: 18px;
    font-weight: bold;
    color: var(--azul-primario);
	text-decoration: none;
}

.topicos-card-descricao {
    font-size: 16px;
    line-height: 150%;
    color: var(--cinza-escuro);
	text-decoration: none;
}

.topicos-card-link {
    font-size: 16px;
    font-weight: bold;
    color: var(--azul-primario);
    text-decoration: none;
    display: flex;
    align-items: center;
}

.topicos-card-link i {
    margin-left: 0.5rem;
}

/* Imagem do Ícone */
.topicos-card img {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
}

/* Secção de Publicações e Recursos */
.publications-section {
	margin: 2rem 0;
}

.publications-section h2 {
	font-size: 24px;
	font-weight: bold;
	color: #006EB7;
	margin-bottom: 1rem;
}

.publications-slider {
	list-style: none;
	display: flex;
	overflow-x: auto;
	gap: 24px;
	padding: 0;
	scroll-snap-type: x mandatory;
}

.publications-slider::-webkit-scrollbar {
	display: none;
}

.publications-slider .txt-slider {
	height: 252px;
	padding: 24px;
}

.publications-slider li {
	flex: 0 0 270px;
	scroll-snap-align: start;
	border: 1px solid #E0E0E0;
	border-radius: 4px;
	background: #fff;
	overflow: hidden;
	transition: transform 0.3s ease;
}

.publications-slider li a {
	text-decoration: none;
} 

.publications-slider li:hover {
	border: 1px solid var(--azul-primario);
}

.publications-slider img {
	width: 100%;
	height: 188px;
	object-fit: cover;
}

.publications-slider .badge {
	font-size: 12px;
	font-weight: 500;
	margin-bottom: 16px;
	display: inline-block;
	background-color: rgba(0, 64, 129, 0.2) !important;
  	color: #006EB7;
	padding: 6px 12px;
	border-radius: 14px;
}

.publications-slider .card-title {
	font-size: 16px;
	font-weight: bold;
	color: #006EB7;
	margin: 0;
}

.publications-slider .card-text {
	font-size: 14px;
	color: #6C757D;
}

.card.blue-bg {
	background-color: var(--azul-primario);
}

.offcanvas ul {
	border-bottom: 1px solid var(--cinza-medio);
}

.offcanvas li {
	border-top: 1px solid var(--cinza-medio);
	padding: 8px 16px; 
}

.offcanvas li .btn-link {
	color: var(--neutro-escuro);
	text-decoration: none;
}

.offcanvas li .btn-link i {
	color: var(--neutro-escuro);
	font-size: 1em;
}

.modal.login #registerForm {
	display: none;
}

.modal.login img {
	object-fit: cover;
}


/* Componenete Lista de Eventos */
.event-list {
    margin: 1rem auto;
}

.event-list p {
  margin-bottom: 1rem;
	font-weight: 400
}

/* Lista de Eventos */
.event-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.event-list ul li {
  font-size: 1rem;
  font-weight: 600;
  color: var(--neutro-escuro);
  padding: 1em;
  line-height: 1.8;
}

.content .event-list  ul li::before {
  display: none;
}

.event-item {
    display: flex;
    align-items: stretch;
    padding: 1rem;
    border: 1px solid var(--cinza-medio);
    border-radius: 6px;
    margin-bottom: 1rem;
}

/* Estilo para Eventos Futuros */
.event-item.upcoming:hover {
    border: 1px solid var(--azul-primario);
}

/* Estilo para Eventos Passados */
.event-item.past {
    background-color: var(--cinza-medio);
    opacity: 0.6;
}

/* Data do Evento */
.event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: var(--azul-primario);
    color: var(--cinza-claro);
    border-radius: 6px;
    margin-right: 1.2rem;
    min-width: 60px;
}

.event-date .day {
    font-size: 1.5rem;
}

.event-date .month {
    font-size: 1rem;
    text-transform: uppercase;
}

/* Informação do Evento */
.event-info {
    flex: 1;
}

.event-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--neutro-escuro);
    margin: 0 0 0.5rem;
}

.event-location {
    font-size: 1rem;
    color: var(--cinza-escuro);
    margin: 0;
}

.event-link {
    font-size: 1rem;
    color: var(--azul-primario);
    text-decoration: none;
    display: inline-block;
}

.event-link:hover {
    text-decoration: underline;
}


/* Formulário de Contacto */
.contact-form-section {
    max-width: 600px;
    margin: 2rem auto;
    font-family: 'Inter', sans-serif;
}

.contact-form-section h3 {
    font-size: 1.5rem;
    color: var(--azul-primario);
    text-align: center;
    margin-bottom: 1.5rem;
}

.contact-form .form-label {
    font-weight: 600;
    color: var(--neutro-escuro);
}

.contact-form .form-control {
    border: 1px solid var(--cinza-medio);
    border-radius: 4px;
	padding: .8em 1em;
}

.contact-form .form-control:focus {
    border-color: var(--azul-primario);
    box-shadow: 0 0 0 3px rgba(0, 110, 183, 0.25);
}

.contact-form .btn {
    background-color: var(--azul-primario);
    color: var(--cinza-claro);
    font-weight: bold;
    width: 100%;
    padding: 0.75rem;
    border: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.contact-form .btn:hover {
    background-color: var(--azul-primario-claro);
}


/* Contact info */
.contact-info .direct-contacts p {
    margin: 0.5rem 0;
    font-size: 1rem;
}

.contact-info .direct-contacts a {
	text-decoration: none;
}

.contact-info .direct-contacts a:hover {
    text-decoration: underline;
}

p.brevemente {
	font-size: 4em;
	text-transform: uppercase;
	font-weight: 600;
	text-align: center;
	color: #B2D3E9;
}

    ol.main {
      counter-reset: section;
      list-style: none;
      padding-left: 1.5em;
    }

    ol.main > li {
      counter-increment: section;
      margin-bottom: 1em;
    }

    ol.main > li::before {
      content: counter(section) ". ";
      font-weight: bold;
    }

    ol.sub {
      counter-reset: subsection;
      list-style: none;
      padding-left: 1.5em;
      margin-top: 0.5em;
    }

    ol.sub > li {
      counter-increment: subsection;
      margin-bottom: 0.6em;
    }

    ol.sub > li::before {
      content: counter(section) "." counter(subsection) " ";
      font-weight: bold;
    }