/* ============================================================
   SAKKARY MACHINERY — content pages
   Machine categories, the hub, support pages and legal pages.
   Loads after blog.css and reuses its primitives; only what is
   genuinely new to these pages is defined here.
   ============================================================ */

/* breadcrumb sits under the h1 inside the dark opening band */
.crumb { margin-top: var(--s-6); display: flex; align-items: center; gap: var(--s-2); color: var(--fg-3); }
.crumb a { color: var(--fg-2); }
.crumb a:hover { color: var(--accent); }

.page-intro { font-size: var(--fs-lg); line-height: 1.72; color: var(--fg-2); max-width: var(--maxw-text); }
.page-intro + .page-intro { margin-top: var(--s-5); }

.page-h { margin: 0 0 var(--s-5); }
.page-block { margin-top: var(--s-9); }
.page-block:first-child { margin-top: 0; }

/* ---------- intro + figure, side by side on desktop ---------- */
/* The types grid can now precede the lead on a category page, and
   .page-lead carries no margin of its own because it used to be the
   first thing in the band. Without this the photo and intro would butt
   straight up against the cards. */
.page-block + .page-lead { margin-top: var(--s-9); }
.page-lead { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s-8); align-items: start; }
@media (max-width: 900px) { .page-lead { grid-template-columns: 1fr; gap: var(--s-6); } }
.page-lead__fig { margin: 0; }
.page-lead__fig img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: var(--r-2);
}

/* ---------- what it is for ----------
   .node-body ul rides along on these rules rather than getting a
   second look of its own. A bulleted list on a machine page is always
   a capability list, which is exactly what this style was drawn for,
   so anything typed as a bulleted list in the dashboard comes out in
   the site's own idiom instead of as generic browser bullets.

   Both selectors compute to the same specificity, and pages.css loads
   after blog.css, so these win over .rich ul. */
.ticks,
.node-body ul { display: grid; gap: var(--s-3); padding: 0; list-style: none; max-width: var(--maxw-text); }
/* The margins part company. On a support page the list follows a
   heading that already carries the space; inside editor output it is
   one item in a flow, and setting margin:0 for both would cancel the
   gap .rich puts between blocks. */
.ticks { margin: 0; }
.node-body ul { margin: var(--s-5) 0 0; }
.ticks li,
.node-body ul li {
  position: relative;
  padding-inline-start: var(--s-6);
  font-size: var(--fs-lg);
  line-height: 1.6;
}
.ticks li::before,
.node-body ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0; top: .62em;
  width: 9px; height: 2px;
  background: var(--accent-bright);
}

/* ---------- catalogue body ----------
   The main content of a machine page is editor output, styled by
   .rich — the same exhaustive rule set the blog article uses, and
   safe to apply because the sanitiser fixes the tag set on the way
   into the database.

   .rich carries no width of its own; the blog constrains it with
   .post__body. Without this the copy would run the full width of the
   band, which at 1280 is a ninety-character line. 660px is the
   measure the articles already settled on. */
/* The measure sits on the text, not on the container. A container
   width would also clamp the step grid below, which has to run the
   full band the way it does today. --maxw-text is the same measure
   the lead paragraphs and the tick list already use. */
.node-body > p,
.node-body > h2,
.node-body > h3,
.node-body > h4,
.node-body > blockquote { max-width: var(--post-col); }
/* --maxw-text is 66ch, and `ch` resolves against the ELEMENT'S OWN
   font-size — the same trap blog.css documents for the article
   column. On a support page the tick list sits in a 16px context and
   measures 633.6px; inside .rich it would inherit 18px and measure
   712.8px, wrapping the same sentences differently. Declaring the
   list's own font-size puts the measure back exactly where it is
   today. The items still set their own 18px. */
.node-body > ul { font-size: var(--fs-base); }
.node-body > *:first-child { margin-block-start: 0; }
/* Matches .page-block's rhythm: on the live pages each section is its
   own .page-block a var(--s-9) apart, and inside one editor body the
   headings have to keep that same distance or the page re-spaces. */
/* .h-section (what these headings are on every other page) uses
   --lh-snug; .rich h2 uses a tighter 1.15. Three hundredths of a line
   is one pixel at this size, and one pixel is enough to shift every
   section below it. */
.node-body.node-body > h2 { margin-block-start: var(--s-9); line-height: var(--lh-snug); }

