/**
 * 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: 230px !important; max-width: 62vw !important;
  }
  nav.etm-live-nav .logo .etm-logo-svg svg { overflow: visible !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 provider 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: 11.5px !important; line-height: 1.3; }
  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; }
}

/* 2026-07-24: at phone widths the 230px logo + contact icons + hamburger need 404px,
   so the hamburger sat 14px off screen and every page scrolled sideways. Shrink the
   logo span only below 480px; 860px behaviour above is unchanged. */
@media (max-width: 480px) {
  nav.etm-live-nav .logo .etm-logo-svg { width: 180px !important; max-width: 46vw !important; }
}

@media (max-width: 620px) {
  .etm-auth-header {
    padding: 16px !important;
    gap: 12px !important;
    align-items: flex-start !important;
    flex-direction: column !important;
  }
  .etm-auth-logo .dcc-logo-svg {
    width: 250px !important;
  }
  .etm-auth-back {
    max-width: 100% !important;
    white-space: normal !important;
  }
}