/* Responsive system — Dai Impact Fund
 * Strategy: fluid-first. Type, gutters, and section padding all scale with clamp().
 * Discrete breakpoints only for layout shifts that can't be expressed continuously.
 *
 * Breakpoints:
 *   md  ≤ 1023px  tablet  — 2-col hero stacks, multi-col grids collapse to 2
 *   sm  ≤ 719px   mobile  — everything 1-col, nav collapses, grants table → cards
 */

/* The year span lives inside .resp-grant-meta as a fallback for the mobile card layout.
 * On desktop and tablet the year has its own dedicated column, so this inline span is
 * hidden by default. Only the mobile card rule below re-shows it. */
.resp-grant-meta > span:last-child { display: none; }

/* ─────────────────────────────────────
 * MD (≤ 1023px) — tablet
 * ──────────────────────────────────── */
@media (max-width: 1023px) {
  /* Hero stacks early so the text column always has full width for headline + CTAs */
  .resp-hero { grid-template-columns: 1fr !important; gap: 32px !important; }
  .resp-hero-illo { order: -1; display: flex; justify-content: center; }
  .resp-hero-illo svg { max-width: 100%; height: auto; }

  /* 3-col and 4-col grids → 2-col on tablet */
  .resp-3col, .resp-4col { grid-template-columns: 1fr 1fr !important; }

  /* Stats row 4-up → 2x2 */
  .resp-stats { grid-template-columns: 1fr 1fr !important; }
  .resp-stats > div:nth-child(1) { border-radius: var(--r) 0 0 0 !important; border-right: 1px solid var(--paper-3); }
  .resp-stats > div:nth-child(2) { border-radius: 0 var(--r) 0 0 !important; border-right: none !important; }
  .resp-stats > div:nth-child(3) { border-radius: 0 0 0 var(--r) !important; border-right: 1px solid var(--paper-3); border-top: 1px solid var(--paper-3); }
  .resp-stats > div:nth-child(4) { border-radius: 0 0 var(--r) 0 !important; border-right: none !important; border-top: 1px solid var(--paper-3); }

  /* Grants table: drop the Cause column. Grantee + Area + Year remain. */
  .resp-grants-header { grid-template-columns: 60px 2fr 1fr 90px !important; }
  .resp-grants-header > :nth-child(3) { display: none !important; }
  .resp-grant-row { grid-template-columns: 60px 2fr 1fr 90px !important; }
  .resp-grant-row > .resp-grant-cause { display: none !important; }
}

/* ─────────────────────────────────────
 * Nav collapse — keep desktop links until they actually crowd.
 * Links cluster needs ~500px alongside the logo, so collapse only below 560px.
 * ──────────────────────────────────── */
@media (max-width: 559px) {
  nav.site { padding-top: 18px; padding-bottom: 18px; }
  nav.site .links.desktop-only { display: none; }
  nav.site .nav-mobile-cluster { display: inline-flex !important; }
  nav.site .menu-button { display: inline-flex !important; }
}

/* ─────────────────────────────────────
 * SM (≤ 719px) — mobile body layout
 * ──────────────────────────────────── */
