/* ==================================================================== *
 * s308 -- the RESOURCE CARD + directory search bar, shared by the public
 * /resources/ directory AND the logged-in /dashboard/ Refer Someone tab.
 * Moved VERBATIM out of resources.css (same relative order), so the public
 * cascade is unchanged: resources.css depends on this handle and loads right
 * after it. The dashboard enqueues ONLY this file -- never resources.css,
 * whose unscoped .saf-form rules would restyle dashboard note forms.
 * Everything here is scoped to .saf-card--resource / .saf-card--program /
 * .saf-search; never add a bare element or global class rule to this file.
 * ==================================================================== */

/* ------------------------------------------------------------------ *
 * P2 (session 9): [saf_resource_directory] card style, matched to the
 * card look the JetEngine Listing Grid (template 4244) rendered on the
 * live /resources/ page before the swap -- white card, 14px radius,
 * soft drop shadow, 20px title / 14px muted excerpt / 13px brick-red
 * link (computed live via Playwright before the swap, session-9 P2).
 * The tag row + phone/email/web/address meta list are a documented
 * improvement over the prior JetEngine card (which showed neither).
 * ------------------------------------------------------------------ */

.saf-card--resource {
  display: block;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 16px 0 rgba(28, 23, 16, 0.06);
  padding: var(--saf-gap-5);
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}

.saf-card--resource:hover,
.saf-card--resource:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -16px rgba(28, 23, 16, 0.18);
}

.saf-card--resource .saf-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--saf-gap-3);
}

.saf-card--resource .saf-card__title {
  margin: 0 0 var(--saf-gap-3);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--saf-charcoal);
}

/* s172 -- WCAG 2.2 SC 2.5.8 Target Size (Minimum), 24x24 CSS px.
 *
 * `display` is the whole fix on every rule below, and it is not cosmetic.
 * width/height/min-height DO NOT APPLY to a non-replaced INLINE box, so these
 * anchors measured 15-23.5px tall no matter what the line-height around them
 * said. Adding padding alone would not have helped either. Each anchor has to
 * become a block container (or a flex item box) before any sizing declaration
 * on it means anything.
 *
 * Each rule below sets BOTH padding and an explicit `min-height: 24px`. The
 * padding alone currently clears 24px, but only by arithmetic over an inherited
 * line-height (`--saf-leading-relaxed`, 1.65, in the theme's base.css) that this
 * file does not own -- as little as 3px of margin on the narrowest rule. The
 * min-height states the invariant instead of deriving it, so an unrelated edit
 * to a font-size or to that token cannot silently drop a target under the
 * minimum.
 *
 * inline-BLOCK with symmetric padding, NOT inline-flex + align-items:center.
 * Both reach 24px, but centring the text in a taller box moves it off the
 * baseline it shares with its "Phone:" / "Web:" <strong> label -- measured 4px
 * low, and visible as a stagger in the row. An inline-block takes its baseline
 * from its own last line box, so padding grows the hit area up and down while
 * the glyphs stay exactly where they were. Zero visual delta, bigger target.
 *
 * Measured on prod at 375px before the change: title 23.5px, meta 16.5px,
 * cta 15px -- 89 of 99 directory targets under the minimum, on a
 * crisis-resource directory whose primary mobile action is tapping a phone
 * number. Gate: scripts/saf-touch-target-gate.mjs. */
.saf-card--resource .saf-card__title a {
  color: inherit;
  text-decoration: none;
  /* inline-block, not block: the anchor is the sole child of the h3, so its
     text still wraps normally inside the box, but the box now reports the
     full line height instead of the font's content height. Keeps the
     clickable region on the text rather than spanning the whole card, which
     is the smaller behavioural change. */
  display: inline-block;
  min-height: 24px;
}

.saf-card--resource .saf-card__title a:hover,
.saf-card--resource .saf-card__title a:focus-visible {
  text-decoration: underline;
}

.saf-card--resource .saf-card__body {
  margin: 0;
  font-size: var(--saf-text-sm);
  color: #5a554e;
  line-height: 1.5;
}

.saf-card--resource .saf-card__meta {
  list-style: none;
  padding: 0;
  margin: var(--saf-gap-3) 0 0;
  display: grid;
  /* s172: 4px -> 6px. Once each row's link is a full 24px target, a 4px gap
     puts two tap targets 4px apart on a phone; the extra 2px keeps the rows
     visually distinct without changing the card's rhythm noticeably. */
  gap: 6px;
  font-size: var(--saf-text-sm);
}

/* s172: SC 2.5.8 -- see the banner above .saf-card__title a. */
.saf-card--resource .saf-card__meta a {
  color: var(--saf-brick-red);
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  padding: 4px 0;
  min-height: 24px;
}

.saf-card--resource .saf-card__meta a:hover,
.saf-card--resource .saf-card__meta a:focus-visible {
  text-decoration: underline;
}

.saf-card--resource .saf-card__cta {
  margin: var(--saf-gap-3) 0 0;
}

/* s172: SC 2.5.8, the card's PRIMARY action and the smallest of the four at
   15px -- see the banner above .saf-card__title a. */
