/* Steam Sanitation Systems page styles.
   Loaded by page-food-safety-sanitation-systems.php after electrosteam-style.
   Everything is scoped to .sss-page so it cannot reach another page, and
   every color, font and spacing value comes from the style.css tokens. It
   carries the anchor bar, the framed photo with its red corner rule, the
   wide .sss-line-card links and the tables that sit in the copy column under
   the summary text. */

/* The page heading is the house .page-heading-bar with no local override:
   ground, padding, eyebrow, H1 and the .page-heading-sub lede line are all
   managed from style.css so every page on the site matches. */

/* =========================================
   STICKY ANCHOR BAR - five links, scrolls sideways, never wraps
   .site-header is the only other sticky element (72px tall)
========================================= */
.sss-page .anchor-bar {
  position      : sticky;
  top           : 72px;
  z-index       : 900;
  /* The page gutter lives on the bar, not on .anchor-bar-inner: the inner
     wrapper carries no padding, so the first link starts exactly on the
     max-width edge that the section content below starts on, and narrow
     screens still keep their gutter. */
  padding       : 0 24px;
  background    : var(--white);
  border-bottom : 1px solid var(--gray-light);
  box-shadow    : 0 1px 8px rgba(0, 0, 0, 0.05);
}

.sss-page .anchor-bar-inner {
  max-width          : var(--max-width);
  margin             : 0 auto;
  display            : flex;
  flex-wrap          : nowrap;
  gap                : 4px;
  overflow-x         : auto;
  scrollbar-width    : none;
  -ms-overflow-style : none;
  -webkit-overflow-scrolling : touch;
}

.sss-page .anchor-bar-inner::-webkit-scrollbar {
  display : none;
}

.sss-page .anchor-link {
  position        : relative;
  /* five links: they must scroll sideways, never shrink or wrap */
  flex            : 0 0 auto;
  display         : block;
  padding         : 17px 14px 16px;
  font-family     : var(--font-body);
  font-size       : 0.88rem;
  font-weight     : 700;
  text-transform  : uppercase;
  letter-spacing  : 0.08em;
  color           : var(--gray-text);
  white-space     : nowrap;
  text-decoration : none;
  transition      : color 0.15s;
}

.sss-page .anchor-link:hover {
  color           : var(--navy-dark);
  text-decoration : none;
}

.sss-page .anchor-link.active {
  color : var(--red);
}

.sss-page .anchor-link::after {
  content          : '';
  position         : absolute;
  left             : 14px;
  right            : 14px;
  bottom           : 0;
  height           : 3px;
  background       : var(--red);
  transform        : scaleX(0);
  transform-origin : left center;
  transition       : transform 0.2s ease;
}

.sss-page .anchor-link.active::after {
  transform : scaleX(1);
}

/* Every anchor target clears the sticky header + the anchor bar.
   Must match OFFSET in the anchor-bar script. */
.sss-page section[id] {
  scroll-margin-top : 140px;
}

/* Shared section heading */
.sss-page .sss-section-h2 {
  font-family   : var(--font-body);
  font-size     : clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight   : 700;
  line-height   : 1.2;
  color         : var(--navy-dark);
  margin        : 0 0 14px;
}

/* .inner-prose ul out-specifies .check-list, which would add disc markers and a
   24px indent on top of the check icons. Restore the check-list look. */
.sss-page .inner-prose ul.check-list {
  list-style   : none;
  margin-left  : 0;
  padding-left : 0;
}

/* =========================================
   OVERVIEW: copy + choice panels left, framed photo right (V9, unchanged)
========================================= */
.sss-page .sss-overview-section {
  background : var(--white);
  padding    : 56px 24px 60px;
}

.sss-page .sss-overview-inner {
  max-width             : var(--max-width);
  margin                : 0 auto;
  display               : grid;
  grid-template-columns : minmax(0, 7fr) minmax(0, 5fr);
  gap                   : 48px;
  align-items           : start;
}

.sss-page .sss-overview-main {
  min-width : 0;
}

.sss-page .sss-overview-lead {
  font-size     : 1.06rem;
  line-height   : 1.75;
  color         : var(--gray-text);
  margin-bottom : 22px;
}

.sss-page .sss-overview-label {
  font-family    : var(--font-body);
  font-size      : 0.78rem;
  font-weight    : 700;
  text-transform : uppercase;
  letter-spacing : 0.1em;
  color          : var(--navy-dark);
  margin-bottom  : 8px;
}

