/**
 * Forefind — Browse by Industry page.
 *
 * Visual system ported from the static mockup (forefind-industry-page.html):
 * a navy (#0B1F3A) / teal (#0D9B76) palette, DM Sans display type + Inter
 * body type, a dark split-image page banner, pill-shaped sticky tabs and
 * rounded accordion cards. All token overrides and rules are scoped under
 * `.forefind-industry` so this look never leaks into the shared
 * `forefind-ui.css` system used by the other Forefind pages — those pages
 * are being restyled in parallel and should not be affected by this file.
 *
 * Structure (accordion, tab bar, search, PHP data loop) is untouched; only
 * presentation changes here.
 */

/* DM Sans (display) + DM Mono are mockup-specific; Inter (body) is already
   enqueued site-wide in functions.php, so it is not re-imported here. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

/* ── LOCAL TOKENS (mockup palette, scoped to this page only) ── */
.forefind-industry {
  --ff-ink:           #0B1F3A;   /* navy */
  --ff-ink-2:         #1a3558;   /* navy-80 */
  --ff-brand:         #0D9B76;   /* teal */
  --ff-brand-dark:    #0B8A68;
  --ff-brand-soft:    #E8F8F3;   /* teal-light */
  --ff-brand-mid:     #B2E8D8;   /* teal-mid */
  --ff-brand-ondark:  #30B94A;   /* brighter accent green used on the dark hero */
  --ff-body:          #4A5568;
  --ff-muted:         #8E97A8;
  --ff-faint:         #8E97A8;
  --ff-border:        #E2E4EA;
  --ff-border-strong: #C8CBD6;
  --ff-hairline:      #E2E4EA;
  --ff-surface:       #F4F5F8;
  --ff-surface-2:     #EDEEF2;
  --ff-white:         #FFFFFF;
  --ff-dark:          #0E1117;
  --ff-r-sm:          6px;
  --ff-r-md:          10px;
  --ff-r-lg:          16px;
  --ff-font:          'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ff-font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ff-font-mono:     'DM Mono', monospace;

  font-family: var(--ff-font-body);
}

/* ── PAGE HERO — dark split banner (content left, photo right) ── */
.forefind-industry .page-hero {
  position: relative;
  overflow: hidden;
  background: var(--ff-dark);
  border-bottom: none;
  padding: 0;
  min-height: 440px;
  display: flex;
  align-items: center;
}
.forefind-industry .page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 120% at 10% -10%, rgba(48,36,174,.42), transparent 55%),
    radial-gradient(90% 90% at 38% 130%, rgba(48,185,74,.16), transparent 55%);
}
.forefind-industry .page-hero-grid { display: none; }
.forefind-industry .page-hero-media {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 44%;
  z-index: 0;
  background-image: url('https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=1000&q=80&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
}
.forefind-industry .page-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ff-dark) 0%, rgba(14,17,23,.72) 24%, rgba(14,17,23,.12) 62%, rgba(14,17,23,.42) 100%);
}
.forefind-industry .page-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--ff-container);
  margin: 0 auto;
  padding: 56px var(--ff-gutter);
}
.forefind-industry .page-hero-content > * { max-width: 600px; }

.forefind-industry .breadcrumb { color: rgba(255,255,255,.5); margin-bottom: 16px; font-family: var(--ff-font-body); }
.forefind-industry .breadcrumb a { color: rgba(255,255,255,.62); }
.forefind-industry .breadcrumb a:hover { color: var(--ff-brand); }
.forefind-industry .breadcrumb span { color: rgba(255,255,255,.85); }

.forefind-industry .page-title {
  font-family: var(--ff-font);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -1px;
  margin-bottom: 10px;
  max-width: none;
}
.forefind-industry .page-title span { color: var(--ff-brand-ondark); }
.forefind-industry .page-sub {
  font-size: 15.5px;
  color: rgba(255,255,255,.62);
  margin-bottom: 26px;
  max-width: 620px;
  line-height: 1.65;
}

