/*
 * Mobile layout fixes for the mirrored Bricks output.
 *
 * Linked from every page by scripts/build-mirror.mjs, the same way
 * oc3pl-forms.js is. Kept here rather than in the per-page inline <style>
 * blocks Bricks emits so there is one place to change, and so a re-crawl of
 * raw/ does not throw the fixes away.
 */

@media (max-width: 767px) {
  /* The sticky mobile CTA bar (#mobile-footer-cta) is fixed to bottom:0 at
     z-index 99999999 and covers the bottom ~47px of the viewport — exactly
     where the cookie notice puts Accept / Decline / Privacy policy. Every tap
     on those buttons landed on the CTA bar instead, so on a phone the banner
     could never be dismissed and permanently buried the bottom of every page.
     Sit the notice above the bar. The theme already does this for its other
     cookie popup (.wd-cookies-popup.popup-display { bottom: 50px }). */
  #cookie-notice {
    z-index: 100000000;
    bottom: 52px;
  }
}

/* Both bottom bars are position:fixed, so neither takes space in flow and the
   end of the footer sat underneath them — on a phone the Facebook / Instagram /
   LinkedIn links were unreachable until the cookie notice was dismissed, and the
   last 47px stayed under the CTA bar for good. Reserve that strip inside the
   footer's own container so the padding is painted in the footer's dark
   background rather than the body's.
   --oc3pl-bottom-reserve is measured from the live bars by
   oc3pl-mobile-fixes.js; the fallbacks below are what applies if it never runs. */
.footer-section > .footer-section__container {
  padding-bottom: var(--oc3pl-bottom-reserve, 0px);
}

@media (max-width: 767px) {
  .footer-section > .footer-section__container {
    padding-bottom: var(--oc3pl-bottom-reserve, 47px);
  }
}

/* .about-service__feature-element is `flex-direction: row; flex-wrap: nowrap`,
   so the text column is a flex item at the default min-width:auto and cannot
   shrink below the min-content width of its longest unbreakable token.
   "OVERSHIPMENT/UNDERSHIPMENT" measures 291px, which pushed
   /fulfillment-solution/retail-wholesale-fulfillment to 431px in a 360px
   viewport. overflow-wrap:anywhere is what lets the token count as breakable
   when min-content is computed; min-width:0 keeps the column shrinkable. */
.about-service__feature-element-container {
  min-width: 0;
}

.about-service__feature-heading {
  overflow-wrap: anywhere;
}