/*
 * SEO Inc — GoodLayers Mobile Fix
 * File: /wp-content/themes/seocrawler/css/goodlayers-mobile-fix.css
 * Enqueued via WP Code Pro at priority 25 (loads AFTER all theme CSS)
 * Last rebuilt: 2026-02
 *
 * PURPOSE: Override the GoodLayers theme's 500px max-width container cap
 * that fires at <=767px, causing a centered narrow box with dead space on
 * both sides on phones.
 *
 * ROOT CAUSE: style.css contains:
 *   @media only screen and (max-width: 767px) {
 *     body.seocrawler-body-front .gdlr-core-container { max-width: 500px; }
 *   }
 * We must match these selectors exactly + use !important to win.
 *
 * mm-menu colors: set in style-custom.css lines 140-143.
 * Logo injection HTML: output by WP Code Pro PHP snippet "SEO Inc Mobile Menu Logo".
 * Absorbed from deleted snippets:
 *   - "SEO Inc Critical Overrides" (CSS)
 *   - "SEO Inc Mobile Fixes" (CSS)
 */

/* ==========================================================================
   SECTION 1 — TABLET SAFETY (999px and below)
   ========================================================================== */

@media only screen and (max-width: 999px) {
  body {
    width: 100%;
    overflow-x: hidden;
  }
  .seocrawler-mobile-button-hamburger {
    width: 44px !important;
    height: 44px !important;
  }

  .seocrawler-mobile-menu-right {
    right: 15px !important;
  }
}

/* Global overflow safety */
html, body { overflow-x: hidden; }


/* ==========================================================================
   SECTION 2 — KILL THE 500px MAX-WIDTH CAP + COLUMN STACKING (767px and below)
   ========================================================================== */

