/* ==========================================================================
   NIDS - Common Frontend Stylesheet
   Path: public/css/style.css
   ========================================================================== */

/* Design Tokens & Theme Variables */
:root {
  --background: 0 0% 96%;
  --foreground: 0 0% 9%;
  --card: 0 0% 98%;
  --card-foreground: 0 0% 9%;
  --popover: 0 0% 89%;
  --popover-foreground: 0 0% 9%;
  --primary: 20 90% 48%;
  --primary-foreground: 33 100% 96%;
  --secondary: 0 0% 32%;
  --secondary-foreground: 0 0% 98%;
  --muted: 0 0% 63%;
  --muted-foreground: 0 0% 9%;
  --accent: 47 100% 96%;
  --accent-foreground: 37 92% 50%;
  --destructive: 0 72% 50%;
  --destructive-foreground: 0 85% 97%;
  --border: 0 0% 83%;
  --input: 0 0% 83%;
  --ring: 20 90% 48%;
  --radius: 0.75rem;
}

/* Base Body Styles */
body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Horizontal Overflow Guard
   overflow-x on body alone did not stop the viewport from scrolling sideways,
   so html carries it too. clip rather than hidden: hidden forces the other
   axis to auto and turns body into a scroll container, which breaks the
   sticky header. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

/* AOS parks fade-left / fade-right elements 100px to the side until they
   scroll into view. On phones that stuck out past the viewport and opened a
   gap on the right while scrolling, so keep the fade and drop the slide. */
@media (max-width: 767.98px) {
  [data-aos="fade-left"],
  [data-aos="fade-right"] {
    transform: none !important;
  }
}

/* Mobile Dropdown Navigation Transitions */
#mobileNavMenu {
  transition: all 0.25s ease-in-out;
}

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

::-webkit-scrollbar-track {
  background: hsl(var(--background));
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--primary));
}