/* ==========================================================================
   FAB-DOC. The long-form document surface.

   WHY THIS FILE EXISTS
   The Bricks cutover ported the home page, /store/ and the nine PDPs and
   stopped there. Every remaining route (the five policy pages, the size
   guide, the advertorial, the eleven CPT archives and their ~118 singles)
   fell through to the instawhew PARENT's block template with only
   fab-nav / fab-footer / fab-newsletter loaded. The result was legible but
   designless: no h1 at all on the policy pages, body copy set to the full
   1294px content box at roughly 200 characters a line, and <h3> section
   heads rendering at the same visual weight as the paragraphs under them.

   WHAT IT IS
   A verbatim port of the `.doc` block that the beta2 static build already
   ships inline in privacy / terms / cookie / returns / shipping / contact /
   size-guide / why-fabbruccio (see fabbruccio-beta2/privacy.html, which
   states in its own comment that the block is meant to be folded into a
   stylesheet later; this is that fold). The structure is unchanged. Only
   two things differ:

     1. The namespace. beta2 uses the bare `.doc`, which is far too generic
        to drop into a WordPress page where the parent theme, WooCommerce
        and the block editor all inject classes. Everything here is
        `.fab-doc`, matching the rest of assets/css/sections.
     2. The variables. beta2's private --ink / --ink2 / --hairline /
        --ground / --panel / --oxblood / --ease are rewritten to the real
        --fab-* tokens from fab-tokens.css. No new colour is introduced and
        nothing another section owns is redefined.

   THE MEASURE IS THE WHOLE POINT. 65ch is what makes a policy page read as
   a document rather than as a wall, and it is the single defect that was
   most visible on every legal page. Do not widen it to --fab-wrap.

   Element selectors (h2, p, ul, table) are scoped under .fab-doc on
   purpose: the markup they paint lives in post_content, so it cannot carry
   BEM classes on every node without making the content unmaintainable for
   whoever edits a policy next. The handful of real components below
   (facts, steps, note, table, cards) DO carry classes.

   Loaded by fabbruccio_resolve_sections() on: any singular page that is
   not a commerce utility route, every CPT archive, and every CPT single.
   ========================================================================== */

/* --------------------------------------------------------------------------
   THE PAGE SHELL

   The parent's .site-main carries its own padding-block (instawhew
   layout.css:139), which stacks on top of the band padding below and
   produced a ragged top margin. Zero it and own the rhythm here, the same
   way fab-404.css, fab-search.css, fab-contact.css and fab-cart.css each
   already do for their own route.
   -------------------------------------------------------------------------- */
.site-main.fab-doc-main { padding-block: 0; }

.fab-doc-main {
  padding-top: var(--fab-band-sm);
  padding-bottom: 0;
  background: var(--fab-ground);
}

/* The gutter. --fab-wrap is deliberately NOT used: this surface is a
   measure, not a container, so the wrap only supplies side padding. */
.fab-doc-wrap {
  width: 100%;
  max-width: var(--fab-wrap);
  margin-inline: auto;
  padding-inline: var(--fab-gutter);
}

.fab-doc {
  max-width: 65ch;
  margin: 0 auto;
  padding-bottom: var(--fab-band-md);
}

/* --------------------------------------------------------------------------
   THE HEAD. Eyebrow, h1, an optional updated line, an optional lede.
   -------------------------------------------------------------------------- */
.fab-doc__head { padding: 0 0 clamp(24px, 3.2vw, 38px); }

.fab-doc__head .fab-eyebrow { display: block; margin-bottom: var(--fab-space-sm); }

.fab-doc__head h1,
.fab-doc__title {
  margin: 0;
  font-family: var(--fab-font-sans);
  font-size: var(--fab-size-statement);
  font-weight: var(--fab-weight-medium);
  line-height: 1.08;
  letter-spacing: var(--fab-track-heading-l);
  color: var(--fab-ink);
}

.fab-doc__updated {
  margin: 14px 0 0;
  font-size: var(--fab-size-caption);
  line-height: 1.5;
  color: var(--fab-ink-secondary);
}

.fab-doc__lede {
  max-width: none;
  margin: 18px 0 0;
  font-size: var(--fab-size-prose);
  line-height: var(--fab-leading-prose);
  color: var(--fab-ink);
}

/* --------------------------------------------------------------------------
   THE SECTIONS. A hairline is the only divider in this system, so the rule
   between sections IS the structure. No cards, no panels, no shadows.
   -------------------------------------------------------------------------- */
.fab-doc > section {
  padding: clamp(26px, 3.4vw, 40px) 0;
  border-top: var(--fab-hairline-width) solid var(--fab-hairline);
}
.fab-doc > section:last-child { padding-bottom: 0; }

