/* styles.css — shared styles aimed at WCAG 2.2 AA compliance */
:root {
	--brand-bg: #000000;
	/* dark blue */
	--brand: #15498a;
	--brand-contrast: #ffffff;
	--accent: #1e8f6f;
	--text: #0b0b0b;
	--muted: #4a4a4a;
	--surface: #f7f7f7;
	--focus: #ffbf47;
  	--red: #DD0005;
	--green: #008D37;
	--yellow: #FFDC00;
	--blue: #164C9B;
	/* amber focus outline */
}

html {
	scroll-behavior: smooth;
}

body {
	color: var(--text);
	background: #fff;
  font-family: 'Poppins',sans-serif;
}

.fundo-vermelho {
  height: 500px;
  background: var(--red); /* cor azul */
  clip-path: polygon(0 0, 100% 20%, 100% 80%, 0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.fundo-verde {
  height: 800px;
  background: var(--green); /* cor azul */
  clip-path: polygon(0 15%, 100% 0, 100% 85%, 0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}


.fundo-azul {
  height: 1000px;
  background: var(--blue); /* cor azul */
  clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}


.fundo-footer {
  height: 450px;
  background: var(--brand-bg); /* cor azul */
  clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.blue-text {
  color: var(--blue);
}

.blue-border {
  border: 1px solid var(--blue);
}

/* Language Navigation */
.language-switcher {
  position: absolute;
  top: 20px;
  right: 30px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  z-index: 1000;
}

.language-switcher a {
  color: #000;
  text-decoration: none;
  padding: 2px 4px;
}

.language-switcher a:hover {
  text-decoration: underline;
}

.language-switcher .active {
  border-bottom: 2px solid #000;
}

.language-switcher .divider {
  margin: 0 6px;
  color: #000;
}

/* Tabs */
.custom-tabs {
  border-bottom: none; /* remove a linha horizontal padrão */
}

.custom-tabs .nav-link {
  background-color: white;          /* fundo branco para tabs inativos */
  color: var(--blue);               /* texto azul */
  border: 1px solid var(--blue);    /* borda azul */
  margin-right: 0.25rem;
  transition: all 0.3s ease;
  border-radius: 5px 5px 0 0;       /* arredondamento só no topo */
}

.custom-tabs .nav-link.active {
  background-color: var(--blue);    /* fundo azul no tab ativo */
  color: var(--brand-contrast);     /* texto branco */
  border-color: var(--blue);
}

/* Hover nos tabs inativos */
.custom-tabs .nav-link:hover:not(.active) {
  background-color: #e6f0ff;        /* leve azul ao passar o mouse */
  color: var(--blue);
}

/* Conteúdo das tabs */
.custom-tab-content {
  background-color: var(--blue);    /* fundo azul */
  color: var(--brand-contrast);     /* texto branco */
  border: 1px solid var(--blue);    /* borda igual aos tabs */
  border-radius: 0 0 5px 5px;       /* arredondamento só na parte inferior */
  padding: 2rem;                    /* espaçamento interno */
  margin-top: -1px;                 /* remove espaço extra entre tab e conteúdo */
  text-align: left;                 /* texto alinhado à esquerda */
}

/* Wrapper centralizado com largura dos tabs */
.d-inline-block {
  max-width: max-content;           /* largura mínima necessária para os tabs */
}

a.red-hover:hover {
  color: var(--red);
}

.section-green {
  color: var(--green);
}

.section-green-bg {
  background-color: var(--green);
  color: var(--yellow);
  padding: 3rem 0; /* optional padding like py-5 */
}

.section-blue-bg {
  background-color: var(--blue);
  color: white;          /* default text color */
  padding: 3rem 0;       /* optional padding */
}


.card.blue-border {
  transition: all 0.3s ease; /* suaviza a animação */
  background-color: white;   /* fundo inicial */
  color: var(--blue);        /* texto inicial */
}

.card.blue-border .card-body .card-blue-border-big {
  color: var(--blue);        /* garante que todo o texto interno seja azul */
}

.card.blue-border:hover {
  background-color: var(--blue); /* fundo azul no hover */
  color: var(--brand-contrast);  /* texto branco */
}

.card.blue-border:hover .card-body {
  color: var(--brand-contrast);  /* texto interno branco no hover */
}


a {
	text-decoration: none!important;
}

a.email-red {
	color: var(--red);
	text-decoration: none;
}

a.email-black {
	color: black;
	text-decoration: none;
}

a:focus,
button:focus,
[href]:focus,
input:focus,
select:focus,
textarea:focus {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}


.text-red {
  color: var(--red); /* vermelho forte com bom contraste */
}

.custom-h4 {
  color: white;      /* white text */
  padding-left: 20px; /* 20px padding on the left */
  font-weight: bold;    /* bold text */
}

/* Ensure visible focus when using mouse/touch */
:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}

/* Skip link */
.skip-link {
	position: absolute;
	left: -999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
	width: auto;
	height: auto;
	padding: .5rem .75rem;
	background: #000;
	color: #fff;
	z-index: 10000;
}

/* Header branding */
.site-header {
	background: var(--brand-bg);
	color: var(--brand-contrast);
}

.red-section {
  background-color: var(--red);
}

.site-header a {
	color: var(--brand-contrast);
}

.brand-title {
	font-weight: 700;
}

.main {
  border: 1px solid red;
  border-radius: 8px; /* adjust as needed */
  padding: 50px; /* prevents text from touching the border */
}

.image-container {
  text-align: center; /* centers the image horizontally */
  margin: 25px 0;   /* 100px space before and after */
}

.yellow-link {
  color: var(--yellow)
}

.centered-image {
  max-width: 100%;
  width: 800px;
  height: auto;
}

.logo-img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  padding: 10px;
  margin-bottom: 120px;
}

.logo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px; /* Adjust cell height */
}

.social-icons a {
  font-size: 24px;
  color: #fff; /* ou a cor que preferir */
  margin-right: 15px;
  text-decoration: none!important; /* remove o sublinhado */
}

.social-icons a:hover {
  color: var(--red); /* azul LinkedIn, ajuste conforme quiser */
  text-decoration: none; /* garante que não volta no hover */
}

.card-custom-black-small {
  background-color: black;
  padding: 10px 10px;       /* smaller padding */
  border-radius: 10px;
  border: 1px solid white;  /* white border */
  font-size: 1.2rem;
  width: 200px;
}

.card-custom-green-yellow {
  background-color: var(--green);  /* green background */
  color: var(--yellow);            /* yellow text */
  border: 1px solid var(--yellow)!important; /* yellow border */
  padding: 10px 10px;              /* adjust padding as needed */
  border-radius: 10px;
  font-size: 1.2rem;
  width: 200px;                     /* adjust width as needed */
}


.card-custom-black-small a {
  color: #fff;              /* keep text white */
  text-decoration: none;
}

.card-custom-black-small a:hover {
  color: var(--red);        /* highlight on hover */
}

.card-custom-black {
  background-color: black;
  padding: 30px 30px;
  border-radius: 25px;
  border: none;           /* solid black card has no border */
}

.card-custom-red {
  background-color: var(--red);
  padding: 30px 30px;
  border-radius: 25px;
  border: 1px solid white;  /* red card has white border */
}

.card-custom-white {
  background-color: white;
  padding: 10px 10px;
  border-radius: 25px;
  border: 1px solid var(--red);  /* white card has red border */
  color: var(--red);
}

.card-custom-white-2 {
  background-color: white;
  padding: 10px 10px;
  border-radius: 25px;
  border: 1px solid black;  /* white card has red border */
  color: black;
}

.card-custom-black-border {
  background-color: black;
  padding: 10px 10px;
  border-radius: 15px;
  border: 1px solid white;           /* solid black card has no border */
}

.card-custom-text {
  text-align: center;
}


.card-play {
  border: 1px solid red;
  border-radius: 10px;
  background-color: white;
  width: 220px;    /* largura standard vídeo */
  aspect-ratio: 16 / 9; /* altura ajusta automaticamente */
  margin: 0 auto;  /* garante centralização dentro da col */
}

.card-play i {
  color: red;
}


.logo {
	display: flex; 
	justify-content: flex-start;
	align-items: center;
}

.list-unstyled li {
  margin-bottom: 5px;
}

#localHelp {
  font-size: 0.70rem; /* mais pequeno que o texto normal */
}

