/*
Theme Name: Paddy's Mobile
Theme URI: https://paddysmobile.com
Author: Paddy's Mobile
Description: Custom lightweight theme for Paddy's Mobile, a mobile mechanic serving Fargo, ND and the surrounding area. Built for speed and local SEO. Replace all placeholder images and the phone number in functions.php before launch.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: paddys-mobile
*/

:root{
  --navy:#0f1b2b;
  --navy-2:#16283f;
  --orange:#ff6a1a;
  --orange-dark:#e0570e;
  --off-white:#f6f7f9;
  --gray:#5c6773;
  --border:#e3e6ea;
  --radius:10px;
  --maxw:1160px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#1c2530;
  background:#fff;
  line-height:1.6;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--orange-dark);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em;color:var(--navy);}
p{margin:0 0 1em;}
ul{margin:0 0 1em;padding-left:1.2em;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px;}
.btn{
  display:inline-block;
  background:var(--orange);
  color:#fff;
  padding:14px 28px;
  border-radius:6px;
  font-weight:700;
  font-size:1.05em;
  border:none;
  cursor:pointer;
}
.btn:hover{background:var(--orange-dark);color:#fff;text-decoration:none;}
.btn-outline{
  display:inline-block;
  background:transparent;
  border:2px solid #fff;
  color:#fff;
  padding:12px 26px;
  border-radius:6px;
  font-weight:700;
}
.btn-outline:hover{background:#fff;color:var(--navy);text-decoration:none;}

/* ---------- Top bar ---------- */
.topbar{
  background:var(--navy);
  color:#cfd8e3;
  font-size:.85em;
  padding:8px 0;
}
.topbar .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;}
.topbar a{color:#fff;font-weight:600;}

/* ---------- Header ---------- */
.site-header{
  background:#fff;
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50;
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:14px;padding-bottom:14px;
}
.site-logo{font-size:1.4em;font-weight:800;color:var(--navy);letter-spacing:.2px;}
.site-logo span{color:var(--orange);}
.main-nav ul{
  list-style:none;margin:0;padding:0;display:flex;gap:26px;align-items:center;
}
.main-nav a{color:var(--navy);font-weight:600;}
.main-nav a:hover{color:var(--orange-dark);text-decoration:none;}
.header-cta{
  background:var(--orange);color:#fff;padding:10px 18px;border-radius:6px;font-weight:700;
}
.header-cta:hover{background:var(--orange-dark);color:#fff;text-decoration:none;}
.nav-toggle{display:none;background:none;border:none;font-size:1.6em;cursor:pointer;color:var(--navy);}

@media(max-width:820px){
  .main-nav{display:none;width:100%;order:3;}
  .main-nav.open{display:block;}
  .main-nav ul{flex-direction:column;align-items:flex-start;gap:14px;padding:16px 0;}
  .site-header .container{flex-wrap:wrap;}
  .nav-toggle{display:block;}
}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%);
  color:#fff;padding:70px 0 60px;
}
.hero .container{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;}
.hero h1{color:#fff;font-size:2.4em;margin-bottom:.4em;}
.hero p.lead{font-size:1.15em;color:#dbe2ea;max-width:560px;}
.hero-cta-row{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap;}
.hero-badges{display:flex;gap:22px;margin-top:28px;flex-wrap:wrap;color:#b9c4d1;font-size:.92em;}
.hero-badges strong{color:#fff;display:block;font-size:1.3em;}
.hero-image img{border-radius:var(--radius);box-shadow:0 20px 40px rgba(0,0,0,.35);}
@media(max-width:820px){.hero .container{grid-template-columns:1fr;}.hero{padding:44px 0;}.hero h1{font-size:1.8em;}}

/* ---------- Sections ---------- */
.section{padding:64px 0;}
.section-alt{background:var(--off-white);}
.section-head{text-align:center;max-width:680px;margin:0 auto 40px;}
.eyebrow{color:var(--orange-dark);font-weight:700;text-transform:uppercase;font-size:.82em;letter-spacing:1px;}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:46px;align-items:center;}
.about-grid img{border-radius:var(--radius);}
@media(max-width:820px){.about-grid{grid-template-columns:1fr;}}

/* ---------- Services grid ---------- */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.service-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:26px 22px;text-align:left;transition:.2s;
}
.service-card:hover{border-color:var(--orange);box-shadow:0 10px 24px rgba(0,0,0,.06);}
.service-card .icon{font-size:1.8em;margin-bottom:10px;}
.service-card h3{font-size:1.1em;margin-bottom:.4em;}
.service-card a.card-link{font-weight:700;font-size:.92em;}
@media(max-width:960px){.services-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.services-grid{grid-template-columns:1fr;}}

.service-detail{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-bottom:20px;}
.service-detail img{border-radius:var(--radius);}
@media(max-width:820px){.service-detail{grid-template-columns:1fr;}}

.why-list{list-style:none;padding:0;margin:18px 0;}
.why-list li{padding-left:30px;position:relative;margin-bottom:10px;}
.why-list li:before{content:"✔";position:absolute;left:0;color:var(--orange-dark);font-weight:700;}

.other-services{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:30px;}
.other-services ul{
  list-style:none;padding:0;margin:0;
  columns:3;column-gap:24px;
}
.other-services li{padding:6px 0;border-bottom:1px dashed var(--border);break-inside:avoid;}
@media(max-width:820px){.other-services ul{columns:2;}}
@media(max-width:560px){.other-services ul{columns:1;}}

/* ---------- Areas ---------- */
.areas-list ul{list-style:none;padding:0;margin:0;columns:4;column-gap:24px;}
.areas-list li{padding:5px 0;break-inside:avoid;}
@media(max-width:820px){.areas-list ul{columns:2;}}

/* ---------- Reviews ---------- */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.review-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px;}
.stars{color:#f5a623;letter-spacing:2px;margin-bottom:8px;}
@media(max-width:820px){.reviews-grid{grid-template-columns:1fr;}}

/* ---------- CTA banner ---------- */
.cta-banner{background:var(--orange);color:#fff;padding:42px 0;text-align:center;}
.cta-banner h2{color:#fff;}
.cta-banner .btn-outline{margin-top:10px;}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.contact-card{background:var(--navy);color:#fff;border-radius:var(--radius);padding:30px;}
.contact-card h3{color:#fff;}
.contact-card a{color:#fff;}
.contact-card .row{margin-bottom:14px;}
.map-embed iframe{width:100%;height:100%;min-height:320px;border:0;border-radius:var(--radius);}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;}}

/* ---------- Text page (service/location pages default content) ---------- */
.page-hero{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%);
  color:#fff;padding:50px 0;text-align:center;
}
.page-hero h1{color:#fff;margin-bottom:.3em;}
.page-hero p{color:#dbe2ea;max-width:640px;margin:0 auto;}
.content-section{padding:50px 0;}
.content-section .container{max-width:900px;}
.content-section h2{margin-top:1.4em;}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy);color:#b9c4d1;padding:50px 0 20px;margin-top:0;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;}
.site-footer h4{color:#fff;font-size:1em;margin-bottom:.8em;}
.site-footer ul{list-style:none;padding:0;margin:0;}
.site-footer li{margin-bottom:8px;}
.site-footer a{color:#b9c4d1;}
.site-footer a:hover{color:#fff;}
.footer-bottom{border-top:1px solid #223349;margin-top:34px;padding-top:18px;font-size:.85em;text-align:center;color:#84909e;}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr;}}

.skip-link{position:absolute;left:-9999px;top:0;background:#fff;padding:10px;z-index:999;}
.skip-link:focus{left:10px;}