/* Accessibility layer: shared, high-contrast states for the public site and constructor. */
:root {
  --a11y-focus: #55c22c;
  --a11y-focus-dark: #075d20;
}

/* The hero uses #075d20/#092b14. These explicit colors keep normal text above WCAG AA. */
.hero-premium,
.page-hero {
  color: #ffffff;
}
.hero-premium .lead,
.hero-premium .hero-stat,
.hero-premium .hero-stat small,
.page-hero p {
  color: #e5f2e7;
}
.constructor-hero { color: var(--ink); }
.constructor-hero p { color: var(--muted); }
.hero-premium .hero-stat strong,
.hero-premium h1,
.hero-premium h1 span {
  color: #ffffff;
}
.hero-premium .btn.lime {
  color: #092b14;
}

/* Never hide the keyboard position. A 3px outline remains visible on light and dark surfaces. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--a11y-focus) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 1px rgba(7, 93, 32, .24) !important;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* Filter chips and wizard answers get a stronger selected/focus affordance. */
.category-chip:focus-visible,
.slice-filter:focus-visible,
.color-swatch:focus-visible,
.catalog-picker__option:focus-visible,
.wizard-option:focus-visible,
.wizard-back:focus-visible,
.wizard-apply:focus-visible,
.visual-swatches button:focus-visible,
.material-tile:focus-visible,
.grout-list button:focus-visible {
  outline-color: var(--a11y-focus) !important;
  outline-offset: 3px !important;
}

/* Color-only swatches repeat their text in a keyboard/mouse tooltip. */
.color-swatch,
.palette-swatch,
.visual-swatches button {
  position: relative;
}
.color-swatch::after,
.palette-swatch::after,
.visual-swatches button[data-swatch-label]::after {
  content: attr(data-swatch-label);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 20;
  width: max-content;
  max-width: 190px;
  padding: 5px 8px;
  border: 1px solid rgba(20, 32, 24, .15);
  border-radius: 7px;
  background: #142018;
  color: #ffffff;
  font: 700 11px/1.2 Arial, sans-serif;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 3px);
  transition: opacity .16s ease, transform .16s ease;
}
.color-swatch:hover::after,
.color-swatch:focus-visible::after,
.palette-swatch:hover::after,
.palette-swatch:focus-visible::after,
.visual-swatches button[data-swatch-label]:hover::after,
.visual-swatches button[data-swatch-label]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
.color-swatch::after { content: attr(aria-label); }
.palette-swatch::after { content: attr(data-swatch-label); }

/* Keep the tooltip usable at the edge of a narrow viewport. */
@media (max-width: 600px) {
  .color-swatch::after,
  .palette-swatch::after,
  .visual-swatches button[data-swatch-label]::after {
    max-width: 140px;
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .color-swatch::after,
  .palette-swatch::after,
  .visual-swatches button[data-swatch-label]::after {
    transition: none;
  }
}