/* Tip Top Timber Co. — small fixes on top of the Econet theme */

/* ---------------------------------------------------------------------------
   Typography: Montserrat for headings, Inter for body copy (theme default is Outfit).
   Elementor writes per-widget font-family rules, so these need !important.
   Icon elements (i, .fa*, .flaticon*) are deliberately not targeted.
--------------------------------------------------------------------------- */
:root {
	--tt-heading-font: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	--tt-body-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

body,
p, li, dd, dt, td, th, blockquote, figcaption, label,
input, select, textarea,
p.heading-text,
.description,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.breadcumb-inner,
.wpcf7 .form-control {
	font-family: var(--tt-body-font) !important;
}

h1, h2, h3, h4, h5, h6,
h1.heading-text, h2.heading-text, h3.heading-text, h4.heading-text,
.elementor-heading-title,
.section-title .title,
.service-box .title,
.marquee-block h3,
.main-menu a,
.mean-nav a,
.dreamit-button a,
.dit-button a,
button, .button, input[type="submit"],
.brpt h1.tt-page-title,
.hero-section .text-area .title h1.tt-hero-title {
	font-family: var(--tt-heading-font) !important;
}

/* Montserrat runs slightly wider than Outfit: rein in the biggest headings */
.hero-section .text-area .title h1.tt-hero-title { font-size: 88px; line-height: 92px; }
@media (max-width: 1024px) {
	.hero-section .text-area .title h1.tt-hero-title { font-size: 58px; line-height: 64px; }
}
@media (max-width: 767px) {
	.hero-section .text-area .title h1.tt-hero-title { font-size: 33px; line-height: 42px; }
}
body .section-title .title { letter-spacing: -0.5px; }

/* ---------------------------------------------------------------------------
   Calmer motion: no scroll-in reveals, no image wipes, no scrolling marquee.
   Hover effects and the counter are kept.
--------------------------------------------------------------------------- */
.wow,
.elementor-invisible {
	visibility: visible !important;
	opacity: 1 !important;
	animation-name: none !important;
}
.animated,
[class*="animate__"] {
	animation: none !important;
	opacity: 1 !important;
	transform: none !important;
}
/* .reveal starts hidden and is uncovered by script: force it visible */
.reveal,
.reveal.two,
figure.reveal {
	visibility: visible !important;
	animation: none !important;
}
.reveal img,
figure.reveal img {
	animation: none !important;
	transform: none !important;
	clip-path: none !important;
	opacity: 1 !important;
	visibility: visible !important;
}
/* scrolling service-name strip holds still */
.marquee-block {
	animation: none !important;
}
/* decorative images (spinning leaves, badges) stay put */
img {
	animation: none !important;
}

/* ---------------------------------------------------------------------------
   Home hero
--------------------------------------------------------------------------- */
/* accent word in the hero headline (the only h1 with a span) */
.elementor-widget-heading h1 span,
.tt-hero h1 span {
	color: #41c575;
}
/* trust row wraps neatly on small screens */
.elementor-widget-icon-list .elementor-inline-items {
	row-gap: 8px;
}
@media (max-width: 767px) {
	.elementor-widget-icon-list .elementor-inline-items .elementor-icon-list-item {
		margin-right: 18px;
	}
}

/* service page section headings (the theme only styles h3 in this widget for light backgrounds) */
/* must outrank the theme's `.heading.style1 h2.heading-text { color: #fff }` */
.elementor-widget-simple-heading.tt-h2 .heading h2.heading-text,
.elementor-widget-simple-heading.tt-h2 .heading-text {
	color: #0c2318;
	font-size: 36px;
	line-height: 1.2;
	font-weight: 600;
}
.elementor-widget-simple-heading.tt-subhead .heading-text {
	font-size: 24px;
	line-height: 1.3;
	margin-top: 18px;
}
@media (max-width: 767px) {
	.elementor-widget-simple-heading.tt-h2 .heading-text { font-size: 28px; }
	.elementor-widget-simple-heading.tt-subhead .heading-text { font-size: 21px; }
}

/* phone and email links pick up the surrounding text color instead of low-contrast grey */
.elementor a[href^="tel:"],
.elementor a[href^="mailto:"] {
	color: inherit;
	font-weight: 600;
}

/* service card photos fill the card */
.service-box.style5 .image,
.service-box.style5 .image figure,
.service-box.style5 .image img {
	width: 100%;
}
.service-box.style5 .image img {
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* mobile menu bar: the theme hard-codes the demo name "econet" as its label */
.mean-container .mean-bar::before {
	content: "Menu";
	font-size: 17px;
	letter-spacing: 0.5px;
}

/* mobile header logo: keep it a sensible size instead of full width */
.mobile_menu_logo a img {
	max-width: 210px;
	height: auto;
}

/* page banner: each page uses its own photo, so darken it or white text disappears on bright skies */
.breadcumb-area {
	position: relative;
	background-size: cover;
	background-position: center center;
}
.breadcumb-area::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12, 35, 24, 0.55) 0%, rgba(12, 35, 24, 0.78) 100%);
	pointer-events: none;
}
.breadcumb-area > .container,
.breadcumb-area .container {
	position: relative;
	z-index: 1;
}

