/* Responsive layout corrections to Elementor and the ShadePro theme.
   Loaded last, after both, so these win on cascade order. The one !important
   here is only matching an !important already in the theme.

   ---------------------------------------------------------------------------
   1. The header must stay on one row on phones.

   The header is one Elementor section (6c6662dc) holding two 50% columns: the
   logo (beff047) left, the nav/hamburger (61179ff6) right. Elementor's core
   stylesheet collapses EVERY column to full width below its mobile breakpoint:

       @media (max-width:767px){.elementor-column{width:100%}}

   That is right for ordinary content sections, which should stack on a phone,
   and wrong for a header bar. The two columns wrapped onto separate rows, so
   the hamburger sat on its own line under the logo -- a ~34px offset between
   their centres.

   It only showed below 768px. The nav widget swaps to the hamburger at its own
   1024px breakpoint, so between 768 and 1024 the two already shared a row.

   Scoped to this section's id on purpose: every other stacked column on the
   site is stacking because it should.
   --------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  .elementor-element-6c6662dc > .elementor-container {
    flex-wrap: nowrap;
    align-items: center;
  }

  /* Logo takes the remaining width. min-width:0 lets it shrink inside the flex
     row on a narrow phone rather than forcing the row wider than the viewport. */
  .elementor-element-6c6662dc > .elementor-container > .elementor-element-beff047 {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Hamburger keeps its intrinsic width and stays hard right. */
  .elementor-element-6c6662dc > .elementor-container > .elementor-element-61179ff6 {
    width: auto;
    flex: 0 0 auto;
  }

  .elementor-element-6c6662dc .elementor-element-7fa32fe5 .elementor-widget-container {
    text-align: left;
  }

  .elementor-element-6c6662dc .elementskit-menu-hamburger {
    margin-left: auto;
  }
}

/* ---------------------------------------------------------------------------
   2. Content should fill the screen below 768px, not sit in a 390px column.

   shadepro-responsive.css pins every boxed section to a fixed width on mobile:

       .elementor-section.elementor-section-boxed > .elementor-container
           { max-width: 390px !important }

   390px is a phone, so on a phone this is invisible. On anything wider and
   still under the 768px breakpoint it is not: at 600px the page rendered as a
   390px column with 105px of dead space each side, at 767px with 189px each
   side. The theme's container is stepped (390 / 768 / 1140), and this is the
   bottom step failing to stretch.

   Going fluid alone would leave content nearly flush to the edges -- the
   containers carry no padding of their own and the 15px on each widget wrap
   works out to about 10px of visible gutter. So the gutter scales with the
   viewport instead: nothing extra on a narrow phone, which needs every pixel of
   width, growing to 24px by ~576px and holding there.

     320px -> ~10px gutter (unchanged)      600px -> ~34px
     390px -> ~13px                         767px -> ~34px

   Below 768px only. 768px and up keep the theme's own steps untouched.
   --------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 100% !important;
    padding-left: clamp(0px, calc((100vw - 360px) / 9), 24px);
    padding-right: clamp(0px, calc((100vw - 360px) / 9), 24px);
  }
}