.saf-card--resource .saf-card__cta a {
  color: var(--saf-brick-red);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  padding: 5px 0;
  min-height: 24px;
}

.saf-card--resource .saf-card__cta a:hover,
.saf-card--resource .saf-card__cta a:focus-visible {
  text-decoration: underline;
}

/* P3 (session 9): ZIP-centroid "near me" search -- the per-card distance
 * pill + the "Clear ZIP search" link shown once a `near` filter is active. */
.saf-tag--distance {
  background: var(--saf-goldenrod);
  color: var(--saf-charcoal);
}

/* s197e: where a listing applies -- Nationwide / Statewide (ST) / a county. */
.saf-tag--scope {
  background: var(--saf-bg-alt);
  color: var(--saf-fg-muted);
  border: 1px solid var(--saf-border);
}

.saf-search {
  background: #fff;
  border: 1px solid var(--saf-border);
  border-radius: var(--saf-radius);
  padding: var(--saf-gap-4);
  margin-bottom: var(--saf-gap-5);
}
.saf-search__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px 120px auto;
  gap: var(--saf-gap-3);
  align-items: end;
}
.saf-search__field label {
  display: block;
  font-weight: 700;
  font-size: var(--saf-text-sm);
  margin-bottom: 4px;
}
.saf-search__field input,
.saf-search__field select {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--saf-border);
  border-radius: var(--saf-radius);
  font: inherit;
}
.saf-search__go {
  min-height: 44px;
  white-space: nowrap;
}
.saf-search__roots {
  list-style: none;
  margin: var(--saf-gap-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.saf-search__root.saf-search__root {
  display: inline-block;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--saf-brick-red);
  border-radius: 999px;
  color: var(--saf-brick-red);
  font-size: var(--saf-text-sm);
  font-weight: 600;
  text-decoration: none;
}
.saf-search__root.saf-search__root:hover,
.saf-search__root.saf-search__root:focus-visible,
.saf-search__root.is-active {
  background: var(--saf-brick-red);
  color: var(--saf-linen);
  text-decoration: none;
}
@media (max-width: 700px) {
  .saf-search__row {
    grid-template-columns: 1fr;
  }
}

.saf-card--program {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: var(--saf-gap-4);
}
.saf-card--program:hover,
.saf-card--program:focus-within {
  transform: none;
}
@media (max-width: 700px) {
  .saf-card--program {
    grid-template-columns: 1fr;
  }
}
.saf-card--program .saf-card__head {
  margin-bottom: var(--saf-gap-2);
}
.saf-card--program .saf-card__title {
  margin-bottom: 2px;
}
.saf-card__provider {
  margin: 0;
  color: var(--saf-denim);
  font-size: var(--saf-text-sm);
  font-weight: 600;
}

/* s225 -- SC 2.5.8, same fix and same reasoning as the banner above
   `.saf-card--resource .saf-card__title a`: the provider anchor is a
   non-replaced INLINE box, so min-height alone would not have applied to it.
   Measured 114.1x17px on soberafe.com ("Polaris Pathways"), 7px under the
   minimum. It only surfaced on PROD because the resource carrying a provider
   company link was published there and not on staging -- which is why the
   touch gate must be run against BOTH hosts, not just the one that is green. */
.saf-card__provider > a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  padding: 4px 0;
  min-height: 24px;
}

.saf-card__provider > a:hover,
.saf-card__provider > a:focus-visible {
  text-decoration: underline;
}
.saf-card__status {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--saf-fg-muted);
}
.saf-card__verified {
  color: #1f7a4d;
  font-weight: 700;
}
.saf-card__verified::before {
  content: "\2713";
  margin-right: 4px;
}
.saf-card--program .saf-card__body {
  /* s320: a 3-line clamp WITH an ellipsis. The bare max-height cut text
   * mid-sentence with no sign it continued (Refer card at 375). The body is a
   * plain block inside .saf-card__main (the grid item), so line-clamp works
   * here; max-height stays as the fallback and holds the same height. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  max-height: calc(1.5em * 3);
  overflow: hidden;
}
.saf-card__row {
  margin: var(--saf-gap-2) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: var(--saf-text-sm);
}
.saf-card__row-label {
  font-weight: 700;
  margin-right: 4px;
}
a.saf-tag {
  text-decoration: none;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}
a.saf-tag:hover,
a.saf-tag:focus-visible {
  text-decoration: underline;
}
.saf-tag--serving.saf-tag--serving {
  background: #fff;
  border: 1px solid var(--saf-border);
  color: var(--saf-charcoal);
}
.saf-card--program .saf-card__tags {
  margin: var(--saf-gap-2) 0 0;
}
.saf-card__actions {
  margin-top: var(--saf-gap-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--saf-gap-3);
  align-items: flex-start;
}
.saf-card__action.saf-card__action,
.saf-card__more.saf-card__more > summary {
  display: inline-block;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--saf-border);
  border-radius: 8px;
  color: var(--saf-brick-red);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}
.saf-card__more > summary::-webkit-details-marker {
  display: none;
}
.saf-card__more[open] > summary {
  background: var(--saf-bg-alt);
}
/* s308: a CLOSED door is one chip in the action row; only an OPEN one takes
   the full row for its panel. flex-basis:100% on every <details> put More
   info / Log a referral / Suggest on a line each (baseline screenshot, s307). */
.saf-card__more {
  flex-basis: auto;
}
.saf-card__more[open] {
  flex-basis: 100%;
}
.saf-card--program .saf-card__meta {
  margin: var(--saf-gap-2) 0 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  font-size: var(--saf-text-sm);
}
.saf-card--program .saf-card__meta dt {
  font-weight: 700;
}
.saf-card--program .saf-card__meta dd {
  margin: 0;
}
.saf-card__next {
  background: var(--saf-bg-alt);
  border-radius: 10px;
  padding: var(--saf-gap-3);
  align-self: start;
}
.saf-card__next-title {
  margin: 0 0 6px;
  font-size: var(--saf-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--saf-fg-muted);
}
.saf-card__next-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: var(--saf-text-sm);
}
.saf-card__next-list a {
  color: var(--saf-brick-red);
  font-weight: 600;
  display: inline-block;
  min-height: 24px;
  padding: 2px 0;
}
.saf-card__where {
  color: var(--saf-fg-muted);
}
.saf-card--program .saf-card__cta {
  margin: var(--saf-gap-3) 0 0;
}
.saf-card__go {
  display: inline-block;
  width: 100%;
  text-align: center;
  min-height: 40px;
}

