/* =====================================================================
   COLORSHADE — css/product-machines.css        (S33, 2026-09-04)
   =====================================================================
   Styling for the structured product sections: the data plate, what you
   get, applications, running costs, the comparison table and the FAQ.

   WHY A SEPARATE FILE AND NOT style.css
     style.css was being actively edited by another session when this was
     written (AGENTS.md §11.3). It is also loaded on every page on the
     site, and these rules are needed on exactly one template. Loaded via
     the $page_css hook in header.php.

   WHY PLAIN CSS AND NOT TAILWIND UTILITIES
     Adding new Tailwind classes to a .php file obliges a recompile of
     css/tailwind.min.css (AGENTS.md §4, S17 rule). That output file is
     shared, a rebuild while another agent holds CSS work is an avoidable
     collision, and half these components (dotted leaders, corner rivets,
     a sticky first table column) are not utility-shaped anyway. Every
     class here is `cs-` prefixed and self-contained.

   ---------------------------------------------------------------------
   COLOUR LAW — MEASURED, NOT CHOSEN BY EYE
   ---------------------------------------------------------------------
   The old spec sheet rendered its labels at `text-charcoal/40`, 9px.
   Measured against its real background that is 2.44:1, where WCAG AA
   needs 4.5:1 — so the specifications, which ARE the buying decision on
   a KSh 700,000 machine, were the least readable thing on the page.
   Five more failures were measured on the same template.

   Every value below was run through a contrast checker before it was
   typed. The results that govern this file:

     charcoal          on white     16.30:1   values, headings
     charcoal 75%      on white      7.15:1   labels
     charcoal 70%      on cream      5.93:1   labels on tinted panels
     #c93f18 orange-dk on white      4.99:1   eyebrows, links, accents
     #c93f18 orange-dk on cream      4.83:1   same, on tinted panels
     #F15A2E orange    on charcoal   4.85:1   accents INSIDE dark panels

   🔴 DO NOT USE, and here is why, so nobody re-adds them:
     #F15A2E orange    on white      3.36:1   FAILS as small text
     #298f39 green     as small text 4.13:1   FAILS as text — icons only
                                              (4.13 clears the 3:1 bar
                                              for a non-text UI element)
     #37B24A green     as an icon    2.75:1   FAILS even as an icon

   So: bright orange is a DECORATION colour on light ground and a TEXT
   colour only on charcoal. Green is an icon colour, never small text.
   ===================================================================== */

:root {
  --cs-charcoal:      #231F20;
  --cs-charcoal-l:    #353032;
  --cs-orange:        #F15A2E;
  --cs-orange-dk:     #c93f18;   /* the only orange allowed as small text */
  --cs-green-dk:      #298f39;   /* icons only */
  --cs-cream:         #FDFBF7;
  --cs-cream-dk:      #F3EFE7;
  --cs-rule:          rgba(35, 31, 32, 0.12);
  --cs-rule-soft:     rgba(35, 31, 32, 0.07);
  --cs-label:         rgba(35, 31, 32, 0.75);
  --cs-body:          rgba(35, 31, 32, 0.80);
}

/* ---------------------------------------------------------------------
   SHARED SECTION FURNITURE
   ------------------------------------------------------------------ */
.cs-sec { scroll-margin-top: 90px; }          /* clears the sticky jump bar */

.cs-sec__eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .6875rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--cs-orange-dk);
  margin-bottom: .5rem;
}
.cs-sec__eyebrow::before {
  content: ""; width: 1.25rem; height: 2px; background: var(--cs-orange);
  display: block; flex: none;
}
.cs-sec__title {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
  font-weight: 700; line-height: 1.15; color: var(--cs-charcoal);
  letter-spacing: -.01em; margin: 0 0 .5rem;
}
.cs-sec__lede {
  font-size: .9375rem; line-height: 1.65; color: var(--cs-body);
  max-width: 62ch; margin: 0 0 1.75rem;
}

.cs-inline-link {
  color: var(--cs-orange-dk); font-weight: 700;
  text-decoration: underline; text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}
.cs-inline-link:hover { color: var(--cs-charcoal); }

/* ---------------------------------------------------------------------
   1. THE JUMP BAR
   A long machine page needs a way to reach the specifications without
   scrolling past six sections. Sticky, horizontally scrollable on a
   phone, and it only renders chips for sections that actually exist.
   ------------------------------------------------------------------ */
