/* ============================================================
   header.css - sticky header, logo, nav, burger and the contact
   button (present on every page).
   ============================================================ */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* semi-transparent + blur: content (e.g. the hero) shows through */
  background: rgba(30, 36, 48, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-family: "Geologica", "IBM Plex Sans", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0.4px;
  color: #fff;
  white-space: nowrap;
  transition: color 0.2s;
}

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

.nav {
  display: flex;
  gap: 12px;
}

.nav a {
  color: #cfd4dd;
  text-decoration: none;
  font-size: 15px;
  transition: color 0.2s;
}

.nav a:hover {
  color: #fff;
}

/* The current page gets the only accent in the nav. */
.nav a.active {
  color: var(--accent);
}

/* Nav icons render only inside the desktop pills below; on tablets
   and phones the menu stays plain text. */
.nav__icon {
  display: none;
}

/* Desktop nav: the links become calm outline pills - a border and a
   faint fill give them contrast against the translucent header. */
@media (min-width: 901px) {
  .nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.16);
    transition: color 0.2s, background 0.2s, border-color 0.2s;
  }

  .nav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
  }

  .nav a.active {
    color: var(--accent);
    background: rgba(232, 161, 60, 0.08);
    border-color: rgba(232, 161, 60, 0.4);
  }

  .nav__icon {
    display: block;
    width: 17px;
    height: 17px;
  }
}

/* Hamburger button: hidden on desktop, shown on phones (responsive.css). */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.nav-toggle span {
  width: 26px;
  height: 2px;
  background: #fff;
  transition: 0.3s;
}

/* Contact button in the header: a calm outline that fills with the
   accent only on hover - a visible but quiet CTA. */
.btn.header__contact-btn {
  margin-left: 20px;
  padding: 8px 20px;
  font-size: 14px;
  font-family: "IBM Plex Sans", "Segoe UI", Roboto, Arial, sans-serif;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.btn.header__contact-btn:hover {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

.header__contact-icon {
  width: 18px;
  height: 18px;
  opacity: 0.9;
}