/* 
 * Mobile-specific CSS fixes for no-job.dev
 * Consolidated from various files to provide consistent mobile experience
 * Uses the VSCode-inspired dark theme
 */

/* 
 * Standardized breakpoints:
 * - Small mobile: 480px
 * - Mobile: 639px
 * - Tablet: 767px
 * - Small desktop: 1023px
 */

/* 
 * Fix 1: Non-fixed header on mobile
 * Ensure that the header and all header elements scroll away on mobile devices
 */
@media (max-width: 639px) {
  /* Primary header styles */
  header.site-header,
  .site-header,
  body .site-header,
  html .site-header {
    position: relative !important;
    position: -webkit-relative !important;
    top: auto !important;
    z-index: auto !important;
    width: 100% !important;
  }
  
  /* Secondary header elements */
  .site-header *,
  .site-header > *,
  body .site-header * {
    position: relative !important;
    position: -webkit-relative !important;
  }
  
  /* Navigation elements */
  .site-header nav,
  .site-header .navbar,
  body .site-header nav {
    position: relative !important;
    width: 100% !important;
  }
  
  /* Ensure site wrapper doesn't have padding that would leave a gap */
  .site-wrapper {
    padding-top: 0 !important;
  }
}

/* 
 * Fix 2: Properly positioned More button on mobile
 * Ensure the floating footer is properly attached to the bottom
 */
@media (max-width: 767px) {
  /* Force the floating footer to be fixed to the bottom with high specificity */
  .floating-footer-container,
  body .floating-footer-container,
  html .floating-footer-container,
  .site-wrapper .floating-footer-container {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: var(--color-gray-900) !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3) !important;
    /* Ensure the element isn't transformed or moved by other styles */
    transform: none !important;
    -webkit-transform: none !important;
    display: block !important;
    height: auto !important;
    min-height: 3.5rem !important;
    max-height: 3.5rem !important;
    overflow: visible !important;
  }
  
  /* Force proper styling on the dropdown container */
  .main-menu-dropdown,
  body .main-menu-dropdown,
  html .main-menu-dropdown,
  .floating-footer-container .main-menu-dropdown {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    display: block !important;
  }
  
  /* Force proper styling on the toggle button */
  #menu-toggle,
  .footer-toggle,
  body #menu-toggle,
  body .footer-toggle,
  html #menu-toggle,
  html .footer-toggle,
  .main-menu-dropdown #menu-toggle,
  .main-menu-dropdown .footer-toggle {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    border-radius: 0 !important;
    padding: var(--spacing-md) !important;
    background-color: var(--color-gray-900) !important;
    border-top: 1px solid var(--color-gray-700) !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 1rem !important;
    font-family: var(--font-family-mono) !important;
    box-shadow: none !important;
    letter-spacing: 0.5px !important;
    height: 3.5rem !important;
    margin: 0 !important;
    /* Ensure the button has proper text alignment */
    text-align: center !important;
    line-height: 1.5 !important;
    /* Ensure proper colors */
    color: var(--color-primary) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
  }
  
  /* Properly style the button icons */
  #menu-toggle i,
  .footer-toggle i {
    margin-right: 8px !important;
    font-size: 1.1rem !important;
  }
  
  /* Adjust body padding to prevent content from being hidden behind the fixed footer */
  body,
  html body {
    padding-bottom: 3.5rem !important;
    margin-bottom: 0 !important;
    min-height: 100% !important;
    height: auto !important;
    /* Ensure body content flows naturally */
    overflow-x: hidden !important;
    position: relative !important;
  }
  
  /* Make sure site container doesn't add its own bottom margin */
  .site-wrapper,
  body .site-wrapper,
  html .site-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 3.5rem !important;
    min-height: calc(100vh - 3.5rem) !important;
    position: relative !important;
  }
  
  /* Ensure menu sections are more visible */
  .menu-section,
  .menu-dropdown-content .menu-section {
    background-color: var(--color-gray-900) !important;
    border: 1px solid var(--color-gray-700) !important;
    margin-bottom: var(--spacing-md) !important;
    border-radius: 4px !important;
  }
  
  /* Move the dropdown content properly to the bottom */
  .menu-dropdown-content {
    bottom: 100% !important;
    top: auto !important;
  }
}

