/* Phone and small-tablet layout. The design's layout lives in inline styles,
   so these overrides need !important. Classes are added in the page markup. */

.m-menu { display: none; }

@media (max-width: 860px) {
  /* Header: swap the wrapping nav for a compact menu button */
  header { flex-wrap: nowrap !important; position: relative; }
  header > nav { display: none !important; }
  .m-menu { display: block; }
  .m-menu > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; border: 1px solid #c6cec8; border-radius: 999px;
    font-size: 15px; font-weight: 500; color: #1f3324; background: #fff;
  }
  .m-menu > summary::-webkit-details-marker { display: none; }
  .m-menu > summary .m-close { display: none; }
  .m-menu[open] > summary .m-open { display: none; }
  .m-menu[open] > summary .m-close { display: inline; }
  .m-menu > nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid #dde2d9;
    box-shadow: 0 16px 30px -18px rgba(31, 51, 36, 0.4);
    display: flex; flex-direction: column; padding: 6px 20px 18px;
  }
  .m-menu > nav > a {
    padding: 14px 4px !important; border-bottom: 1px solid #eef1ea !important; text-decoration: none !important;
    border-radius: 0 !important; background: none !important; color: #1f3324 !important;
    font-size: 17px; font-weight: 500;
  }
  .m-menu > nav > a.m-current { color: #3f5b45 !important; font-weight: 700; }
  .m-menu > nav > a.m-donate {
    margin-top: 14px; border: none !important; border-radius: 999px !important;
    background: #3f5b45 !important; color: #fff !important; text-align: center;
  }

  /* Two-column sections stack into one column */
  .m-stack { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
  .m-stack-start { justify-items: start; }
  .m-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .m-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 600px) {
  .m-pad { padding-left: 20px !important; padding-right: 20px !important; }
  .m-card { padding-left: 22px !important; padding-right: 22px !important; padding-top: 32px !important; padding-bottom: 32px !important; }
  header { padding-left: 20px !important; padding-right: 20px !important; }
  header > a > span { font-size: 16px !important; }
  header > a > img { width: 40px !important; height: 40px !important; }
  /* Comfortable tap spacing for stacked footer links */
  footer a { display: inline-block; padding: 4px 0; }
}