@charset "UTF-8";
/* ==========================================================================
   CarHub — base.css
   Reset, typography and layout primitives.

   NO COLOUR VALUE MAY APPEAR IN THIS FILE. Every colour is var(--token),
   defined in wwwroot/css/themes/. tools/theme-audit.py enforces it.
   ========================================================================== */

/* ==========================================================================
   0. THE FONT — Inter, self-hosted
   ==========================================================================
   ONE FILE, 48 KB, AND IT NEVER LEAVES THE ORIGIN. Google's CDN is two DNS
   lookups, two TLS handshakes and a third-party dependency on every page
   load, and this site is read on a Pakistani mobile connection.
   docs/THEMING.md has the whole argument.

   It is the VARIABLE font, Latin subset: Google serves byte-identical files
   for the 400, 600 and 700 requests because there is only one file behind
   them. So `font-weight: 100 900` here is not optimism — it is what the file
   actually contains, and 400/500/600/700 all render from this one request
   instead of three.

   font-display: swap, and a full system stack behind it in every theme file,
   so the text is on the screen before the font arrives and correct if it
   never does. wwwroot/fonts/OFL.txt is the licence. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  /* The Latin subset Google cuts, verbatim. A glyph outside it falls through
     to the system stack rather than downloading a second file. */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}
/* ==========================================================================
   1. RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* [hidden] has to beat every component display rule that follows it. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

/* THE PAGE IS --bg AND A CARD IS --surface. Before REDESIGN-01 both were
   white and a card was a card only because of its border.
   docs/CARHUB_REDESIGN.md section 3 lists them as two rows. */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
img { border: 0; height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

ul, ol { margin: 0; padding: 0; list-style: none; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--sp-5) 0;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--primary);
  color: var(--on-primary);
}

/* ==========================================================================
   2. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--primary);
  margin: 0 0 var(--sp-3);
  line-height: var(--lh-tight);
}

/* docs/CARHUB_REDESIGN.md section 4. --fs-3xl is the HERO headline and is
   not an element rule — no ordinary page h1 is 48px. */
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-base); }
h5, h6 { font-size: var(--fs-sm); }

p { margin: 0 0 var(--sp-4); }

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { text-decoration: underline; }

small { font-size: var(--fs-sm); }

strong, b { font-weight: var(--fw-bold); }

/* Prices, mileage, countdowns and registration numbers.
   THE POINT IS TABULAR-NUMS, NOT THE FAMILY. This site is made of figures —
   PKR 52.5 lac, 78,000 km, 2019 — and Inter's tabular variant gives every
   digit the same advance width, so a column of prices lines up on the decimal
   and a countdown does not jitter as it ticks. That is why Inter was chosen
   over Poppins; docs/THEMING.md. */
.num,
.price,
.countdown {
  font-family: var(--font-num);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.muted   { color: var(--text-2); }

/* Two that are neither spacing nor colour. .strong is a bold paragraph where
   an inline <strong> would be wrong — the whole line is the emphasis, not a
   phrase inside it — and .nowrap keeps a figure like "0 / 1000" from breaking
   across two lines. Both were used by views from BUILD-04 and BUILD-05 and
   neither had a rule behind it until BUILD-06 went looking. */
.strong  { font-weight: var(--fw-bold); }
.nowrap  { white-space: nowrap; }
.muted-2 { color: var(--text-3); }

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* A full-width horizontal band.

   REDESIGN-01 CHANGED WHAT A BAND IS. The old home page alternated white and
   grey so that no two neighbouring bands shared a background; that was the
   only separation available when the page and the card were both white. The
   page is --bg now and a card is --surface, so a section separates itself by
   the white cards standing on it and a plain band needs no background at all.
   Rhythm does the rest: 72px between sections on a desktop.

   .band--live is the auction band and NOTHING ELSE, which is the whole reason
   an auction reads as an auction without a label. docs/THEMING.md section 4. */
.band        { padding-block: var(--sp-8); }
.band--tight { padding-block: var(--sp-6); }
.band--roomy { padding-block: var(--sp-9); }

/* A band that is a card the width of the page. */
.band--surface {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.band--alt { background: var(--surface-alt); }

/* THE AUCTION BAND, AND ITS TINT IS DELIBERATELY WEAKER THAN THE TOKEN.
   REDESIGN-01b Part 5: the full-strength --live-soft wash across the page was
   heavier than the band needed and competed with the red-bordered cards
   standing on it — the band was shouting the same thing the cards were
   already saying, louder. Diluted to just over a third against the page
   colour it still reads as the one auction region on the home page, and the
   cards carry the signal.

   IT IS STILL TOKENS. color-mix takes --live-soft and --bg, so a theme change
   moves the wash with everything else and tools/theme-audit.py T1 has no
   literal to find. Red stays reserved for auctions either way. */
.band--live { background: color-mix(in srgb, var(--live-soft) 38%, var(--bg)); }

.band--ink{ background: var(--surface-dark); color: var(--text-inverse); }
.band--ink h1, .band--ink h2, .band--ink h3 { color: var(--text-inverse); }
.band--ink a { color: var(--text-inverse); }
.band--ink .muted { color: var(--text-on-dark-2); }

/* On a dark surface --focus-ring is 1.24:1 against --surface-dark and might
   as well not be drawn. Every dark region on the site takes the light ring —
   this rule and the header's are the only two places that need to say so. */
.band--ink :focus-visible { outline-color: var(--focus-ring-dark); }

.section { padding-block: var(--sp-6); }

.stack > * + * { margin-top: var(--sp-3); }

.row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.row--between { justify-content: space-between; }
.row--wrap    { flex-wrap: wrap; }

/* A row of pills or badges, which sit closer together than a row of controls
   and have to wrap: a dealer card carries up to three tags and an auction
   pill, and on a 280px card that is two lines. */
.row--tight   { gap: var(--sp-1) var(--sp-2); flex-wrap: wrap; }

/* The two-column body shared by the city listing and the dealer directory:
   filter rail left, results right. PAGES.md requires them to be one shape. */
.layout {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}

.grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Spacing utilities, and only spacing. There is no colour utility and there
   will not be one: `.text-red` is a hardcoded colour with a class around it. */
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   4. RESPONSIVE
   ========================================================================== */
/* The demo's breakpoints, and they are the demo's for a reason: the header row
   needs 863px to lay out flat, and five tiles need 1000px before they start
   reading as a table. */
@media (max-width: 1000px) {
  .grid,
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .grid--2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  :root { --pad: 16px; }

  /* The section rhythm comes in a step, it does not collapse: 48px still
     reads as a break and 24px reads as a list. The heading sizes drop through
     the :root overrides in tokens.css rather than through element rules
     here, so one scale governs both widths. */
  .band        { padding-block: var(--sp-7); }
  .band--tight { padding-block: var(--sp-5); }
  .band--roomy { padding-block: var(--sp-7); }

  .grid,
  .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: minmax(0, 1fr); }

  /* A .row is a flex line of controls and it does not wrap, which is right on
     a desktop and is how a page gets pushed sideways on a phone. /about/ ends
     with two buttons in one — "Browse used cars in Lahore" and "How it works",
     both .btn and therefore both white-space: nowrap — and at 360px they came
     to 402px and took the whole document with them.

     Wrapping only takes effect when the line does not fit, so a row that fits
     is unchanged; docs/CARHUB_REDESIGN.md section 14 says never allow
     horizontal scrolling, and this is the general answer rather than a class
     added to the one view that was caught. */
  .row { flex-wrap: wrap; }
}