/*
Theme Name: CJW Auto Electric
Theme URI: https://687f7783a420e.site123.me/
Author: CJW Auto Electric cc
Description: One-page theme for CJW Auto Electric: ECMs, ECUs and harness rebuilds for heavy equipment. Upload the logo under Appearance > Customize > Site Identity.
Version: 1.0.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: cjw-auto-electric
*/

/* Base reset (WordPress has no page skeleton of its own) */
html, body { margin: 0; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
/* Layout: one long single-page site on white bands; black is kept for the logo, the hero data plate and the footer. Safety yellow fills, darker amber for yellow text. */
:root {
  --ink: #f6f6f3;          /* page background, near white */
  --plate: #ffffff;        /* raised surface */
  --steel: #dddad0;        /* rules, borders */
  --dust: #5d584b;         /* secondary text */
  --chalk: #16140f;        /* primary text */
  --night: #0d0c0a;        /* black from the logo */
  --yellow: #f5b21b;       /* safety yellow from the logo (fills) */
  --amber: #946300;        /* yellow for text on white */
  --yellow-ink: #1a1405;   /* text on yellow */
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--ink); color: var(--chalk); font-family: var(--body); font-size: 18px; line-height: 1.55; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--ink); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); text-transform: uppercase; line-height: .95; margin: 0; text-wrap: balance; letter-spacing: .01em; }
h2 { font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight: 900; }
h3 { font-size: 1.6rem; font-weight: 800; }
p { margin: 0; }
.wrap { max-width: 1160px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.band { padding-block: clamp(56px, 9vw, 104px); border-top: 1px solid var(--steel); }
.eyebrow { font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.lede { color: var(--dust); max-width: 60ch; font-size: 1.1rem; }
.head { display: grid; gap: 14px; margin-bottom: 40px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--body); font-weight: 700; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; padding: 14px 22px; border: 2px solid var(--yellow); cursor: pointer; transition: transform .15s, background .15s; }
.btn-solid { background: var(--yellow); color: var(--yellow-ink); }
.btn-line { background: transparent; color: var(--chalk); border-color: var(--chalk); }
.btn:hover { transform: translateY(-2px); }
.btn-line:hover { background: var(--plate); }

/* Header */
header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: color-mix(in srgb, var(--ink) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--steel); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand svg { width: 48px; height: 48px; flex: none; }
.brand b { font-family: var(--display); font-weight: 900; font-size: 1.5rem; line-height: 1; text-transform: uppercase; }
.brand small { display: block; font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; color: var(--dust); text-transform: uppercase; margin-top: 3px; }
nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
nav a { text-decoration: none; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; color: var(--dust); }
nav a:hover { color: var(--chalk); }
.bar .btn { padding: 10px 16px; font-size: .9rem; }
@media (max-width: 900px) { nav { display: none; } }
@media (max-width: 460px) { .bar .btn span { display: none; } }

/* Hero */
.hero { padding-block: clamp(48px, 8vw, 96px); position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -10%; top: 10%; width: 70%; height: 60%; background: var(--yellow); opacity: .22; transform: skewY(-8deg); pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; position: relative; z-index: 1; }
.hero-grid > * { min-width: 0; }
.hero h1 { font-size: clamp(3.2rem, 9vw, 6.4rem); font-weight: 900; }
.hero h1 em { font-style: normal; background: linear-gradient(transparent 58%, var(--yellow) 58%, var(--yellow) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero .lede { margin-top: 22px; font-size: 1.2rem; color: var(--chalk); opacity: .82; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero .meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; font-family: var(--mono); font-size: .78rem; color: var(--dust); text-transform: uppercase; letter-spacing: .08em; }
.hero .meta span::before { content: "■ "; color: var(--yellow); }
.owner { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 26px; background: var(--plate); border: 1px solid var(--steel); border-left: 5px solid var(--yellow); padding: 12px 18px; }
.owner-tag { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.owner b { display: block; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; }
.owner a { font-family: var(--display); font-weight: 900; font-size: 1.9rem; line-height: 1; text-decoration: none; }
.owner a:hover { color: var(--amber); }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }

/* Data plate: what to send */
.dataplate { --chalk: #f2efe6; --dust: #a39d8c; color: var(--chalk); background: linear-gradient(160deg, #26231b, #1a1812); border: 1px solid #3a3528; padding: 26px 24px 22px; position: relative; box-shadow: 0 30px 60px -30px #000; }
.dataplate .rivet { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #6b6555, #2a271f); }
.dataplate .r1 { top: 10px; left: 10px; } .dataplate .r2 { top: 10px; right: 10px; } .dataplate .r3 { bottom: 10px; left: 10px; } .dataplate .r4 { bottom: 10px; right: 10px; }
.dataplate .title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 2px solid var(--yellow); padding-bottom: 10px; margin-bottom: 6px; }
.dataplate .title h3 { font-size: 1.35rem; }
.dataplate .title span { font-family: var(--mono); font-size: .7rem; color: var(--dust); letter-spacing: .1em; }
.dataplate dl { margin: 0; display: grid; grid-template-columns: auto 1fr; }
.dataplate dt, .dataplate dd { padding: 9px 0; border-bottom: 1px dashed #3a3528; margin: 0; }
.dataplate dt { font-weight: 600; font-size: .92rem; text-transform: uppercase; letter-spacing: .05em; color: var(--dust); padding-right: 14px; }
.dataplate dd { font-family: var(--mono); font-size: .85rem; text-align: right; color: var(--chalk); overflow-wrap: anywhere; }
.dataplate .foot { margin-top: 14px; font-size: .92rem; color: var(--dust); }
.dataplate .foot b { color: var(--yellow); }

/* Services */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--steel); border: 2px solid var(--steel); }
.service { background: var(--plate); padding: 32px 28px; display: grid; gap: 14px; align-content: start; }
.service .tag { font-family: var(--mono); font-size: .75rem; color: var(--amber); letter-spacing: .1em; }
.service p { color: var(--dust); }
.service ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.service li { padding-left: 18px; position: relative; }
.service li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 2px; background: var(--yellow); }
@media (max-width: 860px) { .services { grid-template-columns: 1fr; } }

/* Modules + options */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); }
.split > * { min-width: 0; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: baseline; gap: 10px; border: 1px solid var(--steel); background: var(--plate); padding: 10px 14px; }
.chip b { font-family: var(--mono); font-weight: 500; color: var(--amber); font-size: .9rem; }
.chip span { font-size: .95rem; color: var(--chalk); }
.sub { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.5rem; margin-bottom: 18px; }
.options { width: 100%; border-collapse: collapse; }
.options th, .options td { text-align: left; padding: 13px 0; border-bottom: 1px solid var(--steel); vertical-align: top; }
.options th { font-weight: 700; padding-right: 18px; white-space: nowrap; }
.options td { color: var(--dust); }
.note { margin-top: 16px; font-size: .95rem; color: var(--dust); }