.sss-page .sss-overview-checks {
  margin-bottom : 20px;
}

.sss-page .sss-overview-btn-row {
  margin-bottom : 26px;
}

.sss-page .sss-overview-intro {
  font-size     : 1.02rem;
  line-height   : 1.75;
  color         : var(--gray-text);
  margin-bottom : 24px;
}

.sss-page .sss-overview-intro a {
  color : #1a6ed3;
}

/* Framed photo with a red corner rule ---------------------------------- */
.sss-page .sss-hero-figure {
  position   : relative;
  margin     : 0;
  align-self : start;
  width      : 100%;
}

.sss-page .sss-hero-figure-frame {
  position      : relative;
  z-index       : 1;
  display       : block;
  background    : var(--white);
  border        : 1px solid var(--gray-light);
  border-radius : 4px;
  padding       : 12px;
}

.sss-page .sss-hero-figure-frame img {
  display       : block;
  width         : 100%;
  height        : auto;
  border-radius : 2px;
}

/* Anchored to the frame, not the figure: the caption can run to two lines
   without the bottom stroke crossing it. */
.sss-page .sss-hero-figure-frame::after {
  content       : '';
  position      : absolute;
  right         : -14px;
  bottom        : -14px;
  width         : 104px;
  height        : 104px;
  border-right  : 3px solid var(--red);
  border-bottom : 3px solid var(--red);
}

.sss-page .sss-hero-figure figcaption {
  position    : relative;
  z-index     : 1;
  margin-top  : 28px;
  font-size   : 0.88rem;
  line-height : 1.5;
  color       : var(--gray-text);
}

/* =========================================
   BENEFITS - clean steam V1's Standard Features split, tweak (a):
   a lede + a flat rule list on the left, a short wide row of line tiles
   on the right.
========================================= */
.sss-page .sss-benefits-section {
  background : var(--off-white);
  border-top : 1px solid var(--gray-light);
  padding    : 60px 24px 64px;
}

.sss-page .sss-benefits-inner {
  max-width             : var(--max-width);
  margin                : 0 auto;
  display               : grid;
  grid-template-columns : minmax(0, 7fr) minmax(0, 5fr);
  gap                   : 56px;
  align-items           : start;
}

.sss-page .sss-benefits-prose {
  /* One measure for the whole column: the lede, the rule list and the closing
     paragraph share a right edge instead of each ragging to its own cap. */
  min-width : 0;
  max-width : none;
}

.sss-page .sss-benefits-h2 {
  font-family : var(--font-body);
  font-size   : clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight : 700;
  line-height : 1.2;
  color       : var(--navy-dark);
  margin      : 0 0 14px;
}

/* The pull-statement that opens the column: the benefits paragraph, set one
   step up from body copy so it reads as a lede rather than as a caption on
   the list under it. */
.sss-page .sss-benefits-lede {
  font-size     : 1.15rem;
  line-height   : 1.65;
  color         : var(--navy-dark);
  margin-bottom : 22px;
}

/* Flat list with light rules between items - the theme's .tech-def-list
   idiom - instead of the check-icon list V9 used here. No numbers and no
   bullet: the rule is the separator. */
.sss-page .sss-benefit-list {
  margin        : 0 0 26px;
  border-top    : 1px solid var(--gray-light);
  border-bottom : 1px solid var(--gray-light);
}

.sss-page .sss-benefit-item {
  margin      : 0;
  padding     : 14px 2px;
  font-family : var(--font-body);
  font-size   : 1rem;
  font-weight : 600;
  line-height : 1.45;
  color       : var(--navy-dark);
}

.sss-page .sss-benefit-hr {
  border     : none;
  border-top : 1px solid var(--gray-light);
  margin     : 0;
}

.sss-page .sss-benefits-contact {
  font-size     : 1rem;
  line-height   : 1.7;
  color         : var(--gray-text);
  margin-bottom : 0;
}

/* The right column: V11's three WIDE horizontal cards - thumb left, name and
   one-liner right, stacked vertically - imported here and re-scoped. The red
   accent is on the left edge. The thumb is 25% larger than V11 renders it
   (V11: 104px column / 74px tall -> here 130px / 93px), and the card padding
   and column gap step up with it so the text block still sits centred against
   a taller thumb. ---------------------------------------------------------- */
