/**
 * ETM mobile overrides — loaded LAST so it wins.
 * Fixes (2026-06-05): header logo+icons, dashboard nav/stats, profile info order,
 * directory trust/category boxes blocking listings.
 */

/* ============================================================
   1. HEADER — bigger logo left, mail + call icons right
   ============================================================ */
@media (max-width: 860px) {
  /* tighten the nav bar so the logo has room and never clips */
  nav.etm-live-nav { min-height: 74px !important; }
  nav.etm-live-nav > .wrap {
    padding: 0 14px !important; gap: 10px !important; min-height: 74px !important;
  }
  nav.etm-live-nav .logo { overflow: visible !important; flex: 0 0 auto !important; }
  /* bigger, never-clipped logo */
  nav.etm-live-nav .logo .etm-logo-svg {
    width: 210px !important; max-width: 54vw !important;
  }
  nav.etm-live-nav .logo .etm-logo-svg svg { overflow: visible !important; }
  nav.etm-live-nav,
  nav.etm-live-nav > .wrap,
  .tcuk-secondary-nav,
  .tcuk-secondary-nav > .wrap {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
  .tcuk-secondary-nav {
    margin-top: 4px !important;
    overflow: hidden !important;
  }
  .tcuk-secondary-nav > .wrap {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* mobile quick-contact icons (mail + call) shown only on mobile */
  .etm-mobile-actions { display: inline-flex !important; align-items: center; gap: 8px; margin-left: auto; }
  .etm-mobile-actions a {
    width: 42px; height: 42px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22);
    color: #fff; text-decoration: none;
  }
  .etm-mobile-actions a:active { background: rgba(255,255,255,.18); }
  .etm-mobile-actions a svg { width: 20px; height: 20px; }
  /* nudge the hamburger to sit after the icons */
  nav.etm-live-nav .etm-nav-toggle { margin-left: 4px !important; }
}
@media (min-width: 861px) { .etm-mobile-actions { display: none !important; } }

/* Mobile home hero: put the quote box directly under the heading, with the
   intro paragraph below it (form first, supporting copy second). */
@media (max-width: 768px) {
  .hero .hero-content { display: flex; flex-direction: column; }
  .hero .hero-content h1 { order: 1; }
  .hero .hero-content .hero-help-box { order: 2; margin-top: 4px; }
  .hero .hero-content .sub { order: 3; margin-top: 16px; }
  .hero .hero-content .trust-row { order: 4; }
}

/* keep the dark utility topbar usable: let the phone/email wrap, hide the long
   "logged in as" string so the action buttons stay reachable */
@media (max-width: 860px) {
  /* Show the add-business register CTA on mobile for logged-out visitors —
     they're the audience for it and their topbar has room (phone/email hidden).
     Logged-in users keep it hidden; their utility bar (inbox/dashboard/logout)
     is busier. The bar wraps so it never overflows on the narrowest phones. */
  body:not(.logged-in) .topbar .left { display: block !important; font-size: 11px !important; line-height: 1.3; white-space: nowrap !important; }
  body.logged-in .topbar .left { display: none !important; }
  .topbar .wrap { flex-wrap: wrap; row-gap: 4px; }
  .topbar .right { gap: 8px !important; flex-wrap: wrap; justify-content: flex-end; }
  .topbar .right > span:first-child { font-size: 11px !important; }
  .etm-util-id { display: none !important; }
}

/* ============================================================
   2. DASHBOARDS — readable tab strip + 2-up stat cards
   ============================================================ */
@media (max-width: 768px) {
  /* tab strip: comfortable scroll, no cramming */
  .etm-dash-nav { gap: 8px !important; padding-bottom: 6px !important; }
  .etm-dash-nav a {
    font-size: 13.5px !important; padding: 11px 15px !important;
    min-height: 46px !important; flex: 0 0 auto !important;
  }
  .etm-dash-nav a .etm-ico { width: 17px !important; height: 17px !important; }
  /* relative (not static) so the right-edge scroll-fade :after can anchor here */
  .etm-dash-side { position: relative !important; overflow: hidden !important; }

  /* stat cards stay 2-up and compact instead of giant single column */
  .etm-stat-row { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .etm-stat-card { padding: 14px 14px !important; }
  /* 17px keeps long text values (e.g. "Unclaimed") on one line clear of the icon */
  .etm-stat-num { font-size: 17px !important; line-height: 1.25 !important; padding-right: 36px !important; }
  .etm-stat-lbl { font-size: 12px !important; }

  /* dashboard header: stack neatly, ring + actions below the identity */
  .etm-dash-header { flex-wrap: wrap !important; gap: 14px !important; }
  .etm-dh-side { width: 100% !important; flex-direction: row !important;
    align-items: center; justify-content: flex-start; gap: 12px; flex-wrap: wrap; }
  .etm-dh-side .etm-btn { flex: 0 0 auto; }
}
@media (max-width: 420px) {
  .etm-stat-row { grid-template-columns: 1fr 1fr !important; }
}

/* ============================================================
   3. PROFILE — push contact + quick facts ABOVE the long body
   ============================================================ */
@media (max-width: 900px) {
  .etm-profile-grid { display: flex !important; flex-direction: column !important; }
  .etm-sidebar {
    order: -1 !important; position: static !important;
    width: 100% !important; margin-bottom: 18px;
  }
  .etm-sidebar-sticky { position: static !important; }
  /* contact card first, then quick facts, share last within the sidebar */
  .etm-contact-card { order: 1; }
}

/* ============================================================
   4. DIRECTORY — stop trust + category boxes burying listings
   ============================================================ */
@media (max-width: 620px) {
  /* trust/value props: compact 2x2, icon + title only (drop the long copy) */
  .etm-dir2-values { grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-bottom: 22px !important; }
  .etm-dir2-value { flex-direction: row !important; align-items: center !important;
    gap: 10px !important; padding: 12px 12px !important; border-radius: 13px !important; }
  .etm-dir2-value-ico { width: 38px !important; height: 38px !important; border-radius: 11px !important; }
  .etm-dir2-value-ico svg { width: 19px !important; height: 19px !important; }
  .etm-dir2-value-txt strong { font-size: 13.5px !important; margin: 0 !important; }
  .etm-dir2-value-txt span { display: none !important; } /* hide descriptions on mobile */

  /* category cards: keep 2-up and compact, not full-width stacks */
  .etm-dir2-browse-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .etm-dir2-browse-card { padding: 14px 13px !important; gap: 10px !important; border-radius: 13px !important; }
  .etm-dir2-browse-ico { transform: scale(.85); }
  .etm-dir2-browse-name { font-size: 13px !important; }
  .etm-dir2-browse-count { font-size: 11px !important; }

  /* listing cards readable on phones */
  .etm-rcard { flex-direction: column !important; }
  .etm-rcard-aside { width: 100% !important; }
}

/* ============================================================
   5. MOBILE DRAWER + PROFILE WIDTH POLISH
   ============================================================ */
@media (max-width: 1024px) {
  nav.etm-live-nav .wrap > ul {
    padding-left: 20px !important;
    padding-right: 20px !important;
    min-height: calc(100vh - 86px) !important;
  }
  nav.etm-live-nav .wrap > ul > li > a {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  nav.etm-live-nav .nav-drop .drop-menu {
    padding-left: 26px !important;
    padding-right: 8px !important;
  }
  nav.etm-live-nav .nav-drop .drop-menu .tm-drop-list li a {
    padding-left: 10px !important;
    padding-right: 8px !important;
  }
}

@media (max-width: 860px) {
  nav.etm-live-nav > .wrap {
    padding-top: 8px !important;
    padding-bottom: 10px !important;
  }
  body.etm-nav-open nav.etm-live-nav .logo {
    margin-bottom: 4px !important;
  }
}

@media (max-width: 900px) {
  .etm-profile-page,
  .etm-profile-grid,
  .etm-profile-body,
  .etm-profile-grid > *,
  .etm-profile-page .etm-card,
  .etm-sidebar,
  .etm-sidebar-sticky {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .etm-profile-page .etm-card {
    overflow-wrap: anywhere !important;
    overflow: hidden !important;
  }
}

/* Directory filter feedback: gives mobile users an immediate app-like response
   while the server-rendered results page loads. */
.etm-dir2-search.is-loading,
.etm-dir2-filters form.is-loading {
  opacity: .68;
  pointer-events: none;
}
.etm-dir2-search.is-loading button[type="submit"],
.etm-dir2-filters form.is-loading button[type="submit"] {
  position: relative;
}
.etm-dir2-search.is-loading button[type="submit"]::after,
.etm-dir2-filters form.is-loading button[type="submit"]::after {
  content: "";
  width: 14px;
  height: 14px;
  margin-left: 8px;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff;
  border-radius: 999px;
  animation: tcuk-spin .7s linear infinite;
}
@keyframes tcuk-spin { to { transform: rotate(360deg); } }