/* Brands */
.brands-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }
.brand-card { background: var(--plate); border: 1px solid var(--steel); border-top: 4px solid var(--yellow); padding: 24px; display: grid; gap: 10px; align-content: start; }
.brand-card h3 { font-size: 2rem; color: var(--chalk); }
.brand-card p { color: var(--dust); font-size: .98rem; }
@media (max-width: 760px) { .brands-top { grid-template-columns: 1fr; } }
.brand-list { display: flex; flex-wrap: wrap; gap: 6px 0; font-family: var(--display); font-weight: 700; font-size: 1.35rem; text-transform: uppercase; color: var(--chalk); }
.brand-list span:not(:last-child)::after { content: "/"; color: var(--amber); margin: 0 12px; font-weight: 400; }

/* Check first */
.check { background: var(--yellow); color: var(--yellow-ink); }
.check .band { border-top: 0; }
.check .eyebrow { color: var(--yellow-ink); opacity: .7; }
.check-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.check-grid > * { min-width: 0; }
.check h2 { margin-top: 12px; }
.check p { margin-top: 16px; font-size: 1.1rem; max-width: 46ch; }
.symptoms { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin: 0; padding: 0; list-style: none; }
.symptoms li { padding: 12px 0; border-bottom: 2px solid color-mix(in srgb, var(--yellow-ink) 20%, transparent); font-weight: 600; font-size: 1.05rem; }
@media (max-width: 760px) { .check-grid, .symptoms { grid-template-columns: 1fr; } }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: step; list-style: none; margin: 0; padding: 0; }
.steps li { counter-increment: step; border-top: 3px solid var(--yellow); padding-top: 18px; display: grid; gap: 10px; align-content: start; }
.steps li::before { content: "Step " counter(step); font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.steps p { color: var(--dust); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* Quote + contact */
.quote-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.quote-grid > * { min-width: 0; }
@media (max-width: 900px) { .quote-grid { grid-template-columns: 1fr; } }
form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
label { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--dust); }
label i { font-style: normal; color: var(--amber); }
input, textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--chalk); background: var(--plate); border: 1px solid #c9c5b8; padding: 12px 14px; border-radius: 0; }
input::placeholder, textarea::placeholder { color: #8a8474; }
input:focus, textarea:focus { outline: none; border-color: var(--chalk); box-shadow: 0 0 0 3px var(--yellow); }
textarea { min-height: 96px; resize: vertical; }
@media (max-width: 560px) { form { grid-template-columns: 1fr; } }
.form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.form-actions small { color: var(--dust); font-size: .9rem; }
.result { grid-column: 1 / -1; border: 1px solid var(--yellow); background: var(--plate); padding: 18px; display: grid; gap: 12px; }
.result pre { margin: 0; font-family: var(--mono); font-size: .82rem; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--chalk); }
.result .row { display: flex; flex-wrap: wrap; gap: 10px; }
.result .btn { padding: 10px 16px; font-size: .9rem; }

.contact { --chalk: #f2efe6; --dust: #a39d8c; --steel: #2a271f; color: var(--chalk); background: var(--night); border-top: 6px solid var(--yellow); padding: 28px; display: grid; gap: 22px; }
.contact h3 { font-size: 1.8rem; }
.person { display: grid; gap: 2px; }
.person span { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--dust); }
.person a, .person p { font-family: var(--mono); font-size: 1.05rem; text-decoration: none; overflow-wrap: anywhere; }
.person a:hover { color: var(--yellow); }
.contact .rule { height: 1px; background: var(--steel); }

footer { background: var(--night); color: #a39d8c; padding-block: 28px; font-size: .9rem; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }

/* WordPress additions */
.brand-logo { width: 48px; height: 48px; object-fit: contain; flex: none; display: block; }
.admin-bar header { top: 32px; }
@media (max-width: 782px) { .admin-bar header { top: 46px; } }
@media (max-width: 600px) { .admin-bar header { top: 0; } }
.page-content { max-width: 760px; display: grid; gap: 18px; }
.page-content h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight: 900; }