/*
Theme Name: Brian's Auto Service - Engine Services
Theme URI: https://enginerepairanaheim.toprankroi.net/
Author: Rolando Cornejo
Description: Single-topic engine services site for Brian's Auto Service in Anaheim, CA. Header, menu and footer route to briansautooc.com. Includes local business, service, FAQ, breadcrumb and article schema, an llms.txt endpoint, and a blog for engine guides.
Version: 5.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: brians-engine
*/

:root{
  --black:#000;
  --steel-dark:#24262a;
  --steel:#b7bcc4;
  --red:#d81e27;
  --red-deep:#b0151d;
  --paper:#f4f4f2;
  --white:#fff;
  --ink:#16181b;
  --muted:#565b63;
  --line:#d9dadd;
  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --body:"Barlow","Segoe UI",Helvetica,Arial,sans-serif;
  --wrap:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--body);font-size:18px;line-height:1.6;color:var(--ink);background:var(--white)}
img{max-width:100%;height:auto;display:block}
a{color:var(--red-deep)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #ffd23f;outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-9999px;top:0;background:var(--white);color:var(--ink);padding:10px 16px;z-index:100}
.skip:focus{left:8px;top:8px}

h1,h2,h3{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:1.02;letter-spacing:.01em;margin:0}
h1{font-size:clamp(2.7rem,7vw,5rem)}
h2{font-size:clamp(2rem,4.4vw,3.1rem);margin-bottom:.45em}
h3{font-size:1.45rem;font-weight:700;margin-bottom:.3em}
p{margin:0 0 1em}
.lead{font-size:1.2rem;max-width:62ch}
.measure{max-width:68ch}

.btn{display:inline-block;font-family:var(--display);font-weight:700;font-size:1.25rem;text-transform:uppercase;letter-spacing:.03em;text-decoration:none;padding:.6em 1.15em;border-radius:3px;border:2px solid transparent}
.btn-red{background:var(--red);color:var(--white)}
.btn-red:hover{background:var(--red-deep)}
.btn-line{border-color:var(--white);color:var(--white)}
.btn-line:hover{background:var(--white);color:var(--black)}
.btn-dark{background:var(--black);color:var(--white)}
.btn-dark:hover{background:var(--steel-dark)}

/* utility bar */
.util{background:var(--red);color:var(--white);font-size:.95rem;font-weight:600}
.util .wrap{display:flex;flex-wrap:wrap;gap:4px 22px;justify-content:space-between;padding-top:7px;padding-bottom:7px}
.util a{color:var(--white)}

/* header */
.site-head{background:var(--black);color:var(--white);position:sticky;top:0;z-index:50;border-bottom:1px solid #2c2c2c}
.site-head .wrap{display:flex;align-items:center;gap:18px;min-height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--white);margin-right:auto}
.brand img{width:52px;height:52px;object-fit:contain}
.brand-name{font-family:var(--display);font-weight:800;font-size:1.55rem;text-transform:uppercase;line-height:1;color:var(--steel)}
.brand-name small{display:block;font-size:.8rem;font-weight:600;letter-spacing:.14em;color:var(--white);margin-top:3px}
.nav ul{list-style:none;display:flex;gap:22px;margin:0;padding:0}
.nav a{color:var(--white);text-decoration:none;font-weight:600;font-size:1rem;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--red)}
.head-call{font-size:1.1rem;padding:.45em .9em}
.menu-btn{display:none;background:none;border:2px solid var(--white);color:var(--white);font:600 1rem var(--body);padding:7px 12px;border-radius:3px}
@media (max-width:980px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--black);border-top:1px solid #2c2c2c}
  .nav.open{display:block}
  .nav ul{flex-direction:column;gap:0;padding:8px 22px 16px}
  .nav a{display:block;padding:12px 0;border-bottom:1px solid #2c2c2c}
  .head-call{display:none}
}

