/* ════════════════════════════════════════════════════════════
   TPMS — /tpms/ (page-tpms.php)
   Enqueued only on that template, by inc/tpms.php.

   The page used to be hardcoded HTML in six section divs and is now the
   page's own post_content, which carries no classes. Everything below hangs
   off the element sequence the content emits and off content-stable hooks
   (image file names, the inline colour on the step headings), never off
   nth-child counts, so an editor can add or remove a paragraph without the
   layout sliding out of place.

   Every selector starts at .tpms-content, which exists on this template and
   nowhere else in the theme. Nothing here can reach the shop, /tpms/faq/,
   /tpms/tpms-training/ or /patents/.

   Colours are the ones the page already used: red #ED3343 with #EE3A43 on the
   step cards, navy #0D2F55 on the value headings and #1A1A1A for near-black.
   Headings are Futura with the theme's usual fallbacks.
   ════════════════════════════════════════════════════════════ */

.tpms-content {
  --tpms-red: #ED3343;
  --tpms-red-card: #EE3A43;
  --tpms-navy: #0D2F55;
  --tpms-ink: #1A1A1A;
  --tpms-body: #333333;
  --tpms-band: #F4F5F7;
  --tpms-heading: 'Futura', 'Trebuchet MS', Arial, sans-serif;
  background: #ffffff;
}

/* ── PAGE FRAME ──
   .wrapper normally holds the site's 1250px measure, but style.css also carries
   `.entry-content > :not(…) { max-width: 100% !important }`, a seven-class
   selector that reaches this wrapper and wins. Rather than out-specify a
   site-wide rule from a page-scoped file, the measure is rebuilt out of padding,
   which nothing is competing for. */
.tpms-content > .wrapper {
  --tpms-gutter: max(20px, calc((100% - 1250px) / 2));
  padding: 56px var(--tpms-gutter) 88px;
  display: flex;
  flex-wrap: wrap;
}

/* Full width is the default for everything in the flow. The two grouped rows
   below opt out of it. */
.tpms-content .wrapper > * {
  flex: 1 1 100%;
  min-width: 0;
}

/* ── TYPOGRAPHY ── */
.tpms-content .wrapper > p,
.tpms-content .wrapper li {
  font-family: 'CartoGothic', 'Trebuchet MS', sans-serif;
  font-size: 18px;
  line-height: 1.75;
  color: var(--tpms-body);
}

.tpms-content .wrapper > p {
  margin: 0 0 20px;
}

.tpms-content h1,
.tpms-content h2,
.tpms-content h3,
.tpms-content h4 {
  font-family: var(--tpms-heading);
  font-weight: bold;
  line-height: 1.25;
}

.tpms-content .wrapper > h1 {
  color: var(--tpms-ink);
  margin: 0 0 24px;
}

.tpms-content .wrapper > h2 {
  font-size: 32px;
  color: var(--tpms-ink);
  margin: 44px 0 18px;
}

/* A short red rule under every section heading, the way the old sections
   separated themselves from the copy above. */
.tpms-content .wrapper > h2::after {
  content: '';
  display: block;
  width: 68px;
  height: 4px;
  background: var(--tpms-red);
  margin-top: 14px;
}

.tpms-content .wrapper > h3 {
  font-size: 26px;
  color: var(--tpms-ink);
  margin: 32px 0 14px;
}

.tpms-content .wrapper a {
  color: var(--tpms-red);
}

/* Runs of tabs in the legacy content become <br> inside body copy. They are
   the old template's line wrapping, not editorial line breaks, and they wreck
   a narrow column. Headings keep theirs — SUPERIOR <br> PRODUCT is deliberate. */
.tpms-content .wrapper > p br {
  display: none;
}

.tpms-content .wrapper > p:empty {
  display: none;
}

/* The hero already renders the product search. The copy of it inside the page
   content is a leftover that duplicates both the widget and its DOM id.
   Deleting it from the page in WordPress is the real fix. */
.tpms-content .wrapper > form[role="search"] {
  display: none;
}

/* ── LISTS ── */
.tpms-content .wrapper > ul {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 48px;
}

.tpms-content .wrapper > ul > li {
  break-inside: avoid;
  position: relative;
  padding: 6px 0 6px 30px;
  margin: 0;
}

.tpms-content .wrapper > ul > li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 15px;
  width: 9px;
  height: 9px;
  background: var(--tpms-red);
  border-radius: 50%;
}

