/* THE BRIDGE. Blog-only, loaded LAST, in the `bridge` layer.

   Cascade layers sort DECLARED conflicts. Where Type-on-Strap names a property
   that the fh-* rule never declares, there is no conflict to sort and the theme
   wins by default no matter how the layers are ordered. Everything here is one
   of those cases -- each rule names the theme selector it is answering, so a
   future theme upgrade can be checked against this list.

   Nothing here is a style choice. Do not put design decisions in this file;
   those belong upstream in the landing's fh-components.css so both sites get
   them. ============================================================ */
@layer bridge {

  /* CHROME IS URBANIST, ARTICLE BODY STAYS INTER -- the one deliberate
     divergence from the landing, which is Urbanist throughout.

     _sass/base/_global.scss `body { font-family: Inter }` sits in the `blog`
     layer, which outranks fh-base.css's Urbanist in `base` (that is the whole
     point of the layer order -- it is what keeps long-form posts in a reading
     face). But .fh-nav / .fh-foot declare no family of their own, so they
     inherit that Inter. Set the face on the two chrome roots and let it
     inherit down.

     This also fixes the nav buttons for free: _sass/external/_reset.scss:252
     `button { font: inherit }` is a SHORTHAND, so <button> picks up whatever
     family its ancestor has -- now Urbanist from .fh-nav, not Inter from body.
     That covers .fh-nav__toggle and .fh-menu__trigger. */
  .fh-nav,
  .fh-foot {
    font-family: var(--l-face-display);
  }

  /* _sass/external/_reset.scss:277 `button, select { text-transform: none }`.
     .fh-nav__toggle asks for uppercase; normalize names the same property, so
     this is a real conflict -- but it resolves in `blog` over `components`
     ONLY because normalize is unlayered-turned-blog. Restate it. Without this
     the control reads "Menu", not "MENU", against a bar of tracked caps. */
  .fh-nav__toggle {
    text-transform: uppercase;
  }

  /* _sass/layouts/_posts.scss:25 `footer { width:100%; font-size:.9em;
     display:inline-block; text-align:center }`. .fh-foot declares only
     border-block-start and padding-block, so all four land and the site footer
     becomes a shrink-to-fit, centred box. That rule is meant for a post's own
     footnote footer, not the site chrome. */
  .fh-foot {
    display: block;
    width: auto;
    text-align: start;
    font-size: var(--l-fs-body);
  }

  /* _sass/base/_global.scss:63 `iframe,img,embed,object,video { padding:0 9%;
     margin-left:auto; margin-right:auto }` -- an article-image rule that also
     catches the two brand marks. .fh-nav__brand img and .fh-foot__mark img set
     height/width only, so the wordmark would sit 9% inside its own link and
     centre itself. */
  .fh-nav__brand img,
  .fh-foot__mark img {
    padding: 0;
    margin-inline: 0;
  }

  /* _sass/base/_global.scss:97 `@media (max-width:768px){ p,li,td
     { font-size:0.8em } }` reaches the footer's own paragraphs. */
  .fh-foot__claim,
  .fh-foot__note,
  .fh-foot__imprint p {
    font-size: var(--l-fs-data);
  }

  /* SITE CHROME MUST NOT INHERIT AN ARTICLE'S FLOATS.

     The theme floats freely and does not always clear: `.tag-posts .meta`,
     `.tag-posts .post-info` (_sass/layouts/_tags.scss) and `.meta`
     (_sass/layouts/_posts.scss) are all `float: right`. On /tags/ and /search/
     those floats escape the content column and the footer, being a plain block
     box, lays itself out BESIDE them -- measured: .fh-foot__grid landed at
     x=1440 with a used width of 0, which collapsed its three `fr` tracks to
     zero and left the 13rem and 16rem minmax() minimums overflowing the page
     by 120px at every width from 320 to 1600.

     The landing never hit this because nothing there floats. Clearing is the
     narrow fix; the footer is the last block on the page, so it costs nothing
     when there are no floats to clear. */
  .fh-foot {
    clear: both;
  }

  /* THE SKIP LINK, AGAIN. fh-components.css:384 already restates .fh-skip's
     COLOUR because the landing shipped it once at 1:1 contrast. The blog hits
     the same bug on the other half of the pair: normalize's
     `a { background-color: transparent }` (_sass/external/_reset.scss:89, "Remove
     the gray background color from active links in IE 10") sits in the `blog`
     layer, and .fh-skip is declared in `reset` below it -- so the gold plate
     was being erased and the dark text left on the page's own ground.
     Verified with getComputedStyle, not by eye: it is invisible until focused. */
  a.fh-skip {
    background-color: var(--l-gold);
  }

  /* SECTION vs PAGE. The landing marks the current nav item from
     `request.path`, so exactly one destination is ever `aria-current="page"`.
     On the blog every URL is *inside* the Blog destination, so a strict match
     would mark nothing at all: the item is `page` on the blog index and `true`
     -- ARIA's generic "current member of a set" -- on every post. The ported
     CSS keys on ="page" only, so give ="true" the same graduation tick.
     Mirrors fh-components.css:131 and :290. */
  .fh-nav__link[aria-current="true"] {
    color: var(--l-gold);
  }

  .fh-nav__link[aria-current="true"]::after {
    content: "";
    position: absolute;
    inset-block-end: -1px;
    inset-inline: 0;
    height: 2px;
    background-color: var(--l-gold);
  }

  /* The bar's dropdown panel marks the current destination too. Panel links
     are bare <a>, not .fh-nav__link, so neither fh-components.css:131 nor the
     rules above reach them -- on the landing nothing in a panel is ever the
     current page, so the gap never showed. On the blog, Resources > Blog
     always is. The drawer already marks it; this keeps the two navigations
     saying the same thing. */
  .fh-menu__panel a[aria-current] {
    color: var(--l-gold);
    box-shadow: inset 2px 0 0 var(--l-gold);
  }

  /* The drawer turns that tick on its side -- a full-width underline in a
     vertical list reads as a divider between rows. Mirrors :290 and :297. */
  .fh-nav__drawer .fh-nav__link[aria-current="true"]::after {
    inset-block: 0.375rem;
    inset-inline: -0.5rem auto;
    width: 2px;
    height: auto;
  }

  .fh-nav__sublink[aria-current="true"]::after {
    inset-inline-start: -1rem;
  }
}