/* DriveX — touch target sizing for the header/nav.
 *
 * Measured on the live site: the header bar is 72px tall on laptop widths and
 * 62px at 768px and below, but the controls inside it are only 38-42px high.
 * That is under the 44px minimum a finger needs, on exactly the widths where
 * the site is most likely to be used on a touchscreen.
 *
 * WHY A PSEUDO-ELEMENT AND NOT PADDING
 * ------------------------------------
 * Growing the controls themselves — min-height, or padding with a negative
 * margin — would work, but "Post Your Ad" and the ghost button both paint a
 * background and a border, so a taller box is a visibly taller button. The
 * brief was to fix the tap target WITHOUT changing the header design.
 *
 * An absolutely-positioned, fully transparent ::before centred on each control
 * grows the area the browser hit-tests while occupying no layout space and
 * painting nothing. Clicks landing on a pseudo-element are dispatched to its
 * parent, so the behaviour is identical — the target is simply bigger.
 *
 * ::before specifically: on this site .al-nav-link::after carries the active
 * underline and .al-btn::after the hover shine (both currently disabled by
 * dx-ds.css). Verified in the browser that ::before is unused on all four
 * selectors — content resolves to none, or display to none — so taking it over
 * cannot disturb anything that is drawn today. .al-btn.loading::before IS the
 * loading spinner, hence the :not(.loading) guard.
 *
 * The !important is required: dx-ds.css sets `.al-btn::before { display:none
 * !important }`, and this file loads after it.
 */

.al-nav .al-nav-link,
.al-nav .al-btn,
.al-nav .al-logo {
  position: relative;
}

.al-nav .al-nav-link::before,
.al-nav .al-btn:not(.loading)::before,
.al-nav .al-logo::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
  /* Purely a hit area: nothing is painted and nothing is measured. */
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  pointer-events: auto;
  z-index: 0;
}

/* Keep the real content above the transparent hit layer so text and icons
   remain selectable and the pseudo never covers them. */
.al-nav .al-nav-link > *,
.al-nav .al-btn > *,
.al-nav .al-logo > * {
  position: relative;
  z-index: 1;
}

/* ===========================================================================
   ADMIN PORTAL — touch targets (monthly QA, 2026-09-18)
   ---------------------------------------------------------------------------
   Measured on the live admin portal at 375px and 320px as a logged-in
   administrator. The layout itself is sound: zero horizontal scroll and zero
   overflowing elements at both widths. What IS under-sized is the controls:

     .al-search-tab  (the 13 admin tab buttons)  38px tall
     .al-btn in the admin cards / toolbars       40px tall

   both below the 44px minimum, on the screens where the portal is most likely
   to be used one-handed.

   Same transparent-::before technique as the header block above: the hit area
   grows to 44px while the painted button is untouched, so the admin portal
   looks byte-for-byte identical on every width — desktop included — and only
   the area the browser hit-tests changes.

   `display:…!important` is required because dx-ds.css:367 sets
   `.al-btn::before { display:none !important }`.

   Scoped to <=768px: on a mouse pointer a 38px target is already fine, and
   leaving desktop alone keeps the blast radius at zero there.
   =========================================================================== */
@media (max-width: 768px) {

  .al-search-tabs .al-search-tab,
  .al-admin-card .al-btn,
  .al-admin-card-header .al-btn {
    position: relative;
  }

  .al-search-tabs .al-search-tab::before,
  .al-admin-card .al-btn:not(.loading)::before,
  .al-admin-card-header .al-btn:not(.loading)::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
    /* Hit area only — paints nothing, measures nothing, shifts nothing. */
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    pointer-events: auto;
    z-index: 0;
  }

  /* Keep real content above the transparent layer so labels and icons stay
     selectable and the pseudo never paints over them. */
  .al-search-tabs .al-search-tab > *,
  .al-admin-card .al-btn > *,
  .al-admin-card-header .al-btn > * {
    position: relative;
    z-index: 1;
  }
}

/* --- remaining admin-portal controls -------------------------------------
   Three groups the block above does not reach:

     .al-hdr-msg            the header "messages" icon, 38x36 (site-wide)
     toolbar .al-btn-sm     "WP Admin", "Add Vehicle", "Configure" … 40px tall.
                            That toolbar is an inline-styled <div> with no class
                            of its own, so it is scoped by the page-template body
                            class instead — keeping the rule off every other page.
     input.al-list-cb       bulk-select checkboxes, 16x16. The worst offenders
                            in the portal: a 16px box is roughly a third of a
                            fingertip. The hit area is widened to 40px and
                            centred; the painted checkbox stays 16px.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {

  .al-hdr-msg,
  body.page-template-page-admin-dashboard .al-btn-sm,
  body.page-template-page-admin-dashboard input.al-list-cb {
    position: relative;
  }

  .al-hdr-msg::before,
  body.page-template-page-admin-dashboard .al-btn-sm:not(.loading)::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    pointer-events: auto;
    z-index: 0;
  }

  .al-hdr-msg > *,
  body.page-template-page-admin-dashboard .al-btn-sm > * {
    position: relative;
    z-index: 1;
  }

}

/* ---------------------------------------------------------------------------
   BULK-SELECT CHECKBOXES  (.dx-cb-hit wrapper)
   ---------------------------------------------------------------------------
   A checkbox is a replaced element: it cannot carry a ::before, so the
   hit-area trick used everywhere above does not work on it. Padding the input
   itself does not help either — margins are not clickable, so the target stays
   the size of the box.

   The one mechanism that genuinely enlarges a checkbox's hit area without
   JavaScript is a wrapping <label>: the browser forwards clicks anywhere in
   the label to the checkbox inside it. page-admin-dashboard.php now wraps each
   one in <label class="dx-cb-hit">; this sizes that wrapper.

   DESKTOP IS DELIBERATELY UNCHANGED. The wrapper reproduces the exact geometry
   the inline style used to set (16x16, margin-top:18px, flex-shrink:0), so the
   admin list renders pixel-identically on desktop. Only <=768px gets a real
   44x44 target.
   --------------------------------------------------------------------------- */
.dx-cb-hit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 18px;          /* matches the previous inline style exactly */
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.dx-cb-hit .al-list-cb {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

@media (max-width: 768px) {
  .dx-cb-hit {
    width: 44px;
    height: 44px;
    /* Re-centred against the row now that the box is 44px tall, so the
       checkbox still sits beside the thumbnail rather than below it. */
    margin-top: 4px;
  }
  /* A slightly larger painted box as well — 16px is hard to aim at on glass. */
  .dx-cb-hit .al-list-cb {
    width: 22px;
    height: 22px;
  }
}