/**
 * 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 — one green (#30B94A), used for CTAs, links, active states, accents.
     Page stylesheets must not redefine this; four different greens across the
     pages is what made the Industry CTA and its highlight tag disagree. */
  --ff-brand:        #30B94A;
  --ff-brand-dark:   #26993D;
  --ff-brand-soft:   #E9F8ED;   /* faint green wash — used sparingly           */
  --ff-brand-mid:    #CFEFD6;   /* green hairline / hover border               */
  --ff-brand-ondark: #8FE6A0;   /* 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;

  /* Brand indigo. Used by the listing card (tier pill, View details button),
     which is shared, so the tokens have to live here and not only in the home
     page stylesheet. */
  --ff-purple:      #3024AE;

  /* Section headings across Home, Industry, Locations and Popular Searches.
     The brand indigo rather than near-black, per the design reference. The
     hero <h1> (.page-title) is NOT included - it sits white on the dark
     banner and indigo there would be unreadable. */
  --ff-heading:     #3024AE;
  --ff-purple-dark: #241A88;
  --ff-purple-soft: #EEEDFB;

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

  /* Amber — reserved for rare "most-searched / top" signals only. */
  /* FRI score green. Amber stars read as a customer review rating, which the
     Forefind Reliability Index is not. 5.4:1 on white. */
  --ff-fri:        #1E7A32;
  --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-heading);
  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; }
}


/* ── LISTING CARD ─────────────────────────────────────────────────────────
   Shared, not home-page-only: the franchise archive renders the same card
   from the same template part (template-parts/home/lcard.php). Scoped to
   .forefind-page, which every redesigned page carries on its <main>.
   Do not copy these rules into a page stylesheet — one definition only. */
.forefind-page .lcard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.forefind-page .lcard {
  background: var(--ff-white);
  border: 1px solid var(--ff-border);
  border-radius: 18px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.forefind-page .lcard:hover { transform: translateY(-4px); box-shadow: var(--ff-shadow-md); border-color: var(--ff-border); }
.forefind-page .lcard-img { position: relative; height: 118px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #EAF9EE, #D3F0DB); }
/* `contain`, not `cover`: these are brand LOGOS, and cover crops a wordmark's
   ends off. The white plate keeps logos with baked-in white edges legible. */
.forefind-page .lcard-img img { width: 100%; height: 100%; object-fit: contain; padding: 14px 18px; background: var(--ff-white); }
.forefind-page .lcard-img-text { font-family: var(--ff-font); font-weight: 700; font-size: 34px; letter-spacing: -.02em; }
.forefind-page .lcard-tier { position: absolute; top: 13px; left: 13px; display: inline-flex; align-items: center; gap: 6px; background: var(--ff-purple); border-radius: 100px; padding: 4px 10px 4px 4px; }
.forefind-page .lcard-tier-l { width: 16px; height: 16px; border-radius: 50%; background: var(--ff-brand); display: flex; align-items: center; justify-content: center; font-family: var(--ff-font); font-size: 8px; font-weight: 700; color: #fff; }
.forefind-page .lcard-tier-t { font-family: var(--ff-font); font-size: 10.5px; color: #fff; font-weight: 600; }
.forefind-page .lcard-lbl { position: absolute; top: 13px; right: 13px; font-family: var(--ff-font); font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: normal; padding: 4px 11px; border-radius: 100px; }
.forefind-page .lcard-body { padding: 20px 20px 0; flex: 1; display: flex; flex-direction: column; gap: 13px; }
.forefind-page .lcard-name { font-family: var(--ff-font); font-weight: 700; font-size: 17px; color: var(--ff-ink); letter-spacing: -.01em; margin-bottom: 0; }
.forefind-page .lcard-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 0; }
.forefind-page .lcard-chip { font-family: 'Inter', sans-serif; font-size: 11.5px; color: var(--ff-body); background: var(--ff-surface); border: 1px solid var(--ff-border); border-radius: 100px; padding: 3px 10px; }
.forefind-page .lcard-stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--ff-border); border-radius: 10px; overflow: hidden; margin: 0; }
.forefind-page .lcard-stat { padding: 7px 7px; text-align: left; border-right: 1px solid var(--ff-border); border-bottom: none; min-width: 0; }
.forefind-page .lcard-stat:last-child { border-right: none; }
/* The four figures were setting the card's height: full-size type, and values
   like "101-500 sq.ft area" running to four lines. Smaller, and capped at two
   lines each, so every card in a row stays the same compact height. */
.forefind-page .ls-val {
  font-family: var(--ff-font);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ff-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.forefind-page .ls-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ff-faint);
  line-height: 1.2;
  margin-top: 2px;
  white-space: nowrap;
}
.forefind-page .lcard-sigs { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 20px; }
.forefind-page .lcard-sig { font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 600; border-radius: 100px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 5px; }
.forefind-page .lcard-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 14px 20px 20px; border-top: 1px solid var(--ff-hairline); }
.forefind-page .lcard-band { display: inline-flex; align-items: center; gap: 6px; font-family: 'Inter', sans-serif; font-size: 12px; color: var(--ff-muted); }
.forefind-page .lcard-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ff-brand); flex-shrink: 0; }
/* Ranked position within the results. Bottom-left of the image so it never
   collides with the investment label (top-right) or the tier pill (top-left). */
.forefind-page .lcard-rank {
  position: absolute;
  left: 13px;
  bottom: 13px;
  font-family: var(--ff-font);
  font-size: 11px;
  font-weight: 700;
  color: var(--ff-ink);
  background: rgba(255,255,255,.94);
  border: 1px solid var(--ff-border);
  padding: 2px 8px;
  border-radius: 100px;
  line-height: 1.5;
}
.forefind-page .lcard-fri { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
.forefind-page .lcard-fri-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ff-fri);
  background: var(--ff-brand-soft);
  border: 1px solid var(--ff-brand-mid);
  border-radius: 100px;
  padding: 2px 6px;
  line-height: 1.4;
}
.forefind-page .lcard-stars { color: var(--ff-fri); font-size: 11px; letter-spacing: 1px; }
.forefind-page .lcard-cta { background: var(--ff-purple); color: #fff; font-family: var(--ff-font); font-weight: 600; font-size: 12px; border-radius: 9px; padding: 9px 13px; white-space: nowrap; transition: background .15s; }
.forefind-page .lcard:hover .lcard-cta { background: var(--ff-purple-dark); }

/* The card's own responsive behaviour. Page-level grid columns stay with
   each page, which sets how many cards sit across. */
@media (max-width: 1024px) {
  .forefind-page .lcard-stats { grid-template-columns: repeat(2, 1fr); }
  .forefind-page .lcard-stat:nth-child(2) { border-right: none; }
  .forefind-page .lcard-stat:nth-child(-n+2) { border-bottom: 1px solid var(--ff-border); }
}