/* ============================================================================
   DRIVEX — PRE-LAUNCH UI LAYER
   ----------------------------------------------------------------------------
   Loaded at priority 1100, i.e. after dx-light-theme (999) and the design
   system dx-ds / dx-ds-pages (1000). It exists because those two layers
   disagree in a few specific places, and the disagreement — not taste — is
   what makes the affected sections look broken:

     * .dx-feature-grid  — dx-light-theme lays out a 12-column bento and gives
       the cards `grid-column: span 6 / span 3` to match. dx-ds-pages then
       replaces the TRACK definition with `repeat(auto-fit, minmax(250px,1fr))`
       but leaves the span values alone. The measured result at 1440px is a
       6-track grid with two 0px tracks, card 1 at 1208px (full width) and
       card 3 at 878px. That is the "oversized cards / empty space" report.

     * .dx-step-num      — dx-ds-pages makes the badge `position:static;
       display:inline-flex; width:auto` inside a card that is
       `display:flex; flex-direction:column`. With the default
       `align-items:stretch` the badge stretches to the full card width:
       measured 256px wide for a single digit.

     * .hp-district-name — dx-ds-pages line 1987 paints every district label
       `var(--ds-ink)` (#0D1B2E) while the card behind it stays navy. Measured
       #0D1B2E on #0F2D5F ≈ 1.6:1 contrast; WCAG AA needs 4.5:1. The labels
       are effectively unreadable.

   Everything here is presentation only. No markup contract, no class name, no
   link, no query and no route is changed. Deleting this file and its enqueue
   block in functions.php restores the previous appearance exactly.
   ========================================================================== */

/* ============================================================================
   1. BROWSE BY CATEGORY  —  simple icon grid
   ----------------------------------------------------------------------------
   Rebuilt to match "What You Can Post & Find" (templates/page-about.php), which
   is the section you pointed at as the reference: a plain white card, one
   centred icon, the name. Nothing else.

   The photo/illustration card was the problem, not the artwork inside it. A
   picture forces a tall image box, a crop decision and a second focal point
   competing with the label, and ten of them in a row is a wall of pictures
   before the visitor has read a single word. An icon grid is scanned in one
   pass, is identical on every screen size, and weighs nothing.

   This is CSS only — the markup, the ten categories, their icons, their links
   and their order are untouched, and the .hp-cat-bg artwork stays on disk. To
   go back to picture cards, delete this block.
   ========================================================================== */
:root:root .hp-cat-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

:root:root .hp-cat-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  gap: 0 !important;
  padding: 22px 14px 20px !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  border-radius: 14px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--dx-line, #E3EAF3) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}
:root:root .hp-cat-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(249, 101, 1, .45) !important;
  box-shadow: 0 10px 24px rgba(7, 54, 122, .10) !important;
}

/* Everything that made this a picture card is switched off. */
:root:root .hp-cat-bg,
:root:root .hp-cat-overlay,
:root:root .hp-cat-illustration,
:root:root .hp-cat-illustration-icon { display: none !important; }
/* dx-ds-pages.css draws a chevron badge as .hp-cat-card::before — the whole
   card is the target here, so the extra affordance is just noise. */
:root:root .hp-cat-card::before,
:root:root .hp-cat-card::after { content: none !important; display: none !important; }

/* The icon tile is the card. dx-ds-pages.css:282 and dx-light-theme.css:1539
   both hide .hp-cat-icon (it was redundant next to the artwork); with the
   artwork gone it becomes the content again. */
