/* HavenHouston shared styles (layered on Bootstrap 5).
   Palette: night #10232f, lamp #f2b632, harbor #1f6f78, mist #eef3f4. */

/* Self-hosted fonts (replaces the Google Fonts CDN link): Public Sans v21
   and Source Serif 4 v14, Latin subset, from fonts.gstatic.com. */
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/public-sans-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("/fonts/source-serif-4-latin.woff2") format("woff2");
}

:root {
  --hh-night: #10232f;
  --hh-night-2: #173746;
  --hh-lamp: #f2b632;
  --hh-harbor: #1f6f78;
  --hh-mist: #eef3f4;
  --hh-line: #d3dcdf;
  --hh-ink: #1b2a33;
  --hh-muted: #4d5f69;
  --hh-deficit: #a4452c;
}

body {
  font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--hh-ink);
  background: var(--hh-mist);
}

h1,
h2,
h3,
.hh-brand {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
}

a {
  color: var(--hh-harbor);
}

/* Default focus ring: navy, for white/pale backgrounds. */
a:focus-visible,
button:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: 3px solid var(--hh-focus, var(--hh-night));
  outline-offset: 3px;
}

/* On navy backgrounds (navbar, page headers), switch to gold so the ring
   stays visible against the dark fill. */
.hh-nav *:focus-visible,
.hh-header *:focus-visible,
.hh-skip-link:focus-visible {
  outline: 3px solid var(--hh-lamp);
  outline-offset: 3px;
}

/* Skip link ---------------------------------------------------------- */
.hh-skip-link {
  position: absolute;
  top: .5rem;
  transform: translateY(-200%);
  left: 1rem;
  z-index: 1050;
  background: var(--hh-night);
  color: #fff;
  padding: .6rem 1rem;
  border-radius: 0 0 .35rem .35rem;
  text-decoration: none;
  font-weight: 600;
}

.hh-skip-link:focus {
  top: .5rem;
  transform: translateY(0);
}

/* Navbar ------------------------------------------------------------ */
.hh-nav {
  background: var(--hh-night);
}

.hh-brand {
  color: #fff;
  font-weight: 700;
  letter-spacing: .01em;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}

.hh-brand::before {
  /* the lamp in the window */
  content: "";
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--hh-lamp);
  box-shadow: 0 0 0 .22rem rgba(242, 182, 50, .25);
}

.hh-brand:hover {
  text-decoration: underline;
  color: #fff;
}

.hh-nav .nav-link {
  min-width: 44px;
  color: #c8d6dc;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.hh-nav .nav-link:hover {
  text-decoration: underline;
  color: #fff;
}

.hh-nav .nav-link[aria-current="page"],
.hh-nav .nav-link[aria-current="true"] {
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--hh-lamp);
}

.hh-nav .navbar-toggler {
  min-width: 44px;
  min-height: 44px;
  border-color: rgba(255, 255, 255, .4);
}

.hh-nav .navbar-toggler-icon {
  filter: invert(1);
}

/* Page header ------------------------------------------------------- */
.hh-header {
  background: var(--hh-night);
  color: #fff;
  padding: 2.25rem 0 2rem;
  border-top: 1px solid var(--hh-night-2);
}

.hh-header h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  margin-bottom: .5rem;
}

.hh-lede {
  max-width: 60ch;
  color: #c8d6dc;
  margin-bottom: 1rem;
  font-size: 1.05rem;
}

.hh-count {
  margin: 0;
  color: var(--hh-lamp);
  font-weight: 600;
}

/* Controls ---------------------------------------------------------- */
.hh-main {
  padding-top: 1.75rem;
  padding-bottom: 3rem;
}

.hh-controls {
  background: #fff;
  border: 1px solid var(--hh-line);
  border-radius: .5rem;
  padding: 1rem 1.25rem 1.25rem;
  margin-bottom: 1.75rem;
}

.hh-controls .form-label {
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: .25rem;
}

/* Cards ------------------------------------------------------------- */
.hh-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--hh-line);
  border-radius: .5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.hh-card-img {
  width: 100%;
  aspect-ratio: 5 / 3;
  object-fit: contain;
  padding: 1.25rem;
  background: #fff;
  display: block;
  border-bottom: 1px solid var(--hh-line);
}

.hh-card-body {
  padding: 1.1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.hh-card h2 {
  font-size: 1.25rem;
  line-height: 1.25;
  margin: 0 0 .15rem;
}

.hh-card h2 a {
  color: var(--hh-ink);
  text-decoration: none;
}

.hh-card h2 a:hover {
  text-decoration: underline;
}

.hh-card h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* whole card is the link */
.hh-card {
  position: relative;
}

.hh-place {
  color: var(--hh-muted);
  font-size: .9rem;
  margin-bottom: .9rem;
}

.hh-attrs {
  margin: 0 0 1rem;
}

.hh-attrs div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .4rem 0;
  border-top: 1px solid var(--hh-line);
  font-size: .95rem;
}

