/*
Theme Name: Quality Trucks
Theme URI: https://qualitytrucksusa.com
Author: Quality Equipment & Parts, Inc.
Description: Bold, modern theme for Quality Trucks USA, the grapple truck division of Quality Equipment & Parts. Machinery Trader inventory embed, HubSpot lead form, employee login.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: qualitytrucks
*/

:root{
  --orange:#F58120;
  --orange-deep:#D96A0E;
  --black:#000000;
  --graphite:#1F2124;
  --steel:#8C9196;
  --ash:#D9DBDD;
  --paper:#F3F2EF;
  --white:#FFFFFF;
  --ink:#141516;
  --text-2:#3d4043;
  --line-dark:#2a2c2f;
  --display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --body:'Barlow','Helvetica Neue',Arial,sans-serif;
  --gutter:clamp(16px,4vw,56px);
  --max:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{font-family:var(--body);color:var(--ink);background:var(--white);line-height:1.5;font-size:17px}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
h1,h2,h3,.display{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:-.01em}
h2{font-size:clamp(44px,6.5vw,84px)}
h3{font-size:clamp(26px,3vw,36px);font-weight:700}
p{max-width:62ch}
.lede{font-size:clamp(18px,1.6vw,21px);line-height:1.5}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:20px;letter-spacing:.02em;padding:16px 26px;text-decoration:none;border:2px solid transparent;cursor:pointer;line-height:1;white-space:nowrap;border-radius:0}
.btn-orange{background:var(--orange);color:var(--black);border-color:var(--orange)}
.btn-orange:hover{background:var(--orange-deep);border-color:var(--orange-deep)}
.btn-ghost{background:transparent;color:var(--white);border-color:var(--white)}
.btn-ghost:hover{background:var(--white);color:var(--black)}
.btn-dark{background:var(--black);color:var(--white);border-color:var(--black)}
.btn-dark:hover{background:var(--graphite);border-color:var(--graphite)}

/* Top bar */
.topbar{background:var(--black);color:var(--ash);font-size:14px;border-bottom:1px solid var(--line-dark)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:16px}
.topbar a{color:var(--ash);text-decoration:none}
.topbar a:hover{color:var(--white)}
.topbar .locs{display:flex;gap:22px}
.topbar .qep{color:var(--steel);display:flex;align-items:center;gap:14px}
.topbar .qep b{color:var(--orange);font-weight:600}
.login-toggle{background:none;border:1px solid var(--line-dark);color:var(--ash);font:inherit;font-size:13px;padding:3px 10px;cursor:pointer}
.login-toggle:hover{color:var(--white);border-color:var(--steel)}
.login-panel{display:none;position:absolute;right:var(--gutter);top:40px;z-index:60;background:var(--graphite);border:1px solid var(--line-dark);padding:18px;width:280px;color:var(--white)}
.login-panel.open{display:block}
.login-panel p{margin-bottom:10px}
.login-panel label{display:block;font-size:13px;color:var(--ash);margin-bottom:4px}
.login-panel input[type=text],.login-panel input[type=password]{width:100%;font:inherit;padding:9px 10px;background:var(--black);color:var(--white);border:1px solid #3a3d41}
.login-panel input[type=submit]{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:17px;background:var(--orange);color:var(--black);border:0;padding:10px 16px;cursor:pointer;width:100%}
.login-panel .forgot{font-size:13px}
.login-panel .forgot a{color:var(--ash)}
.topbar-inner{position:relative}

/* Header */
.site-header{background:var(--black);color:var(--white);position:sticky;top:0;z-index:50;box-shadow:0 1px 0 var(--line-dark)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:84px;position:relative}
.brand img{height:62px;width:auto}
.nav{display:flex;align-items:center;gap:6px}
.nav ul{list-style:none;display:flex;align-items:center;gap:6px}
.nav a{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:19px;letter-spacing:.03em;text-decoration:none;padding:10px 14px;color:var(--white);border-bottom:3px solid transparent;display:block;white-space:nowrap}
.nav a:hover,.nav .current-menu-item>a,.nav .current_page_item>a{border-bottom-color:var(--orange)}
.nav .call{margin-left:10px;white-space:nowrap;background:var(--orange);color:var(--black);padding:12px 18px;border-bottom:0}
.nav .call:hover{background:var(--orange-deep)}
.menu-btn{display:none;background:none;border:2px solid var(--white);color:var(--white);font-family:var(--display);font-size:18px;text-transform:uppercase;padding:8px 14px;cursor:pointer}
@media (max-width:980px){
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--black);flex-direction:column;align-items:stretch;padding:8px var(--gutter) 20px;border-top:1px solid var(--line-dark)}
  .nav.open{display:flex}
  .nav ul{flex-direction:column;align-items:stretch;gap:0}
  .nav a{padding:14px 6px;border-bottom:1px solid var(--line-dark);font-size:22px}
  .nav .call{margin:14px 0 0;text-align:center;justify-content:center}
  .menu-btn{display:inline-block}
  .topbar .locs span:nth-child(2){display:none}
  .topbar .qep span{display:none}
}

