/*
Theme Name: Two Labs Landscaping & Outdoor Services
Theme URI: https://ace360solutions.com
Author: Ace 360 Solutions
Author URI: https://ace360solutions.com
Description: Custom Elementor theme for Two Labs Landscaping & Outdoor Services, LLC. Includes a one-click setup (Appearance > Two Labs Setup) that imports the Home, Services, About, Our Work and Contact pages, the header and footer, the main menu and all photos as fully editable Elementor content. Requires Elementor; Elementor Pro is needed for the header, footer, contact form, menu and gallery filters.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: two-labs
Tags: custom-logo, custom-menu, featured-images, full-width-template, one-column, translation-ready
*/

/* ---------- Tokens ---------- */
:root {
	--tl-pine: #1d3d29;
	--tl-pine-deep: #112619;
	--tl-pine-mid: #2a5236;
	--tl-moss: #3f6b3f;
	--tl-gold: #e3a630;
	--tl-gold-soft: #f3d48d;
	--tl-gold-deep: #a8720c;
	--tl-paper: #fbfaf5;
	--tl-sage: #eef2e8;
	--tl-sage-2: #e2e9da;
	--tl-line: #dcdfd2;
	--tl-ink: #1b2420;
	--tl-muted: #56605a;
	--tl-on-dark: #d6e0d2;
	--tl-on-dark-2: #9fb19c;
	--tl-display: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
	--tl-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
	--tl-wrap: 1180px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--tl-paper); color: var(--tl-ink); font-family: var(--tl-body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: var(--tl-moss); }
h1, h2, h3, h4, h5, h6 { font-family: var(--tl-display); color: var(--tl-pine); line-height: 1.15; text-wrap: balance; }
.elementor-heading-title { text-wrap: balance; }
.wrap { max-width: var(--tl-wrap); margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link:focus { position: fixed !important; top: 10px; left: 10px; width: auto; height: auto; clip: auto; z-index: 100000; background: #fff; color: var(--tl-pine); padding: 10px 16px; border-radius: 8px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--tl-gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- Buttons (built-in templates) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-family: var(--tl-body); font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; padding: .9em 1.5em; border-radius: 999px; border: 2px solid transparent; transition: transform .15s ease, background .15s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-gold { background: var(--tl-gold); color: var(--tl-pine-deep); }
.btn-gold:hover { background: #f0b84a; color: var(--tl-pine-deep); }
.ic { width: 18px; height: 18px; flex: none; }

/* ---------- Elementor helpers (classes set on widgets in the imported pages) ---------- */
.tl-btn .elementor-button { transition: transform .15s ease, background-color .15s ease, color .15s ease; }
.tl-btn .elementor-button:hover { transform: translateY(-2px); }
.tl-textlink .elementor-button { padding: 0 !important; background: transparent !important; }

.tl-eyebrow .elementor-heading-title { display: inline-flex; align-items: center; gap: 10px; }
.tl-eyebrow .elementor-heading-title::before { content: ""; width: 26px; height: 2px; background: currentColor; flex: none; }
.tl-info .tl-eyebrow .elementor-heading-title::before { display: none; }

/* Photos */
.tl-photo img { width: 100%; border-radius: 16px; object-fit: cover; display: block; }
.tl-tall img { aspect-ratio: 4 / 5; }
.tl-square img { aspect-ratio: 1 / 1; }
.tl-wide img { aspect-ratio: 5 / 4; }
.tl-hero-logo img { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45)); max-width: 330px; margin-left: auto; }

/* Service cards */
.tl-card { overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.tl-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20, 45, 28, .12); }
.tl-card-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 0; }
.tl-card-badge { margin-top: -26px; position: relative; z-index: 2; }
.tl-card-badge .elementor-icon { border: 4px solid #fff; }

/* Before / after captions as tags */
.tl-ba figure, .tl-ba .wp-caption { position: relative; margin: 0; }
.tl-ba img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; display: block; }
.tl-ba .widget-image-caption { position: absolute; top: 16px; left: 16px; margin: 0; background: rgba(17, 38, 25, .88); color: #fff; font: 700 12px/1 var(--tl-body); letter-spacing: .14em; text-transform: uppercase; padding: .7em 1.1em; border-radius: 999px; }
.tl-ba-after .widget-image-caption { background: var(--tl-gold); color: var(--tl-pine-deep); }
@media (max-width: 600px) { .tl-ba .widget-image-caption { top: 10px; left: 10px; font-size: 10px; } }

/* Why section stamp */
.tl-why-photo { position: relative; }
.e-con.tl-stamp { position: absolute; right: -14px; bottom: 28px; width: auto; max-width: 230px; box-shadow: 0 16px 36px rgba(10, 25, 15, .25); }
@media (max-width: 1024px) { .e-con.tl-stamp { right: 14px; } }

/* Steps + numbered items */
.tl-step-num .elementor-heading-title, .tl-num .elementor-heading-title { display: grid; place-items: center; border-radius: 50%; font-family: var(--tl-display); }
.tl-step-num .elementor-heading-title { width: 44px; height: 44px; background: var(--tl-pine); margin-bottom: 8px; }
.tl-num .elementor-heading-title { width: 36px; height: 36px; background: var(--tl-gold); font-family: var(--tl-body); }

/* Services page */
.tl-svc { scroll-margin-top: 130px; }
.tl-svc-img { position: relative; }
.tl-svc-badge { position: absolute !important; top: 18px; left: 18px; width: auto !important; }
.tl-ticks-2 .elementor-icon-list-items { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
.tl-ticks-2 .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; }
@media (max-width: 520px) { .tl-ticks-2 .elementor-icon-list-items { grid-template-columns: 1fr; } }
.tl-jump .elementor-icon-list-items { gap: 10px; }
.tl-jump .elementor-icon-list-item { background: #fff; border: 1.5px solid var(--tl-line); border-radius: 999px; padding: .55em 1.1em !important; margin: 0 !important; transition: border-color .15s ease; }
.tl-jump .elementor-icon-list-item::after { display: none !important; }
.tl-jump .elementor-icon-list-item:hover { border-color: var(--tl-pine); }

/* About timeline */
.tl-timeline { border-left: 2px solid var(--tl-line); margin-left: 10px; }
.e-con.tl-tl-item { position: relative; }
.e-con.tl-tl-item::before { content: ""; position: absolute; left: -9px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--tl-gold); border: 3px solid var(--tl-sage); }
.tl-tl-item:last-child { padding-bottom: 0 !important; }
.tl-flag img { border: 2px solid rgba(255, 255, 255, .2); width: 100%; }

/* Links inside text blocks */
.tl-crumbs a { color: var(--tl-on-dark); text-decoration: none; }
.tl-crumbs a:hover { color: var(--tl-gold); }
.tl-info a { color: inherit; text-decoration: none; }
.tl-info a:hover { color: var(--tl-moss); }
.tl-credit a { color: var(--tl-on-dark); text-decoration: none; }
.tl-credit a:hover { color: var(--tl-gold); }
.tl-brand-name a { color: inherit; text-decoration: none; }

/* Header / footer templates */
.tl-brand-logo img { width: 58px; height: 58px; object-fit: contain; }
.tl-topflag img { width: 30px; height: auto; border: 1px solid rgba(255, 255, 255, .25); }
.tl-topbar-list .elementor-icon-list-item a:hover .elementor-icon-list-text { color: var(--tl-gold) !important; }
.tl-foot-logo img { width: 84px; }
.tl-foot-flag img { width: 52px; border: 1px solid rgba(255, 255, 255, .3); }
.tl-foot-links .elementor-icon-list-item a:hover .elementor-icon-list-text { color: var(--tl-gold) !important; }
.tl-footer { position: relative; }
.tl-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--tl-gold) 0 33%, var(--tl-moss) 33% 66%, var(--tl-gold-soft) 66%); }
.tl-nav .elementor-nav-menu--dropdown { box-shadow: 0 18px 30px rgba(10, 25, 15, .25); }
@media (max-width: 767px) { .tl-topbar-list .elementor-icon-list-item:not(:first-child) { display: none !important; } }

