/* =========================================================
   Hub de Estágio — Tema sobre Bootstrap 5.3
   Este arquivo NÃO redefine componentes do zero; ele
   sobrescreve as variáveis CSS do Bootstrap (--bs-*) com a
   paleta e tipografia do Hub de Estágio, e usa as classes
   utilitárias/components nativas do Bootstrap (.btn, .navbar,
   .card, .form-control, .container, .row/.col-*, .modal...).
   ========================================================= */

:root{
  /* Paleta do Hub de Estágio */
  --he-navy: #0F2540;
  --he-navy-deep: #0A1B30;
  --he-steel: #3B6E91;
  --he-ink: #20242B;
  --he-paper: #F6F7F9;
  --he-paper-warm: #EFEFEA;
  --he-gold: #C9A86A;
  --he-gold-deep: #AD8A4D;
  --he-line: rgba(15,37,64,0.12);

  /* ---- Sobrescrevendo variáveis do Bootstrap ---- */
  --bs-body-font-family: "Inter", -apple-system, sans-serif;
  --bs-body-color: var(--he-ink);
  --bs-body-bg: var(--he-paper);
  --bs-link-color: var(--he-steel);
  --bs-link-hover-color: var(--he-navy);
  --bs-border-color: var(--he-line);
  --bs-border-radius: 4px;
  --bs-border-radius-sm: 3px;
  --bs-border-radius-lg: 6px;

  /* Cores semânticas do Bootstrap remapeadas pra paleta do Hub */
  --bs-primary: var(--he-navy);
  --bs-primary-rgb: 15,37,64;
  --bs-secondary: var(--he-steel);
  --bs-secondary-rgb: 59,110,145;
  --bs-warning: var(--he-gold);
  --bs-warning-rgb: 201,168,106;
  --bs-light: var(--he-paper-warm);
  --bs-dark: var(--he-navy-deep);

  --font-serif: "Source Serif 4", Georgia, serif;
}

html{
scroll-behavior:smooth;
height:100%;
}
body{
line-height:1.55;
min-height:100%;
display:flex;
flex-direction:column;
}
main{
flex:1 0 auto;
}
footer.site-footer{
flex-shrink:0;
}
img{
max-width:100%;
}

/* ===== Tipografia ===== */
.font-serif{
font-family:var(--font-serif);
}
h1, h2, h3, .section-title{
font-family:var(--font-serif);
font-weight:600;
color:var(--he-navy-deep);
}

.eyebrow{
  color:var(--he-steel);
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* ===== Botões com a cor de marca (dourado), Bootstrap não tem isso nativo ===== */
.btn-gold{
  background-color:var(--he-gold);
  border-color:var(--he-gold);
  color:var(--he-navy-deep);
  font-weight:600;
}
.btn-gold:hover, .btn-gold:focus{
  background-color:var(--he-gold-deep);
  border-color:var(--he-gold-deep);
  color:var(--he-navy-deep);
}
.btn-outline-light:hover{color:var(--he-navy);}

/* ===== Navbar: usamos .navbar.navbar-dark nativo, só fixamos o bg ===== */
.navbar.bg-brand{
  --bs-navbar-color: rgba(255,255,255,0.82);
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: #fff;
  background-color:var(--he-navy) !important;
}
.navbar .brand-mark{
  width:34px;
  height:34px;
  border:1.5px solid var(--he-gold);
  border-radius:2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-serif);
  font-size:.95rem;
  color:var(--he-gold);
}

/* ===== Hero / Slider (usa .carousel nativo do Bootstrap) ===== */
.hero-carousel{
  margin-top:0px;
}
.hero-carousel .carousel-item{
  height:625px;
  background-color:var(--he-navy-deep);
  position:relative;
  overflow:hidden;
}
.hero-carousel .carousel-item img{
  position:absolute;
  inset:0;
}
.hero-carousel .carousel-caption{
  text-align:left;
  left:10rem;
  right:auto;
  bottom:auto;
  top:50%;
  transform:translateY(-50%);
  max-width:620px;
  padding-left:0;
}
.hero-carousel .carousel-caption h1{
  color:#fff;
  font-size:2.6rem;
}
.hero-carousel .carousel-caption p{
  color:rgba(255,255,255,0.85);
  font-size:1.05rem;
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(10,27,48,0.92) 0%, rgba(10,27,48,0.78) 38%, rgba(10,27,48,0.35) 75%);
}

/* ===== Cards de perfil (Estudante / Empresa) ===== */
.profile-card{
  border-top:3px solid var(--he-navy);
}
.profile-card.is-empresa{
  border-top-color:var(--he-gold);
}
.profile-card .card-kicker{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--he-steel);
}
.profile-card.is-empresa .card-kicker{
  color:var(--he-gold-deep);
}

/* ===== Footer ===== */
footer.site-footer{
  background-color:var(--he-navy-deep);
  color:rgba(255,255,255,0.65);
}
footer.site-footer a{
  color:rgba(255,255,255,0.6);
}
footer.site-footer a:hover{
  color:var(--he-gold);
}
footer.site-footer h4{
  color:#fff;font-size:.85rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}

/* ===== Cards de autenticação (login / cadastro) ===== */
.auth-wrapper{
  min-height:calc(100vh - 76px);
  display:flex;
  align-items:center;
}
.auth-card{
  max-width:440px;
  margin:0 auto;
  box-shadow:0 18px 50px rgba(15,37,64,0.08);
}
.auth-card-wide{
  max-width:560px;
}

/* ===== Toggle de perfil (Estudante / Empresa) — usa .btn-check + .btn nativo ===== */
.role-toggle .btn{
  --bs-btn-padding-y:.7rem;
  font-weight:600;
}
.role-toggle .btn-check:checked + .btn{
  background-color:var(--he-navy);
  border-color:var(--he-navy);
  color:#fff;
}

/* ===== Páginas placeholder / erro ===== */
.placeholder-section{padding:6rem 0;}
  .erro-img{
  width:220px;
  height:220px;
  margin:0 auto 1rem;
  display:block;
}

/* ===== Modal de autenticação: só uma tela visível por vez ===== */
.form-pane{
  display:none;
}
 .form-pane.active{
  display:block;
}
 #pane-escolha.form-pane{
  display:block;
}

/* ===== Sidebar (componente interno, ainda sem uso) ===== */
.sidebar{
  background:var(--he-paper-warm);
  border-right:1px solid var(--he-line);
  min-height:100%;
}

/* ===== Animação Contato (Destaca ao clicar na âncora) ===== */
#contato:target #info-contato {
  animation: highlight-pulse 2s ease-out;
  border-radius: 8px;
  padding: 10px;
  margin: -10px;
}

@keyframes highlight-pulse {
  0% { 
    background-color: rgba(255, 255, 255, 0.25); 
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.25); 
  }
  100% { 
    background-color: transparent; 
    box-shadow: none; 
  }
}
/* Card de Empresa */
.empresa-card {
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.empresa-card:hover {
    transform: translateY(-2px);
    background-color: var(--he-navy) !important;
}
.empresa-card:hover * {
    color: #fff !important;
}