/**
 * Styles for sidebar blocks moved to bottom on mobile
 * Only affects mobile devices (768px and below)
 */

/* Mobile-only styles */
@media only screen and (max-width: 768px) {
  /* Container for moved sidebar blocks */
  .mobile-sidebar-blocks-bottom {
    width: 100%;
    padding: 20px 15px;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    margin-top: 30px;
  }
  
  /* Style the blocks when moved to bottom */
  .mobile-sidebar-blocks-bottom > div {
    margin-bottom: 25px;
    padding: 15px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .mobile-sidebar-blocks-bottom > div:last-child {
    margin-bottom: 0;
  }
  
  /* Patreon block specific styles on mobile */
  .mobile-sidebar-blocks-bottom #block-instappraisal-clean-patreonblock {
    text-align: center;
  }
  
  .mobile-sidebar-blocks-bottom #block-instappraisal-clean-patreonblock img {
    max-width: 200px;
    height: auto;
    margin: 0 auto;
  }
  
  /* Full Social Icons block specific styles on mobile */
  .mobile-sidebar-blocks-bottom #block-instappraisal-clean-fullsocialicons {
    text-align: center;
  }
  
  .mobile-sidebar-blocks-bottom #block-instappraisal-clean-fullsocialicons .social-icons-row,
  .mobile-sidebar-blocks-bottom #block-instappraisal-clean-fullsocialicons .social-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    padding: 10px 0;
  }
  
  .mobile-sidebar-blocks-bottom #block-instappraisal-clean-fullsocialicons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #f0f0f0;
    transition: background-color 0.3s ease;
  }
  
  .mobile-sidebar-blocks-bottom #block-instappraisal-clean-fullsocialicons a:hover {
    background-color: #e0e0e0;
  }
  
  .mobile-sidebar-blocks-bottom #block-instappraisal-clean-fullsocialicons img,
  .mobile-sidebar-blocks-bottom #block-instappraisal-clean-fullsocialicons svg {
    width: 24px;
    height: 24px;
  }
  
  /* Hide the specific blocks when they have the mobile-hidden class - more specific selectors */
  .mobile-hidden,
  #block-instappraisal-clean-patreonblock.mobile-hidden,
  #block-instappraisal-clean-fullsocialicons.mobile-hidden {
    display: none !important;
    visibility: hidden !important;
  }
  
  /* Hide the entire sidebar region when mobile blocks are moved - override inline styles */
  .mobile-sidebar-moved aside.layout-sidebar-first,
  .mobile-sidebar-moved .region-sidebar-first,
  .mobile-sidebar-moved .layout-sidebar-first,
  aside.layout-sidebar-first[style*="display: flex"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    justify-content: unset !important;
  }
  
  /* Alternative approach - hide using position if display override doesn't work */
  .mobile-sidebar-moved aside.layout-sidebar-first {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    opacity: 0 !important;
  }
  
  /* Ensure main content takes full width on mobile */
  main[role="main"] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Desktop and tablet styles - ensure nothing changes */
@media only screen and (min-width: 769px) {
  /* Hide mobile container on desktop/tablet */
  .mobile-sidebar-blocks-bottom {
    display: none !important;
  }
  
  /* Ensure sidebar is visible on desktop/tablet */
  aside.layout-sidebar-first {
    display: block !important;
  }
  
  /* Ensure original blocks are visible in sidebar */
  #block-instappraisal-clean-patreonblock,
  #block-instappraisal-clean-fullsocialicons {
    display: block !important;
  }
}