/**
 * Paroner — supplemental CSS for the NATIVE Elementor rebuild (Batch 1 + 2).
 *
 * Two-class selectors (.e-con.hero-grid) outrank Elementor's single-class .e-con
 * defaults (flex + padding), re-asserting the EXACT source layout from
 * paroner-landing.css / source inline styles. No design change — only
 * re-assertion, including matching responsive breakpoints (1024px / 768px).
 *
 * Never set inline padding via Elementor settings on these class containers —
 * that would beat these rules.
 */

/* --- Shell --- */
.e-con.container  { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.e-con.section    { padding: clamp(72px, 9vw, 120px) 0; }
.e-con.hero       { position: relative; overflow: hidden; padding: clamp(48px, 6vw, 80px) 0 clamp(56px, 7vw, 100px); }
.e-con.lf-section { background: linear-gradient(180deg, var(--bg-2) 0%, #fff 100%); }
.e-con.trust-band { padding: 36px 0; }

/* --- Hero --- */
.e-con.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; position: relative; }
.e-con.hero-text { padding: 0; }
.e-con.hero-tags { display: flex; flex-direction: row; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; padding: 0; }
.e-con.hero-cta  { display: flex; flex-direction: row; gap: 12px; flex-wrap: wrap; margin-top: 26px; padding: 0; }

/* --- Trust band (source inline: repeat(4,1fr), no responsive) --- */
.e-con.value-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 0; }

/* --- Lead form dark panel --- */
.e-con.paroner-leadform-panel {
	background: linear-gradient(135deg, #1E1B4B 0%, #0F0E26 100%);
	border-radius: var(--r-xl); padding: clamp(24px, 5vw, 56px);
	border: 1px solid rgba(124, 58, 237, 0.25); box-shadow: var(--shadow-lg);
	display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; color: #E5E7EB;
}
.e-con.paroner-leadform-panel h2 { color: #fff; margin-top: 18px; font-size: clamp(24px, 3vw, 36px); }
.e-con.paroner-leadform-panel .lf-sub { color: #94A3B8; margin-top: 14px; font-size: 15px; line-height: 1.6; }
.e-con.lf-col      { padding: 0; }
.e-con.lf-benefits { display: grid; gap: 16px; margin-top: 28px; padding: 0; }
.e-con.lf-formcard { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--r-lg); padding: 24px; }

/* --- Batch 2 grids/wrappers --- */
.e-con.qa-wrap      { max-width: 920px; margin: 0 auto; padding: 0; }
.e-con.def-wrap     { max-width: 900px; margin: 0 auto; padding: 0; }
.e-con.def-stats    { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 24px; padding: 0; }
.e-con.def-quote    { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px 36px; box-shadow: var(--shadow-sm); text-align: center; }
.e-con.problem-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.e-con.problem-list { display: grid; gap: 12px; margin-top: 28px; padding: 0; }
.e-con.audience-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; padding: 0; }
.e-con.steps        { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 0; }
.e-con.cases        { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 0; }
.e-con.price-wrap   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; padding: 0; }
.e-con.btn-row      { display: flex; flex-direction: row; gap: 12px; flex-wrap: wrap; padding: 0; }
.e-con.center-row   { text-align: center; margin-top: 36px; padding: 0; }

/* --- Native heading tweaks inside special containers --- */
.e-con.problem-grid .elementor-widget-heading .elementor-heading-title { margin: 16px 0 14px; }
.e-con.pb-cta { margin-top: 26px; padding: 0; }
.e-con.final-cta .elementor-widget-heading .elementor-heading-title { color: #fff; margin-top: 18px; }
.e-con.final-cta .elementor-widget-text-editor { color: rgba(255,255,255,.85); }

/* --- Responsive (mirror source 1024px / 768px) --- */
@media (max-width: 1024px) {
	.e-con.hero-grid { grid-template-columns: 1fr; gap: 36px; }
	.e-con.paroner-leadform-panel { grid-template-columns: 1fr; gap: 28px; }
	.e-con.problem-grid { grid-template-columns: 1fr; gap: 36px; }
	.e-con.steps { grid-template-columns: repeat(2, 1fr); }
	.e-con.cases { grid-template-columns: 1fr; }
	.e-con.price-wrap { grid-template-columns: 1fr; }

	/* OVERFLOW FIX: source set these stat rows to repeat(4,1fr) with NO
	   responsive rule, so 4 columns could not fit and forced page width.
	   Collapse to 2 columns at tablet (then 1 column < 560px below). */
	.e-con.value-row,
	.e-con.def-stats { grid-template-columns: repeat(2, 1fr); }

	/* OVERFLOW FIX: hamburger now appears up to 1024px (see paroner-landing.css);
	   move the open-menu dropdown styling here so the mobile menu works at
	   769–1024px too, not only <=768px. */
	.header .nav-bar { position: relative; }
	.header .nav-links.is-open {
		display: flex;
		position: absolute;
		top: calc(100% + 10px);
		left: 16px;
		right: 16px;
		z-index: 80;
		flex-direction: column;
		gap: 4px;
		padding: 12px;
		border: 1px solid var(--line);
		border-radius: 12px;
		background: #fff;
		box-shadow: var(--shadow-md);
	}
	.header .nav-links.is-open a {
		padding: 10px 12px;
		border-radius: 8px;
		display: block;
	}
	/* The inner <ul class="nav-list"> is a flex row on desktop; stack it in the
	   mobile dropdown so items list vertically and fill the panel width. */
	.header .nav-links.is-open .nav-list {
		flex-direction: column;
		gap: 4px;
		align-items: stretch;
		width: 100%;
	}
}
@media (max-width: 768px) {
	.e-con.steps { grid-template-columns: 1fr; }

	/* OVERFLOW FIX: .int-supported is an INLINE grid (repeat(3,1fr)) printed by
	   the paroner_integrations widget (inc/elementor-widgets/widgets-batch3.php).
	   3 cards = ~713px wide and was the worst offender (page scrollWidth 738px
	   at 320px). !important is required ONLY because the rule is inline; this
	   stacks them to one column on phones. */
	.int-supported { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
	/* OVERFLOW FIX: final collapse of the 4-up stat rows to a single column. */
	.e-con.value-row,
	.e-con.def-stats { grid-template-columns: 1fr; }
}

/* OVERFLOW FIX: allow stat-row grid items to shrink below intrinsic width. */
.e-con.value-row > *,
.e-con.def-stats > * { min-width: 0; }

/* --- CLS FIX (Phase 4): assert the local Inter design stack over Elementor's
   default kit font. Elementor adds `body.elementor-kit-{id}{font-family:Roboto}`
   (specificity 0,1,1) which beats `body{font-family:var(--font-sans)}` (0,0,1)
   and caused the hero dashboard text to render in late-loading Google Roboto
   (= 100% of the 0.175 desktop CLS, per Lighthouse layout-shifts). The
   `elementor/frontend/print_google_fonts` filter (functions.php) stops the
   Google Font network swap; this re-asserts Inter so the visible font is
   unchanged. `html body` (0,1,2) outranks the kit selector regardless of load
   order. Inter is local with font-display:swap (mobile CLS already 0.002). --- */
html body,
html body.elementor-default,
html body.elementor-page {
	font-family: var(--font-sans);
}
/* Belt-and-suspenders: pin the decorative dashboard mockups to the design stack. */
.app-frame, .app-frame *,
.showcase-frame, .showcase-frame * {
	font-family: var(--font-sans);
}

/* FAQ footer is now its own editable widget (Paroner FAQ Footer), placed right
   after the [paroner_faq] shortcode. It renders outside the FAQ section's
   .container, so give it comfortable side padding (text never touches the
   viewport edge on mobile). Spacing above/below is adjustable per-instance in
   Elementor (widget → Advanced → Margin). */
.elementor-widget-paroner_faq_footer .faq-foot {
	padding-left: 20px;
	padding-right: 20px;
}