/* ==========================================================================
   Global helpers & layout tweaks
   ========================================================================== */

   html,
   body {
     scroll-behavior: smooth;
   }
   
   body {
     /* Simple dark-mode baseline; can be toggled via .light-theme */
     background-color: #020617; /* slate-950 */
     color: #e5e7eb; /* slate-200 */
   }
   
   body.light-theme {
     background-color: #f3f4f6; /* slate-100 */
     color: #020617; /* slate-900 */
   }
   
   body.light-theme .section-title {
     color: #020617;
   }
   
   /* Basic link focus outline for accessibility */
   a:focus-visible,
   button:focus-visible,
   input:focus-visible,
   textarea:focus-visible {
     outline: 2px solid #22d3ee; /* cyan-400 */
     outline-offset: 2px;
   }
   
   /* ==========================================================================
      Navigation link active state
      ========================================================================== */
   
   .nav-link {
     position: relative;
     color: #e5e7eb; /* slate-200 */
     transition: color 0.2s ease;
   }
   
   .nav-link::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: 0;
     width: 0;
     height: 2px;
     background: linear-gradient(to right, #22d3ee, #6366f1);
     border-radius: 999px;
     transition: width 0.25s ease;
   }
   
   .nav-link:hover {
     color: #22d3ee;
   }
   
   .nav-link.active {
     color: #22d3ee;
   }
   
   .nav-link.active::after {
     width: 100%;
   }
   
   /* ==========================================================================
      Reveal-on-scroll animations
      ========================================================================== */
   
   .reveal {
     opacity: 0;
     transform: translateY(24px);
     transition:
       opacity 0.6s ease-out,
       transform 0.6s ease-out;
   }
   
   .reveal.visible {
     opacity: 1;
     transform: translateY(0);
   }
   
   /* ==========================================================================
      Scroll progress bar
      ========================================================================== */
   
   #scroll-progress {
     transition: width 0.15s ease-out;
   }
   
   /* ==========================================================================
      Back-to-top button
      ========================================================================== */
   
   #back-to-top.visible {
     opacity: 1;
     pointer-events: auto;
     transform: translateY(0);
   }
   
   #back-to-top {
     transform: translateY(8px);
   }
   
   /* ==========================================================================
      Dark / light mode helpers
      ========================================================================== */
   
   /* Icon text can be updated purely through JS; here we just ensure smoothness */
   .theme-icon {
     transition: transform 0.2s ease;
   }
   
   body.light-theme .theme-icon {
     transform: rotate(-20deg);
   }
   
   body.light-theme header {
     background-color: rgba(15, 23, 42, 0.92); /* keep nav fairly dark for contrast */
   }
   
   /* Make cards slightly lighter in light theme */
   body.light-theme .service-card,
   body.light-theme .job-card {
     background-color: rgba(15, 23, 42, 0.9);
   }
   
   /* ==========================================================================
      Expandable job cards
      ========================================================================== */
   
   .job-card .job-body {
     transition: max-height 0.25s ease-out;
   }
   
   /* ==========================================================================
      Misc small tweaks
      ========================================================================== */
   
   .section-title {
     letter-spacing: -0.02em;
   }
   
   /* Prevent text selection flicker during animations on some mobile browsers */
   * {
     -webkit-tap-highlight-color: transparent;
   }