/* 
 * Fix 3: Dropdown menu positioning for mobile
 * Ensure the header dropdown menu appears directly below the header
 */
@media (max-width: 639px) {
  /* Fix for the dropdown menu positioning */
  .main-nav .dropdown {
    position: static !important; /* Override default relative positioning */
  }
  
  .main-nav .dropdown-content {
    position: absolute !important;
    top: 100% !important; /* Position directly below the header */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important; /* Remove the translateX that centers it */
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 999999 !important; /* Very high to ensure it appears above other content */
    background-color: var(--color-gray-900) !important; /* Solid background color */
    border: 1px solid var(--color-gray-700) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5) !important; /* Strong shadow for depth */
  }
  
  /* Remove the arrow for mobile dropdown */
  .main-nav .dropdown-content::before {
    display: none !important;
  }
  
  /* Ensure dropdown items have proper solid background */
  .main-nav .dropdown-content a {
    background-color: var(--color-gray-900) !important;
    border-bottom: 1px solid var(--color-gray-700) !important;
    padding: 12px 16px !important; /* Larger touch targets */
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important; /* Allow text to wrap */
  }
  
  /* Hover state for dropdown items */
  .main-nav .dropdown-content a:hover {
    background-color: var(--color-gray-800) !important;
    border-left: 3px solid var(--color-primary) !important;
  }
}

/* 
 * Fix 4: Mobile responsiveness for feed layout
 * Ensure proper display of feed items on small screens
 */
@media (max-width: 639px) {
  /* Feed layout adjustments */
  .feed-layout {
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 var(--spacing-sm) !important;
  }
  
  .feed-main {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .feed-sidebar {
    width: 100% !important;
    margin-top: var(--spacing-lg) !important;
    position: relative !important;
    top: auto !important;
  }
  
  /* Post adjustments for mobile */
  .post {
    padding: var(--spacing-md) !important;
    margin-bottom: var(--spacing-md) !important;
  }
  
  .post-header {
    flex-direction: row !important;
    gap: var(--spacing-sm) !important;
  }
  
  .post-content {
    font-size: 0.9rem !important;
  }
  
  /* Hide certain elements on mobile */
  .hide-on-mobile {
    display: none !important;
  }
}

/* 
 * Fix 4: Typography and spacing on mobile
 * Ensure text is readable and properly spaced on small screens
 */
@media (max-width: 639px) {
  body {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  
  h1 {
    font-size: 1.5rem !important;
  }
  
  h2 {
    font-size: 1.3rem !important;
  }
  
  h3 {
    font-size: 1.1rem !important;
  }
  
  .container {
    padding: 0 var(--spacing-sm) !important;
  }
  
  /* Ensure proper spacing in the site header */
  .site-header {
    padding: var(--spacing-sm) !important;
  }
  
  /* Logo text adjustments */
  .logo-text {
    font-size: 1.2rem !important;
  }
  
  .logo-subtitle {
    font-size: 0.8rem !important;
  }
}

/* 
 * Fix 5: Small mobile adjustments (480px and below)
 * Special considerations for very small screens
 */
@media (max-width: 480px) {
  /* Further reduce text sizes */
  body {
    font-size: 13px !important;
  }
  
  /* Additional spacing adjustments */
  .container {
    padding: 0 var(--spacing-xs) !important;
  }
  
  /* Simplify user interface for very small screens */
  .post-actions {
    flex-wrap: wrap !important;
    gap: var(--spacing-xs) !important;
  }
  
  /* Make buttons easier to tap */
  button, 
  .button,
  .action-button {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: var(--spacing-sm) !important;
  }
}