.highlight-text {
  display: block;
  font-weight: bold;
  font-size: 1.6rem;
  margin-top: 10px;
}

.highlight-text {
  display: block;          /* makes it a separate line */
  font-weight: bold;       /* bold text */
  margin-top: 10px;        /* optional spacing above */
}

/* Efeito on-hover alternando cores */
.card-custom-black:hover {
  background-color: var(--red); /* vermelho */
  color: black !important;
}

.card-custom-red:hover {
  background-color: #000; /* preto */
  color: var(--red) !important;
}

/* Efeito hover do card */
.card-custom-white-2:hover {
  background-color: #c00; /* vermelho */
}

/* Efeito hover do texto dentro do card */
.card-custom-white-2:hover .card-title,
.card-custom-white-2:hover .email-red {
  color: #fff; /* muda a cor do texto e do link para branco */
  transition: color 0.3s ease;
}

/* Hover do card e link */
.card-custom-green-yellow:hover {
  background: linear-gradient(90deg, #FFEB3B, #4CAF50); /* inverter cores */
}

.card-custom-green-yellow:hover .yellow-link {
  color: #fff; /* texto branco ao passar o mouse */
}

.hero {
	background: var(--brand-contrast);
	color: var(--brand-contrast);
}

.hero .btn {
	border-width: 2px;
}

.hero .lead {
	max-width: 60ch;
}

/* Cards and sections */
.section-muted {
	background: var(--red);
}

.card h3,
.card h2 {
	line-height: 1.25;
}

.card .btn {
	font-weight: 600;
}

/* Footer */
.footer {
	background: #000000;
	color: #e5e7eb;
}

.footer a {
	color: #e5e7eb;
	text-decoration: underline;
}

.footer a:hover {
	text-decoration: none;
}

/* Forms */
.form-label {
	font-weight: 600;
}

.required::after {
	content: " *";
	color: #8b0000;
}

/* Ensure sufficient color contrast for badges and small UI */
.badge {
	font-weight: 600;
}

.badge.bg-brand {
	background-color: var(--brand);
	color: var(--brand-contrast);
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto;
	}
}

