/*
Theme Name: T&T Landscaping
Theme URI: https://ttlawns.com
Author: Salois Digital
Author URI: https://saloisdigital.com
Description: Custom lightweight theme for T&T Landscaping Inc. — a full-service landscaping and hardscaping contractor in Coraopolis, PA. No page builders, no bloat. Clean, fast, SEO-optimized.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.7
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: tt-landscaping
Tags: custom-menu, featured-images, full-width-template, theme-options
*/

/* ===== RESET & VARIABLES ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--green:#193b29;--dark:#152d22;--cream:#f5f4ed;--gold:#e6bc65;--text:#24362a;--muted:#667268}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{font-family:'DM Sans',sans-serif;color:var(--text);background:var(--cream);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;width:100%;object-fit:cover}
a{text-decoration:none;color:inherit}
button,input{font:inherit}
h1,h2,h3,h4,h5,h6{font-family:'Manrope',sans-serif;font-weight:500}
h2{font-size:clamp(36px,4vw,56px);line-height:1.12;letter-spacing:-2.3px;font-weight:600}
p{line-height:1.7}
em{font-family:Georgia,serif;font-weight:400}
a,button,input,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #c88724;outline-offset:5px}

/* ===== EYEBROW ===== */
.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:#65754d;margin-bottom:22px}
.light{color:#dddcb6}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;gap:28px;align-items:center;justify-content:center;padding:20px 26px;background:var(--green);color:white;font-size:13px;font-weight:700;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-3px);background:#2d553b}
.btn.small{padding:16px 22px}
.btn b{font-size:21px;font-weight:400}
.gold{background:var(--gold);color:#183124}
.gold:hover{background:#f0ce89}
.outline{background:rgba(21,45,34,.6);border:1px solid #758671;color:white;backdrop-filter:blur(4px)}
.outline:hover{background:rgba(255,255,255,.15)}
.actions{display:flex;gap:26px;align-items:center;margin-top:30px;flex-wrap:wrap}
.hero-link{font-size:12px;border-bottom:1px solid #ffffff70;padding:10px 0}

/* ===== TOPLINE ===== */
.topline{background:var(--green);color:#e5e9df;display:flex;justify-content:space-between;padding:11px 5%;font-size:10px;letter-spacing:1.5px}
.topline a{font-size:12px;letter-spacing:.4px}

/* ===== HEADER ===== */
header{height:101px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;background:var(--cream);position:sticky;top:0;z-index:20;border-bottom:1px solid #dfe3d8}
.brand{display:flex;align-items:center;gap:13px;font-weight:800;font-size:16px;letter-spacing:1px;line-height:1.3}
.brand .logo{width:180px;height:66px;object-fit:contain}
nav{display:flex;align-items:center;gap:32px;font-size:13px}
nav a:hover{color:#9c752f}
.menu{display:none;border:0;background:none;font-size:24px;color:var(--green);cursor:pointer}

/* ===== HERO ===== */
.hero{height:660px;min-height:580px;position:relative;color:white;overflow:hidden}
.hero>img{height:100%;position:absolute;object-position:center 55%}
.shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,27,15,.86),rgba(8,27,15,.40) 55%,rgba(8,27,15,.07)),linear-gradient(0deg,#102b1a77,transparent 35%)}
.hero-content{position:relative;padding:84px 7%;max-width:1000px}
h1{font-size:clamp(65px,7vw,100px);line-height:1.04;letter-spacing:-5px;font-weight:500;margin-bottom:25px}
h1 em{color:#edcb83}
.hero-content>p:not(.eyebrow){color:#e0e4dd;font-size:16px}
.hero-caption{position:absolute;bottom:23px;left:7%;right:5%;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px}
.hero-caption span:last-child{letter-spacing:.5px}

/* ===== TRUST ===== */
.trust{display:flex;justify-content:space-between;gap:15px;padding:25px 7%;border-bottom:1px solid #d9dfd1;font-size:12px}
.trust i{font-style:normal;color:#72804c;margin-right:10px}

/* ===== SECTION GENERIC ===== */
.section{padding:95px 7%}
.section-head{display:flex;justify-content:space-between;gap:60px;align-items:end;margin-bottom:42px}
.section-head>p,.section-head>div:last-child>p{font-size:14px;color:var(--muted);max-width:360px}
.text-link{font-size:12px;font-weight:700;display:inline-block;border-bottom:1px solid #8e9d7d;padding-bottom:6px;margin-top:18px}
.text-link:hover{color:#9c752f}

/* ===== SERVICES GRID ===== */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.service{background:#fff}
.service>img{height:250px;transition:filter .2s}
.service:hover>img{filter:brightness(1.06)}
.service>div{padding:27px}
.number{font-size:9px;letter-spacing:2px;color:#7b825e}
.service h3{font-size:25px;font-weight:600;letter-spacing:-1px;margin:13px 0}
.service h3 span{float:right;font-size:22px;font-weight:400}
.service p{font-size:13px;color:var(--muted);line-height:1.8}
.also{margin-top:32px;padding-top:24px;border-top:1px solid #d9dfd1;display:flex;justify-content:space-between;gap:20px;font-size:12px}
.also span{color:var(--muted)}

/* ===== PROJECTS / COMPARE ===== */
.projects{background:#e9eddf}
.compare{height:520px;position:relative;overflow:hidden;background:#213624}
.compare>img,.before img{height:520px;width:100%;object-position:center}
.before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.label{position:absolute;top:24px;background:#173729d9;color:white;font-size:10px;letter-spacing:2px;padding:10px 15px}
.beforelabel{left:24px}
.afterlabel{right:24px}
.handle{position:absolute;left:var(--split);top:0;bottom:0;width:2px;background:#fff;transform:translateX(-50%);pointer-events:none}
.handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--cream);color:var(--green);border-radius:50%;width:48px;height:48px;display:grid;place-items:center;font-size:24px}
.compare input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:ew-resize}
.project-caption{display:flex;justify-content:space-between;gap:20px;font-size:12px;margin-top:18px}
.project-caption span{color:var(--muted)}
.project-pair{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:65px}
figure{margin:0}
figure>img{height:320px}
figcaption{padding-top:24px}
figcaption>span{font-size:9px;letter-spacing:1.8px;color:#6e7c55}
figcaption h3{font-size:25px;letter-spacing:-1px;font-weight:500;margin:10px 0}
figcaption p{font-size:13px;color:var(--muted)}

/* ===== GALLERY ===== */
.gallery{padding-bottom:10px}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gallery-open{border:0;background:transparent;padding:0;text-align:left;cursor:pointer;position:relative;overflow:hidden}
.gallery-open img{height:265px;transition:transform .4s}
.gallery-open:hover img{transform:scale(1.04)}
.gallery-open span.gallery-label{position:absolute;bottom:14px;right:14px;background:var(--cream);padding:10px 14px;font-size:10px}
.lightbox{border:0;padding:0;background:var(--cream);max-width:90vw;max-height:90vh}
.lightbox::backdrop{background:#0c2016dd}
.lightbox img{max-width:85vw;max-height:85vh;width:auto;height:auto;object-fit:contain}
.close-photo{position:absolute;right:8px;top:8px;border:0;width:40px;height:40px;background:var(--cream);color:var(--green);font-size:28px;cursor:pointer}

/* ===== ABOUT ===== */
.about{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}
.about-art{position:relative;padding:0 30px 30px 0}
.about-art>img{height:550px}
.seal{position:absolute;bottom:0;right:0;background:var(--gold);width:175px;height:175px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:9px;letter-spacing:1.5px;line-height:1.6;border-radius:50%;transform:rotate(-8deg)}
.seal em{font-size:28px;letter-spacing:-.5px;line-height:1.7}
.about h2{margin-bottom:28px}
.about p:not(.eyebrow){font-size:14px;color:var(--muted);margin-top:18px}

/* ===== LOCAL / MAP ===== */
.local{background:var(--green);color:var(--cream);padding:75px 9%;display:grid;grid-template-columns:1fr 1fr;align-items:center;overflow:hidden}
.local p:not(.eyebrow){font-size:14px;color:#bdcbbb;margin-top:25px}
.local .text-link{color:var(--gold)}
.local-graphic{position:relative;height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.mapcircle{position:absolute;border:1px solid #ffffff1c;border-radius:50%;width:320px;height:320px}
.c2{width:240px;height:240px}
.c3{width:160px;height:160px}
.pin{color:var(--gold);font-size:30px;z-index:1}
.local-graphic strong{font-size:80px;font-weight:500;letter-spacing:-4px;z-index:1}
.local-graphic small{display:block;font-size:9px;letter-spacing:2px;text-align:center;color:#b9c7b6}

/* ===== FAQ ===== */
.faq{display:grid;grid-template-columns:1fr 1.2fr;gap:75px}
details{border-bottom:1px solid #d3dbc9;padding:23px 0}
details:first-child{border-top:1px solid #d3dbc9}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;font-size:14px;font-weight:500}
summary::-webkit-details-marker{display:none}
summary span{font-size:20px;font-weight:400}
details[open] summary span{transform:rotate(45deg)}
details p{font-size:13px;color:var(--muted);padding-top:18px}

/* ===== ESTIMATE CTA ===== */
.estimate{text-align:center;padding:80px 7%;background:var(--dark);color:white}
.estimate .eyebrow{color:var(--gold)}
.estimate h2{font-size:clamp(44px,5.5vw,76px);line-height:1.08}
.estimate h2 em{color:var(--gold)}
.estimate>p:not(.eyebrow){font-size:14px;color:#c4cfbf;margin-top:24px}
.estimate .actions{justify-content:center}
.estimate>p.fine{font-size:10px;letter-spacing:.5px;color:#a0b199}

/* ===== FOOTER ===== */
footer{padding:50px 7% 25px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:35px}
footer>div:not(.copyright){display:flex;flex-direction:column;gap:14px;font-size:12px}
footer a{transition:color .2s}
footer a:hover{color:#9c752f}
.copyright{width:100%;border-top:1px solid #d9dfd1;padding-top:23px;display:flex;justify-content:space-between;font-size:10px;color:#74806d}

/* ===== MOBILE CTA ===== */
.mobile-cta{display:none}

/* ===== RESPONSIVE ===== */
@media(min-width:1600px){
  .hero-content,.section,header,.trust,.topline,.local,footer{padding-left:max(7%,calc((100vw - 1300px)/2));padding-right:max(7%,calc((100vw - 1300px)/2))}
}
@media(max-width:850px){
  nav{gap:18px}
  .brand{font-size:12px}
  header{height:85px}
  .hero{height:620px}
  .hero-content{padding-top:85px;padding-bottom:80px}
  h1{font-size:clamp(42px, 6vw, 56px);overflow-wrap:break-word;word-break:break-word;letter-spacing:-2px}
  .trust{flex-wrap:wrap;justify-content:flex-start}
  .trust span{width:calc(50% - 10px)}
  .section{padding:65px 6%}
  .section-head{gap:25px}
  .services{gap:14px}
  .service>img{height:200px}
  .service>div{padding:20px}
  .service h3{font-size:21px}
  .also{flex-direction:column;gap:8px}
  .about{gap:40px}
  .about-art>img{height:500px}
  .faq{gap:35px}
  figure>img{height:260px}
}
@media(max-width:600px){
  .topline{justify-content:center;font-size:8px;padding:10px}
  .topline a{display:none}
  header{height:76px;padding:0 6%}
  .brand{font-size:12px}
  .brand .logo{width:150px;height:55px}
  .menu{display:block}
  nav{display:none;position:absolute;left:0;right:0;top:76px;background:var(--cream);padding:20px 6%;box-shadow:0 15px 20px #172e221a;align-items:stretch;gap:23px}
  nav.open{display:flex;flex-direction:column}
  .hero{height:auto;min-height:680px}
  .hero-content{padding:50px 7% 100px}
  h1{font-size:clamp(34px, 9.8vw, 42px);letter-spacing:-0.8px;line-height:1.1;margin-bottom:16px;overflow-wrap:anywhere}
  .hero-content .eyebrow{font-size:8px;letter-spacing:1.5px}
  .hero-content>p:not(.eyebrow){font-size:14px}
  .actions{gap:14px;align-items:flex-start;flex-direction:column;margin-bottom:10px}
  .hero .btn{padding:16px 18px;font-size:12px;width:100%;max-width:280px}
  .hero-link{font-size:11px}
  .hero-caption{font-size:8px;bottom:12px;z-index:1}
  .hero-caption span:last-child{max-width:110px;text-align:right}
  .shade{background:linear-gradient(90deg,#0b2418dd,#0b241877),linear-gradient(0deg,#102b1a88,transparent)}
  .trust{padding:20px 6%;font-size:10px;gap:17px 12px}
  .trust i{margin-right:4px}
  .section{padding:55px 6%}
  .section-head{flex-direction:column;align-items:flex-start;gap:22px;margin-bottom:30px}
  h2{font-size:36px;letter-spacing:-1.5px}
  .section-head>p,.section-head>div:last-child>p{font-size:13px}
  .services{grid-template-columns:1fr;gap:22px}
  .service>img{height:260px}
  .service>div{padding:23px}
  .service h3{font-size:26px}
  .also{font-size:11px;line-height:1.7}
  .compare,.compare>img,.before img{height:340px}
  .compare img{object-position:52%}
  .label{top:15px;font-size:8px;padding:8px 10px}
  .beforelabel{left:15px}
  .afterlabel{right:15px}
  .project-caption{font-size:10px;flex-direction:column;gap:7px}
  .project-pair{grid-template-columns:1fr;gap:35px;margin-top:40px}
  figure>img{height:280px}
  figcaption h3{font-size:24px}
  .about{grid-template-columns:1fr;gap:40px}
  .about-art>img{height:400px}
  .seal{width:145px;height:145px;font-size:7px}
  .seal em{font-size:25px}
  .local{grid-template-columns:1fr;padding:55px 7% 30px}
  .local-graphic{height:290px;margin-top:30px}
  .mapcircle{width:280px;height:280px}
  .c2{width:215px;height:215px}
  .c3{width:150px;height:150px}
  .faq{grid-template-columns:1fr;gap:28px}
  .estimate{padding:60px 6%}
  .estimate .eyebrow{font-size:8px;letter-spacing:1.5px}
  .estimate .actions{align-items:stretch}
  .estimate .btn{width:100%}
  .estimate h2{font-size:47px}
  .copyright{flex-direction:column;gap:10px}
  footer{padding:40px 6% 90px}
  .mobile-cta{display:block;position:fixed;bottom:0;left:0;right:0;text-align:center;background:var(--gold);color:var(--green);font-weight:700;padding:18px;z-index:30;font-size:13px;box-shadow:0 -3px 18px #18312420}
  .gallery-grid{grid-template-columns:1fr 1fr;gap:12px}
  .gallery-open img{height:190px}
  .gallery-open span.gallery-label{font-size:8px;padding:7px;bottom:8px;right:8px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ===== WORDPRESS SPECIFIC ===== */
.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}
.screen-reader-text:focus{background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;clip-path:none;color:#21759b;display:block;font-size:14px;font-weight:bold;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}

/* Gutenberg alignment support */
.alignwide{max-width:1100px;margin-left:auto;margin-right:auto}
.alignfull{margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);max-width:100vw;width:100vw}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.alignleft{float:left;margin-right:1.5em}
.alignright{float:right;margin-left:1.5em}

/* WordPress image captions */
.wp-caption{max-width:100%}
.wp-caption-text{font-size:12px;color:var(--muted);text-align:center;padding:8px 0}
figure.wp-block-image{margin:30px 0}

/* WordPress navigation */
.post-navigation,.posts-navigation{margin:40px 0;display:flex;justify-content:space-between}
.nav-links{display:flex;justify-content:space-between;width:100%}
.nav-links a{color:var(--green);font-weight:600;font-size:14px}

/* ===== HERO TRUST LINE ===== */
.hero-trust {
  color: #fff;
  font-size: 15px;
  margin-top: 20px;
  line-height: 1.4;
  font-weight: 500;
}
.hero-trust .hero-stars {
  color: #f4b400;
  letter-spacing: 1px;
  margin-right: 4px;
}
.hero-trust a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hero-trust a:hover {
  opacity: 0.85;
}
@media (max-width: 600px) {
  .hero-trust {
    font-size: 14px;
  }
}