/* ---------------------------------------------------------------------------
   Mobile body-copy floor.

   An audit of 122 pages at 390px found 627 blocks of readable body text
   rendering below 16px - mostly 13-15px inherited from GemPages text
   containers, some as small as 10px. Small text also raises the contrast bar:
   below 18.66px bold / 24px regular, WCAG 1.4.3 wants 4.5:1 rather than 3:1.

   Sets a 16px floor with 1.5 line-height (WCAG 1.4.12 text spacing) for body
   copy on phones only. Desktop and tablet are untouched.

   On !important: the sizes being corrected come from a mix of ~32,000 CSS rules
   across 128 GemPages stylesheets - several of which load after this file - and
   from inline style attributes. Normal cascade order loses to both. This is a
   deliberate accessibility floor, scoped to one media query and to body-copy
   elements only, so it is the appropriate tool rather than a shortcut.

   Not loaded on ViewProd.html (product-description grid stays compact by
   request) or catalog.html (the viewer owns its own type).
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {

  /* body copy inside the page editor region */
  .gryffeditor p:not(#menu-placeholder *),
  .gryffeditor li:not(#menu-placeholder *),
  .gryffeditor td:not(#menu-placeholder *),
  .gryffeditor dd:not(#menu-placeholder *),
  .gryffeditor blockquote:not(#menu-placeholder *) {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  /* the GemPages rich-text container, where most of the small type originates */
  .elm.text-edit:not(#menu-placeholder *) {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
  .elm.text-edit p,
  .elm.text-edit li,
  .elm.text-edit span:not([class]) {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  /* bare lists that set their own smaller size */
  .gryffeditor ul:not(#menu-placeholder *),
  .gryffeditor ol:not(#menu-placeholder *) {
    font-size: 16px !important;
  }

  /* Headings keep their own scale. They are not p/li/td/dd so the rules above
     never touch them; this only guards headings nested inside .text-edit, whose
     container size would otherwise be inherited when sized in em. */
  .elm.text-edit h1, .elm.text-edit h2, .elm.text-edit h3,
  .elm.text-edit h4, .elm.text-edit h5, .elm.text-edit h6 {
    font-size: revert !important;
    line-height: 1.25 !important;
  }

  /* Superscripts, footnote markers and badges may legitimately stay small. */
  .gryffeditor sup, .gryffeditor sub,
  .gryffeditor .badge, .gryffeditor .label {
    font-size: revert !important;
  }

  /* ---- Expert Advice icon row -------------------------------------------
     Four inline-block items share a 360px row, giving each about 65px. That
     was fine while the labels were 10px, but the 16px floor above makes
     "Surface Protection" and "Environment & Safety" wider than their column,
     so they ran into each other. Two columns gives each label ~170px, which
     fits comfortably at a readable size.
     The stylesheets set font-size:0 on the ul to kill inline-block whitespace;
     grid makes that unnecessary, and it would otherwise collapse the labels. */
  ul.expert-advice-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 10px;
    max-width: 420px;
    margin: 0 auto !important;
    padding-left: 0 !important;
    font-size: 16px !important;
    list-style: none;
  }
  ul.expert-advice-list > li {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    text-align: center;
  }
  ul.expert-advice-list img {
    display: block;
    margin: 0 auto 8px !important;
  }
  ul.expert-advice-list a {
    display: block;
    text-decoration: none;
  }
  /* gem-page-53625684108.css pins the label to width:65px, height:10px and
     display:flex at (0,3,1), so it cannot grow into the wider cell or wrap to a
     second line. Released here so the label can use the column it now has. */
  ul.expert-advice-list .advice-text {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    padding: 0 4px !important;
    margin: 6px auto 0 !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    hyphens: none;
  }

  /* ---- Section headings --------------------------------------------------
     GemPages sizes these by breakpoint, and on phones they land at 12.8px
     (56 instances) and 13.3px (the Expert Advice category titles) - below the
     16px body text beneath them, so the hierarchy reads inverted. Raised to
     20px, the bottom of the agreed mobile H2 range.

     Scoped to the gf_gs-text-heading-2 class rather than to h1-h6, because the
     markup uses heading tags loosely - an h5 serves as a section title while an
     h1 is used for a "Quick View" label - so tag alone is not a reliable
     signal of visual level. */
  .gryffeditor h2.gf_gs-text-heading-2,
  .gryffeditor h3.gf_gs-text-heading-2,
  .gryffeditor h4.gf_gs-text-heading-2,
  .gryffeditor h5.gf_gs-text-heading-2 {
    font-size: 20px !important;
    line-height: 1.25 !important;
  }
}

/* Tablet: the same section headings sit at 19.2px, under the 22-26px target
   and barely above body copy. Phones and desktop are handled elsewhere -
   desktop already lands at 25px, inside range. */
@media (min-width: 768px) and (max-width: 1023px) {
  .gryffeditor h2.gf_gs-text-heading-2,
  .gryffeditor h3.gf_gs-text-heading-2,
  .gryffeditor h4.gf_gs-text-heading-2,
  .gryffeditor h5.gf_gs-text-heading-2 {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }
}