/* E-Joe legacy theme mobile replacement. Desktop is left untouched. */
@media screen and (max-width: 767px) {
  html { overflow-x: clip !important; }
  html, body { margin:0 !important; padding:0 !important; min-width:0 !important; width:100% !important; max-width:100% !important; }
  body { overflow-x: hidden !important; }
  body,body * { box-sizing:border-box; }
  /* Compact self-contained header, injected only on mobile. */
  #ejoe-responsive-header { display:block !important; width:100% !important; max-width:100vw !important; background:#fff !important; padding:12px 14px !important; margin:0 auto 10px !important; border-bottom:2px solid #0091b2 !important; position:relative !important; z-index:10 !important; font:14px/1.4 Arial,sans-serif !important; }
  #ejoe-responsive-header .ejoe-brand { display:block !important; width:max-content !important; max-width:100% !important; color:#17313d !important; font-size:25px !important; font-weight:bold !important; text-decoration:none !important; margin:0 0 10px !important; }
  #ejoe-responsive-header .ejoe-brand span { color:#0094af !important; }
  #ejoe-responsive-header form { display:flex !important; width:100% !important; max-width:100% !important; margin:0 0 11px !important; gap:6px !important; position:static !important; }
  #ejoe-responsive-header input { min-width:0 !important; width:100% !important; flex:1 !important; height:38px !important; font-size:16px !important; border:1px solid #cbd5dd !important; border-radius:3px !important; background:#fff !important; padding:7px !important; }
  #ejoe-responsive-header button { flex:0 0 auto !important; min-width:65px !important; padding:0 12px !important; background:#008db1 !important; color:white !important; border:0 !important; border-radius:3px !important; font-size:14px !important; }
  #ejoe-responsive-header nav { display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:8px 15px !important; width:100% !important; }
  #ejoe-responsive-header nav a { color:#00759b !important; font-size:13px !important; white-space:normal !important; text-decoration:underline !important; }
  .ejoe-original-header-hidden { display:none !important; }
  /* All legacy page columns and wrappers must collapse to viewport. */
  #wrapper,#page,#container,#main,#main-wrap,#main-wrapper,#content-wrap,#content-wrapper,#content,#primary,#secondary,#footer,#site,
  .wrapper,.page-wrap,.site,.site-wrap,.site-container,.container,.main,.main-wrap,.main-wrapper,.site-content,.content-area,.content-wrapper,.content,.inner,.inner-wrap,
  .center,.main-block,.main-column,.left-column,.right-column,.page-content,.columns,.columns-wrap {
    box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;float:none!important;clear:both!important; margin-left:0!important;margin-right:0!important;
  }
  #content,#primary,.content,.content-area,.site-content,.main-content { padding:0 12px!important; }
  #sidebar,#sidebar1,#sidebar-right,#secondary,.sidebar,.widget-area,.right-sidebar,.sidebar-right,aside[role="complementary"] { display:block!important;float:none!important;clear:both!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:16px 0!important; }
  /* Archive article preview: links, image wrappers, and text must stack, not float. */
  .ejoe-mobile-entry { display:block!important; width:100%!important; max-width:100%!important; min-width:0!important; height:auto!important; clear:both!important; overflow:hidden!important; padding-bottom:12px!important; }
  .ejoe-mobile-entry img:not(.emoji), .ejoe-mobile-entry .ejoe-preview-image,
  .ejoe-mobile-entry a.ejoe-preview-anchor { display:block!important;float:none!important;clear:both!important; width:100%!important;max-width:100%!important; min-width:0!important; height:auto!important; margin:0 0 10px!important; position:static!important; left:auto!important; top:auto!important; }
  .ejoe-mobile-entry .ejoe-preview-anchor img { width:100%!important;height:auto!important;max-width:100%!important;object-fit:contain!important; }
  .ejoe-mobile-entry .ejoe-preview-image * { max-width:100%!important; }
  .ejoe-mobile-entry .ejoe-preview-text { display:block!important;float:none!important;clear:both!important;width:100%!important;max-width:100%!important;margin-left:0!important;padding-left:0!important; }
  .ejoe-mobile-entry table,.ejoe-mobile-entry tbody,.ejoe-mobile-entry tr,.ejoe-mobile-entry td { display:block!important;width:100%!important;max-width:100%!important;height:auto!important;float:none!important; }
  .ejoe-mobile-entry > *, .ejoe-mobile-entry p { max-width:100%!important;overflow-wrap:anywhere!important; }
  /* Mobile pagination and footer */
  .wp-pagenavi,.pagination,.pagenavi,.page-navigation,.navigation.pagination,.nav-links,.pages,.paging-navigation,#pagination,#wp_page_numbers,.wp-pagenavi-wrap,.pagination-wrap,.ejoe-mobile-pagination {
    float:none!important;clear:both!important;display:flex!important;flex-wrap:wrap!important;justify-content:center!important;align-items:center!important;gap:5px!important;width:100%!important;max-width:100%!important; height:auto!important; overflow:visible!important;padding:8px 0!important;margin:16px 0!important;
  }
  .wp-pagenavi a,.wp-pagenavi span,.pagination a,.pagination span,.pagenavi a,.pagenavi span,.page-numbers a,.page-numbers span,#pagination a,#pagination span,.ejoe-mobile-pagination a,.ejoe-mobile-pagination span {display:inline-flex!important;position:static!important;float:none!important;min-width:28px!important;min-height:28px!important;padding:4px 7px!important;margin:0!important;align-items:center!important;justify-content:center!important;}
  #footer,.footer,.site-footer,footer { height:auto!important; min-height:0!important;max-width:100%!important;overflow-wrap:anywhere!important; }
  #footer ul,.footer ul,.site-footer ul { max-width:100%!important;display:flex!important;flex-wrap:wrap!important;gap:6px 12px!important;padding-left:0!important; }
  #footer li,.footer li,.site-footer li { float:none!important;width:auto!important; }
  img,video,iframe,embed,object,svg {max-width:100%!important;height:auto!important;}
  table:not(.ejoe-mobile-entry table) {max-width:100%!important;}
  input,select,textarea,button {max-width:100%!important;}
  pre {max-width:100%!important;overflow-x:auto!important;}
  [class^="stroy-"],[class*=" stroy-"],[class^="sc-"],[class*=" sc-"] {max-width:100%!important;min-width:0!important;}
}
@media screen and (min-width:768px) { #ejoe-responsive-header {display:none!important;} }
