/* The little that Tailwind utility classes don't cover. */

.nav-link {
  color: #3a3f1c;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.nav-link:hover { border-bottom-color: #8a9a7b; }
.nav-link-active { border-bottom-color: #3a3f1c; }

/* Section label: small uppercase tracking, like "WEDDINGS · SHOWERS · PARTIES" on the flyer */
.eyebrow {
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #4a5436;
}

.btn {
  display: inline-block;
  padding: .9rem 2.2rem;
  font-size: .72rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid currentColor;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-olive { background: #3a3f1c; color: #f6f2ec; border-color: #3a3f1c; }
.btn-olive:hover { background: #4a5436; border-color: #4a5436; }
.btn-outline { color: #3a3f1c; }
.btn-outline:hover { background: #3a3f1c; color: #f6f2ec; }
.btn-light { color: #f6f2ec; border-color: #f6f2ec; }
.btn-light:hover { background: #f6f2ec; color: #3a3f1c; }

/* Brush-stroke style band like the "Real flowers, beautiful moments." mark on the flyer */
.band { position: relative; background: #5f6e50; color: #f6f2ec; }

/* Lining numerals for stats (Cormorant defaults to old-style figures) */
.num { font-variant-numeric: lining-nums; }

/* Form fields */
.field {
  width: 100%;
  background: #fff;
  border: 1px solid #c9d2bd;
  padding: .8rem 1rem;
  font-size: .95rem;
  color: #2b2b26;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field:focus { border-color: #6f7f5f; box-shadow: 0 0 0 3px rgba(138, 154, 123, .25); }
.field-label {
  display: block;
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #4a5436;
  margin-bottom: .4rem;
}
.field-error { color: #a8605a; font-size: .8rem; margin-top: .3rem; }

/* Star rating input (radio buttons styled as stars, right-to-left trick) */
.stars { display: inline-flex; flex-direction: row-reverse; gap: .15rem; }
.stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.stars label { cursor: pointer; font-size: 1.8rem; line-height: 1; color: #c9d2bd; transition: color .15s ease; }
.stars label:hover, .stars label:hover ~ label,
.stars input:checked ~ label { color: #a8605a; }
.stars input:focus-visible + label { outline: 2px solid #6f7f5f; outline-offset: 2px; }

/* Honeypot: visually hidden but still in the DOM for bots */
.hp { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; overflow: hidden; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(43, 43, 38, .94); display: none; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox img { max-width: min(96vw, 1400px); max-height: 90vh; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox button { position: absolute; color: #f6f2ec; background: transparent; border: 0; cursor: pointer; padding: 1rem; font-size: 2rem; line-height: 1; opacity: .8; }
.lightbox button:hover { opacity: 1; }
.lightbox .lb-close { top: .5rem; right: .75rem; }
.lightbox .lb-prev { left: .25rem; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: .25rem; top: 50%; transform: translateY(-50%); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}