.sss-page .sss-line-links {
  min-width : 0;
}

.sss-page .sss-line-links-label {
  margin         : 0 0 12px;
  font-family    : var(--font-body);
  font-size      : 0.72rem;
  font-weight    : 700;
  text-transform : uppercase;
  letter-spacing : 0.1em;
  color          : var(--red);
}

.sss-page .sss-line-cards {
  display        : flex;
  flex-direction : column;
  gap            : 14px;
}

.sss-page .sss-line-card {
  display               : grid;
  grid-template-columns : 130px minmax(0, 1fr);
  column-gap            : 22px;
  align-items           : center;
  background            : var(--white);
  border                : 1px solid var(--gray-light);
  border-left           : 3px solid var(--red);
  border-radius         : 0 6px 6px 0;
  padding               : 16px 22px;
  box-shadow            : 0 2px 10px rgba(9, 28, 46, 0.07);
  color                 : inherit;
  text-decoration       : none !important;
  transition            : border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.sss-page .sss-line-card:hover,
.sss-page .sss-line-card:focus-visible {
  border-left-color : var(--red-bright);
  box-shadow        : 0 8px 24px rgba(9, 28, 46, 0.16);
  transform         : translateX(2px);
}

.sss-page .sss-line-card-figure {
  width         : 100%;
  height        : 93px;
  object-fit    : contain;
  background    : var(--white);
  border-radius : 4px;
}

.sss-page .sss-line-card-body {
  display        : flex;
  flex-direction : column;
  min-width      : 0;
}

.sss-page .sss-line-card-title {
  display       : block;
  font-family   : var(--font-body);
  font-size     : 1.06rem;
  font-weight   : 700;
  line-height   : 1.2;
  color         : var(--navy-dark);
  margin-bottom : 5px;
}

.sss-page .sss-line-card-text {
  display     : block;
  font-size   : 0.84rem;
  line-height : 1.5;
  color       : var(--gray-text);
}

.sss-page .sss-line-card:hover .sss-line-card-title {
  color : var(--red);
}

/* =========================================
   THE THREE SERIES SECTIONS - figure column fixed on the LEFT in all three
   (clean steam V1's rhythm). The spec table sits in the RIGHT copy
   column, under the summary paragraphs and above the red button, and reduces
   it to a single summary row.
========================================= */
.sss-page .sss-line-section {
  padding    : 56px 24px 60px;
  background : var(--white);
  border-top : 1px solid var(--gray-light);
}

.sss-page .sss-line-section--alt {
  background : var(--off-white);
}

.sss-page .sss-line-inner {
  max-width : var(--max-width);
  margin    : 0 auto;
}

.sss-page .sss-series-split {
  display               : grid;
  /* The copy column carries the summary paragraphs, the four-column spec row
     and the button, so it takes the wider half again; the figure column holds
     nothing but the framed photo. Top-aligned, so the H2 starts on the same
     line as the top of that photo. */
  grid-template-columns : minmax(0, 5fr) minmax(0, 7fr);
  gap                   : 56px;
  align-items           : start;
}

.sss-page .sss-series-figure-col,
.sss-page .sss-series-copy-col {
  min-width : 0;
}

.sss-page .sss-line-figure {
  position : relative;
  margin   : 0;
}

.sss-page .sss-line-figure-frame {
  position        : relative;
  z-index         : 1;
  display         : flex;
  align-items     : center;
  justify-content : center;
  aspect-ratio    : 4 / 3;
  background      : var(--white);
  border          : 1px solid var(--gray-light);
  border-radius   : 4px;
  padding         : 14px;
}

.sss-page .sss-line-figure-frame img {
  display       : block;
  width         : 100%;
  height        : 100%;
  object-fit    : contain;
  border-radius : 2px;
}

/* Absolutely positioned so it stays out of the frame's flex layout */
.sss-page .sss-line-figure-frame::after {
  content       : '';
  position      : absolute;
  right         : -14px;
  bottom        : -14px;
  width         : 104px;
  height        : 104px;
  border-right  : 3px solid var(--red);
  border-bottom : 3px solid var(--red);
}

.sss-page .sss-line-figure figcaption {
  position    : relative;
  z-index     : 1;
  margin-top  : 28px;
  font-size   : 0.9rem;
  font-weight : 700;
  line-height : 1.4;
  color       : var(--navy-dark);
}

/* The spec-sheet block under the photo ---------------------------------- */
.sss-page .sss-table-label {
  margin         : 26px 0 10px;
  font-family    : var(--font-body);
  font-size      : 0.72rem;
  font-weight    : 700;
  text-transform : uppercase;
  letter-spacing : 0.1em;
  color          : var(--red);
}

.sss-page .sss-series-table-wrap {
  width      : 100%;
  box-shadow : 0 2px 12px rgba(9, 28, 46, 0.08);
}

/* The table now lives inside .inner-prose, whose house rule puts 24px/32px
   margins on every table. Those margins sit INSIDE the shadowed wrapper (it
   scrolls, so they cannot collapse out of it) and left a band of empty white
   above and below the single row. The wrapper's own spacing comes from the
   label above it and the button row below it. */
.sss-page .sss-series-copy-col .sss-series-table {
  margin : 0;
}

/* One row per model plus a button column, sitting in the wider copy column:
   close to the house .product-table, trimmed a step so the headers fit on one
   line each at 1024 and above. Auto layout (no --fixed) lets each column take only
   the width its value needs; the header labels are the long strings here, so
   they are the ones allowed to wrap. */
.sss-page .sss-series-table {
  font-size : 0.92rem;
}

.sss-page .sss-series-table th {
  white-space    : normal;
  line-height    : 1.25;
  vertical-align : bottom;
  font-size      : 0.72rem;
  letter-spacing : 0.06em;
  padding        : 12px 16px;
}

.sss-page .sss-series-table td {
  white-space : nowrap;
  padding     : 14px 16px;
  font-weight : 600;
  color       : var(--navy-dark);
}

/* The row itself is not clickable (the Model # link and the View Model button
   are), so the house row hover would read as a false affordance. Suppressed
   the way the theme suppresses it for .spec-table. */
.sss-page .sss-series-table tbody tr:hover {
  background : transparent;
}

/* Model # links: house link color inside the navy-weight cell. */
.sss-page .sss-series-table td a:not(.btn) {
  color           : var(--red);
  text-decoration : none;
}

.sss-page .sss-series-table td a:not(.btn):hover {
  text-decoration : underline;
}

/* The View Model button: the house red button trimmed to row height, in a
   right-aligned cell that takes only the width the button needs. */
.sss-page .sss-series-table .sss-model-btn-cell {
  width      : 1%;
  text-align : right;
}

.sss-page .sss-model-btn {
  padding   : 7px 14px;
  font-size : 0.78rem;
}

.sss-page .sss-series-copy-col .sss-series-copy {
  font-size     : 1.04rem;
  line-height   : 1.75;
  color         : var(--navy-dark);
  margin-bottom : 16px;
  max-width     : none;
}

/* =========================================
   SERIES / MODELS TABLE EXTRAS
   The three rules the cloned stylesheet had no markup for: the series table's
   screen-reader-only Details header, the wrapping Item column of the conveyor
   models table, and the single-button row on the accessories line.
========================================= */

/* An empty 4th header cell would read as a blank column to a screen reader. */
.sss-page .sss-sr-only {
  position : absolute;
  width    : 1px;
  height   : 1px;
  margin   : -1px;
  padding  : 0;
  overflow : hidden;
  clip     : rect(0, 0, 0, 0);
  border   : 0;
}

/* Conveyor item names are full phrases, not spec values; the nowrap that keeps
   a kW figure on one line would push this table into a sideways scroll. The
   Model code column still holds one line. */
.sss-page .sss-series-table--wrap td {
  white-space : normal;
  line-height : var(--lh-tight);
}

.sss-page .sss-series-table--wrap td:nth-child(1) {
  white-space : nowrap;
}

/* The accessories line has no table, so its button row carries the top spacing
   the table label would otherwise have given it. */
.sss-page .sss-series-btn-row {
  margin : var(--sp-3) 0 0;
}
/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 1200px) {
  .sss-page .sss-overview-inner {
    gap : 36px;
  }

  .sss-page .sss-benefits-inner,
  .sss-page .sss-series-split {
    gap : 40px;
  }

  .sss-page .anchor-link {
    padding        : 17px 11px 16px;
    font-size      : 0.82rem;
    letter-spacing : 0.05em;
  }

  .sss-page .anchor-link::after {
    left  : 11px;
    right : 11px;
  }

  /* The copy column is at its narrowest here, so the single spec row tightens
     once before the layout stacks at 1024. */
  .sss-page .sss-series-table {
    font-size : 0.86rem;
  }

  .sss-page .sss-series-table th,
  .sss-page .sss-series-table td {
    padding : 11px 12px;
  }

  /* The thumb column steps down with the card, not the copy. */
  .sss-page .sss-line-card {
    grid-template-columns : 116px minmax(0, 1fr);
    column-gap            : 18px;
  }

  .sss-page .sss-line-card-figure {
    height : 84px;
  }
}

