/* ==========================================================================
   fill-service.eu — DESIGN PACK, SECTION 10
   Components that exist in FREEZE-CONTRACT Item 1 but were not needed by the
   T1 homepage proof, plus the prose primitives the other eighteen pages use.

   Loaded AFTER fs-design-pack.css. Same rules apply: fs- prefix, BEM, ground
   is a section-level modifier, no component names a colour. Everything here is
   on D-58's free-to-change-forever list.

   CONTENTS
     10.1  prose primitives — lists, sub, split, actions
     10.2  C-18 breadcrumb
     10.3  C-14 check-sequence
     10.4  C-13 gallery-card
     10.5  C-20 gap-block
     10.6  C-17 form-embed
     10.7  hero — the page variant (C-05)
     10.8  footer legal entity
     10.9  utilities — skip link, preview bar
     10.10 responsive
   ========================================================================== */


/* 10.1 — PROSE PRIMITIVES ================================================= */

.fs-body--wide { max-width: none; }

.fs-body h3, .fs-body .fs-h3 { margin: var(--fs-s7) 0 var(--fs-s3); }
.fs-body h4, .fs-body .fs-h4 { margin: var(--fs-s6) 0 var(--fs-s2); }
.fs-body > :first-child { margin-top: 0; }

.fs-list {
  margin: 0 0 1.15em;
  padding-left: 1.35em;
  list-style: none;
}
.fs-list li {
  position: relative;
  margin-bottom: .55em;
}
.fs-list li::before {
  content: "";
  position: absolute;
  left: -1.05em;
  top: .72em;
  width: 10px;
  height: var(--fs-hair);
  background: var(--accent);
}
.fs-list--num { counter-reset: fslist; padding-left: 1.9em; }
.fs-list--num li::before {
  content: counter(fslist);
  counter-increment: fslist;
  left: -1.9em;
  top: 0;
  width: auto;
  height: auto;
  background: none;
  font-family: var(--fs-face-data);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--stamp);
}

/* subscript — the extracted typefaces carry no U+2082, so CO2 is marked up
   rather than typed as a character. Better typography either way.          */
sub { font-size: .68em; line-height: 0; vertical-align: -.28em; }
sup { font-size: .68em; line-height: 0; vertical-align: .45em; }

/* "Sounds like" — the symptom line under a parts subsystem */
.fs-sounds {
  margin: var(--fs-s4) 0 0;
  padding: var(--fs-s3) var(--fs-s4);
  border-left: var(--fs-edge) solid var(--accent);
  background: var(--raise);
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--dim);
}
.fs-sounds__label {
  display: block;
  font-family: var(--fs-face-data);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--stamp);
  margin-bottom: var(--fs-s1);
}

/* a two-column text/figure pair, used down the parts page */
.fs-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  padding-block: clamp(28px, 4vw, 44px);
}
.fs-split + .fs-split { border-top: var(--fs-hair) solid var(--hair); }
.fs-split--flip > .fs-body { order: 2; }
.fs-split .fs-figure { margin: 0; }

/* CTA rows outside the hero and the band */
.fs-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2.4vw, 32px);
  margin-top: var(--fs-s5);
}
.fs-actions__micro { margin: var(--fs-s3) 0 0; max-width: 62ch; }
.fs-standalone { margin: var(--fs-s5) 0 0; }


/* 10.2 — C-18 BREADCRUMB ================================================== */

.fs-section--crumb > .fs-wrap { padding-block: var(--fs-s4); }
.fs-section--crumb::before { display: none; }

.fs-crumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fs-s2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--fs-face-data);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--stamp);
}
.fs-crumb__item + .fs-crumb__item::before {
  content: "/";
  margin-right: var(--fs-s2);
  color: var(--rule);
}
.fs-crumb__item a {
  color: var(--stamp);
  text-decoration: none;
  transition: color var(--fs-fast) var(--fs-ease);
}
.fs-crumb__item a:hover { color: var(--accent); }
.fs-crumb__item[aria-current="page"] { color: var(--text); }


/* 10.3 — C-14 CHECK-SEQUENCE ============================================== */
/* Numbered because it is genuinely a sequence: the order is the information. */

