/* =========================================================
   Silverline overrides for DTV-ported tool pages.
   This file loads AFTER each tool's inline <style> block,
   so it wins the cascade. Tool-specific hero/card/button
   classes get repainted in Silverline's palette + fonts.
   ========================================================= */

:root {
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans-silverline: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono-silverline: 'JetBrains Mono', 'SF Mono', monospace;
}

/* ===== TOOL HERO HEADINGS ===== */
/* Every tool has a hero H1 inside a `.xxx-hero` section. We match them
   generically and swap the font family to Fraunces, keep the serif/sky
   gradient treatment from Silverline's hero typography. */
.dash-hero h1,
.ex-hero h1,
.ls-hero h1,
.tech-hero h1,
.pat-hero h1,
.pap-hero h1,
.uni-hero h1,
.profile-hero h1,
.hero h1,
.hero-short h1 {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  background: linear-gradient(180deg, var(--silver-lt, #c7cedc) 0%, #ffffff 50%, var(--sky-bright, #5a8aff) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Hero sub paragraph */
.dash-hero-sub,
.ex-hero-sub,
.ls-hero-sub,
.tech-hero-sub,
.pat-hero-sub,
.pap-hero-sub,
.uni-hero-sub,
.profile-hero-sub,
.hero-sub {
  font-family: var(--sans-silverline) !important;
  color: var(--text-2, #c7cedc) !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ===== HERO BADGE PILL ===== */
/* DTV uses solid indigo fill; Silverline uses a subtle outlined pill */
.hero-badge,
.dash-hero-badge {
  display: inline-block !important;
  font-family: var(--mono-silverline) !important;
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.22em !important;
  color: var(--sky-bright, #5a8aff) !important;
  margin-bottom: 22px !important;
  padding: 6px 16px !important;
  background: rgba(60, 110, 224, 0.08) !important;
  border: 1px solid rgba(60, 110, 224, 0.25) !important;
  border-radius: 100px !important;
  backdrop-filter: blur(10px) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

/* ===== HERO GRID OVERLAY ===== */
/* Suppress DTV's grid background — the mesh from Silverline is already there */
.hero-bg-grid,
.dash-hero .hero-bg-grid {
  display: none !important;
}

/* ===== STAT VALUES ===== */
/* Replace mono JetBrains stat values with Fraunces serif.
   Generic selectors (`.stat-value`, `.stat-label`) catch all tool variants. */
.stat-value,
.dash-stat-value,
.ex-stat-value,
.ls-stat-value,
.tech-stat-value,
.pat-stat-value,
.pap-stat-value,
.uni-stat-value,
.profile-stat-value,
.fto-callout-stat-num,
.hero-stats .stat > :first-child {
  font-family: var(--serif) !important;
  font-weight: 600 !important;
  font-size: clamp(1.8rem, 2.8vw, 2.4rem) !important;
  letter-spacing: -0.03em !important;
  background: linear-gradient(180deg, #ffffff 0%, var(--sky-bright, #5a8aff) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  line-height: 1 !important;
}

.stat-label,
.dash-stat-label,
.ex-stat-label,
.ls-stat-label,
.tech-stat-label,
.pat-stat-label,
.pap-stat-label,
.uni-stat-label,
.profile-stat-label,
.fto-callout-stat-label {
  font-family: var(--mono-silverline) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.2em !important;
  color: var(--text-3, #8a93a8) !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  margin-top: 6px !important;
}

/* Stat containers — use flex spacing with subtle divider */
.hero-stats,
.dash-stats-bar {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 48px !important;
  flex-wrap: wrap !important;
  margin-top: 32px !important;
}

.hero-stats .stat {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Stat divider — subtle */
.dash-stat-divider {
  background: rgba(60, 110, 224, 0.2) !important;
  height: 28px !important;
}

/* ===== BUTTONS ===== */
/* DTV has btn-primary (blue pill); Silverline's primary is white pill */
.btn-primary,
.btn.btn-primary {
  background: #ffffff !important;
  color: #020509 !important;
  padding: 14px 32px !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  border: none !important;
  transition: all 0.25s !important;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.08) !important;
}
.btn-primary:hover,
.btn.btn-primary:hover {
  background: var(--silver-lt, #c7cedc) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 36px rgba(255, 255, 255, 0.14) !important;
}

.btn-secondary,
.btn.btn-secondary {
  background: transparent !important;
  color: var(--text, #f5f7fc) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  padding: 14px 28px !important;
  border-radius: 100px !important;
  transition: all 0.25s !important;
}
.btn-secondary:hover,
.btn.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* ===== SEARCH BARS ===== */
.ex-search,
.ls-search,
.dash-search,
.tech-search,
.pat-search,
.pap-search,
input[type="search"],
.search-input {
  background: rgba(10, 18, 36, 0.6) !important;
  border: 1px solid var(--line, #1a2240) !important;
  border-radius: 100px !important;
  color: var(--text, #f5f7fc) !important;
  font-family: var(--sans-silverline) !important;
  padding: 14px 22px 14px 48px !important;
  transition: border-color 0.2s, background 0.2s !important;
}
.ex-search:focus,
.ls-search:focus,
.dash-search:focus,
.tech-search:focus,
.pat-search:focus,
.pap-search:focus,
input[type="search"]:focus,
.search-input:focus {
  border-color: var(--sky-bright, #5a8aff) !important;
  background: rgba(10, 18, 36, 0.8) !important;
  outline: none !important;
}

/* ===== FILTER PILLS / TABS ===== */
.ex-type-pill,
.ls-tab,
.filter-pill,
.tech-filter-btn,
.pat-filter-btn,
.pap-filter-btn {
  background: rgba(10, 18, 36, 0.5) !important;
  border: 1px solid var(--line, #1a2240) !important;
  border-radius: 100px !important;
  color: var(--text-2, #c7cedc) !important;
  font-family: var(--sans-silverline) !important;
  transition: all 0.2s !important;
}
.ex-type-pill:hover,
.ls-tab:hover,
.filter-pill:hover,
.tech-filter-btn:hover,
.pat-filter-btn:hover,
.pap-filter-btn:hover {
  border-color: rgba(90, 138, 255, 0.3) !important;
  color: var(--text, #f5f7fc) !important;
}
.ex-type-pill.active,
.ls-tab.active,
.filter-pill.active,
.tech-filter-btn.active,
.pat-filter-btn.active,
.pap-filter-btn.active {
  background: rgba(60, 110, 224, 0.15) !important;
  border-color: var(--sky-bright, #5a8aff) !important;
  color: var(--sky-bright, #5a8aff) !important;
}

/* Topic suggestion chips on dashboard */
.dash-topic-chip {
  background: rgba(60, 110, 224, 0.08) !important;
  border: 1px solid rgba(60, 110, 224, 0.2) !important;
  color: var(--sky-bright, #5a8aff) !important;
  border-radius: 100px !important;
  padding: 6px 14px !important;
  font-size: 0.82rem !important;
  transition: all 0.2s !important;
}
.dash-topic-chip:hover {
  background: rgba(60, 110, 224, 0.15) !important;
  border-color: rgba(90, 138, 255, 0.4) !important;
}

/* ===== CARDS (patent, paper, tech, uni) ===== */
.patent-card,
.paper-card,
.tech-card,
.uni-card,
.dash-card,
.ls-card {
  background: rgba(10, 18, 36, 0.55) !important;
  border: 1px solid var(--line, #1a2240) !important;
  border-radius: 12px !important;
  transition: all 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) !important;
}
.patent-card:hover,
.paper-card:hover,
.tech-card:hover,
.uni-card:hover,
.dash-card:hover,
.ls-card:hover {
  border-color: rgba(90, 138, 255, 0.4) !important;
  background: rgba(14, 24, 46, 0.7) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 40px rgba(60, 110, 224, 0.1) !important;
}

/* Card titles serif */
.patent-card h3,
.paper-card h3,
.tech-card h3,
.uni-card h3,
.ls-card h3,
.patent-card .card-title,
.paper-card .card-title,
.tech-card .card-title,
.uni-card .card-title {
  font-family: var(--serif) !important;
  font-weight: 600 !important;
  color: var(--text, #f5f7fc) !important;
  letter-spacing: -0.01em !important;
}

/* ===== SECTION HEADINGS INSIDE TOOL BODY ===== */
/* DTV had weight 800 + gradient Inter; Silverline is weight 500-600 Fraunces */
.section h2,
.tools-section h2 {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  font-size: clamp(1.5rem, 2.8vw, 2rem) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  color: var(--text, #f5f7fc) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

.section-label {
  font-family: var(--mono-silverline) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.22em !important;
  color: var(--sky-bright, #5a8aff) !important;
  text-transform: uppercase !important;
}

/* ===== PAGE BACKGROUND ===== */
/* Ensure the Silverline body gradient + mesh show through under tool sections */
body {
  background: var(--bg, #020509) !important;
}

/* Tool sections should not cover up the mesh — let it peek through */
.dash-hero,
.ex-hero,
.ls-hero,
.tech-hero,
.pat-hero,
.pap-hero,
.uni-hero,
.profile-hero,
.hero,
.hero-short {
  background: transparent !important;
}

/* ===== HERO PADDING TO CLEAR FIXED NAV ===== */
.dash-hero,
.ex-hero,
.ls-hero,
.tech-hero,
.pat-hero,
.pap-hero,
.uni-hero,
.profile-hero,
.hero,
.hero-short {
  padding-top: 88px !important;
  padding-bottom: 40px !important;
}

/* ===== FIXED NAV OVERRIDE ===== */
/* Use Silverline's nav-page look even if tool had a different nav class before */
.nav.nav-page {
  background: rgba(2, 5, 9, 0.85) !important;
  backdrop-filter: blur(22px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* ===== TOOL-SPECIFIC: Leaflet map (university-profiles) ===== */
.leaflet-container {
  background: rgba(10, 18, 36, 0.6) !important;
  border: 1px solid var(--line, #1a2240) !important;
  border-radius: 12px !important;
}

/* Marker cluster colors aligned with Silverline palette */
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
  font-family: var(--sans-silverline) !important;
  font-weight: 600 !important;
}

/* ===== CODE / PRE BLOCKS (e.g. papers.html embed URLs) ===== */
code,
pre {
  font-family: var(--mono-silverline) !important;
  color: var(--sky-bright, #5a8aff) !important;
}