/* estimate button: keep the label on one line, and leave a gap between side-by-side buttons */
.dreamit-button a,
.dit-button a,
.elementor-widget-dit-button a {
	white-space: nowrap;
}
.elementor-widget-dit-button {
	margin-right: 14px;
}
@media (max-width: 767px) {
	.elementor-widget-dit-button { margin-right: 0; margin-bottom: 12px; }
}

/* blog post / blog index banner title, promoted from h2 to h1 (same look as the theme's h2) */
.breadcumb-inner h1.tt-page-title {
	font-size: 50px;
	line-height: 1.2;
	font-weight: 600;
	color: #fff;
	margin: 0 0 30px;
}
@media (max-width: 991px) {
	.breadcumb-inner h1.tt-page-title { font-size: 36px; margin-bottom: 18px; }
}
@media (max-width: 575px) {
	.breadcumb-inner h1.tt-page-title { font-size: 28px; }
}

/* header: with Service Areas and Blog in the menu, the Free Estimate button wrapped to a
   second row on laptop widths. Tighten the menu spacing so everything stays on one line. */
@media (min-width: 1400px) {
	.econet_menu > ul > li > a { margin-left: 12px; margin-right: 12px; font-size: 16px; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
	.econet_menu > ul > li > a { margin-left: 8px; margin-right: 8px; font-size: 15px; }
	.econet_menu .donate-btn-header a { padding-left: 18px; padding-right: 18px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
	.econet_menu > ul > li > a { margin-left: 5px; margin-right: 5px; font-size: 14px; }
	/* not enough room for the full number here: the button reads "Call Now" and still dials */
	.econet_menu .donate-btn-header a { padding-left: 14px; padding-right: 14px; font-size: 0; }
	/* the theme uses ::before as an absolutely positioned hover layer: reset it to plain text here */
	.econet_menu .donate-btn-header a::before {
		content: "Call Now";
		font-size: 14px;
		position: static !important;
		display: inline !important;
		width: auto !important;
		height: auto !important;
		background: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
	.econet_menu .donate-btn-header a i,
	.econet_menu .donate-btn-header a svg { display: none; }
}

/* ---------------------------------------------------------------------------
   Calls: header button is a call button, no slide-out panel icon on desktop,
   a call button in the mobile menu bar, and every number tap-to-call.
--------------------------------------------------------------------------- */
.econet_menu .sidebar {
	display: none !important;
}
.mean-container .mean-bar::before {
	content: none !important;
}
.mean-container {
	position: relative;
}
.mean-container .tt-mobile-call {
	position: absolute;
	left: 10px;
	top: 8px;
	z-index: 99999999; /* the theme gives .mean-bar a very high z-index */
	display: inline-block;
	padding: 6px 14px;
	border-radius: 30px;
	background: #0c2318;
	color: #fff !important;
	font-family: var(--tt-heading-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	float: none;
	width: auto;
}
.mean-container .mean-nav li.tt-menu-call > a {
	font-weight: 700;
	color: #fff;
	background: #0c2318;
}
a.tt-tel {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
	white-space: nowrap;
}
a.tt-tel:hover,
.section-title a[href^="tel:"]:hover {
	text-decoration: underline;
}
.section-title .title a[href^="tel:"] {
	color: #41c575;
}

/* decorative leaves removed (also hidden here so it applies before pages are rebuilt) */
img[src*="leaf.png"],
img[src*="footer-shape"],
img[src*="service-shape"],
img[src*="Img-9.png"] {
	display: none !important;
}

/* round badge on the closing call band: keep the icon inside the circle */
.circle-badge {
	position: relative;
	width: 200px;
	height: 200px;
}
.circle-badge .image {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.circle-badge .image img {
	width: 84px !important;
	height: auto !important;
	max-width: none;
	position: static !important;
	transform: none !important;
}

/* service cards: description text was too faint on the green gradient */
.service-box.style5 .description {
	color: #e6ece8 !important;
}

/* small uppercase kicker lines need room when they wrap on phones */
.elementor-widget-heading div.elementor-heading-title {
	line-height: 1.5;
}

/* Google+ shut down in 2019; the theme still prints a share link for it */
.econet-single-icon-inner a[href*="plus.google.com"] {
	display: none;
}

/* page banner title, promoted from h2 to h1 by the kit (same look as the theme's .brpt h2) */
.brpt h1.tt-page-title {
	font-size: 46px;
	line-height: 1.2;
	margin: 0 0 7px;
	color: #fff;
	font-weight: 500;
}
@media (max-width: 767px) {
	.brpt h1.tt-page-title { font-size: 35px; }
}
@media (max-width: 575px) {
	.brpt h1.tt-page-title { font-size: 30px; }
}

/* home hero headline, promoted from h2 to h1 (same look as the widget's h2 styles) */
.hero-section .text-area .title h1.tt-hero-title {
	color: #fff;
	font-family: Outfit, sans-serif;
	font-size: 100px;
	font-weight: 600;
	line-height: 100px;
	margin: 11px 0 0;
}
.hero-section .text-area .title h1.tt-hero-title span {
	color: #41c575;
}
@media (max-width: 1024px) {
	.hero-section .text-area .title h1.tt-hero-title { font-size: 64px; line-height: 70px; }
}
@media (max-width: 767px) {
	.hero-section .text-area .title h1.tt-hero-title { font-size: 35px; line-height: 45px; }
}

/* hero photo: round the corners so it sits inside the rounded green panel */
.hero-section + .elementor-widget-Media img,
.elementor-widget-Media .media-box img {
	border-radius: 20px;
}

/* FAQ: keep question text clear of the +/- toggle */
.elementor-widget-ditaccordion li > a {
	padding-right: 60px !important;
}

/* gallery: even 4:3 thumbnails (lightbox still opens the full photo) */
.elementor-image-gallery .gallery-item img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 12px;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ---------------------------------------------------------------------------
   v1.6.2: smaller buttons, whole service card is a link, arrow in place of the
   leaf icon beside section labels.
--------------------------------------------------------------------------- */
.dreamit-button a,
.elementor-widget-dit-button .dreamit-button a {
	padding: 12px 24px !important;
	font-size: 16px !important;
}
.econet_menu .donate-btn-header a {
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 16px;
}

/* service cards: white text, no club-shaped badge, green arrow, and the whole card clicks through (script in the footer) */
.service-box.style5 {
	cursor: pointer;
}
.service-box.style5 .title,
.service-box.style5 .title a {
	color: #fff !important;
}
.service-box.style5 .description {
	color: #fff !important;
	opacity: 1 !important;
}

/* section labels: green arrow instead of the leaf icon */
.section-title .subtitle .icon img {
	display: none !important;
}
.section-title .subtitle .icon::before {
	content: "\2192";
	display: inline-block;
	margin-right: 8px;
	color: #41c575;
	font-family: var(--tt-body-font);
	font-weight: 700;
	font-size: 1.15em;
	line-height: 1;
}
.service-box.style5 .content > .icon {
	display: none !important;
}
.service-box.style5 .service-btn a {
	background: #41c575 !important;
	color: #fff !important;
}

/* Jotform estimate form */
.tt-jotform iframe {
	display: block;
	width: 100%;
}