/* Mobile and Tablet Optimizations for JobReady Pro */

/* ============================================
   TOUCH TARGETS & INTERACTIONS
   ============================================ */

/* Minimum touch target size (44x44px recommended by Apple/Google) */
button, a, input[type="button"], input[type="submit"], 
.selectable, .clickable, [role="button"] {
  min-height: 44px;
  min-width: 44px;
}

/* Improve touch feedback */
button:active, a:active, .touchable:active {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}

/* Prevent text selection on buttons during tap */
button, .btn, .button {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  -webkit-touch-callout: none;
  user-select: none;
}

/* ============================================
   MOBILE NAVIGATION
   ============================================ */

/* Mobile menu overlay */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Mobile menu drawer - hidden by default, only show on mobile */
.mobile-menu-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 85%;
  max-width: 320px;
  height: 100vh;
  background: white;
  z-index: 50;
  transition: right 0.3s ease;
  overflow-y: auto;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  /* Hide by default - only show on mobile screens */
  display: none;
}

/* Show mobile menu drawer only on mobile screens */
@media (max-width: 767px) {
  .mobile-menu-drawer {
    display: block;
  }
  
  .mobile-menu-drawer.active {
    right: 0;
  }
}

/* Hide mobile menu drawer on desktop screens - MUST be after the base styles */
@media (min-width: 768px) {
  #mobileMenuDrawer,
  #mobileMenuOverlay,
  .mobile-menu-drawer,
  .mobile-menu-overlay,
  .mobile-menu-drawer.active,
  .mobile-menu-overlay.active {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: fixed !important;
    right: -100% !important;
    top: -9999px !important;
    transform: translateX(100%) !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    z-index: -1 !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(100%) !important;
  }
}

/* ============================================
   RESPONSIVE TYPOGRAPHY
   ============================================ */

/* Base font size adjustments for mobile */
@media (max-width: 640px) {
  html {
    font-size: 16px;
  }
  
  h1 {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }
  
  h2 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
  
  h3 {
    font-size: 1.25rem !important;
  }
  
  h4 {
    font-size: 1.1rem !important;
  }
  
  p, span, div {
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
  }
}

/* ============================================
   FORM OPTIMIZATIONS
   ============================================ */

/* Prevent zoom on input focus (iOS) */
@media (max-width: 640px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* Larger touch targets for form elements */
input, textarea, select {
  min-height: 44px;
  padding: 12px 16px;
}

/* Better spacing for form groups on mobile */
@media (max-width: 640px) {
  .form-group {
    margin-bottom: 1.5rem;
  }
  
  label {
    margin-bottom: 0.5rem;
    display: block;
    font-weight: 500;
  }
}

/* ============================================
   CARD & LAYOUT OPTIMIZATIONS
   ============================================ */

/* Card spacing on mobile */
@media (max-width: 640px) {
  .card, .feature-card {
    padding: 1rem !important;
    margin-bottom: 1rem;
  }
  
  .grid {
    gap: 1rem !important;
  }
}

/* Stack columns on mobile */
@media (max-width: 768px) {
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   BUTTON OPTIMIZATIONS
   ============================================ */

/* Full-width buttons on mobile */
@media (max-width: 640px) {
  .btn-primary,
  .btn-secondary,
  button[type="submit"],
  .primary-button {
    width: 100%;
    padding: 14px 20px;
    font-size: 1rem;
    font-weight: 600;
  }
  
  /* Button groups stack vertically */
  .button-group {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .button-group > * {
    width: 100%;
  }
}

/* ============================================
   HEADER OPTIMIZATIONS
   ============================================ */

/* Compact header on mobile */
@media (max-width: 768px) {
  nav {
    padding: 0.75rem 1rem;
  }
  
  /* Hide text labels, show icons only */
  .nav-text {
    display: none;
  }
  
  .nav-icon {
    display: block;
  }
  
  /* Smaller logo on mobile */
  .logo-container {
    scale: 0.9;
  }
}

/* ============================================
   SPACING OPTIMIZATIONS
   ============================================ */

/* Reduce padding on mobile */
@media (max-width: 640px) {
  .container,
  .max-w-7xl,
  .max-w-6xl,
  .max-w-4xl {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  
  .py-16, .py-20, .py-24 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}

/* ============================================
   TABLE OPTIMIZATIONS
   ============================================ */

/* Make tables scrollable on mobile */
@media (max-width: 768px) {
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  table {
    min-width: 600px;
    font-size: 0.875rem;
  }
  
  /* Stack table rows on very small screens */
  .table-responsive {
    display: block;
  }
  
  .table-responsive thead {
    display: none;
  }
  
  .table-responsive tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
  }
  
  .table-responsive td {
    display: block;
    text-align: right;
    padding: 0.5rem 0;
    border: none;
  }
  
  .table-responsive td::before {
    content: attr(data-label);
    float: left;
    font-weight: 600;
    color: #6b7280;
  }
}

/* ============================================
   MODAL & DROPDOWN OPTIMIZATIONS
   ============================================ */

/* Full-screen modals on mobile */
@media (max-width: 640px) {
  .modal,
  .modal-dialog {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
  }
  
  .modal-content {
    height: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }
  
  /* Dropdowns full-width on mobile */
  .dropdown-menu {
    width: 100%;
    left: 0 !important;
    right: 0 !important;
    max-width: 100%;
  }
}

/* ============================================
   IMAGE & MEDIA OPTIMIZATIONS
   ============================================ */

/* Responsive images */
img {
  max-width: 100%;
  height: auto;
}

/* Video containers */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Hide on mobile */
.mobile-hide {
  display: none;
}

@media (min-width: 641px) {
  .mobile-hide {
    display: block;
  }
}

/* Show only on mobile */
.mobile-only {
  display: block;
}

@media (min-width: 641px) {
  .mobile-only {
    display: none;
  }
}

/* Safe area insets for notched devices */
.safe-top {
  padding-top: env(safe-area-inset-top);
}

.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

.safe-left {
  padding-left: env(safe-area-inset-left);
}

.safe-right {
  padding-right: env(safe-area-inset-right);
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Reduce animations on mobile for better performance */
@media (max-width: 768px) {
  * {
    animation-duration: 0.2s !important;
    transition-duration: 0.2s !important;
  }
  
  /* Disable hover effects on touch devices */
  @media (hover: none) {
    .hover\:scale-105:hover,
    .hover\:translateY-2:hover {
      transform: none;
    }
  }
}

/* ============================================
   TABLET SPECIFIC (768px - 1024px)
   ============================================ */

@media (min-width: 768px) and (max-width: 1024px) {
  /* Two column layouts on tablet */
  .grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Medium padding */
  section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  
  /* Slightly larger touch targets */
  button, a, input {
    min-height: 40px;
  }
}

/* ============================================
   LANDSCAPE ORIENTATION
   ============================================ */

@media (max-width: 896px) and (orientation: landscape) {
  /* Reduce vertical spacing in landscape */
  section {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  
  /* Compact header */
  nav {
    padding: 0.5rem 1rem;
  }
}