/* Mobile and tablet layout for Austin Complete Tree Service.
   Loaded only on screens narrower than 960px (media attribute on the <link>),
   so the desktop design is never touched. */

html, body { overflow-x: hidden; }
body { -webkit-text-size-adjust: 100%; padding-bottom: 58px; }
img, iframe, object, embed, video { max-width: 100%; }

.container, #content-wrap .container { width: auto !important; padding: 0 14px; box-sizing: border-box; }

/* ---------- header ---------- */
#header { background-size: cover; }
#header .container, body#home #header .container { height: auto; padding-top: 14px; padding-bottom: 16px; }
#header .container:after { content: ""; display: table; clear: both; }
#header a#logo { float: none; width: 100%; max-width: 423px; height: auto; aspect-ratio: 423 / 100;
  background-size: contain; background-repeat: no-repeat; background-position: center; margin: 0 auto; }
#contant { float: none; width: auto; margin: 10px 0 4px; text-align: center; }
#contant h4.left, #contant h4.right { float: none; display: block; margin: 2px 0; font-size: 24px; line-height: 34px; }
#contant h4 a { display: inline-block; padding: 2px 6px; }

/* menu button + collapsible menu */
.m-menu-btn { display: block !important; width: 100%; margin: 10px 0 0; padding: 11px 14px; border: 0; border-radius: 6px;
  background: #ffffff url(/wp-content/themes/MyProduct/MyProduct/images/green/menu-bg.png) repeat-x; color: #3e3e3e;
  font: bold 16px Arial, sans-serif; text-align: left; text-shadow: 1px 1px 1px #fff; cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.m-menu-btn .m-bars { float: right; font-size: 20px; line-height: 18px; }
#topnav { position: static; display: none; margin-top: 6px; }
#topnav.m-open { display: block; }
#topmenu-leftbg, #topmenu-rightbg { display: none; }
#topmenu { float: none; height: auto; background: #ffffff; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
ul.nav { float: none; margin: 0; padding: 4px 0; }
ul.nav li { float: none !important; background: none; padding: 0; position: relative; }
ul.nav > li { border-bottom: 1px solid #e6e6e6; }
ul.nav > li:last-child { border-bottom: 0; }
ul.nav a, ul.nav li li a { display: block; float: none !important; padding: 11px 50px 11px 16px !important; font-size: 15px; color: #444444; background: none !important; }
ul.nav a#homelink span { padding: 0; width: auto; }
ul.nav li ul, .nav li ul { display: none !important; visibility: visible !important; position: static !important;
  left: auto !important; top: auto !important; width: auto !important; box-shadow: none; border-radius: 0;
  background: #f4f6f2 !important; padding: 0 0 4px 12px !important; margin: 0 !important; }
ul.nav li.m-sub-open > ul { display: block !important; }
ul.nav li li a { font-size: 14px; color: #555555; padding: 9px 50px 9px 22px !important;
  background: url(/wp-content/themes/MyProduct/MyProduct/images/nav-bullet.png) no-repeat 8px 15px !important; }
.m-sub-toggle { position: absolute; right: 0; top: 0; width: 48px; height: 43px; border: 0; background: none;
  font-size: 18px; color: #6a8f2a; cursor: pointer; }
ul.nav li li .m-sub-toggle { height: 38px; }
.sf-sub-indicator { display: none !important; }

/* ---------- homepage hero ---------- */
#top-box { float: none; width: auto; margin-top: 18px; padding-left: 0; }
#top-box h2 { font-size: 26px; line-height: 32px; }
#top-box p { font-size: 15px; line-height: 25px; }
#top-box img { display: inline-block; margin: 6px 10px; }
#top-box a.featured-button { float: none; display: inline-block; margin: 6px 0; }
#image_slideshow { position: relative; bottom: auto; right: auto; width: 100%; max-width: 395px; margin: 16px auto 0; }
#image_slideshow img { height: auto; }
#switcher { bottom: 10px; left: 50%; transform: translateX(-50%); white-space: nowrap; }

/* ---------- inner page header ---------- */
#pagetop { float: none; width: auto; }
#pagetop h1 { float: none; margin: 16px 0 8px; font-size: 30px; line-height: 36px; }
#servicestop { float: none; width: auto; margin: 4px 0 12px; }
#servicestop h3 { font-size: 20px; }
#servicestop table, #servicestop tbody, #servicestop tr { display: block; width: 100% !important; }
#servicestop td { display: inline-block; width: 49% !important; vertical-align: top; }
#breadcrumbs { position: static; width: auto; margin-top: 8px; }
#breadcrumbs-left, #breadcrumbs-right { display: none; }
#breadcrumbs-content { float: none; width: auto; height: auto; line-height: 22px; padding: 12px 14px; border-radius: 6px; }

/* ---------- content + sidebar stacked ---------- */
#content { background: #eff1f2; }
#content-wrap { background: none; }
#content-left, #sidebar { float: none; width: auto; margin: 0; background: none; }
body#home #sidebar { padding-top: 0; }
div.entry { padding: 26px 4px 22px; }
.entry h1, .entry h2.title { font-size: 26px; line-height: 32px; }
.entry p, .entry li { font-size: 14px; line-height: 23px; }
.entry img, #featured img { height: auto; }
.entry img.alignleft, .entry img.alignright, #featured img.alignleft { float: none; display: block; margin: 0 auto 10px; }
.entry table, .entry tbody, .entry tr, .entry td, #featured table, #featured tbody, #featured tr, #featured td {
  display: block; width: auto !important; height: auto !important; text-align: left; }
.entry td, #featured td { padding: 4px 0; }
.entry iframe { width: 100% !important; }
.sidebar-block { padding: 24px 10px 18px; }
#testimonial { margin-left: 0; }

/* homepage tabs */
#featured-wrap { background: none; padding-top: 4px; }
ul#featured-control { position: static; display: flex; align-items: flex-start; flex-wrap: nowrap; overflow-x: auto; margin: 0 0 0 -4px; padding-top: 6px; }
ul#featured-control li { flex: 0 0 auto; }
ul#featured-control li a { font-size: 11px; padding-left: 9px !important; }
ul#featured-control li.active a { padding-left: 16px !important; }
#featured { overflow: hidden; }
#featured .slide { padding: 24px 4px 26px; }

/* ---------- forms ---------- */
.gform_wrapper ul li.gfield { width: auto !important; }
.gform_wrapper input[type=text], .gform_wrapper input[type=email], .gform_wrapper input[type=tel],
.gform_wrapper textarea, .gform_wrapper select, .gform_wrapper .ginput_container input {
  width: 100% !important; max-width: 100% !important; box-sizing: border-box; font-size: 16px !important; padding: 8px !important; }
.gform_wrapper .ginput_left, .gform_wrapper .ginput_right, .gform_wrapper .ginput_full {
  float: none !important; display: block; width: 100% !important; margin: 0 0 6px !important; }
.gform_wrapper .gform_footer input[type=submit] { font-size: 16px; padding: 10px 26px; }
.gform_wrapper .gfield_checkbox li { width: 100% !important; }

/* ---------- gallery ---------- */
.ngg-galleryoverview { text-align: center; }
.ngg-gallery-thumbnail-box { float: none !important; display: inline-block; width: 46% !important; margin: 0 1% 8px !important; }
.ngg-gallery-thumbnail img { max-width: 100%; height: auto; margin: 0 !important; }

/* ---------- footer ---------- */
p#copyright { float: none; margin: 0 auto; padding: 6px 0 10px; text-align: center; line-height: 22px; font-size: 12px; }

/* ---------- sticky call bar ---------- */
.m-callbar { display: flex !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; height: 54px;
  align-items: center; justify-content: center; gap: 8px; text-decoration: none !important;
  background: linear-gradient(#ffe95c, #f9c400); color: #4a3200 !important; border-top: 1px solid #d9a400;
  font: bold 18px Georgia, serif; text-shadow: 0 1px 0 rgba(255,255,255,.6); box-shadow: 0 -2px 8px rgba(0,0,0,.25); }
.m-callbar svg { width: 20px; height: 20px; }

/* old WordPress spacer rows inside tables only add empty gaps once cells stack */
.entry p:has(> br.spacer_:only-child), .entry td:empty, .entry td:has(> p > br.spacer_:only-child):not(:has(strong, img, a)) { display: none !important; }
.entry td { padding: 6px 0 !important; }