/* ==========================================================================
   Spacing guards

   Cross-cutting rules that fix oversized whitespace baked into per-page
   Elementor CSS. Sibling to overflow-guards.css (same "loads last, wins the
   cascade" placement) but for vertical spacing rather than horizontal
   overflow.
   ========================================================================== */

/* ==========================================================================
   1. Oversized hero padding on mobile

   Each page's first top-level Elementor container (the hero band that wraps
   the H1) carries its own baked-in --padding-top/--padding-bottom, migrated
   per page rather than shared. On desktop these values track the design
   (e.g. 144px). On mobile most pages relax to 90px, and some keep the full
   144px with no mobile override at all - leaving 90-144px of empty space
   above and below the heading on a phone screen, reported as a large gap
   under the nav and over the H1 on feature pages.

   The homepage's own hero already uses 48px at every width with no mobile
   override, so 48px is the site's existing "this looks right on mobile"
   value, not a new number invented here. Match it everywhere on mobile.
   ========================================================================== */

@media (max-width: 767px) {
	[data-elementor-type] > .e-con.e-parent:first-child {
		--padding-top: 48px;
		--padding-bottom: 48px;
	}
}

/* ==========================================================================
   2. Oversized FAQ section padding on mobile

   The same 13 pages fixed for order in order-guards.css also carry their own
   --padding-top/--padding-bottom on the FAQ container: 48px on desktop but
   64px at <=1024px, so the gap in front of the heading grows on tablet and
   phone instead of shrinking. The homepage's FAQ section (and
   working-time-calculator/Arbeitszeitrechner, the two FAQ sections without
   this baked-in mobile bump) stay at a flat 48px - match that here too.

   Same :has() targeting as order-guards.css, so this self-applies to future
   FAQ sections with the same baked-in mistake.
   ========================================================================== */

@media (max-width: 1024px) {
	.e-parent:has(.elementor-widget-n-accordion) {
		--padding-top: 48px !important;
		--padding-bottom: 48px !important;
	}
}

/* ==========================================================================
   3. FAQ answer text sliding left of the question on mobile

   Reference: the pricing page's hand-built FAQ (en/prices, de/preise) is not
   an Elementor accordion at all - it is bespoke markup where the answer's
   left padding is set once, matching the question's own indent (badge width
   + gap), at every screen width. It never drifts.

   The Elementor accordion answer container does the same thing on desktop
   (--padding-left: 70px, lining up with the 48px number badge + its 16px
   margin-right in accordion-guards.css) but a baked-in mobile override
   collapses it to 12px, so the answer starts near the left edge while the
   question above it still starts after the badge - the answer visually
   sits under the number instead of flush with the question.
   ========================================================================== */

@media (max-width: 767px) {
	.e-n-accordion-item > .e-con.e-child {
		--padding-left: 70px !important;
	}
}

/* ==========================================================================
   4. FAQ card padding collapsing on mobile

   Reference: the pricing page's FAQ card keeps generous padding
   (40px 24px) around the list at every width. The Elementor accordion's own
   card wrapper (background, radius, shadow) has the equivalent desktop
   padding (48px) but a baked-in mobile override drops it to 8px all round -
   the last item's border-bottom then sits almost flush against the card
   edge instead of leaving room to breathe, which is what "no whitespace
   after the last FAQ" on the homepage actually was.
   ========================================================================== */

@media (max-width: 767px) {
	.elementor-widget-n-accordion > .elementor-widget-container {
		padding: 24px !important;
	}
}