/* Fixes on top of the original WordPress theme (raw/ stays a verbatim snapshot).
   tools/build.py links this file after the theme's main.css on every page.
   Each rule only changes layouts that were broken; at 1440px the site renders
   exactly as before (the e2e desktop screenshots still match at 0 px). */

/* Homepage hero: the 1440px decorative stripe under the hero is centred with
   translateX(-50%), so on any screen narrower than 1440px it sticks out to the right
   and the whole page scrolls sideways (915px wide on a 390px phone, 1360px on a
   1280px laptop). Phones then zoom the page out and the menu button ends up off-screen.
   The theme meant to shrink it below 1480px, but that rule targets .container
   instead of .container-fluid, so it never applied. */
.m-hero .container-fluid:before {
  max-width: 100%;
}

/* Bootstrap draws a thick focus ring on the menu button after every tap; keep it
   for keyboard users only. */
.b-header .navbar-toggler:focus:not(:focus-visible) {
  box-shadow: none;
}

@media (max-width: 1199.98px) {
  /* The opened phone menu had no edge, so its button floated over the page text. */
  .b-header:has(.navbar-collapse.show),
  .b-header:has(.navbar-collapse.collapsing) {
    box-shadow: 0 12px 24px rgba(21, 10, 102, 0.12);
  }

  .b-header .navbar-collapse {
    padding-bottom: 16px;
  }
}

/* Phone legibility: the theme lets these labels shrink to 9px and 7px
   (10px is the most "E-Commerce website" takes inside a 78px circle without splitting). */
.b-engage__item-text {
  font-size: clamp(10px, 2vw, 14px);
}

.a-marketing__label-text {
  font-size: clamp(9px, 1vw, 16px);
}

/* Smallest phones (320px): the floating labels beside the marketing photo are centred
   on its edges and hang past the screen; pull them in. */
@media (max-width: 374.98px) {
  .a-marketing__label:nth-child(1),
  .a-marketing__label:nth-child(3) {
    transform: translate(-75%, 0);
  }

  .a-marketing__label:nth-child(2) {
    transform: translate(-25%, 0);
  }
}