/* A quiet uppercase micro-label, NOT a display heading. This is what keeps
   a fourteen-section privacy policy from reading as fourteen shouts. */
.fab-doc h2 {
  margin: 0 0 var(--fab-space-md);
  font-family: var(--fab-font-sans);
  font-size: var(--fab-size-label);
  font-weight: var(--fab-weight-medium);
  letter-spacing: var(--fab-track-upper-wide);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--fab-ink-secondary);
}

.fab-doc h3 {
  margin: 24px 0 var(--fab-space-xs);
  font-family: var(--fab-font-sans);
  font-size: var(--fab-size-prose);
  font-weight: var(--fab-weight-medium);
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--fab-ink);
}
.fab-doc h3:first-of-type { margin-top: 0; }

/* h4 is not part of the pattern, but pasted policy copy sometimes carries
   one. Fold it into h3 rather than let the parent's scale take it. */
.fab-doc h4 {
  margin: 20px 0 var(--fab-space-xs);
  font-size: var(--fab-size-lede);
  font-weight: var(--fab-weight-medium);
  line-height: 1.4;
  color: var(--fab-ink);
}

.fab-doc p {
  margin: 0 0 14px;
  font-size: var(--fab-size-lede);
  line-height: 1.78;
  color: var(--fab-ink-secondary);
}
.fab-doc p:last-child { margin-bottom: 0; }

.fab-doc ul,
.fab-doc ol {
  margin: 0 0 14px;
  padding-left: 1.2em;
  font-size: var(--fab-size-lede);
  line-height: 1.78;
  color: var(--fab-ink-secondary);
}
.fab-doc li { margin-bottom: var(--fab-space-xs); }
.fab-doc li:last-child { margin-bottom: 0; }
.fab-doc ul ul,
.fab-doc ol ol { margin-top: var(--fab-space-xs); margin-bottom: 0; }

/* 500 is the ONLY emphasis weight in this system. Bold copy pasted from a
   Word document would otherwise land at 700 and break the boldness budget. */
.fab-doc b,
.fab-doc strong { font-weight: var(--fab-weight-medium); color: var(--fab-ink); }

.fab-doc em,
.fab-doc i { font-style: italic; }

/* Inline links only. .fab-cta and .fab-textlink keep the paint fab-base
   gives them, so they are excluded rather than fought. */
.fab-doc a:not(.fab-cta):not(.fab-btn):not(.fab-textlink) {
  color: var(--fab-ink);
  text-decoration: none;
  border-bottom: var(--fab-hairline-width) solid var(--fab-hairline);
  padding-bottom: 1px;
  transition: border-color var(--fab-hover-duration) var(--fab-ease);
}
.fab-doc a:not(.fab-cta):not(.fab-btn):not(.fab-textlink):hover,
.fab-doc a:not(.fab-cta):not(.fab-btn):not(.fab-textlink):focus-visible {
  border-color: var(--fab-accent-oxblood);
}

.fab-doc address {
  font-style: normal;
  font-size: var(--fab-size-lede);
  line-height: 1.78;
  color: var(--fab-ink-secondary);
}

.fab-doc blockquote {
  margin: 20px 0;
  padding-left: 14px;
  border-left: 2px solid var(--fab-accent-oxblood);
}
.fab-doc blockquote p { margin-bottom: 0; }

.fab-doc hr {
  height: 0;
  margin: clamp(26px, 3.4vw, 40px) 0;
  border: 0;
  border-top: var(--fab-hairline-width) solid var(--fab-hairline);
}

/* Pasted policy copy carries stray <img>. Never let one exceed the measure
   and never let one force its own aspect. */
.fab-doc img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--fab-radius);
}

/* --------------------------------------------------------------------------
   KEY-FACTS LIST. Hairline rows, no bullets. The "short version" block at
   the top of the returns and shipping policies.
   -------------------------------------------------------------------------- */
.fab-doc__facts {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fab-doc__facts li {
  margin: 0;
  padding: 13px 0;
  border-top: var(--fab-hairline-width) solid var(--fab-hairline);
  font-size: var(--fab-size-lede);
  line-height: 1.7;
  color: var(--fab-ink-secondary);
}
.fab-doc__facts li:first-child { border-top: 0; padding-top: 0; }
.fab-doc__facts b { display: block; color: var(--fab-ink); font-weight: var(--fab-weight-medium); }

/* --------------------------------------------------------------------------
   NUMBERED STEPS. decimal-leading-zero, because "01" is a mark and "1." is
   a bullet.
   -------------------------------------------------------------------------- */
.fab-doc__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: fab-step;
}
.fab-doc__steps li {
  counter-increment: fab-step;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  margin: 0;
  padding: 14px 0;
  border-top: var(--fab-hairline-width) solid var(--fab-hairline);
  font-size: var(--fab-size-lede);
  line-height: 1.7;
  color: var(--fab-ink-secondary);
}
.fab-doc__steps li:first-child { border-top: 0; padding-top: 0; }
.fab-doc__steps li::before {
  content: counter(fab-step, decimal-leading-zero);
  padding-top: .45em;
  font-size: var(--fab-size-label);
  letter-spacing: var(--fab-track-upper);
  color: var(--fab-ink-secondary);
}

