/*
Theme Name: Shadetree Syndicate V2
Theme URI: https://shadetreesyndicate.com
Author: Shadetree Syndicate Motor Co.
Description: Production-style dark industrial automotive diagnostics WordPress theme with two-tier header, dropdown menu, local SEO pages, service templates, equipment showcase, FAQ schema, and conversion-focused homepage.
Version: 2.0.0
License: GPL-2.0-or-later
Text Domain: shadetree-syndicate
*/

:root{
    --black:#050505;
    --panel:#111;
    --panel2:#181818;
    --orange:#f26a00;
    --orange2:#ff8a1c;
    --silver:#d7d7d7;
    --white:#fff;
    --muted:#b8b8b8;
    --border:#3a2413;
    --darkgray:#0b0b0b;
}

*{box-sizing:border-box}

body{
    margin:0;
    background:var(--black);
    color:var(--white);
    font-family:Arial,Helvetica,sans-serif;
    line-height:1.5;
    background-image:
        radial-gradient(circle at 20% 10%,rgba(242,106,0,.12),transparent 22%),
        linear-gradient(180deg,#050505,#0a0a0a);
}

a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.container{width:min(1180px,92vw);margin:auto}
.screen-reader-text{position:absolute;left:-9999px}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:var(--orange);
    border:1px solid var(--orange2);
    color:var(--white);
    padding:13px 20px;
    font-weight:900;
    text-transform:uppercase;
    border-radius:3px;
    box-shadow:0 0 18px rgba(242,106,0,.25);
}
.btn:hover{filter:brightness(1.08)}
.btn.outline{background:#070707;border-color:var(--orange);box-shadow:none}

/* Header */

.site-header{
    position: relative;
    width: 100%;

    background-image:url(https://shadetreesyndicate.com/wp-content/uploads/2026/07/header.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    border-bottom: 3px solid var(--orange);
}


.header-top{padding:14px 0;border-bottom:1px solid #21150b}
.header-top .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.brand{
    display:flex;
    align-items:center;
    gap:14px;
}

.brand img{max-width:88px}
.brand-text{
    font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
    text-transform:uppercase;
    line-height:.92;
    font-size:1.6rem;
}
.brand-text span{display:block;color:var(--orange)}

.header-info{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.phone{
    color:var(--silver);
    font-size:1.05rem;
    font-weight:900;
    text-transform:uppercase;
}
.phone:hover{color:var(--orange)}

.header-bottom{
    background:#111;
    border-top:1px solid #242424;
}

.header-bottom .container{
    display:flex;
    justify-content:center;
    align-items:center;
}

.menu-toggle{
    display:none;
    background:var(--orange);
    color:#fff;
    border:0;
    padding:12px 16px;
    font-weight:900;
    text-transform:uppercase;
}

.menu{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:35px;
    margin:0;
    padding:0;
    list-style:none;
    font-size:.88rem;
}

.menu li{position:relative;list-style:none}

.menu li a{
    display:block;
    padding:17px 0;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:#fff;
    transition:.25s;
}

.menu li a:hover,
.menu .current-menu-item > a,
.menu .current-menu-ancestor > a{color:var(--orange)}

.menu li ul{
    display:none;
    position:absolute;
    top:100%;
    right:0;
    left:auto;
    min-width:285px;
    background:#111;
    border-top:3px solid var(--orange);
    padding:0;
    margin:0;
    list-style:none;
    z-index:9999;
    box-shadow:0 10px 30px rgba(0,0,0,.55);
}

.menu li:hover > ul,
.menu li:focus-within > ul{display:block}

.menu li ul li a{
    padding:14px 20px;
    border-bottom:1px solid #222;
    color:var(--silver);
    white-space:nowrap;
}

.menu li ul li a:hover{background:#1b1b1b;color:var(--orange)}

/* Hero */
.hero{
    position:relative;
    overflow:hidden;
    border-bottom:1px solid var(--border);
}
.hero:before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,#050505 0%,rgba(5,5,5,.84) 38%,rgba(5,5,5,.25) 72%,#050505 100%),
        url('assets/images/banner-reference.jpg') center/cover no-repeat;
    opacity:.82;
}
.hero .container{
    position:relative;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:30px;
    min-height:575px;
    align-items:center;
}
.eyebrow{color:var(--orange);font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.hero h1,.section-title,.page-hero h1{
    font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
    text-transform:uppercase;
    letter-spacing:.03em;
}
.hero h1{
    font-size:clamp(3rem,8vw,6.8rem);
    line-height:.86;
    margin:14px 0;
    text-shadow:3px 3px 0 #000;
}
.hero h1 span{display:block;color:var(--orange)}
.tagline{font-size:1.55rem;font-weight:900;color:var(--silver);font-style:italic;text-transform:uppercase}
.hero p{max-width:650px;font-size:1.08rem;color:#eee}
.hero-buttons{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0}

.trust-row{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-top:25px;
    color:var(--silver);
    font-size:.9rem;
    font-weight:800;
    text-transform:uppercase;
}
.trust-row div{border-left:2px solid var(--orange);padding-left:12px}

.diagnosis-card{
    justify-self:end;
    width:min(370px,100%);
    padding:28px;
    background:rgba(10,10,10,.88);
    border:1px solid var(--orange);
    box-shadow:0 0 28px rgba(242,106,0,.25);
    border-radius:6px;
}
.diagnosis-card h3{color:var(--orange);text-transform:uppercase;margin-top:0}

/* Sections */
.section{padding:54px 0;border-bottom:1px solid #22150b}
.section-title{font-size:2.25rem;margin:0 0 22px;color:var(--orange);text-align:center}
.section-intro{max-width:820px;margin:0 auto 28px;color:#eee;text-align:center}

.services{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.service-card,.info-card,.main-content,.sidebar-card,.review-card,.post-card,.equipment-card{
    background:linear-gradient(180deg,var(--panel2),var(--darkgray));
    border:1px solid #3a3a3a;
    padding:24px;
    border-radius:4px;
}
.service-card{min-height:160px;border-color:#472410;transition:.25s}
.service-card:hover{transform:translateY(-3px);border-color:var(--orange)}
.service-icon{font-size:2rem;color:var(--orange)}
.service-card h3{text-transform:uppercase;margin:10px 0 6px}
.service-card a{color:var(--orange);font-weight:900;text-transform:uppercase}

.three-col{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:18px}
.info-card h3{color:var(--orange);text-transform:uppercase}
.checklist{padding-left:0;list-style:none}
.checklist li{margin:8px 0}
.checklist li:before{content:"✓";color:var(--orange);font-weight:900;margin-right:8px}
.numbers{display:grid;gap:10px}
.number strong{display:block;color:var(--orange);font-size:2rem}

.process{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:12px;
    counter-reset:step;
}
.process-step{
    background:#0c0c0c;
    border:1px solid #332011;
    padding:18px;
    text-align:center;
}
.process-step:before{
    counter-increment:step;
    content:counter(step);
    display:inline-grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--orange);
    font-weight:900;
    margin-bottom:10px;
}

.equipment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.equipment-card h3{color:var(--orange);text-transform:uppercase}

.cta-strip{
    padding:28px 0;
    background:#080808;
    border-top:1px solid var(--orange);
    border-bottom:1px solid var(--orange);
}
.cta-strip .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}
.cta-strip h2{
    font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
    text-transform:uppercase;
    font-size:2.2rem;
    margin:0;
}
.cta-strip h2 span{color:var(--orange)}

/* Pages */
.page-hero{
    position:relative;
    padding:86px 0 74px;
    border-bottom:1px solid var(--border);
    background:
        linear-gradient(90deg,#050505 0%,rgba(5,5,5,.82) 60%,rgba(5,5,5,.35)),
        url('assets/images/banner-reference.jpg') center/cover no-repeat;
}
.page-hero h1{
    font-size:clamp(2.8rem,7vw,5.8rem);
    line-height:.9;
    margin:12px 0;
    color:var(--silver);
    text-shadow:3px 3px 0 #000;
}
.page-hero p{max-width:760px;font-size:1.18rem;color:#eee}

.content-grid{display:grid;grid-template-columns:2fr .9fr;gap:24px;align-items:start}
.main-content h2,.main-content h3,.sidebar-card h3{color:var(--orange);text-transform:uppercase}
.checklist.big li{font-size:1.05rem;margin:12px 0}
.sidebar-card{position:sticky;top:155px;display:grid;gap:14px}
.service-directory{grid-template-columns:repeat(3,1fr)}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.review-card{font-size:1.05rem}
.review-card .stars{color:var(--orange);font-size:1.25rem}
.center{text-align:center}
.small-note{color:var(--muted);font-size:.9rem}
.post-list{display:grid;gap:18px}
.post-card h2{margin-top:0;color:var(--orange)}

/* Footer */
.footer{padding:40px 0 18px;background:#030303;color:var(--muted)}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px}
.footer h4{color:var(--orange);text-transform:uppercase}
.footer ul{list-style:none;padding:0}
.footer li{margin:7px 0}
.copyright{border-top:1px solid #202020;margin-top:24px;padding-top:16px;font-size:.85rem}

/* Forms */
input,textarea,select{
    width:100%;
    background:#090909;
    border:1px solid #333;
    color:#fff;
    padding:12px;
    border-radius:3px;
}
label{font-weight:900;text-transform:uppercase;color:var(--silver)}
form p{margin-bottom:14px}

/* Responsive */
@media(max-width:980px){
    .menu-toggle{display:block;margin:10px 0 10px auto}
    .header-bottom .container{display:block}
    .menu{display:none;flex-direction:column;align-items:stretch;gap:0;width:100%}
    .menu.is-open{display:flex}
    .menu li a{padding:14px;border-bottom:1px solid #222}
    .menu li ul{position:static;display:none;min-width:100%;box-shadow:none;border-top:1px solid var(--orange)}
    .menu li:hover > ul,.menu li:focus-within > ul{display:block}
    .hero .container,.three-col,.footer-grid,.content-grid{grid-template-columns:1fr}
    .diagnosis-card{justify-self:start}
    .services{grid-template-columns:repeat(2,1fr)}
    .equipment-grid,.review-grid,.service-directory{grid-template-columns:1fr}
    .trust-row{grid-template-columns:repeat(2,1fr)}
    .process{grid-template-columns:repeat(2,1fr)}
    .cta-strip .container{align-items:flex-start;flex-direction:column}
    .sidebar-card{position:static}
}
@media(max-width:560px){
    .header-top .container,.header-info{flex-direction:column;align-items:flex-start}
    .services,.trust-row,.process{grid-template-columns:1fr}
    .hero h1{font-size:3.1rem}
    .brand-text{font-size:1.2rem}
    .brand img{max-width:62px}
}