/* Week 8 Responsiveness: BUILDING A COMPLETE WEBSITE */

/* ==========================
   Tablet Styles (min-width: 600px)
   ========================== */

@media (min-width: 600px) {
  nav {
    flex-direction: row;
    gap: 1rem;
  }

  .hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hero-image img {
    margin-top: 1.5rem;
    margin-left: 0;
  }

  .project-list {
    flex-direction: row;
    justify-content: space-between;
  }

  .project-card {
    flex: 1;
  }
}

/* ==========================
   Desktop/Nav Styles (min-width: 768px)
   ========================== */

@media (min-width: 901px) {
  .menu-toggle {
    display: none;
  }

  nav {
    display: flex;
    position: static;
    width: auto;
    flex-direction: row;
    align-items: center;
    margin: 0 auto;
    background: transparent;
    padding: 0;
    border-top: 0;
    box-shadow: none;
    max-height: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    overflow: visible;
  }

  nav a {
    margin: 0 1rem;
    opacity: 1;
    transform: none;
    transition-delay: 0ms;
    box-shadow: 0 4px 0 #222, 0 2px 8px rgba(0,0,0,0.15);
    border: 1px solid transparent;
  }

  .glasses {
    top: 49%;
    transform: translate(-50%, -50%) scale(0.48);
  }
}

/* ==========================
   Desktop Styles (min-width: 1024px)
   ========================== */

@media (min-width: 1024px) {
  header {
    flex-direction: row;
    justify-content: space-between;
    padding: 1.5rem 3rem;
    text-align: left;
  }

  header h1 {
    margin-left: 1rem;
  }

  nav {
    justify-content: flex-end;
    margin-right: 1rem;
  }

  .hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hero p {
    font-size: 1.25rem;
  }

  .hero button {
    font-size: 1.1rem;
  }

  .project-card {
    margin: 0 1rem;
  }
}

/* Responsive: stack image and text on small screens */
@media (max-width: 700px) {
  .about-flex-row {
    flex-direction: column;
    gap: 1em;
  }
  .diverse-skills-img {
      max-width: 100%;
  }
  .biodiverse-img {
    max-width: 100%;
    order: 0;
  }
  .about-header-flex {
    flex-direction: column;
    gap: .5em;
  }
  .about-video-space {
    width: 100%;
    min-height: 180px;
  }
}

/* Responsive: stack featuredprojects on small screens */
@media (max-width: 700px) {
    #home-projects .project-grid {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        padding: 0;
    }
    #home-projects .project-preview {
        max-width: 95vw;
        width: 100%;
    }
}

/* Force mobile nav to stay collapsed unless toggled */
@media (max-width: 767px) {
  nav {
    display: flex;
  }
}

/* Mobile-only glasses adjustment */
@media (max-width: 900px) {
  .glasses {
    top: 45.5%;
    left: 49.5%;
    width: 260px;
    height: 100px;
    transform: translate(-50%, -50%) scale(0.32);
  }
}