/* =====================================================================
   SUMIRAN — Responsive Rules (mobile-first overrides)
   ===================================================================== */

/* ---------------- Large desktop refinements ---------------- */
@media (min-width: 1440px){
  .container{ max-width: 1320px; }
}

/* ---------------- Tablets & small laptops ---------------- */
@media (max-width: 1100px){
  .card-grid{ grid-template-columns: repeat(2,1fr); }
  .values-grid{ grid-template-columns: repeat(2,1fr); }
  .team-grid{ grid-template-columns: repeat(2,1fr); }
  .mahima-grid{ grid-template-columns: repeat(2,1fr); }
  .testimonial-track{ grid-template-columns: repeat(2,1fr); }
  .related-posts{ grid-template-columns: repeat(2,1fr); }
  .media-grid{ grid-template-columns: repeat(2,1fr); }
  .counters{ grid-template-columns: repeat(2,1fr); gap:30px; }
  .amount-grid{ grid-template-columns: repeat(3,1fr); }
  .masonry{ columns: 3 200px; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}

/* ---------------- Navbar mobile menu breakpoint ----------------
   Raised from 960px to 1100px: at 960-1100px the full desktop bar (11 nav
   links + donate button + language toggle) had no room left and was
   overlapping/wrapping. The slide-in panel now also carries its own
   header row (label + close button), a full-size language toggle and a
   donate button, since those are hidden from the top bar below this
   breakpoint. */
@media (max-width: 1100px){
  .navbar-toggle{ display:flex; }
  .navbar-actions .lang-toggle,
  .navbar-actions .btn-donate{ display:none; }

  .navbar-nav{
    position:fixed; top:0; right:-320px; width:300px; max-width:86vw; height:100vh; background:#fff;
    box-shadow:-10px 0 30px rgba(0,0,0,.15); padding:0 0 24px; transition:right .4s ease; z-index:1100;
    overflow-y:auto; display:flex; flex-direction:column;
  }
  .navbar-nav.open{ right:0; }
  .navbar-nav ul{ flex-direction:column; gap:2px; padding:8px 16px 4px; margin:0; }
  .navbar-nav a{ color:var(--brown) !important; padding:14px 16px; font-size:1rem; white-space:normal; }

  /* Slide-in panel header: "Menu" label + a proper close (×) button, so the
     panel doesn't rely solely on the overlay/hamburger/Escape to close. */
  .navbar-nav-head{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:18px 16px; border-bottom:1px solid var(--border-soft);
    position:sticky; top:0; background:#fff; z-index:2;
  }
  .navbar-nav-head-brand{ font-family:var(--font-serif); font-weight:700; letter-spacing:1px; color:var(--brown); font-size:.9rem; text-transform:uppercase; }
  .navbar-nav-close{
    display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%;
    background:rgba(212,160,23,0.1); border:none; color:var(--brown); cursor:pointer; transition: background .25s ease; flex-shrink:0;
  }
  .navbar-nav-close:hover, .navbar-nav-close:focus-visible{ background:rgba(212,160,23,0.22); }

  /* Full-width, always-legible language toggle inside the panel — this is
     the fix for the mobile language switcher being unreachable before. */
  .lang-toggle-mobile{
    display:flex; margin:14px 16px 4px; padding:4px; border-radius:var(--radius-pill);
    border:1.5px solid var(--border-soft); background:rgba(212,160,23,0.06);
  }
  .lang-toggle-mobile .lang-option{ flex:1; text-align:center; color:var(--gold); padding:9px 10px; font-size:.85rem; }
  .lang-toggle-mobile .lang-option.active{ background:var(--gold); color:#fff; }

  .navbar-nav-donate{ display:block; margin:18px 16px 8px; text-align:center; padding:14px; font-size:1rem; }
}

/* ---------------- Desktop nav: slightly tighter just above the mobile
   breakpoint, so 11 links + donate + language toggle keep breathing room
   on small laptop / tablet-landscape widths instead of crowding. ---------------- */
@media (min-width: 1101px) and (max-width: 1300px){
  .navbar-nav a{ padding:9px 9px; font-size:.86rem; }
  .navbar-actions{ gap:8px; }
  .lang-toggle .lang-option{ padding:6px 9px; }
}

/* ---------------- Feature rows stack ---------------- */
@media (max-width: 900px){
  .feature-row, .feature-row.reverse{ flex-direction:column; gap:30px; }
  .form-grid{ grid-template-columns:1fr; }
  .amount-grid{ grid-template-columns: repeat(2,1fr); }
}

/* ---------------- Small tablets / large phones ---------------- */
@media (max-width: 768px){
  section{ padding:60px 0; }
  .card-grid{ grid-template-columns:1fr; }
  .values-grid{ grid-template-columns:1fr 1fr; }
  .team-grid{ grid-template-columns:1fr; }
  .mahima-grid{ grid-template-columns:1fr; }
  .testimonial-track{ grid-template-columns:1fr; }
  .related-posts{ grid-template-columns:1fr; }
  .media-grid{ grid-template-columns:1fr; }
  .counters{ grid-template-columns:1fr 1fr; }
  .masonry{ columns: 2 180px; }
  .footer-grid{ grid-template-columns:1fr; gap:34px; text-align:left; }
  .hero-buttons{ flex-direction:column; align-items:flex-start; }
  .hero-content{ padding-top:120px; }
  .breadcrumbs{ padding:110px 0 16px; }
  .donation-trust{ flex-direction:column; }
}

/* ---------------- Phones ---------------- */
@media (max-width: 560px){
  .amount-grid{ grid-template-columns: repeat(2,1fr); }
  .values-grid{ grid-template-columns:1fr; }
  .counters{ grid-template-columns:1fr; }
  .masonry{ columns: 1 100%; }
  h1{ font-size:2rem; }
  h2{ font-size:1.6rem; }
  .form-card{ padding:26px 20px; }
  .navbar-nav{ width:86vw; right:-90vw; }
  .newsletter-input-group{ flex-direction:column; }
  .newsletter-input-group input{ border-right:1.5px solid var(--border-soft); border-radius:var(--radius-sm); margin-bottom:8px; }
  .newsletter-input-group button{ border-radius:var(--radius-sm); width:100%; }
}