/* PROFESSIONAL HEADER - CLEAN VERSION */
/* This CSS ensures the header is visible and professional */

/* Reset everything that might interfere */
* {
  box-sizing: border-box !important;
}

/* Typography consistency - Use CSS variables */
.header, .header-content, .menu, .menu a, .language-switcher, .nav-contact-btn {
  font-family: var(--font-primary) !important;
}

html, body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

/* PROFESSIONAL HEADER */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 110px;
  background: white;
  color: #1a365d;
  z-index: 1000;
  display: block;
  visibility: visible;
  opacity: 1;
  margin: 0;
  padding: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-content {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  height: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 2rem !important;
  background: transparent !important;
}

.logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: opacity 0.3s ease !important;
  height: 100% !important;
}

.logo:hover {
  opacity: 0.8 !important;
}

.logo-image {
  height: 85px !important;
  width: auto !important;
  max-width: 340px !important;
  object-fit: contain !important;
}

.menu {
  display: flex !important;
  align-items: center !important;
  gap: 2rem !important;
}

.menu a {
  color: #1a365d !important;
  text-decoration: none !important;
  padding: 0.5rem 1rem !important;
  border-radius: 0.375rem !important;
  transition: all 0.3s ease !important;
  display: inline-block !important;
}

.menu a:hover {
  background-color: #1a365d !important;
  color: white !important;
}

/* Contact button styling - More specific to override header-fix.css */
.menu .nav-contact-btn {
  background: linear-gradient(135deg, #0e2050 0%, #2d5a87 100%) !important;
  color: white !important;
  font-weight: 600 !important;
  border: 2px solid #0e2050 !important;
  border-radius: 0.5rem !important;
  padding: 0.75rem 1.5rem !important;
  transition: all 0.3s ease !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  box-shadow: 0 2px 4px rgba(14, 32, 80, 0.3) !important;
  text-decoration: none !important;
}

.menu .nav-contact-btn:hover {
  background: linear-gradient(135deg, #1a2a5c 0%, #3d6b9a 100%) !important;
  border-color: #1a2a5c !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(14, 32, 80, 0.4) !important;
  color: white !important;
}

.language-switcher {
  display: flex !important;
  gap: 0.5rem !important;
}

.language-switcher a {
  padding: 0.25rem 0.75rem !important;
  font-size: 0.875rem !important;
  border-radius: 0.25rem !important;
  background-color: rgba(255,255,255,0.1) !important;
  color: white !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: all 0.3s ease !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}

.language-switcher a:hover {
  background-color: rgba(255,255,255,0.2) !important;
}

.language-switcher a.active {
  background-color: #c53030 !important;
  color: white !important;
  border-color: #c53030 !important;
}

/* Force main content below header */
.main {
  margin-top: 110px !important;
  padding-top: 2rem !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Force hero section below header */
.hero {
  margin-top: 0 !important;
  padding-top: 2rem !important;
}

/* Mobile contact button styling */
@media (max-width: 768px) {
  .menu a {
    color: white !important;
  }
  
  .menu .nav-contact-btn {
    background: linear-gradient(135deg, #0e2050 0%, #2d5a87 100%) !important;
    color: white !important;
    font-weight: 600 !important;
    border: 2px solid #0e2050 !important;
    border-radius: 0.5rem !important;
    padding: 1rem 2rem !important;
    margin: 0.5rem 2rem !important;
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    box-shadow: 0 2px 4px rgba(14, 32, 80, 0.3) !important;
  }
  
  .menu .nav-contact-btn:hover {
    background: linear-gradient(135deg, #1a2a5c 0%, #3d6b9a 100%) !important;
    border-color: #1a2a5c !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(14, 32, 80, 0.4) !important;
    color: white !important;
  }
}