/*
Theme Name: SMA Autos
Theme URI: https://smaautos.co.uk
Author: SMA Autos LTD
Author URI: https://smaautos.co.uk
Description: Bold Garage (dark + orange) WordPress theme for SMA Autos LTD car servicing and repairs. Editable services and testimonials, native blog, and a contact page. Based on the Version 1 design.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sma-autos
*/

/* ================= DESIGN SYSTEM (Version 1 - Bold Garage) ================= */
:root{
  --bg:#0e1013; --bg2:#15181d; --card:#1b1f26; --line:#2a2f38;
  --orange:#ff6a1a; --orange2:#ff8a3d; --text:#eef1f5; --muted:#9aa3af;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;line-height:1.6}
h1,h2,h3,.display{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.5px;line-height:1.1}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.btn{display:inline-block;background:var(--orange);color:#111;font-family:'Oswald',sans-serif;text-transform:uppercase;font-weight:600;letter-spacing:1px;padding:15px 30px;border-radius:4px;transition:.2s;border:2px solid var(--orange);cursor:pointer}
.btn:hover{background:var(--orange2);border-color:var(--orange2)}
.btn.ghost{background:transparent;color:#fff;border:2px solid var(--line)}
.btn.ghost:hover{border-color:var(--orange)}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(14,16,19,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{font-family:'Oswald',sans-serif;font-size:24px;font-weight:700;display:flex;align-items:center;gap:10px}
.logo b{color:var(--orange)}
.logo .mark{width:38px;height:38px;background:var(--orange);border-radius:6px;display:grid;place-items:center;color:#111;font-weight:700;transform:skewX(-8deg)}
.logo img{max-height:44px;width:auto;display:block}
.main-nav ul{display:flex;gap:30px;list-style:none;font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:15px;letter-spacing:.5px;margin:0;padding:0}
.main-nav a{color:var(--muted);transition:.2s}
.main-nav a:hover,.main-nav .current-menu-item>a{color:#fff}
.nav .cta{display:flex;align-items:center;gap:16px}
.phone{font-family:'Oswald',sans-serif;color:#fff;font-size:18px;line-height:1.1}
.phone span{color:var(--orange);display:block;font-size:11px;letter-spacing:1px}
.menu-btn{display:none;background:none;border:0;color:#fff;cursor:pointer}
.mobile-nav{display:none;background:var(--bg2);border-bottom:1px solid var(--line)}
.mobile-nav ul{list-style:none;margin:0;padding:10px 22px}
.mobile-nav li{border-bottom:1px solid var(--line)}
.mobile-nav a{display:block;padding:14px 0;font-family:'Oswald',sans-serif;text-transform:uppercase;color:var(--text)}
.mobile-nav.open{display:block}

/* hero */
.hero{position:relative;padding:90px 0 100px;overflow:hidden;background:
   radial-gradient(900px 500px at 80% -10%, rgba(255,106,26,.18), transparent 60%),
   linear-gradient(180deg,#0e1013,#12151a)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.tag{display:inline-block;color:var(--orange);border:1px solid var(--orange);padding:6px 14px;border-radius:40px;font-size:13px;letter-spacing:2px;text-transform:uppercase;margin-bottom:22px}
.hero h1{font-size:clamp(38px,6vw,74px);font-weight:700}
.hero h1 em{color:var(--orange);font-style:normal}
.hero p{color:var(--muted);font-size:19px;max-width:520px;margin:22px 0 30px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-card{background:linear-gradient(160deg,#1b1f26,#14171c);border:1px solid var(--line);border-radius:16px;padding:30px;position:relative}
.hero-card h3{color:var(--orange);font-size:20px;margin-bottom:18px}
.checklist{list-style:none;display:grid;gap:14px}
.checklist li{display:flex;gap:12px;align-items:flex-start;color:#d6dae1}
.checklist svg{flex-shrink:0;margin-top:3px}

/* trust bar */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2)}
.trust .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;padding:26px 22px}
.stat b{font-family:'Oswald',sans-serif;font-size:32px;color:var(--orange);display:block}
.stat span{color:var(--muted);font-size:14px;text-transform:uppercase;letter-spacing:1px}

/* section */
section.pad{padding:90px 0}
.head{max-width:640px;margin-bottom:50px}
.head.center{margin-left:auto;margin-right:auto;text-align:center}
.head .tag{margin-bottom:16px}
.head h2{font-size:clamp(30px,4vw,46px)}
.head p{color:var(--muted);margin-top:14px;font-size:17px}

/* services */
.services{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.services.cols-4{grid-template-columns:repeat(4,1fr)}
.svc{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:32px;transition:.25s;position:relative;overflow:hidden}
.svc:before{content:"";position:absolute;left:0;top:0;height:4px;width:0;background:var(--orange);transition:.3s}
.svc:hover{transform:translateY(-6px);border-color:#39404b}
.svc:hover:before{width:100%}
.svc .ico{width:60px;height:60px;border-radius:12px;background:rgba(255,106,26,.12);display:grid;place-items:center;color:var(--orange);margin-bottom:20px}
.svc h3{font-size:23px;margin-bottom:10px}
.svc p{color:var(--muted);font-size:15px}
.svc .price{margin-top:18px;font-family:'Oswald',sans-serif;color:#fff;font-size:15px}
.svc .price b{color:var(--orange)}

/* why */
.why{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.why-item{padding:26px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.why-item .ico{color:var(--orange);margin-bottom:14px}
.why-item h3{font-size:19px;margin-bottom:8px}
.why-item p{color:var(--muted);font-size:15px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
.step{padding:26px;border-radius:12px;background:var(--card);border:1px solid var(--line);position:relative}
.step:before{counter-increment:s;content:"0" counter(s);font-family:'Oswald',sans-serif;font-size:42px;color:var(--orange);opacity:.3;position:absolute;top:16px;right:18px}
.step h3{font-size:18px;margin:10px 0 8px}
.step p{color:var(--muted);font-size:14px}

/* testimonials */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.quote{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px}
.stars{color:var(--orange);margin-bottom:14px;letter-spacing:2px}
.quote p{color:#d6dae1;font-size:15px}
.who{margin-top:18px;display:flex;align-items:center;gap:12px}
.who .av{width:42px;height:42px;border-radius:50%;background:var(--orange);color:#111;display:grid;place-items:center;font-family:'Oswald',sans-serif;font-weight:700}
.who b{font-size:15px}
.who span{color:var(--muted);font-size:13px;display:block}

/* cta */
.cta-band{background:linear-gradient(120deg,var(--orange),#ff8a3d);color:#141414;border-radius:20px;padding:50px;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(26px,3.5vw,40px)}
.cta-band p{max-width:520px;font-weight:500}
.cta-band .btn{background:#111;color:#fff;border-color:#111}
.cta-band .btn:hover{background:#000;border-color:#000}

/* page hero (inner pages) */
.page-hero{padding:70px 0 50px;background:radial-gradient(700px 400px at 80% -20%, rgba(255,106,26,.15), transparent 60%),var(--bg);border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(34px,5vw,58px)}
.page-hero p{color:var(--muted);margin-top:14px;font-size:18px;max-width:640px}
.breadcrumb{color:var(--muted);font-size:14px;margin-bottom:16px}
.breadcrumb a:hover{color:var(--orange)}

/* blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.post-card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.25s;display:flex;flex-direction:column}
.post-card:hover{transform:translateY(-5px);border-color:#39404b}
.post-card .thumb{aspect-ratio:16/9;background:linear-gradient(160deg,#1b1f26,#12151a);overflow:hidden}
.post-card .thumb img{width:100%;height:100%;object-fit:cover}
.post-card .pc-body{padding:24px;flex:1;display:flex;flex-direction:column}
.post-card .meta{color:var(--orange);font-size:12px;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;font-family:'Oswald',sans-serif}
.post-card h3{font-size:20px;margin-bottom:10px;text-transform:none;letter-spacing:0;font-family:'Oswald',sans-serif}
.post-card p{color:var(--muted);font-size:14px;flex:1}
.post-card .rm{margin-top:16px;color:var(--orange);font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:14px;letter-spacing:1px}

/* single / page content */
.article{max-width:820px;margin:0 auto}
.entry-content{font-size:17px;color:#d6dae1}
.entry-content p{margin:0 0 20px}
.entry-content h2{font-size:30px;margin:36px 0 14px}
.entry-content h3{font-size:23px;margin:28px 0 12px}
.entry-content ul,.entry-content ol{margin:0 0 20px 22px}
.entry-content li{margin-bottom:8px}
.entry-content a{color:var(--orange);text-decoration:underline}
.entry-content img{border-radius:12px;margin:20px 0}
.entry-content blockquote{border-left:4px solid var(--orange);background:var(--card);padding:18px 24px;margin:24px 0;border-radius:0 10px 10px 0;color:#fff}
.entry-content code{background:var(--card);padding:2px 7px;border-radius:5px;font-size:15px}
.post-header{margin-bottom:30px}
.post-header .meta{color:var(--orange);font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:1px;font-size:14px;margin-bottom:12px}
.featured-img{border-radius:16px;overflow:hidden;margin-bottom:34px;border:1px solid var(--line)}

/* pagination */
.pagination{display:flex;gap:10px;justify-content:center;margin-top:50px;flex-wrap:wrap}
.pagination .page-numbers{display:grid;place-items:center;min-width:44px;height:44px;padding:0 10px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-family:'Oswald',sans-serif}
.pagination .page-numbers.current,.pagination .page-numbers:hover{background:var(--orange);color:#111;border-color:var(--orange)}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.contact-info .ci{display:flex;gap:16px;margin-bottom:24px;align-items:flex-start}
.contact-info .ci .ico{width:50px;height:50px;flex-shrink:0;border-radius:12px;background:rgba(255,106,26,.12);color:var(--orange);display:grid;place-items:center}
.contact-info .ci b{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:15px;letter-spacing:1px;display:block;margin-bottom:4px}
.contact-info .ci span{color:var(--muted)}
.contact-form{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:32px}
.contact-form label{display:block;font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:13px;letter-spacing:1px;margin-bottom:8px;color:#fff}
.contact-form .field{margin-bottom:20px}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:13px 15px;color:var(--text);font-family:'Inter',sans-serif;font-size:15px}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--orange)}
.contact-form textarea{min-height:130px;resize:vertical}
.form-note{padding:14px 18px;border-radius:8px;margin-bottom:20px;font-size:15px}
.form-note.ok{background:rgba(46,160,67,.15);border:1px solid #2ea043;color:#8ff0a4}
.form-note.err{background:rgba(224,86,86,.15);border:1px solid #e05656;color:#ffb3b3}

/* footer */
.site-footer{background:#0a0c0f;border-top:1px solid var(--line);padding:60px 0 30px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:34px}
.site-footer h4{font-family:'Oswald',sans-serif;text-transform:uppercase;color:#fff;margin-bottom:16px;letter-spacing:1px}
.site-footer .fcol a,.site-footer .fcol p{color:var(--muted);display:block;margin-bottom:9px;font-size:15px}
.site-footer .fcol a:hover{color:var(--orange)}
.fmenu ul{list-style:none;margin:0;padding:0}
.fbottom{border-top:1px solid var(--line);margin-top:40px;padding-top:22px;color:var(--muted);font-size:14px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* comments */
.comments{max-width:820px;margin:60px auto 0}
.comments h3{font-size:24px;margin-bottom:20px}
.comment-list{list-style:none;margin:0 0 30px;padding:0}
.comment-list li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:16px}
.comment-list .fn{color:var(--orange);font-weight:600}
.comment-form input,.comment-form textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:12px;color:var(--text);margin-bottom:14px}

/* wp core */
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.alignright{float:right;margin:0 0 15px 20px}
.alignleft{float:left;margin:0 20px 15px 0}
.wp-caption-text{color:var(--muted);font-size:13px;text-align:center}
.screen-reader-text{position:absolute;left:-9999px}

@media(max-width:900px){
  .hero-grid,.services,.services.cols-4,.why-grid,.steps,.quotes,.fgrid,.blog-grid,.contact-grid{grid-template-columns:1fr}
  .main-nav ul,.phone{display:none}
  .menu-btn{display:block}
  .steps{grid-template-columns:1fr 1fr}
  .services.cols-4{grid-template-columns:1fr 1fr}
  .blog-grid{grid-template-columns:1fr 1fr}
  .cta-band{padding:34px}
}
@media(max-width:600px){
  .steps,.services,.services.cols-4,.blog-grid{grid-template-columns:1fr}
}