/* ════════════════════════════════════════════════════════════════════
   FISH KORAVI · TYPOGRAPHY LAYER (titles only)
   Build: type2  —  loads AFTER every other stylesheet so !important
                     at equal specificity still wins.
   Scope: HEADINGS and heading-adjacent eyebrows only. Never touches
   logo, nav labels, buttons, body copy, data values, scores, times,
   pills, chips, or recommendation names.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --fk-ty-face: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fk-ty-color-strong: #f1f6fb;
  --fk-ty-color-cyan: #3dd6f5;
  --fk-ty-color-sub: #aebccb;
}

/* ───────── PAGE TITLES — 30–34px on phones ───────── */
.fkx-title,
.section-title,
.fkm-hero-title,
.kmsn-hero-title,
.fk-page-title,
#home-hero-title,
.fk-wp-title,
.kcall-headline,
.tab-header-title,
.fkm-hero .tab-header-title {
  font-family: var(--fk-ty-face) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: -0.015em !important;
  color: var(--fk-ty-color-strong) !important;
  line-height: 1.08 !important;
  font-size: clamp(1.95rem, 8.2vw, 2.15rem) !important; /* 31.2–34.4 at 412 */
  margin-bottom: 10px !important;
}
.section-title span,
.fk-wp-title span { letter-spacing: -0.015em !important; font-family: var(--fk-ty-face) !important; }

/* Guide hero species name — same tier as page titles */
.fkg-species,
#tab-ai .fkg-species,
.fk-si-name,
#tab-ai .fk-si-name {
  font-family: var(--fk-ty-face) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
  color: var(--fk-ty-color-strong) !important;
  line-height: 1.05 !important;
  font-size: clamp(1.95rem, 8.2vw, 2.15rem) !important;
}
.fkg-species-sub,
.fk-si-common {
  font-family: var(--fk-ty-face) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--fk-ty-color-sub) !important;
  font-size: 0.98rem !important;
}

/* ───────── MAIN SECTION TITLES — 26–28px, bold ───────── */
.fkg-sec-title,
#tab-ai .fkg-sec-title,
#tab-ai.fkg-on .fkg-sec-title,
.k-section-title,
.kmsn-section-title,
.species-section-title {
  font-family: var(--fk-ty-face) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: -0.012em !important;
  color: var(--fk-ty-color-strong) !important;
  line-height: 1.15 !important;
  font-size: clamp(1.65rem, 7vw, 1.8rem) !important; /* 26.4–28.8 */
  margin: 6px 0 0 !important;
}

/* Card-level big titles (bait/lure "Bait Recommendation" etc.) match
   the section tier so they feel part of the same hierarchy, with
   enough specificity to beat the compound rule in koravi-refined.css. */
.k-premium-title,
.k-premium-card .k-premium-title,
.k-premium-card.fk-salt .k-premium-title,
.k-premium-card.fk-fresh .k-premium-title,
.fk-pc-card .fk-pc-title {
  font-family: var(--fk-ty-face) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: -0.012em !important;
  color: var(--fk-ty-color-strong) !important;
  line-height: 1.15 !important;
  font-size: clamp(1.5rem, 6vw, 1.7rem) !important; /* 24–27 */
  padding-left: 0 !important;
  border-left: none !important;
}

/* Card <h2> inside tab panels (The Bite, Guide, Wizbook, Explore,
   License) — kept to card-title tier. */
#tab-home .card > h2,
#tab-ai .card > h2,
#tab-license .card > h2,
#tab-myfishing .card > h2,
#tab-explore .card > h2 {
  font-family: var(--fk-ty-face) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: -0.008em !important;
  color: var(--fk-ty-color-strong) !important;
  line-height: 1.2 !important;
  font-size: clamp(1.25rem, 5.4vw, 1.45rem) !important; /* 20–23 */
}

/* ───────── CARD HEADINGS inside the Species-Intel redesign ─────────
   "Where to fish", "How to fish", "Why today" — cyan accent, prominent
   enough to lead each section but still clearly below the section title. */
.fk-si-sec-head,
.fk-si-card .fk-si-sec-head {
  font-family: var(--fk-ty-face) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: -0.005em !important;
  color: var(--fk-ty-color-cyan) !important;
  line-height: 1.2 !important;
  font-size: clamp(1.3rem, 5.4vw, 1.45rem) !important; /* 20.8–23.2 */
  gap: 12px !important;
}
.fk-si-sec-head::after { opacity: 0.7; }

/* ───────── EYEBROW LABELS — 11–12px, no excessive tracking ───────── */
.fkg-sec-eyebrow,
#tab-ai .fkg-sec-eyebrow,
.fk-si-win-eyebrow,
.fk-si-cond-label,
.k-tab-eyebrow,
.da-eyebrow,
.fk-guide-eyebrow,
.fk-mode-eyebrow,
.k-premium-section-label,
.tab-header-eyebrow,
.fkm-hero .tab-header-eyebrow {
  font-family: var(--fk-ty-face) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important; /* was 0.22-0.3em legacy */
  font-size: 0.72rem !important; /* ~11.5px */
  color: var(--fk-ty-color-cyan);
}
/* Keep eyebrow colour role variants (gold etc.) if the component sets
   them via a parent — only override family / size / letter-spacing. */

/* Guide kicker (breadcrumb) — muted small subhead */
.fkg-kicker,
#tab-ai .fkg-kicker {
  font-family: var(--fk-ty-face) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--fk-ty-color-sub) !important;
  font-size: 0.98rem !important;
}

/* ───────── Hero wrap tolerance ───────── */
.fkg-species, .fk-si-name,
#tab-ai .fkg-species, #tab-ai .fk-si-name {
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: none !important;
}
.fkg-species, #tab-ai .fkg-species {
  /* The guide hero shares its row with a species photo on narrow phones.
     Shrink slightly so long names like "Largemouth Bass" wrap at the
     word boundary instead of mid-syllable. */
  font-size: clamp(1.6rem, 7vw, 2.1rem) !important;
}
.fk-si-titleblock { align-items: flex-end; text-align: right; max-width: 56%; }
.fk-si-common { display: block; margin-top: 4px; line-height: 1.2; }

/* ───────── BREAKPOINTS ───────── */
@media (max-width: 360px) {
  .fkx-title, .section-title, .fkm-hero-title, .kmsn-hero-title,
  .fk-wp-title, .kcall-headline, .tab-header-title,
  .fkg-species, .fk-si-name { font-size: 1.75rem !important; } /* 28px */
  .fkg-sec-title, .k-section-title { font-size: 1.45rem !important; } /* 23.2 */
  .k-premium-title, .fk-pc-card .fk-pc-title { font-size: 1.3rem !important; }
  .fk-si-sec-head { font-size: 1.15rem !important; }
  #tab-home .card > h2, #tab-ai .card > h2,
  #tab-license .card > h2, #tab-myfishing .card > h2,
  #tab-explore .card > h2 { font-size: 1.1rem !important; }
}

@media (min-width: 760px) {
  .fkx-title, .section-title, .fkm-hero-title, .kmsn-hero-title,
  .fk-wp-title, .kcall-headline, .tab-header-title,
  .fkg-species, .fk-si-name { font-size: 2.4rem !important; } /* 38.4 */
  .fkg-sec-title, .k-section-title { font-size: 1.95rem !important; } /* 31.2 */
  .k-premium-title, .fk-pc-card .fk-pc-title { font-size: 1.85rem !important; }
  .fk-si-sec-head { font-size: 1.6rem !important; }
}