:root:root .hp-cat-card .hp-cat-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  margin: 0 auto 13px !important;
  border-radius: 15px !important;
  font-size: 25px !important;
  background: linear-gradient(150deg, rgba(7, 54, 122, .10), rgba(249, 101, 1, .10)) !important;
  border: 1px solid rgba(7, 54, 122, .16) !important;
  color: var(--dx-blue, #07367A) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease !important;
}
:root:root .hp-cat-card:hover .hp-cat-icon {
  background: linear-gradient(150deg, #07367A, #0A4A9E) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
  transform: none !important;
}

:root:root .hp-cat-content {
  position: static !important;
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  text-align: center !important;
}
:root:root .hp-cat-name {
  display: block !important;
  text-align: center !important;
  font-family: var(--font-head, 'Space Grotesk'), system-ui, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -.2px !important;
  color: var(--dx-ink, #0D1B2E) !important;
}
:root:root .hp-cat-count {
  display: block !important;
  text-align: center !important;
  margin-top: 3px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--dx-ink-3, #5B6B82) !important;
}

@media (max-width: 1100px) { :root:root .hp-cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (max-width: 860px)  { :root:root .hp-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }

/* Phones keep the same card, just tighter — nothing is re-thought, because a
   centred icon and a label already work at any width. */
@media (max-width: 560px) {
  :root:root .hp-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  :root:root .hp-cat-card { padding: 18px 10px 16px !important; border-radius: 13px !important; }
  :root:root .hp-cat-card .hp-cat-icon {
    width: 46px !important; height: 46px !important; min-width: 46px !important;
    font-size: 21px !important; border-radius: 13px !important; margin: 0 auto 10px !important;
  }
  :root:root .hp-cat-name  { font-size: 13px !important; }
  :root:root .hp-cat-count { font-size: 11px !important; }
  :root:root .hp-cat-card:hover { transform: none !important; }
}
@media (max-width: 359px) {
  :root:root .hp-cat-grid { gap: 8px !important; }
  :root:root .hp-cat-count { display: none !important; }
}

/* ============================================================================
   2. BROWSE BY DISTRICT
   ----------------------------------------------------------------------------
   Rebuilt as light cards on the white page instead of navy plates. That is
   what fixes the contrast failure at the root: the label is dark ink on white
   rather than dark ink on navy, so it cannot be un-readable again if another
   layer repaints the text colour. It also stops the section reading as a slab
   of blue tiles, and lets the orange brand accent do the work on hover.
   Districts, order, links and the View All behaviour are unchanged.
   ========================================================================== */
:root:root .hp-district-grid {
  display: grid !important;
  /* 174px is set by the longest district name: "Anuradhapura" needs ~101px of
     text column, and the card spends 26px on padding plus 45px on the icon and
     its gap. Anything narrower breaks that word across two lines. */
  grid-template-columns: repeat(auto-fill, minmax(174px, 1fr)) !important;
  gap: 10px !important;
}

/* The collapsed height was 250px, tuned for the old 118px-tall navy cards
   (2 x 118 + 14 gap). The new cards are 62px, so 250px showed three and a half
   rows and sliced the fourth in half. Re-derived for the new card: 2 x 62 + 10.
   "View All Districts" still lifts the clamp; every district stays in the DOM
   and linkable in both states. */
:root:root #hpDistrictGrid { max-height: 134px !important; }
:root:root #hpDistrictGrid.dx-rows-open { max-height: 3000px !important; }

:root:root .hp-district-card {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  /* dx-light-theme.css:1855 sets justify-content:center from when this card was
     a COLUMN (icon stacked above the name). Both dx-ds-pages and this file flip
     it to a row but never reset that, so the icon+text group was centred as a
     unit and every icon sat at a different x depending on how long the district
     name is (Galle 58.4px vs Anuradhapura 28.3px). Pin it to the leading edge so
     all 25 icons share one left edge. */
  justify-content: flex-start !important;
  gap: 11px !important;
  min-height: 62px !important;
  padding: 12px 13px !important;
  border-radius: 13px !important;
  /* The 25 per-district gradients set in front-page.php via --dx-grad are
     deliberately not used: they were the "random colours" problem, and the
     light theme had already flattened them to one navy anyway. */
  background: #FFFFFF !important;
  border: 1px solid var(--dx-line, #E3EAF3) !important;
  box-shadow: 0 1px 2px rgba(14, 28, 49, .05) !important;
  overflow: hidden !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
/* A thin brand rail on the leading edge — the one piece of colour, and it is
   the DriveX blue, not a per-district hue. */
:root:root .hp-district-card::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0; top: 0; bottom: 0;
  width: 3px !important;
  background: var(--dx-blue, #07367A) !important;
  opacity: .55 !important;
  transition: background .22s ease, opacity .22s ease, width .22s ease !important;
}
:root:root .hp-district-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 22px rgba(7, 54, 122, .13) !important;
  border-color: rgba(249, 101, 1, .40) !important;
}
:root:root .hp-district-card:hover::before {
  background: var(--dx-orange, #F96501) !important;
  opacity: 1 !important;
  width: 4px !important;
}

:root:root .hp-district-icon {
  flex: 0 0 auto !important;
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  font-size: 17px !important;
  background: rgba(7, 54, 122, .07) !important;
  border: 1px solid rgba(7, 54, 122, .14) !important;
  color: var(--dx-blue, #07367A) !important;
  transform: none !important;
  transition: background .22s ease, color .22s ease !important;
}
:root:root .hp-district-card:hover .hp-district-icon {
  background: var(--dx-blue, #07367A) !important;
  color: #FFFFFF !important;
  transform: none !important;
}

/* Dark ink on a white card — 13.9:1, comfortably past WCAG AA. */
:root:root .hp-district-name {
  min-width: 0 !important;
  font-family: var(--font-head, 'Space Grotesk'), system-ui, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
  letter-spacing: -.1px !important;
  color: var(--dx-ink, #0D1B2E) !important;
  /* Never break inside a district name — the grid track above is sized so the
     longest one fits on a single line. */
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  hyphens: none !important;
}

/* Live listing count, printed by front-page.php from the district taxonomy.
   Absent (and taking no space) until a district actually has listings. */
:root:root .hp-district-meta {
  display: block !important;
  margin-top: 2px !important;
  font-family: var(--font-body, system-ui), sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: .1px !important;
  color: var(--dx-ink-3, #5B6B82) !important;
}
:root:root .hp-district-text { min-width: 0 !important; }

/* The busiest districts carry a quiet orange marker so the eye lands on them
   first, without turning them into a different component. */
:root:root .hp-district-card.is-popular { border-color: rgba(249, 101, 1, .32) !important; }
:root:root .hp-district-card.is-popular::before { background: var(--dx-orange, #F96501) !important; opacity: .9 !important; }
:root:root .hp-district-card.is-popular .hp-district-icon {
  background: rgba(249, 101, 1, .10) !important;
  border-color: rgba(249, 101, 1, .26) !important;
  color: var(--dx-orange-hi, #D95601) !important;
}

@media (max-width: 640px) {
  :root:root .hp-district-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px !important; }
  :root:root #hpDistrictGrid { max-height: 121px !important; }   /* 2 x 56 + 9 */
  :root:root .hp-district-card { min-height: 56px !important; padding: 10px 11px !important; gap: 9px !important; border-radius: 12px !important; }
  :root:root .hp-district-icon { width: 30px !important; height: 30px !important; font-size: 15px !important; border-radius: 9px !important; }
  :root:root .hp-district-name { font-size: 12.5px !important; }
  :root:root .hp-district-meta { font-size: 10.5px !important; }
  :root:root .hp-district-card:hover { transform: none !important; }
}
@media (max-width: 359px) {
  :root:root .hp-district-grid { gap: 8px !important; }
  :root:root .hp-district-card { padding: 9px 10px !important; gap: 8px !important; }
  :root:root .hp-district-name { font-size: 12px !important; }
}

/* ============================================================================
   3. HOW DRIVEX WORKS
   ----------------------------------------------------------------------------
   `align-self: flex-start` is the actual fix for the stretched number badge —
   it opts the badge out of the column flex container's default stretch, which
   is what made a one-digit pill 256px wide.
   ========================================================================== */
:root:root .dx-how-section { padding: 30px 0 28px !important; }

:root:root .dx-step-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 13px !important;
}

:root:root .dx-step-card {
  align-items: flex-start !important;
  text-align: left !important;
  gap: 7px !important;
  padding: 18px 17px 19px !important;
  border-radius: 15px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--dx-line, #E3EAF3) !important;
  box-shadow: 0 1px 3px rgba(14, 28, 49, .06) !important;
  transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease !important;
}
:root:root .dx-step-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 26px rgba(7, 54, 122, .12) !important;
  border-color: rgba(7, 54, 122, .20) !important;
}

/* Number and icon share one line: the step reads "1 — search" in a single
   glance, and the card loses the ~40px of stacked dead space it had. */
:root:root .dx-step-card .dx-step-num,
body.home .dx-how-section .dx-step-num,
:root:root .dx-how-section .dx-step-card .dx-step-num {
  position: static !important;
  align-self: flex-start !important;   /* the fix: no stretch in a column flex */
  flex: 0 0 auto !important;
  order: -1 !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  max-width: 26px !important;
  margin: 0 0 2px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #07367A, #0A4A9E) !important;
  border: none !important;
  color: #FFFFFF !important;
  font-family: var(--font-head, 'Space Grotesk'), system-ui, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: 0 2px 7px rgba(7, 54, 122, .28) !important;
}

:root:root .dx-step-card .dx-step-icon {
  width: 42px !important;
  height: 42px !important;
  margin: 1px 0 3px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  background: linear-gradient(150deg, rgba(7, 54, 122, .10), rgba(249, 101, 1, .10)) !important;
  border: 1px solid rgba(7, 54, 122, .16) !important;
  color: var(--dx-blue, #07367A) !important;
}
:root:root .dx-step-card .dx-step-title {
  text-align: left !important;
  font-family: var(--font-head, 'Space Grotesk'), system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -.2px !important;
  line-height: 1.3 !important;
  color: var(--dx-ink, #0D1B2E) !important;
}
:root:root .dx-step-card .dx-step-desc {
  text-align: left !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  color: var(--dx-ink-2, #41546E) !important;
}

@media (max-width: 900px) {
  :root:root .dx-step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 11px !important; }
}
@media (max-width: 480px) {
  :root:root .dx-how-section { padding: 24px 0 22px !important; }
  :root:root .dx-step-grid { grid-template-columns: 1fr !important; gap: 9px !important; }
  /* One row per step on a phone: number, icon and title on one line with the
     description beneath, so four steps stay scannable without four tall cards. */
  :root:root .dx-step-card {
    display: grid !important;
    grid-template-columns: 26px 38px 1fr !important;
    grid-template-rows: auto auto !important;
    column-gap: 10px !important;
    row-gap: 3px !important;
    align-items: center !important;
    padding: 13px 14px !important;
  }
  :root:root .dx-step-card .dx-step-num { grid-column: 1 !important; grid-row: 1 !important; margin: 0 !important; }
  :root:root .dx-step-card .dx-step-icon { grid-column: 2 !important; grid-row: 1 !important; width: 34px !important; height: 34px !important; margin: 0 !important; font-size: 17px !important; border-radius: 10px !important; }
  :root:root .dx-step-card .dx-step-title { grid-column: 3 !important; grid-row: 1 !important; font-size: 14px !important; }
  :root:root .dx-step-card .dx-step-desc { grid-column: 3 !important; grid-row: 2 !important; font-size: 12px !important; }
  :root:root .dx-step-card:hover { transform: none !important; }
}

/* ============================================================================
   4. WHY DRIVEX
   ----------------------------------------------------------------------------
   Six equal cards in a 3 x 2 grid. The `span 6 / span 3` values left over from
   the 12-column bento are reset to a single track each, which is what removes
   the full-width cards and the two 0px tracks.
   ========================================================================== */
:root:root .dx-why-section { padding: 30px 0 34px !important; }

:root:root .dx-feature-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 13px !important;
}
:root:root .dx-feature-grid .dx-feature-card,
:root:root .dx-feature-grid .dx-feature-card:nth-child(1),
:root:root .dx-feature-grid .dx-feature-card:nth-child(2) {
  grid-column: auto !important;
  grid-row: auto !important;
}
:root:root .dx-feature-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  padding: 19px 18px 20px !important;
  border-radius: 15px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--dx-line, #E3EAF3) !important;
  box-shadow: 0 1px 3px rgba(14, 28, 49, .06) !important;
}
:root:root .dx-feature-grid .dx-feature-card:nth-child(1),
:root:root .dx-feature-grid .dx-feature-card:nth-child(2) {
  padding: 19px 18px 20px !important;
  background: #FFFFFF !important;
}
:root:root .dx-feature-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 26px rgba(7, 54, 122, .12) !important;
  border-color: rgba(7, 54, 122, .20) !important;
}
:root:root .dx-feature-card .dx-feature-icon,
:root:root .dx-feature-grid .dx-feature-card:nth-child(1) .dx-feature-icon,
:root:root .dx-feature-grid .dx-feature-card:nth-child(2) .dx-feature-icon {
  align-self: flex-start !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  margin-bottom: 4px !important;
  border-radius: 12px !important;
  font-size: 20px !important;
}

@media (max-width: 900px) {
  :root:root .dx-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 11px !important; }
}
@media (max-width: 560px) {
  :root:root .dx-why-section { padding: 24px 0 26px !important; }
  :root:root .dx-feature-grid { grid-template-columns: 1fr !important; gap: 9px !important; }
  /* Icon beside the heading rather than above it — the same information in
     about 40% less vertical space, which is what keeps six cards scannable. */
  :root:root .dx-feature-card {
    display: grid !important;
    grid-template-columns: 38px 1fr !important;
    column-gap: 11px !important;
    row-gap: 3px !important;
    align-items: center !important;
    padding: 14px 14px 15px !important;
  }
  :root:root .dx-feature-card .dx-feature-icon {
    grid-column: 1 !important; grid-row: 1 !important;
    width: 38px !important; height: 38px !important; min-width: 38px !important;
    margin-bottom: 0 !important; font-size: 18px !important; border-radius: 11px !important;
  }
  :root:root .dx-feature-card > div:not(.dx-feature-icon):nth-of-type(1) { grid-column: 2 !important; grid-row: 1 !important; }
  :root:root .dx-feature-card > div:not(.dx-feature-icon):nth-of-type(2) { grid-column: 1 / -1 !important; grid-row: 2 !important; }
  :root:root .dx-feature-card:hover { transform: none !important; }
}

/* ============================================================================
   5. SIGN-IN / AUTH MODAL — LOGO VISIBILITY
   ----------------------------------------------------------------------------
   Root cause: the DriveX lockup is a WHITE wordmark (only the arrow mark, the
   X and ".lk" carry colour). dx-light-theme.css forces `.al-modal` to
   `background:#FFFFFF`, so "DRIVEX" and the "SELL. RENT. DRIVE." strapline
   were white-on-white — present in the DOM, correctly sized by footer.php's
   `.al-modal-logo img` rule, and invisible.

   The header already solves this with a #041730 plate (see dx-light-theme.css
   ~1153). The same plate is applied here, so the modal matches the header
   instead of introducing a second treatment. The logo asset itself is
   untouched — no recolour, no replacement, no second file.
   ========================================================================== */
.al-modal-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 auto 16px !important;
  padding: 10px 18px !important;
  border-radius: 14px !important;
  background: #041730 !important;
  box-shadow: 0 4px 16px rgba(4, 23, 48, .28) !important;
  /* Text fallback for when no logo image is set — readable on the same plate. */
  font-family: var(--font-head, 'Space Grotesk'), system-ui, sans-serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -.5px !important;
  color: #FFFFFF !important;
  line-height: 1 !important;
}
.al-modal-logo span { color: var(--dx-orange, #F96501) !important; }
.al-modal-logo img {
  display: block !important;
  height: 42px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  /* The source is 997x243; declaring the ratio stops the modal jumping when
     LiteSpeed swaps its lazy-load placeholder for the real file. */
  aspect-ratio: 997 / 243 !important;
}

@media (max-width: 480px) {
  .al-modal-logo { margin: 0 auto 13px !important; padding: 9px 15px !important; border-radius: 12px !important; }
  .al-modal-logo img { height: 34px !important; }
}

/* ============================================================================
   6. TOUCH TARGETS
   ----------------------------------------------------------------------------
   Measured at 390px: the footer utility links render 41x19 / 34x19 / 62x19.
   WCAG 2.5.8 (AA) wants 24x24 minimum, so these were the only controls on the
   page actually under the bar — the small ghost buttons measured 34px high and
   already pass. Padding is used rather than a fixed height so nothing reflows.
   ========================================================================== */
@media (pointer: coarse), (max-width: 768px) {
  :root:root .al-footer-bottom-link {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 24px !important;
    padding: 3px 2px !important;
  }
  /* Brings the small ghost buttons ("View All", "View All Districts", …) from
     34px up to a comfortable 40px without changing their width or type size. */
  :root:root .al-btn.al-btn-sm {
    min-height: 40px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* ============================================================================
   7. WHAT YOU CAN ADVERTISE — TWO ROWS
   ----------------------------------------------------------------------------
   Five cards under `repeat(auto-fit, minmax(230px,1fr))` resolve to five
   241px columns at 1208px — one long thin row where each card is narrower
   than its own body copy is wide. Three columns splits it 3 + 2, which gives
   each card room to breathe and reads as a deliberate block rather than a
   strip. The cards, links, order and copy are untouched.
   ========================================================================== */
:root:root .dx-adtypes-section { padding: 30px 0 34px !important; }

:root:root .dx-adtype-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 13px !important;
}
:root:root .dx-adtype-card {
  align-items: flex-start !important;
  text-align: left !important;
  gap: 6px !important;
  padding: 19px 18px 20px !important;
  border-radius: 15px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--dx-line, #E3EAF3) !important;
  box-shadow: 0 1px 3px rgba(14, 28, 49, .06) !important;
}
:root:root .dx-adtype-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 26px rgba(7, 54, 122, .12) !important;
  border-color: rgba(7, 54, 122, .20) !important;
}
:root:root .dx-adtype-icon {
  align-self: flex-start !important;
  width: 42px !important; height: 42px !important; min-width: 42px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin-bottom: 4px !important;
  border-radius: 12px !important;
  font-size: 20px !important;
  background: linear-gradient(150deg, rgba(7, 54, 122, .10), rgba(249, 101, 1, .10)) !important;
  border: 1px solid rgba(7, 54, 122, .16) !important;
  color: var(--dx-blue, #07367A) !important;
}
:root:root .dx-adtype-title {
  font-family: var(--font-head, 'Space Grotesk'), system-ui, sans-serif !important;
  font-size: 15px !important; font-weight: 700 !important;
  letter-spacing: -.2px !important; line-height: 1.3 !important;
  color: var(--dx-ink, #0D1B2E) !important;
}
:root:root .dx-adtype-desc {
  font-size: 12.5px !important; line-height: 1.55 !important;
  color: var(--dx-ink-2, #41546E) !important;
}
:root:root .dx-adtype-cta {
  margin-top: 4px !important;
  font-size: 12.5px !important; font-weight: 700 !important;
  color: var(--dx-blue, #07367A) !important;
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
}

@media (max-width: 900px) {
  :root:root .dx-adtype-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 11px !important; }
}
@media (max-width: 560px) {
  :root:root .dx-adtypes-section { padding: 24px 0 26px !important; }
  :root:root .dx-adtype-grid { grid-template-columns: 1fr !important; gap: 9px !important; }
  /* Same compact row treatment as the Why DriveX cards, so the two sections
     behave identically on a phone. */
  :root:root .dx-adtype-card {
    display: grid !important;
    grid-template-columns: 38px 1fr !important;
    column-gap: 11px !important; row-gap: 3px !important;
    align-items: center !important;
    padding: 14px 14px 15px !important;
  }
  :root:root .dx-adtype-icon {
    grid-column: 1 !important; grid-row: 1 !important;
    width: 38px !important; height: 38px !important; min-width: 38px !important;
    margin-bottom: 0 !important; font-size: 18px !important; border-radius: 11px !important;
  }
  :root:root .dx-adtype-title { grid-column: 2 !important; grid-row: 1 !important; font-size: 14px !important; }
  :root:root .dx-adtype-desc  { grid-column: 1 / -1 !important; grid-row: 2 !important; font-size: 12px !important; }
  :root:root .dx-adtype-cta   { grid-column: 1 / -1 !important; grid-row: 3 !important; font-size: 12px !important; }
  :root:root .dx-adtype-card:hover { transform: none !important; }
}

/* ============================================================================
   8. QUICK-SEARCH BAR — ONE BOX, NOT TWO
   ----------------------------------------------------------------------------
   Measured on /vehicles/?vehicle_category=cars at 1440px:

       .dx-sf-control (wrapper)  233x46  border 1px solid rgb(203,215,230)  r10  #FFF
       inner <input>             181x44  border 1px solid rgb(203,215,230)  r10  #FFF

   Identical border, identical radius, identical background, 1px apart — two
   concentric rounded boxes per field, which is the "two boxes stacked
   together" report. The wrapper is the intended field (it carries the leading
   icon); the inner control is picking up the design system's generic
   input/select border.

   So: the wrapper keeps the border, the control inside goes flat. Purely
   visual — no field name, value, form action, query or handler is touched.
   ========================================================================== */
:root:root .dx-search-form .dx-sf-control {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--dx-line-strong, #CBD7E6) !important;
  border-radius: 10px !important;
  padding: 0 12px !important;
  box-shadow: none !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
}

/* The inner control becomes a plain text layer inside that one box. */
:root:root .dx-search-form .dx-sf-control > input,
:root:root .dx-search-form .dx-sf-control > select,
:root:root .dx-search-form .dx-sf-control input[type="search"],
:root:root .dx-search-form .dx-sf-control input[type="text"],
:root:root .dx-search-form .dx-sf-control input[type="number"],
:root:root .dx-search-form .dx-sf-control select {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  min-height: 42px !important;
  height: 42px !important;
  width: 100% !important;
  min-width: 0 !important;
  font-size: 14px !important;
  color: var(--dx-ink, #0D1B2E) !important;
  -webkit-appearance: none;
  appearance: none;
}
/* Native select arrow removed above, so draw one — otherwise the dropdowns
   lose their affordance. */
:root:root .dx-search-form .dx-sf-control > select {
  padding-right: 20px !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235B6B82' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: 12px !important;
}

/* Focus moves to the single visible box instead of the now-invisible inner
   control, so keyboard users still get a clear ring. */
:root:root .dx-search-form .dx-sf-control:focus-within {
  border-color: var(--dx-blue, #07367A) !important;
  box-shadow: 0 0 0 3px rgba(7, 54, 122, .14) !important;
}

/* The leading glyph is part of the field, not a separate control. */
:root:root .dx-search-form .dx-sf-control > i,
:root:root .dx-search-form .dx-sf-icon {
  flex: 0 0 auto !important;
  font-size: 16px !important;
  line-height: 1 !important;
  color: var(--dx-orange, #F96501) !important;
  opacity: .95 !important;
}

/* The same doubling appears in the sidebar filter panel: a bordered field
   wrapper around an already-bordered input. */
:root:root .al-filter-panel .dx-sf-control,
:root:root .al-filters .dx-sf-control { padding: 0 12px !important; }
:root:root .al-filter-panel .dx-sf-control > input,
:root:root .al-filter-panel .dx-sf-control > select,
:root:root .al-filters .dx-sf-control > input,
:root:root .al-filters .dx-sf-control > select {
  border: 0 !important; background: transparent !important; box-shadow: none !important;
}

@media (max-width: 768px) {
  :root:root .dx-search-form .dx-sf-control { padding: 0 11px !important; }
  :root:root .dx-search-form .dx-sf-control > input,
  :root:root .dx-search-form .dx-sf-control > select {
    min-height: 40px !important; height: 40px !important;
    padding-left: 0 !important;   /* the stacked-bar rule re-added 11px here */
    font-size: 15px !important;   /* >=16px avoids iOS zoom; 15 matches the design scale */
  }
}

/* ============================================================================
   9. BROWSE BY BRAND — TWO ROWS
   ----------------------------------------------------------------------------
   `repeat(auto-fill, minmax(126px,1fr))` resolved to eight columns at 1208px,
   so the eight visible brands sat in one 141px-wide strip. Four columns puts
   them in a balanced 4 + 4, and the "Show N more brands" toggle then fills
   rows three and four. Brands, order, logos, links and the toggle are
   unchanged — only the column count.
   ========================================================================== */
:root:root .hp-brand-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
:root:root .hp-brand-item { min-height: 96px !important; }

@media (max-width: 1024px) { :root:root .hp-brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 560px)  {
  :root:root .hp-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px !important; }
  :root:root .hp-brand-item { min-height: 84px !important; }
}

/* Advertise page: four posting steps become 2 x 2 (see page-advertise.php). */
@media (max-width: 700px) {
  :root:root .dx-advertise-steps { grid-template-columns: 1fr !important; }
}

/* ============================================================================
   8. HEADER — AUTHORITATIVE POSITION + RESERVED SPACE
   ----------------------------------------------------------------------------
   Investigated after a report of the header briefly appearing mid-page while
   loading. Measured across 5 pages x 11 widths, under slow 4G + 4x CPU, cache
   disabled, CSS delayed 4s, CSS blocked entirely, and reload-while-scrolled:
   `.al-nav` reported top=0 on every sampled frame, so the flash could not be
   reproduced in Chromium. What the measurements DID find is fixed here.

   1. RESERVED SPACE DID NOT MATCH THE HEADER.
      Below 768px the header is position:fixed and dx-uiux-improvements.css
      reserved `body{padding-top:60px}` — but the header actually renders 62px
      tall. Every mobile page began its content 2px underneath the header
      (measured at 768/430/414/390/375/360 on all five pages). Both values now
      come from one custom property, so they cannot drift apart again.

   2. THE POSITION IS DECLARED HERE, NOT INFERRED.
      The position model lived in two files (sticky in style.css, fixed in
      dx-uiux-improvements.css). Restating it in this top layer keeps the
      header's geometry correct from the first painted frame regardless of how
      LiteSpeed orders or combines the other stylesheets — this file already has
      a documented history of combine dropping a plain rule. Values are
      identical to what the browser already computes, so nothing moves.
   ========================================================================== */
:root {
  --dx-nav-h: 72px;          /* desktop header height */
  --dx-nav-h-sm: 62px;       /* header height below 768px */
}

/* Desktop: sticky, in normal flow, so no reserved space is needed. */
:root:root .al-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--dx-nav-h);
}

@media (max-width: 768px) {
  /* Phones keep position:fixed. `html, body { overflow-x: hidden }` (the
     horizontal-overflow safety net) turns the body into a scroll container and
     breaks position:sticky on mobile browsers, so fixed is the correct model
     here — but it takes the header out of flow, which is why the padding below
     must match the height exactly. */
  :root:root .al-nav {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    width: 100%;
    height: var(--dx-nav-h-sm) !important;
    z-index: 1000;
  }
  :root:root body,
  :root:root body.admin-bar {
    padding-top: var(--dx-nav-h-sm) !important;
  }
}

/* Scroll elevation. Previously js/dx-premium.js wrote an inline
   `box-shadow: 0 4px 32px rgba(0,0,0,.5)` and js/main.js wrote an inline
   `background: rgba(10,12,15,.98)` — both dark-theme leftovers that are only
   invisible today because the light theme wins on !important. The JS now
   toggles this class instead, so the elevation is defined once, in CSS, in the
   light palette. */
:root:root .al-nav.is-scrolled {
  box-shadow: 0 2px 12px rgba(7, 54, 122, .10) !important;
}