/* =========================================================
   Userflow — Beamer custom CSS (v3)
   Lessons learned: avoid [class*="..."] substring selectors
   on words that appear in container classes — text-transform
   and other inherited properties leak everywhere.
   ========================================================= */

/* 1. Load Figtree from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

/* 2. Apply Figtree globally */
html,
body,
html *,
body * {
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* 3. Headlines — bold, tight tracking, brand navy */
h1, h2, h3, h4, h5, h6,
.beamer_title,
.beamer_post_title {
  font-weight: 700 !important;
  letter-spacing: -0.018em !important;
  line-height: 1.22 !important;
  color: #121941 !important;
  text-transform: none !important;  /* explicitly reset */
}

/* Big page header */
h1 {
  font-size: 32px !important;
  letter-spacing: -0.025em !important;
}

/* Subtitle */
h1 + p,
h2 + p {
  font-weight: 400 !important;
  color: rgba(18, 25, 65, 0.7) !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* 4. Body copy — readable, brand navy, normal case */
p,
li,
span,
div,
.beamer_content,
.beamer_post_content,
.beamer_post p {
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: #121941 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* 5. Italic emphasis */
em, i {
  font-style: italic !important;
  font-weight: 400 !important;
}

/* 6. Category pills — ONLY known Beamer classes.
   Pills are already uppercase in the source HTML, so we don't
   need text-transform — we just refine weight and shape. */
.beamerCategory,
.beamer_category,
.beamerNew,
.beamerImprovement,
.beamerFix,
.beamerCategoryGroup {
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  font-size: 10.5px !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
}

/* 7. Date metadata — subtle */
.beamer_date {
  font-weight: 500 !important;
  font-size: 12.5px !important;
  color: rgba(18, 25, 65, 0.55) !important;
  text-transform: none !important;
}

/* 8. Right-hand filter list — clean labels, normal case */
input[type="checkbox"] + label {
  font-weight: 500 !important;
  font-size: 14px !important;
  color: rgba(18, 25, 65, 0.85) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* 9. Search input */
input[type="search"],
input[type="text"] {
  font-weight: 400 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(18, 25, 65, 0.12) !important;
  padding: 10px 14px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
input[type="search"]:focus,
input[type="text"]:focus {
  border-color: #74B0FF !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(116, 176, 255, 0.2) !important;
}

/* 10. Card refinements — softer shadow, gentle border */
.beamer_post,
article {
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(18, 25, 65, 0.04), 0 6px 24px rgba(18, 25, 65, 0.05) !important;
  border: 1px solid rgba(18, 25, 65, 0.06) !important;
}

/* 11. Inline links — branded hover */
a {
  font-weight: 500 !important;
  text-decoration: none !important;
  color: #121941 !important;
  border-bottom: 1px solid rgba(18, 25, 65, 0.25);
  transition: color 0.15s ease, border-color 0.15s ease;
}
a:hover {
  color: #74B0FF !important;
  border-bottom-color: #74B0FF !important;
}

/* Don't underline category-pill links */
.beamerCategory a,
.beamer_category a,
.beamerNew a,
.beamerImprovement a,
.beamerFix a {
  border-bottom: none !important;
}

/* 12. Floating notification button (popup widget only) */
.beamer_icon,
#beamerSelector {
  box-shadow: 0 4px 14px rgba(18, 25, 65, 0.18) !important;
}

/* 13. Page background — Userflow cream.
       Comment out this block to revert to default. */
body {
  background: #FFFDF8 !important;
}

/* 14. Dark category pills — force white text.
   Beamer's actual structure (confirmed via inspect):
     <div class="category categoryNew new">New</div>
   So we target `.category` compounded with the category-specific
   class. We hit ALL likely slug variants for multi-word names
   since I haven't inspected those pills directly. */

/* "New" — confirmed exact match */
.category.new,
.category.categoryNew,

/* "Onboarding & Flows" — covering camelCase and lowercase variants
   ("&" typically becomes "And", "and", or is dropped in slugs) */
.category.categoryOnboardingFlows,
.category.categoryOnboardingAndFlows,
.category.categoryOnboarding,
.category.onboardingflows,
.category.onboardingandflows,
.category.onboarding-flows,
.category.onboarding-and-flows,
.category.onboarding,

/* "Resource Center" — variants */
.category.categoryResourceCenter,
.category.categoryResource,
.category.resourcecenter,
.category.resource-center,
.category.resource {
  color: #ffffff !important;
}