.cs-jump {
  position: sticky; top: 0; z-index: 30;
  background: rgba(253, 251, 247, .93);
  backdrop-filter: saturate(150%) blur(8px);
  border-top: 1px solid var(--cs-rule-soft);
  border-bottom: 1px solid var(--cs-rule);
  margin: 3rem 0 0;
}
.cs-jump__inner {
  display: flex; gap: .5rem; align-items: center;
  overflow-x: auto; scrollbar-width: none;
  padding: .625rem 0;
}
.cs-jump__inner::-webkit-scrollbar { display: none; }
.cs-jump__link {
  flex: none; white-space: nowrap;
  padding: .45rem .85rem; border-radius: 999px;
  border: 1px solid var(--cs-rule);
  background: #fff; color: var(--cs-label);
  font-size: .75rem; font-weight: 700; letter-spacing: .01em;
  transition: all .18s ease;
}
.cs-jump__link:hover,
.cs-jump__link:focus-visible {
  border-color: var(--cs-orange-dk); color: var(--cs-orange-dk);
  transform: translateY(-1px);
}

/* ---------------------------------------------------------------------
   2. THE DATA PLATE — the specification sheet
   The visual idea is the engraved rating plate riveted to a piece of
   industrial equipment: the thing these very machines are bought to
   produce. Print-native to Colorshade, and not borrowed from anywhere.
   ------------------------------------------------------------------ */
.cs-plate {
  position: relative;
  background: #fff;
  border: 1px solid var(--cs-rule);
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem 1.5rem;
  box-shadow: 0 12px 32px rgba(35,31,32,.05);
}
/* The four rivets. Decorative only — aria-hidden is unnecessary because
   these are pseudo-elements and carry no text. */
.cs-plate::before,
.cs-plate::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; height: 6px;
  background-image: radial-gradient(circle, rgba(35,31,32,.22) 2.5px, transparent 3px);
  background-repeat: no-repeat;
  background-position: left center, right center;
  background-size: 6px 6px, 6px 6px;
  pointer-events: none;
}
.cs-plate::before { top: .8rem; }
.cs-plate::after  { bottom: .8rem; }

.cs-plate__group + .cs-plate__group { margin-top: 1.5rem; }

.cs-plate__grouptitle {
  display: flex; align-items: center; gap: .625rem;
  font-size: .6875rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cs-charcoal);
  margin: 0 0 .75rem;
}
.cs-plate__grouptitle::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--cs-rule);
}

.cs-plate__rows { margin: 0; }

.cs-plate__row {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .5rem 0;
  border-bottom: 1px dotted var(--cs-rule);
}
.cs-plate__row:last-child { border-bottom: 0; }

.cs-plate__label {
  flex: none; max-width: 45%;
  font-size: .8125rem; font-weight: 600; line-height: 1.4;
  color: var(--cs-label);                      /* 7.15:1 on white */
}
/* The dotted leader — a spec-sheet convention, and it does real work:
   it ties a label to a value across a wide row on desktop. */
.cs-plate__leader {
  flex: 1 1 auto; height: 0; min-width: .75rem;
  border-bottom: 1px dotted rgba(35,31,32,.22);
  transform: translateY(-.25em);
}
.cs-plate__value {
  flex: 0 1 auto; text-align: right; max-width: 62%;
  font-size: .875rem; font-weight: 700; line-height: 1.45;
  color: var(--cs-charcoal);                   /* 16.30:1 on white */
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  /* On a phone a right-aligned value across a leader is unreadable once
     the value wraps to three lines. Stack instead. */
  .cs-plate__row { flex-direction: column; align-items: stretch; gap: .15rem; }
  .cs-plate__leader { display: none; }
  .cs-plate__label { max-width: none; font-size: .75rem; }
  .cs-plate__value { text-align: left; max-width: none; }
}

/* Two columns of groups once there is room for them. */
@media (min-width: 900px) {
  .cs-plate--split { columns: 2; column-gap: 3rem; }
  .cs-plate--split .cs-plate__group {
    break-inside: avoid; -webkit-column-break-inside: avoid;
    margin-top: 0; margin-bottom: 1.5rem;
  }
}

