/* ==========================================================================
   UJAMII — RESPONSIVE STYLESHEET
   ==========================================================================
   Bootstrap 5 already provides a mobile-first grid (col-12, col-md-6, etc.),
   so most layout re-stacking is handled directly in the HTML through grid
   classes. This file only contains the EXTRA adjustments that Bootstrap's
   grid cannot do on its own — font scaling, spacing, and component tweaks
   that need to change at specific breakpoints.

   Bootstrap 5 breakpoints (for reference, so these media queries line up
   with the same widths Bootstrap itself uses):
     - Extra small:  < 576px   (phones, default / no prefix)
     - Small:        >= 576px  (sm)
     - Medium:       >= 768px  (md)
     - Large:        >= 992px  (lg)
     - Extra large:  >= 1200px (xl)
     - XXL:          >= 1400px (xxl)
   ========================================================================== */

/* --------------------------------------------------------------------------
   LARGE DESKTOPS (1400px+)
   Slightly increase section breathing room on very large screens.
   -------------------------------------------------------------------------- */
@media (min-width: 1400px) {
  :root {
    --section-padding-y: 7.5rem;
  }
}

/* --------------------------------------------------------------------------
   LAPTOPS / SMALL DESKTOPS (max-width: 1199.98px)
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .hero h1 {
    font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  }
}

/* --------------------------------------------------------------------------
   TABLETS (max-width: 991.98px)
   The navbar collapses into Bootstrap's hamburger menu automatically below
   this width (navbar-expand-lg); here we style that collapsed state and
   tighten up section spacing.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  :root {
    --section-padding-y: 4.5rem;
  }

  /* Collapsed mobile menu gets a solid brown panel so links stay legible
     even while the navbar itself is still transparent (top of Home page) */
  .navbar-ujamii .navbar-collapse {
    background-color: var(--color-brown-dark);
    border-radius: var(--radius-md);
    margin-top: 0.75rem;
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-md);
  }

  .navbar-ujamii .nav-link {
    padding: 0.65rem 1rem !important;
    margin: 0.15rem 0;
  }

  .hero {
    min-height: 92vh;
    text-align: center;
  }

  .hero p.lead {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-visual {
    margin-top: 2.5rem;
  }

  .hero-photo-frame {
    max-height: 420px;
  }

  .section-eyebrow {
    justify-content: center;
  }

  .timeline {
    padding-left: 2rem;
  }
}

/* --------------------------------------------------------------------------
   LARGE PHONES / SMALL TABLETS (max-width: 767.98px)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .page-hero {
    padding: 8rem 0 3.5rem;
    text-align: center;
  }

  .stat-item {
    padding: 1.25rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .stat-item:last-child {
    border-bottom: none;
  }

  .cta-band {
    padding: 2.75rem 1.5rem;
    text-align: center;
  }

  .contact-info-card {
    padding: 2rem 1.5rem;
  }

  .footer-ujamii {
    text-align: center;
    padding-top: 3.5rem;
  }

  .footer-ujamii .footer-socials {
    justify-content: center;
    display: flex;
  }

  .scroll-top-btn {
    right: 1.25rem;
    bottom: 1.25rem;
    width: 42px;
    height: 42px;
    font-size: 1rem;
  }
}

/* --------------------------------------------------------------------------
   PHONES (max-width: 575.98px)
   Smallest breakpoint — tighten typography and padding further so nothing
   feels cramped on a 360–400px wide screen.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .hero-content {
    padding-top: 6rem;
  }

  .hero-eyebrow {
    font-size: 1.6rem;
  }

  .card-ujamii,
  .card-testimonial {
    padding: 1.75rem 1.4rem;
  }

  .cta-band h2 {
    font-size: 1.5rem;
  }

  .navbar-ujamii .navbar-brand img {
    height: 36px;
  }

  .hero-logo-lockup img {
    width: 64px;
    height: 64px;
    border-radius: 16px;
  }

  .hero-photo-frame {
    max-height: 340px;
  }

  .navbar-ujamii .navbar-brand-text {
    font-size: 1.15rem;
  }

  .partner-logo-frame,
  .partner-wordmark {
    height: 70px;
  }
}

/* --------------------------------------------------------------------------
   PRINT
   Basic print stylesheet so anyone printing a page (e.g. the Contact page)
   gets clean output without the dark hero backgrounds wasting ink.
   -------------------------------------------------------------------------- */
@media print {
  .navbar-ujamii,
  .scroll-top-btn,
  .hero-visual,
  .footer-socials {
    display: none !important;
  }

  .hero,
  .page-hero {
    background: none !important;
    color: var(--color-text) !important;
    padding-top: 2rem;
  }

  .hero h1,
  .page-hero h1 {
    color: var(--color-brown) !important;
  }
}