/* Global mobile/responsive rules for student-facing pages */

/* Base container adjustments */
.container {
  width: 100%;
  max-width: 1100px;
  padding: 18px;
  box-sizing: border-box;
}

/* Page header */
.page-header { padding: 24px 12px; }
.page-header h1 { font-size: 1.6rem; }
.page-header p { font-size: 0.95rem; }

/* Navigation - make it wrap on small screens */
.user-nav { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.user-nav a { padding: 8px 10px; font-size: 0.95rem; }

/* Mobile menu button (hidden on desktop) */
.mobile-menu-btn{ display:none; background:transparent; border:0; color:var(--text-secondary); font-size:1.25rem; padding:8px; border-radius:8px }

@media(max-width:900px){
  .mobile-menu-btn{ display:inline-flex }
  .user-nav{ display:none; position:absolute; top:64px; right:12px; flex-direction:column; background:var(--bg-app-header); padding:12px; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.12); z-index:1000 }
  .user-nav.open{ display:flex }
  .user-nav a{ display:block; padding:10px 12px; border-radius:6px }
}

/* Certificates grid - single column on small screens */
@media (max-width: 900px) {
  .certificates-grid { grid-template-columns: 1fr; gap: 14px; }
  .cert-card { min-height: 160px; padding: 14px; }
  .cert-icon { width: 50px; height: 50px; font-size: 1.4rem; }
  .btn-download { width: 100%; padding: 8px; font-size: 0.95rem }
}

/* General responsive tweaks for student module pages */
@media (max-width: 768px) {
  main { padding: 10px 6px; }
  .page-header { padding: 12px 8px; }

  /* Course detail / player thumbnails */
  .course-thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .course-thumbs img { width: 100%; height: auto; object-fit: cover; }

  /* Player controls compact */
  .custom-progress-bar { margin: 0 6px; }
  .speed-btn { padding: 5px 6px; font-size: 0.85rem; }

  /* Forms and inputs touch-friendly */
  input, button, select, textarea { font-size: 1rem; }
}

@media (max-width: 480px) {
  .course-thumbs { grid-template-columns: 1fr; }
  h1 { font-size: 1.4rem; }
  .student-name { font-size: 1.2rem; }
  .body-text { font-size: 0.95rem; }

  /* Ensure certificate preview fits inside viewport */
  .certificate-container { width: calc(100vw - 28px) !important; height: auto !important; padding: 10px !important; }
  .inner-wrap, .border-inner { padding: 10px !important; }

  /* Header compact */
  .logo-area { display:none }
  .app-header { padding: 8px 6px }
  .page-header { padding-top: 12px }

  /* KPI cards: make them compact and centered */
  .kpi-grid { display: grid; grid-template-columns: 1fr; gap: 10px }
  .kpi-card { padding: 12px; border-radius: 10px; font-size: 0.95rem }

  /* Reduce global text sizes slightly for better fit */
  h1.page-title, .page-header h1 { font-size: 1.5rem }
  .page-header p { font-size: 0.9rem }
}