/* ── IMAGES ── */
.tpms-content .wrapper img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* The two editorial photographs get the card treatment the old sections used. */
.tpms-content .wrapper > p > img {
  border-radius: 15px;
  box-shadow: -9px 14px 13px #00000033;
}

.tpms-content .wrapper > p:has(> img) {
  margin: 12px 0 32px;
  text-align: center;
}

/* ── PULL QUOTE ──
   <p><em>…</em></p> followed by the one <strong> in the page. */
.tpms-content .wrapper > p:has(> em) {
  max-width: 860px;
  margin: 8px auto 0;
  padding: 0 0 0 26px;
  border-left: 4px solid var(--tpms-red);
  font-family: var(--tpms-heading);
  font-size: 24px;
  line-height: 1.5;
  color: var(--tpms-ink);
}

.tpms-content .wrapper > p:has(> strong) {
  max-width: 860px;
  margin: 12px auto 36px;
  padding-left: 30px;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #666666;
}

.tpms-content .wrapper > p:has(> strong) strong {
  font-family: var(--tpms-heading);
}

/* ── CALL TO ACTION LINKS ──
   The content emits these as a bare internal link alone in its own paragraph.
   Requiring a root-relative href keeps the outbound catalog link inside the
   intro paragraph out of it. */
.tpms-content .wrapper > p:has(> a[href^="/"]:only-child) {
  text-align: center;
  margin: 10px 0 34px;
}

