/*
Theme Name: Southern Repair & Maintenance
Theme URI: https://example.com/
Author: Southern Repair and Maintenance
Description: Heavy-duty truck and trailer shop theme. Trucking-native visual language — DOT conspicuity tape dividers, hi-vis red call-to-action and chrome-blue accents on charcoal, monospace diagnostic readouts. Built to pair with the FleetOps Site plugin, which supplies the front-page sections and the service-request form.
Version: 1.0.3
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: southern-repair
Tags: business, custom-menu, custom-logo, one-column, dark
*/

/* =========================================================================
   This theme owns the DESIGN SYSTEM and the CHROME:
   tokens, reset, typography, utility bar, nav, buttons, tape divider,
   section frame, footer, reveal animation.

   The FleetOps Site plugin owns the front-page SECTIONS (hero, services,
   checklist, wiring, trust, contact form) and ships its own stylesheet that
   consumes the custom properties declared here — with fallbacks, so those
   sections still render correctly under a different theme.
   ========================================================================= */


:root{
  /* Base — cooled slightly toward navy so the logo's blue reads as native. */
  --asphalt:#10151d;
  --asphalt-2:#161d28;
  --steel:#1f2a38;
  --steel-line:#2c3a4b;
  --ink:#eef2f7;
  --muted:#93a2b3;
  --muted-2:#6d7c8c;

  /* Accent system, tuned to the logo.
     --blue is the primary brand accent (the chrome-royal script);
     --red is the hi-vis call-to-action (the flag red in the logo). */
  --blue:#4b8df6;
  --blue-deep:#2f6fe0;
  --red:#d8332c;
  --red-deep:#b7241f;

  /* Back-compat: the FleetOps plugin consumes var(--amber); it now maps to the
     blue accent, so every plugin accent picks up the new scheme automatically.
     Buttons opt out and use --red explicitly. */
  --amber:var(--blue);
  --amber-deep:var(--blue-deep);

  --tape-red:#c8262c;
  --tape-white:#f3f3ef;
  --ok:#3ac07a;
  --maxw:1180px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--asphalt);
  color:var(--ink);
  font-family:"Saira",system-ui,sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

.mono{font-family:"JetBrains Mono",monospace}
.cond{font-family:"Saira Condensed",sans-serif}


/* ---------- DOT conspicuity tape (signature element) ---------- */
.tape{
  height:18px;
  background:repeating-linear-gradient(
    114deg,
    var(--tape-red) 0 36px,
    var(--tape-white) 36px 72px
  );
  position:relative;
  overflow:hidden;
}
.tape::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 45%,rgba(0,0,0,.25));
  pointer-events:none;
}
.tape--thin{height:10px}


/* ---------- top utility bar ---------- */
.util{
  background:#0f1216;
  border-bottom:1px solid var(--steel-line);
  font-size:.8rem;
}
.util .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;height:42px}
.util-left{display:flex;gap:22px;align-items:center;color:var(--muted)}
.util-left .dot{color:var(--ok)}
.util a.phone{color:var(--ink);letter-spacing:.04em}
.util a.phone:hover{color:var(--amber)}
@media(max-width:720px){.util-left span.hide{display:none}}


/* ---------- nav ---------- */
header.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(20,24,28,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--steel-line);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;min-height:70px;gap:18px}
.brand{display:flex;align-items:center;gap:12px}

/* Custom logo — constrain the uploaded image to the bar. Without this a large
   upload renders at its natural pixel size and spills over the hero. */
.brand--logo{padding:6px 0}
.brand .custom-logo-link{display:block;line-height:0}
.brand img.custom-logo{height:48px;width:auto;max-width:clamp(150px,42vw,320px);object-fit:contain}
@media(max-width:430px){.brand img.custom-logo{height:38px;max-width:52vw}}