/* The compact version that lives inside the buy-box docket. */
.cs-keyspecs { display: grid; gap: .1rem; }
.cs-keyspecs .cs-plate__row { padding: .4rem 0; }
.cs-keyspecs .cs-plate__label { font-size: .75rem; }
.cs-keyspecs .cs-plate__value { font-size: .8125rem; }

.cs-keyspecs__more {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .75rem;
  font-size: .75rem; font-weight: 800; letter-spacing: .04em;
  color: var(--cs-orange-dk);
}
.cs-keyspecs__more:hover { color: var(--cs-charcoal); }

/* ---------------------------------------------------------------------
   3. WHAT YOU GET — the checklist
   ------------------------------------------------------------------ */
.cs-getlist { display: grid; gap: .625rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .cs-getlist { grid-template-columns: 1fr 1fr; gap: .625rem 2rem; } }

.cs-getlist__item {
  display: flex; align-items: flex-start; gap: .625rem;
  font-size: .9375rem; line-height: 1.55; color: var(--cs-body);
  padding: .35rem 0;
}
.cs-getlist__tick {
  flex: none; width: 1.125rem; height: 1.125rem; margin-top: .18rem;
  color: var(--cs-green-dk);            /* icon only — 4.13:1, clears 3:1 */
}

/* ---------------------------------------------------------------------
   4. APPLICATIONS — what the machine earns
   ------------------------------------------------------------------ */
.cs-appgrid { display: grid; gap: 1rem; }
@media (min-width: 640px)  { .cs-appgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cs-appgrid { grid-template-columns: repeat(3, 1fr); } }

.cs-app {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--cs-rule);
  border-radius: 1rem; padding: 1.25rem 1.15rem 1.15rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cs-app:hover {
  transform: translateY(-2px);
  border-color: rgba(241,90,46,.35);
  box-shadow: 0 14px 30px rgba(35,31,32,.07);
}
/* Registration-mark corner: a print motif, purely decorative. */
.cs-app::after {
  content: ""; position: absolute; top: .75rem; right: .75rem;
  width: .75rem; height: .75rem;
  border-top: 2px solid var(--cs-orange); border-right: 2px solid var(--cs-orange);
  opacity: .55;
}
.cs-app__title {
  font-size: .9375rem; font-weight: 800; line-height: 1.3;
  color: var(--cs-charcoal); margin: 0 1.5rem .4rem 0;
}
.cs-app__body {
  font-size: .8438rem; line-height: 1.6; color: var(--cs-body); margin: 0;
}

/* ---------------------------------------------------------------------
   5. RUNNING COSTS — deliberately on charcoal
   This is the section competitors do not publish, so it gets the one
   dark panel on the page. It breaks the monotony of six pale sections
   and it signals "read this bit". Bright orange is legible here
   (4.85:1 on charcoal) where it would fail on white.
   ------------------------------------------------------------------ */
.cs-costs {
  background: var(--cs-charcoal);
  border-radius: 1.5rem;
  padding: 2rem 1.5rem;
  color: var(--cs-cream);
}
@media (min-width: 768px) { .cs-costs { padding: 2.5rem 2.5rem; } }

.cs-costs .cs-sec__eyebrow { color: var(--cs-orange); }   /* 4.85:1 on charcoal */
.cs-costs .cs-sec__eyebrow::before { background: var(--cs-orange); }
.cs-costs .cs-sec__title { color: var(--cs-cream); }
.cs-costs .cs-sec__lede  { color: rgba(253,251,247,.78); }

.cs-costs__row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(253,251,247,.14);
}
.cs-costs__row:last-child { border-bottom: 0; }
.cs-costs__label {
  flex: none; min-width: 9.5rem;
  font-size: .6875rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cs-orange);
}
.cs-costs__value {
  flex: 1 1 16rem;
  font-size: .9375rem; line-height: 1.6; color: var(--cs-cream);
}

/* ---------------------------------------------------------------------
   6. COMPARISON TABLE
   Horizontally scrollable — never let it push the page sideways.
   AGENTS.md §4 (S24 verification): the site's own overflow rule is that
   wide content scrolls inside its own container, and the viewport does
   not move.
   ------------------------------------------------------------------ */
