/* =======================================================
   📱 Mobile-only stylesheet
   Unified layout for all pages (≤768px wide)
   ======================================================= */
@media (max-width: 768px) {

  html, body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    background: #000;
    color: #fff;
    font-family: 'Khula', sans-serif;
  }

  img, video, iframe, embed {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* Add room below the fixed navbar */
  body {
    padding-top: 100px; /* adjust if needed */
  }

  /* =======================================================
     ✅ NAVIGATION
     ======================================================= */
  nav.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: #000;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 24px 20px;  /* slightly more padding to lower logo */
    z-index: 1000;
  }

  /* Hide hamburger if any remnants exist */
  .nav-toggle {
    display: none !important;
  }

  /* Left-side logo on all pages */
  nav .logo {
    display: block;
    color: #fff;
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    white-space: nowrap;
    margin-top: 2px;
    text-decoration: none;
  }

  /* Hide the logo ONLY on the homepage */
  body#index-page nav .logo {
    display: none !important;
  }

  /* Right-side stacked links (identical across all pages) */
  .nav-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 8px;
    margin: 0;
    padding: 0;
  }

  .nav-links a {
    font-family: 'Khula', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
  }

  .nav-links a:hover {
    opacity: 1;
    text-decoration: underline;
  }

  /* =======================================================
     ✅ HERO SECTION (Homepage)
     ======================================================= */
  body#index-page .hero {
    padding: 0 20px;
    text-align: left;
    margin-top: 0;
  }

  body#index-page .hero h1 {
    font-family: 'Inter', sans-serif;
    font-size: clamp(2.4rem, 8vw, 3rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 20px;
  }

  body#index-page .hero .intro,
  body#index-page .hero .subtitle {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 90%;
  }

  .socials {
    margin-top: 30px;
    gap: 24px;
  }

  .socials a img {
    width: 40px;
    height: 40px;
    opacity: 0.85;
  }

  /* =======================================================
     ✅ ABOUT PAGE
     ======================================================= */
  .about-header h1 {
    font-size: 2rem;
  }

  .about-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    margin-bottom: 40px;
    padding: 0 20px;
  }

  .about-photo {
    width: 100px;
    height: 100px;
    margin-right: 0;
  }

  .about-text h2 {
    font-size: 1.4rem;
    margin-bottom: 10px;
  }

  .about-text p {
    font-size: 1rem;
    line-height: 1.6;
  }

  /* =======================================================
     ✅ PROJECTS / PUBLICATIONS
     ======================================================= */
  .projects-header h1 {
    font-size: 2rem;
  }

  .pubs-section {
    padding: 0 20px;
  }

  .publication {
    padding: 1.2rem 1rem;
  }

  .publication h3 {
    font-size: 1.2rem;
  }

  .pub-description {
    font-size: 0.95rem;
  }

  /* =======================================================
     ✅ RESUME PAGE
     ======================================================= */
  .resume-header h1 {
    font-size: 2rem;
  }

  .resume-pdf {
    height: 80vh;
  }

  /* =======================================================
     ✅ CONTACT PAGE
     ======================================================= */
  .contact-page {
    padding: 0 20px;
  }

  .contact-page h1 {
    font-size: 2rem;
  }

  .contact-intro {
    font-size: 1rem;
    line-height: 1.6;
  }

  .contact-container {
    flex-direction: column;
    gap: 30px;
  }

  .contact-form, .calendar-booking {
    min-width: 100%;
  }

  .calendar-booking .calendly-inline-widget {
    height: 600px !important;
  }

  /* =======================================================
     ✅ HOMEPAGE NAVIGATION OVERRIDES
     ======================================================= */
  body#index-page nav.navbar {
    padding: 24px 20px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    text-align: right !important;
  }

  body#index-page nav.navbar ul.nav-links {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    text-align: right !important;
    width: auto !important;
    margin: 0 20px 0 auto !important;
    padding: 0 !important;
    gap: 8px !important;
  }

  body#index-page nav.navbar ul.nav-links li,
  body#index-page nav.navbar ul.nav-links a {
    width: auto !important;
    text-align: right !important;
    display: block;
  }

  /* remove hero offset for home */
  body#index-page .hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* ===== HOMEPAGE: hard-pin the nav links to top-right ===== */