.hh-attrs dt {
  font-weight: 400;
  color: var(--hh-muted);
}

.hh-attrs dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Revenue vs. expenses: two bars scaled to the larger of the pair */
.hh-flow {
  margin-top: auto;
}

.hh-flow-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .8rem;
  color: var(--hh-muted);
}

.hh-flow-row+.hh-flow-row {
  margin-top: .3rem;
}

.hh-flow-label {
  width: 4.5rem;
  flex: none;
}

.hh-flow-track {
  flex: 1;
  height: .6rem;
  background: var(--hh-mist);
  border-radius: .3rem;
  overflow: hidden;
}

.hh-flow-bar {
  height: 100%;
  border-radius: .3rem;
}

.hh-flow-bar.rev {
  background: var(--hh-harbor);
}

.hh-flow-bar.exp {
  background: var(--hh-lamp);
}

.hh-flow-note {
  margin: .55rem 0 0;
  font-size: .85rem;
  font-weight: 600;
}

.hh-flow-note.deficit {
  color: var(--hh-deficit);
}

.hh-flow-note.surplus {
  color: var(--hh-harbor);
}

/* Instance page ------------------------------------------------------ */
.hh-back a {
  color: #c8d6dc;
  font-size: .9rem;
}

.hh-instance-head {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: .5rem;
}

.hh-instance-logo {
  width: 5.5rem;
  height: 5.5rem;
  object-fit: contain;
  background: #fff;
  border-radius: .5rem;
  padding: .5rem;
  flex: none;
}

.hh-instance-head h1 {
  margin-bottom: .25rem;
}

.hh-mission {
  font-size: 1.05rem;
}

.hh-muted {
  color: var(--hh-muted);
}

.hh-links {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.hh-links li {
  padding: .4rem 0;
  border-top: 1px solid var(--hh-line);
}

.hh-map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--hh-line);
  border-radius: .5rem;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.hh-map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.hh-cross-empty {
  color: var(--hh-muted);
  font-style: italic;
}

/* Empty state, pagination, footer note ------------------------------ */
.hh-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--hh-muted);
}

.pagination {
  --bs-pagination-active-bg: var(--hh-night);
  --bs-pagination-active-border-color: var(--hh-night);
  --bs-pagination-color: var(--hh-night);
}