/* Hero */
.hero{position:relative;background:var(--black);color:var(--white);min-height:min(88vh,820px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 55%;z-index:-2}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.15) 100%),linear-gradient(0deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,0) 55%)}
.hero .wrap{padding-top:120px;padding-bottom:72px;width:100%}
.hero h1{font-size:clamp(58px,9.6vw,140px);font-weight:900;max-width:11ch}
.hero h1 span{color:var(--orange)}
.hero .lede{margin:26px 0 34px;max-width:52ch;color:var(--ash)}
.hero .btns{display:flex;gap:14px;flex-wrap:wrap}
.stripe{position:absolute;top:0;right:0;width:min(42vw,520px);height:22px;z-index:1;background:repeating-linear-gradient(-45deg,var(--orange) 0 28px,var(--black) 28px 56px);clip-path:polygon(22px 0,100% 0,100% 100%,0 100%)}
@media (max-width:640px){.hero .wrap{padding-top:90px;padding-bottom:48px}.hero>img{object-position:70% 50%}}

/* Page hero (inner pages) */
.page-hero{background:var(--black);color:var(--white);position:relative;overflow:hidden;isolation:isolate}
.page-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;z-index:-2}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.3) 100%)}
.page-hero .wrap{padding-top:clamp(64px,9vw,120px);padding-bottom:clamp(44px,6vw,72px)}
.page-hero h1{font-size:clamp(50px,8vw,112px);font-weight:900;max-width:12ch}
.page-hero .lede{margin-top:22px;color:var(--ash);max-width:56ch}

/* Facts strip */
.facts{background:var(--orange);color:var(--black)}
.facts .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.facts div{padding:22px 24px 22px 0;border-right:2px solid rgba(0,0,0,.18);margin-right:24px;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:21px;line-height:1.05}
.facts div:last-child{border-right:0;margin-right:0}
.facts small{display:block;font-family:var(--body);font-weight:500;text-transform:none;font-size:14px;margin-top:4px;opacity:.85}
@media (max-width:860px){.facts .wrap{grid-template-columns:1fr 1fr}.facts div:nth-child(2){border-right:0;margin-right:0}}
@media (max-width:460px){.facts .wrap{grid-template-columns:1fr}.facts div{border-right:0;margin-right:0;border-bottom:2px solid rgba(0,0,0,.18);padding:16px 0}.facts div:last-child{border-bottom:0}}

/* Sections */
.section{padding:clamp(64px,8vw,120px) 0}
.section-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.section-head p{font-size:19px;color:var(--text-2)}
@media (max-width:860px){.section-head{grid-template-columns:1fr;gap:16px}}

/* Build sheet */
.sheet{border-top:3px solid var(--black)}
.row{display:grid;grid-template-columns:220px 1fr 1.2fr 260px;gap:32px;align-items:center;padding:28px 0;border-bottom:1px solid var(--ash);text-decoration:none;color:inherit}
.row:hover{background:var(--paper)}
.row:hover .row-name{color:var(--orange-deep)}
.row-name{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(28px,3vw,40px);line-height:.95}
.row-desc{color:var(--text-2);font-size:16px}
.row-spec{font-size:15px;color:var(--text-2);display:grid;grid-template-columns:auto 1fr;gap:4px 14px}
.row-spec dt{font-weight:600;color:var(--ink)}
.row img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--graphite)}
@media (max-width:980px){.row{grid-template-columns:1fr 1fr;grid-template-areas:"name img" "desc img" "spec img";gap:12px 24px}.row-name{grid-area:name}.row-desc{grid-area:desc}.row-spec{grid-area:spec}.row img{grid-area:img}}
@media (max-width:600px){.row{grid-template-columns:1fr;grid-template-areas:"img" "name" "desc" "spec"}}

