/* ==========================================================================
   STYLES-MOBILE.CSS (Global Foundation)
   Target: Max-Width 768px (Phones & Small Tablets)
   ========================================================================== */

@media screen and (max-width: 768px) {

  /* 1. Locks the background body from scrolling */
body.no-scroll {
  overflow: hidden !important;
  height: 100vh !important; 
  /* touch-action: none; Optional: completely disables touch swiping on the body */
}

/* 2. Hides the To-Top button when the body is locked */
/* Note: Change #toTopBtn to whatever ID or class your actual button uses */
body.no-scroll #toTopBtn {
  display: none !important; 
  opacity: 0 !important;
  pointer-events: none !important;
}
  
  /* --- 1. Layout & Containers --- */
  /* Expand content width to use the full phone screen */
  .content-wrapper {
    width: var(--container-width-mobile) !important; /* 92% */
  }

  .container {
    width: 100%;
    padding: 0;
  }

  .non-index-layout {
    padding-top: var(--header-height-mobile); /* Adjust for smaller nav */
  }

  /* --- 2. Hero Overrides --- */
  .hero-section {
    min-height: var(--hero-height-mobile);
    padding: 8rem 2rem 4rem; /* More top padding for nav clearance */
  }

  /* Shrink huge desktop titles */
  .hero-title-index {
    font-size: 3.2rem; 
    line-height: 1;
    margin-bottom: 1rem;
  }

  .hero-title-non-index {
    font-size: 3rem;
    line-height: 1;
  }

  .hero-subtitle {
    font-size: 1.4rem;
    letter-spacing: 0.3rem;
  }

  .hero-lead {
    font-size: 1.6rem;
    line-height: 1.8;
    width: 100%;
    text-align: center; /* Optional: Looks cleaner on small blocks */
  }

  /* --- 3. Global Text Adjustments --- */
  .section-title {
    font-size: 2.8rem; /* Scaled down from 3.5rem */
  }

  .copy-text {
    font-size: 1.5rem;
    text-align: left; /* Easier to read on mobile than centered */
  }

  /* --- 4. UI Elements --- */
  #backToTop {
    bottom: 2rem;
    right: 2rem;
    font-size: 5rem;
  }
  
  .neon-divider {
    width: 80%; /* Don't touch the edges */
  }
}