@media (max-width: 1024px) {
  .sss-page .sss-overview-inner,
  .sss-page .sss-benefits-inner {
    grid-template-columns : minmax(0, 1fr);
    gap                   : 36px;
  }

  .sss-page .sss-hero-figure {
    max-width : 560px;
  }

  .sss-page .sss-benefits-prose {
    max-width : none;
  }

  /* One column here, so the card stack is capped: full width would stretch
     each wide card far past its thumb. */
  .sss-page .sss-line-links {
    max-width : 780px;
  }

  /* Stacked: photo on top, copy underneath. The photo is capped so it does not
     run to the full section width, while the single spec row - which reads as
     a data strip - is allowed to. */
  .sss-page .sss-series-split {
    grid-template-columns : minmax(0, 1fr);
    gap                   : 32px;
    align-items           : start;
  }

  .sss-page .sss-series-figure-col {
    max-width : 560px;
  }

  .sss-page .sss-series-table {
    font-size : 0.93rem;
  }

  .sss-page .sss-series-table th,
  .sss-page .sss-series-table td {
    padding : 13px 18px;
  }

  .sss-page .sss-series-table th {
    font-size : 0.76rem;
  }
}

@media (max-width: 900px) {
  .sss-page .sss-overview-section,
  .sss-page .sss-benefits-section,
  .sss-page .sss-line-section {
    padding : 44px 20px;
  }

  .sss-page .inner-prose ul.check-list--2col {
    columns : 1;
  }
}

