/* Mobile menu styles */
.mobile-menu {
  display: none;
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  background-color: #2C3444;
  padding: 1rem;
  border-bottom: 1px solid rgba(200, 169, 119, 0.2);
  backdrop-filter: blur(8px);
  z-index: 40;
}

.mobile-menu.show {
  display: block;
}

.mobile-menu a {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
}

.mobile-menu a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Hide menu button on desktop */
.menu-button {
  display: none;
}

/* Responsive breakpoints */
@media (max-width: 768px) {
  .desktop-menu {
    display: none;
  }
  .menu-button {
    display: block;
  }
  
  /* Adjust hero text size on mobile */
  .hero-title {
    font-size: 2.5rem;
  }
  
  /* Stack hero buttons on mobile */
  .hero-buttons {
    flex-direction: column;
    gap: 1rem;
  }
  
  /* Adjust footer on mobile */
  .footer-content {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }
  
  .footer-nav {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .logo-inline {
    display: none;
  }
  .logo-stacked {
    display: flex;
  }
  
  /* Further reduce hero text size */
  .hero-title {
    font-size: 2rem;
  }
  
  /* Adjust padding */
  .section-padding {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (min-width: 481px) {
  .logo-inline {
    display: block;
  }
  .logo-stacked {
    display: none;
  }
}

/* Form styles */
.form-input {
  @apply w-full bg-white/10 border border-nato-gold/20 rounded-md px-4 py-2 text-white placeholder-white/60 focus:border-nato-gold focus:outline-none transition-colors;
}

.form-label {
  @apply block text-sm font-medium mb-1;
}

.form-hint {
  @apply mt-1 text-xs text-white/60;
}

/* Animation classes */
.hover-scale {
  @apply transform transition-transform duration-500 hover:scale-105;
}

.hover-translate {
  @apply transition-all transform hover:translate-y-[-2px];
}

/* Common utility classes */
.backdrop-blur {
  backdrop-filter: blur(8px);
}

.grid-pattern {
  background-image: linear-gradient(to right, rgb(255, 255, 255) 1px, transparent 1px), 
                    linear-gradient(to bottom, rgb(255, 255, 255) 1px, transparent 1px);
  background-size: 24px 24px;
}