/* ============================================================
   JH Fencing — Global Mobile CSS
   Applies to all pages on the site
   ============================================================ */

/* Prevent horizontal scroll site-wide */
html, body {
  overflow-x: hidden;
  width: 100%;
}

/* ============================================================
   ELEMENTOR STAR RATING — ensure unicode stars show correctly on all devices
============================================================ */
.elementor--star-style-star_unicode .elementor-star-rating {
  font-family: Arial, Helvetica, sans-serif !important;
  color: #f0ad4e;
}
.elementor--star-style-star_unicode .elementor-star-rating i {
  font-style: normal;
  color: #f0ad4e;
}
.elementor--star-style-star_unicode .elementor-star-rating i:not(.elementor-star-empty):before {
  content: "★";
  color: #f0ad4e;
}
*, *::before, *::after {
  box-sizing: border-box;
}

/* Responsive iframes */
iframe {
  max-width: 100%;
}

/* ============================================================
   MOBILE — max-width: 767px
============================================================ */
@media (max-width: 767px) {

  /* ---- HEADER ---- */
  body.page, body.single, body.archive, body {
    padding-top: 0 !important;
  }

  .elementor-location-header {
    position: relative !important;
    top: auto !important;
    background: rgba(27, 67, 50, 0.97) !important;
    z-index: 9999 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  }

  /* Header container: row 1 = logo + hamburger, row 2 = CTA */
  .elementor-element-e6cc468 .elementor-container {
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 0 !important;
  }

  /* Hide desktop nav links — burger handles nav on mobile */
  .elementor-element-44b066b .elementor-nav-menu--main {
    display: none !important;
  }

  /* Hamburger button: white square with green icon (matches reference) */
  .elementor-menu-toggle {
    background: #fff !important;
    border-radius: 6px !important;
    width: 46px !important;
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #1a6b3c !important;
    border: none !important;
    cursor: pointer !important;
    margin: 0 auto !important;
  }
  .elementor-menu-toggle i {
    color: #1a6b3c !important;
    font-size: 20px !important;
  }
  /* Fallback: if eicons font fails to load, use Unicode characters */
  .elementor-menu-toggle__icon--open::before {
    font-family: "eicons", Arial, sans-serif !important;
  }
  .elementor-menu-toggle__icon--close::before {
    font-family: "eicons", Arial, sans-serif !important;
  }

  /* CTA button: full-width bar */
  .elementor-element-8be2af4 .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
    justify-content: center !important;
  }
  .elementor-element-8be2af4 .elementor-button-wrapper {
    width: 100% !important;
    margin: 0 !important;
  }
  .free-estimate-btn {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    border-radius: 0 !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    white-space: nowrap;
    box-sizing: border-box !important;
    border: none !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
  }

  /* Mobile dropdown nav */
  .elementor-nav-menu--dropdown {
    background: rgba(27, 67, 50, 0.98) !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
  }
  .elementor-nav-menu--dropdown .elementor-nav-menu {
    padding: 8px 0 !important;
  }
  .elementor-nav-menu--dropdown .elementor-item {
    padding: 14px 20px !important;
    font-size: 16px !important;
    text-align: center !important;
    color: #fff !important;
    display: block;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
  }
  .elementor-nav-menu--dropdown .elementor-item:last-child {
    border-bottom: none !important;
  }
  .elementor-nav-menu--dropdown .elementor-item:hover,
  .elementor-nav-menu--dropdown .elementor-item:focus,
  .elementor-nav-menu--dropdown .elementor-item-active {
    color: #c8e6d4 !important;
    background: rgba(255,255,255,0.05) !important;
  }

  /* ---- GENERAL SECTIONS ---- */
  .elementor-section {
    overflow-x: hidden;
  }
  .elementor-container {
    max-width: 100% !important;
  }

  /* All section padding: reasonable on mobile */
  .elementor-section-boxed > .elementor-container {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* FAQ accordion: ensure headers are tappable */
  .eael-accordion-header {
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
    position: relative !important;
    z-index: 1 !important;
  }
  .eael-accordion-content.active {
    display: block !important;
  }

  /* Headings: no orphan words */
  h1, h2, h3, h4, h5, h6,
  .elementor-heading-title {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Buttons: full-width on mobile in most contexts */
  .elementor-mobile-align-justify .elementor-button {
    width: 100%;
    display: block;
    text-align: center;
    box-sizing: border-box;
  }

  /* ---- FOOTER ---- */
  .elementor-location-footer .elementor-column {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-bottom: 24px !important;
  }
  .elementor-location-footer .elementor-column:last-child {
    margin-bottom: 0 !important;
  }
  .elementor-location-footer .elementor-widget-image img {
    display: block;
    margin: 0 auto;
  }
  .elementor-location-footer .elementor-widget-container {
    text-align: center;
  }
  .elementor-location-footer .elementor-icon-list-items {
    display: inline-block;
    text-align: left;
  }

  /* Footer copyright bar: center on mobile */
  .site-copyright-bar {
    text-align: center !important;
  }

  /* ---- MAP ---- */
  .elementor-location-footer iframe,
  .elementor-widget-html iframe:not([height="0"]) {
    width: 100% !important;
    height: 250px !important;
  }

  /* ---- INNER PAGES: Content area ---- */
  .elementor-top-section .elementor-column.elementor-col-50,
  .elementor-top-section .elementor-column.elementor-col-33,
  .elementor-top-section .elementor-column.elementor-col-25,
  .elementor-top-section .elementor-column.elementor-col-66 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .elementor-inner-section .elementor-column.elementor-col-50,
  .elementor-inner-section .elementor-column.elementor-col-33,
  .elementor-inner-section .elementor-column.elementor-col-25,
  .elementor-inner-section .elementor-column.elementor-col-66 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .entry-content .elementor-widget-heading .elementor-heading-title {
    text-align: center;
    color: #1a1a2e;
  }
  .entry-content .elementor-widget-text-editor {
    text-align: left;
    padding: 0 4px;
  }

  /* Hide "Free On-Site Estimate" gray box */
  .elementor-element-943b2de {
    display: none !important;
  }

  /* ---- PROMISE SECTION: text first, photo second on mobile ---- */
  .elementor-element-pgh3xyg > .elementor-container {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }
  /* order: -1 beats Elementor's reverse-mobile order values (max 10) */
  .elementor-element-pgh3xyg > .elementor-container > .elementor-element-bf8bd6b {
    order: -1 !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  /* Hide the photo column in the Promise section on mobile */
  .elementor-element-pgh3xyg > .elementor-container > .elementor-element-4576535 {
    display: none !important;
  }

  /* ============================================================
     HEADER COLUMN OVERRIDES
     Uses 4-class specificity to beat the 3-class general col-33
     rule above. Logo + hamburger share row 1; CTA is row 2.
  ============================================================ */

  /* Logo column: fills row 1 minus hamburger width */
  .elementor-location-header .elementor-top-section .elementor-column.elementor-element-4b40e48 {
    flex: 1 1 auto !important;
    max-width: calc(100% - 70px) !important;
    width: auto !important;
    padding: 6px 4px 6px 0 !important;
  }

  /* Logo widget: force left alignment */
  .elementor-element-7a466da {
    text-align: left !important;
  }
  .elementor-element-7a466da .elementor-widget-container {
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Logo size */
  .elementor-element-7a466da img {
    max-width: 185px !important;
    width: 185px !important;
    display: inline-block !important;
    margin: 0 !important;
  }

  /* Nav column (hamburger only): fixed 70px, right side of row 1 */
  .elementor-location-header .elementor-top-section .elementor-column.elementor-element-44b066b {
    flex: 0 0 70px !important;
    max-width: 70px !important;
    width: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 10px 8px 0 !important;
  }

  /* FREE ESTIMATE column: full-width second row */
  .elementor-location-header .elementor-top-section .elementor-column.elementor-element-55cf80c {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding: 0 !important;
  }

} /* end @media (max-width: 767px) */

/* ============================================================
   TABLET — 768px to 1024px
============================================================ */
@media (max-width: 1024px) and (min-width: 768px) {

  .elementor-location-header {
    background: rgba(27, 67, 50, 0.92) !important;
  }

  .elementor-top-section .elementor-column.elementor-col-33 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }

  img {
    max-width: 100%;
    height: auto;
  }

} /* end tablet media query */