/* SEO pass, 2026-10-23.
   Some headings were retagged so each page has one H1 and the outline does not skip levels.
   These rules make a retagged element look exactly like the level it used to be: the site sizes
   every heading level from its own variable (--heading-N-size-value) and colours it from a
   per-level theme colour, so borrowing those keeps desktop and phone sizes identical. */

/* heading typography for elements that are no longer h1-h4 */
.seo-hfont {
  font-family: var(--heading-font-font-family);
  font-style: var(--heading-font-font-style);
  font-weight: var(--heading-font-font-weight);
  letter-spacing: var(--heading-font-letter-spacing);
  text-transform: var(--heading-font-text-transform);
}

/* an h1 that used to be an h2 */
h1.seo-look-h2 {
  --heading-1-size-value: var(--heading-2-size-value);
  color: var(--headingLargeColor);
}

/* an h2 that used to be an h1 */
h2.seo-look-h1 {
  --heading-2-size-value: var(--heading-1-size-value);
  color: var(--headingExtraLargeColor);
}

/* a p that used to be an h2 (testimonial quotes on the home page); same size rules as the site's h2, including the
   portrait-phone formula */
p.seo-look-h2 {
  line-height: calc(var(--heading-font-line-height) * (1 + (1 - var(--heading-2-size-value))/25));
  color: var(--headingLargeColor);
}
@media screen and (max-width: 767px) and (orientation: portrait) {
  p.seo-look-h2 { font-size: calc((var(--heading-2-size-value) - 1) * calc(.012 * min(100vh, 900px)) + 1rem); }
}
@media screen and (min-width: 768px), screen and (orientation: landscape) {
  p.seo-look-h2 { font-size: min(calc((var(--heading-2-size-value) - 1) * 1.2vw + 1rem), max(calc((var(--heading-2-size-value) - 1) * 0.012 * var(--maxPageWidth) + 1rem), calc(var(--heading-2-size-value) * 1rem))); }
}

/* a p that used to be an h4 (footer tagline); same size rules as the site's h4, including the
   portrait-phone formula */
p.seo-look-h4 {
  line-height: calc(var(--heading-font-line-height) * (1 + (1 - var(--heading-4-size-value))/25));
  color: var(--headingSmallColor);
}
@media screen and (max-width: 767px) and (orientation: portrait) {
  p.seo-look-h4 { font-size: calc((var(--heading-4-size-value) - 1) * calc(.012 * min(100vh, 900px)) + 1rem); }
}
@media screen and (min-width: 768px), screen and (orientation: landscape) {
  p.seo-look-h4 { font-size: min(calc((var(--heading-4-size-value) - 1) * 1.2vw + 1rem), max(calc((var(--heading-4-size-value) - 1) * 0.012 * var(--maxPageWidth) + 1rem), calc(var(--heading-4-size-value) * 1rem))); }
}

/* a wrapper heading that must not create a box of its own (home page hero image) */
.seo-contents { display: contents; }

/* text for search engines and screen readers next to graphics that already show it */
.seo-sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* "Buy" buttons added under each model on /models (copied from the /buynow list buttons) */
.seo-model-buy { margin-top: 4%; }

/* an h1 that used to be the p section title of a list section (/models, /buynow) */
h1.seo-look-listtitle {
  --heading-1-size-value: var(--heading-2-size-value);
  line-height: var(--body-font-line-height);
  margin: 0;
}

/* the "Technical Specifications" list title, now an h2 (same look as the p it replaced) */
h2.seo-look-listtitle-h2 {
  line-height: var(--body-font-line-height);
  margin: 0;
}

/* ── Spec and accessory tables on the home page (were two PNG charts) ─────── */
.chube-spec { width: 100%; overflow-x: auto; text-align: left; }
.chube-spec table {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  font-family: var(--body-font-font-family); font-size: 14px; line-height: 1.45; color: #111; background: #fff;
}
.chube-spec caption {
  caption-side: top; text-align: center; padding: 0 0 14px;
  font-family: var(--heading-font-font-family); font-weight: var(--heading-font-font-weight);
  letter-spacing: var(--heading-font-letter-spacing); font-size: 1.5rem; color: #111;
}
.chube-spec th, .chube-spec td { padding: 11px 10px; border: 1px solid #c4c4c4; vertical-align: middle; }
/* every cell is a box: a value shared by several models is one wide box across their columns,
   a model-specific value sits in its own box, so the eye can follow rows and columns */
.chube-spec thead th { border-color: #1d1d1d; border-left-color: #6a6a6a; border-right-color: #6a6a6a; }
.chube-spec thead th:first-child { border-left-color: #1d1d1d; }
.chube-spec thead th:last-child { border-right-color: #1d1d1d; }
.chube-spec tbody th { background: #ececec; }
.chube-spec tbody tr:nth-child(even) th { background: #e2e2e2; }
.chube-spec tbody tr:hover td, .chube-spec tbody tr:hover th { background: #fdf0ea; }
/* the site breaks long words anywhere; hyphenate properly instead */
.chube-spec th, .chube-spec td, .chube-spec caption { overflow-wrap: normal; word-break: normal; -webkit-hyphens: manual; hyphens: manual; }
.chube-spec thead th {
  background: #1d1d1d; color: #fff; text-align: center;
  font-family: var(--heading-font-font-family); font-weight: 500; font-size: 13px;
  letter-spacing: .09em; text-transform: uppercase; padding: 12px 8px;
}
.chube-spec thead th:first-child { text-align: left; padding-left: 12px; }
.chube-spec thead a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.45); padding-bottom: 1px; }
.chube-spec thead a:hover, .chube-spec thead a:focus-visible { border-bottom-color: #ee5a24; color: #fff; }
.chube-spec tbody th {
  width: 30%; text-align: left; padding-left: 12px;
  font-family: var(--heading-font-font-family); font-weight: 500; font-size: 12px;
  letter-spacing: .05em; text-transform: uppercase; color: #3a3a3a;
}
.chube-spec td { text-align: center; }
.chube-spec tbody tr:nth-child(even) { background: #f4f4f4; }
.chube-spec__note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: #555; text-align: left; }
@media screen and (max-width: 767px) {
  .chube-spec table { font-size: 12.5px; }
  .chube-spec th, .chube-spec td { -webkit-hyphens: auto; hyphens: auto; }
  .chube-spec th, .chube-spec td { padding: 9px 5px; }
  .chube-spec thead th { font-size: 11px; letter-spacing: .05em; padding: 10px 4px; }
  .chube-spec tbody th { width: 31%; font-size: 10.5px; letter-spacing: .03em; padding-left: 7px; }
  .chube-spec caption { font-size: 1.3rem; }
}