/* ============================================================
   resources-hub.css — scoped styles for veteran-resources.html
   (searchable nationwide veteran-resource directory)
   All classes prefixed .rh- to avoid collisions.
   ============================================================ */

:root {
  --rh-ink: #141821;
  --rh-deep: #0d1017;
  --rh-red: #b91c1c;
  --rh-red-bright: #e23b3b;
  --rh-paper: #f4f6fa;
  --rh-line: #e3e7ee;
  --rh-muted: #5c6675;
}

/* ---------- hero ---------- */
.rh-hero {
  background: radial-gradient(1200px 400px at 78% -10%, rgba(185, 28, 28, .28), transparent 60%),
              linear-gradient(160deg, #141821 0%, #0d1017 100%);
  color: #fff;
  padding: 64px 0 52px;
}
.rh-hero__inner { max-width: 820px; }
.rh-eyebrow {
  font-family: "DM Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .74rem;
  color: var(--rh-red-bright);
  margin: 0 0 14px;
}
.rh-hero h1 {
  font-family: "Sora", sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  line-height: 1.08;
  margin: 0 0 16px;
  color: #fff;   /* override the global dark h1 color on this dark hero */
}

/* filtered cards must actually hide — .rh-card{display:flex} otherwise beats the
   [hidden] attribute (equal specificity, author rule wins over the UA default) */
.rh-card[hidden] { display: none !important; }
.rh-hero__lead {
  font-size: 1.12rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
  margin: 0 0 26px;
  max-width: 680px;
}
.rh-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- stat strip ---------- */
.rh-stats {
  display: flex; flex-wrap: wrap; gap: 30px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.rh-stat { display: flex; flex-direction: column; gap: 2px; }
.rh-stat__n {
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: 1.9rem;
  color: #fff;
  display: block;
}
.rh-stat__l {
  font-size: .82rem;
  color: rgba(255, 255, 255, .62);
  letter-spacing: .02em;
}

/* ---------- toolbar (search + filters) ---------- */
.rh-toolbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.4) blur(6px);
  border-bottom: 1px solid var(--rh-line);
  padding: 16px 0;
}
.rh-toolbar__inner { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.rh-search { flex: 1 1 280px; position: relative; }
.rh-search__input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 12px 14px 12px 40px;
  border: 1.5px solid var(--rh-line);
  border-radius: 10px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235c6675' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat 13px center;
  color: var(--rh-ink);
}
.rh-search__input:focus { outline: none; border-color: var(--rh-red); box-shadow: 0 0 0 3px rgba(185, 28, 28, .15); }
.rh-selects { display: flex; gap: 10px; flex-wrap: wrap; }
.rh-select {
  font: inherit;
  padding: 11px 12px;
  border: 1.5px solid var(--rh-line);
  border-radius: 10px;
  background: #fff;
  color: var(--rh-ink);
  cursor: pointer;
}
.rh-select:focus { outline: none; border-color: var(--rh-red); box-shadow: 0 0 0 3px rgba(185, 28, 28, .15); }
.rh-clear {
  font: inherit; font-weight: 600; font-size: .9rem;
  background: none; border: none; color: var(--rh-red);
  cursor: pointer; padding: 8px 6px;
}
.rh-clear:hover { text-decoration: underline; }
.rh-count { font-size: .9rem; color: var(--rh-muted); margin-left: auto; }
.rh-count strong { color: var(--rh-ink); }

