/* Responsive Design Fixes for Bhakti Hub */

/* ===== GLOBAL RESPONSIVE FIXES ===== */

/* Prevent horizontal scrolling on mobile */
@media (max-width: 767.98px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  
  #root {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  
  /* Force all elements to respect container width */
  * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Aggressive overflow prevention */
  .site-mobile-menu,
  .navbar,
  .site-footer,
  .container,
  .row,
  .col,
  [class*="col-"] {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  /* Ensure no element can cause horizontal scroll */
  body > * {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}

/* ===== NAVIGATION RESPONSIVE FIXES ===== */

/* Mobile Navigation Improvements */
@media (max-width: 991.98px) {
  /* Ensure mobile menu collapses properly */
  .navbar-collapse:not(.show) {
    display: none !important;
  }
  
  .navbar-collapse.show {
    display: block !important;
  }
  
  /* Auto-hide mobile menu when clicking outside */
  .navbar-collapse.show {
    animation: fadeIn 0.3s ease-in;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}
@media (max-width: 991.98px) {
  /* Ensure mobile menu is properly styled */
  .site-mobile-menu {
    width: 100% !important;
    max-width: 320px;
    overflow-x: hidden;
  }
  
  /* Force navbar to be responsive */
  .navbar {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  
  .navbar .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    overflow-x: hidden !important;
  }
  
  /* Ensure navbar brand doesn't overflow */
  .navbar-brand {
    max-width: 60% !important;
    overflow: hidden !important;
  }
  
  .navbar-brand img.logo {
    max-width: 100% !important;
    height: auto !important;
  }
  
  .site-mobile-menu .site-mobile-menu-body {
    padding: 0 15px 20px 15px;
    overflow-x: hidden;
  }
  
  .site-mobile-menu .site-nav-wrap > li > a {
    padding: 12px 15px;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .site-mobile-menu .site-nav-wrap > li > ul > li > a {
    padding-left: 30px;
    font-size: 14px;
  }
  
  /* Improve navbar brand/logo on mobile */
  .navbar-brand img.logo {
    max-width: 120px;
    height: auto;
  }
  
  /* Better mobile menu button */
  .navbar-toggler {
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
  
  .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
  }
}

/* Small mobile devices */
@media (max-width: 575.98px) {
  .navbar-brand img.logo {
    max-width: 80px !important;
  }
  
  .navbar-brand {
    max-width: 50% !important;
  }
  
  .site-mobile-menu {
    max-width: 280px;
  }
  
  .site-mobile-menu .site-nav-wrap > li > a {
    padding: 10px 12px;
    font-size: 15px;
  }
  
  /* Force all containers to be responsive */
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    overflow-x: hidden !important;
  }
}

/* ===== FOOTER RESPONSIVE FIXES ===== */

/* Footer mobile improvements */
@media (max-width: 767.98px) {
  .site-footer {
    padding: 10px 0;
    font-size: 12px;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  
  .site-footer .container {
    padding-left: 15px;
    padding-right: 15px;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  .site-footer .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  
  .site-footer .col-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
  }
  
  .site-footer .widget {
    margin-bottom: 10px;
  }
  
  .site-footer .widget h3,
  .site-footer .widget .h3 {
    font-size: 11px;
    margin-bottom: 8px;
  }
  
  .site-footer .widget .links {
    width: 100%;
  }
  
  .site-footer .widget .links li {
    margin-bottom: 5px;
  }
  
  /* Ensure footer doesn't overflow */
  .site-footer p {
    margin-bottom: 5px;
    word-wrap: break-word;
  }
  
  /* Language switcher in footer */
  .site-footer .language-switcher {
    margin: 10px 0;
    width: auto !important;
    max-width: 180px !important;
  }
  
  /* Language switcher responsive sizing */
  .MuiSelect-root[style*="maxWidth: 180px"] {
    max-width: 150px !important;
    min-width: auto !important;
  }
  
  /* Force proper select styling */
  .MuiSelect-root {
    min-height: 36px !important;
  }
  
  .MuiSelect-select {
    padding: 8px 12px !important;
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }
  
  /* Ensure proper spacing for dropdown icon */
  .MuiSelect-select .MuiSvgIcon-root {
    margin-left: 8px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    right: 0 !important;
  }
  
  /* Override any conflicting styles */
  .MuiSelect-select.MuiSelect-select {
    padding-right: 32px !important;
  }
}

@media (max-width: 575.98px) {
  /* Language switcher for very small screens */
  .MuiSelect-root[style*="maxWidth: 180px"] {
    max-width: 120px !important;
    min-width: auto !important;
  }
  
  /* Ensure proper height and spacing on very small screens */
  .MuiSelect-select {
    padding: 4px 6px !important;
    font-size: 0.65rem !important;
    line-height: 1.1 !important;
    min-height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }
  
  /* Ensure proper spacing for dropdown icon on very small screens */
  .MuiSelect-select .MuiSvgIcon-root {
    margin-left: 4px !important;
    flex-shrink: 0 !important;
    font-size: 0.8rem !important;
    position: relative !important;
    right: 0 !important;
  }
  
  /* Override any conflicting styles */
  .MuiSelect-select.MuiSelect-select {
    padding-right: 24px !important;
  }
  
  .MuiSelect-select {
    padding: 6px 8px !important;
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }
  
  /* Ensure proper spacing for dropdown icon on small screens */
  .MuiSelect-select .MuiSvgIcon-root {
    margin-left: 6px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    right: 0 !important;
  }
  
  /* Override any conflicting styles */
  .MuiSelect-select.MuiSelect-select {
    padding-right: 28px !important;
  }
  
  .site-footer .language-switcher {
    max-width: 120px !important;
  }
  
  /* Debug overlay responsive fixes */
  .jwt-admin-debug {
    width: 90% !important;
    max-width: 90% !important;
    right: 5% !important;
    left: 5% !important;
    font-size: 10px !important;
    padding: 8px !important;
  }
  
  .jwt-admin-debug p {
    margin: 2px 0 !important;
    font-size: 10px !important;
    word-wrap: break-word !important;
  }
}

@media (max-width: 575.98px) {
  .site-footer {
    padding: 8px 0;
    font-size: 11px;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  
  .site-footer .container {
    padding-left: 10px;
    padding-right: 10px;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  .site-footer .widget {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  .site-footer p {
    width: 100% !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  .site-footer .widget h3,
  .site-footer .widget .h3 {
    font-size: 10px;
  }
}

/* ===== GENERAL RESPONSIVE IMPROVEMENTS ===== */

/* Container improvements for mobile */
@media (max-width: 767.98px) {
  .container {
    padding-left: 15px;
    padding-right: 15px;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* Ensure content doesn't overflow */
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  .col, [class*="col-"] {
    padding-left: 7.5px;
    padding-right: 7.5px;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* Fix content overflow issues */
  .text, .post-entry, .content-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Fix any elements that might be causing horizontal scroll */
  * {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
}

/* Typography improvements for mobile */
@media (max-width: 767.98px) {
  h1, .h1 {
    font-size: 1.75rem;
  }
  
  h2, .h2 {
    font-size: 1.5rem;
  }
  
  h3, .h3 {
    font-size: 1.25rem;
  }
  
  h4, .h4 {
    font-size: 1.1rem;
  }
  
  h5, .h5 {
    font-size: 1rem;
  }
  
  h6, .h6 {
    font-size: 0.9rem;
  }
  
  p {
    font-size: 0.9rem;
    line-height: 1.6;
  }
}

/* Button improvements for mobile */
@media (max-width: 767.98px) {
  .btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
  }
  
  .btn-lg {
    padding: 0.5rem 1rem;
    font-size: 1rem;
  }
  
  .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
  }
}

/* Card improvements for mobile */
@media (max-width: 767.98px) {
  .card {
    margin-bottom: 1rem;
  }
  
  .card-body {
    padding: 1rem;
  }
  
  .card-title {
    font-size: 1.1rem;
  }
  
  .card-text {
    font-size: 0.9rem;
  }
}

/* Form improvements for mobile */
@media (max-width: 767.98px) {
  .form-control {
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  .form-label {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
  }
  
  .form-text {
    font-size: 0.8rem;
  }
}

/* Table improvements for mobile */
@media (max-width: 767.98px) {
  .table-responsive {
    font-size: 0.85rem;
  }
  
  .table th,
  .table td {
    padding: 0.5rem 0.25rem;
  }
}

/* Modal improvements for mobile */
@media (max-width: 767.98px) {
  .modal-dialog {
    margin: 0.5rem;
  }
  
  .modal-body {
    padding: 1rem;
  }
  
  .modal-footer {
    padding: 0.75rem 1rem;
  }
}

/* ===== SPECIFIC COMPONENT FIXES ===== */

/* Home page carousel improvements */
@media (max-width: 767.98px) {
  .carousel-item {
    height: 200px;
  }
  
  .carousel-caption {
    padding: 10px;
  }
  
  .carousel-caption h5 {
    font-size: 1.1rem;
  }
  
  .carousel-caption p {
    font-size: 0.9rem;
  }
}

/* Hub map improvements */
@media (max-width: 767.98px) {
  #hubs .section-content-holder {
    min-height: 300px;
  }
  
  .hubs-map-container {
    height: 300px;
  }
  
  /* Google Maps container responsive improvements */
  .MuiBox-root[style*="minHeight: 400px"] {
    min-height: 400px !important;
  }
  
  /* Ensure map container has proper height on mobile */
  .MuiBox-root[style*="position: relative"] {
    min-height: 400px !important;
  }
  
  /* Make map go full width on mobile */
  #hubs .block.content-1170 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* Override any center-relative positioning */
  #hubs .center-relative {
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }
  
  #hubs .section-content-holder {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Remove container padding for map section */
  #hubs .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
  
  #hubs .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  #hubs .col-md-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Ensure map itself goes edge to edge */
  #hubs .MuiBox-root {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  
  /* Ensure the actual map element goes full width */
  #hubs .MuiBox-root > div {
    width: 100% !important;
    max-width: 100vw !important;
  }
  
  /* Override any Google Maps container styling */
  #hubs .MuiBox-root > div > div {
    width: 100% !important;
    max-width: 100vw !important;
  }
  
  /* Map filters should still have some padding */
  #hubs .MuiPaper-root[style*="display: grid"] {
    margin: 0 15px 15px 15px !important;
    border-radius: 8px !important;
  }
}

/* Desktop map improvements */
@media (min-width: 768px) {
  .MuiBox-root[style*="position: relative"] {
    min-height: 600px !important;
  }
  
  /* Google Maps container responsive improvements */
  .MuiBox-root[style*="minHeight: 400px"] {
    min-height: 600px !important;
  }
  
  /* Map filters responsive improvements */
  .MuiPaper-root[style*="display: grid"] {
    padding: 1rem !important;
  }
  
  .MuiPaper-root[style*="display: grid"] > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  /* Search field responsive improvements */
  .MuiTextField-root[style*="width: 50%"] {
    width: 100% !important;
    min-width: auto !important;
  }
}

/* Post and event improvements */
@media (max-width: 767.98px) {
  .post-content-body p,
  .event-content-body p {
    font-size: 0.9rem;
    line-height: 1.6;
  }
  
  #post-content,
  #event-content {
    font-size: 0.9rem;
  }
  
  /* Post and event page specific improvements */
  .post-entry h6,
  .text h6 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
  }
  
  .post-entry .badge,
  .text .badge {
    font-size: 0.7rem;
    margin-bottom: 0.5rem;
  }
  
  /* Comment section improvements */
  .comment-wrap {
    padding: 1rem 0;
  }
  
  .comment-wrap h3 {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
  }
  
  .comment-list .comment {
    margin-bottom: 1.5rem;
  }
  
  .comment-body h3 {
    font-size: 1rem;
  }
  
  .comment-body p {
    font-size: 0.9rem;
  }
  
  .comment .vcard img {
    max-width: 40px;
    height: auto;
  }
  
  /* Back button improvements */
  .btn-outline-primary {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
  }
}

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

/* Hide elements on mobile */
@media (max-width: 767.98px) {
  .d-mobile-none {
    display: none !important;
  }
}

/* Show elements only on mobile */
@media (min-width: 768px) {
  .d-mobile-only {
    display: none !important;
  }
}

/* Text alignment for mobile */
@media (max-width: 767.98px) {
  .text-mobile-center {
    text-align: center !important;
  }
  
  .text-mobile-left {
    text-align: left !important;
  }
  
  .text-mobile-right {
    text-align: right !important;
  }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */

/* Ensure proper touch targets on mobile */
@media (max-width: 767.98px) {
  a, button, input, select, textarea {
    min-height: 44px;
    min-width: 44px;
  }
  
  .nav-link {
    padding: 0.75rem 0.5rem;
  }
  
  .dropdown-item {
    padding: 0.75rem 1rem;
  }
}

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

/* Reduce animations on mobile for better performance */
@media (max-width: 767.98px) {
  * {
    animation-duration: 0.3s !important;
    transition-duration: 0.3s !important;
  }
}

/* ===== PRINT STYLES ===== */

@media print {
  .site-footer {
    position: static !important;
    margin-top: 2rem;
  }
  
  .navbar {
    display: none !important;
  }
  
  .site-mobile-menu {
    display: none !important;
  }
}

/* ===== AGGRESSIVE LANGUAGE SWITCHER FIXES ===== */

/* Force proper icon positioning for Material-UI select */
.MuiSelect-select .MuiSvgIcon-root {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: auto !important;
  margin-left: 0 !important;
  z-index: 1 !important;
}

/* Ensure text doesn't overlap with icon */
.MuiSelect-select {
  text-align: left !important;
  padding-right: 32px !important;
  position: relative !important;
  cursor: pointer !important;
  user-select: none !important;
}

/* Make the entire select control clickable */
.MuiSelect-root {
  cursor: pointer !important;
}

@media (max-width: 767.98px) {
  .MuiSelect-select {
    padding-right: 28px !important;
  }
  .MuiSelect-select .MuiSvgIcon-root {
    right: 6px !important;
  }
}

@media (max-width: 575.98px) {
  .MuiSelect-select {
    padding-right: 24px !important;
  }
  .MuiSelect-select .MuiSvgIcon-root {
    right: 4px !important;
  }
}