/* Fills the gaps the live mcs-ui.css never needed — the redesign only reached
   the browse pages, so form controls and a few helpers for the deeper pages
   (coffee/roaster/blog/events detail, member area) live here. */

.mcs-ui-field textarea {
    width: 100%;
    min-height: 110px;
    padding: 12px 14px;
    border: 1px solid var(--mcs-line, #E6DCCC);
    border-radius: var(--mcs-r-sm, 10px);
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: var(--mcs-ink, #2E1B14);
    resize: vertical;
}
.mcs-ui-field input[type="date"],
.mcs-ui-field input[type="number"],
.mcs-ui-field input[type="url"],
.mcs-ui-field input[type="tel"] {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--mcs-line, #E6DCCC);
    border-radius: var(--mcs-r-sm, 10px);
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    color: var(--mcs-ink, #2E1B14);
}
.mcs-ui-field textarea:focus,
.mcs-ui-field input:focus {
    outline: none;
    border-color: var(--mcs-accent, #C05A2A);
    box-shadow: 0 0 0 3px rgba(192, 90, 42, .12);
}

.mcs-ui-round { border-radius: var(--mcs-r-md, 14px); }
.mcs-ui-h3 { font-family: "Lato-Bold", sans-serif; font-size: 18px; color: var(--mcs-ink, #2E1B14); margin: 0 0 10px; }

/* a plain placeholder tile in a media well */
.mcs-ui-card-media .ph,
.ph {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    font-family: "Lato-Bold", sans-serif; font-size: 40px;
    color: var(--mcs-line, #E6DCCC);
}

/* click-to-zoom lightbox (mcs.js) */
.mcs-zoom {
  position: fixed; inset: 0; z-index: 10000; display: none;
  align-items: center; justify-content: center; padding: 4vw;
  background: rgba(20, 12, 8, .88); cursor: zoom-out;
}
.mcs-zoom.is-open { display: flex; }
.mcs-zoom img { max-width: 100%; max-height: 92vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }

/* skip-to-content link — visible only on keyboard focus */
/* a key (css/keys.css) that waits above the screen until a keyboard Tab brings it down */
.mcs-skip-link {
  position: fixed; top: -80px; left: 8px; z-index: 10001;
  padding: 10px 18px;
  font-size: 13px; font-weight: 700;
}
.mcs-skip-link:focus { top: 8px; }

/* ---- star ratings (_stars.html) ---- */
.mcs-stars { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mcs-stars-set { display: inline-flex; gap: 2px; padding: 0; border: 0; background: none; }
.mcs-star {
  background: none; border: 0; padding: 0 1px; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--mcs-line, #E6DCCC);
  transition: color .1s ease;
}
.mcs-star.is-on { color: var(--mcs-accent, #C05A2A); }
button.mcs-star:hover { color: var(--mcs-dark, #4A2822); }
.mcs-star-x {
  background: none; border: 0; margin-left: 6px; padding: 0 3px; cursor: pointer;
  font-size: 15px; color: var(--mcs-muted, #8A7059);
}
.mcs-star-x:hover { color: #A6301A; }
.mcs-stars-meta { font-size: 12px; color: var(--mcs-muted, #8A7059); }
.cd-set-rate { padding: 0 4px 12px; }
.mcs-post-rate { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0; }
.mcs-post-rate-label { font-family: "Lato-Bold", sans-serif; font-size: 13px; color: var(--mcs-ink, #2E1B14); }

/* ---- auto-scrolling marquee base (homepage roaster-logo strip, Explore's
   wider roaster directory) — a doubled list scrolls left forever, pausing on
   hover, and gives way to a wrapped static row under reduced motion. Add
   both mcs-marquee/mcs-marquee-track alongside a page's own strip classes;
   --mcs-marquee-duration and --mcs-marquee-gap are the only two things a
   specific strip needs to set — everything else here is shared. */
.mcs-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mcs-marquee-track {
  display: flex; align-items: center; width: max-content;
  gap: var(--mcs-marquee-gap, 24px);
  animation: mcs-marquee-scroll var(--mcs-marquee-duration, 60s) linear infinite;
}
.mcs-marquee:hover .mcs-marquee-track { animation-play-state: paused; }
@keyframes mcs-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .mcs-marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}