/* =========================================================================
   Dashfit site: the four pages that are not the home page
   =========================================================================

   privacy.html, terms.html, support.html and 404.html. Loaded AFTER
   assets/site.css, which owns the register, the tokens and every component
   used here. This file adds nothing new to the language: it only arranges
   three layouts site.css has no reason to know about.

     1. the eyebrow line, which belongs to the heading under it
     2. the support page's sticky contact card and its thirteen questions
     3. the 404 sheet, where Dash sits beside the text

   Rules this file keeps, the same as site.css:
     - every colour, radius, spacing step and duration goes through a token
     - no gradient, no glow, no border on a surface's own edge, no second
       shadow, no hover lift
     - a hairline divider sits BETWEEN items and never on a list's outer edge
     - every interactive target stays at least 44 by 44
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. Eyebrows and the first heading in a document
   -------------------------------------------------------------------------
   The source pages open each block with a short caption over its heading
   ("Private by design", "Direct support"). That line belongs to the heading
   below it, so it hugs rather than taking the generic block gap. These win
   on specificity over .prose h2 and over .stack's own child gap.
   ------------------------------------------------------------------------- */

.section-head .t-caption + h1 { margin-top: var(--sp-1); }
.legal .t-caption + h2 { margin-top: var(--sp-1); }

/* Terms opens on a heading. Its 48px rank margin would double the gap the
   section head already set. */
.prose > h2:first-child { margin-top: 0; }

/* Two of the Terms sections have names long enough to wrap in the 15rem
   table of contents. At two lines the text is 42px in a 44px row, which left
   one pixel between a wrapped entry and the hairline under it. The padding
   gives every row its own space and leaves the single-line rows at the 44px
   target, since min-height still governs them. */
.toc__link { padding-block: var(--sp-1); }


/* -------------------------------------------------------------------------
   2. The support page
   -------------------------------------------------------------------------
   Same two-column shell as the legal pages, with the contact card in the
   place the table of contents takes there. The card comes first in the
   markup, so a phone reader meets the one way to get help before the
   thirteen questions.
   ------------------------------------------------------------------------- */

.legal__aside { min-width: 0; }

@media (min-width: 64rem) {
  /* Wider than the 15rem table of contents, because this column holds a
     56px button whose label must never wrap. */
  .legal--support { grid-template-columns: 19rem minmax(0, 1fr); }

  /* .legal already sets align-items: start at this width, which is what lets
     the card stick. */
  .legal__aside {
    position: sticky;
    top: calc(var(--shelf-h) + var(--sp-4));
  }
}

/* The button is the card's last line and fills the column, so the label sits
   on one line at every width. */
.legal__aside .btn { width: 100%; }

/* Thirteen questions is a list, so each one takes the hairline divider the
   site uses for every other list. The first question carries none: a divider
   belongs between items, never on the outer edge. */
.prose--faq h3 {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--df-hairline);
}

.prose--faq h3:first-of-type {
  padding-top: 0;
  border-top: 0;
}


/* -------------------------------------------------------------------------
   3. The 404 sheet
   -------------------------------------------------------------------------
   The one place on the site where Dash appears, and he appears inside a
   glass sheet rather than alone on the page. The sheet is a .surface--sheet
   in a veil band, so the picture and the words sit on the same material.
   ------------------------------------------------------------------------- */

.notfound {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
  max-width: 46rem;
}

.notfound__dash {
  width: 160px;
  justify-self: start;
}

@media (min-width: 40rem) {
  .notfound {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: var(--sp-5);
  }

  .notfound__dash { width: 200px; }
}


/* -------------------------------------------------------------------------
   4. Print
   -------------------------------------------------------------------------
   site.css turns the legal pages to white paper and drops the table of
   contents. The support card stays, because it carries the address, and it
   must not be sticky on paper.
   ------------------------------------------------------------------------- */

@media print {
  .legal__aside {
    position: static;
    padding: 0;
    background: var(--df-paper);
  }

  /* On paper a link is dead and a capsule is ink the reader did not ask for,
     so the one button becomes a line of text. The label reads "Email
     support", which on screen is enough because the link carries the
     address; printed, it is not, and the footer's links are hidden. This
     prints the address after the label. It is print-only and appears nowhere
     on screen, in the markup, or in the carried-over text. */
  .legal__aside .btn {
    width: auto;
    min-height: 0;
    padding: 0;
    gap: 0;          /* the label and the address read as one line */
    background: var(--df-paper);
    color: var(--df-print-ink);
    box-shadow: none;
  }

  .legal__aside .btn[href^="mailto:"]::after { content: ": main@efngroup.biz"; }

  /* .legal stacks on paper, so the questions need the beat the grid gap gave
     them on screen. */
  .prose--faq { margin-top: var(--sp-5); }

  .notfound { display: block; }
}

/* Below the two-column legal layout the contents list sits above the text.
   Two columns halve the distance to the first sentence. The second item's
   rule is dropped because it heads the second column. */
@media (max-width: 63.999rem) {
  .toc__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-4);
  }
  .toc__list > li:nth-child(2) .toc__link { border-top: 0; }
}