/*
Theme Name: Elite 1 Builders
Theme URI: https://elite1builders.com
Author: Elite 1 Builders
Description: Premium, professional WordPress theme for Elite 1 Builders Ltd, a UK construction and building company serving Manchester and Greater Manchester. Includes flexible unlimited FAQs/testimonials/values, real-photo hero support, a clean dropdown menu, rich SEO service pages, an image lightbox, a free rule-based chat widget, WhatsApp integration, and defensive error handling throughout.
Version: 1.2
Requires PHP: 7.4
Text Domain: elite1-final
*/

:root{
  --dark:#161615;
  --dark-2:#232321;
  --accent:#e2231a;
  --accent-dark:#b81b14;
  --text:#1a1a19;
  --text-muted:#68675f;
  --border:#e7e4dd;
  --bg:#f7f6f2;
  --white:#ffffff;
  --radius:8px;
  --shadow:0 2px 12px rgba(20,20,18,.06);
  --shadow-lg:0 14px 34px rgba(20,20,18,.12);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation:none !important; transition:none !important;} }
body{font-family:'Inter',-apple-system,sans-serif; color:var(--text); background:var(--bg); line-height:1.65; font-size:16px;}
img{max-width:100%; display:block;}
a{text-decoration:none; color:inherit;}
ul{list-style:none;}
.wrap{max-width:1160px; margin:0 auto; padding:0 24px;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--dark); color:#fff; padding:12px 20px; z-index:200;}
.skip-link:focus{left:12px; top:12px;}

