/* Mobile-friendly responsive fixes (added safely, no other changes requested) */
/* Make images, videos and embeds scale to container */
img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* Tables: allow horizontal scroll on small screens */
table {
  width: 100%;
  border-collapse: collapse;
}
table.responsive, .table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
}

/* Improve general spacing on small devices */
body {
  -webkit-text-size-adjust: 100%;
}

/* Make container padding comfortable on small screens */
.container, .container-fluid {
  padding-left: 12px;
  padding-right: 12px;
}

/* Navbar brand and toggler sizing tweaks */
.navbar-brand { font-size: 1.05rem; }

/* Ensure form controls don't overflow */
input, textarea, select, button {
  max-width: 100%;
  box-sizing: border-box;
}

/* Small screen typography adjustments */
@media (max-width: 576px) {
  body { font-size: 15px; }
  .navbar-brand { font-size: 1rem; }
  .btn { padding: .45rem .6rem; }
}

/* Example: collapse long sidebar sections if present */
.sidebar, .left-panel, .right-panel {
  max-width: 100%;
}

/* Utility: avoid fixed-width elements causing overflow */
[style*="width:"] {
  max-width: 100% !important;
}

/* Keep embedded maps responsive */
.embed-responsive, .map-responsive { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.embed-responsive iframe, .map-responsive iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; }

/* Small helper to improve button wrapping */
.btn { white-space: normal; }

/* Make whole service card clickable when wrapped in anchor */
.service-card-link-wrapper { text-decoration: none; color: inherit; display: block; }
.service-card-link-wrapper .service-card { transition: transform .18s ease, box-shadow .18s ease; }
.service-card-link-wrapper:hover .service-card { transform: translateY(-6px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
.service-card-link { display: inline-block; }

/* Remove default blue underline/color for card links, keep accessible focus style */
.service-card-link, .service-card-link-wrapper, .service-card-link-wrapper a {
  text-decoration: none !important;
  color: inherit !important;
}
.service-card-link:focus-visible, .service-card-link-wrapper:focus-visible {
  outline: 3px solid rgba(63,81,181,0.18);
  outline-offset: 3px;
}

/* Also ensure all descendant text inside a clickable card does not show link underline */
.service-card-link-wrapper * {
  text-decoration: none !important;
  color: inherit !important;
}

/* Services carousel: show only one card per slide on small screens */
@media (max-width: 576px) {
  /* hide all service columns inside a carousel slide */
  #servicesCarousel .carousel-item .row > div { display: none; }
  /* show only the first column (first card) per slide */
  #servicesCarousel .carousel-item .row > div:first-child { display: block; }
  /* ensure images and content are full-width */
  #servicesCarousel .service-card, #servicesCarousel .service-card img { width: 100%; }
}

/* Header / Navbar mobile tweaks */
@media (max-width: 576px) {
  /* Top bar: center logo and reduce size */
  .top-bar { justify-content: center !important; padding: .25rem 0; }
  .top-bar .navbar-brand img { width: 88px !important; height: auto !important; }

  /* Hide extra desktop-only title if present */
  .site-title { display: none !important; }

  /* Navbar row spacing */
  .nav-row { padding: .35rem .5rem; }

  /* Make collapsed menu full-width and easy to tap */
  .navbar-collapse { background: #fff; padding: .75rem 1rem; border-top: 1px solid rgba(0,0,0,.05); }
  .navbar-nav .nav-link { padding: .6rem 0; font-size: 1rem; }

  /* Show donate / login as full-width buttons inside collapsed menu */
  .navbar-collapse .btn-donate, .navbar-collapse .btn-login, .nav-item.d-lg-none .nav-link { display: block; width: 100%; text-align: center; }

  /* Desktop float buttons reduce size on mobile if visible */
  .btn-donate, .btn-login { font-size: .95rem; padding: .45rem .7rem; }

  /* Ensure header doesn't overlap page content when sticky */
  header.sticky-top { position: sticky; top: 0; z-index: 1030; }

  /* Slightly smaller nav icons */
  .navbar-toggler { padding: .35rem .5rem; }
}

/* Additional navbar collapse behavior for small screens */
@media (max-width: 576px) {
  /* Ensure navbar row positions relative root for absolute collapse */
  .nav-row { position: relative; }

  /* Make the collapsed menu overlay full width below the header */
  .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    padding: 1rem 0.75rem;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    border-top: 1px solid rgba(0,0,0,0.04);
    z-index: 1040;
  }

  /* Stack nav items vertically and increase tap area */
  .navbar-collapse .navbar-nav { display: flex; flex-direction: column; gap: .25rem; }
  .navbar-nav .nav-link { padding: .75rem 1rem; font-size: 1.05rem; }

  /* Hide desktop-only nav-center/nav-right elements when collapsed layout used */
  .nav-center, .nav-right { display: none !important; }

  /* Show donate/login inside collapse as block buttons if present */
  .navbar-collapse .btn-donate, .navbar-collapse .btn-login {
    display: block; width: calc(100% - 2rem); margin: 0.3rem auto; text-align:center;
  }

  /* Make toggler visible and easy to tap */
  .navbar-toggler { display: inline-flex; align-items: center; justify-content: center; }
  .navbar-toggler-icon { width: 1.6rem; height: 1.6rem; }

  /* Avoid content jump when menu closes */
  body.nav-open { overflow: hidden; }
}