@media only screen and (max-width: 767px) {

  /* Container cap override */
  body .gdlr-core-container,
  body.seocrawler-body-front .gdlr-core-container,
  body.seocrawler-body-front .seocrawler-container,
  body .gdlr-core-container-custom {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    box-sizing: border-box !important;
  }

  .gdlr-core-pbf-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .gdlr-core-pbf-column-content-margin {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* All column widths — stack to full width on mobile */
  .gdlr-core-column-20,
  .gdlr-core-column-30,
  .gdlr-core-column-40,
  .gdlr-core-column-50,
  .gdlr-core-column-60,
  .gdlr-core-column-80,
  .gdlr-core-column-100 {
    float: none !important;
    width: 100% !important;
  }

  /* Hero main headings */
  .home-heading-title,
  .home-heading-title-hl {
    font-size: 22px !important;
    letter-spacing: 2px !important;
    white-space: normal !important;
    width: 100% !important;
  }

  /* Animated rotating words — REVENUE / LEADS / TRAFFIC */
  .header-words,
  h3.home-header,
  .header_text_1,
  .header_text_2,
  .header_text_3 {
    font-size: 20px !important;
    letter-spacing: 2px !important;
  }

  /* Hero body copy */
  h1.home-heading-text,
  h2.home-heading-text,
  p.home-heading-text {
    font-size: 15px !important;
  }

  /* Hero caption lines */
  span.home-caption-title,
  span.home-caption {
    font-size: 14px !important;
    letter-spacing: 3px !important;
  }

  /* Testimonial */
  .gdlr-core-testimonial-content-wrap {
    margin: 0 !important;
  }

  /* Blog thumbnail — stack on mobile */
  .gdlr-core-blog-left-thumbnail .gdlr-core-blog-thumbnail {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
    margin-bottom: 15px !important;
  }

  /* Media scaling */
  img, video {
    max-width: 100%;
    height: auto;
  }
}


/* ==========================================================================
   SECTION 3 — SMALL PHONE (419px and below)
   ========================================================================== */

@media only screen and (max-width: 419px) {
  .home-heading-title,
  .home-heading-title-hl {
    font-size: 20px !important;
    letter-spacing: 1px !important;
  }
  .header-words,
  h3.home-header,
  .header_text_1,
  .header_text_2,
  .header_text_3 {
    font-size: 18px !important;
  }
  .home-heading,
  .getstarted {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}


/* ==========================================================================
   SECTION 4 — MOBILE HEADER BAR
   ========================================================================== */

.seocrawler-mobile-header-wrap {
  min-height: 74px !important;
  background-color: #383838 !important;
}

.seocrawler-mobile-header {
  background-color: #383838;
}

.seocrawler-mobile-header .seocrawler-mobile-header-container {
  min-height: 45px;
}

.seocrawler-mobile-header .seocrawler-logo {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

.seocrawler-mobile-header .seocrawler-logo-inner {
  line-height: 45px !important;
  margin-right: 128px !important;
}

.seocrawler-mobile-header .seocrawler-logo-inner img {
  height: 30px !important;
  width: auto !important;
  vertical-align: middle;
}

@media only screen and (max-width: 999px) {
  .seocrawler-mobile-header .seocrawler-mobile-menu-right {
    position: absolute !important;
    top: 50% !important;
    right: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 18px !important;
    width: auto !important;
    margin-top: 0 !important;
    white-space: nowrap !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important;
  }

  .seocrawler-mobile-header .seocrawler-main-menu-search,
  .seocrawler-mobile-header .seocrawler-mobile-menu {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  .seocrawler-mobile-header .seocrawler-main-menu-search i {
    margin: 0 !important;
    line-height: 1 !important;
  }

  .seocrawler-mobile-header .seocrawler-mobile-menu-button {
    flex: 0 0 44px !important;
  }
}


/* ==========================================================================
   SECTION 5 — MMENU LOGO (injected by WP Code Pro PHP snippet)
   Selector: a.seoinc-mmenu-logo injected into .mm-panel[0]
   ========================================================================== */

a.seoinc-mmenu-logo {
  display: block;
  background-color: #1f1f1f;
  padding: 22px 20px 18px;
  text-align: center;
  border-bottom: 1px solid #333333;
  line-height: 0;
  text-decoration: none;
}

a.seoinc-mmenu-logo img {
  max-width: 140px !important;
  width: auto;
  height: auto;
  display: inline-block;
}

a.seoinc-mmenu-logo:hover {
  background-color: #2a2a2a;
}


/* ==========================================================================
   SECTION 6 — PAGE BUILDER COLUMN COLLAPSE (991px — tablet)
   ========================================================================== */

@media only screen and (max-width: 991px) {
  .gdlr-core-pbf-column.gdlr-core-column-20,
  .gdlr-core-pbf-column.gdlr-core-column-30 {
    width: 100% !important;
    float: none !important;
    display: block !important;
  }
  .gdlr-core-column-first {
    clear: both;
  }
}


/* ==========================================================================
   SECTION 7 — CONTAINER PADDING SAFETY (front page, 767px)
   ========================================================================== */

@media only screen and (max-width: 767px) {
  .seocrawler-body-front .gdlr-core-container,
  .seocrawler-body-front .seocrawler-container {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}


/* ==========================================================================
   SECTION 8 — MISC MOBILE CLEANUP
   ========================================================================== */

@media only screen and (max-width: 767px) {
  .seocrawler-footer-wrapper .seocrawler-footer-column {
    padding: 5px;
    margin-bottom: 60px;
    border: none;
  }
  .seocrawler-footer-wrapper .seocrawler-footer-column:last-child {
    margin-bottom: 20px;
  }
  .seocrawler-copyright-left,
  .seocrawler-copyright-right {
    float: none;
    display: block;
    text-align: center;
  }
}

/* Emergency mobile header recovery: keep desktop navigation out of phone view. */
@media only screen and (max-width: 999px) {
  .seocrawler-header-wrap,
  .seocrawler-header-container,
  .seocrawler-navigation,
  .seocrawler-main-menu,
  .seocrawler-main-menu-right,
  .seocrawler-header-boxed-wrap,
  .seocrawler-header-background-transparent {
    display: none !important;
  }

  .seocrawler-mobile-header-wrap {
    display: block !important;
  }
}


/* ==========================================================================
   SECTION 9 — MOBILE MENU OPEN POSITION + FIRST-TAP VISIBILITY
   ========================================================================== */

@media only screen and (max-width: 999px) {
  /* GoodLayers uses a table-cell overlay menu and centers it vertically.
     Keep the overlay renderer, but make the mobile menu start at the top. */
  body .seocrawler-overlay-menu-content {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
  }

  body .seocrawler-overlay-menu-row {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
  }

  body .seocrawler-overlay-menu-cell {
    display: block !important;
    width: 100% !important;
    vertical-align: top !important;
    padding: 84px 18px 32px !important;
  }

  body .seocrawler-overlay-menu-content .seocrawler-overlay-menu-close {
    top: 18px !important;
    right: 18px !important;
    left: auto !important;
    width: 44px !important;
    height: 44px !important;
    margin-left: 0 !important;
    line-height: 44px !important;
    text-align: center !important;
    color: #ffffff !important;
    z-index: 2 !important;
  }

  body .seocrawler-overlay-menu-content .seocrawler-overlay-menu-close:after {
    content: "\00d7" !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 42px !important;
    font-weight: 300 !important;
    line-height: 44px !important;
  }

  body .seocrawler-overlay-menu-content #mega-menu-wrap-mobile_menu {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
  }

  html body .seocrawler-overlay-menu-content #mega-menu-wrap-mobile_menu #mega-menu-mobile_menu,
  html body .seocrawler-overlay-menu-content #mega-menu-wrap-mobile_menu ul#mega-menu-mobile_menu.mega-no-js {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .seocrawler-overlay-menu-content #mega-menu-wrap-mobile_menu #mega-menu-mobile_menu > li.mega-menu-item {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(224, 31, 71, 0.25) !important;
  }

  html body .seocrawler-overlay-menu-content #mega-menu-wrap-mobile_menu #mega-menu-mobile_menu > li.mega-menu-item > a.mega-menu-link {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 13px 0 !important;
    line-height: 1.25 !important;
    color: #ffffff !important;
    background: transparent !important;
    text-align: left !important;
  }

  /* WPCode snippet 41348 hides ul.mega-no-js until Max Mega Menu JS runs.
     That makes the first mobile open look broken when Nitro is still waking JS. */
  html body .seocrawler-overlay-menu-content #mega-menu-wrap-mobile_menu ul#mega-menu-mobile_menu.mega-no-js {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
  }
}