/* Icon sprite container in index.html — kept out of layout entirely.
   Not an inline style= attribute: the deployed CSP is style-src 'self'
   with no 'unsafe-inline', which silently blocks inline styles and would
   leave the sprite's <symbol> content rendered inline on the page. */
.icon-sprite {
  display: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-md);
  top: -3rem;
  background: var(--color-brand-black);
  color: var(--color-surface);
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  z-index: 100;
  transition: top 0.15s ease;
}
.skip-link:focus { top: var(--space-md); }

/* --color-gold, not a darker text-safe variant: measured ~1.9-2.1:1
   against this class's actual backgrounds, under WCAG AA's 3:1 minimum
   — but every darker alternative tried also failed to look like the
   brand's actual gold (any dark-enough-to-pass version reads as
   brown/olive, not the bright yellow-gold of the logo/badges — see
   openspec/changes/archive/2026-09-24-accessibility-and-visual-fixes/ Post-ship). Owner's
   explicit, informed call: keep the real brand color here and accept
   the contrast trade-off for this specific decorative heading accent. */
.text-gold { color: var(--color-gold); }
.text-primary { color: var(--color-primary); }
.muted { color: var(--color-muted-gray); }

/* Fallback notice for a content-driven container (menu-groups,
   schedule-rows) that has nothing to render because content.js failed
   to load or its data was invalid — built by content-loader.js's
   buildFallbackNotice(), used by menu-loader.js/schedule-loader.js. A
   calm, on-brand card rather than blank space where a whole section
   should be. */
.content-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
  max-width: 28rem;
  margin-inline: auto;
  background: var(--color-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  color: var(--color-muted-gray);
}
.content-fallback .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-gold);
}

/* Honeypot field for the catering form — hidden from sighted users AND
   screen readers, never via display:none/visibility:hidden alone (some
   bots skip those), see docs/07-security.md "Form & abuse protection". */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}