.hh-source {
  max-width: 70ch;
  margin: 2rem auto 0;
  text-align: center;
  color: var(--hh-muted);
  font-size: .9rem;
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* Shared accessibility additions from the splash integration.
   Existing self-hosted fonts, dark-surface focus rules and skip-link colors are retained. */
.hh-brand, .hh-skip-link { min-height: 44px; min-width: 44px; }
.hh-nav .navbar-toggler:focus-visible { box-shadow: none; }
.hh-back a, .hh-links a, .hh-source a, .hh-empty a {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
}
.hh-controls .form-control, .hh-controls .form-select,
.pagination .page-link { min-height: 44px; }
.pagination .page-link { min-width: 44px; }
.hh-card:focus-within { outline: 3px solid var(--hh-night); outline-offset: 3px; }

/* Homepage only: never reuse model .hh-card or logo selectors here. */
.hh-home { background: #fff; line-height: 1.6; font-weight: 400; }
.hh-home h1, .hh-home h2, .hh-home h3 { color: var(--hh-night); }
.hh-home h2 { font-size: 1.75rem; line-height: 1.25; font-weight: 600; margin: 0 0 1.5rem; }
.hh-home h3 { font-size: 1.25rem; line-height: 1.3; font-weight: 600; }
.hh-home a { text-underline-offset: .2em; }
.hh-home a:hover { color: #195c64; }
.hh-home a:active { color: #144c53; }
.hh-home .hh-nav a:hover, .hh-home .hh-nav a:active { color: #fff; }
.hh-home-hero {
  --hh-focus: var(--hh-lamp);
  background-color: var(--hh-night);
  background-image: linear-gradient(rgba(16,35,47,.8), rgba(16,35,47,.8)), url("/images/houston-hero.jpg");
  background-size: cover;
  background-position: center center;
  color: #fff;
  padding: 2rem 0;
}
.hh-home-intro { max-width: 40rem; }
.hh-home-hero h1 { color: #fff; font-size: 2rem; line-height: 1.15; font-weight: 700; margin: 0 0 1rem; }
.hh-home-hero p { font-size: 1.125rem; line-height: 1.6; max-width: 55ch; margin: 0 0 1.5rem; }
.hh-home-actions { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; }
.hh-home-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: .75rem 1.25rem;
  border-radius: .5rem;
  font-weight: 600;
  background: var(--hh-harbor);
  color: #fff;
  text-decoration: none;
  text-align: center;
}
.hh-home-button:hover { background: #195c64; color: #fff; }
.hh-home-button:active { background: #144c53; color: #fff; }
.hh-home-hero .hh-home-button { background: #fff; color: var(--hh-night); }
.hh-home-hero .hh-home-button:hover { background: var(--hh-mist); color: var(--hh-night); }
.hh-home-hero .hh-home-button:active { background: var(--hh-line); color: var(--hh-night); }
.hh-home-text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  padding: .5rem 0;
  text-decoration: underline;
}
.hh-home-hero .hh-home-text-link,
.hh-home-hero .hh-home-text-link:hover,
.hh-home-hero .hh-home-text-link:active { color: #fff; }
.hh-home-hero .hh-home-text-link:hover,
.hh-home-hero .hh-home-text-link:active { text-decoration-thickness: 2px; }
.hh-home-section { padding: 2rem 0; }
.hh-home-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 1.5rem; }
.hh-home-contribution {
  min-width: 0;
  padding: 1.5rem;
  border: 1px solid var(--hh-line);
  border-radius: .5rem;
  display: flex;
  flex-direction: column;
}
.hh-home-contribution h3 { margin: 0 0 .75rem; }
.hh-home-contribution p { margin: 0 0 1rem; }
.hh-home-contribution a { margin-top: auto; align-self: flex-start; }
.hh-home-registration { margin: 1.5rem 0; color: var(--hh-muted); }
.hh-home-photos img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center center;
  border-radius: .5rem;
  display: block;
  background: var(--hh-mist);
}
.hh-home-shelters { background: var(--hh-mist); }
.hh-home-shelters h2 { margin-bottom: 1rem; }
.hh-home-shelters p { max-width: 65ch; margin: 0 0 1rem; }
.hh-home-credits { color: var(--hh-muted); }
.hh-home-credits ul { list-style: none; padding: 0; margin: 0; }
.hh-home-credits li { margin-bottom: .5rem; }
.hh-home-credits a { display: inline-block; min-height: 44px; min-width: 44px; padding: .5rem 0; }
.hh-home-credits p { margin: 0; }
.hh-home-footer { border-top: 1px solid var(--hh-line); padding: 1.5rem 0; font-size: .875rem; }
.hh-home-footer-inner { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.hh-home-footer p { margin: 0; }
@media (min-width: 576px) {
  .hh-home-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .hh-home-footer-inner { flex-direction: row; justify-content: space-between; align-items: center; }
}
@media (min-width: 768px) {
  .hh-home-hero { padding: 3rem 0; }
  .hh-home-hero h1 { font-size: 2.5rem; }
  .hh-home-section { padding: 3rem 0; }
}
@media (min-width: 992px) {
  .hh-home-hero { padding: 4rem 0; }
  .hh-home-hero h1 { font-size: 3rem; }
  .hh-home-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

/* The shared skip link retains the teammate's navy surface on every page. */
.hh-home .hh-skip-link,
.hh-home .hh-skip-link:hover,
.hh-home .hh-skip-link:active { color: #fff; }

/* Shelters ------------------------------------------------------------ */
/* Shelter cards use facility photos, not logos: fill the frame instead of
   the padded contain treatment model logos get. */
.hh-card-img.hh-photo {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center center;
  padding: 0;
}

.hh-photo-figure {
  margin: 0 0 1.5rem;
}

.hh-instance-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: .5rem;
  display: block;
  background: #fff;
}

.hh-photo-figure figcaption {
  font-size: .85rem;
  margin-top: .4rem;
}

.hh-map {
  height: 240px;
  border: 1px solid var(--hh-line);
  border-radius: .5rem;
  margin-bottom: 1.5rem;
  z-index: 0; /* keep Leaflet panes under the Bootstrap navbar menu */
}

@media (min-width: 576px) {
  .hh-map { height: 320px; }
}

/* Leaflet's zoom buttons and marker get the shared navy focus ring. */
.hh-map a:focus-visible,
.hh-map .leaflet-marker-icon:focus-visible {
  outline: 3px solid var(--hh-night);
  outline-offset: 3px;
}

.hh-notice {
  background: #fff;
  border: 1px solid var(--hh-line);
  border-left: 4px solid var(--hh-harbor);
  border-radius: .5rem;
  padding: .85rem 1rem;
  font-size: .95rem;
  margin-bottom: 1.5rem;
}

.hh-header h1 + .hh-lede { margin-bottom: 0; }