/*
 * hix family colors.
 *
 * project.css (from fhir.base.template) declares 25 CSS variables that are the
 * whole branding surface of an IG. This file overrides only the ones that carry
 * identity, exactly as fhir-ig.css and hl7.css do upstream. Everything else --
 * typography, tables, the publish box, the TOC box -- stays as the FHIR base
 * template defines it, which is the point: the page must read as a FHIR IG.
 */
:root {
  --navbar-bg-color: #0e3a4f;           /*  2. Header container color */
  --footer-container-bg-color: #0e3a4f; /*  4. Footer container color */
  --btn-hover-color: #34799a;           /*  6. Menu button hover color */
  --ig-status-text-color: #0e3a4f;      /*  1. IG title and status text color */
}

/*
 * The one layout override. project.css floats `p > img` left, and Markdown
 * renders a figure as exactly that, so the caption and the next paragraph wrap
 * in the sliver of space beside the diagram.
 */
p > img {
  float: none;
}

/*
 * Show the reader where an in-page link landed. The browser marks the element
 * whose id is in the URL fragment as :target, so a jump to a footnote, a table,
 * a figure or a section tints it for a moment. A table caption carries the
 * table's id, so the table beneath it is tinted too. The tint fades; nothing
 * is left behind once the reader has found their place.
 *
 * The way back from a footnote lands on the reference mark, a superscript
 * digit too small for a tint to be noticed, so the block that holds it is
 * tinted instead. :has() keeps its own rule: a browser without it drops the
 * rule, not the ones above.
 */
:target {
  scroll-margin-top: 1.25rem;
}

:target,
:target + table {
  animation: hix-target 2.5s ease-out;
}

:has(> sup:target) {
  animation: hix-target 2.5s ease-out;
}

@keyframes hix-target {
  from { background-color: rgba(52, 121, 154, 0.35); }
  to   { background-color: transparent; }
}