/* hero */
.hero{background:var(--black);color:var(--white)}
.hero .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:end;padding-top:54px}
.hero h1{color:var(--white)}
.hero h1 span{display:block;color:var(--steel);font-size:.46em;font-weight:700;letter-spacing:.04em;margin-top:.35em}
.hero-copy{padding-bottom:46px}
.hero .lead{color:#e4e6e9;margin-top:1.1em}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.5em}
.hero figure{margin:0;align-self:end}
.hero figure img{width:100%;max-height:520px;object-fit:cover;object-position:left top;border-radius:4px 4px 0 0}
.strip{background:var(--red);color:var(--white)}
.strip .wrap{display:flex;flex-wrap:wrap;gap:6px 30px;align-items:baseline;padding-top:14px;padding-bottom:14px;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1.3rem,3vw,2rem);line-height:1.1}
.strip a{color:var(--white);text-decoration:none}
.strip a:hover{text-decoration:underline}
.strip .small{font-family:var(--body);font-weight:600;font-size:1rem;text-transform:none;margin-left:auto}
@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr;gap:24px;padding-top:36px}
  .hero-copy{padding-bottom:0}
  .hero figure img{max-height:340px;border-radius:4px}
  .hero figure{padding-bottom:26px}
  .strip .small{margin-left:0}
}

