/* ==========================================================================
   VuloForm – site styles that sit next to the compiled Tailwind file.
    1. Design tokens (from app/globals.css)     6. Widgets: tabs, accordion, collapse
    2. Page / Astra integration                 7. Graphics: hero form, builder app, demos, cost chart
    3. Header                                   8. VuloForm blocks in the editor
    4. Background helpers (grain, dotted)       9. Blog article
    5. Lenis smooth scroll
   ========================================================================== */

/* 1. Design tokens ---------------------------------------------------------- */
:root {
	--cream: #fbf9f4;
	--paper: #ffffff;
	--ink: #0d1a45;
	--ink-soft: #4a557a;
	--navy: #004bf2;
	--navy-light: #0063fc;
	--mint: #19b37b;
	--mint-soft: #e3f6ee;
	--sky-soft: #e9eeff;
	--peach-soft: #ffeee3;
	--butter-soft: #fff6d9;
	--lilac-soft: #f1ebff;
	--line: #e7e3d8;
	--font-nunito: "Nunito";
}

/* 2. Page / Astra integration ---------------------------------------------- */
html { color-scheme: light; }
body.vf-site {
	background: var(--cream) !important;
	color: var(--ink);
	font-family: var(--font-nunito), ui-sans-serif, system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
body.vf-site :is(h1, h2, h3, h4, h5, h6) { font-family: inherit; color: inherit; }
.vf-scope :is(h1, h2, h3, .display) { font-weight: 700; }
::selection { background: var(--mint); color: #fff; }
/* Our templates are full width: no Astra boxes, paddings or backgrounds around them. */
body.vf-template #content > .ast-container { max-width: none; padding: 0; display: block; }
body.vf-template :is(#primary, .site-content, #page) { background: transparent; margin: 0; padding: 0; }
body.vf-site :is(.site-content, .ast-separate-container, .ast-plain-container) { background: transparent; }
.vf-template-main { display: block; }
.vf-template-extra { max-width: var(--container-6xl, 72rem); margin: 3rem auto; padding: 0 1rem; }
/* Keep sticky sections working: Astra wrappers must not clip. */
body.vf-site #page, body.vf-site .site-content { overflow: visible; }

/* 3. Header ---------------------------------------------------------------- */
.vf-nav { animation: vfNavIn .7s var(--vf-ease, ease) both; pointer-events: none; }
.vf-nav > * { pointer-events: auto; }
@keyframes vfNavIn { from { opacity: 0; transform: translateY(-2.5rem); } }
.vf-nav.is-scrolled .vf-nav-bar, .vf-nav.is-open .vf-nav-bar {
	border-color: rgba(231, 227, 216, .8);
	background: rgba(255, 255, 255, .75);
	box-shadow: 0 10px 40px -20px rgba(13, 26, 69, .35);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
}
.vf-nav.is-open .vf-burger-a { top: .375rem; transform: rotate(45deg); }
.vf-nav.is-open .vf-burger-b { top: .375rem; transform: rotate(-45deg); }
.vf-mobile:not([hidden]) { animation: vfDrop .3s var(--vf-ease, ease); }
@keyframes vfDrop { from { opacity: 0; transform: translateY(-.5rem); } }
body.admin-bar .vf-nav { top: 32px; }
@media (max-width: 782px) { body.admin-bar .vf-nav { top: 46px; } }

/* 4. Background helpers ---------------------------------------------------- */
.grain::before {
	content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .035;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.dotted { background-image: radial-gradient(rgba(13, 26, 69, .09) 1px, transparent 1px); background-size: 22px 22px; }
.caret { animation: vfBlink 1s steps(1) infinite; }
@keyframes vfBlink { 50% { opacity: 0; } }
.vf-pop-in { animation: vfPopIn .4s var(--vf-spring, ease) both; }
@keyframes vfPopIn { from { transform: scale(0); } }

/* 5. Lenis smooth scroll (from lenis/dist/lenis.css) ------------------------ */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* 6. Widgets --------------------------------------------------------------- */
/* Tabs: pill buttons with a sliding navy pill (like the original layoutId pill). */
.vf-tab-list { position: relative; display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.vf-tab-list > button {
	position: relative; z-index: 1; border: 0; border-radius: 99px; padding: .625rem 1.25rem; font: inherit; font-size: .875rem; font-weight: 600; line-height: 1.25rem;
	background: #fff; color: var(--ink-soft); cursor: pointer; transition: color .25s;
}
.vf-tab-list-plain > button { background: transparent; }
.vf-tab-list > button:hover { color: var(--ink); background-color: #fff; }
.vf-tab-list-plain > button:hover { background-color: transparent; }
.vf-tab-list > button.is-active, .vf-tab-list > button.is-active:hover { color: #fff; background: transparent; }
.vf-tab-pill { position: absolute; top: 0; left: 0; z-index: 0; border-radius: 99px; background: var(--navy); transition: transform .45s var(--vf-spring, ease), width .45s var(--vf-spring, ease); }
.vf-tab-label { display: none; }
.vf-tab.is-active { animation: vfTabIn .35s var(--vf-ease, ease); }
.vf-tabs-blur .vf-tab.is-active { animation-name: vfTabBlur; }
@keyframes vfTabIn { from { opacity: 0; transform: translateY(1rem); } }
@keyframes vfTabBlur { from { opacity: 0; transform: translateY(.625rem); filter: blur(4px); } }

/* Accordion (FAQ). */
.vf-acc-q { background: transparent; border: 0; cursor: pointer; font-family: inherit; }
.vf-acc-q:hover, .vf-acc-q:focus { background: transparent; color: var(--ink); }
.vf-acc-icon { background: var(--sky-soft); color: var(--navy); transition: transform .35s var(--vf-ease, ease), background-color .35s, color .35s; }
.vf-acc-item.is-open .vf-acc-icon { transform: rotate(45deg); background: var(--mint); color: #fff; }
.vf-acc-a { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .4s var(--vf-ease, ease), opacity .4s; }
.vf-acc-a > div { overflow: hidden; }
.vf-acc-item.is-open .vf-acc-a { grid-template-rows: 1fr; opacity: 1; }

/* Collapse: .vf-collapse opens when a parent gets .is-open / .is-topic. */
.vf-collapse { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s var(--vf-ease, ease), opacity .5s; }
.vf-collapse > div { overflow: hidden; }
:is(.is-open, .is-topic) > .vf-collapse { grid-template-rows: 1fr; opacity: 1; }

/* 7. Graphics -------------------------------------------------------------- */
.vf-graphic { display: block; }
/* Hero form */
.vf-hf-email.is-typing { border-color: rgba(0, 75, 242, .5); box-shadow: 0 0 0 4px rgba(0, 75, 242, .1); }
.is-topic .vf-hf-topic { border-color: var(--mint); background: var(--mint-soft); font-weight: 600; color: #0f7a53; }

/* Builder app: data-step on any parent (the sticky section, or the graphic itself when it plays alone). */
.vf-app [class*="vf-on-"] { display: none; }
[data-step="0"] .vf-app .vf-on-0, [data-step="1"] .vf-app .vf-on-1,
[data-step="2"] .vf-app .vf-on-2, [data-step="3"] .vf-app .vf-on-3 { display: revert; animation: vfAppIn .45s var(--vf-ease, ease) both; }
.vf-app:not([data-step] .vf-app) .vf-on-0 { display: revert; } /* no step anywhere (e.g. editor preview) = step 0 */
@keyframes vfAppIn { from { opacity: 0; transform: scale(.94); } }
.vf-app .vf-app-badge { background: var(--butter-soft); color: #9a7a12; }
[data-step="3"] .vf-app .vf-app-badge { background: var(--mint-soft); color: #0f7a53; }
.vf-app .vf-app-preview { background: var(--cream); }
[data-step="2"] .vf-app .vf-app-preview { background: var(--navy); color: #fff; }
.vf-app .vf-app-publish { background: var(--navy); }
[data-step="3"] .vf-app .vf-app-publish { background: var(--mint); animation: vfPublish .6s ease; }
@keyframes vfPublish { 50% { transform: scale(1.12); } }
[data-step="2"] .vf-app .vf-app-side { opacity: .3; }
[data-step="0"] .vf-app .vf-app-pick { border-color: var(--navy); color: var(--navy); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1); }
[data-step="1"] .vf-app .vf-app-topic { border-color: var(--navy); box-shadow: 0 0 0 4px rgba(0, 75, 242, .1); }
:is([data-step="2"], [data-step="3"]) .vf-app .vf-app-field { border-color: transparent; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
[data-step="0"] .vf-app .vf-app-ghost { animation: vfGhost 2.4s var(--vf-ease, ease) infinite; }
@keyframes vfGhost {
	0% { opacity: 0; transform: translate(-170px, 80px) rotate(-6deg); }
	18% { opacity: 1; }
	60% { opacity: 1; }
	75%, 100% { opacity: 0; transform: translate(30px, 250px) rotate(0); }
}

/* Calculator demo */
.vf-calc-dot { width: 1rem; background: var(--line); transition: width .4s var(--vf-ease, ease), background-color .4s; }
.vf-calc-dot.is-on { background: var(--navy); }
.vf-calc-dot.is-current { width: 2.5rem; }
.vf-plan.is-on { border-color: var(--mint); background: var(--mint-soft); }
.vf-slide-in { animation: vfSlide .35s var(--vf-ease, ease); }
@keyframes vfSlide { from { opacity: 0; transform: translateX(1.875rem); } }
.vf-choice { background: #fff; cursor: pointer; font-family: inherit; }
.vf-choice[aria-checked="true"], .vf-choice[aria-checked="true"]:hover { border-color: var(--navy); background: var(--navy); color: #fff; }
.vf-choice:hover, .vf-plan:hover, .vf-qty:hover { color: var(--ink); }

/* Cost chart: bars grow in order when the list scrolls into view; hover/focus shows the plan. */
.vf-bar { width: 0; transition: width 1s var(--vf-ease, ease), background-color .2s; transition-delay: calc(.2s + var(--i, 0) * .07s); }
.vf-bars.is-in .vf-bar, .vf-noanim .vf-bar { width: var(--w); }
.vf-bar-row { outline: none; }
.vf-bar-row:hover .vf-bar, .vf-bar-row:focus .vf-bar { background: var(--navy-light); }
.vf-tip { opacity: 0; transform: translateY(.25rem); transition: opacity .15s, transform .15s; }
.vf-bar-row:hover .vf-tip, .vf-bar-row:focus .vf-tip { opacity: 1; transform: none; }

/* 8. VuloForm blocks in the editor: no scrolling tricks, everything visible ------- */
.editor-styles-wrapper :is(.vf-marquee, .vf-marquee-reverse) { animation: none; flex-wrap: wrap; width: auto; }
.editor-styles-wrapper .vf-sticky-steps { height: auto !important; }
.editor-styles-wrapper .vf-sticky { position: static !important; min-height: 0 !important; padding: 3rem 0; }
.editor-styles-wrapper .vf-steps > li { opacity: 1; }
.editor-styles-wrapper .vf-tab-label { display: block; margin: 1.5rem 0 .75rem; font-weight: 700; color: var(--navy); }

/* 9. Blog article ------------------------------------------------------------ */
.vf-scope .vf-prose { font-size: 1.125rem; line-height: 1.75; color: var(--ink); }
.vf-scope .vf-prose > * + * { margin-top: 1.25rem; }
.vf-scope .vf-prose > p { margin-bottom: 0; color: var(--ink-soft); }
.vf-scope .vf-prose > p:not(h2 ~ p) { color: var(--ink); }
.vf-scope .vf-prose > h2 { margin: 3rem 0 0; scroll-margin-top: 6rem; font-size: clamp(1.5rem, 2.5vw, 1.875rem); line-height: 1.25; font-weight: 700; letter-spacing: -.025em; color: var(--ink); }
.vf-scope .vf-prose > h2 + * { margin-top: 1rem; }
.vf-scope .vf-prose > ul { padding-left: 1.5rem; list-style: disc; color: var(--ink-soft); }
.vf-scope .vf-prose > ul li + li { margin-top: .5rem; }
.vf-scope .vf-prose > ul li::marker { color: var(--navy); }
.vf-scope .vf-prose a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.vf-scope .vf-prose .vf-outro { margin-top: 3rem; padding: 1.75rem; border-radius: 28px; background: var(--sky-soft); }
.vf-scope .vf-prose .vf-outro > * + * { margin-top: 1.25rem; }
.vf-scope .vf-prose .vf-outro p { margin-bottom: 0; color: var(--ink); }
.vf-toc-link.is-current { border-color: var(--navy); font-weight: 700; color: var(--navy); }
.vf-pager :is(a, span) { display: inline-grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding: 0 .75rem; border: 1px solid var(--line); border-radius: 99px; background: #fff; font-weight: 600; color: var(--ink); }
.vf-pager .current { background: var(--navy); border-color: var(--navy); color: #fff; }