/**
 * Forefind — shared UI / design system.
 *
 * Loaded on all five redesigned pages (home, industry, locations, investment,
 * popular-searches) BEFORE the per-page stylesheet. Everything is scoped under
 * `.forefind-page` so it never leaks into the ListingPro header/footer or the
 * rest of the site.
 *
 * Design language: one typeface (Inter), one brand colour (emerald), a
 * restrained neutral scale, generous whitespace, hairline structure and flat
 * premium dark heroes. Deliberately avoids gradient stacks, glassmorphism,
 * pill-spam, heavy shadows and hover "lifts".
 *
 * The token block also re-maps the legacy token names used by the original
 * per-page CSS (--ff-navy, --ff-teal, --ff-text-primary, --ff-font-display …)
 * onto the unified system, so every page shares one palette and typeface.
 */

/* ============================================================= TOKENS === */
.forefind-page {
  /* Brand — a single emerald, used for CTAs, links, active states, accents. */
  --ff-brand:        #147A54;
  --ff-brand-dark:   #0F5E40;
  --ff-brand-soft:   #EAF4EF;   /* faint green wash — used sparingly           */
  --ff-brand-mid:    #BFE0D0;   /* green hairline / hover border               */
  --ff-brand-ondark: #6FD3AA;   /* legible green on the dark hero              */

  /* Neutral ink scale (from the brief). */
  --ff-ink:     #111827;        /* headings, dark surfaces                     */
  --ff-body:    #374151;        /* default body copy                           */
  --ff-muted:   #6B7280;        /* secondary / meta text                       */
  --ff-faint:   #9CA3AF;        /* de-emphasised labels                        */

  /* Lines & surfaces. */
  --ff-border:        #E5E7EB;
  --ff-border-strong: #D1D5DB;
  --ff-hairline:      #EEF0F2;
  --ff-surface:  #F8FAFC;       /* page background                             */
  --ff-surface-2:#F1F3F5;       /* alt panels / inset fills                    */
  --ff-white:    #FFFFFF;

  /* Dark hero surface. */
  --ff-dark:   #111827;
  --ff-dark-2: #1F2937;

  /* Amber — reserved for rare "most-searched / top" signals only. */
  --ff-amber:      #B45309;
  --ff-amber-soft: #FBF3E6;
  --ff-amber-line: #F0DCB8;

  /* Radii — capped low for a premium, non-bubbly feel. */
  --ff-r-sm:  6px;
  --ff-r-md:  8px;
  --ff-r-lg:  12px;
  --ff-r-pill: 999px;

  /* Shadows — used rarely; hover mostly shifts border/tint. */
  --ff-shadow:    0 1px 2px rgba(17,24,39,.05);
  --ff-shadow-md: 0 10px 30px rgba(17,24,39,.08);

  /* Layout. */
  --ff-container: 1180px;
  --ff-gutter:    48px;

  /* Type. */
  --ff-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* ---- Legacy token aliases (keep old per-page rules on the new system) ---- */
  --ff-navy: var(--ff-ink);
  --ff-navy-80: var(--ff-dark-2);
  --ff-navy-60: #374151;
  --ff-teal: var(--ff-brand);
  --ff-teal-light: var(--ff-brand-soft);
  --ff-teal-mid: var(--ff-brand-mid);
  --ff-amber-light: var(--ff-amber-soft);
  --ff-amber-mid: var(--ff-amber-line);
  --ff-text-1: var(--ff-ink);
  --ff-text-2: var(--ff-body);
  --ff-text-3: var(--ff-muted);
  --ff-text-primary: var(--ff-ink);
  --ff-text-secondary: var(--ff-body);
  --ff-text-muted: var(--ff-muted);
  --ff-green-dark: var(--ff-brand-dark);
  --ff-grey-2: var(--ff-muted);
  --ff-font-d: var(--ff-font);
  --ff-font-b: var(--ff-font);
  --ff-font-m: var(--ff-font);
  --ff-font-display: var(--ff-font);
  --ff-font-body: var(--ff-font);
  --ff-font-mono: var(--ff-font);
  --ff-r-xl: 16px;       /* legacy "xl" radius pulled back to a calm 16px      */
  --ff-radius-sm: var(--ff-r-sm);
  --ff-radius-md: var(--ff-r-md);
  --ff-radius-lg: var(--ff-r-lg);
  --ff-radius-xl: 16px;

  background: var(--ff-surface);
  color: var(--ff-body);
  font-family: var(--ff-font);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================== RESET === */
.forefind-page *,
.forefind-page *::before,
.forefind-page *::after { box-sizing: border-box; }
.forefind-page a { text-decoration: none; color: inherit; }
.forefind-page img,
.forefind-page svg { display: block; }
.forefind-page h1,
.forefind-page h2,
.forefind-page h3,
.forefind-page h4,
.forefind-page p { margin: 0; }
.forefind-page button { font-family: inherit; }

/* Numeric values read as data — tabular figures, no separate mono font. */
.forefind-page .hstat-val,
.forefind-page .hero-stat-val,
.forefind-page .ls-val,
.forefind-page .lcard-stat-val,
.forefind-page .ct-count,
.forefind-page .state-count,
.forefind-page .city-link-count,
.forefind-page .ranked-num,
.forefind-page .invest-chip-rank,
.forefind-page .lcard-rank,
.forefind-page .alpha-btn { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Accessible focus ring for keyboard users across all interactive elements. */
.forefind-page a:focus-visible,
.forefind-page button:focus-visible,
.forefind-page input:focus-visible,
.forefind-page select:focus-visible,
.forefind-page [tabindex]:focus-visible {
  outline: 2px solid var(--ff-brand);
  outline-offset: 2px;
  border-radius: var(--ff-r-sm);
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .forefind-page *,
  .forefind-page *::before,
  .forefind-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ============================================================ LAYOUT === */
.forefind-page .wrap {
  max-width: var(--ff-container);
  margin: 0 auto;
  padding: 0 var(--ff-gutter);
  width: 100%;
}

/* ==================================================== INNER-PAGE HERO === */
/* Shared by industry / locations / investment / popular. Flat, premium, dark
   — no radial glows, no gradient stacks, no decorative grid. */
.forefind-page .page-hero {
  background: var(--ff-dark);
  padding: 56px var(--ff-gutter) 52px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.forefind-page .page-hero::before { content: none; }            /* kill glow  */
.forefind-page .page-hero-grid { display: none; }               /* kill grid  */
.forefind-page .page-hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--ff-container);
  margin: 0 auto;
}

.forefind-page .breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,.4);
  margin-bottom: 20px;
}
.forefind-page .breadcrumb a,
.forefind-page .breadcrumb span { color: rgba(255,255,255,.62); }
.forefind-page .breadcrumb a { transition: color .15s; }
.forefind-page .breadcrumb a:hover { color: var(--ff-brand-ondark); }

