/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/
Description: A child theme for Hello Elementor. Add your custom CSS and theme tweaks here.
Author: Custom Child Theme
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* Add your custom CSS below. */

.heighlight-text {
    color: #074D31 !important;
}


/* Footer contact list - all three items */
.footer-contact-list .elementor-icon-list-item {
    background-color: rgba(86, 156, 117, 0.2);
    padding: 20px 30px !important;
    border-radius: 30px;
    margin-bottom: 12px;
}

/* Remove extra margin from last item */
.footer-contact-list .elementor-icon-list-item:last-child {
    margin-bottom: 0;
}

/* Keep link content aligned */
.footer-contact-list .elementor-icon-list-item a {
    display: flex;
    align-items: center;
}


/* Black placeholder color for all Elementor form fields */
.elementor-form .elementor-field::placeholder {
    color: #074d31 !important;
    opacity: 1 !important;
}

/* Safari and older browser support */
.elementor-form .elementor-field::-webkit-input-placeholder {
    color: #074d31 !important;
    opacity: 1 !important;
}


/* ==========================================================================
   TriangleClick – About page: supplementary CSS
   --------------------------------------------------------------------------
   Everything else on the page (layout, spacing, colors, typography, borders,
   radii, gradients, rotation, positioning) is set with native Elementor
   controls. These rules cover only what Elementor has no control for.

   Where to put it (pick ONE):
     a) Already included: the template's Page Settings > Advanced > Custom CSS
        (Elementor Pro). Nothing to do if you imported the template and
        applied its page settings.
     b) Child theme style.css, or Appearance > Customize > Additional CSS.

   Every selector is scoped to a tc-about-* class that only exists on this
   page, so nothing here can affect the homepage, header, footer or other
   pages.
   ========================================================================== */

/* 1. Hero H1 accent word ("TriangleClick!")
      Used by: <span class="tc-about-accent"> inside the hero Heading text. */
.tc-about-hero .tc-about-accent {
	color: #074D31;
}

/* 2. Decorative page background: faint arch pattern fading out from the top
      centre, fixed to the viewport (reproduces the reference page's fixed
      background layer). Applies only to a page that contains the About hero. */
body:has(.tc-about-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.3);
}

/* 3. Accordions (Mission/Vision and FAQ)
      Used by: Nested Accordion widgets with classes
               "tc-about-accordion tc-about-mission" and
               "tc-about-accordion tc-about-faq-list".
      a) the +/x and chevron icons sit in a 32px rounded square;
      b) an open item's title and content read as one rounded card. */
.tc-about-mission {
	--tc-icon-bg: rgba(255, 255, 255, 0.15);
	--tc-icon-bg-open: #074D31;
}

.tc-about-faq-list {
	--tc-icon-bg: #074D31;
	--tc-icon-bg-open: #074D31;
}

.tc-about-accordion .e-n-accordion-item-title-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: var(--tc-icon-bg);
}

.tc-about-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon {
	background: var(--tc-icon-bg-open);
}

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

/* 4. Founder skill chips
      Used by: Icon List widgets (Layout: Inline) with class "tc-about-chips".
      Icon List has no per-item background/padding/radius controls. */
.tc-about-chips .elementor-icon-list-items.elementor-inline-items {
	row-gap: 6px;
}

.tc-about-chips .elementor-icon-list-items .elementor-icon-list-item {
	padding: 10px 20px;
	border-radius: 20px;
	background-color: #074D31;
}

@media (max-width: 767px) {
	.tc-about-chips .elementor-icon-list-items .elementor-icon-list-item {
		padding: 6px 14px;
	}
}

/* 5. Team photos: green glow that follows the cut-out shape of each photo.
      Used by: team Image widgets with class "tc-about-team-img".
      Elementor's CSS Filters control has no drop-shadow option, and box-shadow
      would draw a rectangle instead of following the person's outline. */
.tc-about-team-img img {
	filter: contrast(1.06) drop-shadow(0 31px 27px #074D31);
}

/* 6. Values section
      Used by: the round "jar" container ("tc-about-values-jar") and the value
      chips (Heading widgets with class "tc-about-value-chip").
      a) frosted-glass blur over the big VALUES word (no native backdrop blur);
      b) chips are absolutely positioned, so keep each label on one line. */
.tc-about-values-jar {
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.tc-about-value-chip .elementor-heading-title {
	white-space: nowrap;
}