/* ============================================================
   BKF — Shared Mobile Responsive Styles
   Add this to every page:
   <link rel="stylesheet" href="css/mobile.css">
   Place AFTER any existing <style> blocks so it takes priority.
============================================================ */

/* ── Base: ensure images never overflow ── */
img {
  max-width: 100%;
  height: auto;
}

/* ── Smooth box sizing everywhere ── */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ============================================================
   BANNER — shrink logos and title on small screens
============================================================ */
@media (max-width: 768px) {

  .banner {
    padding: 8px 10px;
  }

  .banner-content {
    gap: 6px;
    flex-wrap: nowrap;
  }

  /* Shrink both logos */
  .circular-image {
    width: 55px !important;
    height: 55px !important;
    min-width: 55px;
  }

  .circular-image2 {
    width: 50px !important;
    height: 65px !important;
    min-width: 50px;
  }

  /* Shrink foundation title */
  .banner-content h1,
  .banner-title {
    font-size: 14px !important;
    text-align: center;
    line-height: 1.3;
  }

  /* Shrink tagline */
  .lead {
    font-size: 11px !important;
    margin-top: 4px;
    padding: 0 4px;
    line-height: 1.4;
  }
}

/* ============================================================
   NAVIGATION BAR — reduce top margin to match smaller banner
============================================================ */
@media (max-width: 768px) {

  .navigationbar {
    margin-top: 105px !important;
    padding: 6px 8px;
    flex-wrap: wrap;
    gap: 4px;
  }

  .navigationbar ul {
    gap: 8px;
    flex-wrap: wrap;
  }

  .navigationbar a {
    font-size: 11px !important;
  }

  /* Stack left and right nav groups if needed */
  .navigationbar ul.left,
  .navigationbar ul.right {
    flex-wrap: wrap;
  }
}

/* ============================================================
   FORMS — full width on mobile
============================================================ */
@media (max-width: 768px) {

  .registration-form,
  .page-form,
  #donation-form,
  .assistance-container {
    width: 95% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 14px !important;
  }

  .form-group input,
  .form-group select,
  .form-group textarea,
  #donationForm input,
  #donationForm select,
  #donationForm textarea {
    font-size: 16px; /* prevents iOS zoom on focus */
    width: 100% !important;
  }

  .form-group button,
  .btn-primary,
  #donationForm button {
    width: 100%;
    padding: 12px;
    font-size: 15px;
  }

  /* Payment options wrap on mobile */
  .payment-options {
    flex-direction: column;
  }

  .payment-option {
    width: 100%;
    text-align: center;
  }
}

/* ============================================================
   TABLES — horizontal scroll on mobile
============================================================ */
@media (max-width: 768px) {

  /* Wrap all tables in a scrollable container */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    width: 100%;
  }

  th, td {
    padding: 8px 10px;
    font-size: 13px;
  }

  /* Scroll hint */
  table::before {
    content: '← Scroll to see more →';
    display: block;
    font-size: 11px;
    color: #888;
    text-align: center;
    padding: 4px 0;
    white-space: normal;
  }
}

/* ============================================================
   CONTENT SECTIONS — padding and margins
============================================================ */
@media (max-width: 768px) {

  .content {
    padding: 16px 10px !important;
    margin-top: 10px !important;
  }

  /* Cards and sections */
  .form-section,
  .question-container,
  #donation-form,
  #recent-donations {
    padding: 14px !important;
    margin-bottom: 14px !important;
  }

  /* Section titles */
  .section-title {
    font-size: 16px !important;
  }

  h2 { font-size: 20px !important; }
  h3 { font-size: 17px !important; }
  h4 { font-size: 15px !important; }
}

/* ============================================================
   MEMBERS PAGE — table layout
============================================================ */
@media (max-width: 768px) {

  .table-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  #searchInput {
    width: 100% !important;
  }
}

/* ============================================================
   GALLERY / IMAGE GRIDS
============================================================ */
@media (max-width: 768px) {

  /* Common gallery grid patterns */
  .gallery-grid,
  .image-grid,
  .row {
    flex-direction: column !important;
    gap: 12px;
  }

  .col-md-4,
  .col-md-6,
  .col-md-3 {
    width: 100% !important;
    min-width: unset !important;
  }

  /* Gallery images fill width */
  .gallery-item img,
  .card img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

/* ============================================================
   EXECUTIVES / PROFILE CARDS
============================================================ */
@media (max-width: 768px) {

  .head-card,
  .exec-card,
  .profile-card {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    padding: 14px;
  }

  .head-image-container,
  .exec-image {
    margin-bottom: 10px;
  }

  /* Profile images */
  .head-image,
  .exec-photo {
    width: 120px !important;
    height: 120px !important;
    border-radius: 50%;
    object-fit: cover;
  }
}

/* ============================================================
   DONATION PAGE — payment instructions
============================================================ */
@media (max-width: 768px) {

  #payment-instructions {
    padding: 14px !important;
    font-size: 14px;
  }

  #payment-instructions button {
    width: 100% !important;
    padding: 14px !important;
  }

  #paymentMadeBtn {
    width: 100% !important;
    font-size: 15px !important;
  }
}

/* ============================================================
   CONFIRM DONATIONS ADMIN PAGE
============================================================ */
@media (max-width: 768px) {

  .refresh-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .refresh-bar button {
    width: 100%;
  }
}

/* ============================================================
   FOOTER
============================================================ */
@media (max-width: 768px) {

  footer {
    font-size: 12px !important;
    padding: 14px 10px !important;
  }
}

/* ============================================================
   ALERTS AND MESSAGES
============================================================ */
@media (max-width: 768px) {

  .alert,
  #message,
  #donation-status,
  #alertContainer {
    font-size: 14px !important;
    padding: 10px 12px !important;
    margin: 10px 0 !important;
  }
}

/* ============================================================
   EVENTS / NEWS CARDS
============================================================ */
@media (max-width: 768px) {

  .event-card,
  .news-card,
  .card {
    width: 100% !important;
    margin-bottom: 16px;
  }

  .event-card img,
  .news-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
  }
}

/* ============================================================
   ABOUT / KUKU / OURCAUSE — text content pages
============================================================ */
@media (max-width: 768px) {

  .about-section,
  .cause-section,
  .kuku-section {
    padding: 14px !important;
    font-size: 15px;
    line-height: 1.7;
  }

  /* Any side-by-side image + text layout */
  .text-image-row {
    flex-direction: column !important;
  }

  .text-image-row img {
    width: 100% !important;
    margin-bottom: 12px;
  }
}

/* ============================================================
   CONFIRMATION CODE INPUT (registration)
============================================================ */
@media (max-width: 768px) {

  #confirmCodeInput {
    width: 100% !important;
    font-size: 22px !important;
    letter-spacing: 8px;
    margin-bottom: 10px;
  }

  #confirmSection {
    padding: 14px !important;
  }

  #confirmBtn {
    width: 100%;
    padding: 12px;
    margin-top: 8px;
  }
}

/* ============================================================
   LOADING SPINNER — centred on mobile
============================================================ */
@media (max-width: 768px) {

  .loading {
    padding: 20px 10px;
  }

  .loading-spinner {
    margin: 0 auto 10px;
  }
}