/**
 * DealerPro Elite — Layout primitives
 *
 * Site shell, header, navigation, footer, mobile menu.
 * Loaded after base.css.
 *
 * @package DealerPro_Elite
 * @since 2.0.0
 */

/* ─── SHELL (page-width containers) ─────────────────────── */
.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--s-6);
}
.shell-narrow {
  max-width: var(--shell-narrow);
  margin: 0 auto;
  padding: 0 var(--s-6);
}
/* Tighten shell padding on very small phones so inventory cards
   (minmax 280px) don't overflow the viewport on 320px iPhone SE.
   Standard pages keep more padding for comfortable line-length;
   320px gets the smaller padding-to-content tradeoff. */
@media (max-width: 380px) {
  .shell,
  .shell-narrow {
    padding: 0 var(--s-4); /* 16px instead of 24px */
  }
}

/* ─── SECTION (vertical rhythm wrappers) ────────────────── */
.section {
  padding: var(--s-12) 0;
}
.section--featured-moment {
  padding: var(--s-20) 0;
}
.section--bg-1 {
  background: var(--bg-1);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 720px) {
  .section { padding: var(--s-7) 0; }
}

/* ─── TOPBAR (phone / hours / location strip) ───────────── */
.topbar {
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  font-size: var(--t-xs);
  color: var(--text-muted);
  padding: var(--s-2) 0;
}
.topbar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-6);
}
.topbar__left,
.topbar__right {
  display: flex;
  gap: var(--s-6);
  align-items: center;
}
.topbar__item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
/* Tel/mailto links inside the topbar — inherit the item layout but make it
   tappable on mobile (audit #10 found the topbar phone was plain text). */
.topbar__item--link {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}
.topbar__item--link:hover {
  color: var(--accent);
}
.topbar__item svg {
  width: 12px;
  height: 12px;
  opacity: 0.7;
  color: var(--accent);
}
.topbar__live {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--success);
}
.topbar__live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
}

/* Live "Open now / Closed" status pill — green when open, red when
   closed. Sub-label shows "Closes 6PM" / "Reopens Mon 8AM" so the
   user knows the boundary. Same dot pattern as topbar__live for
   visual consistency. */
.topbar__status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-xs);
  font-weight: 500;
}
.topbar__status strong {
  font-weight: 700;
}
.topbar__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.topbar__status--open {
  color: var(--success);
}
.topbar__status--open strong { color: var(--success); }
.topbar__status--open .topbar__status-dot {
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
  /* Subtle pulse so the "live" cue reads at a glance — without it the
     pill blends into all the other static topbar items. */
  animation: dpelite-status-pulse 2s ease-in-out infinite;
}
.topbar__status--closed {
  color: var(--cta);
}
.topbar__status--closed strong { color: var(--cta); }
.topbar__status--closed .topbar__status-dot {
  background: var(--cta);
}
.topbar__status-sub {
  color: var(--text-muted);
  font-weight: 400;
}
@keyframes dpelite-status-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .topbar__status--open .topbar__status-dot { animation: none; }
}

@media (max-width: 720px) {
  .topbar { display: none; }
}

/* ─── HEADER (sticky, translucent, blur backdrop) ───────── */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-dropdown);
  background: rgba(var(--bg-rgb), 0.85);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
/* WP admin bar offset for logged-in admins viewing the front-end. Without
   this, the sticky header floats UNDER the 32px (or 46px on mobile)
   admin bar and the dealer can't reach the nav from the keyboard.
   Mirrors the offset core's `html.wp-toolbar` applies to `<body>`. */
.admin-bar .header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .header { top: 46px; }
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* v2.1.10: tightened so the bar "hugs" the full-size (2x) logo — the only
     vertical space reclaimable without shrinking the logo. Was var(--s-4)=16px. */
  padding: 5px 0;
  gap: var(--s-6);
}
.header__cta {
  display: flex;
  gap: var(--s-2);
  align-items: center;
}

/* ─── HEADER SEARCH BAR ──────────────────────────────────
 * Compact search anchored in the header CTA cluster.
 *
 * Previous implementation (pill + width:220→280 on focus) had three issues
 * the dealer flagged as "looks weird":
 *   1. Width expand on focus pushed Saved/Phone/Hamburger 60px to the
 *      right — layout shift every time the user clicked the input.
 *   2. `border-radius: var(--r-full)` (9999px) + `border: var(--border)`
 *      (rgba 0.06) read as a floating ghost rather than an integrated
 *      control. The pill shape clashes with the .header__saved circle
 *      visually because both share `--r-full` but at different scales.
 *   3. Default 220px is narrow for a placeholder of "Search inventory…",
 *      so the input read as half-finished.
 *
 * Fix: fixed 260px width, `--r-md` softer rounding (matches inputs across
 * the rest of the theme), `--border-strong` for visible anchoring,
 * subtle hover/focus feedback that doesn't shift layout (border + bg only).
 * Hidden under 720px (mobile drawer carries the search there).
 */
