{"version":3,"file":"BlogTheme.BmAz7e0K.mjs","names":[],"sources":["https:/framerusercontent.com/modules/x9NMFvN8o35BVETSvB1O/feclBhjUpZxkMiMrpssg/BlogTheme.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";// ── Blog design-system theme ──────────────────────────────────────────────────\n// Invisible style-injecting component for the blog index page and the\n// /resources/blog/:slug CMS detail template. It restyles Framer's canvas and\n// rich-text content (`.framer-text` tags) to the Proshort design system\n// without touching any CMS data. Two modes:\n//   detail — full long-form typography (headings, body, links, quotes, code)\n//   index  — conservative pass (fonts + link/accent colors only), so card\n//            layouts sized on the canvas keep their proportions.\nconst SHARED=`\n@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');\nhtml, body { background: #f9f8f9 !important; }\n.framer-text { font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif !important; }\ncode.framer-text, pre.framer-text, pre .framer-text { font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace !important; }\na.framer-text, .framer-text a { color: #1e56d6 !important; text-decoration: none !important; }\na.framer-text:hover, .framer-text a:hover { color: #1a1523 !important; text-decoration: underline !important; text-underline-offset: 3px; }\nstrong.framer-text, b.framer-text, .framer-text strong, .framer-text b { color: #1a1523 !important; font-weight: 600 !important; }\n`;const DETAIL=`\nh1.framer-text { font-size: clamp(30px, 4vw, 42px) !important; line-height: 1.1 !important; font-weight: 600 !important; letter-spacing: -0.022em !important; color: #1a1523 !important; text-wrap: balance; }\nh2.framer-text { font-size: clamp(22px, 2.6vw, 28px) !important; line-height: 1.22 !important; font-weight: 600 !important; letter-spacing: -0.018em !important; color: #1a1523 !important; }\nh3.framer-text { font-size: 19px !important; line-height: 1.32 !important; font-weight: 600 !important; letter-spacing: -0.012em !important; color: #1a1523 !important; }\nh4.framer-text, h5.framer-text, h6.framer-text { font-weight: 600 !important; letter-spacing: -0.01em !important; color: #1a1523 !important; }\np.framer-text { font-size: 16px !important; line-height: 1.75 !important; color: #332e3c !important; }\nli.framer-text { font-size: 16px !important; line-height: 1.7 !important; color: #332e3c !important; }\nli.framer-text::marker { color: #1e56d6; }\nblockquote.framer-text, .framer-text blockquote { border-left: 3px solid #2668f6 !important; padding-left: 16px !important; color: #55535e !important; font-style: normal !important; }\ncode.framer-text, .framer-text code { font-size: 0.9em !important; background: #f4f2f4 !important; border: 1px solid #e4e2e4 !important; border-radius: 6px !important; padding: 1px 6px !important; color: #221c2c !important; }\npre.framer-text, .framer-text pre { background: #f4f2f4 !important; border: 1px solid #e4e2e4 !important; border-radius: 10px !important; padding: 14px 16px !important; overflow-x: auto; }\n.framer-text table, table.framer-text { border-collapse: collapse !important; width: 100%; }\n.framer-text th, .framer-text td { border: 1px solid #dcdbdd !important; padding: 9px 12px !important; font-size: 14.5px !important; line-height: 1.55 !important; color: #332e3c !important; text-align: left; }\n.framer-text th { background: #f4f2f4 !important; font-weight: 600 !important; color: #1a1523 !important; }\n.framer-text hr, hr.framer-text { border: 0 !important; border-top: 1px solid #e4e2e4 !important; }\np.framer-text img, figure img { border-radius: 12px; }\n[id] { scroll-margin-top: 92px; }\n\n/* ── Article rail (Sidebar) ─────────────────────────────────────────────────\n   The CMS template names survive as data-framer-name in the published DOM:\n   Sidebar > Content > [BlogTheme pill, Table of content, Content-info, Written-by].\n   Make the rail sticky, close the template's 148px stack gap, put the post\n   meta first, and quiet the labels down to small caps. */\n[data-framer-name=\"Sidebar\"] { position: sticky !important; top: 92px !important; align-self: flex-start !important; }\n[data-framer-name=\"Sidebar\"] > [data-framer-name=\"Content\"] { gap: 26px !important; }\n[data-framer-name=\"Sidebar\"] [data-framer-name=\"Content\"]:has(time) { order: 1; }\n[data-framer-name=\"Sidebar\"] > [data-framer-name=\"Content\"] > [data-framer-name=\"Table of content\"] { order: 2; }\n[data-framer-name=\"Sidebar\"] [data-framer-name=\"Content\"]:has([data-framer-name=\"User\"]) { order: 3; }\n[data-framer-name=\"Sidebar\"] [data-framer-name=\"Heading\"] h6.framer-text { font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.08em; color: #86848d !important; }\n[data-framer-name=\"Table of content\"] { gap: 12px !important; }\n[data-framer-name=\"Table of content\"] a { text-decoration: none !important; }\n[data-framer-name=\"Table of content\"] a .framer-text, [data-framer-name=\"Table of content\"] a h6.framer-text { font-size: 13px !important; line-height: 1.5 !important; font-weight: 500 !important; color: #6f6e77 !important; }\n[data-framer-name=\"Table of content\"] a:hover .framer-text { color: #1a1523 !important; }\n[data-framer-name=\"Table of content\"] a[data-framer-name=\"Active\"] .framer-text { color: #1e56d6 !important; font-weight: 600 !important; }\n[data-framer-name=\"Table of content\"] > div:last-child { border-left: 2px solid #e4e2e4; padding-left: 14px; }\n[data-framer-name=\"Sidebar\"] [data-framer-name=\"User\"] .framer-text { font-size: 13px !important; color: #221c2c !important; }\n[data-framer-name=\"Sidebar\"] [data-framer-name=\"Date\"] .framer-text, [data-framer-name=\"Sidebar\"] [data-framer-name=\"Reading time\"] .framer-text, [data-framer-name=\"Sidebar\"] [data-framer-name=\"Number\"] .framer-text { font-size: 12.5px !important; color: #55535e !important; }\n`;export default function BlogTheme(props){const{mode=\"detail\",style}=props;const css=mode===\"detail\"?SHARED+DETAIL:SHARED;const onCanvas=RenderTarget.current()===RenderTarget.canvas;return /*#__PURE__*/_jsxs(\"div\",{style:{...style,width:onCanvas?undefined:0,height:onCanvas?undefined:0,overflow:\"hidden\"},children:[/*#__PURE__*/_jsx(\"style\",{dangerouslySetInnerHTML:{__html:css}}),onCanvas?/*#__PURE__*/_jsxs(\"span\",{style:{display:\"inline-flex\",alignItems:\"center\",gap:6,padding:\"4px 10px\",borderRadius:999,background:\"#eef4ff\",border:\"1px solid #c5d8fd\",color:\"#1e56d6\",fontSize:11,fontWeight:600,fontFamily:\"ui-sans-serif, system-ui, sans-serif\"},children:[\"Blog theme \\xb7 \",mode,\" (invisible on live site)\"]}):null]});}addPropertyControls(BlogTheme,{mode:{type:ControlType.Enum,title:\"Mode\",options:[\"detail\",\"index\"],optionTitles:[\"Detail page\",\"Index page\"],defaultValue:\"detail\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"BlogTheme\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./BlogTheme.map"],"mappings":"2KAqDE,SAAwB,EAAU,EAAM,CAAC,GAAK,CAAC,OAAK,SAAS,SAAO,EAAY,EAAI,IAAO,SAAS,EAAO,EAAO,EAAa,EAAS,EAAa,QAAQ,IAAI,EAAa,OAAO,OAAoB,EAAM,MAAM,CAAC,MAAM,CAAC,GAAG,EAAM,MAAM,EAAS,IAAA,GAAU,EAAE,OAAO,EAAS,IAAA,GAAU,EAAE,SAAS,QAAQ,EAAE,SAAS,CAAc,EAAK,QAAQ,CAAC,wBAAwB,CAAC,OAAO,CAAG,CAAC,CAAC,EAAE,EAAsB,EAAM,OAAO,CAAC,MAAM,CAAC,QAAQ,cAAc,WAAW,SAAS,IAAI,EAAE,QAAQ,WAAW,aAAa,IAAI,WAAW,UAAU,OAAO,oBAAoB,MAAM,UAAU,SAAS,GAAG,WAAW,IAAI,WAAW,sCAAsC,EAAE,SAAS,CAAC,gBAAmB,EAAK,2BAA2B,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAE,qBArD5pB,IAAiE,EAQnH,EAAO;;;;;;;;EAQL,EAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqCssB,EAAoB,EAAU,CAAC,KAAK,CAAC,KAAK,EAAY,KAAK,MAAM,OAAO,QAAQ,CAAC,SAAS,OAAO,EAAE,aAAa,CAAC,cAAc,YAAY,EAAE,aAAa,QAAQ,CAAC,CAAC"}