/* BUTTONS */
.btn{display:inline-block; padding:14px 30px; border-radius:var(--radius); font-weight:600; font-size:15px; cursor:pointer; border:none; transition:transform .15s ease, box-shadow .15s ease;}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg);}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{background:var(--accent-dark);}
.btn-outline{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.45);}
.btn-dark{background:var(--dark); color:#fff;}
.btn-light{background:#fff; color:var(--dark); border:1px solid var(--border);}

/* HEADER */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.97); backdrop-filter:blur(6px); border-bottom:1px solid var(--border);}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; height:78px; gap:20px;}
.logo-link{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.logo-link img{height:44px; width:auto;}
.main-nav ul{display:flex; gap:28px; align-items:center;}
.main-nav a{font-size:14px; font-weight:500; color:var(--text-muted); transition:color .15s;}
.main-nav a:hover, .main-nav a.current{color:var(--text);}
.main-nav li{position:relative;}
.main-nav .sub-menu{list-style:none; display:none; position:absolute; top:26px; left:-16px; background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-lg); padding:10px; min-width:240px; z-index:60;}
.main-nav .menu-item-has-children:hover > .sub-menu{display:block;}
.main-nav .sub-menu li{position:static;}
.main-nav .sub-menu a{display:block; padding:8px 12px; border-radius:6px; font-size:13.5px; white-space:nowrap;}
.main-nav .sub-menu a:hover{background:var(--bg);}
.header-cta{display:flex; align-items:center; gap:16px; flex-shrink:0;}
.phone-link{font-size:14px; font-weight:600; display:none;}
.menu-toggle{display:none; font-size:24px; background:none; border:none; cursor:pointer; color:var(--text);}
@media (max-width:960px){
  .main-nav{display:none;}
  .menu-toggle{display:block;}
  .header-cta .btn{padding:10px 16px; font-size:13px;}
  .logo-link img{height:36px;}
}
@media (min-width:700px){ .phone-link{display:inline;} }
.main-nav.open{display:flex; position:absolute; top:78px; left:0; right:0; background:#fff; border-bottom:1px solid var(--border); padding:20px 24px; max-height:80vh; overflow-y:auto;}
.main-nav.open ul{flex-direction:column; align-items:flex-start; gap:16px;}
.main-nav.open .sub-menu{display:block; position:static; box-shadow:none; border:none; padding:8px 0 0 12px; background:transparent;}

/* PAGE HERO */
.page-hero{background:var(--dark); color:#fff; text-align:center; padding:72px 24px 62px;}
.page-hero .eyebrow{color:#f3b3ac;}
.page-hero h1{font-size:36px; font-weight:700; letter-spacing:-0.6px; margin-top:8px;}
.page-hero p{color:#c9c8c2; max-width:560px; margin:14px auto 0; font-size:15.5px;}
.page-hero-breadcrumb{font-size:12.5px; color:#a5a49e; margin-bottom:10px;}
.page-hero-breadcrumb a{color:#fff;}

/* HOME HERO */
.hero{background:var(--dark); color:#fff; padding:112px 0 96px; text-align:center; position:relative; overflow:hidden;}
.hero .badge{display:inline-block; background:rgba(255,255,255,.1); color:#f3b3ac; font-size:12px; font-weight:600; padding:6px 16px; border-radius:30px; margin-bottom:26px; letter-spacing:.3px;}
.hero h1{font-size:46px; font-weight:700; letter-spacing:-1.1px; max-width:760px; margin:0 auto 22px; line-height:1.15;}
.hero p{font-size:17.5px; color:#c9c8c2; max-width:560px; margin:0 auto 38px;}
.hero .actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
@media (max-width:640px){ .hero{padding:64px 0 52px;} .hero h1{font-size:29px;} .hero p{font-size:15px;} .page-hero h1{font-size:26px;} }

/* TRUST BAR */
.trust{background:var(--white); border-bottom:1px solid var(--border);}
.trust .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; padding:30px 24px; gap:20px; text-align:center;}
.trust .item{flex:1; min-width:150px;}
.trust .num{font-size:22px; font-weight:700; color:var(--dark);}
.trust .label{font-size:12.5px; color:var(--text-muted); margin-top:3px;}

/* SECTIONS */
.section{padding:88px 0;}
.section-head{max-width:600px; margin:0 auto 52px; text-align:center;}
.eyebrow{font-size:12.5px; font-weight:700; color:var(--accent); letter-spacing:.6px; text-transform:uppercase; margin-bottom:10px;}
.section h2{font-size:33px; font-weight:700; letter-spacing:-0.6px; margin-bottom:12px;}
.section-head p{color:var(--text-muted); font-size:15.5px;}
@media (max-width:640px){ .section{padding:56px 0;} .section h2{font-size:25px;} }

/* SERVICES */
.services-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.service-card{background:var(--white); border:1px solid var(--border); border-radius:14px; padding:28px 22px; transition:border-color .15s, box-shadow .15s, transform .15s;}
.service-card:hover{border-color:var(--accent); box-shadow:var(--shadow-lg); transform:translateY(-3px);}
.service-icon{width:46px; height:46px; border-radius:12px; background:#fbe3e1; display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--accent);}
.service-icon svg{width:22px; height:22px;}
.service-card h3{font-size:16px; font-weight:600; margin-bottom:8px; line-height:1.4;}
.service-card p{font-size:13.5px; color:var(--text-muted);}
.service-card a.more{font-size:13px; font-weight:600; color:var(--accent); display:inline-block; margin-top:14px;}
@media (max-width:960px){ .services-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .services-grid{grid-template-columns:1fr;} }

/* PROJECT FILTER + GALLERY */
.filter-bar{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:40px;}
.filter-btn{padding:9px 18px; border-radius:30px; border:1px solid var(--border); background:#fff; font-size:13px; font-weight:600; cursor:pointer; color:var(--text-muted);}
.filter-btn.active, .filter-btn:hover{background:var(--dark); color:#fff; border-color:var(--dark);}
.gallery{background:var(--white); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.gallery-item{aspect-ratio:4/3; border-radius:12px; overflow:hidden; position:relative; background:#ddd6c9 center/cover no-repeat; transition:transform .2s;}
.gallery-item:hover{transform:scale(1.02);}
.gallery-item .caption{position:absolute; left:0; right:0; bottom:0; background:linear-gradient(transparent, rgba(0,0,0,.62)); color:#fff; font-size:13.5px; font-weight:600; padding:16px 14px;}
.gallery-item .cat-tag{position:absolute; top:12px; left:12px; background:rgba(255,255,255,.9); color:var(--dark); font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; text-transform:capitalize;}
@media (max-width:760px){ .gallery-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .gallery-grid{grid-template-columns:1fr;} }

/* TESTIMONIALS */
.testimonials-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.testimonial{background:var(--white); border:1px solid var(--border); border-radius:14px; padding:26px; position:relative;}
.testimonial .placeholder-tag{position:absolute; top:14px; right:14px; font-size:10px; font-weight:700; color:var(--text-muted); background:var(--bg); padding:3px 9px; border-radius:20px; text-transform:uppercase; letter-spacing:.3px;}
.stars{color:#e0a13a; font-size:13px; margin-bottom:12px;}
.testimonial p.quote{font-size:14.5px; margin-bottom:18px;}
.author{display:flex; align-items:center; gap:11px;}
.avatar{width:38px; height:38px; border-radius:50%; background:#fbe3e1; color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700;}
.author-name{font-size:13.5px; font-weight:600;}
.author-loc{font-size:12px; color:var(--text-muted);}
@media (max-width:960px){ .testimonials-grid{grid-template-columns:1fr;} }

/* ABOUT / VALUES */
.about{background:var(--white); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.about-flex{display:flex; gap:56px; align-items:center;}
.about-flex .photo{flex:0 0 300px; aspect-ratio:1; border-radius:14px; background:#ddd6c9 center/cover no-repeat;}
.about-flex .text h2{font-size:28px; font-weight:700; margin-bottom:16px;}
.about-flex .text p{color:var(--text-muted); font-size:15.5px; margin-bottom:14px;}
@media (max-width:820px){ .about-flex{flex-direction:column; text-align:center;} .about-flex .photo{flex:0 0 220px; width:220px;} }

.values-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.value-card{text-align:center; padding:10px;}
.value-icon{width:52px; height:52px; border-radius:50%; background:#fbe3e1; color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:22px; margin:0 auto 16px;}
.value-card h3{font-size:16px; font-weight:600; margin-bottom:8px;}
.value-card p{font-size:13.5px; color:var(--text-muted);}
@media (max-width:760px){ .values-grid{grid-template-columns:1fr;} }

/* PROCESS STEPS */
.process-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.process-step{text-align:center; padding:10px;}
.process-num{width:40px; height:40px; border-radius:50%; background:var(--dark); color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; font-weight:700; font-size:14px;}
.process-step h3{font-size:15px; font-weight:600; margin-bottom:6px;}
.process-step p{font-size:13px; color:var(--text-muted);}
@media (max-width:860px){ .process-grid{grid-template-columns:repeat(2,1fr);} }

/* COMPLIANCE LIST */
.compliance-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
.compliance-item{background:var(--white); border:1px solid var(--border); border-radius:12px; padding:20px 22px;}
.compliance-item h3{font-size:15px; font-weight:600; margin-bottom:6px; display:flex; align-items:center; gap:8px;}
.compliance-item h3::before{content:"§"; color:var(--accent); font-weight:700;}
.compliance-item p{font-size:13.5px; color:var(--text-muted);}
.compliance-note{background:#fbe3e1; border-radius:12px; padding:20px 24px; font-size:13.5px; color:var(--text); margin-top:30px;}
@media (max-width:760px){ .compliance-grid{grid-template-columns:1fr;} }

/* AREAS SERVED */
.areas-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.area-chip{background:var(--white); border:1px solid var(--border); border-radius:10px; padding:16px; text-align:center; font-size:14px; font-weight:600;}
@media (max-width:760px){ .areas-grid{grid-template-columns:repeat(2,1fr);} }

/* FAQ */
.faq-item{border-bottom:1px solid var(--border); padding:22px 0; cursor:pointer;}
.faq-item .faq-q{display:flex; justify-content:space-between; align-items:center; gap:16px;}
.faq-item h3{font-size:15.5px; font-weight:600;}
.faq-item .faq-toggle{color:var(--accent); font-size:20px; flex-shrink:0;}
.faq-item .faq-a{max-height:0; overflow:hidden; transition:max-height .2s ease;}
.faq-item.open .faq-a{max-height:240px; margin-top:12px;}
.faq-a p{font-size:14px; color:var(--text-muted);}

/* CTA BAND */
.cta-band{background:var(--dark); color:#fff; text-align:center; padding:76px 24px;}
.cta-band h2{font-size:30px; font-weight:700; margin-bottom:12px;}
.cta-band p{color:#c9c8c2; margin-bottom:30px;}

/* CONTACT PAGE */
.contact-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:48px;}
.contact-info-card{background:var(--white); border:1px solid var(--border); border-radius:14px; padding:28px;}
.contact-info-row{display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--border);}
.contact-info-row:last-child{border-bottom:none;}
.contact-info-icon{width:38px; height:38px; border-radius:10px; background:#fbe3e1; color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;}
.contact-info-row h4{font-size:13.5px; font-weight:600; margin-bottom:2px;}
.contact-info-row p{font-size:13.5px; color:var(--text-muted);}
.contact-form-card{background:var(--white); border:1px solid var(--border); border-radius:14px; padding:28px;}
.contact-form-card label{display:block; font-size:13px; font-weight:600; margin-bottom:6px; margin-top:16px;}
.contact-form-card label:first-of-type{margin-top:0;}
.contact-form-card input, .contact-form-card select, .contact-form-card textarea{
  width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:var(--radius); font-family:inherit; font-size:14px; background:#fff;
}
.contact-form-card textarea{min-height:110px; resize:vertical;}
.contact-form-card .btn{margin-top:20px; width:100%; text-align:center;}
.contact-form-card .consent-row{display:flex; align-items:flex-start; gap:10px; margin-top:16px;}
.contact-form-card .consent-row input{width:auto; margin-top:3px;}
.contact-form-card .consent-row label{margin:0; font-weight:400; font-size:12.5px; color:var(--text-muted);}
.form-notice{padding:14px 16px; border-radius:var(--radius); font-size:13.5px; margin-bottom:20px;}
.form-notice.success{background:#e4f3e6; color:#1f5c2b;}
.form-notice.error{background:#fbe3e1; color:#8c1f17;}
.hp-field{position:absolute; left:-9999px; opacity:0;}
.map-placeholder{background:var(--white); border:1px solid var(--border); border-radius:14px; height:220px; display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:13.5px; margin-top:24px; text-align:center; padding:20px;}

/* GENERIC CONTENT */
.content-wrap{max-width:820px; margin:0 auto; padding:64px 24px;}
.content-wrap h1{font-size:32px; margin-bottom:20px;}
.content-wrap h2{font-size:22px; margin:28px 0 12px;}
.content-wrap p{margin-bottom:16px; color:var(--text-muted);}
.content-wrap ul{list-style:disc; padding-left:22px; margin-bottom:16px;}
.content-wrap li{color:var(--text-muted); margin-bottom:6px;}
.single-hero-image{border-radius:14px; overflow:hidden; margin-bottom:28px;}
.what-includes{background:var(--white); border:1px solid var(--border); border-radius:14px; padding:26px 28px; margin:24px 0;}
.what-includes h3{font-size:15px; margin-bottom:12px;}

/* FOOTER */
.site-footer{background:var(--dark); color:#c9c8c2; padding:56px 0 100px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; margin-bottom:40px;}
.footer-col h4{color:#fff; font-size:14px; font-weight:600; margin-bottom:16px;}
.footer-col p, .footer-col a{font-size:13.5px; color:#aeada7; display:block; margin-bottom:10px;}
.footer-col a:hover{color:#fff;}
.footer-logo img{height:34px; margin-bottom:14px;}
.footer-bottom{border-top:1px solid #322f2c; padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px; color:#8f8e88;}
.footer-bottom a{color:#8f8e88;}
.footer-bottom a:hover{color:#fff;}
@media (max-width:820px){ .footer-grid{grid-template-columns:1fr 1fr; gap:28px;} }
@media (max-width:480px){ .footer-grid{grid-template-columns:1fr;} }
@media (min-width:641px){ .site-footer{padding-bottom:56px;} }

/* APP-STYLE MOBILE BOTTOM NAV */
.mobile-app-nav{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:70;
  background:#fff; border-top:1px solid var(--border);
  padding:8px 4px calc(8px + env(safe-area-inset-bottom));
  justify-content:space-around; align-items:center;
}
.mobile-app-nav a{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10.5px; color:var(--text-muted); font-weight:600; padding:4px 6px;}
.mobile-app-nav a.active, .mobile-app-nav a:hover{color:var(--accent);}
.mobile-app-nav svg{width:20px; height:20px;}
@media (max-width:640px){ .mobile-app-nav{display:flex;} body{padding-bottom:70px;} }

/* SCROLL REVEAL ANIMATIONS */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;}
.reveal.visible{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none;} }

/* REFINED CARD/BUTTON MOTION */
.hero .actions .btn, .cta-band .btn{transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease;}
.service-card, .value-card, .testimonial, .compliance-item, .area-chip{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;}
.area-chip:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--accent);}
.main-nav a{position:relative;}
.main-nav a::after{content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--accent); transition:width .2s ease;}
.main-nav a:hover::after, .main-nav a.current::after{width:100%;}
.gallery-item{transition:transform .3s ease, box-shadow .3s ease;}
.gallery-item:hover{box-shadow:var(--shadow-lg);}
.whatsapp-float{transition:transform .2s ease;}
.whatsapp-float:hover{transform:scale(1.08);}

/* IMAGE LIGHTBOX */
.e1-lightbox{
  display:none; position:fixed; inset:0; z-index:100;
  background:rgba(10,10,9,.92); align-items:center; justify-content:center; padding:40px;
}
.e1-lightbox.open{display:flex;}
.e1-lightbox img{max-width:90vw; max-height:85vh; border-radius:8px; box-shadow:var(--shadow-lg);}
.e1-lightbox-close{
  position:absolute; top:24px; right:28px; color:#fff; font-size:32px; background:none; border:none; cursor:pointer; line-height:1;
}
.e1-lightbox-caption{position:absolute; bottom:28px; left:0; right:0; text-align:center; color:#e5e3dc; font-size:14px;}
.content-wrap img{cursor:zoom-in; border-radius:10px;}
.e1-project-gallery-item{cursor:zoom-in;}

/* RULE-BASED CHAT WIDGET */
.e1-chat-widget{position:fixed; right:20px; bottom:150px; z-index:66;}
@media (min-width:641px){ .e1-chat-widget{bottom:90px;} }
.e1-chat-toggle{
  width:56px; height:56px; border-radius:50%; background:var(--dark); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow-lg);
  transition:transform .2s ease;
}
.e1-chat-toggle:hover{transform:scale(1.08);}
.e1-chat-toggle svg{width:24px; height:24px;}
.e1-chat-panel{
  display:none; position:absolute; bottom:70px; right:0; width:320px; max-width:82vw;
  background:#fff; border-radius:14px; box-shadow:var(--shadow-lg); border:1px solid var(--border); overflow:hidden;
}
.e1-chat-panel.open{display:block;}
.e1-chat-header{background:var(--dark); color:#fff; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; font-size:14px; font-weight:600;}
.e1-chat-close{background:none; border:none; color:#fff; font-size:22px; cursor:pointer; line-height:1;}
.e1-chat-body{padding:14px 16px; max-height:260px; overflow-y:auto; display:flex; flex-direction:column; gap:10px;}
.e1-chat-msg{font-size:13.5px; line-height:1.5; padding:10px 12px; border-radius:10px; max-width:90%;}
.e1-chat-msg.bot{background:var(--bg); align-self:flex-start;}
.e1-chat-msg.user{background:var(--accent); color:#fff; align-self:flex-end;}
.e1-chat-options{padding:10px 16px 16px; display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--border);}
.e1-chat-options button{
  background:#fff; border:1px solid var(--border); border-radius:8px; padding:9px 12px; font-size:13px; text-align:left; cursor:pointer; color:var(--text);
}
.e1-chat-options button:hover{border-color:var(--accent); color:var(--accent);}

/* WHATSAPP FLOAT */
.whatsapp-float{
  position:fixed; right:20px; bottom:86px; z-index:65;
  width:56px; height:56px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg);
}
.whatsapp-float svg{width:28px; height:28px; fill:#fff;}
@media (min-width:641px){ .whatsapp-float{bottom:26px;} }