/* Automotive Solutions - Mesquite, TX
   Mobile-first stylesheet. Breakpoints at 640 / 900 / 1100. */

:root {
  --ink:        #15171c;   /* near-black, carries the white logo   */
  --ink-2:      #22262e;   /* raised dark surface                  */
  --accent:     #f5a524;   /* amber - CTAs, rules, active nav       */
  --accent-dk:  #d4881a;
  --navy:       #3e5275;   /* the warranty box on Richard's card    */
  --navy-dk:    #243349;   /* footer, one step below the navy       */
  /* Amber and grey both lose contrast on navy - it is far lighter than the
     near-black these were picked for. These are the on-navy substitutes;
     the originals stay correct on the light sections. */
  --accent-lt:  #ffc352;   /* amber on navy   - 4.9:1               */
  --muted-lt:   #ccd4e0;   /* muted on navy   - 5.3:1               */
  --text:       #1c1f26;
  --muted:      #5c6470;
  --line:       #e3e6ea;
  --bg:         #ffffff;
  --bg-2:       #f5f6f8;
  --radius:     10px;
  --wrap:       1140px;
  --topbar-h:   46px;
  --sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  /* room for the fixed mobile call bar */
  padding-bottom: 62px;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-dk); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 18px; }

h1, h2, h3 {
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.15;
  margin: 0 0 .5em;
}
h2 {
  font-size: 1.65rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
h3 { font-size: 1.1rem; }

.section { padding: 52px 0; }
.section--alt  { background: var(--bg-2); }
.section--dark { background: var(--navy); color: #e8eaee; }
.section--dark h2 { color: #fff; }
/* :not(.btn) - otherwise this rule (0-1-1) outranks .btn--primary (0-1-0)
   and paints button text amber on an amber background. */
.section--dark a:not(.btn) { color: var(--accent-lt); }

/* amber rule under section headings */
.section > .wrap > h2::after,
.section-head h2::after {
  content: "";
  display: block;
  width: 58px; height: 4px;
  background: var(--accent);
  margin-top: 14px;
  border-radius: 2px;
}
.section-head { margin-bottom: 30px; }
.section-head p { color: var(--muted); max-width: 62ch; margin: 0; }
.section--dark .section-head p { color: var(--muted-lt); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px;
  font-size: 1rem; font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius);
  border: 2px solid transparent;
  min-height: 50px;               /* comfortable tap target */
  transition: background .15s, color .15s;
}
/* <button> needs the UA styles knocked off to match the <a> buttons.
   font-family only - the `font` shorthand would reset .btn's weight and
   size too, and button.btn (0-1-1) outranks .btn (0-1-0). */
button.btn { font-family: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
.btn--primary { background: var(--accent); color: #1a1205; }
.btn--primary:hover { background: var(--accent-dk); }
.btn--ghost   { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn--ghost:hover { background: rgba(255,255,255,.12); }
.btn--dark    { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--ink-2); }

/* ---------- top bar ----------
   Sticky at the very top so the address and phone are readable at any
   scroll position. Fixed height (--topbar-h) so the header below it can
   stick to a known offset instead of a guessed one. */
.topbar {
  display: none;                  /* hidden on phones - the fixed bottom
                                     call bar serves that job there */
  position: sticky; top: 0; z-index: 55;
  height: var(--topbar-h);
  background: var(--accent);
  color: #1a1205;
  font-size: 1rem;
  font-weight: 700;
}
.topbar .wrap {
  height: 100%;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.topbar a { color: #1a1205; text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.tb-addr  { letter-spacing: .01em; }
.tb-right { display: flex; align-items: center; gap: 22px; }
.tb-hours { font-weight: 700; }
.tb-phone {
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
}
.tb-email { font-weight: 700; }

/* ---------- header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--navy);
  border-bottom: 3px solid var(--accent);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 12px; padding-bottom: 12px;
}
.logo img { width: 168px; }

/* Shop hours beside the logo, phone and tablet only. The amber top bar that
   carries these is desktop-only, so below 900px they appear nowhere else.
   margin-right:auto puts them next to the logo and pins the toggle right. */
.hdr-hours {
  margin-right: auto;
  font-size: .87rem; font-weight: 700; line-height: 1.35;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent-lt);
  white-space: nowrap;
}
.hdr-hours .t {
  display: block;
  font-size: 1.17rem; letter-spacing: 0; color: #fff;
}
.hdr-hours small { font-size: .68em; }

.nav-toggle {
  background: transparent; border: 1.5px solid rgba(255,255,255,.45); color: #fff;
  border-radius: 8px; padding: 9px 12px;
  font-size: 1.35rem; line-height: 1; cursor: pointer;
}
.nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.nav {
  display: none;
  border-top: 1px solid rgba(255,255,255,.14);
  padding-bottom: 10px;
}
.nav.open { display: block; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block;
  padding: 14px 2px;
  color: #e8eaee; text-decoration: none;
  font-weight: 700; font-size: .95rem;
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.nav a:hover { color: var(--accent-lt); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  background: #0d0f13 url("../img/shop.jpg") center/cover no-repeat;
  color: #fff;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,12,16,.72) 0%, rgba(10,12,16,.86) 100%);
}
.hero .wrap { position: relative; padding-top: 60px; padding-bottom: 60px; }
.hero h1 {
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: .35em;
}
.hero h1 .accent { color: var(--accent); display: block; }
.hero p.lead { font-size: 1.05rem; color: #d6dae1; max-width: 54ch; margin: 0 0 26px; }
.hero-actions { display: flex; flex-direction: column; gap: 12px; }
.hero-actions .btn { width: 100%; }

/* ---------- trust strip ---------- */
.trust { background: var(--navy); color: #fff; }
.trust ul {
  list-style: none; margin: 0; padding: 22px 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px 8px;
  text-align: center;
}
.trust li { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; line-height: 1.35; }
.trust .num { display: block; font-size: 1.5rem; color: var(--accent); letter-spacing: 0; }
/* "Warranty" beside 12/12 and 24/24 - inherits the .num font and colour;
   nowrap so the word wraps as a unit rather than splitting. */
.trust .warr { font-size: .75rem; white-space: nowrap; }
/* Five tiles, so the phone grid is three up rather than two: the same two
   rows the four tiles used, instead of a third row holding one orphan.
   Six columns with every tile spanning two is what lets the trailing
   pair sit centred (cols 2-3 and 4-5) rather than shoved left. */
.trust li { grid-column: span 2; }
.trust li:nth-child(4) { grid-column: 2 / span 2; }
.trust li:nth-child(5) { grid-column: 4 / span 2; }

/* ---------- service grid ---------- */
.services { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.services a {
  display: flex; align-items: center;
  min-height: 62px;
  padding: 12px 14px;
  background: #fff; border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  color: var(--text); text-decoration: none;
  font-weight: 700; font-size: .84rem;
  text-transform: uppercase; letter-spacing: .03em;
}
.services a:hover { border-color: var(--accent); background: #fffdf7; }
.section--alt .services a { background: #fff; }

/* ---------- feature rows ---------- */
.feature { display: grid; gap: 26px; align-items: start; }
.feature img.badge { width: 132px; margin: 0 auto; }
.checks { list-style: none; margin: 18px 0 0; padding: 0; }
.checks li { position: relative; padding-left: 30px; margin-bottom: 11px; }
.checks li::before {
  content: "\2713";
  position: absolute; left: 0; top: -1px;
  color: var(--accent); font-weight: 800; font-size: 1.15rem;
}

/* ---------- reviews ---------- */
.reviews { display: grid; gap: 16px; }
.review {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px;
}
.stars { color: var(--accent); letter-spacing: 2px; font-size: 1.05rem; }
.review blockquote { margin: 10px 0 14px; font-size: .97rem; }
.review cite { font-style: normal; font-weight: 700; font-size: .9rem; }
/* Stars and date share one line, date pushed right. Absolute month/year,
   not "3 weeks ago" - a relative date baked into static HTML silently rots.
   baseline alignment so the date sits on the stars' optical line rather than
   floating above it, the glyphs being much taller than the text. */
.rv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rv-date { font-size: .82rem; color: var(--muted); white-space: nowrap; }

/* ---------- offers ----------
   Rides on .checks for the amber tick; this only sets the emphasis. */
.or { margin: 12px 0; color: var(--muted); font-style: italic; }
.offers { font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; }
.offers li { margin-bottom: 14px; }

/* ---------- brands ---------- */
.brands {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  align-items: center;
}
.brands img { margin: 0 auto; opacity: .85; }

/* ---------- vehicles ---------- */
.makes {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  font-size: .85rem;
}
.makes li {
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  padding: 9px 6px; text-align: center;
}

/* ---------- contact ---------- */
.contact-grid { display: grid; gap: 26px; }
.info-list { list-style: none; margin: 0; padding: 0; }
.info-list li { margin-bottom: 18px; }
.label {
  display: block; font-size: .75rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--accent-lt); font-weight: 700; margin-bottom: 10px;
}
.info-list .label { margin-bottom: 3px; }
.info-list a:not(.btn) { color: #fff; text-decoration: none; }
.info-list a:not(.btn):hover { color: var(--accent-lt); }
/* button sitting inside an .info-list entry rather than on its own line */
.btn--inline { margin-top: 12px; padding: 11px 20px; min-height: 44px; font-size: .95rem; }
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table th, .hours-table td { text-align: left; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.16); font-size: .95rem; }
.hours-table th { font-weight: 700; }
.hours-table td { text-align: right; color: var(--accent-lt); font-weight: 700; }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-dk); color: #a8b2c2; font-size: .85rem; padding: 30px 0 34px; }
.site-footer a { color: #a8b2c2; text-decoration: none; }
.site-footer a:hover { color: var(--accent-lt); }
.footer-links { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }

/* ---------- employment application viewer ----------
   Desktop-only overlay; below 760px the footer link is left as a plain
   target=_blank and the phone's own PDF viewer takes over. */
.pdfm { position: fixed; inset: 0; z-index: 200; display: flex;
        align-items: center; justify-content: center; padding: 24px; }
.pdfm[hidden] { display: none; }
.pdfm-back { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.pdfm-panel { position: relative; display: flex; flex-direction: column;
  width: min(920px, 100%); height: min(90vh, 1100px);
  background: #fff; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.4); }
.pdfm-bar { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 12px; background: var(--navy); color: #fff;
  font-weight: 700; font-size: .95rem; }
.pdfm-tools { display: flex; align-items: center; gap: 4px; }
.pdfm-btn { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 0; border-radius: 7px; cursor: pointer;
  background: transparent; color: #fff; text-decoration: none;
  -webkit-appearance: none; appearance: none; }
.pdfm-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
.pdfm-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pdfm-panel iframe { flex: 1; width: 100%; border: 0; background: #525659; }
.pdfm-hint { margin: 0; padding: 8px 12px; font-size: .78rem; line-height: 1.35;
  background: #f4f6f8; color: var(--muted); border-top: 1px solid var(--line); }
.pdfm-hint b { color: var(--text); }

/* ---------- fixed mobile call bar ---------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid #000;
}
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 17px 8px;
  font-weight: 800; font-size: .95rem; text-decoration: none;
  text-transform: uppercase; letter-spacing: .04em;
}
.callbar .call { background: var(--accent); color: #1a1205; }
/* Stays --ink deliberately, not navy. The bar is fixed over the page, so the
   trust strip scrolls behind it - a navy button on navy loses its edge and
   stops reading as a button. Near-black keeps it distinct from every section
   it passes over. Richard caught this; do not "fix" it for consistency. */
.callbar .dir  { background: var(--ink); color: #fff; }

/* The hours are deliberately large, so the logo is what yields as the screen
   narrows - never the hours, which are the point. At full size logo + hours +
   menu button need 361px on one line, so a 360px Android is 1px short. */
@media (max-width: 389px) {
  .logo img { width: 150px; }        /* fits 360px with 17px to spare */
}
@media (max-width: 339px) {
  .logo img { width: 128px; }        /* 320px iPhone SE 1st gen */
  .hdr-hours { font-size: .78rem; }
  .hdr-hours .t { font-size: 1.05rem; }
}

/* ================= 640px and up ================= */
@media (min-width: 640px) {
  .hero h1 { font-size: 2.6rem; }
  .hero-actions { flex-direction: row; }
  .hero-actions .btn { width: auto; }
  /* Five across in the same strip: the column gap tightens so the row
     still occupies the width the four tiles did. */
  .trust ul { grid-template-columns: repeat(5, 1fr); gap: 16px 8px; }
  .trust li, .trust li:nth-child(4), .trust li:nth-child(5) { grid-column: auto; }
  .services { grid-template-columns: repeat(3, 1fr); }
  .reviews { grid-template-columns: 1fr 1fr; }
  .brands { grid-template-columns: repeat(4, 1fr); }   /* 12 logos = 3 even rows */
  .makes { grid-template-columns: repeat(4, 1fr); }
  .feature { grid-template-columns: 160px 1fr; gap: 30px; align-items: center; }
  .feature img.badge { margin: 0; }
}

/* Phone and tablet run the strip smaller than the desktop 5-across, because
   five captions the length of "12 month / 12,000 mile" will not sit on one
   line at these widths. Scaling the type is what keeps the strip the height
   the four tiles used, rather than letting it grow a row. */
@media (max-width: 899px) {
  .trust li { font-size: .68rem; letter-spacing: .03em; }
  .trust .num { font-size: 1.15rem; white-space: nowrap; }
  .trust .warr { font-size: .58rem; }
}

/* ================= 900px and up ================= */
@media (min-width: 900px) {
  body { padding-bottom: 0; }          /* call bar is hidden at this size */
  .callbar { display: none; }
  .topbar { display: block; }

  .nav-toggle { display: none; }
  .hdr-hours { display: none; }      /* the top bar carries these at this size */
  .nav {
    display: block; border-top: none; padding-bottom: 0;
  }
  .nav ul { display: flex; gap: 4px; }
  .nav a { border-bottom: none; padding: 10px 13px; border-radius: 6px; font-size: .87rem; }
  .nav a:hover { background: rgba(255,255,255,.08); color: var(--accent-lt); }

  .site-header { top: var(--topbar-h); }
  .header-inner { padding-top: 14px; padding-bottom: 14px; }
  .logo img { width: 215px; }

  .section { padding: 74px 0; }
  h2 { font-size: 2rem; }
  .hero .wrap { padding-top: 108px; padding-bottom: 108px; }
  .hero h1 { font-size: 3.2rem; }
  .hero p.lead { font-size: 1.15rem; }
  .services { grid-template-columns: repeat(4, 1fr); }
  .reviews { grid-template-columns: repeat(3, 1fr); }
  .makes { grid-template-columns: repeat(6, 1fr); }
  .contact-grid { grid-template-columns: 1.1fr 1fr 1fr; gap: 40px; }
  .brands { grid-template-columns: repeat(6, 1fr); }   /* 12 logos = 2 even rows */
}

/* ================= accessibility ================= */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}
.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: #000; padding: 12px 18px; z-index: 100;
  font-weight: 700; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; top: 0; }

/* ---------- anchor offset for the sticky header ----------
   Without this, jumping to #services parks the heading underneath
   the sticky header. Values track the header's real height.        */
section[id] { scroll-margin-top: 92px; }
@media (min-width: 900px) { section[id] { scroll-margin-top: 190px; } }
/* #top sits at the very start of <body> so the logo returns the page
   to true scroll position 0, topbar and all. */
#top { scroll-margin-top: 0; }