/* Mobile CSS Fixes for AIPpetizer Website */
/* Following Bootstrap 4/5 breakpoint system */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .full-screen.effect-section {
    padding-top: 80px;
    min-height: calc(100vh - 80px);
  }
  
  .display-4 {
    font-size: 1.6rem !important;
    line-height: 1.2;
  }
  
  .font-4 {
    font-size: 1.05rem;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .fixed-header-bar {
    height: auto;
    min-height: 70px;
  }
  
  .main-navbar {
    padding: 12px 0;
  }
  
  .navbar-brand img {
    max-height: 45px;
    width: auto;
  }
  
  /* Fix homepage hero section overlap - CRITICAL FIX */
  .full-screen.effect-section {
    padding-top: 120px !important;
    min-height: calc(100vh - 120px) !important;
  }
  
  /* Fix hero text sizing on tablets */
  .display-4 {
    font-size: 2rem !important;
    line-height: 1.2;
  }
  
  .font-4 {
    font-size: 1.2rem;
  }
  
  /* CRITICAL FIX: Box spacing in tablet-to-desktop transition */
  .col-md-6.col-lg-4.m-15px-tb {
    margin-bottom: 25px !important;
    padding-left: 12px;
    padding-right: 12px;
  }
  
  .col-md-6.col-lg-4.m-15px-tb .p-40px-tb.p-25px-lr {
    padding: 35px 25px !important;
  }
  
  /* Fix text spacing in tablet view */
  .col-md-6.col-lg-4.m-15px-tb h5 {
    line-height: 1.4;
    margin-bottom: 12px !important;
  }
  
  .col-md-6.col-lg-4.m-15px-tb p {
    line-height: 1.5;
    margin-bottom: 0;
  }
  
  /* Container padding for better overall spacing */
  .gray-bg .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Large devices (desktops, 992px and up) but before xl */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .fixed-header-bar {
    height: auto;
    min-height: 75px;
  }
  
  .main-navbar {
    padding: 15px 0;
  }
  
  .navbar-brand img {
    max-height: 50px;
    width: auto;
  }
  
  /* Ensure no overlap on smaller desktop screens */
  .full-screen.effect-section {
    padding-top: 95px;
    min-height: calc(100vh - 95px);
  }
  
  /* Adjusted text sizing for smaller desktops */
  .display-4 {
    font-size: 2.2rem !important;
    line-height: 1.1;
  }
  
  .font-4 {
    font-size: 1.3rem;
  }
}

/* Fallback for all non-desktop screens (legacy support) */
@media (max-width: 1199.98px) {
  .fixed-header-bar {
    height: auto;
    min-height: 60px;
  }
  
  .main-navbar {
    padding: 8px 0;
  }
  
  .navbar-brand img {
    max-height: 40px;
    width: auto;
  }
  
  /* Fix homepage hero section overlap */
  .full-screen.effect-section {
    padding-top: 90px;
    min-height: calc(100vh - 90px);
  }
}

