/* What members say (class-umh-testimonials.php, Oct 16, 2026). Reads the brand tokens (--umh-*, umh-tokens.css) with plain
   fallbacks, so it works with the brand switch off and in dark mode. One reading column; a featured quote, THE join box,
   then a wall of cards (3 / 2 / 1 columns) with a slim join band between groups. Every rule sits under #umh-tm.umh-tm:
   the theme styles blockquote, figure, p and a with rules of its own. */
#umh-tm.umh-tm { --tm-ink: var(--umh-ink, #111a24); --tm-ink2: var(--umh-ink-2, #2c3644); --tm-muted: var(--umh-muted, #5d6979); --tm-rule: var(--umh-rule, #dfe3e8); --tm-rule2: var(--umh-rule-2, #eceff3); --tm-paper: var(--umh-paper, #fff); --tm-tint: var(--umh-tint, #f3f5f8); --tm-navy: var(--umh-bar, #00274c); --tm-maize: var(--umh-maize, #ffcb05); --tm-label: var(--umh-label, #8a6a00); --tm-on-navy: var(--umh-on-bar, #fff);
  --tm-ui: var(--umh-font-ui, Lato, Arial, sans-serif); --tm-text: var(--umh-font-text, Georgia, "Times New Roman", serif); --tm-disp: var(--umh-font-display, var(--umh-font-ui, Lato, Arial, sans-serif));
  max-width: 1100px; margin: 0 auto; padding: 0 0 32px; color: var(--tm-ink); font: 400 var(--umh-fs-base, 16px)/1.5 var(--tm-ui); }
#umh-tm.umh-tm *, #umh-tm.umh-tm *::before, #umh-tm.umh-tm *::after { box-sizing: border-box; }
#umh-tm.umh-tm figure, #umh-tm.umh-tm blockquote { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-style: normal; quotes: none; }
#umh-tm.umh-tm blockquote::before, #umh-tm.umh-tm blockquote::after { content: none; }
#umh-tm.umh-tm blockquote p { font-style: normal; }

/* header (when UMH_UI::page_header is absent) */
#umh-tm.umh-tm .umh-tm-hd { padding: 8px 0 14px; }
#umh-tm.umh-tm .umh-tm-kick { margin: 0 0 6px; font: 700 var(--umh-fs-label, 12px)/1.2 var(--tm-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--tm-label); }
#umh-tm.umh-tm .umh-tm-h1 { margin: 0; font: 800 var(--umh-fs-display, 44px)/1.05 var(--tm-disp); color: var(--tm-ink); letter-spacing: -.005em; }
#umh-tm.umh-tm .umh-tm-dek { margin: 10px 0 0; max-width: 60ch; font: 400 var(--umh-fs-item, 19px)/1.45 var(--tm-text); color: var(--tm-ink2); }
#umh-tm.umh-tm .umh-tm-meta { margin: 8px 0 0; font-size: var(--umh-fs-meta, 13px); color: var(--tm-muted); }

/* the featured quote: big serif, a maize mark, the name under it */
#umh-tm.umh-tm .umh-tm-feat { margin: 22px 0 26px; padding: 6px 0 20px; border-bottom: 1px solid var(--tm-rule); }
#umh-tm.umh-tm .umh-tm-feat blockquote p { position: relative; margin: 0; padding-left: 30px; font: 400 clamp(22px, 2.6vw, 32px)/1.3 var(--tm-text); color: var(--tm-ink); letter-spacing: -.005em; }
#umh-tm.umh-tm .umh-tm-feat blockquote p::before { content: "\201C"; position: absolute; left: 0; top: -.08em; font: 700 1.9em/1 var(--tm-text); color: var(--tm-maize); }
#umh-tm.umh-tm .umh-tm-feat figcaption { margin: 14px 0 0 30px; }