/* --------------------------------------------------------------------------
   THE NOTE. The oxblood accent as a RULE, never as a field. This is the
   only place the accent appears on a document page.
   -------------------------------------------------------------------------- */
.fab-doc__note {
  margin: var(--fab-space-lg) 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--fab-accent-oxblood);
  font-size: var(--fab-size-compact);
  line-height: 1.7;
  color: var(--fab-ink-secondary);
}
.fab-doc__note b { color: var(--fab-ink); font-weight: var(--fab-weight-medium); }

/* --------------------------------------------------------------------------
   TABLES. A table always scrolls inside its OWN box. The size chart is
   nine columns wide and would otherwise push the whole document sideways
   at 390, which is the horizontal-overflow defect the responsive rules in
   components.md call out by name.
   -------------------------------------------------------------------------- */
.fab-doc__tw {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.fab-doc__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fab-size-detail);
}
.fab-doc__table th {
  padding: 9px 14px 9px 0;
  border-bottom: var(--fab-hairline-width) solid var(--fab-ink);
  font-size: var(--fab-size-micro);
  font-weight: var(--fab-weight-medium);
  letter-spacing: var(--fab-track-upper-tight);
  text-align: left;
  text-transform: uppercase;
  color: var(--fab-ink-secondary);
}
.fab-doc__table td {
  padding: 10px 14px 10px 0;
  border-bottom: var(--fab-hairline-width) solid var(--fab-hairline);
  color: var(--fab-ink-secondary);
  vertical-align: top;
}
.fab-doc__table td:first-child { color: var(--fab-ink); font-weight: var(--fab-weight-medium); }
.fab-doc__table th:last-child,
.fab-doc__table td:last-child { padding-right: 0; }
.fab-doc__table tr:last-child td { border-bottom: 0; }
.fab-doc__table--nums th,
.fab-doc__table--nums td { white-space: nowrap; }

/* --------------------------------------------------------------------------
   CARD LATTICE. A hairline grid, not boxes with shadows: the 1px gap over
   a hairline background IS the divider.
   -------------------------------------------------------------------------- */
.fab-doc__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fab-hairline-width);
  background: var(--fab-hairline);
  border: var(--fab-hairline-width) solid var(--fab-hairline);
}
.fab-doc__cards > div {
  background: var(--fab-ground);
  padding: clamp(18px, 2.4vw, 26px);
}
.fab-doc__cards h3 {
  margin: 0 0 9px;
  font-size: var(--fab-size-label);
  font-weight: var(--fab-weight-medium);
  letter-spacing: var(--fab-track-upper-wide);
  text-transform: uppercase;
  color: var(--fab-ink-secondary);
}
.fab-doc__cards p { margin: 0; font-size: var(--fab-size-compact); line-height: 1.65; }
.fab-doc__cards .fab-doc__lead-line {
  display: block;
  margin-bottom: 5px;
  font-size: var(--fab-size-prose);
  font-weight: var(--fab-weight-medium);
  color: var(--fab-ink);
}

/* --------------------------------------------------------------------------
   ACCORDION. Native <details>, no JavaScript: the advertorial's questions
   section and any FAQ inside a document. Hairline rows, a rotating plus,
   nothing that needs a script to be readable.

   A question reads as a QUESTION, so the summary keeps sentence case and
   ink colour rather than taking the uppercase micro-label treatment that
   .fab-doc h2 carries. That distinction is beta2's (.doc .acc details.spec
   summary) and it is what stops a Q&A reading as a list of section labels.
   -------------------------------------------------------------------------- */
.fab-doc__acc details {
  border-top: var(--fab-hairline-width) solid var(--fab-hairline);
}
.fab-doc__acc details:first-of-type { border-top: 0; }

.fab-doc__acc summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fab-space-lg);
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--fab-size-compact);
  font-weight: var(--fab-weight-medium);
  line-height: 1.5;
  color: var(--fab-ink);
}
.fab-doc__acc summary::-webkit-details-marker { display: none; }
.fab-doc__acc summary::marker { content: ''; }