.fs-check {
  counter-reset: fscheck;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--fs-hair) solid var(--hair);
}
.fs-check__item {
  counter-increment: fscheck;
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 32px);
  padding: clamp(24px, 3.2vw, 40px) 0;
  border-bottom: var(--fs-hair) solid var(--hair);
}
.fs-check__item::before {
  content: counter(fscheck, decimal-leading-zero);
  font-family: var(--fs-face-data);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--accent);
  padding-top: .18em;
  font-variant-numeric: tabular-nums;
}
/* both the title and the body sit in column 2; only the counter is in column 1 */
.fs-check__title { grid-column: 2; margin: 0 0 var(--fs-s3); }
.fs-check__body  { grid-column: 2; max-width: var(--fs-measure); }
.fs-check__body p { margin: 0 0 1.15em; }
.fs-check__body > :last-child { margin-bottom: 0; }


/* 10.4 — C-13 GALLERY-CARD ================================================ */

.fs-gcard {
  display: flex;
  flex-direction: column;
  background: var(--plate);
  border: var(--fs-hair) solid var(--rule);
  border-radius: var(--fs-radius);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform var(--fs-fast) var(--fs-ease),
              box-shadow var(--fs-fast) var(--fs-ease),
              border-color var(--fs-fast) var(--fs-ease);
}
a.fs-gcard:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--accent);
}
.fs-gcard__frame {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--raise);
  border-bottom: var(--fs-hair) solid var(--hair);
}
.fs-gcard__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--fs-slow) var(--fs-ease);
}
a.fs-gcard:hover .fs-gcard__frame img { transform: scale(1.03); }
.fs-gcard__text { padding: clamp(20px, 2.4vw, 28px); }
.fs-gcard__title { margin: 0 0 var(--fs-s2); }
.fs-gcard__meta { margin: 0 0 var(--fs-s3); }
.fs-gcard__body { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--dim); }


/* 10.5 — C-20 GAP-BLOCK =================================================== */
/* A marked open item, not a hidden one. Removed as each question closes.    */

.fs-gap { border-style: dashed; }
.fs-gap__body {
  margin: 0;
  max-width: var(--fs-measure);
  color: var(--dim);
  font-size: .9375rem;
  line-height: 1.65;
}
.fs-gap__body strong { color: var(--text); font-weight: 600; }


/* 10.6 — C-17 FORM-EMBED ================================================== */
/* The static markup here is the visual specification. On WordPress the four
   4.12 forms are Fluent Forms (D-53); the .ff- rules at the end of this block
   put the plugin's own markup into the same shapes.                         */

.fs-form { max-width: 900px; }
.fs-form__h { margin-bottom: var(--fs-s4); }
.fs-form__intro { margin-bottom: var(--fs-s7); }

.fs-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 28px);
}
.fs-form__row--wide,
.fs-form__submit { grid-column: 1 / -1; }

.fs-form__label {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  margin-bottom: var(--fs-s2);
}
.fs-form__req {
  font-family: var(--fs-face-data);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stamp);
  margin-left: var(--fs-s2);
  vertical-align: .12em;
}
.fs-form__help {
  margin: var(--fs-s2) 0 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--dim);
}

.fs-form input[type="text"],
.fs-form input[type="email"],
.fs-form input[type="file"],
.fs-form select,
.fs-form textarea,
.ff-el-form-control {
  width: 100%;
  font-family: var(--fs-face-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--plate);
  border: var(--fs-hair) solid var(--rule);
  border-radius: var(--fs-radius);
  padding: var(--fs-s3) var(--fs-s4);
  transition: border-color var(--fs-fast) var(--fs-ease),
              box-shadow var(--fs-fast) var(--fs-ease);
}
.fs-form textarea { resize: vertical; min-height: 7.5em; }
.fs-form select { appearance: none; padding-right: var(--fs-s7); cursor: pointer; }
.fs-form__row { position: relative; }
.fs-form__row:has(select)::after {
  content: "";
  position: absolute;
  right: var(--fs-s4);
  top: 2.55rem;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--stamp);
  border-bottom: 2px solid var(--stamp);
  transform: rotate(45deg);
  pointer-events: none;
}
.fs-form input:focus-visible,
.fs-form select:focus-visible,
.fs-form textarea:focus-visible,
.ff-el-form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.fs-form input[type="file"] { padding: var(--fs-s3); font-size: .875rem; color: var(--dim); }

.fs-form__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  margin-top: var(--fs-s3);
  padding-top: var(--fs-s5);
  border-top: var(--fs-hair) solid var(--hair);
}
.fs-form__submit .fs-micro { max-width: 52ch; margin: 0; }
.fs-form button.fs-btn { border: 0; cursor: pointer; font: inherit; }