section{padding:72px 0}
.on-paper{background:var(--paper)}
.on-black{background:var(--black);color:var(--white)}
.on-black h2{color:var(--white)}
.on-black a{color:#ff6b72}
@media (max-width:700px){section{padding:52px 0}}

/* quick answer */
.answer{border-left:8px solid var(--red);padding:6px 0 6px 26px}
.answer p{font-size:1.3rem;line-height:1.5;max-width:60ch;margin:0}

/* signs */
.signs{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 44px}
.signs li{padding:18px 0;border-top:1px solid var(--line)}
.signs strong{display:block;font-family:var(--display);font-size:1.4rem;text-transform:uppercase;font-weight:700;line-height:1.15}
.signs span{color:var(--muted)}
@media (max-width:700px){.signs{grid-template-columns:1fr}}

/* cascade diagram */
.cascade{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:end;counter-reset:step}
.cascade li{counter-increment:step;background:var(--steel-dark);color:var(--white);padding:16px 16px 18px;border-top:6px solid var(--red);border-radius:3px;display:flex;flex-direction:column;justify-content:flex-end}
.cascade li:nth-child(1){min-height:185px;border-top-color:#8a8f97}
.cascade li:nth-child(2){min-height:232px;border-top-color:#c98a2b}
.cascade li:nth-child(3){min-height:279px;border-top-color:#d8632a}
.cascade li:nth-child(4){min-height:326px;border-top-color:#d83a27}
.cascade li:nth-child(5){min-height:373px;background:var(--red);border-top-color:var(--white)}
.cascade li::before{content:"Stage " counter(step);font-weight:600;font-size:.9rem;color:var(--steel);margin-bottom:auto}
.cascade li:nth-child(5)::before{color:var(--white)}
.cascade b{font-family:var(--display);font-size:1.4rem;text-transform:uppercase;line-height:1.1;display:block;margin:14px 0 6px}
.cascade span{font-size:.97rem;line-height:1.45;color:#e4e6e9}
.cascade em{font-style:normal;display:block;margin-top:10px;font-weight:700;font-size:.95rem;color:var(--white)}
.cascade-note{margin-top:22px;color:#c9ccd1;max-width:70ch}
@media (max-width:900px){
  .cascade{grid-template-columns:1fr;align-items:stretch}
  .cascade li{min-height:0 !important}
  .cascade li::before{margin-bottom:0}
}

/* benefits */
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:30px}
.benefits div{border-top:4px solid var(--black);padding-top:14px}
.benefits p{color:var(--muted);margin:0}
@media (max-width:900px){.benefits{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.benefits{grid-template-columns:1fr}}

/* two column */
.split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:start}
.split img{border-radius:4px;width:100%}
@media (max-width:820px){.split{grid-template-columns:1fr;gap:28px}}
.checks{list-style:none;margin:18px 0 0;padding:0}
.checks li{padding:11px 0 11px 30px;border-top:1px solid var(--line);position:relative}
.checks li::before{content:"";position:absolute;left:2px;top:19px;width:14px;height:8px;border-left:3px solid var(--red);border-bottom:3px solid var(--red);transform:rotate(-45deg)}
.on-black .checks li{border-top-color:#333}

/* area */
.counties{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:28px}
.counties div{background:var(--white);border:1px solid var(--line);border-left:6px solid var(--red);padding:16px 18px;border-radius:3px}
.counties p{margin:0;color:var(--muted);font-size:1rem}
@media (max-width:900px){.counties{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.counties{grid-template-columns:1fr}}

/* guides */
.guides{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:30px}
.guides article{border-top:4px solid var(--red);padding-top:16px}
.guides p{font-size:1.02rem}
@media (max-width:900px){.guides{grid-template-columns:1fr}}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.gallery figure{margin:0;background:var(--steel-dark);border-radius:3px;overflow:hidden}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{color:#e4e6e9;font-size:.92rem;padding:9px 12px}
@media (max-width:700px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* faq */
.faq details{border-top:1px solid var(--line);padding:16px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:700;font-size:1.15rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:1.7rem;line-height:1;color:var(--red)}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin:10px 0 0;max-width:68ch;color:var(--muted)}

/* visit */
.visit dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 22px}
.visit dt{font-weight:700;color:var(--steel)}
.visit dd{margin:0}
.visit a{color:var(--white)}

/* footer */
.site-foot{background:var(--black);color:#c9ccd1;border-top:6px solid var(--red);padding:48px 0 96px;font-size:1rem}
.site-foot .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
.site-foot h2{font-size:1.3rem;color:var(--white);margin-bottom:.6em}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:7px}
.site-foot a{color:var(--white)}
.site-foot .fine{grid-column:1/-1;border-top:1px solid #2c2c2c;padding-top:18px;font-size:.92rem}
@media (max-width:820px){.site-foot .wrap{grid-template-columns:1fr}}
@media (min-width:701px){.site-foot{padding-bottom:48px}}

/* mobile call bar */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;grid-template-columns:1fr 1fr;background:var(--black);border-top:2px solid var(--red)}
.callbar a{font-family:var(--display);font-weight:700;font-size:1.2rem;text-transform:uppercase;text-align:center;text-decoration:none;color:var(--white);padding:13px 8px}
.callbar a:first-child{background:var(--red)}
@media (max-width:700px){.callbar{display:grid}}

/* WordPress additions */
.admin-bar .site-head{top:32px}
@media (max-width:782px){.admin-bar .site-head{top:46px}}
@media (max-width:600px){.admin-bar .site-head{top:0}}
.brand .custom-logo{width:52px;height:52px;object-fit:contain}
.page-head{background:var(--black);color:var(--white);padding:54px 0 40px;border-bottom:6px solid var(--red)}
.page-head h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.page-head p{color:var(--steel);margin:.8em 0 0}
.content{max-width:760px;margin:0 auto;padding:54px 22px 72px}
.content h2{font-size:2rem;margin-top:1.4em}
.content h3{margin-top:1.2em}
.content img{border-radius:4px}
.content .wp-block-gallery{margin:1.5em 0}
.post-list{list-style:none;margin:0;padding:0}
.post-list li{border-top:4px solid var(--red);padding:18px 0 30px}
.post-list h2{font-size:1.9rem;margin-bottom:.2em}
.post-list h2 a{color:var(--ink);text-decoration:none}
.post-list h2 a:hover{color:var(--red-deep)}
.post-meta{color:var(--muted);font-size:.95rem;margin-bottom:.8em}
.post-nav{display:flex;justify-content:space-between;gap:20px;margin-top:40px;font-weight:600}
.post-cta{background:var(--paper);border-left:8px solid var(--red);padding:22px 26px;margin-top:44px}
.post-cta p{margin:0 0 14px}
.guides h3 a{color:var(--ink);text-decoration:none}
.guides h3 a:hover{color:var(--red-deep)}
.screen-reader-text{position:absolute;left:-9999px}

/* video clips */
.clip{display:block;width:100%;height:auto;border-radius:4px;background:var(--black)}
.gallery .clip{aspect-ratio:4/3;object-fit:cover;border-radius:0}

/* gallery: 4 across on desktop */
@media (min-width:901px){.gallery{grid-template-columns:repeat(4,1fr)}}

/* v4: landscape shop photo in the hero */
.hero .wrap{grid-template-columns:1fr 1fr;align-items:center;padding-bottom:46px}
.hero-copy{padding-bottom:0}
.hero figure{align-self:center}
.hero figure img{max-height:none;object-fit:cover;border-radius:4px}
@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr;padding-bottom:30px}
  .hero figure{padding-bottom:0}
  .hero figure img{max-height:none}
}