/*
  PMB Responsive Mobile Enhancements
  Load this AFTER pmb-merged.css and pmb-merged-js.css
*/

/* ===== Global hardening for mobile ===== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Media should never overflow its container */
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

/* Prevent tiny horizontal scroll caused by long text / badges / inline elements */
body {
  overflow-x: hidden;
}

/* Better wrapping for long words/URLs */
.contact-container,
.registration-container,
.homepage-container,
.scholarship-container,
.program-container,
.schedule-container,
.testimonial-container,
.registration-flow-container {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Touch-friendly taps */
a, button, .btn, [role="button"] {
  touch-action: manipulation;
}

/* Ensure custom buttons never exceed viewport width */
.contact-container .btn-primary,
.contact-container .btn-cta-primary,
.contact-container .btn-cta-secondary,
.contact-container .btn-cta-tertiary,
.homepage-container .btn-hero-primary,
.homepage-container .btn-hero-secondary,
.scholarship-container .btn-primary,
.scholarship-container .btn-detail,
.scholarship-container .btn-apply,
.scholarship-container .btn-cta-primary,
.scholarship-container .btn-cta-secondary,
.scholarship-container .btn-cta-tertiary,
.program-container .btn-primary,
.program-container .btn-detail,
.schedule-container .btn-register,
.testimonial-container .btn-primary {
  max-width: 100%;
}

/* ===== Fluid typography (keeps desktop unchanged, improves small screens) ===== */
@supports (font-size: clamp(1rem, 2vw, 2rem)) {
  .homepage-container .hero-title,
  .contact-container .header-content h1,
  .scholarship-container .hero-content h1,
  .program-container .header-content h1,
  .schedule-container .page-header h1,
  .testimonial-container .header-content h1,
  .registration-flow-container .header-content h1 {
    font-size: clamp(2rem, 4.5vw + 1rem, 3rem);
    line-height: 1.15;
  }

  .contact-container .section-title,
  .scholarship-container .comparison-section h2,
  .scholarship-container .application-process h2,
  .testimonial-container .section-title,
  .schedule-container .section-title h2 {
    font-size: clamp(1.4rem, 2.2vw + 0.9rem, 2.2rem);
    line-height: 1.2;
  }
}

/* ===== Better behavior on small phones ===== */
@media (max-width: 480px) {
  /* Reduce very large paddings that feel "terlalu tinggi" di layar kecil */
  .contact-container .contact-header,
  .scholarship-container .scholarship-hero,
  .program-container .program-header,
  .testimonial-container .testimonial-header,
  .registration-flow-container .registration-header,
  .homepage-container .hero-section {
    padding: 24px 18px;
    border-radius: 18px;
  }

  .homepage-container .hero-content {
    gap: 28px;
  }

  /* Home logo area: avoid taking too much vertical space */
  .homepage-container .university-logo {
    height: 280px;
  }

  /* Filter buttons: horizontal scroll is cleaner than many wrapped rows */
  .program-container .filter-buttons,
  .testimonial-container .filter-options {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    gap: 10px;
  }

  .program-container .filter-btn,
  .testimonial-container .filter-btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* Extra-small devices (<= 360px): remove minimum widths that can cause overflow */
@media (max-width: 360px) {
  .schedule-container .btn-register {
    min-width: 0;
    width: 100%;
  }

  .contact-container .btn-primary,
  .homepage-container .btn-hero-primary,
  .homepage-container .btn-hero-secondary {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ===== Tables: always scroll nicely if any page introduces a wide table later ===== */
.table-responsive,
.comparison-table {
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
  /* Navbar selalu di atas konten */
  .main-header.navbar {
    position: sticky;   /* aman, tidak perlu padding-top body */
    top: 0;
    z-index: 2000;
  }

  /* Pastikan tidak kepotong */
  .main-header.navbar,
  .main-header.navbar .container {
    overflow: visible;
  }

  /* Buat menu collapse jadi overlay di bawah navbar (anti ketutup konten) */
  .main-header.navbar .container {
    position: relative; /* anchor untuk absolute */
  }

  .main-header.navbar .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    z-index: 2001;
    background: #343a40;       /* cocok untuk navbar-dark */
    padding: .75rem 1rem;
    margin-top: .5rem;
    border-radius: .5rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.2);
  }

  /* Biar menu rapih & gampang ditap */
  .main-header.navbar .navbar-nav {
    flex-direction: column;
    width: 100%;
  }
  .main-header.navbar .navbar-nav .nav-link {
    display: block;
    padding: .65rem .75rem;
  }
}