/* ============================================================
   ICON ROCKLEAR ONTARIO, support pages  ·  V2
   Doc No. ICON-WEB-CSS-004 · loads after main.css

   Warranty, After-Care, FAQs, Contact. Four reference pages that
   are mostly words, so everything in this file exists to keep dense
   material readable inside the archetype library.

   Nothing here is a new pattern. It is a hairline-ruled list, a
   form status block, a page opener for pages that have no hero,
   and four small fixes to components main.css already ships.
   If this file grows past about 90 lines the pages are inventing
   patterns that belong in the system layer instead.
   ============================================================ */


/* ---------- 1 · PAGE OPENER ----------
   These pages carry no hero, so the first band holds the single
   M2 strip, the statement, the lede and one notice. Grid, so the
   notice can span while the type stays measured. */
.page-head { display: grid; gap: var(--s-4); justify-items: start; }
.page-head .d1 { max-width: 17ch; }
.page-head .notice { width: 100%; margin-top: var(--s-2); }


/* ---------- 2 · RULED LIST ----------
   Dense enumerations: warranty exclusions, conditions of cover,
   claim conditions. Rules between items, never boxes around them.
   The list is the object; it does not get a container. */
.rulelist > li {
  padding-block: 9px;
  border-bottom: 1px solid var(--hair);
  font-family: var(--body);
  font-size: var(--b2-size);
  line-height: var(--b2-lh);
  letter-spacing: var(--b2-ls);
  color: var(--fg-dense);
  max-width: 52ch;
}
.rulelist > li:first-child { border-top: 1px solid var(--hair); }
/* Heavier open rule where the list is the section's main object. */
.rulelist--anchored > li:first-child { border-top: 2px solid var(--rule-heavy); }


/* ---------- 3 · FAQ DECK GROUPING ----------
   A run-in heading over one accordion, and air between two decks
   sitting in the same band. */
.faqgroup { display: grid; gap: var(--s-4); }
.faqgroup + .faqgroup { margin-top: var(--s-7); }


/* ---------- 4 · FORM INSIDE THE AR-10 PLATE ----------
   .cta-left justifies its children to the start, which would
   shrink a form to the width of its widest field. */
.cta-left > .form,
.cta-left > .form-status { width: 100%; }


/* ---------- 5 · THE PLATE'S SECOND COLUMN ----------
   AR-10 puts a title block beside the statement. On the contact page the
   left column is a form, which runs much longer than three title-block
   cells, so the right column carries the direct route and the next steps
   underneath the block rather than leaving the plate half empty. */
.cta-side { display: grid; gap: var(--s-5); align-content: start; }
@media (min-width: 1024px) { .cta-side { max-width: 460px; } }


/* ---------- 6 · FORM STATUS ----------
   Mirrors the partner form. With no endpoint configured the form
   does not pretend to submit: it prints the direct route instead.
   Hidden until the script fills it, so it never renders empty. */
.form-status {
  display: none;
  margin-top: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--hair-gold);
  background: var(--surface-well);
  font-size: var(--b2-size);
  line-height: var(--b2-lh);
  color: var(--fg-dense);
}
.form-status.show { display: block; }
.form-status strong {
  display: block;
  font-family: var(--disp);
  font-weight: 600;
  font-size: var(--d4-size);
  letter-spacing: var(--d4-ls);
  color: var(--fg);
  margin-bottom: 6px;
}
.form-status a { color: var(--fg-accent); border-bottom: 1px solid var(--hair-gold); }


/* ---------- 7 · CROSS-LINKS ----------
   The four support pages point at each other. One row, mono label
   left, link arrows after it. */
.supportnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
}