/* Built-on list */
.builton{background:var(--paper);padding:clamp(40px,5vw,64px) 0}
.builton .wrap{display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:center}
.builton h3{font-size:clamp(26px,2.6vw,32px)}
.builton ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 34px;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(22px,2.4vw,30px);color:var(--graphite)}
.builton p{font-size:15px;color:var(--text-2);margin-top:8px}
@media (max-width:860px){.builton .wrap{grid-template-columns:1fr;gap:18px}}

/* Process (dark) */
.process{background:var(--black);color:var(--white)}
.process .section-head p{color:var(--ash)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line-dark)}
.step{padding:36px 36px 36px 0;border-right:1px solid var(--line-dark);margin-right:36px;position:relative}
.step:last-child{border-right:0;margin-right:0}
.step .num{font-family:var(--display);font-weight:900;font-size:96px;line-height:.8;color:var(--orange);margin-bottom:18px}
.step h3{margin-bottom:12px}
.step p{color:var(--ash);font-size:16px}
.process .cta{margin-top:44px}
@media (max-width:860px){.steps{grid-template-columns:1fr}.step{border-right:0;margin-right:0;border-bottom:1px solid var(--line-dark);padding:28px 0}.step:last-child{border-bottom:0}.step .num{font-size:72px}}

/* Gallery */
.gallery{padding-bottom:0}
.gallery .section-head{margin-bottom:28px}
.strip{display:grid;grid-template-columns:1.6fr 1fr 1fr;grid-template-rows:300px 300px;gap:6px}
.strip figure{position:relative;overflow:hidden;background:var(--graphite);margin:0}
.strip img{width:100%;height:100%;object-fit:cover}
.strip figure:first-child{grid-row:span 2}
.strip figcaption{position:absolute;left:0;bottom:0;background:var(--black);color:var(--white);font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:17px;padding:8px 14px;letter-spacing:.02em}
@media (max-width:860px){.strip{grid-template-columns:1fr 1fr;grid-template-rows:260px 200px 200px}.strip figure:first-child{grid-column:span 2;grid-row:auto}}

/* Support band */
.support .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.support img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 40%}
.support h2{margin-bottom:22px}
.support ul{list-style:none;margin:28px 0 32px;border-top:2px solid var(--black)}
.support li{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--ash)}
.support li b{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:26px;line-height:1}
.support li span{color:var(--text-2);font-size:16px}
@media (max-width:860px){.support .wrap{grid-template-columns:1fr;gap:28px}.support li{grid-template-columns:1fr;gap:6px}}

/* About band */
.about{background:var(--paper)}
.about .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.about blockquote{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(30px,4vw,54px);line-height:.98;color:var(--graphite)}
.about blockquote span{color:var(--orange)}
.about p{margin-top:22px;color:var(--text-2)}
.about img{width:100%;aspect-ratio:5/4;object-fit:cover}
@media (max-width:860px){.about .wrap{grid-template-columns:1fr;gap:28px}}

