/* ============================================================
   Figtree global font override
   ------------------------------------------------------------
   Loads Figtree from Google Fonts and routes every existing
   typeface reference (Inter, Space Grotesk, Switzer, JetBrains
   Mono, Geist, Geist Mono, Instrument Serif, Mona Sans, Kalam,
   Kode Mono, Satoshi, Wasted Year, and their *Placeholder*
   metric-shim siblings) through Figtree without touching the
   inline Framer styles in the HTML.

   How it works:
   1. @import pulls Figtree (300–900, italic + roman) from
      Google Fonts so the family is available everywhere.
   2. @font-face aliases redeclare each existing family with
      src: local("Figtree"). Because these declarations come
      after the inline <style data-framer-font-css> block, the
      browser uses them when resolving font-family lookups —
      so "Inter", "Space Grotesk", etc. all render Figtree.
   3. A * { font-family: ... !important } rule + Framer CSS
      variable overrides act as a belt-and-braces safety net
      for any inline style="font-family:..." declarations.
   ============================================================ */

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

/* ---- Font-family aliases: redirect every existing family to Figtree ---- */
/* The browser picks the LAST matching @font-face in document order, so as
   long as figtree.css is linked after Framer's inline font block these win. */

@font-face { font-family: "Inter";                       src: local("Figtree"), local("Figtree-Regular"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter";                       src: local("Figtree Italic"), local("Figtree-Italic"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter Placeholder";           src: local("Figtree"), local("Figtree-Regular"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Placeholder";           src: local("Figtree Italic"), local("Figtree-Italic"); font-weight: 100 900; font-style: italic; font-display: swap; }

@font-face { font-family: "Space Grotesk";               src: local("Figtree"), local("Figtree-Regular"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk";               src: local("Figtree Italic"), local("Figtree-Italic"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Space Grotesk Placeholder";   src: local("Figtree"), local("Figtree-Regular"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk Placeholder";   src: local("Figtree Italic"), local("Figtree-Italic"); font-weight: 100 900; font-style: italic; font-display: swap; }

@font-face { font-family: "Switzer";                     src: local("Figtree"), local("Figtree-Regular"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer";                     src: local("Figtree Italic"), local("Figtree-Italic"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Switzer Placeholder";         src: local("Figtree"), local("Figtree-Regular"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer Placeholder";         src: local("Figtree Italic"), local("Figtree-Italic"); font-weight: 100 900; font-style: italic; font-display: swap; }

@font-face { font-family: "Geist";                       src: local("Figtree"), local("Figtree-Regular"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist";                       src: local("Figtree Italic"), local("Figtree-Italic"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist Placeholder";           src: local("Figtree"), local("Figtree-Regular"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Placeholder";           src: local("Figtree Italic"), local("Figtree-Italic"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist Mono";                  src: local("Figtree"), local("Figtree-Regular"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono";                  src: local("Figtree Italic"), local("Figtree-Italic"); font-weight: 100 900; font-style: italic; font-display: swap; }

@font-face { font-family: "JetBrains Mono";              src: local("Figtree"), local("Figtree-Regular"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono";              src: local("Figtree Italic"), local("Figtree-Italic"); font-weight: 100 900; font-style: italic; font-display: swap; }

@font-face { font-family: "Mona Sans";                   src: local("Figtree"), local("Figtree-Regular"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Mona Sans";                   src: local("Figtree Italic"), local("Figtree-Italic"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Mona Sans Placeholder";       src: local("Figtree"), local("Figtree-Regular"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Mona Sans Placeholder";       src: local("Figtree Italic"), local("Figtree-Italic"); font-weight: 100 900; font-style: italic; font-display: swap; }

@font-face { font-family: "Instrument Serif";            src: local("Figtree"), local("Figtree-Regular"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif";            src: local("Figtree Italic"), local("Figtree-Italic"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Serif Placeholder";src: local("Figtree"), local("Figtree-Regular"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif Placeholder";src: local("Figtree Italic"), local("Figtree-Italic"); font-weight: 100 900; font-style: italic; font-display: swap; }

@font-face { font-family: "Kalam";                       src: local("Figtree"), local("Figtree-Regular"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Kode Mono";                   src: local("Figtree"), local("Figtree-Regular"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi";                     src: local("Figtree"), local("Figtree-Regular"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Wasted Year";                 src: local("Figtree"), local("Figtree-Regular"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ---- Belt-and-braces: force Figtree on every element ---- */

html, body, button, input, select, textarea, optgroup {
  font-family: 'Figtree', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

* {
  font-family: 'Figtree', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

*::before,
*::after,
*::placeholder,
*::first-letter,
*::first-line,
*::selection {
  font-family: 'Figtree', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ---- Override every Framer font-family CSS variable ---- */
:root, html, body, [data-framer-component-type], [data-framer-component-type] * {
  --framer-font-family: 'Figtree', sans-serif !important;
  --framer-font-family-bold: 'Figtree', sans-serif !important;
  --framer-font-family-italic: 'Figtree', sans-serif !important;
  --framer-font-family-bold-italic: 'Figtree', sans-serif !important;
  --framer-blockquote-font-family: 'Figtree', sans-serif !important;
  --framer-blockquote-font-family-bold: 'Figtree', sans-serif !important;
  --framer-blockquote-font-family-italic: 'Figtree', sans-serif !important;
  --framer-blockquote-font-family-bold-italic: 'Figtree', sans-serif !important;
  --framer-link-font-family: 'Figtree', sans-serif !important;
  --framer-link-current-font-family: 'Figtree', sans-serif !important;
  --framer-link-hover-font-family: 'Figtree', sans-serif !important;
  --framer-code-font-family: 'Figtree', sans-serif !important;
  --framer-font-family-preview: 'Figtree', sans-serif !important;
  --font-family: 'Figtree', sans-serif !important;
}

/* ============================================================
   Component-level typography spec (Figma → CSS)
   ============================================================ */

/* ---- Navbar: "Available for work" badge ---- */
/* Figtree 12 / kerning 1 / rgb(138,138,138) */
[data-framer-name="Available for work"],
[data-framer-name="Available for work"] p,
[data-framer-name="Available for work"] p * {
  font-size: 12px !important;
  letter-spacing: 1px !important;
  color: rgb(138, 138, 138) !important;
  --framer-font-size: 12px !important;
  --framer-letter-spacing: 1px !important;
  --framer-text-color: rgb(138, 138, 138) !important;
  --extracted-r6o4lv: rgb(138, 138, 138) !important;
}

/* ---- Navbar links (original Framer nav) ---- */
/* Inactive: Figtree 15 / Medium / kerning 0.4 / rgb(153,153,153)
   Active:   Figtree 15 / Bold   / kerning 0.4 / rgb(232, 80, 58) */
[data-framer-name="Links"] p.framer-text {
  font-size: 15px !important;
  letter-spacing: 0.4px !important;
  --framer-font-size: 15px !important;
  --framer-letter-spacing: 0.4px !important;
}
[data-framer-name="Links"] p.framer-text a {
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.4px !important;
  color: #1e1e1e !important;
}
[data-framer-name="Links"] p.framer-text a[data-framer-page-link-current="true"] {
  font-weight: 700 !important;
  color: rgb(232, 80, 58) !important;
}

/* ---- Sticky-nav pill (custom): same spec ---- */
.snav-link {
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.4px !important;
  color: #1e1e1e !important;
}
.snav-link[aria-current="page"] {
  font-weight: 700 !important;
  color: rgb(232, 80, 58) !important;
}

/* ============================================================
   Project category cards (Work / Photography listings)
   Card = button[role="listitem"] with an aria-label
   ============================================================ */

/* ---- Tag chip (PRD, SYS, APL, FIG, A.I) ---- */
/* Figtree 9 / Medium / line-height 12 / letter-spacing 1.5px */
button[role="listitem"][aria-label] > div > div[style*="top:0"][style*="right:0"] {
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  line-height: 12px !important;
}

/* ---- Card title (e.g. "Figma Plugins") ---- */
/* Figtree 17 / Bold / line-height 19.2 */
button[role="listitem"][aria-label] > div > div[style*="left:0"][style*="bottom:0"] > div:not(.cc-subtitle) {
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 19.2px !important;
  letter-spacing: -0.02em !important;
}

/* ---- Card subtitle (e.g. "3 projects") ---- */
/* Figtree 13 / Medium / line-height 13.5 */
button[role="listitem"][aria-label] .cc-subtitle {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 13.5px !important;
  letter-spacing: 0 !important;
}

/* ============================================================
   Hero block (replaces the old PNG with coded markup).
   Centered flex column inside the parent Framer container.
   ============================================================ */
.hero-coded {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 13px;
  box-sizing: border-box;
}
.hero-wordmark {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70%;
  flex: 0 1 auto;
}
.hero-tagline {
  margin: 0;
  font-family: 'Figtree', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(13px, 1.18vw, 17px);
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  color: rgba(0, 0, 0, 0.5);
  flex: 0 0 auto;
}
.hero-tagline * {
  font-family: 'Figtree', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}
.hero-tagline .hero-experience {
  font-weight: 500 !important;
  background: linear-gradient(90deg, #F5C19E, #FA1616);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
.hero-tagline .hero-users {
  color: rgba(30, 30, 30, 0.25) !important;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}