/* burchtoolguy.com — retro-utilitarian, hand-painted-sign feel */

/* Subtle paper texture as a data URI noise overlay */
.paper-texture {
  background-image:
    radial-gradient(rgba(17,17,17,0.04) 1px, transparent 1px),
    radial-gradient(rgba(139,46,46,0.025) 1px, transparent 1px);
  background-size: 8px 8px, 24px 24px;
  background-position: 0 0, 4px 4px;
}

/* Tighter focus ring than browser default — looks more "stamped" */
:focus-visible {
  outline: 3px solid #8B2E2E;
  outline-offset: 2px;
}

/* Slightly off-kilter rotation on the corner badge for hand-cut feel */
header a span:first-child {
  transform: rotate(-3deg);
}

/* Make sure tailwind shadow-utility on shifted cards renders crisp on retina */
img, svg {
  max-width: 100%;
  height: auto;
}

/* Honeypot hidden but still focusable for accessibility-tree completeness */
form .absolute[aria-hidden="true"] {
  pointer-events: none;
}

/* ─── audience switcher ───
 * Inline <head> script sets html[data-audience] before paint, so we don't
 * flash the wrong variant. data-for="sales|sb" elements hide based on it. */
html[data-audience="sales"] [data-for="sb"] { display: none !important; }
html[data-audience="sb"]    [data-for="sales"] { display: none !important; }

.audience-btn { transition: background 0.15s, color 0.15s; position: relative; }
.audience-btn[aria-pressed="true"] {
  background: #8B2E2E;             /* barn red — clearly "on" */
  color: #F5F1E8;
  box-shadow: inset 0 0 0 1px rgba(245, 241, 232, 0.35);
}
.audience-btn[aria-pressed="true"]::before {
  content: "●";
  margin-right: 0.4em;
  font-size: 0.7em;
  vertical-align: 0.15em;
  color: #F5F1E8;
}
.audience-btn[aria-pressed="false"] {
  background: transparent;
  color: rgba(245, 241, 232, 0.4); /* dim enough to read "off" */
}
.audience-btn[aria-pressed="false"]:hover {
  background: rgba(245, 241, 232, 0.08);
  color: rgba(245, 241, 232, 0.85);
}

/* When the audience bar is sticky, the floating status widget overlaps awkwardly
 * on small screens. Nudge the status widget up a little to stay clear. */
@media (max-width: 768px) {
  #status-widget { bottom: 1rem; right: 1rem; }
}

/* ─── floating status widget ─── */
#status-widget[data-state="active"] .status-core { background: #15A34A; }
#status-widget[data-state="active"] .status-pulse {
  background: #15A34A;
  animation: status-pulse 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
#status-widget[data-state="offhours"] .status-core { background: #C25E3A; }
#status-widget[data-state="offhours"] .status-pulse { display: none; }
#status-widget[data-state="away"] .status-core { background: #737373; }
#status-widget[data-state="away"] .status-pulse { display: none; }
#status-widget[data-state="loading"] .status-core { background: #d4d4d4; }
#status-widget[data-state="loading"] .status-pulse { display: none; }

@keyframes status-pulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(2.4); opacity: 0; }
}