@media (max-width: 719px) {
  /* All multi-col grids → 1-col */
  .resp-2col, .resp-3col, .resp-4col { grid-template-columns: 1fr !important; }
  .resp-2col { gap: 28px !important; }

  /* CTAs stack */
  .resp-cta-row { flex-direction: column !important; align-items: stretch !important; }
  .resp-cta-row .btn { justify-content: center; padding: 14px 20px; }

  /* Footer stack */
  footer.site { margin-top: 56px; padding-top: 40px; }
  footer.site .row { flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; }
  footer.site .row > div:last-child { align-items: flex-start !important; }

  /* Apply form: drop the 42px label-indent on hints/textareas — too cramped */
  .resp-q-indent { margin-left: 0 !important; }
  .field { gap: 12px; }

  /* Apply submit row stacks (button on top, signature below) */
  .resp-submit-row { flex-direction: column-reverse !important; align-items: stretch !important; gap: 20px !important; }
  .resp-submit-row .btn { justify-content: center; }

  /* Grants table → card mode */
  .resp-grants-header { display: none !important; }
  .resp-grant-row {
    grid-template-columns: 40px 1fr !important;
    grid-template-areas: "ico name" "ico cause" "ico meta" !important;
    gap: 4px 16px !important;
    padding: 18px !important;
  }
  .resp-grant-row > .resp-grant-ico   { grid-area: ico; align-self: start; }
  .resp-grant-row > .resp-grant-name  { grid-area: name; font-size: 19px !important; }
  .resp-grant-row > .resp-grant-cause { grid-area: cause; font-size: 14px !important; display: block !important; }
  .resp-grant-row > .resp-grant-meta  {
    grid-area: meta; text-align: left !important;
    font-size: 13px !important; color: var(--ink-3) !important;
    display: flex; gap: 10px; align-items: baseline;
  }
  .resp-grant-meta > span:last-child { display: inline; }
  .resp-grant-year-desktop { display: none !important; }
  .resp-mobile-only { display: inline !important; }

  /* Filter pills tighten */
  .resp-filters { gap: 6px !important; }
  .resp-filters button { padding: 8px 14px !important; font-size: 13px !important; }

  /* Recent grantees chips smaller */
  .resp-chips > div { padding: 8px 14px !important; font-size: 13px !important; }

  /* About: principle numbers smaller, tighter column */
  .resp-principle { grid-template-columns: 50px 1fr !important; gap: 16px !important; }
  .resp-principle-num { font-size: 28px !important; }

  /* WhatWeFund areas */
  .resp-areas { gap: 1px !important; }
  .resp-areas > div { padding: 28px 24px !important; }
}

/* ─────────────────────────────────────
 * Mobile drawer (used by chrome.jsx menu button)
 * ──────────────────────────────────── */
.mobile-drawer {
  display: none;
  position: fixed; inset: 0;
  background: var(--paper);
  z-index: 1000;
  flex-direction: column;
  padding: 24px;
}
.mobile-drawer.open { display: flex; }
.mobile-drawer .drawer-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 24px; border-bottom: 1px solid var(--paper-3); margin-bottom: 24px;
}
.mobile-drawer a {
  font-family: var(--serif);
  font-size: 32px; color: var(--ink);
  padding: 16px 0; border-bottom: 1px solid var(--paper-3);
  text-decoration: none;
}
.mobile-drawer a:hover, .mobile-drawer a.current { color: var(--sprout); }

/* Menu button — hidden on desktop, revealed by SM media query */
nav.site .menu-button {
  display: none;
  background: transparent; border: 1px solid var(--paper-3);
  border-radius: 999px; padding: 8px 14px;
  font-family: var(--sans); font-size: 13px; color: var(--ink);
  cursor: pointer; align-items: center; gap: 8px;
}
nav.site .menu-button:hover { border-color: var(--ink); }

/* ─── Theme toggle ─────────────────────────────────────────────────── */
.theme-toggle-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--paper-3);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  padding: 0;
}
.theme-toggle-btn:hover { border-color: var(--ink); color: var(--ink); }

.theme-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 180px;
  background: var(--card-bg);
  border: 1px solid var(--paper-3);
  border-radius: var(--r);
  padding: 6px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
  z-index: 1100;
  font-family: var(--sans);
}
:root[data-theme="dark"] .theme-menu,
.theme-menu {
  /* shadow tuned to feel right against dark backgrounds */
}
.theme-menu-head {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); padding: 8px 10px 6px; font-weight: 500;
}
.theme-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: 8px;
  background: transparent; border: 0;
  font-family: var(--sans); font-size: 14px; color: var(--ink);
  cursor: pointer; text-align: left;
  transition: background 0.12s;
}
.theme-menu-item:hover { background: var(--paper-2); }
.theme-menu-item.is-current { color: var(--sprout); }
.theme-menu-item.is-current:hover { background: var(--sprout-3); }
.theme-menu-item svg { flex-shrink: 0; }