.tpms-content .wrapper > p > a[href^="/"]:only-child {
  display: inline-block;
  min-width: 250px;
  max-width: 100%;
  padding: 13px 34px;
  border: 2px solid var(--tpms-red);
  border-radius: 31px;
  background: var(--tpms-red);
  box-shadow: 2px 5px 5px #00000030;
  color: #ffffff;
  font-family: var(--tpms-heading);
  font-size: 20px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.tpms-content .wrapper > p > a[href^="/"]:only-child:hover,
.tpms-content .wrapper > p > a[href^="/"]:only-child:focus {
  background: #ffffff;
  color: var(--tpms-red);
}

/* ── FOUR VALUES ──
   Icon, heading and copy arrive as twelve flat siblings in the order
   img, h2, p, img, h2, p, … Flex `order` collects them into three rows of four
   so each value reads as a column, without the content needing a wrapper.
   :where() keeps the "everything after" rules at zero specificity so the rules
   that follow win on the elements they both match. */
.tpms-content .wrapper > :where(p:has(> img[src*="ValueIcons_satisfaction"]) + h2 + p ~ *) {
  order: 4;
}

.tpms-content .wrapper > p:has(> img[src*="ValueIcons_"]) {
  order: 1;
  flex-basis: 25%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 190px;
  margin: 0;
  padding: 34px 16px 0;
}

.tpms-content .wrapper > p:has(> img[src*="ValueIcons_"]) + h2 {
  order: 2;
  flex-basis: 25%;
  font-size: 26px;
  color: var(--tpms-navy);
  text-align: center;
  margin: 0;
  padding: 20px 16px 0;
}

.tpms-content .wrapper > p:has(> img[src*="ValueIcons_"]) + h2::after {
  display: none;
}

.tpms-content .wrapper > p:has(> img[src*="ValueIcons_"]) + h2 + p {
  order: 3;
  flex-basis: 25%;
  text-align: center;
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
  padding: 12px 16px 40px;
}

/* The icons carry none of the photo card treatment. */
.tpms-content .wrapper > p:has(> img[src*="ValueIcons_"]) > img {
  border-radius: 0;
  box-shadow: none;
  max-height: 160px;
  width: auto;
}

/* All twelve share one background, so the three rows read as a single panel.
   Painting it from the items rather than a wrapper is the reason the row has no
   margins between its parts: a gap would show through as a stripe. A box-shadow
   spread wide enough to bleed past the measure is not an option here, because a
   shadow that size also covers the columns to its left. */
.tpms-content .wrapper > p:has(> img[src*="ValueIcons_"]),
.tpms-content .wrapper > p:has(> img[src*="ValueIcons_"]) + h2,
.tpms-content .wrapper > p:has(> img[src*="ValueIcons_"]) + h2 + p {
  background: var(--tpms-band);
}

/* ── WHAT YOU GET ──
   Three heading/copy pairs, hooked off the inline colour the content gives the
   step headings. Same trick: two rows of three, then cards drawn on the pair. */
.tpms-content .wrapper > :where(h3[style*="#666666"] + p ~ *) {
  order: 8;
}

.tpms-content .wrapper > h3[style*="#666666"] {
  order: 6;
  flex-basis: 33.3333%;
  margin: 0;
  padding: 34px 34px 0;
  border: 3px solid var(--tpms-red-card);
  border-bottom: 0;
  border-radius: 15px 15px 0 0;
  background: #ffffff;
  color: var(--tpms-ink) !important;
  text-align: center;
}

.tpms-content .wrapper > h3[style*="#666666"] + p {
  order: 7;
  flex-basis: 33.3333%;
  margin: 0 0 30px;
  padding: 14px 34px 34px;
  border: 3px solid var(--tpms-red-card);
  border-top: 0;
  border-radius: 0 0 15px 15px;
  background: #ffffff;
  box-shadow: 2px 5px 6px #00000033;
  text-align: center;
  font-size: 17px;
}

/* The heading row and the copy row have to share one geometry or the card
   halves will not line up, so the gutter is the same on both. */
.tpms-content .wrapper > h3[style*="#666666"],
.tpms-content .wrapper > h3[style*="#666666"] + p {
  flex-basis: calc(33.3333% - 20px);
  margin-left: 10px;
  margin-right: 10px;
}

/* ── ENQUIRY ──
   The two headings above the HubSpot form, and the form itself. */
.tpms-content .wrapper > h3:not([style*="#666666"]) {
  text-align: center;
  font-size: 34px;
  color: var(--tpms-ink);
  margin: 48px 0 10px;
}

.tpms-content .wrapper > h3:not([style*="#666666"]) + h3 {
  margin-top: 0;
  color: var(--tpms-body);
}

.tpms-content .wrapper > .hbspt-form {
  max-width: 760px;
  margin: 0 auto;
  padding: 34px;
  background: var(--tpms-band);
  border-top: 5px solid var(--tpms-red);
  border-radius: 0 0 15px 15px;
}

.tpms-content .wrapper > .hbspt-form input[type="submit"] {
  background: var(--tpms-red);
  border: 2px solid var(--tpms-red);
  border-radius: 31px;
  color: #ffffff;
  font-family: var(--tpms-heading);
  padding: 10px 32px;
  cursor: pointer;
}

/* ── NARROW SCREENS ──
   Below the point where four columns still read, the grouped rows have to go
   back to source order, or `order` would stack all four icons, then all four
   headings, then all four paragraphs. Giving every part of a group the same
   order value hands the ordering back to the document. A two-up middle step is
   not available for the same reason: at 50% the four icons fill two rows before
   a single heading is placed. */
@media only screen and (max-width: 782px) {
  .tpms-content > .wrapper {
    padding: 36px var(--tpms-gutter) 56px;
  }

  .tpms-content .wrapper > h2 {
    font-size: 26px;
  }

  .tpms-content .wrapper > ul {
    columns: 1;
  }

  .tpms-content .wrapper > p:has(> img[src*="ValueIcons_"]),
  .tpms-content .wrapper > p:has(> img[src*="ValueIcons_"]) + h2,
  .tpms-content .wrapper > p:has(> img[src*="ValueIcons_"]) + h2 + p {
    order: 1;
    flex-basis: 100%;
  }

  .tpms-content .wrapper > p:has(> img[src*="ValueIcons_"]) {
    min-height: 0;
    padding: 34px 16px 0;
  }

  .tpms-content .wrapper > p:has(> img[src*="ValueIcons_"]) + h2 + p {
    padding-bottom: 26px;
  }

  .tpms-content .wrapper > h3[style*="#666666"],
  .tpms-content .wrapper > h3[style*="#666666"] + p {
    order: 6;
    flex-basis: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Four columns get tight before they get too narrow to read. */
@media only screen and (min-width: 783px) and (max-width: 1100px) {
  .tpms-content .wrapper > p:has(> img[src*="ValueIcons_"]) + h2 {
    font-size: 21px;
  }

  .tpms-content .wrapper > p:has(> img[src*="ValueIcons_"]) + h2 + p {
    font-size: 15px;
    padding-left: 10px;
    padding-right: 10px;
  }
}