.forefind-page .page-title {
  font-family: var(--ff-font);
  font-size: 40px;
  font-weight: 700;
  color: var(--ff-white);
  letter-spacing: -.022em;
  line-height: 1.1;
  margin-bottom: 14px;
  max-width: 760px;
}
.forefind-page .page-title span { color: var(--ff-brand-ondark); }
.forefind-page .page-sub {
  font-size: 16px;
  color: rgba(255,255,255,.6);
  max-width: 620px;
  line-height: 1.6;
  margin-bottom: 28px;
}

/* Inner-page search bar (industry / locations / popular). */
.forefind-page .hero-search {
  display: flex;
  background: var(--ff-white);
  border: 1px solid transparent;
  border-radius: var(--ff-r-md);
  overflow: hidden;
  max-width: 520px;
  margin-bottom: 28px;
  box-shadow: 0 6px 24px rgba(0,0,0,.22);
}
.forefind-page .hero-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 14px 18px;
  font-family: var(--ff-font);
  font-size: 15px;
  color: var(--ff-ink);
  min-width: 0;
}
.forefind-page .hero-search input::placeholder { color: var(--ff-faint); }
.forefind-page .hero-search-btn {
  background: var(--ff-brand);
  color: var(--ff-white);
  border: none;
  padding: 0 22px;
  font-family: var(--ff-font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background .15s;
  flex-shrink: 0;
}
.forefind-page .hero-search-btn:hover { background: var(--ff-brand-dark); }

/* Hero stat clusters (both `.hero-stats-row` and `.hero-stats` variants). */
.forefind-page .hero-stats-row,
.forefind-page .hero-stats { display: flex; gap: 40px; flex-wrap: wrap; }
.forefind-page .hstat-val,
.forefind-page .hero-stat-val {
  font-family: var(--ff-font);
  font-size: 22px;
  font-weight: 700;
  color: var(--ff-white);
  letter-spacing: -.01em;
  line-height: 1.1;
}
.forefind-page .hstat-label,
.forefind-page .hero-stat-label {
  font-size: 12px;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: 4px;
}

/* ==================================================== SECTION HEADINGS === */
/* Works with the various heading wrappers (.sec-hd, .sec-header,
   .section-header) and title classes across the pages. */
.forefind-page .sec-hd,
.forefind-page .sec-header,
.forefind-page .section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.forefind-page .sec-title,
.forefind-page .section-title {
  font-family: var(--ff-font);
  font-size: 24px;
  font-weight: 700;
  color: var(--ff-ink);
  letter-spacing: -.02em;
  line-height: 1.2;
}
.forefind-page .sec-sub,
.forefind-page .section-sub {
  font-size: 14px;
  color: var(--ff-muted);
  margin-top: 6px;
  line-height: 1.55;
}
.forefind-page .sec-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--ff-brand);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: gap .15s, color .15s;
}
.forefind-page .sec-link:hover { color: var(--ff-brand-dark); gap: 9px; }

