/* Mobile-Friendly Styles - Bavis Gam Samaj */

/* Base: ensure no horizontal overflow */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Responsive containers */
.container, .container-xl, .container-lg {
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (max-width: 575px) {
  .container, .container-xl, .container-lg {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    max-width: 100%;
  }
}

/* Logo & Brand - smaller on mobile, prevent overflow */
@media (max-width: 991px) {
  #header .navbar .container-xl {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    max-width: 100%;
  }
  #header .navbar-brand {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 0.5rem;
  }
  #header .navbar-brand .brand-text {
    min-width: 0;
  }
  .logo {
    height: 60px !important;
    flex-shrink: 0;
  }
  .brand-title {
    font-size: 1.1rem !important;
    line-height: 1.2;
    white-space: normal;
    word-wrap: break-word;
  }
  .brand-subtitle {
    font-size: 0.75rem !important;
    white-space: normal;
    word-wrap: break-word;
  }
}

@media (max-width: 575px) {
  #header .navbar .container-xl {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  #header .navbar-brand {
    margin-right: 0.25rem;
  }
  #header .navbar-brand .brand-text {
    margin-left: 0.35rem !important; /* reduce ms-2 on mobile */
  }
  .logo {
    height: 45px !important;
    flex-shrink: 0;
  }
  .brand-title {
    font-size: 0.95rem !important;
    line-height: 1.15;
  }
  .brand-subtitle {
    font-size: 0.65rem !important;
  }
  .navbar-toggler {
    padding: 0.35rem 0.5rem;
    font-size: 0.9rem;
  }
}

/* Extra small screens (e.g. iPhone SE 320px) */
@media (max-width: 380px) {
  .logo {
    height: 40px !important;
  }
  .brand-title {
    font-size: 0.85rem !important;
  }
  .brand-subtitle {
    font-size: 0.6rem !important;
  }
}

/* Navbar - compact padding on mobile */
@media (max-width: 991px) {
  #header .navbar {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  #header .navbar-brand {
    font-size: 1rem !important;
  }
  /* Donate Now button - visible left of hamburger on mobile (outside menu) */
  .navbar-donate-mobile {
    padding: 5px 10px !important;
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
    white-space: nowrap;
    flex-shrink: 0;
    margin: 0 0.25rem 0 0 !important; /* space before hamburger; override #header .button from global.css */
    align-self: center;
    text-align: center;
  }
  /* Ensure navbar shows toggler + donate side by side */
  #header .navbar .container-xl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
}

/* Carousel - mobile optimized */
@media (max-width: 767px) {
  .center_home img {
    min-height: 280px !important;
    height: 280px !important;
    object-fit: cover;
  }
  .carousel-caption {
    padding: 1rem 0.75rem !important;
    text-align: center !important;
  }
  .carousel-caption .w-50 {
    width: 100% !important;
  }
  .center_home .font_70,
  .center_home h1 {
    font-size: 1.25rem !important;
    line-height: 1.3;
    text-align: center !important;
  }
  .center_home p {
    font-size: 0.9rem !important;
    margin-top: 0.5rem !important;
    text-align: center !important;
  }
  .center_home .button-donate {
    display: inline-block;
    text-align: center;
  }
}

/* Stats section - scaled for mobile */
@media (max-width: 767px) {
  .font_60 {
    font-size: 2.5rem !important;
  }
  #spec .pt-5, #spec .pb-5 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
  .spec_1i {
    margin-bottom: 1rem;
  }
}

/* Event cards - full width, better spacing */
@media (max-width: 767px) {
  .event-card {
    padding: 1.25rem !important;
  }
  .event-location {
    font-size: 0.9rem !important;
  }
}

/* About section - mobile readability */
@media (max-width: 767px) {
  .about-text {
    font-size: 0.95rem !important;
    padding: 1rem !important;
  }
  .about-section h1 {
    font-size: 1.5rem !important;
  }
}