/* Locations + contact */
.visit{background:var(--black);color:var(--white)}
.visit .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.visit h2{margin-bottom:28px}
.loc{padding:22px 0;border-top:1px solid var(--line-dark)}
.loc:last-of-type{border-bottom:1px solid var(--line-dark)}
.loc h3{margin-bottom:8px}
.loc a{color:var(--ash);text-decoration:none}
.loc a:hover{color:var(--white);text-decoration:underline}
.loc .tel{font-family:var(--display);font-weight:700;font-size:28px;color:var(--orange)!important;display:inline-block;margin-top:6px}
.hours{color:var(--steel);font-size:15px;margin-top:16px}
.qt-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.qt-form label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ash);font-weight:500}
.qt-form label.full{grid-column:span 2}
.qt-form input,.qt-form select,.qt-form textarea{font:inherit;font-size:16px;padding:12px 14px;background:var(--graphite);color:var(--white);border:1px solid #3a3d41;border-radius:0}
.qt-form textarea{min-height:120px;resize:vertical}
.qt-form select option{color:var(--black)}
.qt-form .btn{grid-column:span 2;justify-self:start}
.qt-form .hp{position:absolute;left:-9999px}
.form-note{grid-column:span 2;padding:14px 16px;background:var(--graphite);border-left:4px solid var(--orange);font-size:15px}
@media (max-width:860px){.visit .wrap{grid-template-columns:1fr;gap:40px}.qt-form{grid-template-columns:1fr}.qt-form label.full,.qt-form .btn,.form-note{grid-column:auto}}
.hs-form-wrap{background:var(--white);color:var(--ink);padding:20px}

/* Inventory page */
.inventory{background:var(--white)}
.inventory .embed{min-height:400px}
.inventory .embed iframe{width:100%;min-height:1200px;border:0}
.inventory .fallback{border-top:3px solid var(--black);padding-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.inventory .fallback p{color:var(--text-2)}
.inventory .fallback .btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
@media (max-width:860px){.inventory .fallback{grid-template-columns:1fr}}

/* Generic page content */
.content{padding:clamp(48px,6vw,96px) 0}
.content .entry{max-width:72ch}
.content .entry h2{font-size:clamp(34px,4vw,52px);margin:36px 0 14px}
.content .entry h3{margin:28px 0 10px}
.content .entry p,.content .entry ul,.content .entry ol{margin-bottom:16px;color:var(--text-2)}
.content .entry ul,.content .entry ol{padding-left:22px}
.content .entry a{color:var(--orange-deep)}
.content .entry img{margin:20px 0}

/* Service list (Parts & Service page) */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:3px solid var(--black)}
.svc div{padding:30px 32px 30px 0;border-right:1px solid var(--ash);margin-right:32px}
.svc div:last-child{border-right:0;margin-right:0}
.svc h3{margin-bottom:12px}
.svc p{color:var(--text-2);font-size:16px}
.svc ul{list-style:none;margin-top:14px;color:var(--text-2);font-size:16px}
.svc li{padding:6px 0;border-top:1px solid var(--ash)}
@media (max-width:860px){.svc{grid-template-columns:1fr}.svc div{border-right:0;margin-right:0;border-bottom:1px solid var(--ash);padding:24px 0}.svc div:last-child{border-bottom:0}}

/* Financing page */
.fin{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.fin ul{list-style:none;border-top:2px solid var(--black)}
.fin li{display:grid;grid-template-columns:170px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--ash)}
.fin li b{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:24px;line-height:1}
.fin li span{color:var(--text-2);font-size:16px}
.fin .cta{margin-top:28px}
@media (max-width:860px){.fin{grid-template-columns:1fr}.fin li{grid-template-columns:1fr;gap:6px}}

/* Values (About page) */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:3px solid var(--black)}
.values div{padding:26px 28px 26px 0;border-right:1px solid var(--ash);margin-right:28px;border-bottom:1px solid var(--ash)}
.values div:nth-child(3n){border-right:0;margin-right:0}
.values b{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:24px;line-height:1;display:block;margin-bottom:8px}
.values span{color:var(--text-2);font-size:15px}
@media (max-width:860px){.values{grid-template-columns:1fr}.values div{border-right:0;margin-right:0}}

/* Footer */
.site-footer{background:var(--black);color:var(--steel);border-top:1px solid var(--line-dark);padding:40px 0 32px;font-size:14px}
.site-footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.site-footer img{height:46px;width:auto}
.site-footer nav ul{list-style:none;display:flex;gap:22px;flex-wrap:wrap}
.site-footer a{color:var(--ash);text-decoration:none}
.site-footer a:hover{color:var(--white)}
.site-footer .copy{width:100%;margin-top:22px;padding-top:18px;border-top:1px solid var(--line-dark);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.site-footer .copy a{color:var(--orange)}

/* 404 */
.notfound{padding:clamp(64px,10vw,140px) 0}
.notfound h1{font-size:clamp(60px,12vw,160px);color:var(--orange)}
.notfound p{margin:18px 0 28px;color:var(--text-2)}

/* WP admin bar offset */
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:46px}}

/* Logo override: new Quality Trucks Inc logo from the media library (added Nov 2026) */
.brand img{width:0!important;height:62px!important;padding-left:108px;background:url("https://qualitytrucksusa.com/wp-content/uploads/2026/11/quality-trucks-logo.png") left center/contain no-repeat}
.site-footer > .wrap > img{width:0!important;height:46px!important;padding-left:80px;background:url("https://qualitytrucksusa.com/wp-content/uploads/2026/11/quality-trucks-logo.png") left center/contain no-repeat}
#login h1 a{background-image:url("https://qualitytrucksusa.com/wp-content/uploads/2026/11/quality-trucks-logo.png")!important;background-color:#000;border-radius:8px;width:260px!important;height:150px!important}