@media (max-width: 700px) {
  .sss-page .anchor-bar {
    padding : 0 12px;
  }

  .sss-page .anchor-link {
    padding   : 14px 10px 13px;
    font-size : 0.8rem;
  }

  .sss-page .anchor-link::after {
    left  : 10px;
    right : 10px;
  }

  .sss-page .sss-benefits-lede {
    font-size : 1.08rem;
  }
}

@media (max-width: 600px) {
  /* The wide card keeps its shape on a phone, one size down - still ~25%
     above V11's phone thumb (84x62). */
  .sss-page .sss-line-card {
    grid-template-columns : 105px minmax(0, 1fr);
    column-gap            : 16px;
    padding               : 14px 16px;
  }

  .sss-page .sss-line-card-figure {
    height : 78px;
  }

  .sss-page .sss-line-card-title {
    font-size : 1rem;
  }

  .sss-page .sss-hero-figure-frame::after,
  .sss-page .sss-line-figure-frame::after {
    right  : -8px;
    bottom : -8px;
    width  : 72px;
    height : 72px;
  }

  .sss-page .sss-overview-btn-row .btn {
    width           : 100%;
    justify-content : center;
    text-align      : center;
  }
}

/* The house rules stack .product-table rows as cards below 480px: each td
   becomes a block prefixed with its data-label. The nowrap and the compact
   padding are column-layout ideas that do not survive that stack. */
@media (max-width: 480px) {
  .sss-page .sss-series-table td {
    white-space : normal;
    padding     : 8px 16px;
  }

  .sss-page .sss-series-table th,
  .sss-page .sss-series-table td {
    font-size : 0.9rem;
  }

  /* Stacked rows are white cards here, so the hover suppression has to match
     the card background rather than fall through to the section. */
  .sss-page .sss-series-table tbody tr:hover {
    background : var(--white);
  }

  .sss-page .sss-series-table-wrap {
    box-shadow : none;
  }

  /* Stacked-card layout: the button cell carries no label, so drop the
     data-label prefix the house rule prints and let the button fill the card. */
  .sss-page .sss-series-table td.sss-model-btn-cell {
    width      : auto;
    text-align : left;
    padding    : 12px 16px 8px;
  }

  .sss-page .sss-series-table td.sss-model-btn-cell::before {
    display : none;
  }

  .sss-page .sss-model-btn {
    width           : 100%;
    justify-content : center;
  }
}