body#index-page nav.navbar {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  padding: 24px 20px !important;
}

/* hide the logo on home */
body#index-page nav.navbar .logo { display: none !important; }

/* place the list at the top-right and stack it */
body#index-page nav.navbar .nav-links {
  position: absolute !important;
  top: 24px !important;
  right: 20px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;

  text-align: right !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 8px !important;
}

/* make sure items don’t stretch */
body#index-page nav.navbar .nav-links li,
body#index-page nav.navbar .nav-links a {
  width: auto !important;
  display: block;
  text-align: right !important;
}
/* Tighten global offset under fixed nav */
body { padding-top: 100px !important; }  /* try 80px if you want it tighter */

/* Reduce per-page header padding that was set with !important in styles.css */
.about-header,
.projects-header,
.resume-header,
.contact-page h1 {
  padding-top: 80px !important;  /* was 140px */
}

/* Resume page also has extra padding in its own rule — clamp it too */
.resume-header {
  padding: 80px 20px 24px 20px !important;  /* top | sides | bottom */
}

/* Projects header has big top padding from styles — trim it */
.projects-header {
  padding: 100px 20px 40px 20px !important;
}

/* Contact wrapper sometimes adds space—keep it compact */
.contact-page {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* === Fix hero text clipping under navbar on homepage === */
body#index-page nav.navbar {
  background: #000 !important;
  z-index: 1000 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

/* Give the hero just a little breathing room to clear nav */
body#index-page .hero {
  padding-top: 100px !important;  /* just enough to clear stacked nav, not too much */
}
/* Hide inline PDF on phones; show the open-in-new-tab button */
@media (max-width: 768px) {
  .resume-pdf { display: none; }
  .resume-open-mobile { display: block; text-align: center; margin: 16px 0 40px; }
  .resume-open-mobile a {
    display: inline-block;
    padding: 14px 18px;
    border-radius: 10px;
    background: #fff;
    color: #000;
    text-decoration: none;
    font-weight: 700;
  }
}
/* Pull content up on the resume page */
.resume-header {
  padding: 90px 20px 12px 20px !important; /* lower from 140px */
}
.resume-container {
  max-width: 900px;
  margin: 12px auto 60px auto;            /* reduce big top gap */
  padding: 0 20px;
}

/* Make the iframe visible above the fold */
.resume-pdf {
  width: 100%;
  height: calc(100vh - 180px);            /* header + nav allowance */
  border: none;
}
/* ✅ Fix resume visibility on mobile */
@media (max-width: 768px) {
  .resume-container {
    padding: 0 20px;
    margin-top: 40px !important; /* ensures it's pushed below the fixed navbar */
  }

  .resume-pdf {
    display: block;
    width: 100%;
    height: 80vh !important;  /* force visible height */
    border: none;
  }
}
@media (max-width: 768px) {
  /* Show the button */
  .resume-open-mobile { 
    display: block !important; 
    text-align: center; 
    margin: 12px 20px 24px; 
  }
  .resume-open-mobile a {
    display: inline-block;
    padding: 12px 16px;
    border-radius: 10px;
    background: #fff;
    color: #000;
    text-decoration: none;
    font-weight: 700;
  }

  /* If you want button only on mobile, hide the iframe */
  .resume-pdf { display: none !important; }
}
@media (max-width: 768px) {
  /* show button */
  .resume-open-mobile {
    display: block !important;
    text-align: center;
    margin: 12px 20px 24px;
  }
  .resume-open-mobile a {
    display: inline-block;
    padding: 12px 16px;
    border-radius: 10px;
    background: #fff;
    color: #000;
    text-decoration: none;
    font-weight: 700;
  }

  /* hide embedded viewer on phones */
  .resume-pdf { display: none !important; }
}
@media (max-width: 768px) {
  iframe[src*="calendly.com"] {
    width: 100% !important;
    min-height: 700px !important;
    border: none !important;
  }

  .calendly-inline-widget,
  .calendly-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
  }
}

}