/* iPhone and small mobile specific fixes */
@media (max-width: 767px) {
  .fixed-header-bar {
    min-height: 65px;
  }
  
  .main-navbar {
    padding: 8px 0;
  }
  
  .navbar-brand img {
    max-height: 30px;
  }
  
  /* Fix homepage hero section for mobile */
  .full-screen.effect-section {
    padding-top: 85px;
    min-height: calc(100vh - 85px);
  }
  
  /* Hero text improvements */
  .display-4 {
    font-size: 1.5rem !important;
    line-height: 1.3;
    margin-bottom: 20px !important;
  }
  
  .font-4 {
    font-size: 1rem;
    line-height: 1.5;
  }
  
  /* CTA button spacing */
  .btn-bar {
    padding-top: 20px !important;
  }
  
  .m-btn {
    font-size: 14px;
    padding: 12px 20px;
    white-space: normal;
    line-height: 1.4;
  }
  
  /* Container padding fixes */
  .p-50px-tb {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  
  .p-100px-tb {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* Extra small screens (iPhone SE, etc.) */
@media (max-width: 375px) {
  .fixed-header-bar {
    min-height: 55px !important;
  }
  
  .main-navbar {
    padding: 6px 0 !important;
  }
  
  .navbar-brand img {
    max-height: 25px !important;
  }
  
  .full-screen.effect-section {
    padding-top: 70px !important;
    min-height: calc(100vh - 70px) !important;
  }
  
  .display-4 {
    font-size: 1.3rem !important;
  }
  
  .font-4 {
    font-size: 0.95rem;
  }
  
  .m-btn {
    font-size: 13px;
    padding: 10px 16px;
  }
}

/* Ultra small screens (320px and below) */
@media (max-width: 320px) {
  .fixed-header-bar {
    min-height: 50px !important;
  }
  
  .main-navbar {
    padding: 4px 0 !important;
  }
  
  .navbar-brand img {
    max-height: 22px !important;
  }
  
  .full-screen.effect-section {
    padding-top: 70px !important;
    min-height: calc(100vh - 70px) !important;
  }
  
  .display-4 {
    font-size: 1.2rem !important;
    line-height: 1.4;
  }
  
  .font-4 {
    font-size: 0.9rem;
  }
  
  .m-btn {
    font-size: 12px;
    padding: 8px 14px;
  }
}

/* Fix navbar collapse positioning and visibility */
@media (max-width: 991px) {
  .main-navbar .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 15px;
    right: 15px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    padding: 15px 0;
    margin-top: 5px;
  }
  
  .main-navbar .navbar-nav {
    width: 100%;
  }
  
  .main-navbar .navbar-nav > li {
    width: 100%;
    display: block;
  }
  
  .main-navbar .navbar-nav > li > a {
    padding: 12px 20px;
    font-size: 14px;
    text-transform: none;
    font-weight: 600;
    display: block;
    width: 100%;
  }
  
  /* Fix dropdown menu in mobile */
  .mm-in.px-dropdown .px-dropdown-menu {
    position: static !important;
    box-shadow: none !important;
    background: #f8f9fa !important;
    margin: 5px 15px;
    border-radius: 4px;
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
  
  .mm-in.px-dropdown .px-dropdown-menu > li > a {
    padding: 8px 15px;
    font-size: 13px;
  }
  
  /* Ensure mobile menu toggle works */
  .navbar-toggler {
    display: block;
    border: none;
    padding: 4px 8px;
  }
  
  .navbar-collapse.collapse:not(.show) {
    display: none;
  }
  
  .navbar-collapse.collapse.show {
    display: block !important;
  }
}

/* Fix section spacing on mobile */
@media (max-width: 767px) {
  .section {
    padding: 50px 0;
  }
  
  .m-45px-b {
    margin-bottom: 30px !important;
  }
  
  .m-15px-tb {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
  }
}

/* Fix card spacing on mobile */
@media (max-width: 767px) {
  .col-md-6.col-lg-3 {
    margin-bottom: 20px;
  }
  
  .p-40px-tb.p-25px-lr {
    padding: 30px 20px !important;
  }
}

/* Button improvements for mobile */
@media (max-width: 767px) {
  .d-none.d-md-block {
    display: block !important;
    margin-top: 10px;
  }
  
  .extra-menu .m-btn {
    font-size: 12px;
    padding: 8px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
  }
}

/* Ensure proper stacking context */
.fixed-header-bar {
  z-index: 1000;
}

.main-navbar .navbar-collapse.show,
.main-navbar .navbar-collapse.collapsing {
  z-index: 1001;
}

/* Fix 1200px desktop overlap issue */
@media (min-width: 1200px) and (max-width: 1300px) {
  .full-screen.effect-section {
    padding-top: 100px !important;
    min-height: calc(100vh - 100px) !important;
  }
}

/* Universal fix for hero text positioning */
@media (max-width: 1199px) {
  .full-screen .display-4 {
    margin-top: 20px !important;
  }
  
  .full-screen .p-50px-tb {
    padding-top: 50px !important;
  }
  
  .full-screen .col-12.col-lg-6.col-xl-5 {
    padding-top: 50px !important;
  }
}

/* Extra spacing for problematic tablet range */
@media (min-width: 768px) and (max-width: 991.98px) {
  .full-screen .display-4 {
    margin-top: 40px !important;
  }
  
  .full-screen .col-12.col-lg-6.col-xl-5 {
    padding-top: 80px !important;
  }
}

/* Extra spacing for small mobile devices */
@media (max-width: 428px) {
  .full-screen .display-4 {
    margin-top: 30px !important;
  }
  
  .full-screen .col-12.col-lg-6.col-xl-5 {
    padding-top: 40px !important;
  }
}

/* Fix any text overlapping issues */
@media (max-width: 767px) {
  h1, .h1, .display-4 {
    word-wrap: break-word;
    hyphens: auto;
  }
  
  p {
    word-wrap: break-word;
  }
}

/* Desktop fixes for Real Estate page boxes - Conservative Approach */
/* Fix text spacing within boxes without disrupting Bootstrap grid */
@media (min-width: 992px) {
  /* Only fix the inner content padding, not the grid structure */
  .col-md-6.col-lg-4.m-15px-tb .p-40px-tb.p-25px-lr {
    padding: 35px 30px !important;
  }
  
  /* Add more space between boxes by increasing vertical margins */
  .col-md-6.col-lg-4.m-15px-tb {
    margin-bottom: 25px !important;
    padding-left: 8px;
    padding-right: 8px;
  }
  
  /* Ensure text doesn't overlap by adding line-height */
  .col-md-6.col-lg-4.m-15px-tb h5 {
    line-height: 1.4;
    margin-bottom: 12px !important;
  }
  
  .col-md-6.col-lg-4.m-15px-tb p {
    line-height: 1.5;
    margin-bottom: 0;
  }
}

/* Medium desktop fixes for intermediate screen sizes */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Add extra spacing for intermediate sizes where boxes might be too close */
  .col-md-6.col-lg-4.m-15px-tb {
    margin-bottom: 30px !important;
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .col-md-6.col-lg-4.m-15px-tb .p-40px-tb.p-25px-lr {
    padding: 32px 28px !important;
  }
  
  /* Special fix for offset columns in this range */
  .col-md-6.col-lg-4.m-15px-tb.offset-lg-2 {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Critical fix for problematic intermediate range 1050px-1150px */
@media (min-width: 1050px) and (max-width: 1150px) {
  .col-md-6.col-lg-4.m-15px-tb {
    margin-bottom: 35px !important;
    padding-left: 12px;
    padding-right: 12px;
  }
  
  .col-md-6.col-lg-4.m-15px-tb .p-40px-tb.p-25px-lr {
    padding: 35px 30px !important;
  }
  
  /* Ensure the bottom row has proper spacing */
  .gray-bg .container {
    padding-left: 25px;
    padding-right: 25px;
  }
}

/* Large desktop fixes for better readability */
@media (min-width: 1200px) {
  /* Slightly more padding for larger screens */
  .col-md-6.col-lg-4.m-15px-tb .p-40px-tb.p-25px-lr {
    padding: 40px 35px !important;
  }
  
  /* More generous spacing between boxes on large screens */
  .col-md-6.col-lg-4.m-15px-tb {
    margin-bottom: 35px !important;
    padding-left: 12px;
    padding-right: 12px;
  }
  
  /* Better text spacing */
  .col-md-6.col-lg-4.m-15px-tb h5 {
    margin-bottom: 15px !important;
  }
}

/* Extra large desktop fixes for very wide screens */
@media (min-width: 1400px) {
  .col-md-6.col-lg-4.m-15px-tb {
    margin-bottom: 40px !important;
    padding-left: 15px;
    padding-right: 15px;
  }
  
  .col-md-6.col-lg-4.m-15px-tb .p-40px-tb.p-25px-lr {
    padding: 45px 40px !important;
  }
}