/* The only affordance. A rule, not a chevron glyph: this system ships no
   icon set (see the nav's text "Menu" button for the same reason). */
.fab-doc__acc summary::after {
  content: '+';
  flex: none;
  font-size: var(--fab-size-lede);
  font-weight: var(--fab-weight-regular);
  line-height: 1;
  color: var(--fab-ink-secondary);
  transition: transform var(--fab-hover-duration) var(--fab-ease);
}
.fab-doc__acc details[open] summary::after { transform: rotate(45deg); }

.fab-doc__acc summary:focus-visible {
  outline: 2px solid var(--fab-ink);
  outline-offset: 2px;
}

.fab-doc__acc-body {
  padding-bottom: var(--fab-space-lg);
  font-size: var(--fab-size-lede);
  line-height: 1.78;
  color: var(--fab-ink-secondary);
}
.fab-doc__acc-body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   A CTA ROW at the foot of a document.
   -------------------------------------------------------------------------- */
.fab-doc__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}
.fab-doc__cta .fab-cta,
.fab-doc__cta .fab-btn {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 15px 30px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   THE INDEX. Used by the CPT archive template: a hairline list of links,
   no thumbnails. The parent's archive template cropped every CPT thumbnail
   into a CIRCLE, which broke both the radius-0 rule and crop discipline
   (portrait sources letterboxed to black inside a round mask). The fix is
   not a better crop. It is no thumbnail: these archives are indexes of
   text fragments, and none of them is a destination.
   -------------------------------------------------------------------------- */
.fab-doc__index {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fab-doc__index li {
  margin: 0;
  border-top: var(--fab-hairline-width) solid var(--fab-hairline);
}
.fab-doc__index li:first-child { border-top: 0; }

.fab-doc__index a {
  display: block;
  padding: 18px 0;
  border-bottom: 0;
  text-decoration: none;
  color: var(--fab-ink);
  transition: opacity var(--fab-hover-duration) var(--fab-ease);
}
.fab-doc__index a:hover,
.fab-doc__index a:focus-visible { opacity: .6; border-bottom: 0; }

.fab-doc__index-title {
  display: block;
  font-size: var(--fab-size-prose);
  font-weight: var(--fab-weight-medium);
  line-height: 1.35;
  color: var(--fab-ink);
}
.fab-doc__index-excerpt {
  display: block;
  margin-top: 5px;
  font-size: var(--fab-size-compact);
  line-height: 1.6;
  color: var(--fab-ink-secondary);
}

/* Pagination. The parent painted the current page as a small OXBLOOD FIELD,
   which spends the accent budget on a page number. A rule under the current
   item says the same thing without the field. */
.fab-doc__pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fab-space-md);
  align-items: center;
  margin-top: clamp(26px, 3.4vw, 40px);
  padding-top: clamp(20px, 2.6vw, 28px);
  border-top: var(--fab-hairline-width) solid var(--fab-hairline);
  font-size: var(--fab-size-caption);
  letter-spacing: var(--fab-track-caption);
  text-transform: uppercase;
}
.fab-doc__pager .page-numbers {
  color: var(--fab-ink-secondary);
  text-decoration: none;
  border-bottom: 0;
  padding-bottom: 2px;
}
.fab-doc__pager .page-numbers:hover { color: var(--fab-ink); }
.fab-doc__pager .page-numbers.current {
  color: var(--fab-ink);
  border-bottom: var(--fab-hairline-width) solid var(--fab-ink);
}

/* --------------------------------------------------------------------------
   THIRD-PARTY EMBED FRAME. The size guide carries a QuestionScout form
   whose iframe paints its OWN black field and its own typeface, neither of
   which we can restyle from here. Framing it in a hairline box under a
   quiet label at least declares it as a separate tool rather than letting
   a black slab read as one of our own bands.
   -------------------------------------------------------------------------- */
.fab-doc__embed {
  margin-top: var(--fab-space-md);
  border: var(--fab-hairline-width) solid var(--fab-hairline);
}
.fab-doc__embed iframe { display: block; width: 100%; border: 0; }

/* --------------------------------------------------------------------------
   RESPONSIVE. components.md's responsive rules are mandatory: nothing may
   overflow horizontally, and a multi-column lattice becomes one column.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .fab-doc__cards { grid-template-columns: 1fr; }
  .fab-doc__steps li { grid-template-columns: 2rem 1fr; }
  .fab-doc__table { font-size: var(--fab-size-compact); }
  .fab-doc__table th,
  .fab-doc__table td { padding-right: 10px; }
  .fab-doc__cta .fab-cta,
  .fab-doc__cta .fab-btn { width: 100%; }
}