.header__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 0 var(--s-3) 0 var(--s-3);
  height: 36px;
  width: 260px;
  flex-shrink: 0;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.header__search:hover {
  background: var(--bg-3);
}
.header__search:focus-within {
  border-color: var(--accent-border);
  background: var(--bg-3);
  /* Subtle ring so the focus state reads at-a-glance, but without
     the old width-expand layout-shift. */
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.header__search svg {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  flex-shrink: 0;
}
/* Specificity bump: `input[type="search"]` gives this rule (0,2,1) so it
   wins against the global form-input declaration in components.css that
   styles `input[type="search"]` (0,1,1) sitewide. Without the bump, the
   global rule wins on tie-breaking (later in cascade) and the header
   search inherits the form-style background + 46px height — creating
   the visible "double pill" the dealer flagged. */
.header__search input,
.header__search input[type="search"] {
  /* CRITICAL: kill the native `<input type="search">` appearance.
     On macOS/iOS Safari + Chrome, search inputs ship with a built-in
     rounded grey background that paints OVER our transparent background.
     Combined with the global `input[type="search"]` form-style rule,
     this created two visible overlapping pills. */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
  color: var(--text);
  font-size: var(--t-sm);
  /* Reset the global form-input padding (14px 16px) — that padding
     would push the input to 46px height inside a 36px container. */
  padding: 0;
  height: auto;
  width: auto;
  /* `flex: 1 1 auto` lets the input fill remaining width after the icon
     gutter — replaces the previous `width: 100%` which was technically
     working but fragile when the bar's padding/gap shifts. */
  flex: 1 1 auto;
  min-width: 0;
}
/* Strip the WebKit search-input "x" cancel button — we don't have a
   custom design for it and the default grey-on-grey blob looked like a
   second piece of native chrome inside the field. */
.header__search input[type="search"]::-webkit-search-decoration,
.header__search input[type="search"]::-webkit-search-cancel-button,
.header__search input[type="search"]::-webkit-search-results-button,
.header__search input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}
.header__search input::placeholder {
  color: var(--text-muted);
}
/* Suppress the universal `input:focus-visible` outline (set in components.css)
   for this input — the parent `.header__search:focus-within` already shows
   the focus ring via box-shadow. Without this override, keyboard users would
   see TWO concentric rings (input outline + parent shadow) on Tab focus. */
.header__search input:focus,
.header__search input:focus-visible {
  outline: none;
}

/* ─── HEADER SAVED-LISTINGS BUTTON ───────────────────────
 * Heart icon with a count badge that's populated client-side
 * from localStorage[dpelite_saved] by main.js. Hidden under 720px
 * (saved-list works via the /saved/ page on mobile too — drawer
 * doesn't need a separate icon). */
.header__saved {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  transition: border-color 200ms ease, color 200ms ease;
}
.header__saved:hover { border-color: var(--accent-border); color: var(--accent); }
.header__saved svg { width: 16px; height: 16px; }
/* First-save discovery animation — JS adds `.is-pulsing` for ~1.7s right
   after the user saves their FIRST listing. Pulsing the icon's color +
   scale signals "your saved list lives HERE" without a tutorial overlay.
   Auto-removes (no need to clean up CSS state). */
.header__saved.is-pulsing {
  animation: dpelite-saved-pulse 800ms cubic-bezier(0.2, 0.8, 0.2, 1) 2;
  border-color: var(--cta);
  color: var(--cta);
}
@keyframes dpelite-saved-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 var(--cta-soft); }
  50%      { transform: scale(1.1); box-shadow: 0 0 0 6px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .header__saved.is-pulsing { animation: none; }
}
.header__saved-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-full);
  background: var(--cta);
  color: var(--cta-fg, #fff);
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* Tablet / small-laptop transitional range — the desktop layout fits
   logo + 6 nav links + 260px search + saved + phone + hamburger. At
   <= 1100px that gets pinched (esp. with longer dealer names in the
   logo wordmark). Narrow the search to 200px so the nav doesn't wrap. */
@media (max-width: 1100px) {
  .header__search { width: 200px; }
}
@media (max-width: 720px) {
  .header__search,
  .header__saved { display: none; }
}

/* ─── LOGO (mark + wordmark + sub-line) ─────────────────── */
/* Default sizing here is the *header* logo. The footer overrides
   in the FOOTER section below scale up further (logo is allowed to
   be more prominent in the footer brand column). */
.logo {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-xl); /* was --t-lg (20px) — bumped to 24px so wordmark reads on desktop */
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: inherit;
  line-height: 1;
}