/* "What happens next" — the confirmation text, shown as a plate. It is the
   absent phone number's job, so it is on the page and not only in an email. */
.fs-form__next { margin-top: clamp(32px, 4vw, 48px); }
.fs-form__nextbody { max-width: var(--fs-measure); font-size: .9375rem; line-height: 1.65; }
.fs-form__nextbody p { margin: 0 0 .9em; }
.fs-form__nextbody > :last-child { margin-bottom: 0; }
.fs-form__next.is-shown { border-color: var(--accent); }


/* 10.7 — C-05 HERO, PAGE VARIANT ========================================== */

.fs-hero--page .fs-hero__h1 { max-width: 20ch; }
.fs-hero__inner--solo { grid-template-columns: minmax(0, 1fr) !important; }
.fs-hero__inner--solo .fs-hero__text { max-width: 46rem; }


/* 10.8 — C-03 LEGAL ENTITY, IN THE FOOTER ================================= */

.fs-footer__entity { display: block; margin-top: var(--fs-s2); opacity: .75; }
.fs-footer__entity--stub {
  border-left: var(--fs-hair) dashed var(--rule);
  padding-left: var(--fs-s3);
}


/* 10.9 — UTILITIES ======================================================== */

.fs-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--fs-ink);
  color: var(--fs-paper);
  padding: var(--fs-s3) var(--fs-s5);
  font-family: var(--fs-face-data);
  font-size: .8125rem;
  text-decoration: none;
}
.fs-skip:focus { left: var(--fs-s4); top: var(--fs-s4); }

:focus-visible { outline: 2px solid var(--fs-accent); outline-offset: 3px; }

/* preview only — never shipped to WordPress */
.fs-previewbar {
  background: var(--fs-steel);
  color: #E9ECEE;
  font-family: var(--fs-face-data);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  padding: 7px 16px;
}


/* 10.10 — RESPONSIVE ====================================================== */

@media (max-width: 1023px) {
  .fs-split { grid-template-columns: minmax(0, 1fr); }
  .fs-split--flip > .fs-body { order: 0; }
}

@media (max-width: 759px) {
  .fs-form__grid { grid-template-columns: minmax(0, 1fr); }
  .fs-check__item { grid-template-columns: minmax(0, 1fr); gap: var(--fs-s3); }
  .fs-check__item::before { font-size: 1.25rem; padding-top: 0; }
  .fs-check__title, .fs-check__body { grid-column: 1; }
  .fs-actions { gap: var(--fs-s4); }
  .fs-crumb__list { font-size: .6875rem; }
}

/* a C-19 figure standing alone in a section, rather than inside a hero, a
   proof pair or a split — capped so a 1200px plate does not run the full
   1240px container and dwarf the copy above it. */
.fs-figure--solo { max-width: 920px; }

/* 10.11 — RESPONSIVE FIXES FOUND BY THE BREAKPOINT AUDIT ==================
   Two real defects, both invisible on a desktop and both found by measuring
   every page at eleven widths from 320px to 1920px. */

/* (a) The prose + spec-table pairing. fs-grid--2 only collapses at 759px, so
   between 760 and 1023 the table was wider than its column and was being
   silently clipped rather than scrolled — the worst of the three outcomes.
   It now collapses a breakpoint earlier, which also honours D-57's stated
   reading context instead of fighting it. */
.fs-grid--spec { gap: clamp(32px, 5vw, 72px); align-items: start; }

@media (max-width: 1023px) {
  .fs-grid--spec { grid-template-columns: minmax(0, 1fr); }
}

/* (b) The stamped label on a nameplate never wraps, by design — so a label
   longer than the plate pushed the whole page sideways on a phone. The gap
   blocks now carry only their question code, and this is the standing guard
   so no future label can do it again. */