/* ---------- numbered lists are step cards ----------
   The "how to choose" sequence is a bordered grid of numbered cards,
   and an <ol> is the one shape in the editor's whitelist that carries
   it: a single container with one child per card. So a top-level
   ordered list renders through .choose's own rules rather than as
   running prose, and the migrated pages keep the layout they have.

   The rule that follows from it, and that the dashboard's help text
   states: a bulleted list is a capability list, a numbered list is a
   step sequence. Nested lists are left alone. */
.node-body > ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1px;
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
  max-width: none;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
  counter-reset: step;
}
.node-body > ol > li {
  counter-increment: step;
  background: var(--bg);
  padding: var(--s-6);
  display: grid;
  gap: var(--s-3);
  align-content: start;
  margin: 0;
  padding-inline-start: var(--s-6);
}
/* The mono index, drawn to the same recipe as .spec.spec--hot rather
   than by adding a class the sanitiser would strip anyway. */
.node-body > ol > li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
  /* The live label is a <p> inheriting the body leading; the pseudo
     element would inherit .rich's looser 1.72 instead, which is one
     pixel per card and two down the page. */
  line-height: var(--lh-body);
}
.node-body.node-body > ol > li > h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
  line-height: calc(var(--lh-tight) + 0.18);
  max-width: none;
}
.node-body > ol > li > p {
  margin: 0;
  color: var(--fg-2);
  font-size: var(--fs-base);
  line-height: 1.65;
  max-width: none;
}
@media (max-width: 700px) { .node-body > ol > li { padding: var(--s-5); } }

/* ---------- draft preview flag ----------
   Admin-only, and never on a page a visitor can reach. Loud on
   purpose: a preview that looks like the live site is how a draft
   gets mistaken for published. */
.preview-flag {
  margin: 0;
  padding: var(--s-3) var(--gutter);
  background: var(--accent-bright);
  color: #101010;
  text-align: center;
}

/* ---------- how to choose ---------- */
.choose { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; }
.choose__i { background: var(--bg); padding: var(--s-6); display: grid; gap: var(--s-3); align-content: start; }
.choose__n { color: var(--accent); }
.choose__h {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
  line-height: calc(var(--lh-tight) + 0.18);
}
.choose__b { margin: 0; color: var(--fg-2); line-height: 1.65; }

/* ---------- statements (mission / vision / brand promise) ----------
   Same bordered grid language as .choose, but a mono label instead of a
   number, so the About page's three commitments read as one set. */
.statements {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-2); overflow: hidden;
}
.statement { background: var(--bg); padding: var(--s-6); display: grid; gap: var(--s-3); align-content: start; }
/* The three commitments are the page's strongest claims, so their
   labels carry more weight than the site's other mono captions: a step
   up in size and to the heaviest weight the mono face offers. */
.statement__k {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .12em;
}
.statement__b { margin: 0; color: var(--fg-2); line-height: 1.65; }

/* ---------- FAQ ----------
   <details> so the answers are in the DOM for Google and for anyone
   with JavaScript off, and still collapsed for a reader scanning. */
.faq { border-top: 1px solid var(--line); max-width: var(--maxw-text); }
.faq__i { border-bottom: 1px solid var(--line); }
.faq__q {
  padding: var(--s-5) var(--s-6) var(--s-5) 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
  cursor: pointer;
  list-style: none;
  position: relative;
  transition: color var(--dur-2) var(--ease-cut);
}
:root[dir="rtl"] .faq__q { padding: var(--s-5) 0 var(--s-5) var(--s-6); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  position: absolute; inset-inline-end: 0; top: 50%;
  width: 11px; height: 2px; background: currentColor;
  box-shadow: 0 0 0 0 transparent;
  transition: transform var(--dur-2) var(--ease-cut);
}
.faq__q::before {
  content: "";
  position: absolute; inset-inline-end: 4px; top: calc(50% - 5px);
  width: 2px; height: 11px; background: currentColor;
  transition: transform var(--dur-2) var(--ease-cut), opacity var(--dur-2);
}
.faq__i[open] .faq__q::before { transform: rotate(90deg); opacity: 0; }
.faq__q:hover { color: var(--accent); }
.faq__a { margin: 0; padding-block-end: var(--s-5); color: var(--fg-2); line-height: 1.7; max-width: 62ch; }

/* ---------- hub grid ---------- */
.pgrid--hub { list-style: none; margin: var(--s-8) 0 0; padding: 0; }
.pgrid--hub .pcard__media { aspect-ratio: 4 / 3; display: block; }
.pgrid--hub .pcard__meta { color: var(--accent); }
.pgrid--hub .pcard__t,
.pgrid--hub .pcard__x { display: block; }

