/* ==========================================================================
   Innovate — theme CSS

   ⛔ MARKED EXCEPTIONS ONLY. Everything a block attribute or theme.json can
   express lives THERE, not here (work-flow.md "RARELY hardcode CSS"). Each
   block below states WHY it cannot be a block attribute.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BLOCK-GAP FLUSH  (Gutenberg #51242)
   WHY not a block attribute: core ships
   `:where(.wp-site-blocks) > * { margin-block-start: 1.5rem }`, which injects a
   gap between full-bleed sections and around header/main/footer. It is a core
   rule about the RELATIONSHIP between top-level blocks; no single block can
   opt its sibling gap out. Neutralised selectively (never a blanket
   `> * { margin: 0 }`, which would defeat theme.json blockGap).
   The source has ZERO inter-section gap — each section's own padding carries
   the vertical rhythm (measured: 120/100/90).
   -------------------------------------------------------------------------- */
.wp-block-template-part,
main,
.wp-site-blocks > .wp-block-group,
.wp-block-group.has-background {
	margin-block-start: 0;
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   2. RESPONSIVE TIER — container width
   WHY not theme.json: `layout.contentSize` is a single value; the source uses
   a Webflow `w-container`, which is max-width 1320 (content 1260) at >=992 and
   max-width 700 (content 640) at <=991. That is a breakpoint switch, which
   theme.json cannot express. Measured at 1440/768/390.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
	.inv-container > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
		max-width: 640px;
	}
	.inv-container > .alignwide { max-width: 640px; }
}

/* --------------------------------------------------------------------------
   3. DECORATION the block API cannot express
   -------------------------------------------------------------------------- */

/* 3a. Hero headline highlight: the source paints a background IMAGE behind the
   inline word "Beginners" (bg-text.webp). Inline formats carry only a
   background-COLOUR (core/text-color `<mark>`); an image is impossible there. */
.inv-text-with-bg {
	background-image: url("../images/bg-text.webp");
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
}

/* 3b. Hero floating widget — absolutely positioned OVER the phone image and
   optically centred (measured: top 10px, left -126px, margin-block auto).
   Block supports have no position:absolute (only sticky). */
.inv-hero-media { position: relative; }
/* css-allow: margin-block:auto is HALF of the absolute optical-centering
   (top:10px + bottom:0 + auto margins). Splitting it onto the block would leave
   a margin the owner can edit but that means nothing without the offsets. */
.inv-hero-widget {
	position: absolute;
	top: 10px;
	bottom: 0;
	left: -126px;
	margin-block: auto;
	width: 230px;
	height: 235px;
}
@media (max-width: 767px) {
	.inv-hero-widget { left: -20px; width: 165px; height: auto; }
}

/* 3c. Introduction badge — the circular logo lozenge overhangs the image's
   top-right corner via NEGATIVE margins (measured -41px / -55px), and the
   ring of looping text is absolutely centred inside it. */
.inv-loop-badge { position: relative; } /* the -41/-55 overhang is on the BLOCK (style.spacing.margin) */
.inv-loop-text { position: absolute; width: 158px; height: 158px; }
@media (max-width: 767px) { .inv-loop-text { width: 120px; height: 120px; } }
@media (max-width: 479px) {
	/* css-allow: the badge's DESKTOP overhang is on the block (style.spacing.margin).
	   Below 479 the source flips it to a bottom overhang (0 0 -60px) — a different
	   value at a breakpoint, which a single block attribute cannot hold. */
	.inv-loop-badge { width: 120px; height: 120px; margin: 0 0 -60px; }
	.inv-loop-text { width: 100px; height: 100px; }
}

/* 3d. Benefits tab menu — pinned to the BOTTOM-LEFT of the tab panel and
   overlapping it (measured: position absolute, bottom 0, left 0, width 450,
   padding-bottom 47). Becomes a normal stacked block <=991. */
@media (min-width: 992px) {
	.inv-tabs { position: relative; }
	/* css-allow: this padding exists ONLY while the menu is absolutely pinned (>=992).
	   A block padding attribute applies at EVERY width, but the source measures 47px at
	   desktop and 0 at <=991 — breakpoint-conditional, which no block attribute expresses. */
	.inv-tabs .inv-tab-menu {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 450px;
		padding-bottom: 47px;
		z-index: 10;
	}
	/* css-allow: the 300px well that clears the pinned menu — desktop-only (0 at <=991),
	   so it cannot live on the block, which has no breakpoint-conditional padding. */
	.inv-tab-body { padding-bottom: 300px; }
}

/* 3e. Download band — the decorative arrow is absolutely placed against the
   heading (measured top 20px / left 431px) and hidden below 992. */
.inv-download-heading { position: relative; }
.inv-download-arrow { position: absolute; top: 20px; left: 431px; width: 69px; height: 56px; }
@media (max-width: 991px) { .inv-download-arrow { display: none; } }

/* 3f. Partner logo grid — per-item column spans the source sets on individual
   figures (items 2, 3 and 6 span two columns). Block layout has no per-child
   grid-column control. */
.inv-partner-grid { grid-template-rows: repeat(3, 96px); }
.inv-partner-span-2 { grid-column: span 2; }

/* 3g. Anchor targets for the in-page nav links (#Features/#Review/#Pricing/#FAQs).
   The source uses zero-height absolute markers; a fixed header would otherwise
   cover the heading. */
.inv-anchor { position: absolute; top: 0; }