.fs-plate__label {
  max-width: calc(100% - 2 * clamp(18px, 2.4vw, 28px));
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Card grids of three run to ~230px a column between 760 and 1023, which is
   below a readable measure once a title and two lines of body are in them.
   Two-up there, one-up on a phone (the design pack already does the latter). */
@media (max-width: 1023px) {
  .fs-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The gallery card's meta line is a phrase, not machine data, so it takes the
   mono voice without the fs-data class — and therefore without fs-data's
   never-wrap rule, which was pushing it out of the card on a phone. */
.fs-gcard__meta {
  font-family: var(--fs-face-data);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--data);
}

/* 10px was too small to read on a phone for the one label that used it */
.fs-form__req { font-size: .6875rem; }

/* 10.12 — TOUCH TARGETS AND MINIMUM TYPE SIZE ============================
   Also from the breakpoint audit. D-57's stated reading context is a buyer on
   a phone beside a stopped machine, so the controls have to be usable with a
   thumb and the fine print has to be readable in a brewhouse. */

/* fs-data is sized relative to its context (.94em), which is right in body
   copy and too small inside an 11px footer line. This is the floor. */
.fs-data { font-size: max(11.5px, .94em); }

.fs-footer__legal, .fs-footer__entity { font-size: max(12px, .8125rem); }

/* Comfortable targets from tablet down. A tablet in portrait is a touch device
   even though it still gets the desktop navigation — the design pack's own
   760px breakpoint, unchanged here. Inline links inside a sentence are left
   alone deliberately: WCAG exempts them, and padding them breaks the line. */
@media (max-width: 1023px) {
  .fs-link { padding-block: 8px; }
  .fs-footer__list a,
  .fs-sitemap__item a,
  .fs-crumb__item a { display: inline-block; padding-block: 12px; }
  .fs-footer__list li { margin-bottom: 0; }
  .fs-faq__q { min-height: 44px; }
}

@media (max-width: 759px) {
  /* 44px on the two chrome controls a thumb has to hit */
  .fs-nav__toggle { min-height: 44px; }
  .fs-wordmark { display: inline-flex; align-items: center; min-height: 44px; }
}

/* 10.13 — THE CONTACT ADDRESS =============================================
   Visible to a reader, awkward for an address harvester. The @ is drawn here
   rather than written into the markup, so the page's text content never
   contains a user@host string for a crawler to lift. A script upgrades it to
   a real mailto link at runtime. */
.fs-mail { white-space: nowrap; }
.fs-mail__at::before { content: "@"; }
a.fs-mail { text-decoration: none; }
a.fs-mail:hover { color: var(--accent); }

/* 10.14 — T13 SITEMAP =====================================================
   Some of the most useful pages on this site are only linked from where they
   are relevant. This is the page that makes all of them reachable in one hop,
   for a reader and for a crawler. */
.fs-anchor { position: relative; top: -80px; height: 0; }

.fs-sitemap__group { margin-bottom: clamp(40px, 5vw, 64px); }
.fs-sitemap__group > h2 { margin-bottom: var(--fs-s4); }
.fs-sitemap__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--fs-hair) solid var(--hair);
}
.fs-sitemap__item {
  padding: 14px 0;
  border-bottom: var(--fs-hair) solid var(--hair);
}
.fs-sitemap__item a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
}
.fs-sitemap__t { font-weight: 600; }
.fs-sitemap__u { font-size: .75rem; color: var(--stamp); }
.fs-sitemap__item a:hover .fs-sitemap__t { color: var(--accent); }
.fs-sitemap__d {
  display: block;
  margin-top: 2px;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--dim);
  max-width: 80ch;
}


/* 11 — SUPPLIER LOGOS (Revision 4l, 26-09-2026) =========================== */
/* One small strip on the parts page, next to the paragraph naming the suppliers.
   Official artwork on white tiles; the tiles stop brand colours fighting the ground. */
.fs-logos { margin-top: var(--fs-s4); }
.fs-logos__label { font-family: var(--fs-face-data); font-size: .75rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--stamp); margin: 0 0 var(--fs-s3); }
.fs-logos__list { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fs-s3); }
.fs-logos__item { background: #fff; border: 1px solid var(--hair); display: flex;
  align-items: center; justify-content: center; padding: 14px 16px; min-height: 72px; }
.fs-logos__item img { display: block; width: auto; height: auto; max-height: 36px; max-width: 100%; }
@media (max-width: 760px) { .fs-logos__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The contact address is a span that mails on click (Revision 4l). */
.fs-mail[role="link"]:hover, .fs-mail[role="link"]:focus-visible { color: var(--accent); }

/* 12 — THREE-UP PROOF ROW (Revision 4m): the format-kits page shows 330ml, 500ml, 750ml. */
.fs-proof--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .fs-proof--3 { grid-template-columns: 1fr; } }