/* ==================================================================== *
 * s308 -- base chip + button for the card. The generic .saf-tag / .saf-btn
 * live only in the dormant sober-af theme (components.css) and events.css,
 * neither of which loads on /resources/ or /dashboard/, so the chips
 * rendered as bare underlined links and "See next steps" as plain text
 * (MEASURED s308: background transparent, padding 0). Scoped under the card
 * so no other .saf-tag / .saf-btn on either surface changes.
 * Specificity: the Elementor kit colours every anchor at (0,1,1) and its
 * hover at (0,2,1), so every rule below is (0,2,1)+ and every :hover (0,3,1)+.
 * ==================================================================== */
.saf-card--program .saf-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: var(--saf-radius-pill);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  background: var(--saf-bg-alt);
  color: var(--saf-charcoal);
  text-decoration: none;
}
.saf-card--program a.saf-tag--denim {
  background: rgba(0, 66, 99, 0.08);
  color: var(--saf-denim);
}
.saf-card--program a.saf-tag--denim:hover,
.saf-card--program a.saf-tag--denim:focus-visible {
  background: var(--saf-denim);
  color: var(--saf-linen);
  text-decoration: none;
}
.saf-card--program a.saf-tag--serving:hover,
.saf-card--program a.saf-tag--serving:focus-visible {
  border-color: var(--saf-charcoal);
  text-decoration: none;
}
.saf-card--program .saf-tag--distance {
  background: var(--saf-goldenrod);
}
.saf-card--program a.saf-card__go.saf-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 2px solid var(--saf-brick-red);
  border-radius: var(--saf-radius-pill);
  background: var(--saf-brick-red);
  color: var(--saf-linen);
  font-size: var(--saf-text-sm);
  font-weight: 700;
  text-decoration: none;
}
.saf-card--program a.saf-card__go.saf-btn:hover,
.saf-card--program a.saf-card__go.saf-btn:focus-visible {
  background: var(--saf-burgundy);
  border-color: var(--saf-burgundy);
  color: var(--saf-linen);
}

/* s308 -- the /dashboard/ variant (render_card context "dashboard") swaps the
   card-local Log a referral / Suggest doors for the dashboard Refer dialog and
   Add to set. Refer is the card primary action, so it is the one filled chip. */
.saf-card--program .saf-card__action--primary.saf-card__action--primary {
  background: var(--saf-brick-red);
  border-color: var(--saf-brick-red);
  color: var(--saf-linen);
}
.saf-card--program .saf-card__action--primary.saf-card__action--primary:hover,
.saf-card--program .saf-card__action--primary.saf-card__action--primary:focus-visible {
  background: var(--saf-burgundy);
  border-color: var(--saf-burgundy);
}
.saf-card--program button.saf-card__action {
  background: #fff;
  font-family: inherit;
  line-height: 1.4;
}

/* s308: Save is one of the card's action chips. On a card the Elementor kit's
   `button` rule (0,1,1) out-ranks the toggle's own (0,1,0) and painted it a
   44px FILLED button beside 32px outline chips (screenshot, both surfaces).
   Scoped to the card at (0,3,0); the single page keeps the toggle's own look. */
.saf-card--program .saf-save-toggle__btn.saf-save-toggle__btn {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--saf-border);
  border-radius: 8px;
  background: #fff;
  color: var(--saf-brick-red);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.saf-card--program .saf-save-toggle__btn.saf-save-toggle__btn:hover,
.saf-card--program .saf-save-toggle__btn.saf-save-toggle__btn[aria-pressed="true"] {
  background: var(--saf-brick-red);
  border-color: var(--saf-brick-red);
  color: var(--saf-linen);
}