.brand .mark{
  width:38px;height:38px;flex:none;border-radius:4px;
  background:var(--red);
  display:grid;place-items:center;
  color:#fff;font-family:"Saira Condensed";font-weight:800;font-size:1.5rem;line-height:1;
  box-shadow:0 0 0 1px rgba(0,0,0,.4) inset;
}
.brand .name{font-family:"Saira Condensed";font-weight:800;font-size:1.45rem;letter-spacing:.04em;line-height:.95}
.brand .name small{display:block;font-family:"JetBrains Mono";font-weight:500;font-size:.58rem;letter-spacing:.32em;color:var(--muted);margin-top:3px}
nav.menu{display:flex;gap:30px;align-items:center}
nav.menu a{font-weight:500;font-size:.92rem;color:var(--muted);letter-spacing:.02em;transition:color .2s}
nav.menu a:hover{color:var(--ink)}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:"Saira Condensed";font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  font-size:.95rem;
  padding:12px 22px;border-radius:3px;cursor:pointer;border:none;
  transition:transform .15s var(--ease),background .2s,box-shadow .2s;
}
.btn--amber{background:var(--red);color:#fff;box-shadow:0 6px 18px -8px rgba(216,51,44,.6)}
.btn--amber:hover{background:#e8463d;transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--steel-line)}
.btn--ghost:hover{border-color:var(--amber);color:var(--amber)}
.nav .btn{padding:10px 18px}

/* Customer portal link — sits in the nav beside the CTA on desktop,
   drops into the menu panel on mobile. */
nav.menu a.nav-portal{
  display:inline-flex;align-items:center;gap:7px;
  font-family:"Saira Condensed";font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  font-size:.9rem;color:var(--muted);
}
nav.menu a.nav-portal:hover{color:var(--amber)}
nav.menu a.nav-portal svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:860px){nav.menu{display:none}}
@media(max-width:430px){
  .nav .wrap{height:62px}
  .brand .name{font-size:1.2rem}
  .brand .mark{width:32px;height:32px;font-size:1.25rem}
  .nav .btn{padding:9px 13px;font-size:.82rem}
}


/* ---------- shared section frame ---------- */

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:"JetBrains Mono";font-size:.72rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  color:var(--amber);margin-bottom:22px;
}

/* ---------- section frame ---------- */
.section{padding:88px 0}
.section-head{max-width:62ch;margin-bottom:52px}
.section-head .eyebrow{margin-bottom:16px}
.section-head h2{
  font-family:"Saira Condensed";font-weight:800;text-transform:uppercase;
  font-size:clamp(2rem,4.5vw,3.2rem);line-height:.98;letter-spacing:.01em;
}
.section-head p{margin-top:16px;color:var(--muted);font-size:1.06rem;max-width:58ch}


/* ---------- footer ---------- */
footer.site{background:#0f1216;border-top:1px solid var(--steel-line);padding:54px 0 26px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:28px}}
.foot-grid p{color:var(--muted);font-size:.92rem;margin-top:14px;max-width:38ch}
.foot-col h5{font-family:"JetBrains Mono";font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin-bottom:16px}
.foot-col a{display:block;color:var(--muted);font-size:.95rem;padding:5px 0;transition:color .2s}
.foot-col a:hover{color:var(--amber)}
.foot-bottom{margin-top:40px;padding-top:22px;border-top:1px solid var(--steel-line);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--muted-2);font-size:.82rem;font-family:"JetBrains Mono";letter-spacing:.04em}


/* ---------- footer ---------- */
footer.site{background:#0f1216;border-top:1px solid var(--steel-line);padding:54px 0 26px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:28px}}
.foot-grid p{color:var(--muted);font-size:.92rem;margin-top:14px;max-width:38ch}
.foot-col h5{font-family:"JetBrains Mono";font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin-bottom:16px}
.foot-col a{display:block;color:var(--muted);font-size:.95rem;padding:5px 0;transition:color .2s}
.foot-col a:hover{color:var(--amber)}
.foot-bottom{margin-top:40px;padding-top:22px;border-top:1px solid var(--steel-line);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--muted-2);font-size:.82rem;font-family:"JetBrains Mono";letter-spacing:.04em}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .svc,.btn{transition:none}
}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* =========================================================================
   WordPress content defaults
   ========================================================================= */