/* ============================================================ BUTTONS === */
/* Reusable primitives for any new markup; existing CTA classes are styled to
   match in the per-page files. */
.forefind-page .ff-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--ff-r-md);
  font-family: var(--ff-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.forefind-page .ff-btn--primary { background: var(--ff-brand); color: var(--ff-white); }
.forefind-page .ff-btn--primary:hover { background: var(--ff-brand-dark); }
.forefind-page .ff-btn--ghost {
  background: transparent;
  color: var(--ff-ink);
  border-color: var(--ff-border-strong);
}
.forefind-page .ff-btn--ghost:hover { border-color: var(--ff-ink); }
.forefind-page .ff-btn--on-dark {
  background: rgba(255,255,255,.08);
  color: var(--ff-white);
  border-color: rgba(255,255,255,.18);
}
.forefind-page .ff-btn--on-dark:hover { background: rgba(255,255,255,.16); }

/* ================================================= EMPTY / UTILITY ===== */
.forefind-page .ff-empty {
  font-size: 14px;
  color: var(--ff-muted);
  padding: 28px 0;
}

/* ======================================================== RESPONSIVE === */
@media (max-width: 1024px) {
  .forefind-page { --ff-gutter: 32px; }
  .forefind-page .page-hero { padding: 44px var(--ff-gutter) 40px; }
  .forefind-page .page-title { font-size: 34px; }
}
@media (max-width: 768px) {
  .forefind-page { --ff-gutter: 24px; }
  .forefind-page .page-hero { padding: 40px var(--ff-gutter) 36px; }
  .forefind-page .page-title { font-size: 30px; }
  .forefind-page .page-sub { font-size: 15px; }
  .forefind-page .hero-stats-row,
  .forefind-page .hero-stats { gap: 28px; }
  .forefind-page .sec-title,
  .forefind-page .section-title { font-size: 21px; }
}
@media (max-width: 480px) {
  .forefind-page { --ff-gutter: 16px; }
  .forefind-page .page-title { font-size: 26px; }
  .forefind-page .hero-search { max-width: none; }
}