.logo__mark {
  /* SVG fallback (no custom logo uploaded) — kept compact since the
     fallback icon is a single shape that doesn't need much room. */
  width: 56px;
  height: 56px;
  border-radius: var(--r-sm);
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-fg);
  flex-shrink: 0;
  overflow: hidden;
}
.logo__mark svg {
  width: 30px;
  height: 30px;
}
/* When the user uploaded a custom logo, render JUST the image — hide the
   company-name wordmark + "HEAVY EQUIPMENT" sub-line. Real dealership
   logos already include the company name in the artwork, so doubling it
   up makes the header look cluttered. The logo gets ~96px so it's
   readable on its own without the wordmark crutch. */
.logo--custom .logo__mark {
  background: transparent;
  /* v2.1.9: logo ~2x bigger. Was a 96px SQUARE box → a wide/landscape logo
     (e.g. 300×200) got letterboxed to ~96×64 and looked tiny. Now a wider,
     non-square box so the artwork fills the width without an over-tall header. */
  width: 200px;
  height: 128px;
  padding: 2px;
}
/* Hide the wordmark + sub-line when there's a custom logo. The SVG
   fallback (no custom logo uploaded) still shows them so a fresh
   install isn't logo-less + name-less. */
.logo--custom .logo__text {
  display: none;
}
.logo__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.logo__text {
  line-height: 1.05;
}
.logo__sub {
  display: block;
  font-size: 11px; /* was 10px */
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 4px;
}
/* On narrow viewports, scale the header logo back down so it doesn't
   crowd the burger / search / saved icons. Custom logos still get the
   bigger treatment (64px on mobile vs 48px for the SVG fallback). */
@media (max-width: 720px) {
  .logo { font-size: var(--t-lg); gap: var(--s-2); }
  .logo__mark { width: 48px; height: 48px; }
  .logo__mark svg { width: 26px; height: 26px; }
  .logo--custom .logo__mark { width: 140px; height: 92px; } /* v2.1.9: ~2x */
  .logo__sub { font-size: 10px; letter-spacing: 1.5px; }
}

/* ─── NAV (primary navigation, desktop) ─────────────────── */
.nav {
  display: flex;
  gap: var(--s-1);
  align-items: center;
}
.nav__list {
  display: flex;
  gap: var(--s-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list li {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Both fallback .nav__link AND wp_nav_menu <a> items get same style */
.nav__link,
.nav__list a,
.nav__list .menu-item > a {
  display: inline-block;
  padding: var(--s-2) var(--s-4);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--text-soft);
  border-radius: var(--r-sm);
  transition: var(--transition);
  position: relative;
  text-decoration: none;
}
.nav__link:hover,
.nav__list a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}
.nav__link--active,
.nav__list .current-menu-item > a,
.nav__list .current_page_item > a {
  color: var(--accent);
}
.nav__link--active::after,
.nav__list .current-menu-item > a::after,
.nav__list .current_page_item > a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}
@media (max-width: 1024px) {
  .nav { display: none; }
}

/* ─── NAV TOGGLE (hamburger button, mobile only) ────────── */
.nav-toggle {
  display: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  color: var(--text);
}
.nav-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent-border);
}
/* Visual feedback when drawer is open — keyboard users (and sighted users)
   should see the toggle is active, not just relying on the drawer's
   appearance off-screen. */
.nav-toggle[aria-expanded="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent);
}
.nav-toggle svg {
  width: 22px;
  height: 22px;
}
@media (max-width: 1024px) {
  .nav-toggle { display: inline-flex; }
}