.page-wrap{max-width:var(--maxw);margin:0 auto;padding:64px 28px 80px}
.page-wrap h1,.page-wrap h2,.page-wrap h3{font-family:"Saira Condensed",sans-serif;font-weight:800;letter-spacing:-.01em;line-height:1.1}
.page-wrap h1{font-size:clamp(2rem,4vw,3rem);margin-bottom:18px}
.page-wrap h2{font-size:1.6rem;margin:34px 0 12px}
.page-wrap h3{font-size:1.25rem;margin:26px 0 10px}
.page-wrap p,.page-wrap li{color:var(--muted);margin-bottom:14px}
.page-wrap a{color:var(--amber);text-decoration:underline;text-underline-offset:3px}
.page-wrap ul,.page-wrap ol{margin:0 0 16px 22px}
.page-wrap blockquote{border-left:3px solid var(--amber);padding-left:18px;margin:22px 0;color:var(--ink)}
.page-wrap code,.page-wrap pre{font-family:"JetBrains Mono",monospace;font-size:.9em}
.page-wrap pre{background:var(--asphalt-2);border:1px solid var(--steel-line);border-radius:8px;padding:16px;overflow:auto}
.page-wrap img{border-radius:8px}
.page-wrap table{width:100%;border-collapse:collapse;margin-bottom:18px}
.page-wrap th,.page-wrap td{border:1px solid var(--steel-line);padding:10px 12px;text-align:left}
.page-wrap th{background:var(--steel);font-family:"JetBrains Mono",monospace;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em}

.entry-meta{font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:24px}
.entry-list article{border-bottom:1px solid var(--steel-line);padding:26px 0}
.entry-list article:last-child{border-bottom:0}
.entry-list h2{margin-top:0}

.pagination{display:flex;gap:10px;margin-top:32px;font-family:"JetBrains Mono",monospace;font-size:.8rem}
.pagination .page-numbers{padding:8px 14px;border:1px solid var(--steel-line);border-radius:6px;color:var(--muted)}
.pagination .page-numbers.current,.pagination .page-numbers:hover{border-color:var(--amber);color:var(--amber)}

/* Accessibility helpers */
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);
  height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;word-wrap:normal;
}
.skip-link:focus{
  position:fixed;top:10px;left:10px;z-index:999;
  background:var(--red);color:#fff;padding:10px 16px;border-radius:6px;
  font-family:"JetBrains Mono",monospace;font-size:.8rem;font-weight:700;clip-path:none;width:auto;height:auto;
}

/* Alignment classes WordPress expects */
.alignleft{float:left;margin:0 20px 16px 0}
.alignright{float:right;margin:0 0 16px 20px}
.aligncenter{display:block;margin:0 auto 16px}
.alignwide,.alignfull{max-width:none}
.wp-caption-text,.wp-element-caption{font-size:.82rem;color:var(--muted-2);margin-top:6px}

/* Nav fallback when no menu is assigned */
nav.menu ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
nav.menu li{list-style:none}

/* Mobile menu toggle */
.nav-toggle{
  display:none;background:none;border:1px solid var(--steel-line);border-radius:6px;
  color:var(--ink);padding:8px 10px;cursor:pointer;line-height:0;
}
.nav-toggle svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
@media(max-width:860px){
  .nav-toggle{display:inline-flex}
  nav.menu{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--asphalt-2);border-bottom:1px solid var(--steel-line);
    padding:16px 28px 22px;
  }
  nav.menu.open{display:block}
  nav.menu ul{flex-direction:column;gap:0}
  nav.menu a{display:block;padding:12px 0;border-bottom:1px solid var(--steel-line)}
  nav.menu li:last-child a{border-bottom:0}
  nav.menu a.nav-portal{display:flex;margin-top:8px;padding:14px 0 2px;border-top:1px solid var(--steel-line);color:var(--ink);font-size:1rem}
  header.nav .wrap{position:relative}
}