/* Desktop corrections.
 *
 * The template is a mobile app shell. Above ~992px it was rendered unchanged: the
 * fixed bottom tab bar stretched the full window width with its five items pushed
 * to the far edges, the hero ran full-bleed with no max-width, and the back
 * chevron sat in the corner of the home page pointing nowhere. Together that is
 * what makes the site read as "zoomed in" on a laptop.
 *
 * This is a correction layer, not a desktop design. A real one means deciding what
 * the desktop navigation should be, which is redesign work.
 *
 * Loaded last so it wins over the framework sheets. Everything is inside a
 * min-width query, so mobile is untouched.
 */

@media (min-width: 992px) {

  /* --- The bottom tab bar ------------------------------------------------
     Keep it (it is the only link to Caricatures / Stickers / MojiWorld /
     MojiMall) but stop it spanning the whole window. Centred and capped, it
     reads as a deliberate dock instead of a stretched phone UI. */
  .footer-menu {
    left: 50%;
    transform: translateX(-50%);
    width: min(680px, calc(100% - 48px));
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -2px 24px rgba(0, 0, 0, 0.12);
  }

  /* --- Hero ---------------------------------------------------------------
     Cap the measure. A heading running the full 1440px is the single biggest
     contributor to the oversized feel.

     1120px, not less: "Your World . Your Art . Your Fun" needs ~1050px at 62px
     and wraps to two ragged lines below that, which looks worse than the
     full-bleed version it was meant to fix. */
  .site-header .header_banner .desc {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
  }

  /* The floating pill overlaps the avatars and the tab bar. Tuck it clear. */
  .OpenInApp {
    bottom: 96px;
  }

  /* --- App-shell chrome that has no meaning on desktop --------------------
     A back button on the home page navigates nowhere. The sidenav trigger and
     search stay: the sidenav is the only full navigation the site has.

     !important is needed, not sloppiness: the element also carries Materialize's
     .show-on-large, which sets display with !important of its own. */
  .topbar .back-button {
    display: none !important;
  }
}

/* --- Fluid hero scale ----------------------------------------------------
   The hero was sized for a very wide screen: 62px type and 430px avatars are
   fixed above 1171px, so they occupy ~3.2% and ~22% of the width at 1920 but
   ~4.3% and ~30% at 1440. On a 1440 laptop that reads as "zoomed in" - the site
   only looks right at 75% browser zoom, which is just a 1920px viewport.

   Scaling with vw instead of stepping keeps the 1920 proportions at every width:
   at 1440 the heading lands at ~46px and the avatars at ~317px, the same share
   of the viewport they had at 1920. The clamp ceilings preserve the original
   look on genuinely wide displays; the floors stop it collapsing near 992px,
   below which the existing max-width breakpoints take over. */
@media (min-width: 992px) {
  .site-header .header_banner .desc h1, .site-header .header_banner .desc h2 {
    font-size: clamp(40px, 2.88vw, 55.8px);
  }

  .site-header .header_banner .desc p {
    font-size: clamp(20px, 1.35vw, 26.1px);
  }

  .site-header .header_banner .vector_wrapper li img {
    max-height: clamp(260px, 19.8vw, 387px);
    max-width: none;
  }

  .site-header .header_banner .vector_wrapper li {
    margin-right: clamp(16px, 3.06vw, 59.4px);
  }
}

/* --- Fluid type scale for the rest of the page ---------------------------
   The hero was made fluid above, but every section heading below it stayed at
   its fixed size - so at 1440 the section headings (60px) rendered LARGER than
   the hero (46px), which is most of why the page still felt oversized at 100%
   zoom. Same treatment: hold each tier's share of the viewport rather than its
   pixel value, using 1920 as the reference width the design was drawn for.

   Generated from the base (non-media-query) rules in home.css, so the selector
   lists mirror the original exactly. Ceilings equal the original sizes, so wide
   displays are unchanged.

   Where the original declaration carries !important (the Dynalight heading does)
   the override has to as well, or it silently loses. */
@media (min-width: 992px) {

  /* 60px tier -> 45px at 1440 */
  .our_product .heading h2,
  .site-footer .form h3,
  .featured_product .our_achievements .heading h2,
  .grow_your_business .heading h2,
  .grow_your_business .vector_slide .slide_desc h2,
  .testimonial .headign h3 {
    font-size: clamp(34px, 2.8125vw, 54px);
  }

  /* 60px tier -> 45px at 1440, !important */
  .grow_your_business .vector_slide .slide_desc h4 {
    font-size: clamp(34px, 2.8125vw, 54px) !important;
  }

  /* 44px tier -> 33px at 1440 */
  .featured_product .heading_box h3 {
    font-size: clamp(28px, 2.0628vw, 39.6px);
  }

  /* 38px tier -> 28px at 1440 */
  .our_product .desc h3,
  .grow_your_business .desc .heading_top h3,
  .grow_your_business .scnd_section h3 {
    font-size: clamp(25px, 1.7811vw, 34.2px);
  }

  /* 36px tier -> 27px at 1440 */
  .site-footer .footer_widget h2 {
    font-size: clamp(24px, 1.6875vw, 32.4px);
  }

  /* 30px tier -> 23px at 1440 */
  .grow_your_business .desc .below_heading h4,
  .testimonial .box h2 {
    font-size: clamp(20px, 1.4067vw, 27px);
  }

  /* 24px tier -> 18px at 1440 */
  .site-footer .footer_widget .foo_nav h3,
  .site-footer .social h3 {
    font-size: clamp(18px, 1.125vw, 21.6px);
  }

  /* 22px tier -> 17px at 1440 */
  .our_product .desc p,
  .site-footer .form form .snd_btn .btn_outer .wpcf7-submit,
  .grow_your_business .desc .heading_top p,
  .grow_your_business .desc .below_heading p,
  .grow_your_business .desc .below_heading .btn_pdf {
    font-size: clamp(17px, 1.0314vw, 19.8px);
  }
}