/* =====================================================================
   The example bar, and the short note that shows when a Call button is tapped.

   The studio adds these to every example design in the portfolio.
   They are not part of any shop's own design.

   Colors are written out here, not shared with a shop's style file, so the
   bar looks the same on every example.
   ===================================================================== */

/* The slim bar across the top. The whole bar is one link back to the studio's examples. */
.dsd-example {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 18px;
  box-sizing: border-box; min-height: 34px; margin: 0; padding: 7px 14px 6px;
  background: #0e1615; color: #e6c983;
  border-bottom: 1px solid rgba(200, 163, 90, .5);
  font: 600 13px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: .01em; text-transform: none; text-decoration: none; text-align: left;
}
.dsd-example:hover { color: #fff; }
.dsd-example:focus-visible { outline: 2px solid #e6c983; outline-offset: -4px; }
.dsd-example-main { display: inline-flex; align-items: center; gap: 8px; }
.dsd-example-main img { display: block; flex: none; width: 18px; height: 18px; max-width: none; }
.dsd-example-more { color: #b9b19d; font-weight: 500; }
.dsd-example:hover .dsd-example-more { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* On a phone there's only room for the first part. A screen reader still reads both. */
@media (max-width: 599px) {
  .dsd-example-more {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* Picture Perfect fills the first screen exactly, so it gives up the bar's height to stay on one screen.
   The script measures the bar and puts its real height in --example-bar. */
.dsd-example ~ .first {
  height: calc(100vh - var(--example-bar, 34px));
  height: calc(100svh - var(--example-bar, 34px));
}

/* The note that appears for a few seconds when someone taps a Call or Email button. */
.dsd-example-note {
  position: fixed; left: 50%; bottom: 28px; z-index: 2147483000;
  width: max-content; max-width: min(92vw, 520px); text-wrap: balance;
  box-sizing: border-box; margin: 0; padding: 12px 18px;
  transform: translateX(-50%);
  background: #0e1615; color: #ede6d4;
  border: 1px solid rgba(200, 163, 90, .65); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
  font: 500 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: normal; text-transform: none; text-align: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s, visibility .2s;
}
.dsd-example-note.show { opacity: 1; visibility: visible; }
/* On phones each design keeps a Call bar along the bottom, so the note sits above it. */
@media (max-width: 900px) { .dsd-example-note { bottom: 92px; } }
@media (prefers-reduced-motion: reduce) { .dsd-example-note { transition: none; } }

/* Neither one belongs on a printed page (Kirkpatrick's price list can be printed). */
@media print {
  .dsd-example, .dsd-example-note { display: none !important; }
}