/* ========================================================================
   NASTF Custom Block Styles
   Custom styles for NASTF WordPress blocks that go beyond Tailwind utilities
   ======================================================================== */

/* Import Tailwind CSS base */
@import 'tailwind.css';

/* ========================================================================
   Navigation Styles (Main Navigation & Main Nav Global)
   ======================================================================== */

/* Smooth scrolling for the entire page */
html {
  scroll-behavior: smooth;
}

/* Navigation hover effects with NASTF brand colors */
nav a:hover {
  color: #d50032 !important;
  transition: color 0.2s ease-in-out;
}

/* Active navigation link styling - RED BACKGROUND (#d50032) */
nav a.active {
  background-color: #d50032 !important;
  color: #ffffff !important;
  font-weight: 500;
  padding: 10px 24px !important;
  display: flex;
  align-items: center;
  height: 94px;
}

/* Mobile menu slide-in animation */
#mobile-menu-panel,
#mobile-menu-panel-global {
  transition: transform 0.3s ease-in-out;
}

/* Ensure proper spacing for fixed navigation */
body {
  scroll-padding-top: 80px;
}

/* Custom red hover color for navigation */
.hover\:text-red-600:hover {
  color: #d50032 !important;
}

/* Focus states - remove black outline, use red ring instead */
nav a:focus {
  outline: none !important;
  box-shadow: none !important;
}

nav a:focus-visible {
  outline: 2px solid #d50032;
  outline-offset: 2px;
}

/* Mobile menu backdrop blur effect */
#mobile-menu-overlay,
#mobile-menu-overlay-global {
  backdrop-filter: blur(4px);
}