/* ==========================================================================
   EHS EQUIPMENT - Industrial High-Contrast Precision Design System
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Chivo:ital,wght@0,700;0,800;0,900;1,700&family=Space+Grotesk:wght@500;700&family=Work+Sans:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

/* --- Reset & Base Layer --- */
@layer base {
  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: #111415;
    color: #e1e2e4;
    font-family: 'Work Sans', sans-serif;
  }

  main > :first-child {
    margin-top: 0 !important;
  }
  
  main > :last-child {
    margin-bottom: 0 !important;
  }
}

/* --- Industrial Scrollbar --- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #0c0f10;
}

::-webkit-scrollbar-thumb {
  background: #282a2c;
  border: 1px solid #111415;
}

::-webkit-scrollbar-thumb:hover {
  background: #d91a1a;
}

/* --- Material Symbols Alignment --- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  line-height: 1;
}

/* --- Mechanical Hard Shadows (DESIGN.md) --- */
.shadow-hard-black {
  box-shadow: 4px 4px 0px 0px #000000;
}

.shadow-hard-black-lg {
  box-shadow: 6px 6px 0px 0px #000000;
}

.shadow-hard-black-xl {
  box-shadow: 8px 8px 0px 0px #000000;
}

.shadow-hard-red {
  box-shadow: 4px 4px 0px 0px #d91a1a;
}

.shadow-hard-white {
  box-shadow: 3px 3px 0px 0px #ffffff;
}

/* Tactile button press effect */
.btn-tactile:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0px 0px #000000 !important;
}

/* --- Navigation Active Styles --- */
.nav-link-active {
  background-color: #282a2c !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-bottom: 2px solid #d91a1a;
}

/* --- Mobile Menu Drawer --- */
#mobile-menu {
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

#mobile-menu.hidden {
  display: none;
}

/* --- Technical Chip Accent --- */
.chip-technical {
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}