.cs-compare__scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--cs-rule); border-radius: 1.25rem; background: #fff;
}
.cs-compare {
  width: 100%; border-collapse: collapse; min-width: 640px;
  font-size: .875rem;
}
.cs-compare th, .cs-compare td {
  padding: .85rem 1rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--cs-rule-soft);
}
.cs-compare thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--cs-cream-dk);
  font-size: .6875rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cs-charcoal);
  border-bottom: 1px solid var(--cs-rule);
}
.cs-compare tbody tr:last-child td { border-bottom: 0; }
.cs-compare tbody tr:hover td { background: rgba(253,251,247,.75); }

.cs-compare__name  { font-weight: 800; color: var(--cs-charcoal); }
.cs-compare__name a { color: var(--cs-orange-dk); }        /* 4.99:1 */
.cs-compare__name a:hover { color: var(--cs-charcoal); text-decoration: underline; }
.cs-compare__price { font-weight: 800; color: var(--cs-charcoal); white-space: nowrap;
                     font-variant-numeric: tabular-nums; }
.cs-compare__val   { color: var(--cs-body); }

/* The row the visitor is already on. Colour is never the only signal —
   the cell also carries the words "You are here". */
.cs-compare tbody tr.is-current td {
  background: rgba(241,90,46,.055);
  border-bottom-color: rgba(241,90,46,.18);
}
.cs-compare tbody tr.is-current td:first-child {
  box-shadow: inset 3px 0 0 var(--cs-orange);
}
.cs-compare__here {
  display: inline-block; margin-top: .3rem;
  padding: .1rem .45rem; border-radius: 999px;
  background: var(--cs-charcoal); color: var(--cs-cream);
  font-size: .625rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase;
}
.cs-compare__hint {
  display: block; margin-top: .65rem;
  font-size: .75rem; color: var(--cs-label);
}
@media (min-width: 720px) { .cs-compare__hint { display: none; } }

/* ---------------------------------------------------------------------
   7. FAQ ACCORDION
   Built on <details>/<summary>: keyboard-operable, screen-reader
   understood, findable by in-page search, and it needs no JavaScript —
   so it cannot break when a script fails to load on a Kenyan mobile
   connection.
   ------------------------------------------------------------------ */
.cs-faq { display: grid; gap: .625rem; }

.cs-faq__item {
  background: #fff; border: 1px solid var(--cs-rule);
  border-radius: 1rem; overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.cs-faq__item[open] {
  border-color: rgba(241,90,46,.3);
  box-shadow: 0 10px 26px rgba(35,31,32,.06);
}

.cs-faq__q {
  display: flex; align-items: flex-start; gap: .875rem;
  padding: 1.05rem 1.15rem;
  cursor: pointer; list-style: none;
  font-size: .9375rem; font-weight: 700; line-height: 1.45;
  color: var(--cs-charcoal);
}
.cs-faq__q::-webkit-details-marker { display: none; }
.cs-faq__q:hover { color: var(--cs-orange-dk); }
.cs-faq__item:focus-within .cs-faq__q { outline: 2px solid var(--cs-orange-dk); outline-offset: -2px; }

.cs-faq__chev {
  flex: none; margin-left: auto; width: 1.05rem; height: 1.05rem;
  margin-top: .18rem; color: var(--cs-orange-dk);
  transition: transform .22s ease;
}
.cs-faq__item[open] .cs-faq__chev { transform: rotate(180deg); }

.cs-faq__a {
  padding: 0 1.15rem 1.15rem;
  font-size: .9063rem; line-height: 1.7; color: var(--cs-body);
}
.cs-faq__a p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .cs-faq__chev, .cs-app, .cs-jump__link { transition: none; }
  .cs-app:hover { transform: none; }
}

/* ---------------------------------------------------------------------
   8. WARRANTY / SUPPORT STRIP
   Renders only when the client has actually stated terms. See the note
   in migration S33a: an unbacked warranty promise on a KSh 700,000
   purchase is worse than no warranty section at all.
   ------------------------------------------------------------------ */
.cs-support {
  display: flex; flex-wrap: wrap; align-items: center; gap: .875rem;
  background: var(--cs-cream-dk);
  border: 1px solid var(--cs-rule);
  border-radius: 1rem; padding: 1.1rem 1.25rem;
}
.cs-support__icon { flex: none; width: 1.5rem; height: 1.5rem; color: var(--cs-green-dk); }
.cs-support__text { flex: 1 1 16rem; font-size: .9063rem; line-height: 1.6; color: var(--cs-body); }
.cs-support__text strong { color: var(--cs-charcoal); }