/* ─── MOBILE OVERLAY + DRAWER (slide-in menu) ───────────── */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: var(--z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms ease, visibility 320ms ease;
}
.mobile-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(360px, 85vw);
  /* 100vh ignores iOS Safari's collapsing URL bar — drawer gets clipped
     behind it on small screens. 100dvh tracks the dynamic viewport.
     Order matters: 100vh first as fallback for browsers without dvh. */
  height: 100vh;
  height: 100dvh;
  background: var(--bg-1);
  border-left: 1px solid var(--border-strong);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  /* Use transform — keeps drawer out of the document scroll-width when closed
     so we don't get a horizontal scrollbar on every mobile page. */
  transform: translateX(100%);
  visibility: hidden;
  /* Pleasure curve (matches site-wide --transition-pleasure) instead of the
     rigid Material easing so the drawer feels calm rather than utility. */
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 320ms;
  overflow-y: auto;
  /* Stop scroll chaining onto the page body when drawer scrolls to its edges. */
  overscroll-behavior: contain;
  padding: var(--s-7) var(--s-6);
}
.mobile-drawer.is-open,
.mobile-drawer:not([hidden]) {
  transform: translateX(0);
  visibility: visible;
}
/* When the drawer is hidden via the [hidden] HTML attribute, force it back
   off-screen so closed state is unambiguous. */
.mobile-drawer[hidden] {
  display: flex;
  transform: translateX(100%);
  visibility: hidden;
}
.mobile-drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-7);
}
/* Drawer title — promoted from <span> to <h2> for a11y outline + dialog
   labelledby. Override the global h2 sizing (clamp 28-44px) so the small
   menu header stays at body weight rather than dwarfing the close button. */
.mobile-drawer__title {
  margin: 0;
  font-size: var(--t-base);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--text);
}
.mobile-drawer__close {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
  transition: var(--transition);
}
.mobile-drawer__close:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent-border);
}
.mobile-drawer__close svg {
  width: 18px;
  height: 18px;
}
.mobile-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-7);
}
.mobile-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--text);
  transition: var(--transition);
}
.mobile-drawer__link:hover {
  border-color: var(--accent-border);
  transform: translateX(4px);
}
.mobile-drawer__link--active {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-soft);
}
.mobile-drawer__link svg {
  width: 14px;
  height: 14px;
  opacity: 0.5;
}
.mobile-drawer__contact {
  display: grid;
  gap: var(--s-3);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.mobile-drawer__contact-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-sm);
  color: var(--text-soft);
}
.mobile-drawer__contact-row svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
  flex-shrink: 0;
}
/* Lock body scroll while the mobile drawer is open. JS sets `is-drawer-open`
   on body in initMobileDrawer; we also keep `menu-open` as a legacy alias.
   Avoid `position: fixed` because it loses the scroll position on close —
   `overflow: hidden` is enough on modern browsers; iOS Safari users may
   still see slight rubber-banding which is acceptable for a nav drawer. */
body.is-drawer-open,
body.menu-open {
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ─── FOOTER (multi-column with trust badges) ───────────── */
.footer {
  background: var(--bg-1);
  border-top: 1px solid var(--border);
  padding: var(--s-16) 0 var(--s-6);
  margin-top: var(--s-16);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: var(--s-10);
  margin-bottom: var(--s-12);
}
.footer__brand {
  max-width: 360px;
}
/* Footer logo is the marquee mark on the page footer — bumping size so
   it reads cleanly at desktop scale (header keeps its compact size). */
.footer__brand .logo {
  margin-bottom: var(--s-5);
  font-size: var(--t-2xl); /* ~28px */
  gap: var(--s-4);
}
.footer__brand .logo__mark {
  width: 76px;
  height: 76px;
  border-radius: var(--r-md);
}
.footer__brand .logo__mark svg {
  width: 40px;
  height: 40px;
}
/* Custom logos in the footer: dramatically bigger than the SVG fallback
   so detail (dealership name, illustration, flag, etc.) reads clearly.
   Same wordmark-hidden treatment as the header — the logo alone is the
   brand. Bumped to 130px to fill the space the wordmark used to occupy. */
.footer__brand .logo--custom .logo__mark {
  /* v2.1.9: ~2x bigger (was 130px square). */
  width: 280px;
  height: 180px;
  padding: 2px;
}
.footer__brand .logo__sub {
  font-size: 12px;
  margin-top: 6px;
  letter-spacing: 2.5px;
}
@media (max-width: 720px) {
  .footer__brand .logo { font-size: var(--t-xl); gap: var(--s-3); }
  .footer__brand .logo__mark { width: 64px; height: 64px; }
  .footer__brand .logo__mark svg { width: 34px; height: 34px; }
  .footer__brand .logo--custom .logo__mark { width: 210px; height: 140px; } /* v2.1.9: ~2x */
  .footer__brand .logo__sub { font-size: 11px; }
}
.footer__about {
  font-size: var(--t-sm);
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: var(--s-5);
}
.footer__contact {
  display: grid;
  gap: var(--s-3);
}
.footer__contact-row {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  font-size: var(--t-sm);
  color: var(--text-soft);
}
.footer__contact-row svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
  flex-shrink: 0;
}
/* Mockup uses big white H3 column headings, not the small uppercase
   muted style we had before. The new heading is a real heading element so
   it inherits the global H3 size (clamp() in base) — we just clean up
   margins and ensure it's pure white. */
