/* MostHelt V3.16 — Compact app-style mobile UX for public SEO pages */
:root{
  --mh316-bg:#f5f8f7;
  --mh316-card:#ffffff;
  --mh316-ink:#142b26;
  --mh316-muted:#6c7e79;
  --mh316-green:#087c69;
  --mh316-soft:#edf7f3;
  --mh316-line:#e1e9e6;
}

/* Desktop remains V3.15. This layer intentionally targets tablet/mobile. */
.mh-mobile-menu-btn,.mh-mobile-drawer,.mh-mobile-backdrop,.mh-mobile-more{display:none}

@media (max-width: 760px){
  html{scroll-padding-top:72px}
  body.seo-page,body.seo-hub,body.mh-growth{background:var(--mh316-bg)!important;padding-bottom:env(safe-area-inset-bottom)}
  body.mh-mobile-menu-open{overflow:hidden!important}

  /* App bar */
  .seo-top,.mh-top,.hub-head{
    position:sticky!important;top:0!important;z-index:90!important;
    background:rgba(255,255,255,.96)!important;
    border-bottom:1px solid rgba(225,233,230,.9)!important;
    box-shadow:0 5px 18px rgba(20,43,38,.035)!important;
    backdrop-filter:blur(18px) saturate(150%)!important;
  }
  .seo-top .container,.mh-topin,.hub-nav{
    min-height:58px!important;height:58px!important;padding-block:0!important;
    width:calc(100% - 24px)!important;gap:10px!important;
  }
  .seo-top .logo,.mh-topin>a:first-child,.hub-nav>a:first-child{display:flex;align-items:center;min-width:0}
  .seo-top .logo img,.mh-top img,.hub-nav img{height:26px!important;max-width:124px}
  .seo-top nav,.mh-nav,.hub-nav>div{margin-left:auto!important;gap:7px!important}
  .seo-top nav>a,.mh-nav>a,.hub-nav>div>a{display:none!important}
  .seo-top nav .cta,.mh-nav .mh-pill,.mh-nav .primary,.hub-nav .pill{display:none!important}
  .mh-mobile-menu-btn{
    display:inline-flex!important;align-items:center;justify-content:center;
    width:42px;height:42px;min-width:42px;padding:0;border:1px solid var(--mh316-line);
    border-radius:13px;background:#fff;color:var(--mh316-ink);cursor:pointer;
    box-shadow:0 2px 8px rgba(20,43,38,.025)
  }
  .mh-mobile-menu-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

  .mh-mobile-backdrop{display:block;position:fixed;inset:0;background:rgba(13,32,28,.24);z-index:118;opacity:0;pointer-events:none;transition:opacity .18s ease}
  .mh-mobile-drawer{
    display:block;position:fixed;z-index:119;left:12px;right:12px;top:70px;
    background:#fff;border:1px solid var(--mh316-line);border-radius:22px;padding:10px;
    box-shadow:0 24px 70px rgba(12,50,42,.20);opacity:0;transform:translateY(-8px) scale(.985);
    pointer-events:none;transition:opacity .18s ease,transform .18s ease
  }
  .mh-mobile-menu-open .mh-mobile-backdrop{opacity:1;pointer-events:auto}
  .mh-mobile-menu-open .mh-mobile-drawer{opacity:1;transform:none;pointer-events:auto}
  .mh-mobile-drawer a{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 13px;border-radius:13px;text-decoration:none;color:var(--mh316-ink);font-size:14px;font-weight:800}
  .mh-mobile-drawer a+ a{border-top:1px solid #f0f4f2}
  .mh-mobile-drawer a::after{content:'›';font-size:20px;font-weight:500;color:#8aa099}
  .mh-mobile-drawer a:last-child{margin-top:6px;background:var(--mh316-green);color:#fff;border-top:0}
  .mh-mobile-drawer a:last-child::after{color:#d9f0e9}

  /* Containers */
  .seo-page .container,.seo-hub .container,.mh-container{width:calc(100% - 24px)!important}

  /* Compact app hero */
  .seo-hero,.mh-hero,.hub-hero{padding:20px 0 16px!important;background:var(--mh316-bg)!important}
  .seo-breadcrumb,.mh-breadcrumb{
    flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    white-space:nowrap;margin:0 0 12px!important;padding-bottom:2px;font-size:11px!important;gap:6px!important
  }
  .seo-breadcrumb::-webkit-scrollbar,.mh-breadcrumb::-webkit-scrollbar{display:none}
  .seo-kicker,.mh-kicker,.hub-hero>span{
    padding:5px 8px!important;font-size:9px!important;line-height:1.15!important;letter-spacing:.075em!important;border-radius:999px!important
  }
  .seo-hero h1,.mh-hero h1,.hub-hero h1{
    font-size:clamp(27px,8.5vw,34px)!important;line-height:1.04!important;letter-spacing:-.035em!important;
    margin:9px 0 10px!important;max-width:100%!important;text-wrap:balance
  }
  .seo-hero p,.mh-hero p,.hub-hero p{
    font-size:13px!important;line-height:1.52!important;margin:0!important;color:var(--mh316-muted)!important;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden
  }
  .seo-hero-grid{gap:13px!important}
  .seo-search-link{
    min-height:46px!important;margin-top:13px!important;border-radius:14px!important;padding:9px 12px!important;background:#fff!important;
    font-size:12px!important;box-shadow:none!important
  }
  .seo-search-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .seo-search-link b{font-size:11px;white-space:nowrap}

  /* App-style compact statistics row */
  .seo-stats,.mh-statgrid{
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;margin-top:13px!important
  }
  .seo-stat,.mh-stat{
    min-width:0!important;display:block!important;padding:10px 8px!important;border-radius:14px!important;text-align:left!important;
    background:#fff!important;border:1px solid var(--mh316-line)!important
  }
  .seo-stat strong,.mh-stat strong{font-size:18px!important;line-height:1.05!important;margin-bottom:4px!important}
  .seo-stat span,.mh-stat span{font-size:9px!important;line-height:1.2!important;display:block!important;color:#7a8a85!important}
  .seo-index-note{font-size:11px!important;line-height:1.45!important;margin-top:10px!important}

  /* Main content spacing */
  .seo-layout,.mh-grid,.hub-grid{padding:16px 0 38px!important;gap:14px!important}
  .seo-section,.mh-section{margin-bottom:20px!important}
  .seo-section-head,.mh-section-head{margin-bottom:10px!important;gap:7px!important}
  .seo-section-head h2,.mh-section-head h2,.hub-card h2{font-size:19px!important;line-height:1.12!important;letter-spacing:-.02em!important}
  .seo-section-head p,.mh-section-head p,.hub-card>p{font-size:11px!important;line-height:1.4!important;margin-top:4px!important}
  .seo-count,.mh-chip{padding:5px 8px!important;font-size:9px!important;white-space:nowrap!important}

  /* Compact doctor result card */
  .seo-doctors,.mh-doctors{gap:8px!important}
  .seo-doctor,.mh-doctor{
    position:relative;display:grid!important;grid-template-columns:52px minmax(0,1fr)!important;gap:10px!important;
    padding:12px!important;border-radius:17px!important;align-items:start!important;background:#fff!important;
    border-color:var(--mh316-line)!important
  }
  .seo-avatar,.mh-avatar{width:52px!important;height:52px!important;border-radius:14px!important;font-size:13px!important}
  .seo-doctor .specialty,.mh-doctor .sp{font-size:9px!important;padding:3px 6px!important;border-radius:7px!important;line-height:1.2!important}
  .seo-doctor h3,.mh-doctor h3{font-size:15px!important;line-height:1.2!important;margin:4px 0 3px!important}
  .seo-doctor-meta,.mh-meta{
    font-size:10px!important;line-height:1.35!important;gap:3px 8px!important;margin-top:5px!important;color:#71817c!important;
    display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
  }
  .seo-rating,.mh-rating{
    grid-column:1/-1!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;
    gap:8px!important;min-width:0!important;text-align:left!important;border-top:1px solid #eef3f1!important;
    padding-top:9px!important;margin-top:0!important
  }
  .seo-rating>strong,.mh-rating>strong{font-size:12px!important;line-height:1.2!important;margin:0!important;display:inline!important}
  .seo-rating>small,.mh-rating>small{display:none!important}
  .seo-actions,.mh-actions{
    grid-column:2!important;display:grid!important;grid-auto-flow:column!important;grid-auto-columns:minmax(0,1fr)!important;
    gap:5px!important;justify-content:end!important;margin:0!important;width:auto!important
  }
  .seo-actions a,.seo-actions button,.mh-actions a,.mh-actions button{
    min-height:40px!important;height:40px!important;padding:0 9px!important;border-radius:11px!important;
    font-size:10px!important;line-height:1!important;white-space:nowrap!important;min-width:0!important
  }
  .seo-actions a:last-child,.mh-actions .primary{box-shadow:0 4px 10px rgba(8,124,105,.11)!important}

  /* App rows for specialty/city combinations */
  .mh-list,.hub-combos{gap:7px!important;margin-top:10px!important}
  .mh-linkcard,.hub-combo{
    min-height:58px!important;padding:10px 11px!important;border-radius:15px!important;gap:9px!important;
    background:#fff!important;border:1px solid var(--mh316-line)!important
  }
  .mh-linkcard strong,.hub-combo strong{font-size:13px!important;line-height:1.2!important}
  .mh-linkcard small,.hub-combo small{font-size:9.5px!important;line-height:1.3!important;margin-top:3px!important}
  .mh-linkcard b,.hub-combo b{font-size:17px!important;min-width:18px;text-align:center}

  /* Progressive disclosure on long lists */
  [data-mh-mobile-hidden="1"]{display:none!important}
  .mh-mobile-more{
    display:flex!important;align-items:center;justify-content:center;width:100%;min-height:44px;margin-top:8px;
    border:1px solid var(--mh316-line);border-radius:13px;background:#fff;color:var(--mh316-green);
    font-size:11px;font-weight:900;cursor:pointer
  }

  /* App-like horizontal discovery rails */
  .seo-links,.mh-tags,.hub-tags{
    flex-wrap:nowrap!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:-12px!important;padding:2px 12px 5px!important;gap:7px!important;scroll-snap-type:x proximity
  }
  .seo-links::-webkit-scrollbar,.mh-tags::-webkit-scrollbar,.hub-tags::-webkit-scrollbar{display:none}
  .seo-links a,.mh-tags a,.hub-tags a{
    flex:0 0 auto!important;min-height:36px!important;white-space:nowrap!important;padding:7px 10px!important;
    font-size:10px!important;scroll-snap-align:start
  }

  /* Directory / clinic cards become compact rows */
  .seo-directory,.seo-clinics,.mh-clinics{gap:7px!important}
  .seo-directory-card,.seo-clinic,.mh-clinic{
    padding:12px!important;border-radius:15px!important;background:#fff!important;border-color:var(--mh316-line)!important
  }
  .seo-directory-card h3,.seo-clinic h3,.mh-clinic h3{font-size:13px!important;line-height:1.25!important;margin:3px 0!important}
  .seo-directory-card p,.seo-clinic p,.mh-clinic p{font-size:10px!important;line-height:1.35!important;margin:4px 0 7px!important}
  .seo-directory-card a,.seo-clinic a,.mh-clinic a{font-size:10px!important}

  /* Collapsible mobile side/related panels */
  .seo-side-card,.mh-side .mh-card,.hub-grid aside .hub-card{
    padding:12px!important;border-radius:16px!important;margin-bottom:8px!important;background:#fff!important;border-color:var(--mh316-line)!important
  }
  .seo-side-card h3,.mh-side .mh-card h3,.hub-grid aside .hub-card h2{
    font-size:13px!important;margin:0!important;min-height:38px;display:flex;align-items:center;justify-content:space-between;cursor:pointer
  }
  [data-mh-accordion]:not(.is-open)>:not(.mh-accordion-title){display:none!important}
  [data-mh-accordion].is-open>:not(.mh-accordion-title){margin-top:8px}
  [data-mh-accordion]>.mh-accordion-title::after{content:'+';font-size:18px;line-height:1;color:#78908a;font-weight:500}
  [data-mh-accordion].is-open>.mh-accordion-title::after{content:'−'}
  .mh-note,.seo-note,.mh-disclaimer,.hub-info,.seo-guide,.mh-card{font-size:11px!important;line-height:1.5!important}
  .seo-guide{padding:14px!important;border-radius:16px!important}
  .seo-guide h2{font-size:17px!important;margin-bottom:7px!important}
  .seo-guide p{font-size:11px!important;line-height:1.52!important}

  /* Hub cards */
  .hub-card{padding:13px!important;border-radius:17px!important}
  .hub-card+ .hub-card{margin-top:9px!important}
  .hub-info{margin-top:9px!important;padding:12px!important;border-radius:15px!important}

  /* Compact bottom compare action bar */
  .seo-page .mh-comparebar,.mh-comparebar{
    left:10px!important;right:10px!important;bottom:max(8px,env(safe-area-inset-bottom))!important;
    width:auto!important;transform:translateY(150%)!important;border-radius:16px!important;
    padding:8px 8px 8px 11px!important;gap:7px!important;min-height:54px!important;
    box-shadow:0 14px 38px rgba(12,63,52,.17)!important
  }
  .seo-page .mh-comparebar.show,.mh-comparebar.show{transform:translateY(0)!important}
  .mh-comparebar strong{font-size:11px!important;line-height:1.2!important}
  .mh-comparebar small{display:none!important}
  .mh-comparebar>div:last-child{display:flex;align-items:center;gap:5px;flex-wrap:nowrap!important}
  .mh-comparebar button{min-height:38px!important;padding:0 8px!important;font-size:10px!important}
  .mh-comparebar a{min-height:38px!important;display:inline-flex!important;align-items:center!important;padding:0 11px!important;border-radius:11px!important;font-size:10px!important;white-space:nowrap}

  /* Keep footer light, avoid page ending like desktop brochure */
  .seo-footer,.mh-footer,.hub-footer{padding:18px 0 calc(18px + env(safe-area-inset-bottom))!important;font-size:10px!important}
}

@media (max-width: 390px){
  .seo-page .container,.seo-hub .container,.mh-container{width:calc(100% - 20px)!important}
  .seo-top .container,.mh-topin,.hub-nav{width:calc(100% - 20px)!important}
  .seo-hero h1,.mh-hero h1,.hub-hero h1{font-size:27px!important}
  .seo-stat,.mh-stat{padding:9px 6px!important}
  .seo-stat strong,.mh-stat strong{font-size:17px!important}
  .seo-actions a,.seo-actions button,.mh-actions a,.mh-actions button{padding-inline:7px!important;font-size:9.5px!important}
}

@media (prefers-reduced-motion: reduce){
  .mh-mobile-drawer,.mh-mobile-backdrop{transition:none!important}
}