/* --------------------------------------------------------------------------
   4. MOTION — approved at G1 as a small, reduced-motion-safe layer.
   The source drives these with Webflow's IX2 runtime.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.inv-loop-text { animation: inv-spin 18s linear infinite; }
}
@keyframes inv-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   5. TAB PANES  — one visible at a time.
   WHY CSS+JS and not a tabs block: WP 7.0.3 has no `core/tabs`, and
   `insta/tabs` stores each pane as {label, image, text} — it cannot hold the
   source's heading + copy + screenshot, which would cost the pane heading its
   own editable block. So the panes and labels stay REAL blocks (headings,
   paragraphs, images the owner edits normally) and only the show/hide is
   scripted, targeting classes — it touches no block markup.
   -------------------------------------------------------------------------- */
.inv-tab-pane { display: none; }
.inv-tab-pane.is-active { display: block; }
.inv-tab-link { cursor: pointer; }  /* radius/padding/colour are on the BLOCK */
/* css-allow: `.is-active` is a RUNTIME state, not a saved attribute. A block can
   carry its resting style (it does) but has no "when selected" variant, so the
   selected look must be a class the script toggles. */
.inv-tab-link.is-active {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--accent);
	box-shadow: var(--wp--preset--shadow--card-soft);
}
/* css-allow: same runtime state, applied to the label inside the selected tab. */
.inv-tab-link.is-active p { color: var(--wp--preset--color--accent); }

/* --------------------------------------------------------------------------
   6. REVIEWS SLIDER geometry
   WHY CSS: insta/slider advances by translateX(-100%) of its viewport and has
   no slide-width / arrow-position attributes. The source shows a 435px card
   with a 45px gutter and the next cards peeking out, and puts the arrows above
   the track on the right. Sizing the viewport to card+gutter (480px) makes one
   -100% step land exactly one card on, reproducing the measured geometry.
   -------------------------------------------------------------------------- */
.inv-slider .ib-slider__viewport { width: 480px; max-width: 100%; overflow: visible; }
.inv-slider .ib-slider__slide { padding-right: 45px; }
.inv-slider .ib-slider__arrow {
	top: -120px;
	bottom: auto;
	width: 40px;
	height: 40px;
	background: transparent;
	border: 2px solid var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
	font-size: 18px;
	transform: none;
}
.inv-slider .ib-slider__next { right: 0; left: auto; }
.inv-slider .ib-slider__prev { right: 56px; left: auto; }
@media (max-width: 767px) {
	.inv-slider .ib-slider__viewport { width: 100%; }
	.inv-slider .ib-slider__slide { padding-right: 30px; }
	.inv-slider .ib-slider__arrow { top: auto; bottom: -70px; }
	.inv-slider .ib-slider__prev { right: auto; left: 50%; margin-left: -56px; }
	.inv-slider .ib-slider__next { right: auto; left: 50%; }
}

/* --------------------------------------------------------------------------
   7. Slider slide box model — the 45px gutter must sit INSIDE the 480px step,
   or each slide occupies 525px and the track drifts one gutter per slide.
   -------------------------------------------------------------------------- */
.inv-slider .ib-slider__slide { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   8. Pricing track width
   css-allow: the golden's pricing track is 1190px LEFT-aligned inside the 1260
   container. Block layout offers `constrained` (which centres) or full width —
   there is no max-width + start-alignment attribute, and centring lands the plan
   cards 35px off the measured position.
   -------------------------------------------------------------------------- */
.inv-switcher { max-width: 1190px; margin-inline-end: auto; }

/* --------------------------------------------------------------------------
   9. Nested link colour — set in CSS ON PURPOSE.
   Authoring `style.elements.link` on a block is a save() mismatch trap that
   throws "Attempt recovery" (CLAUDE.md gotcha #9), so the documented fix is a
   plain heading/paragraph with a bare <a> plus a CSS colour rule.
   -------------------------------------------------------------------------- */
/* css-allow: nested-link colour. Authoring style.elements.link on a block does NOT
   match Gutenberg's save() and throws "Attempt recovery" (CLAUDE.md gotcha #9) — the
   documented, editor-safe fix is a bare <a> inside the block plus this CSS rule. */
.inv-faq a, .inv-announce a, .inv-nav-cta a { color: inherit; font-weight: 700; }
/* css-allow: same elements.link save() trap — see above. */
.inv-faq .inv-faq-note a { color: var(--wp--preset--color--navy); }

/* --------------------------------------------------------------------------
   10. RESPONSIVE TIER — release the desktop column widths at <=991.
   The source does exactly this (`max-width: none` / `width: 100%` on every
   text column, and full-width media) once its rows switch to column.
   css-allow: these are breakpoint-conditional overrides of widths that ARE on
   the blocks for desktop; a block attribute holds one value for all widths.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
	.inv-hero-text, .inv-intro-text, .inv-tab-body, .inv-fundraising-text,
	.inv-automation-text, .inv-invest-text, .inv-partners-text, .inv-solution-text,
	.inv-growth-text, .inv-download-text, .inv-app, .inv-partner-grid, .inv-faq-col,
	.inv-growth-stats, .inv-blog-top {
		flex-basis: 100%;
		max-width: 100%;
		width: 100%;
	}
	.inv-screen, .inv-quote-img, .inv-download-image, .inv-hero-media {
		width: 100%;
		max-width: 100%;
		height: auto;
	}
	.inv-tab-screen { display: none; }
	.inv-intro-image { width: 100%; max-width: 640px; }
}