/* Gallery */
.tl-gallery .e-gallery-image { border-radius: 12px; }
.tl-gallery .elementor-gallery-title { padding-bottom: 6px !important; }
.tl-gallery .elementor-gallery__titles-container { margin-bottom: 28px; justify-content: flex-start; }

/* Form card */
.tl-form .elementor-field-group { margin-bottom: 0; }
.tl-form .elementor-field-textual:focus { border-color: var(--tl-moss) !important; box-shadow: 0 0 0 3px rgba(63, 107, 63, .15); }
.tl-form .elementor-message-success { color: var(--tl-moss); font-weight: 600; }

/* ---------- Built-in header (when no Elementor Pro header is active) ---------- */
.topbar { background: var(--tl-pine-deep); color: var(--tl-on-dark); font-size: .86rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.topbar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; padding-top: 8px; padding-bottom: 8px; }
.topbar-list { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; margin: 0; padding: 0; }
.topbar-list li, .topbar-flag { display: flex; align-items: center; gap: 8px; }
.topbar .ic { width: 15px; height: 15px; color: var(--tl-gold); }
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: var(--tl-gold); }
.topbar-flag img { width: 30px; border: 1px solid rgba(255, 255, 255, .25); }
@media (max-width: 760px) { .topbar-flag, .topbar-list li.hide-sm { display: none; } .topbar .wrap { justify-content: center; } }
.site-header { position: sticky; top: 0; z-index: 50; background: var(--tl-pine); color: #fff; box-shadow: 0 6px 24px rgba(10, 25, 15, .18); }
.admin-bar .site-header { top: 32px; }
.site-header .nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 10px; padding-bottom: 10px; position: relative; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; }
.brand img { width: 58px; height: 58px; object-fit: contain; }
.brand span { font-family: var(--tl-display); font-weight: 700; font-size: 1.25rem; line-height: 1.1; }
.brand small { display: block; font-family: var(--tl-body); font-weight: 600; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tl-gold-soft); }
.nav-wrap { display: flex; align-items: center; gap: 10px; }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a { display: block; text-decoration: none; font-weight: 600; font-size: .97rem; color: #e6ece3; padding: 10px 14px; border-radius: 999px; }
.nav-links a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.nav-links .current-menu-item > a, .nav-links a[aria-current="page"] { color: var(--tl-gold); }
.nav-links .sub-menu { display: none; }
.nav-cta { padding: .7em 1.3em; }
.menu-btn { display: none; background: none; border: 0; color: #fff; padding: 8px; cursor: pointer; }
.menu-btn .ic { width: 30px; height: 30px; }
@media (max-width: 900px) {
	.menu-btn { display: block; }
	.nav-wrap { position: absolute; left: -20px; right: -20px; top: 100%; flex-direction: column; align-items: stretch; background: var(--tl-pine); padding: 10px 20px 22px; border-top: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 18px 30px rgba(10, 25, 15, .25); }
	.nav-wrap:not(.open) { display: none; }
	.nav-links { flex-direction: column; align-items: stretch; }
	.nav-cta { margin-top: 8px; }
}

/* ---------- Built-in footer ---------- */
.site-footer { background: var(--tl-pine-deep); color: var(--tl-on-dark); font-size: .96rem; }
.site-footer::before { content: ""; display: block; height: 5px; background: linear-gradient(90deg, var(--tl-gold) 0 33%, var(--tl-moss) 33% 66%, var(--tl-gold-soft) 66%); }
.foot-main { display: grid; grid-template-columns: 1.35fr .8fr 1fr 1.15fr; gap: 44px; padding-top: 70px; padding-bottom: 60px; }
.foot-brand { display: grid; gap: 18px; align-content: start; }
.foot-brand .logo-row { display: flex; align-items: center; gap: 14px; }
.foot-brand img.logo { width: 84px; height: auto; }
.foot-brand .name { font-family: var(--tl-display); font-size: 1.35rem; font-weight: 700; color: #fff; line-height: 1.15; }
.foot-brand .name small { display: block; font-family: var(--tl-body); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tl-gold-soft); margin-top: 4px; }
.foot-brand p { color: var(--tl-on-dark-2); margin: 0; max-width: 36ch; }
.foot-flag { display: inline-flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; padding: 10px 14px; justify-self: start; }
.foot-flag img { width: 52px; border: 1px solid rgba(255, 255, 255, .3); }
.foot-flag span { font-weight: 700; color: #fff; line-height: 1.25; font-size: .92rem; }
.foot-col h4 { font-family: var(--tl-body); font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tl-gold); margin: 0 0 18px; }
.foot-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.foot-col a { color: inherit; text-decoration: none; }
.foot-col a:hover { color: var(--tl-gold); }
.foot-contact li { display: flex; gap: 12px; align-items: flex-start; }
.foot-contact .ic { color: var(--tl-gold); margin-top: 4px; }
.foot-cta { margin-top: 18px; }
.foot-bottom { border-top: 1px solid rgba(255, 255, 255, .1); }
.foot-bottom .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-top: 20px; padding-bottom: 20px; font-size: .86rem; color: var(--tl-on-dark-2); }
.foot-bottom a { color: var(--tl-on-dark); text-decoration: none; }
.foot-bottom a:hover { color: var(--tl-gold); }
@media (max-width: 980px) { .foot-main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-main { grid-template-columns: 1fr; } }

/* ---------- Blog / plain pages ---------- */
.tl-entry { padding-top: 70px; padding-bottom: 90px; max-width: 900px; }
.tl-entry-title { font-size: clamp(2.2rem, 5vw, 3.2rem); margin: 0 0 20px; }
.tl-entry-content { font-size: 1.06rem; }
.tl-meta { color: var(--tl-muted); font-size: .9rem; margin: 0 0 6px; }
.tl-thumb img { border-radius: 16px; margin: 10px 0 24px; }
.tl-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 26px; }
.tl-post-card { background: #fff; border: 1px solid var(--tl-line); border-radius: 16px; overflow: hidden; }
.tl-post-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.tl-post-body { padding: 22px 24px 26px; }
.tl-post-body h2 { font-size: 1.4rem; margin: 0 0 8px; }
.tl-post-body h2 a { color: var(--tl-pine); text-decoration: none; }
.tl-404 { text-align: center; }
.tl-404-code { font-family: var(--tl-display); font-size: 6rem; font-weight: 700; color: var(--tl-gold); margin: 0; line-height: 1; }