/* ---------- CTA band ---------- */
.page-cta__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-6); }
.page-cta__in h2 { margin: 0 0 var(--s-3); }
.page-cta__in .lede { margin: 0; }
/* A page can end on more than one button (contact offers three). They
   sit in a row that wraps to a stack on a narrow screen; the block still
   sits opposite the heading via .page-cta__in's space-between. */
.page-cta__btns { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ---------- related ---------- */
.rel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.rel__a {
  display: grid; gap: var(--s-2);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  height: 100%;
  transition: border-color var(--dur-2) var(--ease-cut), transform var(--dur-2) var(--ease-cut);
}
.rel__a:hover { border-color: var(--fg-3); transform: translateY(-2px); }
.rel__t {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
}
.rel__x { color: var(--fg-2); font-size: var(--fs-sm); line-height: 1.55; }

/* ---------- legal prose ---------- */
.page-prose { max-width: var(--maxw-text); }
.page-prose p { color: var(--fg-2); line-height: 1.72; margin: 0; }
.page-prose .page-h { margin-top: var(--s-8); }
.page-prose .page-h:first-of-type { margin-top: var(--s-6); }

@media (max-width: 760px) {
  .page-intro, .ticks li { font-size: var(--fs-base); }
  .choose__i { padding: var(--s-5); }
}

/* the reference echoed back on /thank-you/ */
.thanks-ref {
  display: inline-flex; align-items: baseline; gap: var(--s-3);
  margin-bottom: var(--s-6);
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--accent-bright);
  border-radius: var(--r-2);
  background: var(--surface-2);
  color: var(--fg-3);
}
.thanks-ref strong { color: var(--fg); font-size: var(--fs-lg); letter-spacing: .1em; }

/* contact details, so a visitor without JavaScript still has a number */
.contact-list a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.contact-list a:hover { color: var(--fg); }

/* ---------- inline links inside body copy ----------
   Expanded from [[key|label]] tokens in the content files. Underlined
   rather than colour-only, so the link is still identifiable to a
   reader who cannot separate the red from the body text. */
.inlink { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.inlink:hover { color: var(--fg); }

/* ---------- contact: reach + branches ---------- */
.reach { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; max-width: var(--maxw-text); }
.reach li { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--s-4); align-items: baseline; }
@media (max-width: 520px) { .reach li { grid-template-columns: 1fr; gap: 2px; } }
.reach__k { color: var(--fg-3); }
.reach__v { font-size: var(--fs-lg); }
a.reach__v { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
a.reach__v:hover { color: var(--fg); }

.branches { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--s-5); }
.branch {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--accent-bright);
  border-radius: var(--r-2);
  background: var(--surface);
}
.branch__h {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xl); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tr-display);
  line-height: calc(var(--lh-tight) + 0.18);
}
.branch__a { font-style: normal; color: var(--fg-2); line-height: 1.6; }
.branch__hours { color: var(--fg-3); }
/* auto margin above the button, so it sits on the card's floor and the
   three cards line up even though one address wraps to fewer lines. */
.branch__map { align-self: flex-start; margin-block-start: auto; min-height: 42px; }

/* ---------- about: the client wall ----------
   .logos itself is defined in sections.css for the home page; these
   are the two rules that differ when it sits inside a content page
   rather than its own full-bleed band. */
.page-block > .logos { margin-top: var(--s-6); }

/* ---------- search results ----------
   The same bordered-grid language as .choose and .branches, one row
   per hit, so a result reads as a row in a list rather than a card
   competing for attention with the others. */
.sform--page { margin-top: var(--s-6); }

.sres {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
}
.sres__i { background: var(--bg); }
.sres__a {
  display: grid; gap: var(--s-2);
  padding: var(--s-5) var(--s-6);
  transition: background var(--dur-2) var(--ease-cut);
}
.sres__a:hover { background: var(--surface-2); }
.sres__k { margin: 0; color: var(--accent); }
.sres__t {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
  line-height: calc(var(--lh-tight) + 0.18);
}
.sres__x { margin: 0; color: var(--fg-2); font-size: var(--fs-base); line-height: 1.6; max-width: var(--maxw-text); }
.sres__more { margin-top: var(--s-6); color: var(--fg-2); }
@media (max-width: 700px) { .sres__a { padding: var(--s-4) var(--s-5); } }