/* Performance optimization for smooth scrolling on all devices */

/* Apply optimizations to all devices that support backdrop-filter */
@supports (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)) {
  /* Reduce blur intensity for better performance */
  .navbar_menu {
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
  }
  
  .menu-icon {
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
  }
  
  /* Optimize column items - reduce blur radius */
  .column_item {
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
  }
  
  /* Add GPU acceleration to cover section without changing transforms */
  .cover {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  /* Optimize the background image */
  .cover::before {
    will-change: auto;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  
  /* Reduce blur on interactive elements */
  .footer4_resume-link,
  .email_link {
    -webkit-backdrop-filter: blur(4px) !important;
    backdrop-filter: blur(4px) !important;
  }
  
  /* Remove backdrop-filter from text tags - they don't need it */
  .text-tag {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background-color: rgba(255, 255, 255, 0.3) !important;
  }
  
  /* Remove the performance-heavy filter from headshot */
  .headshot {
    filter: none !important;
  }
}

/* Default: Justify on desktop */
.about .text-size-medium {
  text-align: justify;
}

/* On mobile (600px and below): Align left */
@media (max-width: 600px) {
  .about .text-size-medium {
    text-align: left;
  }
}

/* Mobile (<=479px): the two project columns stack, which would otherwise show
   all of the left column (Cloudflare, Scoutify, CNN) and then all of the right
   (Votely, McGill, Free). Interleave them so cards read left-to-right,
   top-to-bottom like desktop: Cloudflare, Votely, Scoutify, McGill, CNN, Free.
   display:contents flattens the .column wrappers so their cards become direct
   flex children of .columns, letting `order` interleave across both. */
@media screen and (max-width: 479px) {
  .columns .column {
    display: contents;
  }
  .column.left  .column_item:nth-child(1) { order: 1; } /* Cloudflare */
  .column.right .column_item:nth-child(1) { order: 2; } /* Votely */
  .column.left  .column_item:nth-child(2) { order: 3; } /* Scoutify */
  .column.right .column_item:nth-child(2) { order: 4; } /* McGill */
  .column.left  .column_item:nth-child(3) { order: 5; } /* CNN */
  .column.right .column_item:nth-child(3) { order: 6; } /* Free in Quotes */
}