.footer__col h3 {
  font-size: var(--t-lg);
  letter-spacing: -0.01em;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 var(--s-5) 0;
}
.footer__col ul {
  list-style: none;
  display: grid;
  gap: var(--s-3);
  padding: 0;
  margin: 0;
}
.footer__col li {
  list-style: none;
}
.footer__col a {
  font-size: var(--t-sm);
  color: var(--text-soft);
  transition: var(--transition);
  text-decoration: none;
}
.footer__col a:hover {
  color: var(--accent);
}

.footer__trust {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--s-6) 0;
  margin-bottom: var(--s-6);
}
.footer__trust-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-4);
  align-items: stretch;
}
.footer__trust-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  transition: var(--transition);
}
.footer__trust-item:hover {
  border-color: var(--accent-border);
}
.footer__trust-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer__trust-icon svg {
  width: 22px;
  height: 22px;
}
.footer__trust-text {
  line-height: 1.2;
}
.footer__trust-title {
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--text);
  text-transform: uppercase;
}
.footer__trust-sub {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 2px;
}

.footer__bottom {
  padding-top: var(--s-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--t-xs);
  color: var(--text-faint);
  flex-wrap: wrap;
  gap: var(--s-3);
}
.footer__bottom-links {
  display: flex;
  gap: var(--s-5);
}

@media (max-width: 1024px) {
  .footer__trust-inner { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8);
  }
  .footer__bottom {
    flex-direction: column;
    gap: var(--s-3);
    text-align: center;
  }
}
@media (max-width: 540px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__trust-inner { grid-template-columns: 1fr; }
}

/* ─── MOBILE LAYOUT TOUCH-TARGET FIXES ──────────────────── */
@media (max-width: 720px) {
  /* Footer links: enlarge hit area to 44px without changing visual size */
  .footer__col a,
  .footer__bottom a,
  .footer__bottom__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Drawer rows */
  .mobile-drawer__contact-row a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Logo: vertical padding for hit area */
  .logo { padding: 6px 0; }
}

/* ─── FOOTER CENTERING ON MOBILE/TABLET (<1024px) ───────── */
@media (max-width: 1024px) {
  .footer__grid { text-align: center; }
  .footer__brand {
    max-width: 100%;
    margin: 0 auto;
  }
  .footer__brand .logo { justify-content: center; }
  .footer__contact-row { justify-content: center; }
  .footer__about {
    margin-left: auto;
    margin-right: auto;
  }
  .footer__col ul { justify-items: center; }
}

/* ─── MOBILE HEADER FITS IN 375px VIEWPORT ──────────────── */
@media (max-width: 720px) {
  /* Header inner gap tightened so logo + cta + toggle all fit. */
  .header__inner {
    gap: var(--s-3);
    padding: 12px 0;
  }
  /* Hide phone CTA from header on small phones — it's available in drawer + footer + topbar.
     This was the main cause of the hamburger getting pushed off-screen. */
  .header__cta .btn--call {
    display: none;
  }
  .header__cta {
    margin-left: auto;
  }
  /* Logo text — keep on a single line. Slight font shrink + nowrap fixes the
     "AV / Equipments / HEAVY / EQUIPMENT" 4-line break on phones. */
  .logo {
    flex-shrink: 1;
    min-width: 0;
  }
  .logo__text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
  }
  .logo__sub {
    font-size: 9px;
    white-space: nowrap;
  }
  .logo__mark {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }
  .nav-toggle {
    flex-shrink: 0;
  }
}
@media (max-width: 380px) {
  /* Tightest phone breakpoint — below this, the topbar's own info chips
     can also break. Reduce header padding even more. */
  .header__inner { padding: 10px 0; gap: var(--s-2); }
  .logo__text { font-size: 15px; }
}

/* ─── MOBILE / SAFE-AREA HARDENING ───────────────────────
   iOS notch + Dynamic Island insets, and tap-highlight fix.
   Pure additive — no effect on browsers that don't need it. */
.header,
.topbar {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.mobile-drawer {
  padding-top: max(var(--s-7), env(safe-area-inset-top));
  padding-bottom: max(var(--s-6), env(safe-area-inset-bottom));
}
/* iOS Safari: kill the gray flash on tap that overrides our :active styles. */
a, button, [role="button"], .btn, .nav__link, .card {
  -webkit-tap-highlight-color: transparent;
}