/* ==========================================================================
   TriangleClick – Homepage (page #22): supplementary CSS
   --------------------------------------------------------------------------
   Layout, spacing, colours, typography, gradients, borders, radii, rotation,
   scaling and responsive behaviour are all set with native Elementor
   controls. These rules cover only what Elementor has no control for.

   How it loads: functions.php enqueues this file on the front page only
   (handle "triangleclick-homepage"), after Elementor's own CSS.

   Scope: every selector starts with a tc-home-* class that exists only on
   the homepage, so nothing here reaches the header, footer, the mobile
   off-canvas popup (#61) or other pages.
   ========================================================================== */

/* 1. Page background: faint arch pattern fading out from the top centre,
      fixed to the viewport (the reference's fixed background layer).
      Visible behind the hero and FAQ; the Services section is white.
      Class "tc-home-hero" is on the hero text container (b45ca87):
      Container > Advanced > CSS Classes.
      Elementor has no page-level fixed layer that combines a pattern with
      a radial fade. Same technique as the About page, with the homepage's
      slightly lighter tint (0.25 instead of 0.3). */
body:has(.tc-home-hero)::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(43.2% 25% at 50% 18.8%, rgba(84, 84, 84, 0) 0%, #ffffff 100%),
		url("data:image/svg+xml,%3Csvg width='24' height='40' viewBox='0 0 24 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 40c5.523 0 10-4.477 10-10V0C4.477 0 0 4.477 0 10v30zm22 0c-5.523 0-10-4.477-10-10V0c5.523 0 10 4.477 10 10v30z' fill='%23ffffff' fill-rule='evenodd'/%3E%3C/svg%3E") 0 0 / 129.6px 216px repeat,
		rgba(86, 156, 117, 0.25);
}

/* 2. Megaphone icon: the image is a black line drawing; the reference shows
      it white with a soft shadow. Elementor's CSS Filters control has no
      invert or drop-shadow.
      Class "tc-home-hero-icon" is on the Image widget (b5c43a2):
      Image > Advanced > CSS Classes. */
.tc-home-hero-icon img {
	filter: invert(1) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

/* 3. "Learn More" arrows point up-right (↗) like the reference.
      Font Awesome 5 has no up-right arrow and the Button widget has no icon
      rotation. (The hero "Get in touch" button reuses your header's existing
      "tc-header-cta-btn" rule for the same effect.)
      Class "tc-home-learn" is on the 8 "Learn More" Button widgets. */
.tc-home-learn .elementor-button-icon svg {
	transform: rotate(-45deg);
}

/* 4. Service card icons: remove the extra line-height gap under the icon,
      so the icon box is 56 x 56 (36px icon + 10px padding) as on the
      reference. The Icon widget has no line-height control.
      Class "tc-home-card-icon" is on the 8 card Icon widgets. */
.tc-home-card-icon .elementor-icon-wrapper {
	display: flex;
	line-height: 0;
}

/* 5. FAQ (Nested Accordion with class "tc-home-faq", widget 75d8ede)
      a) the chevron sits in a 34px dark green rounded square;
      b) an open item's question and answer read as one rounded card
         (the title's border radius is a single value for all states);
      c) frosted-glass blur over the page pattern (no backdrop-filter
         control). */
.tc-home-faq .e-n-accordion-item-title-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: #074D31;
}

.tc-home-faq .e-n-accordion-item[open] > .e-n-accordion-item-title {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.tc-home-faq .e-n-accordion-item-title,
.tc-home-faq .e-n-accordion-item > .e-con {
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}