/* ILX Studio family pattern (v1, 2026-11-14). One file, pasted unchanged into every ILX Studio site:
   ilxstudio.com (the main site), ilxconnection.com, ilxcalcs.com, ilxdrawings.com.
   Two pieces, both self-contained (no fonts, no images, no JS):
     .ilx-family       thin top bar above the site nav: "ILX Studio" mark -> https://ilxstudio.com + product switcher
     .ilx-family-foot  footer block "An ILX Studio product · ilxstudio.com" + sister product links
   Markup: family-bar.html. Rules: README.md.
   Colours: the shared ILX tokens (--blue #1a70ff). The top bar is a navy band in BOTH themes, so the parent
   brand reads the same on every site; the footer block follows the site's light / dark tokens
   (html[data-theme] set by theme.js, else prefers-color-scheme). Every token has a fallback, so the file also
   works on a page that does not load site.css. All classes are prefixed ilx-family so nothing collides. */

.ilx-family {
  --ilxf-blue: var(--blue, #1a70ff);
  --ilxf-band: #0b1222;
  --ilxf-band-line: rgba(255, 255, 255, 0.08);
  --ilxf-text: rgba(226, 232, 240, 0.78);
  --ilxf-text-hi: #ffffff;
  background: var(--ilxf-band);
  border-bottom: 1px solid var(--ilxf-band-line);
  color: var(--ilxf-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 0.8rem;
  line-height: 1;
  position: relative;
  z-index: 61; /* above the sticky .site-nav (60) while it is in view */
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ilx-family { --ilxf-band: #050912; } }
:root[data-theme="dark"] .ilx-family { --ilxf-band: #050912; }

.ilx-family__in {
  max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; min-height: 34px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.ilx-family a { color: var(--ilxf-text); text-decoration: none; }
.ilx-family a:hover { color: var(--ilxf-text-hi); text-decoration: none; }
.ilx-family a:focus-visible { outline: 2px solid var(--ilxf-blue); outline-offset: 2px; border-radius: 4px; }

.ilx-family__home {
  display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; letter-spacing: 0.01em;
  padding: 0.35rem 0; white-space: nowrap;
}
.ilx-family__home svg { width: 16px; height: 16px; display: block; flex: none; }
.ilx-family__home b { color: #8bb8ff; font-weight: 700; }
.ilx-family__home .ilx-family__hint { font-weight: 400; opacity: 0.8; }
.ilx-family__home[aria-current] { color: var(--ilxf-text-hi); }

.ilx-family__switch { display: flex; align-items: center; gap: 0.25rem; }
.ilx-family__label { opacity: 0.7; margin-right: 0.35rem; white-space: nowrap; }
.ilx-family__products { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.15rem; }
.ilx-family__products a {
  display: inline-block; padding: 0.4rem 0.6rem; border-radius: 6px; white-space: nowrap;
}
.ilx-family__products a:hover { background: rgba(255, 255, 255, 0.07); }
.ilx-family__products a[aria-current] {
  color: var(--ilxf-text-hi); font-weight: 600; background: rgba(26, 112, 255, 0.22);
  box-shadow: inset 0 -2px 0 var(--ilxf-blue);
}

@media (max-width: 560px) {
  .ilx-family__in { padding: 0 1rem; gap: 0.5rem; }
  .ilx-family__label, .ilx-family__home .ilx-family__hint { display: none; }
  .ilx-family__products a { padding: 0.4rem 0.45rem; }
}
@media (max-width: 360px) { .ilx-family { font-size: 0.74rem; } .ilx-family__products a { padding: 0.4rem 0.3rem; } }

/* ---------------- Footer block ---------------- */
.ilx-family-foot {
  --ilxf-blue: var(--blue, #1a70ff);
  --ilxf-accent: var(--blue-2, #1559d6);
  --ilxf-fg: var(--heading, #0f172a);
  --ilxf-muted: var(--muted, #4f5d6e);
  --ilxf-line: var(--border, rgba(15, 23, 42, 0.12));
  --ilxf-tile: var(--bg3, #eef1f6);
  margin: 2rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--ilxf-line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem;
  font-size: 0.88rem; line-height: 1.4;
}
.ilx-family-foot a { text-decoration: none; }
.ilx-family-foot__home {
  display: inline-flex; align-items: center; gap: 0.55rem; color: var(--ilxf-fg) !important; font-weight: 600;
}
.ilx-family-foot__home:hover { color: var(--ilxf-accent) !important; }
.ilx-family-foot__home svg { width: 22px; height: 22px; flex: none; display: block; }
.ilx-family-foot__home b { color: var(--ilxf-accent); }
.ilx-family-foot__home .ilx-family-foot__domain { color: var(--ilxf-muted); font-weight: 400; }
/* doubled class: beats site rules such as ".site-footer ul { display: grid }" */
.ilx-family-foot .ilx-family-foot__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.86rem; }
.ilx-family-foot .ilx-family-foot__links a {
  display: inline-block; padding: 0.3rem 0.7rem; border: 1px solid var(--ilxf-line); border-radius: 999px;
  background: var(--ilxf-tile); color: var(--ilxf-muted) !important; white-space: nowrap;
}
.ilx-family-foot__links a:hover { border-color: var(--ilxf-blue); color: var(--ilxf-fg) !important; }
.ilx-family-foot__links a[aria-current] { color: var(--ilxf-fg) !important; border-color: var(--ilxf-blue); font-weight: 600; }

@media print { .ilx-family { display: none !important; } }