/* Elevare Studio demo badge.
   Honest label carried by every demo published to demos.elevarestudio.co.
   Load with:
     <link rel="stylesheet" href="/_shared/elevare-badge.css">
     <script src="/_shared/elevare-badge.js" data-business="Business Name" defer></script>

   Colour note: the badge paints an OPAQUE ground, so the delivered contrast
   equals the token pair with nothing composited between.
   #FBF9F6 on #14110E = 17.90:1 (computed 2026-09-13, WCAG 2.x relative luminance).
   Link #E2A07F on #14110E = 8.57:1 (computed 2026-09-13). */

.elevare-badge {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 2147483000;
  max-width: min(100%, 34rem);
  margin: 0;
  padding: 8px 14px;
  border-top-left-radius: 10px;
  background: #14110E;
  color: #FBF9F6;
  font: 400 12px/1.45 ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  letter-spacing: 0.005em;
  box-shadow: 0 -1px 0 rgba(251, 249, 246, 0.14), 0 8px 28px rgba(20, 17, 14, 0.28);
}

/* THE DISCLOSURE WITHOUT SCRIPTING.
   .elevare-badge is injected by elevare-badge.js, so with scripting off a page
   carrying a real business's name, logo, address, phone number, hours and
   photographs is served on a third-party domain with NO visible statement that it
   is not their site, until the footer legal paragraph eighteen thousand pixels
   down. The JSON-LD disambiguatingDescription is correct and is invisible to a
   human. So every demo also carries a STATIC line at the top of <body>:

     <noscript><p class="elevare-noscript-note">...</p></noscript>

   It is styled here rather than per page so the fix lands once for every demo. */
.elevare-noscript-note {
  margin: 0;
  padding: 10px 14px;
  background: #14110E;
  color: #FBF9F6;
  font: 400 13px/1.5 ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  text-align: center;
  border-bottom: 1px solid rgba(251, 249, 246, 0.14);
}
.elevare-noscript-note b { font-weight: 600; }
.elevare-noscript-note a { color: #E2A07F; text-underline-offset: 2px; }

.elevare-badge__text { margin: 0; }

.elevare-badge__brand { font-weight: 600; }

.elevare-badge__link {
  color: #E2A07F;
  text-decoration: underline;
  text-underline-offset: 2px;
  /* Studio bar tap target: at least 44px tall (WCAG 2.5.5 / house bar). */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  line-height: 1.2;
  padding: 0 6px;
}
.elevare-badge__glyph { display: none; }

.elevare-badge__link:hover { color: #FBF9F6; }

.elevare-badge__link:focus-visible {
  outline: 2px solid #FBF9F6;
  outline-offset: 2px;
  border-radius: 3px;
}

/* WCAG 2.2 SC 2.4.11: reserve room so page content and any focused control at the
   foot of the document can always clear the fixed badge. */
body.has-elevare-badge { padding-bottom: 72px; }

@media (max-width: 34rem) {
  .elevare-badge {
    left: 0;
    right: 0;
    max-width: none;
    border-radius: 0;
    text-align: center;
  }
  body.has-elevare-badge { padding-bottom: 128px; }
}

/* WIDE SCREENS (>=1000px): the full-width badge sat on top of page content
   (a trust strip, sliders, forms). Shrink the footprint: narrower two-line box,
   and the studio link collapses to a 44x44 chip that expands upward on hover and
   keyboard focus. THE DISCLOSURE TEXT IS NEVER COLLAPSED: "Concept by Elevare
   Studio. Not affiliated with <Business>." stays visible with no hover. Only the
   link label is hidden (visually, it stays in the accessible name). */
@media (min-width: 1000px) {
  .elevare-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 22rem;
    max-width: 22rem;
    padding: 4px 4px 4px 12px;
  }
  .elevare-badge__text { flex: 1 1 auto; }
  .elevare-badge__link {
    position: relative;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    justify-content: center;
    padding: 0;
    text-decoration: none;
  }
  .elevare-badge__glyph { display: inline; font-size: 16px; line-height: 1; }
  .elevare-badge__label {
    position: absolute;
    right: 0;
    bottom: 100%;
    height: 44px;
    display: none;
    align-items: center;
    padding: 0 12px;
    white-space: nowrap;
    background: #14110E;
    border-radius: 10px 10px 0 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    box-shadow: 0 -1px 0 rgba(251, 249, 246, 0.14), 0 8px 28px rgba(20, 17, 14, 0.28);
  }
  .elevare-badge__link:hover .elevare-badge__label,
  .elevare-badge__link:focus-visible .elevare-badge__label { display: inline-flex; }
}

@media print {
  .elevare-badge { position: static; box-shadow: none; }
  body.has-elevare-badge { padding-bottom: 0; }
}