/* Larger clickable areas */
.btn,
.page-link {
	min-height: 44px;
	min-width: 44px;
}

.nav-link {
	min-height: 44px;
}

.custom-tabs .nav-link {
  font-size: 30px;
  font-weight: bold;
}


.texto-grande {
    font-size: 1.2em; /* aumenta o tamanho da fonte */
    font-weight: bold;      /* negrito */
    line-height: 1.6;       /* espaçamento entre linhas */
    color: var(--brand-contrast);
    text-align: center;     /* centraliza o texto */
    margin: 20px auto;      /* margem superior e inferior automática */
    max-width: 800px;       /* limita a largura para melhor leitura */
}

.titulo-grande {
    font-size: 1.2em!important; /* aumenta o tamanho da fonte */
    font-weight: bold;      /* negrito */
    line-height: 1.6;       /* espaçamento entre linhas */
    color: white!important;
    text-align: left;     
    margin: 20px auto;      /* margem superior e inferior automática */
    max-width: 800px;       /* limita a largura para melhor leitura */
}

.link-projeto {
    text-align: center; /* centraliza o parágrafo */
}

.link-projeto a {
    color: #ffffff;         /* cor branca */
    text-decoration: underline!important; /* sublinhado */
    font-weight: bold;      /* opcional: deixa o texto em negrito */
}

/* Responsive spacing helpers */
.section {
	padding: 3rem 0;
}

@media (min-width: 768px) {
	.section {
		padding: 4rem 0;
	}
}

/* Utilities */
.text-small {
	font-size: .95rem;
}

.text-muted-strong {
	color: var(--muted);
}

/* Ensure icons (if any) are hidden from assistive tech unless labeled */
[aria-hidden="true"] {
	pointer-events: none;
}

.card-custom-blue {
  background-color: var(--blue);           /* fundo azul */
  color: var(--brand-contrast);            /* texto branco */
  border-radius: 15px;                     /* cantos arredondados */
  border: 1px solid var(--brand-contrast); /* borda branca */
  padding: 15px;                            /* padding igual em todos os lados */
  text-align: center;                       /* centraliza o conteúdo interno */
  display: block;                           /* permite usar margin auto */
  margin: 0 auto;                           /* centraliza o card horizontalmente */
  max-width: fit-content;                   /* largura mínima necessária para o conteúdo */
  transition: all 0.3s ease;               /* animação suave ao hover */
}



.card-custom-blue a {
  color: var(--brand-contrast);        /* link branco */
  text-decoration: underline!important;          /* sublinhado */
  font-weight: bold;                    /* opcional: negrito */
}

.card-custom-blue a:hover {
  color: #e0e0e0;                      /* efeito hover mais claro */
  text-decoration: underline;
}


a.video-link {
  color: #ffffff;               /* texto branco */
  text-decoration: none;        /* remove sublinhado */
}

a.video-link:hover {
  color: var(--red);            /* opcional: muda para vermelho no hover */
}


/* Remove espaço entre tabs e conteúdo */
.custom-tabs {
  margin-bottom: 0 !important;
}

.custom-tab-content {
  margin-top: 0 !important;
}

/* Remove o padding lateral do container e aumenta o espaçamento vertical */
.custom-section {
  padding-top: 6rem;   /* aumenta o espaço antes da secção */
  padding-bottom: 6rem; /* aumenta o espaço depois da secção */
}

/* Garante que o texto da coluna esquerda alinha exatamente com a direita */
.custom-section .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.custom-section .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}