.forefind-industry .hero-search {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  max-width: 540px;
  margin-bottom: 26px;
  box-shadow: none;
}
.forefind-industry .hero-search input { color: #fff; font-family: var(--ff-font-body); }
.forefind-industry .hero-search input::placeholder { color: rgba(255,255,255,.42); }
.forefind-industry .hero-search-btn {
  background: var(--ff-brand);
  font-family: var(--ff-font);
  font-size: 13px;
  font-weight: 600;
  padding: 0 26px;
  transition: filter .15s, background .15s;
}
.forefind-industry .hero-search-btn:hover { background: var(--ff-brand); filter: brightness(.94); }

.forefind-industry .hero-stats-row { gap: 44px; }
.forefind-industry .hstat-val,
.forefind-industry .hero-stat-val {
  font-family: var(--ff-font);
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.6px;
}
.forefind-industry .hstat-label,
.forefind-industry .hero-stat-label {
  font-size: 12.5px;
  color: rgba(255,255,255,.55);
  text-transform: none;
  letter-spacing: normal;
  margin-top: 2px;
}

@media (max-width: 980px) {
  .forefind-industry .page-hero-media { display: none; }
  .forefind-industry .page-hero-content > * { max-width: none; }
  .forefind-industry .page-hero { min-height: auto; display: block; padding: 44px 0; }
}

/* ── STICKY CATEGORY TAB BAR — pill tabs ── */
.forefind-industry .tab-bar {
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--ff-border);
  position: sticky;
  top: 0;
  z-index: 150;
}
.forefind-industry .tab-bar-inner {
  max-width: var(--ff-container);
  margin: 0 auto;
  padding: 12px var(--ff-gutter);
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.forefind-industry .tab-bar-inner::-webkit-scrollbar { display: none; }
.forefind-industry .tab-item {
  padding: 9px 16px;
  border-radius: 100px;
  font-family: var(--ff-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--ff-body);
  white-space: nowrap;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: background .15s, color .15s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.forefind-industry .tab-item:hover { background: var(--ff-surface); color: var(--ff-ink); }
.forefind-industry .tab-item.active { background: var(--ff-brand); color: #fff; border-bottom: 0; }
/* The mockup renders tab icons in markup but hides them for a clean text-only
   pill look; kept hidden here too (icon markup stays in the DOM, untouched). */
.forefind-industry .tab-icon { display: none; }

/* ── CONTENT WRAP ── */
.forefind-industry .content-wrap { max-width: var(--ff-container); margin: 0 auto; padding: 28px var(--ff-gutter) 60px; }
.forefind-industry .result-info { font-size: 12px; color: var(--ff-muted); margin-bottom: 16px; display: none; font-family: var(--ff-font-body); }
.forefind-industry .result-info strong { color: var(--ff-ink); }
.forefind-industry .result-info.show { display: block; }
.forefind-industry .no-results { display: none; text-align: center; padding: 60px 0; color: var(--ff-muted); font-size: 13px; }
.forefind-industry .no-results.show { display: block; }

/* ── CATEGORY CARD (accordion) ── */
.forefind-industry .cat-card {
  background: var(--ff-white);
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-r-lg);
  margin-bottom: 14px;
  overflow: hidden;
  scroll-margin-top: 80px;
  transition: box-shadow .2s, border-color .2s;
}
.forefind-industry .cat-card:hover { box-shadow: 0 10px 28px -18px rgba(16,17,23,.16); }
.forefind-industry .cat-card.open { border-color: #C3E9CC; }
.forefind-industry .cat-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  position: relative;
  transition: background .15s;
}
.forefind-industry .cat-card-header:hover { background: var(--ff-surface); }

/* Icon tile: this theme's industry icons (functions.php →
   forefind_industry_icon()) are stroke-only SVGs drawn in white with a teal
   accent — designed to sit on a solid dark tile, unlike the mockup's icons
   which carry their own light background swatch. Kept the navy tile + soft
   teal glow treatment so the existing icon set stays legible. */
.forefind-industry .cat-icon-tile {
  width: 50px;
  height: 50px;
  border-radius: 13px;
  background: var(--ff-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.forefind-industry .cat-icon-tile svg { width: 24px; height: 24px; position: relative; z-index: 1; }
.forefind-industry .cat-icon-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 20%, rgba(13,155,118,.35), transparent 60%);
}
.forefind-industry .cat-header-info { flex: 1; min-width: 0; }
.forefind-industry .cat-name {
  font-family: var(--ff-font);
  font-size: 17px;
  font-weight: 700;
  color: var(--ff-ink);
  letter-spacing: -.3px;
  margin-bottom: 3px;
}
.forefind-industry .cat-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ff-muted); }
.forefind-industry .cat-meta-divider { width: 1px; height: 10px; background: var(--ff-border-strong); }
.forefind-industry .cat-meta strong { color: var(--ff-brand); font-family: var(--ff-font); font-weight: 700; }
.forefind-industry .cat-view-link {
  font-family: var(--ff-font);
  font-size: 12px;
  font-weight: 600;
  color: var(--ff-brand);
  background: var(--ff-brand-soft);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 100px;
  transition: background .15s, color .15s;
}
.forefind-industry .cat-view-link:hover { background: var(--ff-brand); color: #fff; }
.forefind-industry .cat-chevron {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--ff-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ff-muted);
  transition: all .2s;
}
.forefind-industry .cat-card.open .cat-chevron {
  background: var(--ff-brand);
  border-color: var(--ff-brand);
  color: #fff;
  transform: rotate(180deg);
}

.forefind-industry .cat-card-body { display: none; padding: 0 22px 22px; border-top: 1px solid var(--ff-border); }
.forefind-industry .cat-card.open .cat-card-body { display: block; padding-top: 18px; }

.forefind-industry .subcat-group { margin-bottom: 16px; }
.forefind-industry .subcat-group:last-child { margin-bottom: 0; }
.forefind-industry .subcat-group-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ff-body);
  margin-bottom: 10px;
}
.forefind-industry .subcat-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.forefind-industry .subcat-pill {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ff-body);
  background: var(--ff-surface);
  border: 1px solid var(--ff-border);
  cursor: pointer;
  transition: all .15s;
}
.forefind-industry .subcat-pill:hover { background: var(--ff-brand-soft); border-color: var(--ff-brand); color: var(--ff-brand); }
.forefind-industry .subcat-pill.hidden { display: none; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .forefind-industry .content-wrap { padding: 24px var(--ff-gutter) 56px; }
  .forefind-industry .cat-view-link { display: none; }
}
@media (max-width: 480px) {
  .forefind-industry .content-wrap { padding: 20px var(--ff-gutter) 44px; }
  .forefind-industry .cat-card-header { padding: 16px; gap: 14px; }
  .forefind-industry .cat-icon-tile { width: 42px; height: 42px; }
  .forefind-industry .cat-icon-tile svg { width: 20px; height: 20px; }
}