/* attribution */
#umh-tm.umh-tm figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; padding: 0; font: 400 var(--umh-fs-meta, 13.5px)/1.4 var(--tm-ui); color: var(--tm-muted); text-align: left; }
#umh-tm.umh-tm .umh-tm-who { font-weight: 700; color: var(--tm-ink); }
#umh-tm.umh-tm .umh-tm-who::before { content: "\2014\00a0"; color: var(--tm-muted); font-weight: 400; }
#umh-tm.umh-tm .umh-tm-src { color: var(--tm-ink2); font-weight: 400; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--tm-rule); white-space: nowrap; }
#umh-tm.umh-tm .umh-tm-src:hover { color: var(--tm-ink); text-decoration-color: var(--tm-maize); text-decoration-thickness: 2px; }

/* the wall: masonry-ish columns, each card a quiet panel */
#umh-tm.umh-tm .umh-tm-wall { margin: 26px 0 0; }
#umh-tm.umh-tm .umh-tm-grid { column-count: 3; column-gap: 20px; }
#umh-tm.umh-tm .umh-tm-card { display: inline-block; width: 100%; margin: 0 0 20px; padding: 18px 20px 16px; break-inside: avoid; border: 1px solid var(--tm-rule2); border-top: 3px solid var(--tm-navy); border-radius: 4px; background: var(--tm-paper); }
#umh-tm.umh-tm .umh-tm-card blockquote p { margin: 0 0 12px; padding: 0; font: 400 var(--umh-fs-read, 17px)/1.5 var(--tm-text); color: var(--tm-ink); }
#umh-tm.umh-tm .umh-tm-card.is-short blockquote p { font-size: var(--umh-fs-section, 21px); line-height: 1.35; }
#umh-tm.umh-tm .umh-tm-card.is-long blockquote p { font-size: var(--umh-fs-base, 15.5px); }
#umh-tm.umh-tm .umh-tm-card figcaption { flex-direction: column; gap: 2px; align-items: flex-start; }
#umh-tm.umh-tm .umh-tm-card .umh-tm-src { margin-top: 4px; }
#umh-tm.umh-tm .umh-tm-empty { padding: 24px 0; color: var(--tm-muted); }

/* the slim join band between card groups, and the plain join aside when the join box is not there */
#umh-tm.umh-tm .umh-tm-band, #umh-tm.umh-tm .umh-tm-join.is-plain { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin: 4px 0 26px; padding: 18px 22px; border-radius: 4px; background: var(--tm-navy); color: var(--tm-on-navy); }
#umh-tm.umh-tm .umh-tm-band p, #umh-tm.umh-tm .umh-tm-join.is-plain p { margin: 0; flex: 1 1 320px; font: 600 var(--umh-fs-base, 16px)/1.4 var(--tm-ui); color: var(--tm-on-navy); }
#umh-tm.umh-tm .umh-tm-join.is-plain { flex-direction: column; align-items: flex-start; }
#umh-tm.umh-tm .umh-tm-join.is-plain h2 { margin: 0; font: 800 var(--umh-fs-section, 24px)/1.15 var(--tm-disp); color: var(--tm-on-navy); }
#umh-tm.umh-tm .umh-tm-join-k { font: 700 var(--umh-fs-label, 12px)/1.2 var(--tm-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--tm-maize); }
#umh-tm.umh-tm .umh-tm-btn, #umh-tm.umh-tm .umh-tm-btn:visited { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 0; border-radius: 4px; background: var(--tm-maize); color: #00274c; font: 700 var(--umh-fs-base, 15px)/1.2 var(--tm-ui); text-decoration: none; white-space: nowrap; }
#umh-tm.umh-tm .umh-tm-btn:hover { background: #ffd83d; color: #00274c; text-decoration: none; }
#umh-tm.umh-tm .umh-tm-join.is-top { margin: 0 0 8px; }
#umh-tm.umh-tm .umh-tm-join.is-bottom { margin: 10px 0 0; }

@media (max-width: 900px) { #umh-tm.umh-tm .umh-tm-grid { column-count: 2; } }
@media (max-width: 600px) {
  #umh-tm.umh-tm .umh-tm-grid { column-count: 1; }
  #umh-tm.umh-tm .umh-tm-feat blockquote p { padding-left: 24px; }
  #umh-tm.umh-tm .umh-tm-feat figcaption { margin-left: 24px; }
  #umh-tm.umh-tm .umh-tm-band, #umh-tm.umh-tm .umh-tm-join.is-plain { padding: 16px 18px; }
}