/* ---------- category chips ---------- */
.rh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 4px; }
.rh-chip {
  font: inherit; font-size: .88rem; font-weight: 600;
  padding: 8px 15px;
  border: 1.5px solid var(--rh-line);
  border-radius: 999px;
  background: #fff; color: var(--rh-ink);
  cursor: pointer;
}
.rh-chip:hover { border-color: #b6bdca; }
.rh-chip[aria-pressed="true"] { background: var(--rh-ink); color: #fff; border-color: var(--rh-ink); }

/* ---------- directory ---------- */
.rh-dir { background: var(--rh-paper); padding: 30px 0 60px; }
.rh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 16px;
  margin-top: 22px;
}
.rh-card {
  background: #fff;
  border: 1px solid var(--rh-line);
  border-radius: 14px;
  padding: 18px 18px 16px;
  display: flex; flex-direction: column;
}
.rh-card__badge {
  align-self: flex-start;
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 9px; border-radius: 6px;
  margin-bottom: 10px;
}
.rh-badge--tap { background: #e8f0fb; color: #1e4e8c; }
.rh-badge--cvso { background: #eaf6ee; color: #1f7a44; }
.rh-badge--national { background: #fdecec; color: var(--rh-red); }
.rh-badge--crisis { background: #fdecec; color: #b91c1c; }
.rh-badge--benefits { background: #e8f0fb; color: #1e4e8c; }
.rh-badge--health { background: #e3f4f0; color: #10796a; }
.rh-badge--education { background: #efeafc; color: #6b3fce; }
.rh-badge--jobs { background: #eaf2ff; color: #2456b3; }
.rh-badge--housing { background: #fdefe3; color: #8a4a08; }
.rh-badge--financial { background: #eaf6ee; color: #1f7a44; }
.rh-badge--legal { background: #eef0f4; color: #495568; }
.rh-badge--family { background: #fdeaf3; color: #b03a72; }
.rh-badge--business { background: #fbf1dd; color: #92650a; }
.rh-badge--vso { background: #ebe9fb; color: #4b3fb0; }
.rh-badge--records { background: #eef0f2; color: #55606e; }
.rh-badge--special { background: #fcecf5; color: #a23c86; }
.rh-badge--burial { background: #eceef1; color: #3f4a5a; }
.rh-badge--mn { background: #eaf3ec; color: #2c6b46; }
.rh-card__name {
  font-family: "Sora", sans-serif; font-weight: 700;
  font-size: 1.08rem; margin: 0 0 3px; color: var(--rh-ink);
}
.rh-card__loc { font-size: .86rem; color: var(--rh-muted); margin: 0 0 12px; }
.rh-card__meta { display: flex; flex-direction: column; gap: 7px; margin-top: auto; }
.rh-card__row { display: flex; gap: 10px; font-size: .9rem; line-height: 1.4; }
.rh-card__row > span {
  flex: 0 0 62px; color: var(--rh-muted); font-size: .76rem;
  text-transform: uppercase; letter-spacing: .04em; padding-top: 2px;
}
.rh-card__row a, .rh-card__row p { margin: 0; color: var(--rh-ink); word-break: break-word; }
.rh-card__row a { color: #1e4e8c; text-decoration: none; }
.rh-card__row a:hover { text-decoration: underline; }
.rh-card__note {
  font-size: .8rem; color: var(--rh-muted); line-height: 1.45;
  margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--rh-line);
}
.rh-empty {
  text-align: center; padding: 50px 20px; color: var(--rh-muted);
  font-size: 1.02rem;
}

/* ---------- usage hint ---------- */
.rh-hint { font-size: .9rem; color: var(--rh-muted); line-height: 1.5; margin: 14px 0 0; }
.rh-hint strong { color: var(--rh-ink); }
.rh-verified { display: inline-block; margin-top: 4px; font-weight: 600; color: #6b5622; }

/* ---------- disclaimer note ---------- */
.rh-note {
  background: #fff8ec; border: 1px solid #f3e2be; border-radius: 10px;
  padding: 13px 16px; font-size: .86rem; color: #6b5622; line-height: 1.5;
  margin-top: 20px;
}

/* ---------- generic section ---------- */
.rh-section { padding: 56px 0; }
.rh-section--tint { background: var(--rh-paper); }
.rh-section__head { max-width: 720px; margin-bottom: 30px; }
.rh-section__title {
  font-family: "Sora", sans-serif; font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.05rem); margin: 0 0 10px; color: var(--rh-ink);
}
.rh-section__sub { font-size: 1.02rem; color: var(--rh-muted); line-height: 1.6; margin: 0; }

/* ---------- tools / services cross-links ---------- */
.rh-tools {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px;
}
.rh-tool {
  display: block; text-decoration: none;
  background: #fff; border: 1px solid var(--rh-line); border-radius: 14px;
  padding: 22px 20px; color: var(--rh-ink);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.rh-tool:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(20, 24, 33, .1); border-color: #cfd6e2; }
.rh-tool__ico { font-size: 1.6rem; line-height: 1; display: block; margin-bottom: 12px; }
.rh-tool__title { font-family: "Sora", sans-serif; font-weight: 700; font-size: 1.1rem; margin: 0 0 6px; }
.rh-tool__desc { font-size: .92rem; color: var(--rh-muted); line-height: 1.5; margin: 0; }
.rh-tool__go { display: inline-block; margin-top: 12px; font-weight: 600; font-size: .9rem; color: var(--rh-red); }

/* ---------- guides list ---------- */
.rh-guides { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.rh-guide {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--rh-line); border-radius: 10px;
  padding: 14px 16px; text-decoration: none; color: var(--rh-ink); font-weight: 500;
}
.rh-guide:hover { border-color: var(--rh-red); color: var(--rh-red); }
.rh-guide::before { content: "\2192"; color: var(--rh-red); font-weight: 700; }

/* ---------- closing CTA ---------- */
.rh-cta { background: linear-gradient(160deg, #141821, #0d1017); color: #fff; padding: 56px 0; }
.rh-cta__inner { max-width: 680px; }
.rh-cta h2 { font-family: "Sora", sans-serif; font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin: 0 0 14px; color: #fff; }
.rh-cta p { font-size: 1.06rem; color: rgba(255, 255, 255, .82); line-height: 1.6; margin: 0 0 24px; }
.rh-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- utility ---------- */
.rh-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* light outline button for dark (hero / CTA) sections */
.btn.rh-btn--light { background: transparent; border: 1.5px solid rgba(255, 255, 255, .5); color: #fff; }
.btn.rh-btn--light:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

/* ---------- responsive ---------- */
@media (max-width: 620px) {
  .rh-count { margin-left: 0; width: 100%; }
  .rh-card__row > span { flex-basis: 54px; }
}