/*
 * Attribution mark — Clifton Ave Animal Hospital integration.
 *
 * Enqueued after bitesites-credit-footer.css, which is a verbatim copy of the
 * master in Desktop/BiteSites/Components/attribution. Every CAAH-specific rule
 * lives here so that updating the component stays a straight file copy.
 */

/*
 * 1. Full-width row.
 *
 * If the host footer is a wrapping flex or grid row, the strip lays out as one
 * more item beside the client's columns and its border-top becomes a rule under
 * half the footer. Delete this block if the footer stacks its children already.
 */
.footer .bitesites-credit {
  flex: 1 0 100%;
  width: 100%;
}

/*
 * 2. Dark mode that the visitor can toggle.
 *
 * bitesites-credit--on-dark is the right modifier for a footer that is always
 * dark. When the host has a runtime toggle, bind the tokens to whatever class it
 * puts on the root instead — html.dark-mode here — so the mark follows the page
 * rather than the operating system.
 */
html.dark-mode .bitesites-credit {
  --bitesites-credit-rule: rgba(255, 255, 255, 0.14);
  --bitesites-credit-copy-color: rgba(255, 255, 255, 0.4);
  --bitesites-credit-eyebrow-color: rgba(255, 255, 255, 0.7);
  --bitesites-credit-mark-color: #fff;
}

/* brightness(0) flattens the artwork's antialiasing to black so invert() lands
   on flat white instead of a grey fringe; filters preserve alpha, so the
   transparent background stays transparent. */
html.dark-mode .bitesites-morph-type img {
  filter: brightness(0) invert(1);
}

/*
 * 3. Host font.
 *
 * The label ships as Tomorrow with a generic fallback. Naming the host's own
 * body font as the second choice means a blocked font request leaves a label
 * that still matches the footer around it.
 */
.bitesites-credit {
  --bitesites-credit-eyebrow-font: Tomorrow, Manrope, ui-sans-serif, system-ui, sans-serif;
}