/* ================================================================
   CULLECTS GLOBAL CSS KIT
   Paste into: Elementor → Site Settings → Custom CSS  (Pro)
   (Hello Theme → Customize → Additional CSS also works, but Site
   Settings exports with your Elementor kit — preferred.)
   Design tokens also ship inside the Cullects Toolkit plugin, so
   widgets work even before you paste this. This kit adds the
   site-wide typography, buttons, badges and hover language.
   ================================================================ */

/* ---------- tokens (safe to keep duplicated with plugin) ---------- */
:root{
  --lime:#C8F51D;--lime-dark:#A9D40E;--ink:#151517;--ink2:#212123;
  --grey:#5c5c60;--line:rgba(21,21,23,.12);--cream:#fdfdfd;
  --font-d:'Space Grotesk',sans-serif;--font-b:'Suisse Intl','SuisseIntl','Inter',-apple-system,'Helvetica Neue',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
body{background:var(--cream)}

/* ---------- headings & kicker (add class to any Elementor widget) ---------- */
.cul-kicker,.rev,.cul-card{font-family:var(--font-b)}
.cul-kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-d);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--lime);padding:6px 14px;border-radius:99px}
/* .cul-title works on the widget itself OR as a CSS class on an Elementor Heading widget (styles the inner title) */
.cul-title,.cul-title .elementor-heading-title,.elementor-widget-heading.cul-title .elementor-heading-title,body .elementor .cul-title .elementor-heading-title{font-family:var(--font-d);font-weight:700;letter-spacing:-.025em;line-height:1.06;color:var(--ink)}
.cul-title .elementor-heading-title .cul-hl{background:var(--lime);padding:0 .12em;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.cul-sub,.cul-sub p{font-family:var(--font-b);color:var(--grey);font-size:16.5px;line-height:1.7}
.cul-sub a,.cul-sub a:visited{color:var(--lime-dark);font-weight:600;text-decoration:none}
.cul-sub a:hover{text-decoration:underline}
.cul-hl{background:var(--lime);padding:0 .12em;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---------- button system (add cul-btn + cul-btn-lime / cul-btn-ghost) ---------- */
.cul-btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-b);font-weight:600;font-size:15.5px;padding:17px 32px;border-radius:99px;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,color .3s,border-color .3s;position:relative;overflow:hidden;will-change:transform;text-decoration:none;cursor:pointer}
.cul-btn:active{transform:translateY(-1px) scale(.97)}
.cul-btn:focus-visible{outline:3px solid rgba(200,245,29,.7);outline-offset:3px}
.cul-btn-lime{background:linear-gradient(180deg,#202024,#151517);color:var(--lime);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 10px 22px -12px rgba(21,21,23,.35)}
.cul-btn-lime::before{content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.13),transparent);transform:skewX(-18deg);pointer-events:none}
.cul-btn-lime:hover::before{animation:culBtnShine .85s var(--ease)}
@keyframes culBtnShine{to{left:135%}}
.cul-btn-lime:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 18px 38px -12px rgba(21,21,23,.5),0 8px 26px -10px rgba(200,245,29,.45);color:var(--lime)}
.cul-btn-ghost{border:1.5px solid rgba(21,21,23,.25);color:var(--ink);background:rgba(255,255,255,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cul-btn-ghost:hover{border-color:var(--ink);transform:translateY(-3px);background:rgba(200,245,29,.18);box-shadow:0 14px 30px -14px rgba(21,21,23,.3);color:var(--ink)}
/* link-color guard: theme a{} rules must never recolor the pill buttons */
body a.cul-btn-lime,body a.cul-btn-lime:visited,body a.cul-btn-lime:hover,body a.cul-btn-lime:focus{color:var(--lime)}
body a.cul-btn-ghost,body a.cul-btn-ghost:visited,body a.cul-btn-ghost:hover,body a.cul-btn-ghost:focus{color:var(--ink)}
body a.cul-on-dark.cul-btn-ghost,body a.cul-on-dark.cul-btn-ghost:visited,body a.cul-on-dark.cul-btn-ghost:hover{color:#fff}
/* ghost on dark sections: add extra class cul-on-dark */
.cul-on-dark.cul-btn-ghost{color:#fff;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.07);backdrop-filter:none;-webkit-backdrop-filter:none}
.cul-on-dark.cul-btn-ghost:hover{border-color:var(--lime);background:rgba(200,245,29,.15);color:#fff}
.cul-arr{transition:transform .3s var(--ease);display:inline-block}
.cul-btn:hover .cul-arr{transform:translateX(5px)}
@media(prefers-reduced-motion:reduce){.cul-btn-lime:hover::before{animation:none}}

/* Style native Elementor buttons the same way: add cul-ebtn to the widget */
.cul-ebtn .elementor-button{background:linear-gradient(180deg,#202024,#151517);color:var(--lime);border-radius:99px;padding:17px 32px;font-weight:600;font-size:15.5px;transition:transform .3s var(--ease),box-shadow .3s var(--ease);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 10px 22px -12px rgba(21,21,23,.35);position:relative;overflow:hidden}
.cul-ebtn .elementor-button:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 18px 38px -12px rgba(21,21,23,.5),0 8px 26px -10px rgba(200,245,29,.45);color:var(--lime)}

/* ---------- verified / trust badges ---------- */
.cul-verified{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-d);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:linear-gradient(135deg,rgba(200,245,29,.38),rgba(200,245,29,.12) 55%,rgba(255,255,255,.7));border:1px solid rgba(169,212,14,.55);padding:6px 12px;border-radius:99px;box-shadow:0 4px 12px -7px rgba(169,212,14,.8),inset 0 1px 0 rgba(255,255,255,.7);position:relative;overflow:hidden}
.cul-verified::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-18deg)}
*:hover>.cul-verified::after,.cul-verified:hover::after{animation:culVerShine .9s var(--ease)}
@keyframes culVerShine{to{left:130%}}
.cul-chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-d);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);background:#fff;border:1px solid var(--line);padding:6px 11px;border-radius:99px}

/* ---------- card hover language (add cul-card to any column/container) ---------- */
.cul-card{background:#fff;border:1px solid var(--line);border-radius:20px;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.cul-card:hover{transform:translateY(-6px);border-color:rgba(21,21,23,.25);box-shadow:0 26px 52px -30px rgba(21,21,23,.5)}
.cul-card:hover img{transform:scale(1.05)}
.cul-card img{transition:transform .6s var(--ease)}

/* ---------- spotlight hover (lime radial follows cursor; toolkit.js optional) ---------- */
.cul-spot{position:relative;overflow:hidden}
.cul-spot::before{content:"";position:absolute;width:260px;height:260px;background:radial-gradient(circle,rgba(200,245,29,.5),transparent 60%);left:var(--mx,50%);top:var(--my,50%);translate:-50% -50%;opacity:0;transition:opacity .3s;pointer-events:none}
.cul-spot:hover::before{opacity:1}

/* content links + breadcrumbs keep brand color even with theme kits */
.elementor-widget-text-editor.rev a:not(.cul-btn):not(.cul-cue):not(.cul-totop),.elementor-widget-text-editor.cul-sub a{color:var(--lime-dark)}

/* ---------- section rhythm helpers ---------- */
.cul-section{max-width:1280px;margin:0 auto;padding:96px 24px}
@media(max-width:560px){.cul-section{padding:56px 18px}}

/* ================================================================
   TYPOGRAPHY RHYTHM — normalizes WP/Elementor default margins so
   spacing matches the HTML design (paragraphs, headings, widget gaps)
   ================================================================ */
body{font-family:var(--font-b);font-size:16px;line-height:1.6;color:var(--ink)}
body,body *{-webkit-font-smoothing:antialiased!important;-moz-osx-font-smoothing:grayscale!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* all Elementor text/heading/list widgets use brand fonts even if the theme sets another body font */
.elementor-widget-text-editor,.elementor-widget-icon-list,.elementor-widget-button{font-family:var(--font-b)}

/* headings written inside Text Editor widgets: brand font + ink, never kit colors */
.elementor-widget-text-editor h2,.elementor-widget-text-editor h3,.elementor-widget-text-editor h4{font-family:var(--font-d);color:var(--ink);margin:0 0 7px;line-height:1.25}
.elementor-widget-text-editor b{color:inherit}

/* paragraphs inside Elementor text widgets: tight, consistent, no trailing gap */
.elementor-widget-text-editor p{margin:0 0 14px;line-height:1.65}
.elementor-widget-text-editor p:last-child{margin-bottom:0}
.elementor-widget-text-editor ul,.elementor-widget-text-editor ol{margin:0 0 14px;padding-left:20px}

/* headings: kill theme margins — vertical rhythm comes from widget spacing */
.elementor-widget-heading .elementor-heading-title{margin:0;line-height:1.12}
.elementor h1,.elementor h2,.elementor h3,.elementor h4,.elementor h5,.elementor h6{margin-block-start:0;margin-block-end:0}

/* headline sizes get tighter leading, small headings a bit more air */
h1.elementor-heading-title{line-height:1.04}
h2.elementor-heading-title{line-height:1.08}
h3.elementor-heading-title,h4.elementor-heading-title{line-height:1.25}

/* the classic kicker → title → sub cadence */
.cul-kicker+*{margin-top:14px}

/* images never add phantom baseline gap */
.elementor img{vertical-align:middle}

/* cullects font hardening */
.elementor-section h1,.elementor-section h2,.elementor-section h3,.elementor-section h4,.e-con h1,.e-con h2,.e-con h3,.e-con h4{font-family:var(--font-d)}
.elementor-widget-text-editor,.elementor-widget-text-editor p,.elementor-widget-heading{font-family:var(--font-b)}
html{scroll-behavior:smooth}