/* ============================================================
   MOBILE — Bottom nav + responsive tweaks
   ============================================================ */

/* --- Mobile bottom nav --- */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  background: var(--bg-white);
  border-top: 1px solid var(--border-color);
  padding: 8px 0;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.04);
}

.mobile-bottom-nav .nav-items {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.mobile-bottom-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  color: var(--text-dark-secondary);
  font-size: 10px;
  font-weight: 600;
  text-decoration: none;
  min-width: 64px;
  min-height: 44px;
  justify-content: center;
}

.mobile-bottom-nav .nav-item svg { width: 20px; height: 20px; }
.mobile-bottom-nav .nav-item.whatsapp { color: #25d366; }
.mobile-bottom-nav .nav-item.call { color: var(--primary); }


/* --- Responsive: show mobile bottom nav --- */
@media (max-width: 768px) {
  .mobile-bottom-nav { display: block; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  /* Section padding already handled by layout.css */
}

@media (max-width: 480px) {
  .mobile-bottom-nav .nav-item { font-size: 9px; padding: 4px 8px; min-width: 56px; }
  .mobile-bottom-nav .nav-item svg { width: 18px; height: 18px; }
}

/* --- Touch device fix for parallax --- */
@media (hover: none) {
  .college-hero-bg { background-attachment: scroll !important; }
}

/* --- Ensure all images are responsive --- */
@media (max-width: 768px) {
  img { max-width: 100%; height: auto; }

  /* Prevent horizontal scroll */
  html, body { overflow-x: hidden; }

  /* Make all text breakable */
  * { word-wrap: break-word; overflow-wrap: break-word; }

  /* Ensure touch targets are minimum 44px */
  a, button { min-height: 44px; }

  /* Better tap targets for links in text */
  .footer-col ul li a { padding: 4px 0; display: inline-block; }

  /* Disclaimer text left-align on mobile */
  .disclaimer-bar p { text-align: left; }
}