/*
 * Phone and tablet improvements on top of Avada. Not on live.
 *
 * Every rule is inside a max-width: 1023px query, so desktop (1024px and up)
 * renders exactly as the theme does. Loaded after the theme's stylesheets
 * (see src/app/[[...slug]]/page.tsx).
 */

@media (max-width: 1023px) {
  /* A 44px target around the 21px menu icon, same place on screen. */
  html body .fusion-mobile-menu-icons a.fusion-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: -11px -11px -11px 0;
  }

  /* The open menu: 48px rows instead of 28px. */
  html body .fusion-mobile-nav-holder .fusion-mobile-nav-item > a {
    display: flex;
    align-items: center;
    height: auto;
    min-height: 48px;
    font-size: 17px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  /* The open menu's rows are 90% black, so the hero showed through, and the
     items started 13px left of the logo. Solid panel, text in line with the
     logo mark (the holder sits at x=-15). */
  html body .fusion-mobile-nav-holder > ul {
    background-color: #000;
  }
  html body .fusion-mobile-nav-holder.fusion-mobile-menu-text-align-left li.fusion-mobile-nav-item > a {
    padding-left: 43px;
    padding-right: 43px;
  }
  html body .fusion-mobile-nav-holder.fusion-mobile-menu-text-align-left li.fusion-mobile-nav-item li.fusion-mobile-nav-item > a {
    padding-left: 59px;
  }
  html body .fusion-mobile-nav-holder .fusion-open-submenu {
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Home hero on tablets: the game art has a 500px minimum width inside a
     35% column, so it covers the slide's text. Fit it to its column. */
  html body .horizontal_slider #large_carousel .item .row .col-5 img {
    min-width: 0;
    width: 100%;
    height: auto;
  }

  /* Home "cutting-edge" section on tablets: the character art sits behind
     the heading and the first cards. Stack it above them, as on phones. */
  html body .section-cutting-edge .fusion-row:before {
    position: relative;
    width: 100%;
    right: 0;
    top: 0;
    height: 420px;
  }

  /* Blog and archive pagination: 44px page links (30px). */
  html body .fusion-pagination .page-numbers,
  html body .pagination a,
  html body .pagination .current {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  /* Blog posts: three nested 30px paddings (section, card, inner section)
     left 210px of text on a 390px screen. Trim them to about 306px. */
  html body.single-post .post-content > .fusion-fullwidth {
    padding-left: 12px;
    padding-right: 12px;
  }
  html body.single-post .post-content .fusion-column-has-shadow {
    padding-left: 20px;
    padding-right: 20px;
  }
  html body.single-post .fusion-content-tb .fusion-fullwidth {
    padding-left: 0;
    padding-right: 0;
  }

  /* Contact form: a 44px submit button. */
  html body .gform_wrapper input[id^="gform_submit_button"] {
    min-height: 44px;
    padding-left: 28px;
    padding-right: 28px;
    font-size: 16px;
  }
}