/* Gaam portfolio - wrap buttons on screen instead of horizontal scroll */
@media (max-width: 767px) {
  .portfolio-nav-wrap {
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .portfolio-nav {
    flex-wrap: wrap !important;
    justify-content: center !important;
    overflow-x: visible !important;
    padding: 0.5rem 0;
    gap: 8px 10px;
  }
  .portfolio-filter-btn {
    padding: 10px 14px;
    font-size: 0.85rem;
    flex-shrink: 0;
    min-height: 44px;
    align-items: center;
  }
  .section-title {
    font-size: 1.75rem !important;
  }
  .intro-text {
    font-size: 0.95rem !important;
  }
}

/* Team / EC cards - 2 columns on small, 1 on xs */
@media (max-width: 575px) {
  #team_h .col-md-6,
  #team_h .col-lg-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .highlight-card {
    padding: 1.25rem !important;
  }
  .ec-photo-placeholder {
    max-width: 100px;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  #team_h .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Gaam Representatives table - horizontal scroll */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -0.75rem;
  padding: 0 0.75rem;
}
@media (max-width: 767px) {
  .table {
    font-size: 0.875rem;
  }
  .table th, .table td {
    padding: 0.5rem;
    white-space: nowrap;
  }
}

/* Footer - stacked on mobile, center justified */
@media (max-width: 767px) {
  .footer_b1l,
  .footer_b1l h2,
  .footer_b1l h5,
  .footer_b1l p,
  .footer_b1m,
  .footer_b1m h4,
  .footer_b1m p {
    text-align: center !important;
  }
  .footer_b1l .social-network {
    justify-content: center !important;
  }
  .footer_b1l h2 {
    font-size: 1.5rem;
  }
  .footer_b1m iframe {
    height: 180px;
    margin: 0 auto;
    display: block;
  }
  .quick-links-grid {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .quick-links-col {
    text-align: center !important;
  }
  .quick-links-col a {
    text-align: center !important;
  }
}

/* Touch-friendly: minimum 44px tap targets + smaller hamburger menu fonts */
@media (max-width: 991px) {
  #header .nav-link {
    font-size: 0.8rem !important;
  }
  #header .dropdown-item {
    font-size: 0.8rem !important;
  }
}

@media (max-width: 767px) {
  #header .nav-link {
    font-size: 0.75rem !important;
  }
  #header .dropdown-item {
    font-size: 0.75rem !important;
  }
  .nav-link {
    min-height: 44px;
    display: flex !important;
    align-items: center;
  }
  .button, .button_1, .button_2 {
    min-height: 44px;
    padding: 12px 20px !important;
  }
  /* Keep navbar Donate button compact - override global.css #header .button */
  #header .navbar-donate-mobile.button {
    min-height: unset !important;
    padding: 5px 10px !important;
    font-size: 0.72rem !important;
    margin: 0 0.25rem 0 0 !important;
  }
  .portfolio-filter-btn {
    min-height: 44px;
  }
}

/* Page heroes (center_om) - reduced height on mobile */
@media (max-width: 767px) {
  .center_om {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
}

/* Contribute/Lifetime Member section */
@media (max-width: 767px) {
  .contri_m {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  .contri_1 p {
    font-size: 0.95rem !important;
  }
}

/* News & Events section */
@media (max-width: 767px) {
  .goal_2r h3 {
    font-size: 1.25rem !important;
  }
  .goal_2r p {
    font-size: 0.9rem !important;
  }
}

/* History section on index */
@media (max-width: 767px) {
  #blog_h h1 {
    font-size: 1.5rem !important;
  }
  #blog_h p {
    font-size: 0.95rem !important;
  }
}

/* Form inputs - larger for touch */
@media (max-width: 767px) {
  .form-control {
    font-size: 16px !important; /* Prevents zoom on iOS */
    min-height: 44px;
  }
}

/* Center text on mobile - avoid left-justified look */
@media (max-width: 767px) {
  #serv_pg,
  #serv_pg .about-text,
  .about-section,
  .about-section p,
  .about-section .section-text,
  .about-section .section-heading,
  .about-section h2,
  .about-section h3,
  .gaam-hero,
  .gaam-hero .gaam-title,
  .gaam-hero .gaam-subtext,
  #gaam-portfolio .intro-text,
  #gaam-portfolio .section-title,
  .event-card,
  .event-card p,
  .contri_m,
  .contri_1,
  .contri_1 p,
  .contri_1 h1,
  .contri_1 h5,
  .contri_1 h6,
  .goal_1,
  .goal_1 p,
  .goal_2r,
  .goal_2r h3,
  .goal_2r p,
  #blog_h,
  #blog_h h1,
  #blog_h p,
  #spec .spec_1i,
  #spec h6,
  .footer_b1l,
  .footer_b1l p,
  .footer_b1m h4,
  .highlight-card,
  .highlight-card h4,
  .highlight-card h5,
  .highlight-card p {
    text-align: center !important;
  }
}