/* Things Tailwind utilities can't express. Everything else lives in the markup. */

/* Diamond / tile grid motif echoing the logo mark */
.bg-tilegrid {
  background-image:
    linear-gradient(45deg,  rgba(201,162,74,.10) 1px, transparent 1px),
    linear-gradient(-45deg, rgba(201,162,74,.10) 1px, transparent 1px);
  background-size: 56px 56px;
}
.bg-tilegrid-dark {
  background-image:
    linear-gradient(45deg,  rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(-45deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* Thin gold rule under section titles (as on the logo) */
.gold-rule::after {
  content: '';
  display: block;
  width: 72px;
  height: 2px;
  background: #C9A24A;
  margin-top: .75rem;
}
.gold-rule.centered::after { margin-left: auto; margin-right: auto; }

/* Toast */
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.toast-in { animation: toast-in .25s ease-out; }

/* Fade-up on load for hero text */
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.fade-up   { animation: fade-up .6s ease-out both; }
.fade-up-2 { animation: fade-up .6s .15s ease-out both; }
.fade-up-3 { animation: fade-up .6s .3s ease-out both; }

/* Hide number input spinners in the qty fields */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* Smooth scrolling + hidden scrollbar on the filter tab row */
html { scroll-behavior: smooth; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Clear keyboard/tap focus for everyone (visible gold ring) */
:focus-visible { outline: 3px solid #C9A24A; outline-offset: 3px; }
a, button { -webkit-tap-highlight-color: rgba(201,162,74,.25); }

/* Respect people who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-up, .fade-up-2, .fade-up-3, .toast-in { animation: none; }
}

/* The small gold headings need a darker gold on light backgrounds and the bright gold on dark ones */
.bg-forest .eyebrow, .bg-pine .eyebrow, footer .eyebrow, .eyebrow-light { color: #E0BC63; }

/* Bigger tick boxes and radio buttons that are easy to hit */
input[type=checkbox], input[type=radio] { width: 1.25rem; height: 1.25rem; }