/* Blog Sticky Form - CSS for Fixed Sidebar Form (controlled by JavaScript) */

/* Only apply sticky behavior on desktop screens (min-width: 992px for Bootstrap lg breakpoint) */
@media (min-width: 992px) {
  
  /* Make the blog content section relative positioned to contain the sticky form */
  #blog-content {
    position: relative;
    max-height: none !important;
    overflow: visible !important;
  }
  
  #blog-content .container {
    max-height: none !important;
    overflow: visible !important;
  }
  
  #blog-content .container > .row {
    max-height: none !important;
    overflow: visible !important;
  }

  /* Wrapper for the form column to handle sticky positioning */
  #blog-content .col-lg-4 {
    position: relative;
    height: fit-content;
  }

  /* Ensure blog posts column has no height restrictions */
  #blog-content .col-lg-8,
  #blog-content .col-lg-8 > *,
  #blog-content .col-lg-8 .row {
    max-height: none !important;
    overflow: visible !important;
    height: auto !important;
  }

  /* Sticky form card styling - JavaScript will handle position changes */
  #blog-content .col-lg-4 .contact-form-card,
  #blog-content .col-lg-4 .footer-contact-form {
    max-height: calc(100vh - 120px); /* Prevent form from being taller than viewport */
    overflow-y: auto; /* Add scroll if form content is too tall */
    z-index: 1000 !important; /* Ensure form stays above other content */
    transition: all 0.3s ease;
    will-change: transform; /* Optimize rendering */
  }

  /* Smooth scrollbar styling for form if overflow occurs */
  #blog-content .col-lg-4 .contact-form-card::-webkit-scrollbar,
  #blog-content .col-lg-4 .footer-contact-form::-webkit-scrollbar {
    width: 6px;
  }

  #blog-content .col-lg-4 .contact-form-card::-webkit-scrollbar-track,
  #blog-content .col-lg-4 .footer-contact-form::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
  }

  #blog-content .col-lg-4 .contact-form-card::-webkit-scrollbar-thumb,
  #blog-content .col-lg-4 .footer-contact-form::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
  }

  #blog-content .col-lg-4 .contact-form-card::-webkit-scrollbar-thumb:hover,
  #blog-content .col-lg-4 .footer-contact-form::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
}

/* For tablet and mobile devices, keep the form in normal flow (non-sticky) */
@media (max-width: 991px) {
  #blog-content .col-lg-4 .contact-form-card,
  #blog-content .col-lg-4 .footer-contact-form {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  /* Ensure form wrapper doesn't constrain reCAPTCHA */
  #blog-content .footer-contact-form .contact-form,
  #blog-content .footer-contact-form form {
    overflow: visible !important;
    width: 100%;
  }
  
  /* Fix reCAPTCHA container on mobile */
  #blog-content .g-recaptcha {
    margin: 15px auto;
    display: flex;
    justify-content: center;
    overflow: visible !important;
    width: 100%;
  }
  
  /* Ensure captcha wrapper has no overflow constraint */
  #blog-content .captcha-wrapper,
  #blog-content .homepage-captcha-submit-wrapper {
    overflow: visible !important;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  /* Sidebar should not clip content */
  #blog-content .sidebar {
    overflow: visible !important;
  }
  
  #blog-content .col-lg-4 {
    overflow: visible !important;
  }
}

/* Mobile reCAPTCHA handling for blog forms */
@media (max-width: 480px) {
  #blog-content .footer-contact-form {
    padding: 15px 12px !important;
    overflow: visible !important;
  }
  
  #blog-content .footer-contact-form .form-group:has(.g-recaptcha) {
    overflow: visible !important;
    padding: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  #blog-content .footer-contact-form .g-recaptcha {
    margin: 10px auto !important;
  }
}

@media (max-width: 360px) {
  #blog-content .footer-contact-form {
    padding: 15px 10px !important;
  }
}