/* =====================================================
   RP ENGENHARIA — Layout (Navbar + Footer)
   Estilos do menu superior e do rodapé reutilizáveis.
   Depende das variáveis definidas em style.css
===================================================== */


/* =====================================================
   HEADER / NAVBAR
===================================================== */

.header {
  position:        sticky;
  top:             0;
  z-index:         1000;
  background:      rgba(10, 23, 44, 0.95);
  backdrop-filter: blur(12px);
  border-bottom:   1px solid var(--graphite-dark);
}

.header .container {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          85px;
}

.logo {
  font-family: 'Regen', serif;
  font-size: 32px;
  font-weight: 700;
  color: #D7DDE3;
  letter-spacing: -0.5px;
  transition: var(--transition);
}

.logo:hover {
  color: var(--blue-light);
}

.nav ul {
  display:     flex;
  align-items: center;
  gap:         35px;
}

.nav a {
  font-weight: 500;
  transition:  var(--transition);
}

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


/* =====================================================
   FOOTER
===================================================== */

.footer {
  background:        #1c2125; /* um pouco mais escuro que o --graphite-dark */
  color:             var(--gray-200);
  scroll-margin-top: 85px; /* compensa o header fixo ao usar #contact */
}


/* --- Faixa de contato (CTA + formulário) --- */

.footer-cta {
  padding: 80px 0;
}

.footer-cta__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   60px;
  align-items:           start;
}

.footer-cta__info h2 {
  color:         #fff;
  margin-bottom: 18px;
}

.footer-cta__info p {
  color:         var(--gray-200);
  font-size:     1.05rem;
  max-width:     440px;
  margin-bottom: 30px;
}

.footer-contact li {
  display:       flex;
  align-items:   center;
  gap:           12px;
  color:         var(--gray-200);
  font-size:     .95rem;
  margin-bottom: 12px;
}

.footer-contact i {
  color:      var(--blue-light);
  width:      18px;
  text-align: center;
}


/* --- Formulário sobre fundo escuro --- */

.footer-form .form-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   16px;
}

.footer-form .form-group {
  margin-bottom: 16px;
}

.footer-form input,
.footer-form textarea {
  width:         100%;
  padding:       14px 16px;
  border:        1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-sm);
  background:    rgba(255,255,255,.06);
  color:         #fff;
  font-size:     1rem;
  transition:    var(--transition);
}

.footer-form input::placeholder,
.footer-form textarea::placeholder {
  color: var(--gray-300);
}

.footer-form input:focus,
.footer-form textarea:focus {
  outline:      none;
  border-color: var(--blue-light);
  background:    rgba(255,255,255,.10);
}

.footer-form__submit {
  width:           100%;
  justify-content: center;
  margin-top:      4px;
}

.footer-form__note {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-top:  16px;
  color:       var(--gray-300);
  font-size:   .82rem;
}


/* --- Rodapé inferior --- */

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding:    40px 0 30px;
}

.footer-bottom__grid {
  display:               flex;
  justify-content:       space-between;
  align-items:           center;
  flex-wrap:             wrap;
  gap:                   24px;
  padding-bottom:        24px;
  border-bottom:         1px solid rgba(255,255,255,.06);
}

.footer-brand .logo {
  display:       block;
  font-size:     20px;
  margin-bottom: 12px;
  color:         #fff;
}

.footer-brand .logo:hover {
  color: var(--blue-light);
}

.footer-brand p {
  color:     var(--gray-300);
  font-size: .9rem;
  max-width: 360px;
}

.footer-nav {
  display:   flex;
  flex-wrap: wrap;
  gap:       24px;
}

.footer-nav a {
  color:      var(--gray-200);
  font-size:  .92rem;
  transition: var(--transition);
}

.footer-nav a:hover {
  color: var(--blue-light);
}

.footer-copy {
  text-align: center;
  margin-top: 24px;
  color:      var(--gray-300);
  font-size:  .85rem;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 992px) {
  .nav {
    display: none;
  }

  .footer-cta__grid {
    grid-template-columns: 1fr;
    gap:                   40px;
  }
}

@media (max-width: 768px) {
  .header .container {
    height: 75px;
  }

  .footer-cta {
    padding: 56px 0;
  }

  .footer-form .form-row {
    grid-template-columns: 1fr;
    gap:                   0;
  }

  .footer-bottom__grid {
    flex-direction: column;
    align-items:    flex-start;
  }
}


/* =====================================================
   HAMBURGER — botão mobile
===================================================== */

.hamburger {
  display:        none;
  flex-direction: column;
  justify-content: center;
  gap:            5px;
  width:          40px;
  height:         40px;
  background:     transparent;
  border:         none;
  cursor:         pointer;
  padding:        4px;
  z-index:        1100;
}

.hamburger span {
  display:        block;
  width:          100%;
  height:         2px;
  background:     var(--gray-100);
  border-radius:  2px;
  transition:     transform .35s ease, opacity .25s ease;
  transform-origin: center;
}

/* Animação X ao abrir */
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* =====================================================
   NAV MOBILE — menu aberto
===================================================== */

@media (max-width: 992px) {

  .hamburger {
    display: flex;
  }

  .nav {
    /* Posição: desce da navbar */
    position:   fixed;
    top:        75px;           /* altura do header mobile */
    left:       0;
    right:      0;
    background: rgba(9, 23, 49, 0.98);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,.08);

    /* Oculto por padrão: sobe para fora da tela */
    transform:  translateY(-110%);
    opacity:    0;
    transition: transform .35s ease, opacity .3s ease;
    z-index:    1050;

    /* Remove o display:none original — agora controlamos via transform */
    display: block !important;
  }

  .nav.open {
    transform: translateY(0);
    opacity:   1;
  }

  .nav ul {
    flex-direction: column;
    gap:            0;
    padding:        16px 0;
  }

  .nav ul li a {
    display:   block;
    padding:   16px 28px;
    font-size: 1rem;
    color:     var(--gray-200);
    border-bottom: 1px solid rgba(255,255,255,.05);
    transition: background .2s ease, color .2s ease;
  }

  .nav ul li:last-child a {
    border-bottom: none;
  }

  .nav ul li a:hover,
  .nav ul li a:focus {
    background: rgba(255,255,255,.06);
    color:      var(--blue-light);
  }
}