/*
Theme Name: Kennington Garage
Theme URI: https://kenningtongarage.uk/
Author: ABS
Description: Faithful rebuild of the live kenningtongarage.uk homepage (same colours, fonts, layout, content and images) with mobile-responsive CSS and SEO fixes: meta description, LocalBusiness structured data, single H1, alt text, no carousel DOM duplication.
Version: 3.3.0
Requires at least: 6.0
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: kennington-garage
*/

/* ===== Tokens taken from the live site's palette ===== */
:root{
  --kg-primary:#B45309;
  --kg-secondary:#fbbf24;
  --kg-heading:#1E293B;
  --kg-body:#475569;
  --kg-h6:#062a26;
  --kg-card-bg:#f0f0f0;
  --kg-white:#ffffff;
  --kg-font-heading:'IM Fell Double Pica SC', serif;
  --kg-font-body:'Inter', sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--kg-font-body);
  color:var(--kg-body);
  background:var(--kg-white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
.container{max-width:1240px;margin:0 auto;padding:0 20px;}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}

/* =========================================================
   HEADER — slim yellow topband with inline contacts,
   white main bar with the brand logo + orange CTA
   ========================================================= */
.kg-topband{background:var(--kg-secondary);}
.kg-topband-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px 24px;padding:8px 20px;flex-wrap:wrap;
}
.kg-topband-brand{font-size:13px;font-weight:600;color:#4a2e05;white-space:nowrap;}
.kg-topband-contacts{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.kg-topband-contacts a{
  font-size:13px;font-weight:500;color:#4a2e05;
  display:flex;align-items:center;gap:6px;white-space:nowrap;
}
.kg-topband-contacts a:hover{color:#7c3a06;}
.kg-topband-contacts i{font-size:14px;}

.kg-mainbar{background:#fff;border-bottom:1px solid #eee;}
.kg-mainbar-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:10px 20px;
}
.kg-mainbar .kg-logo img{height:78px;width:auto;display:block;}
.kg-mainbar-actions{display:flex;align-items:center;gap:16px;}
.kg-header-mot{height:58px;width:auto;border-radius:4px;flex:none;}
.kg-cta-btn{
  background:var(--kg-primary);color:#fff;
  font-weight:600;font-size:15px;letter-spacing:.5px;text-transform:capitalize;
  padding:14px 24px 14px 36px;white-space:nowrap;
  clip-path:polygon(18px 0, 100% 0, 100% 100%, 0 100%);
}
.kg-cta-btn:hover{background:#92400e;color:#fff;}

/* =========================================================
   HERO — full-width cover, left content, MOT badge bottom right
   ========================================================= */
.kg-hero{position:relative;min-height:700px;display:flex;align-items:center;background:var(--kg-heading);}
.kg-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 100%;}
.kg-hero-inner{position:relative;z-index:1;display:flex;align-items:center;width:100%;min-height:700px;}
.kg-hero-content{flex:0 0 45%;padding:40px 0;}
.kg-welcome{
  display:inline-block;background:var(--kg-primary);color:#fff;
  font-size:13px;font-weight:500;text-transform:uppercase;
  padding:7px 10px;margin:0;
}
.kg-hero h1{
  font-family:var(--kg-font-heading);font-weight:400;
  color:#fff;font-size:42px;line-height:1.15;margin:14px 0 10px;
}
.kg-hero h1 .amp{color:var(--kg-primary);}
.kg-hero-list{color:#fff;font-size:16px;margin:0;}
.kg-hero-list .caps{text-transform:uppercase;}
.kg-hero-list p{margin:0 0 14px;}
.kg-hero-badge{flex:1;display:flex;justify-content:flex-end;align-items:flex-end;align-self:flex-end;padding-bottom:40px;}
.kg-hero-badge img{width:244px;height:auto;}
.kg-hero-lottie{
  position:absolute;right:4%;bottom:6%;top:auto;transform:none;
  width:min(420px,34vw);height:auto;aspect-ratio:1/1;z-index:1;pointer-events:none;
  filter:grayscale(1) brightness(1.4);opacity:.3; /* monochrome, subtle background watermark */
}

/* =========================================================
   SECTION LABEL STRIPS (sub-heads)
   ========================================================= */
.kg-section{padding:60px 0;}
.kg-subhead{
  display:block;width:fit-content;margin:0 auto 40px;
  font-size:20px;font-weight:500;text-transform:uppercase;text-align:center;
  padding:12px 10px;
}
.kg-subhead.yellow{background:var(--kg-secondary);color:#4a2e05;}
.kg-subhead.orange{background:var(--kg-primary);color:#fff;}

/* =========================================================
   SERVICES — grey notched cards, orange ringed icon,
   overlapping notched photo (identical to live), no carousel
   ========================================================= */
.kg-services{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;}
.kg-card{text-align:center;}
.kg-card-top{
  background:var(--kg-card-bg);
  clip-path:polygon(80% 0, 100% 20%, 100% 100%, 0 100%, 0 0);
  padding:0 32px 100px;
  transition:background-color .2s ease;
}
.kg-icon-wrap{
  width:70px;height:70px;border-radius:50%;
  background:var(--kg-primary);
  display:flex;justify-content:center;align-items:center;
  margin:32px auto 24px;position:relative;
  transition:background-color .2s ease;
}
.kg-icon-wrap i{color:#fff;font-size:32px;transition:color .2s ease;}
.kg-card-title{
  font-family:var(--kg-font-body);font-size:26px;font-weight:500;
  color:#000;margin:8px 0;transition:color .2s ease;
}
.kg-card-desc{margin:0;color:var(--kg-body);transition:color .2s ease;}
.kg-card-img{padding:0 24px;}
.kg-card-img img{
  width:100%;height:170px;object-fit:cover;display:block;
  margin-top:-100px;
  clip-path:polygon(80% 0, 100% 30%, 100% 100%, 0 100%, 0 0);
}
.kg-card:hover .kg-card-top{background:var(--kg-primary);}
.kg-card:hover .kg-icon-wrap{background:#fff;}
.kg-card:hover .kg-icon-wrap i{color:var(--kg-primary);}
.kg-card:hover .kg-card-title,
.kg-card:hover .kg-card-title a,
.kg-card:hover .kg-card-desc{color:#fff;}

/* =========================================================
   GALLERY — same 4 photos, tiled row like Jetpack gallery
   ========================================================= */
.kg-gallery{display:flex;gap:4px;}
.kg-gallery figure{margin:0;overflow:hidden;}
.kg-gallery img{width:100%;height:250px;object-fit:cover;display:block;}
.kg-g1{flex-basis:32.3%;}
.kg-g2{flex-basis:25%;}
.kg-g3{flex-basis:21.5%;}
.kg-g4{flex-basis:21.2%;}

.kg-separator{border:none;border-top:1px solid #e5e7eb;max-width:1240px;margin:50px auto;}

/* =========================================================
   MAP
   ========================================================= */
.kg-map{width:100%;height:450px;border:0;display:block;}

/* =========================================================
   FOOTER — photo cover with dark overlay, 3 columns with
   orange chip headings, white copyright bar
   ========================================================= */
.kg-footer-cover{position:relative;min-height:303px;padding:50px 0 30px;}
.kg-footer-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:61% 47%;}
.kg-footer-cover::after{content:"";position:absolute;inset:0;background:var(--kg-heading);opacity:.5;}
.kg-footer-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:30px;
  color:#fff;
}
.kg-footer-head{
  display:inline-block;background:var(--kg-primary);color:#fff;
  font-family:var(--kg-font-body);font-size:20px;font-weight:600;
  letter-spacing:1px;text-transform:capitalize;
  padding:6px 14px;margin:0 0 16px;
}
.kg-footer-grid p, .kg-footer-grid li{color:#fff;font-size:15px;margin:0 0 8px;}
.kg-footer-grid ul{list-style:none;margin:0;padding:0;}
.kg-footer-grid a:hover{color:var(--kg-secondary);}

.kg-copyright{background:#fff;text-align:center;padding:14px 20px;}
.kg-copyright p{margin:0;color:#000;font-weight:500;font-size:18px;}

/* =========================================================
   Inner pages (booking page etc.)
   ========================================================= */
.kg-page{padding:50px 0;}
.kg-page h1{font-family:var(--kg-font-heading);font-weight:400;color:var(--kg-heading);}

/* =========================================================
   RESPONSIVE — the part the original theme got wrong
   ========================================================= */
@media (max-width:960px){
  .kg-topband-row{justify-content:center;}
  .kg-topband-brand{width:100%;text-align:center;}
  .kg-topband-contacts{justify-content:center;}

  .kg-hero{min-height:0;}
  .kg-hero-inner{flex-direction:column;align-items:flex-start;min-height:0;padding:48px 0 32px;}
  .kg-hero-content{flex:1 1 auto;padding:0;}
  .kg-hero-badge{align-self:flex-end;padding:24px 0 0;}
  .kg-hero-badge img{width:150px;}
  .kg-hero-lottie{display:none;} /* decorative — hidden on tablet/phone to keep the hero clean */

  .kg-gallery{flex-wrap:wrap;}
  .kg-g1,.kg-g2,.kg-g3,.kg-g4{flex-basis:calc(50% - 2px);}
  .kg-gallery img{height:220px;}
}

@media (max-width:640px){
  .kg-topband-contacts{flex-direction:column;gap:5px;}
  .kg-mainbar-row{flex-wrap:wrap;justify-content:center;}
  .kg-mainbar .kg-logo img{height:56px;}
  .kg-header-mot{height:44px;}
  .kg-cta-btn{font-size:14px;padding:12px 20px 12px 30px;}

  .kg-hero h1{font-size:30px;}
  .kg-hero-list{font-size:15px;}
  .kg-subhead{font-size:16px;margin-bottom:28px;}
  .kg-section{padding:44px 0;}

  .kg-services{grid-template-columns:1fr;}
  .kg-card-top{padding:0 22px 90px;}
  .kg-card-img img{margin-top:-80px;}
  .kg-card-title{font-size:22px;}

  .kg-g1,.kg-g2,.kg-g3,.kg-g4{flex-basis:100%;}
  .kg-gallery img{height:200px;}

  .kg-map{height:350px;}
  .kg-copyright p{font-size:14px;}
}