/*
 * Custom CSS for Webflow site.
 *
 * Served via the jsDelivr CDN and embedded in the Webflow
 * "Custom Code" (Head) area so it applies on every page.
 */

html {
  background-color: var(--blue, #1c2d41);
}

/* Webflow focuses .w-form-done after submit for a11y; hide the ring here. */
.newsletter-signup .w-form-done,
.newsletter-signup .w-form-fail,
.newsletter-signup .w-form-done:focus,
.newsletter-signup .w-form-fail:focus,
.newsletter-signup .w-form-done:focus-visible,
.newsletter-signup .w-form-fail:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Browser autofill — match dark form fields (Chrome yellow override). */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
input:autofill,
textarea:autofill {
  -webkit-text-fill-color: #a0a3a6;
  caret-color: #a0a3a6;
  box-shadow: 0 0 0 1000px #1c2d41 inset;
  transition: background-color 99999s ease-in-out 0s;
}

/* ------------------------------------------------------------------ *
 * Animated link underline (draw in / out)
 * ------------------------------------------------------------------ *
 * Webflow's text-decoration can't animate. A background line with
 * box-decoration-break: clone underlines each wrapped line correctly.
 *
 * In Webflow: add combo class `link-draw` OR `link-draw--out` — not both.
 * Turn off text-decoration on that element so this layer owns the line.
 *
 *   link-draw              — underline draws in on hover, out on leave
 *   link-draw--out         — underline visible by default; draws out on
 *                            hover, back in on leave
 *   link-draw--always      — always visible; replays draw-in on hover
 *   link-draw--always-out  — always visible; replays draw-out on hover
 *   data-link-draw         — same as link-draw
 *   data-link-draw-out     — same as link-draw--out
 * ------------------------------------------------------------------ */

@keyframes link-draw-in {
  from {
    background-size: 0% var(--link-draw-thickness, 1px);
  }
  to {
    background-size: 100% var(--link-draw-thickness, 1px);
  }
}

@keyframes link-draw-out {
  from {
    background-size: 100% var(--link-draw-thickness, 1px);
  }
  to {
    background-size: 0% var(--link-draw-thickness, 1px);
  }
}

/* Shared line setup */
.link-draw,
.link-draw--out,
.link-draw--always,
.link-draw--always-out,
[data-link-draw],
[data-link-draw-out],
.link-draw-on-hover,
.join-popup .button strong {
  text-decoration: none !important;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 calc(100% - var(--link-draw-offset, 0.12em));
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Shrink-wrap flex nav labels so the line matches text, not the hit area. */
.sticky-nav .sticky-nav-button.link-draw,
.sticky-nav .sticky-nav-button.link-draw--out,
.sticky-nav .sticky-nav-button.link-draw--always,
.sticky-nav .sticky-nav-button.link-draw--always-out,
.sticky-nav .sticky-nav-button[data-link-draw],
.sticky-nav .sticky-nav-button[data-link-draw-out],
.where-to-buy .sticky-nav-button.link-draw,
.where-to-buy .sticky-nav-button.link-draw--out,
.where-to-buy .sticky-nav-button.link-draw--always,
.where-to-buy .sticky-nav-button.link-draw--always-out,
.where-to-buy .sticky-nav-button[data-link-draw],
.where-to-buy .sticky-nav-button[data-link-draw-out] {
  width: fit-content;
  max-width: fit-content;
}

/* Draw in — hidden until hover */
.link-draw,
[data-link-draw],
.join-popup .button strong {
  background-size: 0% var(--link-draw-thickness, 1px);
  transition: background-size var(--link-draw-duration, 0.3s) ease;
}

.link-draw:hover,
.link-draw:focus-visible,
[data-link-draw]:hover,
[data-link-draw]:focus-visible,
.join-popup .button:hover strong,
.join-popup .button:focus-visible strong {
  background-size: 100% var(--link-draw-thickness, 1px);
}

/* Draw out — visible until hover (separate rules; do not combine with link-draw) */
.link-draw--out,
[data-link-draw-out] {
  background-size: 100% var(--link-draw-thickness, 1px);
  transition: background-size var(--link-draw-duration, 0.3s) ease;
}

.link-draw--out:hover,
.link-draw--out:focus-visible,
[data-link-draw-out]:hover,
[data-link-draw-out]:focus-visible {
  background-size: 0% var(--link-draw-thickness, 1px);
}

/* If both draw classes are on the same element, --out wins. */
.link-draw.link-draw--out,
.link-draw[data-link-draw-out] {
  background-size: 100% var(--link-draw-thickness, 1px);
}

.link-draw.link-draw--out:hover,
.link-draw.link-draw--out:focus-visible,
.link-draw[data-link-draw-out]:hover,
.link-draw[data-link-draw-out]:focus-visible {
  background-size: 0% var(--link-draw-thickness, 1px);
}

/* Always visible — replay draw-in on hover */
.link-draw--always {
  background-size: 100% var(--link-draw-thickness, 1px);
}

.link-draw--always:hover,
.link-draw--always:focus-visible {
  animation: link-draw-in var(--link-draw-duration, 0.3s) ease;
}

/* Always visible — replay draw-out on hover */
.link-draw--always-out {
  background-size: 100% var(--link-draw-thickness, 1px);
  transition: background-size var(--link-draw-duration, 0.3s) ease;
}

.link-draw--always-out:hover,
.link-draw--always-out:focus-visible {
  animation: link-draw-out var(--link-draw-duration, 0.3s) ease forwards;
  transition: none;
}

/* Parent-triggered variant (e.g. whole card is the link). */
.link-draw-on-hover {
  background-size: 0% var(--link-draw-thickness, 1px);
  transition: background-size var(--link-draw-duration, 0.3s) ease;
}

a:hover .link-draw-on-hover,
a:focus-visible .link-draw-on-hover,
a.is-hover .link-draw-on-hover {
  background-size: 100% var(--link-draw-thickness, 1px);
}

.footer-text .link-draw--out,
.footer-text [data-link-draw-out] {
  --link-draw-offset: 0.05em;
}

/* iOS Safari auto-wraps phone numbers in tel: links (system blue).
   Keep them looking like the surrounding footer text. */
.footer-meta-wrapper a,
.footer-meta-wrapper a:link,
.footer-meta-wrapper a:visited,
.footer-meta-wrapper a:hover,
.footer-meta-wrapper a:active,
.footer-text a,
.footer-text a:link,
.footer-text a:visited,
.footer-text a:hover,
.footer-text a:active {
  color: inherit;
  text-decoration: none;
  -webkit-text-fill-color: inherit;
}

/* ------------------------------------------------------------------ *
 * Marquee slider (see the [data-marquee] logic in main.js)
 * ------------------------------------------------------------------ */

[data-marquee].is-marquee,
[data-marquee] {
  overflow: hidden;
}

[data-marquee] .marquee-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  max-width: none;
  will-change: transform;
}

/* Keep each tile at its own size. */
[data-marquee] .marquee-slide {
  flex-shrink: 0;
  width: auto;
  height: auto;
}

/* Farm name/location turns white on hover. */
[data-marquee] .farm-link .farm-name-location,
[data-marquee] .farm-link .farm-name-location .body-small {
  transition: color 0.25s ease;
}

[data-marquee] .farm-link:hover .farm-name-location,
[data-marquee] .farm-link:hover .farm-name-location .body-small {
  color: #fff;
}

/* Hover spotlight: blur every tile except the hovered one.
   Blur applies slowly (1s ease-in); returns to sharp quickly (0.2s ease-out). */
[data-marquee] .marquee-slide {
  transition:
    filter 0.2s ease-out,
    opacity 0.2s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  [data-marquee] .marquee-track:has(.farm-link:hover) .marquee-slide:not(:hover),
  [data-marquee] .marquee-track:has(.marquee-slide:hover) .marquee-slide:not(:hover) {
    filter: blur(5px);
    transition: filter 1s ease-in, opacity 0.2s ease-out;
  }
  /* While dragging, clear the hover blur even if a tile is still hovered. */
  [data-marquee].is-dragging .marquee-slide,
  [data-marquee].is-dragging .marquee-track:has(.farm-link:hover) .marquee-slide:not(:hover),
  [data-marquee].is-dragging .marquee-track:has(.marquee-slide:hover) .marquee-slide:not(:hover) {
    filter: none;
    transition: filter 0.2s ease-out, opacity 0.2s ease-out;
  }
  /* The hovered tile stays sharp. */
  [data-marquee] .marquee-slide:hover {
    filter: none;
    transition: filter 0.2s ease-out, opacity 0.2s ease-out;
  }
}

/* Touch: no sibling dimming (too heavy on large pages). Active tile text
   turns white while holding / dragging to play video. */
@media (hover: none), (pointer: coarse) {
  [data-marquee] .marquee-slide {
    filter: none !important;
  }

  [data-marquee] .marquee-slide.is-playing-video .farm-name-location,
  [data-marquee] .marquee-slide.is-playing-video .farm-name-location .body-small,
  [data-marquee] .marquee-slide.is-playing-video .body-small {
    color: #fff;
  }
}

/* Prevent the browser's default image "ghost drag" while swiping.
   Keep pointer-events enabled so grabs on the photo start a drag. */
[data-marquee] .marquee-slide,
[data-marquee] .farm-link {
  cursor: inherit;
  -webkit-user-drag: none;
}

[data-marquee] .marquee-slide img {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: auto;
}

/* Hover: swap still image for background video. */
[data-marquee] .image-video-container {
  position: relative;
}

[data-marquee] .cheesemaker-video-bg {
  opacity: 0;
  transition: opacity 0.25s ease;
}

[data-marquee] .marquee-slide .cheese {
  transition: opacity 0.25s ease;
}

[data-marquee] .marquee-slide:hover .cheesemaker-video-bg {
  opacity: 1;
}

[data-marquee] .marquee-slide:hover .cheese {
  opacity: 0;
}

/* Touch: hold / drag plays video via .is-playing-video (no sticky :hover). */
[data-marquee] .marquee-slide.is-playing-video .cheesemaker-video-bg {
  opacity: 1;
}

[data-marquee] .marquee-slide.is-playing-video .cheese {
  opacity: 0;
}

@media (hover: none), (pointer: coarse) {
  [data-marquee] .marquee-slide:hover .cheesemaker-video-bg {
    opacity: 0;
  }

  [data-marquee] .marquee-slide:hover .cheese {
    opacity: 1;
  }

  [data-marquee] .marquee-slide.is-playing-video .cheesemaker-video-bg {
    opacity: 1;
  }

  [data-marquee] .marquee-slide.is-playing-video .cheese {
    opacity: 0;
  }
}

[data-marquee].is-marquee-draggable {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

[data-marquee].is-marquee-draggable.is-dragging {
  cursor: grabbing;
}

/* ------------------------------------------------------------------ *
 * Sticky nav
 * ------------------------------------------------------------------ */

/*
 * Arrow expands in on the active link and pushes the label right —
 * no reserved gap when inactive. Active = black + arrow. Inactive =
 * grey (#aeaeae). Non-active hover = #656769, no arrow.
 */
.sticky-nav .sticky-nav-button {
  display: flex;
  align-items: center;
  color: #aeaeae;
  transition: color 0.25s ease;
}

.sticky-nav.down-more {
  margin-top: 50px;
}

.sticky-nav .sticky-nav-button::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 0;
  height: 10px;
  margin-right: 0;
  overflow: hidden;
  background: url("https://maine-cheese.vercel.app/arrow.svg") no-repeat
    center / 11px 10px;
  opacity: 0;
  transition:
    width 0.25s ease,
    margin-right 0.25s ease,
    opacity 0.25s ease;
}

.sticky-nav .sticky-nav-button.w--current,
.sticky-nav .sticky-nav-button.active {
  color: var(--black, #000);
}

.sticky-nav .sticky-nav-button.w--current::before,
.sticky-nav .sticky-nav-button.active::before {
  width: 11px;
  margin-right: 6px;
  opacity: 1;
}

.sticky-nav .sticky-nav-button:hover:not(.w--current):not(.active) {
  color: #656769;
}

.sticky-nav .sticky-nav-button.w--current:hover,
.sticky-nav .sticky-nav-button.active:hover {
  color: var(--black, #000);
}

@media (min-width: 992px) {
  #this-years-attendees .sticky-nav,
  .this-years-attendees .sticky-nav {
    top: 50vh;
    transform: translateY(-50%);
  }
}

/* ------------------------------------------------------------------ *
 * Where to buy — filter subnav
 * ------------------------------------------------------------------ */

.where-to-buy .sticky-nav-button {
  color: var(--grey, #656769);
  transition:
    opacity 1s ease,
    color 0.25s ease;
}

.where-to-buy .sticky-nav-button.w--current,
.where-to-buy .sticky-nav-button.active {
  color: var(--black, #000);
}

.where-to-buy-copy p {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.where-to-buy-copy p:last-child {
  margin-bottom: 0;
}

.where-to-buy-copy p.is-filtered-out {
  display: none;
}

.where-to-buy-copy a.buy-location-link {
  color: inherit;
  --link-draw-offset: 2px;
}

.where-to-buy-copy a.buy-location-link:hover {
  color: var(--black, #000);
}

/* ------------------------------------------------------------------ *
 * Cheesemaker list — animal filters
 * ------------------------------------------------------------------ */

.cheesemaker-list .filters .animal-filter {
  background-color: #fff;
  cursor: pointer;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease;
}

.cheesemaker-list .filters .animal-filter.is-active {
  color: var(--black, #000);
  opacity: 1;
  transform: none;
}

.cheesemaker-list .filters .animal-filter.cow.is-active {
  background-color: var(--cow, #e74b23);
  border-color: var(--cow, #e74b23);
}

.cheesemaker-list .filters .animal-filter.sheep.is-active {
  background-color: var(--sheep, #fde86d);
  border-color: var(--sheep, #fde86d);
}

.cheesemaker-list .filters .animal-filter.goat.is-active {
  background-color: var(--goat, #46ff90);
  border-color: var(--goat, #46ff90);
}

.cheesemaker-list .filters .animal-filter.buffalo.is-active {
  background-color: var(--water-buffalo, #46daff);
  border-color: var(--water-buffalo, #46daff);
}

/* Hover dimming only on real pointers — touch sticky-hover looked selected. */
@media (hover: hover) and (pointer: fine) {
  .cheesemaker-list .filters:has(.animal-filter:hover) .animal-filter:not(:hover):not(.is-active) {
    opacity: 0.6;
  }
}

/* Mobile: sticky :hover/:focus must not reuse the active (filled) look. */
@media (max-width: 991px) {
  .cheesemaker-list .filters .animal-filter {
    -webkit-tap-highlight-color: transparent;
  }

  .cheesemaker-list .filters .animal-filter:not(.is-active):is(:hover, :focus, :focus-visible, :active) {
    background-color: #fff !important;
    background-image: none !important;
    border-color: currentColor !important;
    color: inherit !important;
    transform: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
  }

  .cheesemaker-list .filters .animal-filter.is-active:is(:hover, :focus, :focus-visible, :active) {
    transform: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
  }
}

.cheesemaker-list .cheesmaker.is-filtered-out,
.cheesemaker-list .cheesemaker.is-filtered-out {
  display: none;
}

@media (max-width: 991px) {
  .cheesemaker-link {
    background: none !important;
  }
}

/* ------------------------------------------------------------------ *
 * Cheesemaker imagery
 * ------------------------------------------------------------------ */

.cheesemaker-imagery.is-expanded {
  width: var(--viewport-client-width, 100vw);
  max-width: none;
  margin-left: -25px;
  margin-right: 0;
}

#this-years-attendees .cheesemaker-imagery.is-expanded {
  width: calc(var(--attendee-imagery-width, 100%) + 25px);
  max-width: none;
  margin-left: 0;
}

@media (max-width: 991px) {
  #this-years-attendees .cheesemaker-imagery.is-expanded {
    width: calc(var(--attendee-imagery-width, 100%) + 20px);
    margin-left: -20px;
  }
}

/* Open/close + prev/next controls — hidden until a section is enlarged. */
.cheesemaker-list .open-navigation {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.5s ease,
    visibility 0.5s ease;
}

.cheesemaker-list .open-navigation.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.cheesemaker-list .open-navigation,
.cheesemaker-list .open-navigation a,
.cheesemaker-list .open-navigation .w-button {
  font-size: clamp(13px, 0.8vw, 16px);
  transform: scale(0.95);
}

.cheesemaker-list .open-navigation [actio="prev cheesemaker"][aria-disabled="true"],
.cheesemaker-list .open-navigation [actio="next cheesemaer"][aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

/* Keep prev/next visible when the track fits, but dim the unavailable group. */
.cheesemaker-list .open-navigation:not(.has-imagery-overflow) [actio="prev cheesemaker"],
.cheesemaker-list .open-navigation:not(.has-imagery-overflow) [actio="next cheesemaer"],
.cheesemaker-list .open-navigation:not(.has-imagery-overflow) .open-nav-pipe {
  opacity: 0.5;
  pointer-events: none;
}

/* Additional cheese images — simple drag track when enlarged.
   Featured image is moved into the track as the first slide.
   Keep Webflow's `.cheesemaker-image-wrapper.large` widths; only force a
   single horizontal row so the track can overflow and be dragged. */
.cheese-imagery-wrapper.large {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  padding: 4px 0;
}

.cheese-imagery-wrapper.large:active {
  cursor: grabbing;
}

.cheese-imagery-wrapper.large .additional-cheese-images {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  max-width: none;
  /* End gap via ::after — padding-right is unreliable on transformed flex tracks. */
  padding-left: 25px;
  padding-right: 0;
  padding-bottom: 4px;
  box-sizing: content-box;
  will-change: transform;
}

#this-years-attendees
  .cheese-imagery-wrapper.large
  .additional-cheese-images {
  padding-left: 0;
}

.cheese-imagery-wrapper.large .additional-cheese-images::after {
  content: "";
  flex: 0 0 25px;
  width: 25px;
  height: 1px;
  pointer-events: none;
}

.cheese-imagery-wrapper.large .cheesemaker-image-wrapper,
.cheese-imagery-wrapper.large .cheesemaker-featured-image.is-in-track {
  flex-shrink: 0;
  cursor: grab;
  width: 400px;
  height: 440px;
}

.cheese-imagery-wrapper.large .cheesemaker-image {
  -webkit-user-drag: none;
  user-select: none;
  /* Let pointer events hit the wrapper so drag isn't stolen by native image drag. */
  pointer-events: none;
  width: 400px;
  height: 440px;
  object-fit: cover;
}

.cheese-imagery-wrapper.large .cheesemaker-featured-image.is-in-track {
  -webkit-user-drag: none;
  user-select: none;
  width: 400px;
  height: 440px;
  object-fit: cover;
}

.cheesemaker-image-wrapper.large,
.cheesemaker-featured-image.large {
  width: 400px;
  height: 440px;
}

.cheesemaker-image-wrapper.large .cheesemaker-image,
.cheesemaker-featured-image.large {
  width: 400px;
  height: 440px;
  object-fit: cover;
}

/* Mobile (≤991px): always-on finite drag slider — no enlarge / open-nav. */
@media (max-width: 991px) {
  .cheesemaker-imagery {
    position: relative;
    left: auto;
    z-index: 1;
    width: var(--viewport-client-width, 100vw);
    max-width: none;
    margin-left: calc(-1 * var(--cheesemaker-imagery-offset, 20px));
    margin-right: 0;
    min-width: 0;
    box-sizing: border-box;
    overflow: visible;
    transform: none;
  }

  .cheesemaker:first-child,
  .cheesmaker:first-child,
  .cheesemaker.is-first-visible,
  .cheesmaker.is-first-visible {
    border-top: 0;
  }

  .cheesemaker-list .open-navigation {
    display: none !important;
  }

  .cheese-imagery-wrapper.is-mobile-slider {
    position: relative;
    overflow: visible;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    padding: 4px 0;
  }

  .cheese-imagery-wrapper.is-mobile-slider:active {
    cursor: grabbing;
  }

  .cheese-imagery-wrapper.is-mobile-slider .cheese-imagery-mobile-nav {
    position: absolute;
    top: -12px;
    right: 20px;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 7px;
    margin-top: 0;
    padding-right: 0;
    transform: translateY(-100%);
  }

  .cheese-imagery-wrapper.is-mobile-slider .cheese-imagery-mobile-nav.is-disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  .cheese-imagery-wrapper.is-mobile-slider
    .cheese-imagery-mobile-nav.is-disabled
    .event-slider-arrow {
    opacity: 1;
  }

  .cheese-imagery-wrapper.is-mobile-slider .cheese-imagery-mobile-viewport {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .cheese-imagery-wrapper.is-mobile-slider .additional-cheese-images {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    max-width: none;
    padding: 0 0 4px;
    box-sizing: content-box;
    will-change: transform;
  }

  .cheese-imagery-wrapper.is-mobile-slider .additional-cheese-images::after {
    content: "";
    flex: 0 0 20px;
    width: 20px;
    height: 1px;
    pointer-events: none;
  }

  .cheese-imagery-wrapper.is-mobile-slider .cheesemaker-image-wrapper,
  .cheese-imagery-wrapper.is-mobile-slider .cheesemaker-featured-image.is-in-track {
    flex-shrink: 0;
    cursor: grab;
    width: min(280px, 75vw);
    height: auto;
    aspect-ratio: 400 / 440;
  }

  .cheese-imagery-wrapper.is-mobile-slider .cheesemaker-image,
  .cheese-imagery-wrapper.is-mobile-slider .cheesemaker-featured-image.is-in-track {
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ------------------------------------------------------------------ *
 * Animal slider
 * ------------------------------------------------------------------ */

/* Don't force position on .animal-slider — Webflow already positions
   .animal-deets absolutely relative to this (or a parent). */

/* Image viewport — JS wraps the stacked .image elements into this track. */
.animal-slider-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  touch-action: pan-y;
  cursor: grab;
}

.animal-slider-viewport.is-dragging {
  cursor: grabbing;
}

.animal-slider-track {
  display: flex;
  height: 100%;
  transition: transform 0.45s ease;
  will-change: transform;
}

.animal-slider-track .image {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  flex: 0 0 100%;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  cursor: pointer;
  -webkit-user-drag: none;
  user-select: none;
  transform: scale(1);
  transition: transform 0.4s ease;
}

.animal-slider-viewport:hover .animal-slider-track .image.is-active {
  transform: scale(1.03);
}

/* Keep the animal label above the images; don't override Webflow positioning. */
.animal-slider .animal-deets {
  z-index: 2;
  pointer-events: none;
}

/* Prev / next — animal-specific chevrons (other sliders use Prev/Next-Arrow). */
.animal-slider-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-height: 26px;
  max-height: 26px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  box-sizing: border-box;
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
  -webkit-appearance: none;
  appearance: none;
}

.animal-slider-nav::before {
  content: "";
  display: block;
  width: 13px;
  height: 23px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: opacity 0.25s ease;
}

.animal-slider-prev {
  left: 12px;
  transform: translate(-14px, -50%);
}

.animal-slider-prev::before {
  background-image: url("https://maine-cheese.vercel.app/animal-slider-arrow-prev.svg");
}

.animal-slider-next {
  right: 12px;
  transform: translate(14px, -50%);
}

.animal-slider-next::before {
  background-image: url("https://maine-cheese.vercel.app/animal-slider-arrow-next.svg");
}

.animal-slider:hover .animal-slider-nav,
.animal-slider:focus-within .animal-slider-nav {
  opacity: 1;
  pointer-events: auto;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.animal-slider:hover .animal-slider-prev,
.animal-slider:focus-within .animal-slider-prev {
  transform: translate(0, -50%);
}

.animal-slider:hover .animal-slider-next,
.animal-slider:focus-within .animal-slider-next {
  transform: translate(0, -50%);
}

.animal-slider-prev:active:not(:disabled):not([aria-disabled="true"]),
.animal-slider-prev.is-nudging:not(:disabled):not([aria-disabled="true"]) {
  transform: translate(-4px, -50%);
}

.animal-slider-next:active:not(:disabled):not([aria-disabled="true"]),
.animal-slider-next.is-nudging:not(:disabled):not([aria-disabled="true"]) {
  transform: translate(4px, -50%);
}

@media (hover: hover) and (pointer: fine) {
  .animal-slider:hover .animal-slider-prev:hover,
  .animal-slider:focus-within .animal-slider-prev:hover {
    transform: translate(-4px, -50%);
  }

  .animal-slider:hover .animal-slider-next:hover,
  .animal-slider:focus-within .animal-slider-next:hover {
    transform: translate(4px, -50%);
  }

  .animal-slider:hover .animal-slider-nav:hover::before,
  .animal-slider:focus-within .animal-slider-nav:hover::before {
    opacity: 1;
  }
}

.animal-slider-nav:disabled,
.animal-slider-nav[aria-disabled="true"] {
  opacity: 0.2;
  cursor: default;
  pointer-events: none;
}

.animal-slider-nav:disabled::before,
.animal-slider-nav[aria-disabled="true"]::before {
  opacity: 1;
}

@media (hover: none) {
  .animal-slider-nav {
    opacity: 1;
    pointer-events: auto;
  }

  .animal-slider-prev,
  .animal-slider-next {
    transform: translate(0, -50%);
  }
}

/* ------------------------------------------------------------------ *
 * Animal lightbox
 * ------------------------------------------------------------------ */

.animal-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  background: rgba(104, 85, 85, 0);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    -webkit-backdrop-filter 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.animal-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  background: rgba(104, 85, 85, 0.5);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.animal-lightbox-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: min(92vw, 1400px);
  max-height: 100%;
  opacity: 0;
  transform: translateY(28px) scale(0.98);
  transition:
    opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.animal-lightbox.is-open .animal-lightbox-inner {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.08s;
}

.animal-lightbox-img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(92vw, 1400px);
  /* Big, but shy of full-bleed so it still reads as a lightbox. */
  max-height: 88vh;
  object-fit: contain;
  border-radius: 20px;
}

@media (min-width: 992px) {
  .animal-lightbox-img {
    cursor: pointer;
  }
}

.animal-lightbox-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.animal-lightbox.is-open .animal-lightbox-controls {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.18s;
}

/* Lightbox nav is dots-only (tablet/desktop); arrows removed. */
.animal-lightbox-arrows {
  display: none !important;
}

.animal-lightbox-dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: min(90vw, 420px);
}

.animal-lightbox-dots[hidden],
.animal-lightbox-arrows[hidden] {
  display: none !important;
}

.animal-lightbox-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    background-color 0.25s ease,
    transform 0.25s ease;
}

.animal-lightbox-dot:hover {
  background: rgba(255, 255, 255, 0.7);
}

.animal-lightbox-dot.is-active {
  background: #fff;
  transform: scale(1.2);
}

/* Match slider arrows (26px wide), white for lightbox. */
.animal-lightbox-nav {
  position: relative;
  display: block;
  width: 26px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  opacity: 0.5;
  cursor: pointer;
  line-height: 0;
  -webkit-appearance: none;
  appearance: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.animal-lightbox-nav svg {
  width: 26px;
  height: auto;
  display: block;
}

/* Larger hit area without affecting the 14px visual gap. */
.animal-lightbox-nav::after {
  content: "";
  position: absolute;
  inset: -12px;
}

.animal-lightbox.is-open .animal-lightbox-prev:active,
.animal-lightbox.is-open .animal-lightbox-prev.is-nudging {
  opacity: 1;
  transform: translateX(-4px);
}

.animal-lightbox.is-open .animal-lightbox-next:active,
.animal-lightbox.is-open .animal-lightbox-next.is-nudging {
  opacity: 1;
  transform: translateX(4px);
}

@media (hover: hover) and (pointer: fine) {
  .animal-lightbox.is-open .animal-lightbox-prev:hover {
    opacity: 1;
    transform: translateX(-4px);
  }

  .animal-lightbox.is-open .animal-lightbox-next:hover {
    opacity: 1;
    transform: translateX(4px);
  }
}

.animal-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--white, #fff);
  color: var(--black, #000);
  line-height: 0;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.25s ease;
  -webkit-appearance: none;
  appearance: none;
}

.animal-lightbox-close svg {
  display: block;
  flex-shrink: 0;
}

.animal-lightbox.is-open .animal-lightbox-close {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.14s;
}

.animal-lightbox-close:hover,
.animal-lightbox.is-open .animal-lightbox-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.5);
}

body.animal-lightbox-open {
  overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * Join the Guild popup (reuses animal-lightbox overlay + close)
 * ------------------------------------------------------------------ */

.join-lightbox-inner {
  max-width: min(92vw, 560px);
  width: 100%;
  max-height: calc(100vh - 96px);
  overflow: auto;
  align-items: stretch;
}

.schedule-popup {
  display: none;
  pointer-events: none;
}

.schedule-lightbox {
  padding: 0;
  overflow: hidden;
}

.schedule-lightbox.is-open {
  overflow: hidden;
}

.schedule-lightbox-scroll {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 48px 24px;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

.schedule-lightbox-scroll::-webkit-scrollbar {
  width: 6px;
}

.schedule-lightbox-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.schedule-lightbox-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 999px;
}

.schedule-lightbox .animal-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
}

.schedule-lightbox-inner {
  width: min(90%, 1079px);
  max-width: min(90%, 1079px);
  max-height: none;
  overflow: visible;
  flex-shrink: 0;
  align-items: stretch;
  background: #fff;
  border-radius: 20px;
}

.join-lightbox.is-open .join-popup,
.schedule-lightbox.is-open .schedule-popup {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  max-width: none;
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  inset: auto;
  padding-top: 30px;
  box-sizing: border-box;
}

@media (max-width: 991px) {
  .schedule-lightbox-scroll {
    height: 100dvh;
    min-height: 0;
    padding: 52px 12px 16px;
    align-items: flex-start;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scroll-padding-top: 52px;
    scroll-padding-bottom: 16px;
  }

  .schedule-lightbox .animal-lightbox-close {
    top: 12px;
    right: 12px;
  }

  .schedule-lightbox-inner {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: none;
    height: auto;
    overflow: visible;
    border-radius: 12px;
    box-sizing: border-box;
  }

  .schedule-lightbox.is-open .schedule-popup {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 16px 0 0;
    box-sizing: border-box;
  }

  .schedule-lightbox .schedule,
  .schedule-lightbox .schedule-popup > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .schedule-lightbox .schedule ul {
    margin: 24px 0;
  }

  .schedule-lightbox .schedule ul:last-child {
    margin-bottom: 0;
  }

  .schedule-lightbox img,
  .schedule-lightbox svg,
  .schedule-lightbox table {
    max-width: 100%;
    height: auto;
  }

  .schedule-lightbox .schedule h3,
  .schedule-lightbox .schedule-section-title {
    font-size: 14px;
  }

  .schedule-lightbox .schedule-section-sponsor {
    font-size: 12px;
  }

  .schedule-lightbox .schedule ul li {
    padding: 10px 20px;
    box-sizing: border-box;
  }

  .schedule-lightbox .schedule-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }

  .schedule-lightbox .schedule-time,
  .schedule-lightbox .schedule-detail {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    box-sizing: border-box;
  }

  .schedule-lightbox .schedule-time {
    font-size: 12px;
    line-height: 1.3;
    font-weight: 400;
  }

  .schedule-lightbox .schedule-detail {
    font-size: 14px;
    line-height: 1.35;
    font-weight: 400;
  }
}

.schedule h3 {
  max-width: none;
}

.schedule-section-title {
  letter-spacing: 0.05em;
}

.schedule-section-sponsor {
  letter-spacing: normal;
}

.schedule ul {
  margin: 60px 0;
}

.schedule ul:last-child {
  margin-bottom: 0;
}

.schedule ul li:nth-child(odd) {
  background-color: #fafaf6;
}

.join-popup p {
  max-width: 32ch;
}

.join-lightbox .join-popup > h2,
.join-lightbox .join-popup > h2.first,
.join-lightbox .join-popup > p,
.join-lightbox .join-popup > .paragraph-4 {
  max-width: none;
  text-align: center;
}

.join-popup .button,
.join-lightbox .join-popup .button {
  font-family: "Alatsi", system-ui, sans-serif;
}

.join-popup .button strong {
  font-family: inherit;
  font-weight: 400;
}

/* ------------------------------------------------------------------ *
 * Accordion — h5 question + hidden p answer
 * ------------------------------------------------------------------ */

.accordion h5.accordion-question,
.accordion .accordion-question,
.maine-cheese-awards-accordion h3.accordion-question,
.maine-cheese-awards-accordion .accordion-question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1em;
  cursor: pointer;
}

.maine-cheese-awards-accordion h3.accordion-question {
  margin: 0;
  padding: 20px 0;
  border-top: 1px solid var(--grey-50, #c5cacf);
  box-sizing: border-box;
}

.maine-cheese-awards-accordion h3 {
  border-top: 1px solid var(--grey-50, #c5cacf);
}

.maine-cheese-awards-accordion li {
  border-color: rgba(197, 202, 207, 0.4);
}

/* Keep +/- at FAQ icon size — don't inherit the h3 scale. */
.maine-cheese-awards-accordion .accordion-question::after {
  font-size: 16px;
  line-height: 1;
  font-weight: 400;
  transform: translateY(5px);
}

.maine-cheese-awards-accordion .accordion-answer {
  margin-top: 0;
  margin-bottom: 0;
}

@media (max-width: 991px) {
  .maine-cheese-awards-accordion .awards-winner-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
  }

  .maine-cheese-awards-accordion .awards-place-label,
  .maine-cheese-awards-accordion .awards-winner-info {
    min-width: 0;
  }

  .maine-cheese-awards-accordion .awards-winner-info {
    display: block;
    overflow-wrap: anywhere;
  }
}

.accordion-question::after {
  content: "+";
  flex-shrink: 0;
  margin-left: auto;
  font: inherit;
  line-height: inherit;
  color: var(--black, #000);
  transition: color 0.25s ease;
}

.accordion-question:hover::after {
  color: #aeaeae;
}

.accordion-question.is-open::after {
  content: "−";
}

.accordion-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.4s ease,
    opacity 0.35s ease;
}

.accordion-answer-wrap.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  padding-bottom: 0;
}

.accordion-answer-inner {
  overflow: hidden;
  min-height: 0;
}

.accordion-answer-inner .accordion-answer {
  transform: translateY(-8px);
  transition: transform 0.4s ease;
}

.accordion-answer-wrap.is-open .accordion-answer {
  transform: translateY(0);
}

.faq-accordion {
  border: 0;
  margin-top: 20px;
}

.faqs h3.first {
  margin-top: 12px;
}

.faq-accordion-item {
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding: 20px 0;
  border-top: 1px solid var(--grey-50, #c5cacf);
  box-sizing: border-box;
  cursor: pointer;
}

.faq-accordion-item:last-of-type {
  border-bottom: 1px solid var(--grey-50, #c5cacf);
}

.faq-accordion h4,
.faq-accordion .accordion-question {
  flex: 0 0 33%;
  width: 33%;
  max-width: 33%;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  cursor: pointer;
}

.faq-accordion h4.accordion-question.is-open,
.faq-accordion .accordion-question.is-open {
  flex: 0 0 43%;
  width: 43%;
  max-width: 43%;
}

.faq-accordion .accordion-question::after {
  content: none;
  display: none;
}

.faq-accordion .accordion-answer-wrap {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

/* Closed: don't let the answer column add height past the question. */
.faq-accordion .accordion-answer-wrap:not(.is-open) {
  height: 0;
  max-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.faq-accordion .accordion-answer-wrap.is-open {
  height: auto;
  max-height: none;
  padding-right: 40px;
  padding-bottom: 0;
  box-sizing: border-box;
}

.faq-accordion .accordion-answer {
  line-height: 1.4em;
}

.faq-accordion .accordion-answer-inner .accordion-answer {
  margin-bottom: 5px;
}

.faq-accordion .accordion-answer-inner .accordion-answer:last-child {
  margin-bottom: 0;
}

/* Pricing lines: price column stays fixed; copy wraps beside it. */
.faq-accordion .accordion-answer-inner:has(> .accordion-price-line) {
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr);
  column-gap: 0.4em;
  row-gap: 5px;
}

.faq-accordion .accordion-answer-inner > .accordion-price-line {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.faq-accordion .accordion-price {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.faq-accordion .accordion-price-sep {
  white-space: nowrap;
}

.faq-accordion .accordion-price-desc {
  min-width: 0;
}

/* Fallback when subgrid isn't available — still no wrap under price. */
@supports not (grid-template-columns: subgrid) {
  .faq-accordion .accordion-answer-inner:has(> .accordion-price-line) {
    display: block;
  }

  .faq-accordion .accordion-answer-inner > .accordion-price-line {
    display: flex;
    align-items: flex-start;
    gap: 0.4em;
    grid-column: auto;
  }

  .faq-accordion .accordion-price,
  .faq-accordion .accordion-price-sep {
    flex-shrink: 0;
  }

  .faq-accordion .accordion-price-desc {
    flex: 1 1 auto;
  }
}

.faq-accordion .accordion-icon {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  align-self: flex-start;
  transform: translateY(3px);
  color: var(--black, #000);
  transition: color 0.25s ease;
}

.faq-accordion-item:hover .accordion-icon {
  color: #aeaeae;
}

@media (max-width: 991px) {
  .accordion-question {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .accordion-question:hover::after,
  .faq-accordion-item:hover .accordion-icon {
    color: var(--black, #000);
  }

  .faq-accordion-item {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-right: 28px;
  }

  .faq-accordion h4,
  .faq-accordion .accordion-question {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  .faq-accordion .accordion-icon {
    position: absolute;
    top: 20px;
    right: 0;
    margin-left: 0;
  }

  .faq-accordion .accordion-answer-wrap {
    flex: none;
    width: 100%;
  }

  .faq-accordion .accordion-answer-wrap.is-open {
    padding-right: 0;
    margin-top: 10px;
  }
}

.winner-section-heading {
  display: none;
}

/* ------------------------------------------------------------------ *
 * Milk type bio — "Goat Milk, Cow Milk"
 * ------------------------------------------------------------------ */

.milk-type-bio-wrapper .w-dyn-item .cheesemaker-mini-bio-text::after {
  content: " Milk, ";
}

.milk-type-bio-wrapper .w-dyn-item:last-child .cheesemaker-mini-bio-text::after {
  content: " Milk";
}

/* ------------------------------------------------------------------ *
 * Cheesemaker copy — smaller black bullets
 * ------------------------------------------------------------------ */

.cheesemaker-copy.w-richtext ul li::marker,
.cheesemaker-copy ul li::marker {
  color: #000;
  font-size: 0.65em;
}

.cheesemaker-copy ul:last-child {
  margin-bottom: 0;
}

.cheesemaker-copy ul:last-child li:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ *
 * Styled ordered list — 01 02 03 markers
 * ------------------------------------------------------------------ */

.styled-list ol {
  list-style: none;
  counter-reset: styled-item;
}

.styled-list li {
  display: flex;
  align-items: flex-start;
  counter-increment: styled-item;
}

.styled-list li::before {
  content: counter(styled-item, decimal-leading-zero);
  flex-shrink: 0;
  min-width: 2ch;
  margin-right: 1.25em;
  font: inherit;
  font-variant-numeric: tabular-nums;
  line-height: inherit;
}

/* ------------------------------------------------------------------ *
 * Event cards
 * ------------------------------------------------------------------ */

/* Purchase button: always visible on touch/mobile. On fine pointers it
   starts hidden and fades in upward on .event hover.
   Transform-only animation so Webflow's absolute positioning is preserved. */
.event .purchase-button {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
  .event .purchase-button {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
  }

  .event:hover .purchase-button,
  .event:focus-within .purchase-button {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* Top bar tint when the event link (image/meta area) is hovered. */
.event .event-top-bar {
  transition: background-color 0.25s ease;
}

.event .event-link:hover .event-top-bar {
  background-color: #c5cacf; /* Grey 50 */
}

/* Host line: Webflow splits label / name / affiliation into separate
   nodes, but they should read as one wrapping inline sentence. */
.event-host {
  display: block;
  flex-wrap: unset;
  align-items: unset;
  gap: 0;
}

.event-host > .event-host-name,
.event-host .event-host-name {
  display: inline;
  margin: 0;
  white-space: normal;
}

.event-host > .event-host-affiliation-link {
  --link-draw-offset: 0.1em;
  display: inline !important;
  margin: 0;
  white-space: normal;
  text-decoration: none !important;
  background: none !important;
}

/* Webflow wraps the label in <a><h3 class="event-host-name"> — underline the
   inner name so it aligns with the text, not the w-inline-block anchor box. */
.event-host-affiliation-link .event-host-name {
  display: inline;
  margin: 0;
  white-space: normal;
  text-decoration: none !important;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 calc(100% - var(--link-draw-offset, 0.1em));
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Default affiliation link — always underlined, replays draw-in on hover */
.event-host-affiliation-link:not(.link-draw--out):not([data-link-draw-out])
  .event-host-name {
  background-size: 100% var(--link-draw-thickness, 1px);
}

.event-host-affiliation-link:not(.link-draw--out):not([data-link-draw-out]):hover
  .event-host-name,
.event-host-affiliation-link:not(.link-draw--out):not([data-link-draw-out]):focus-visible
  .event-host-name {
  animation: link-draw-in var(--link-draw-duration, 0.3s) ease;
}

/* Affiliation link with link-draw--out — draws out on hover */
.event-host-affiliation-link.link-draw--out,
.event-host-affiliation-link[data-link-draw-out] {
  background: none !important;
}

.event-host-affiliation-link.link-draw--out .event-host-name,
.event-host-affiliation-link[data-link-draw-out] .event-host-name {
  background-size: 100% var(--link-draw-thickness, 1px);
  transition: background-size var(--link-draw-duration, 0.3s) ease;
}

.event-host-affiliation-link.link-draw--out:hover .event-host-name,
.event-host-affiliation-link.link-draw--out:focus-visible .event-host-name,
.event-host-affiliation-link[data-link-draw-out]:hover .event-host-name,
.event-host-affiliation-link[data-link-draw-out]:focus-visible .event-host-name {
  background-size: 0% var(--link-draw-thickness, 1px);
}

/* Restore spaces lost when tags sit flush in the CMS markup. */
.event-host > * + *::before {
  content: " ";
}

/* ------------------------------------------------------------------ *
 * Event slider — draggable track + outside prev/next
 * ------------------------------------------------------------------ */

.event-slider,
.card-slider-wrapper {
  display: flex;
  min-width: 0;
  position: relative;
}

.event-slider {
  flex-direction: column;
}

.card-slider-wrapper {
  flex-direction: row;
}

.event-slider-viewport {
  overflow: hidden;
  width: 100%;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.event-slider-viewport.is-dragging {
  cursor: grabbing;
}

.event-slider-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: max-content;
  max-width: none;
  padding-right: 30px;
  box-sizing: content-box;
  will-change: transform;
}

@media (max-width: 991px) {
  /* Cards carry their own spacing on mobile — drop track gap only. */
  .event-slider .event-slider-track,
  .card-slider-wrapper .event-slider-track {
    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
  }
}

@media (max-width: 700px) {
  .event-slider-track {
    padding-right: 20px;
  }
}

.event-slider-track .event,
.card-slider-wrapper .event-slider-track > * {
  flex-shrink: 0;
}

.event-slider .background-image,
.event-slider .event-link {
  -webkit-user-drag: none;
  user-select: none;
}

.event-slider-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  padding-right: 30px;
}

.teams-slider-nav {
  justify-content: center;
  padding-right: 0;
  margin-top: 16px;
}

.event-slider-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-height: 26px;
  max-height: 26px;
  line-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.event-slider-arrow::before {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  background-color: #656769; /* Grey — clear active/available */
  transition: background-color 0.25s ease;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.event-slider-prev::before {
  -webkit-mask-image: url("https://maine-cheese.vercel.app/Prev-Arrow.svg");
  mask-image: url("https://maine-cheese.vercel.app/Prev-Arrow.svg");
}

.event-slider-next::before {
  -webkit-mask-image: url("https://maine-cheese.vercel.app/Next-Arrow.svg");
  mask-image: url("https://maine-cheese.vercel.app/Next-Arrow.svg");
}

/* Press nudge on every tap; hover only on fine pointers (avoids sticky mobile hover). */
.event-slider-prev:active:not(:disabled):not([aria-disabled="true"]),
.event-slider-prev.is-nudging:not(:disabled):not([aria-disabled="true"]) {
  transform: translateX(-4px);
}

.event-slider-next:active:not(:disabled):not([aria-disabled="true"]),
.event-slider-next.is-nudging:not(:disabled):not([aria-disabled="true"]) {
  transform: translateX(4px);
}

.event-slider-arrow:active:not(:disabled):not([aria-disabled="true"])::before,
.event-slider-arrow.is-nudging:not(:disabled):not([aria-disabled="true"])::before {
  background-color: var(--black, #000);
}

@media (hover: hover) and (pointer: fine) {
  .event-slider-prev:hover:not(:disabled):not([aria-disabled="true"]) {
    transform: translateX(-4px);
  }

  .event-slider-next:hover:not(:disabled):not([aria-disabled="true"]) {
    transform: translateX(4px);
  }

  .event-slider-arrow:hover:not(:disabled):not([aria-disabled="true"])::before {
    background-color: var(--black, #000);
  }
}

.event-slider-arrow:disabled,
.event-slider-arrow[aria-disabled="true"] {
  opacity: 0.2;
  cursor: default;
  transform: none;
  pointer-events: none;
}

.event-slider-arrow:disabled::before,
.event-slider-arrow[aria-disabled="true"]::before {
  background-color: #c5cacf;
}

/* Mobile: shared prev/next arrows at 24×24. */
@media (max-width: 991px) {
  .event-slider-arrow {
    width: 24px;
    height: 24px;
    min-height: 24px;
    max-height: 24px;
  }

  .event-slider-arrow::before {
    width: 24px;
    height: 24px;
  }

  .animal-slider-nav {
    width: 24px;
    height: 24px;
    min-height: 24px;
    max-height: 24px;
  }

  .animal-slider-nav::before {
    width: 11px;
  }

  .cheesmaker-navigation .next-prev .prev,
  .cheesmaker-navigation .next-prev .next,
  .cheesemaker-navigation .next-prev .prev,
  .cheesemaker-navigation .next-prev .next {
    width: 24px;
    height: 24px;
  }

  .cheesmaker-navigation .next-prev .arrow,
  .cheesemaker-navigation .next-prev .arrow {
    width: 24px;
    height: 24px;
  }
}

/* ------------------------------------------------------------------ *
 * Supporting events — bounded slider (reuses event-slider chrome)
 * ------------------------------------------------------------------ */

.event-type-filters {
  position: relative;
}

.event-type-filters.supporting-events-filters-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.event-type-filters.supporting-events-filters-row--slider {
  display: block;
}

.event-type-filters.supporting-events-filters-row--slider .supporting-events-filters-viewport {
  width: 100%;
  min-width: 0;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.event-type-filters.supporting-events-filters-row--slider .supporting-events-filters-viewport:active {
  cursor: grabbing;
}

.event-type-filters.supporting-events-filters-row--slider .supporting-events-filters-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  max-width: none;
  gap: 10px;
  padding-right: 20px;
  box-sizing: content-box;
  will-change: transform;
}

.event-type-filters.supporting-events-filters-row--slider .supporting-events-filters-track > * {
  flex-shrink: 0;
}

.supporting-events.supporting-events-has-nav {
  position: relative;
}

.supporting-events-nav {
  position: absolute;
  top: 0;
  right: 30px;
  z-index: 3;
  order: 0;
  align-self: auto;
  margin: 0;
  padding-right: 0;
}

.event-type-filters .event-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Active filter arrow — same expand-in pattern as sticky nav. */
.event-type-filters .event-filter::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 0;
  height: 10px;
  margin-right: 0;
  overflow: hidden;
  background: url("https://maine-cheese.vercel.app/arrow.svg") no-repeat
    center / 11px 10px;
  opacity: 0;
  transition:
    width 0.25s ease,
    margin-right 0.25s ease,
    opacity 0.25s ease;
}

.event-type-filters .event-filter.active::before {
  width: 11px;
  margin-right: 6px;
  opacity: 1;
}

.event-type-filters .event-filter[hover-desc]::after {
  content: attr(hover-desc);
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 6px;
  padding: 2px 4px;
  background: #ececd7;
  color: #000;
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(12px, 0.65vw, 14px);
  line-height: 1.2;
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 2;
}

.event-type-filters a.event-filter.w-button[hover-desc]::after {
  font-weight: 400;
}

.event-type-filters .event-filter[hover-desc]:hover::after,
.event-type-filters .event-filter[hover-desc]:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 991px) {
  .event-type-filters .event-filter[hover-desc]::after {
    display: none !important;
  }
}

.supporting-events {
  max-width: 100%;
  min-width: 0;
}

.supporting-events-list,
.supporting-events-slider,
.supporting-events .w-dyn-list {
  display: flex;
  flex-direction: column;
  width: calc(100% + 25px);
  max-width: calc(100% + 25px);
  min-width: 0;
  overflow: hidden;
}

.supporting-events-viewport.event-slider-viewport,
.supporting-events-viewport {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.supporting-events-viewport.is-dragging {
  cursor: grabbing;
}

.supporting-events-track.event-slider-track,
.supporting-events-track {
  /* Keep the wide track; clipping happens on the viewport above. */
  max-width: none;
}

.supporting-events-track .supporting-event-item {
  flex-shrink: 0;
}

.supporting-events-list .supporting-event-image,
.supporting-events-slider .supporting-event-image {
  -webkit-user-drag: none;
  user-select: none;
}

@media (max-width: 991px) {
  .supporting-events-list,
  .supporting-events-slider,
  .supporting-events .w-dyn-list {
    width: calc(100% + 40px);
    max-width: calc(100% + 40px);
  }

  .supporting-events-nav {
    display: none !important;
  }

  .supporting-events .event-type-filters .event-filter::before,
  .supporting-events .event-type-filters .event-filter.active::before {
    display: none !important;
    width: 0 !important;
    margin-right: 0 !important;
    opacity: 0 !important;
  }
}

/* ------------------------------------------------------------------ *
 * Teams slider — centered infinite carousel + outside prev/next
 * ------------------------------------------------------------------ */

.teams-slider {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.teams-slider-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.teams-slider-viewport.is-dragging {
  cursor: grabbing;
}

.teams-slider .teams-slider-track,
.teams-slider .human-wrapper.teams-slider-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  flex: 0 0 auto;
  width: max-content;
  max-width: none;
  min-width: max-content;
  overflow: visible;
  will-change: transform;
}

.human-wrapper {
  overflow: visible;
}

.teams-slider .human-container,
.teams-slider .teams-slider-slide {
  position: relative;
  flex: 0 0 auto;
  flex-shrink: 0;
  margin-top: 0;
  transform: scale(1);
  transform-origin: center center;
  transition:
    transform 0.45s ease,
    opacity 0.45s ease;
  will-change: transform;
}

.teams-slider .human-container.is-active {
  z-index: 2;
  margin: 0 var(--teams-active-gutter, 20px);
  transform: scale(var(--teams-slide-scale, 1.15));
}

@media screen and (min-width: 992px) {
  .teams-slider {
    --teams-slide-scale: 1.05;
  }
}

.teams-slider .human-container .human-meta {
  opacity: 0.5;
  transition: opacity 0.45s ease;
}

.teams-slider .human-container.is-active .human-meta {
  opacity: 1;
}

.teams-slider .human,
.teams-slider img {
  -webkit-user-drag: none;
  user-select: none;
  display: block;
  max-width: none;
}

@media screen and (max-width: 767px) {
  .teams-slider .human-container {
    width: 40vw;
  }
}

/* ------------------------------------------------------------------ *
 * Event detailer slider — centered infinite track
 * ------------------------------------------------------------------ */

.event-detailer-slider-wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.event-detailer-viewport {
  overflow: hidden;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  /* Reserve max slide height so active growth doesn't push content below. */
  min-height: calc(58vw * 3 / 5);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.event-detailer-viewport.is-dragging {
  cursor: grabbing;
}

.event-detailer-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  max-width: none;
  will-change: transform;
}

.event-detailer-track .event-detail-slide-item {
  flex-shrink: 0;
  transition: width 0.65s cubic-bezier(0.33, 1, 0.68, 1);
}

.event-detailer-slider-wrapper .event-detail-background,
.event-detailer-slider-wrapper img {
  -webkit-user-drag: none;
  user-select: none;
}

.event-detailer-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 58vw;
  max-width: 58vw;
  margin: 0 auto;
  box-sizing: border-box;
}

.event-detailer-nav-labels {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-y;
  cursor: grab;
}

.event-detailer-nav-labels::-webkit-scrollbar {
  display: none;
}

.event-detailer-nav-labels.is-dragging {
  cursor: grabbing;
}

.event-detailer-nav-btn {
  flex-shrink: 0;
  margin: 0;
  padding: 8px 20px;
  border: 1px solid #c5cacf;
  border-radius: 4px;
  background: #fff;
  color: #4a4a4a;
  font: inherit;
  font-size: 13.5px;
  line-height: 2em;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.event-detailer-nav-btn.is-active {
  background: #ececd7;
  border-color: #000;
  color: #2b2b2b;
}

.event-detailer-nav-arrows {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  margin-top: 0;
  padding-right: 0;
}

@media (max-width: 991px) {
  .event-detailer-nav {
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  .event-detailer-nav.is-overflowing {
    width: calc(100% + 40px);
    max-width: none;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .event-detailer-nav.is-overflowing
    .event-detailer-nav-btn:first-child {
    margin-left: 20px;
  }

  .event-detailer-nav.is-overflowing
    .event-detailer-nav-btn:last-child {
    margin-right: 20px;
  }

  .event-detailer-nav-arrows {
    display: none !important;
  }

  .event-detailer-nav-btn {
    font-size: 10.64px;
    padding: 5px 12px;
  }
}

/* ------------------------------------------------------------------ *
 * Partners slider — draggable track + outside prev/next (no loop)
 * ------------------------------------------------------------------ */

.partners-slider,
.w-dyn-list.partners-slider {
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
}

.partners-slider-viewport {
  overflow: hidden;
  width: 100%;
  height: 100%;
  padding: 4px 0;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.partners-slider-viewport.is-dragging {
  cursor: grabbing;
}

.partners-slider-track,
.partners-list.partners-slider-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: max-content;
  max-width: none;
  padding-right: 30px;
  box-sizing: content-box;
  will-change: transform;
}

.partners-slider-track .partner-item {
  flex-shrink: 0;
}

.partners-slider-track .partners-title-card {
  display: flex;
  align-items: stretch;
}

.blue-block {
  display: flex;
  width: auto;
}

.partners-slider-track .partners-title-card .blue-block {
  height: 100%;
  box-sizing: border-box;
}

.partners-slider .partner-card {
  -webkit-user-drag: none;
  user-select: none;
}

a.partner-card h3.partner {
  border-bottom: 3px solid transparent;
  transition: border-color 0.25s ease;
}

a.partner-card:hover h3.partner {
  border-bottom-color: var(--yellow, #f3c11c);
}

.event-slider-nav.partners-slider-nav {
  position: absolute;
  right: 30px;
  bottom: 0;
  margin-top: 0;
  padding-right: 0;
  z-index: 2;
}

.card-slider-wrapper:has(.partners-slider-nav),
.partners-slider:has(.partners-slider-nav) {
  padding-bottom: 56px;
}

@media (max-width: 991px) {
  .partners-list-wrapper.w-dyn-list.partners-slider {
    width: calc(100% + 40px);
    max-width: none;
    margin-left: -20px;
    margin-right: -20px;
  }

  .partners-list-wrapper.w-dyn-list.partners-slider
    .partners-slider-track
    > *:first-child {
    margin-left: 20px;
  }
}

@media (min-width: 992px) {
  .partners-list-wrapper.w-dyn-list.partners-slider {
    width: calc(100% + 25px);
    max-width: none;
    margin-left: -25px;
  }

  .partners-list-wrapper.w-dyn-list.partners-slider
    .partners-slider-track
    > *:first-child {
    margin-left: 25px;
  }
}

/* ------------------------------------------------------------------ *
 * Cheesemaker gallery — thumbnail → big image fade
 * ------------------------------------------------------------------ */

.cheesemaker-gallery .collection-item {
  cursor: pointer;
}

.cheesemaker-gallery .big-image-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 991px) {
  .cheesemaker-gallery .big-image-stage {
    touch-action: pan-y;
    cursor: grab;
  }
}

.cheesemaker-gallery .big-image-stage > .big-image,
.cheesemaker-gallery .big-image-stage > .big-image-overlay,
.cheesemaker-gallery > .big-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cheesemaker-gallery .big-image-overlay {
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}

.cheesemaker-gallery .big-image-overlay.is-visible {
  opacity: 1;
}

/* ------------------------------------------------------------------ *
 * Cheesemaker profile — Webflow next/prev arrows
 * Same 26×26 size, 7px gap, and hover nudge as event-slider arrows.
 * ------------------------------------------------------------------ */

.cheesmaker-navigation .next-prev,
.cheesemaker-navigation .next-prev {
  display: flex;
  align-items: center;
  gap: 7px;
}

.cheesmaker-navigation .next-prev .prev,
.cheesmaker-navigation .next-prev .next,
.cheesemaker-navigation .next-prev .prev,
.cheesemaker-navigation .next-prev .next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  line-height: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.cheesmaker-navigation .next-prev .arrow,
.cheesemaker-navigation .next-prev .arrow {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.cheesmaker-navigation .next-prev .prev:active,
.cheesmaker-navigation .next-prev .prev.is-nudging,
.cheesemaker-navigation .next-prev .prev:active,
.cheesemaker-navigation .next-prev .prev.is-nudging {
  transform: translateX(-4px);
}

.cheesmaker-navigation .next-prev .next:active,
.cheesmaker-navigation .next-prev .next.is-nudging,
.cheesemaker-navigation .next-prev .next:active,
.cheesemaker-navigation .next-prev .next.is-nudging {
  transform: translateX(4px);
}

@media (hover: hover) and (pointer: fine) {
  .cheesmaker-navigation .next-prev .prev:hover,
  .cheesemaker-navigation .next-prev .prev:hover {
    transform: translateX(-4px);
  }

  .cheesmaker-navigation .next-prev .next:hover,
  .cheesemaker-navigation .next-prev .next:hover {
    transform: translateX(4px);
  }
}

.cheesmaker-navigation .next-prev .prev[aria-disabled="true"],
.cheesmaker-navigation .next-prev .next[aria-disabled="true"],
.cheesemaker-navigation .next-prev .prev[aria-disabled="true"],
.cheesemaker-navigation .next-prev .next[aria-disabled="true"] {
  opacity: 0.2;
  pointer-events: none;
  transform: none;
}

/* ------------------------------------------------------------------ *
 * Primary nav dropdowns
 * ------------------------------------------------------------------ */

/* Active top-level item — yellow rule under the label text (no layout shift). */
.primary-nav .nav-link.w--current:not(.dropdown) .nav-text {
  position: relative;
  display: inline-block;
}

.primary-nav .nav-link.w--current:not(.dropdown) .nav-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 2px;
  background-color: var(--yellow, #f3c11c);
  pointer-events: none;
}

/*
 * Webflow toggles display on `.w-dropdown-list`, which can't animate.
 * Keep the list in the layout with display:block and animate opacity /
 * visibility instead — open is fast, close is a touch slower.
 */
.primary-nav .dropdown-list.w-dropdown-list {
  display: block !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}

.primary-nav .dropdown-list.w-dropdown-list.w--open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

/* Sibling fade: hovered link stays full; others drop to 50%.
   Fast out (0.2s), slow back in (1s) — same pattern as sticky nav. */
.primary-nav .dropdown-wrapper .nav-link.dropdown {
  transition: opacity 1s ease;
}

.primary-nav .dropdown-wrapper:has(.nav-link.dropdown:hover)
  .nav-link.dropdown:not(:hover) {
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

/* ------------------------------------------------------------------ *
 * Mobile menu — slides in from the left (Menu button after 991px)
 * ------------------------------------------------------------------ */

.mobile-menu {
  display: block !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  z-index: 999;
  transform: translateX(-100%);
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.4s ease,
    visibility 0.4s ease;
}

.mobile-menu.is-open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

body.is-mobile-menu-open {
  overflow: hidden;
}

/* Keep the Menu / close control above the open panel. */
body.is-mobile-menu-open .mobile-menu-button-wrapper {
  position: relative;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}

/* Same close control as animal / schedule lightboxes. */
.mobile-menu-button-wrapper .button-2.is-menu-close,
.mobile-menu-button-wrapper a.is-menu-close,
.mobile-menu-button-wrapper button.is-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--white, #fff);
  color: var(--black, #000);
  line-height: 0;
  font-size: 0;
  text-indent: 0;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.25s ease;
}

.mobile-menu-button-wrapper .button-2.is-menu-close svg,
.mobile-menu-button-wrapper a.is-menu-close svg,
.mobile-menu-button-wrapper button.is-menu-close svg {
  display: block;
  flex-shrink: 0;
}

.mobile-menu-button-wrapper .button-2.is-menu-close:hover,
.mobile-menu-button-wrapper a.is-menu-close:hover,
.mobile-menu-button-wrapper button.is-menu-close:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Event detail: solid off-white header while `.event-hero` is stuck. */
header.header {
  transition: background-color 0.25s ease;
}

@media (min-width: 992px) {
  header.header.is-event-hero-stuck,
  header.header.is-event-hero-stuck .navbar {
    background-color: var(--off-white, #ececd7);
  }
}

/* ------------------------------------------------------------------ *
 * Toggle buttons (e.g. Sponsors / Volunteers tabs)
 * ------------------------------------------------------------------ */

.toggle-buttons .tab {
  text-decoration: none !important;
  transition: color 0.25s ease;
}

.toggle-buttons .tab:not(.active):not(.w--current):hover {
  color: #656769;
}

.toggle-buttons .tab > div {
  display: inline-block;
  text-decoration: none !important;
  --link-draw-thickness: clamp(1.5px, 0.055em, 2.5px);
  padding-bottom: calc(var(--link-draw-thickness) + 0.1em);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% var(--link-draw-thickness);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-size var(--link-draw-duration, 0.3s) ease;
}

.toggle-buttons .tab:not(.active):not(.w--current) > div {
  animation: none;
  background-size: 0% var(--link-draw-thickness);
}

.toggle-buttons .tab.active > div,
.toggle-buttons .tab.w--current > div {
  animation: link-draw-in var(--link-draw-duration, 0.3s) ease forwards;
}

/* Page toggles (hash tabs, e.g. New Member / Supporter) */
.page-toggles .tab {
  text-decoration: none !important;
  transition: color 0.25s ease;
}

.page-toggles .tab:not(.active):not(.w--current):hover {
  color: #656769;
}

.page-toggles .tab > div {
  display: inline-block;
  text-decoration: none !important;
  --link-draw-thickness: clamp(1.5px, 0.055em, 2.5px);
  padding-bottom: calc(var(--link-draw-thickness) + 0.1em);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% var(--link-draw-thickness);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-size var(--link-draw-duration, 0.3s) ease;
}

.page-toggles .tab:not(.active):not(.w--current) > div {
  animation: none;
  background-size: 0% var(--link-draw-thickness);
}

.page-toggles .tab.active > div,
.page-toggles .tab.w--current > div {
  animation: link-draw-in var(--link-draw-duration, 0.3s) ease forwards;
}

/* ------------------------------------------------------------------ *
 * Page toggles — hide inactive tab panels + swap animation
 * ------------------------------------------------------------------ */

.page-toggle-panel,
.sidebar-tab-panel {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

#this-years-attendees .sidebar-tab-panel {
  transition-duration: 0.15s;
}

.page-toggle-panel.is-hidden,
.sidebar-tab-panel.is-hidden {
  display: none !important;
}

.page-toggle-panel.is-leaving,
.sidebar-tab-panel.is-leaving {
  opacity: 0;
  transform: translateY(28px);
  pointer-events: none;
}

.page-toggle-panel.is-entering,
.sidebar-tab-panel.is-entering {
  opacity: 0;
  transform: translateY(28px);
  pointer-events: none;
  transition: none;
}

.page-toggle-panel.is-entered,
.sidebar-tab-panel.is-entered {
  opacity: 1;
  transform: translateY(0);
}

/* At least one viewport tall; sticky-content sits at the bottom. */
.bottom-left-height-adjust {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
}

.bottom-left-height-adjust .sticky-content {
  margin-top: auto;
}

/* ------------------------------------------------------------------ *
 * Community CTAs — Swiper only when overflowing
 * ------------------------------------------------------------------ */

.community-wrapper.community-wrapper--slider {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.community-wrapper.community-wrapper--slider .community-slider-viewport {
  overflow: hidden;
  width: 100%;
  min-width: 0;
}

/* Swiper owns spacing via spaceBetween (value read from CSS gap). */
.community-wrapper.community-wrapper--slider .swiper-wrapper {
  gap: 0;
  column-gap: 0;
  row-gap: 0;
  align-items: stretch;
  padding: 0 20px;
  box-sizing: content-box;
}

.community-wrapper.community-wrapper--slider .swiper-slide {
  box-sizing: border-box;
  width: auto;
  height: auto;
  flex-shrink: 0;
}

.community-wrapper.community-wrapper--slider .swiper-slide > .cta-image-link,
.community-wrapper.community-wrapper--slider .swiper-slide > .cta-color-block {
  height: 100%;
}

.community-wrapper.community-wrapper--slider .community-slider-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
  padding-right: 30px;
}

@media (max-width: 991px) {
  .community-wrapper {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ------------------------------------------------------------------ *
 * CTA links — draggable only when overflowing (no arrows)
 * ------------------------------------------------------------------ */

.cta-links.cta-links--slider {
  display: block;
  min-width: 0;
  /* Break into the section’s right gutter so overflowing pills peek past
     the content margin (same idea as supporting-events). */
  width: calc(100% + 25px);
  max-width: calc(100% + 25px);
}

.cta-links.cta-links--slider .cta-links-viewport {
  overflow: hidden;
  width: 100%;
  min-width: 0;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.cta-links.cta-links--slider .cta-links-viewport:active {
  cursor: grabbing;
}

.cta-links.cta-links--slider .cta-links-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  max-width: none;
  padding-top: 2px;
  will-change: transform;
}

.cta-links.cta-links--slider .cta-links-track > * {
  flex-shrink: 0;
}

@media (min-width: 992px) {
  .cta-links.cta-links--slider {
    margin-right: -25px;
  }
}

@media (max-width: 991px) {
  .cta-links.cta-links--slider,
  .get-in-touch .cta-links.cta-links--slider {
    width: calc(100% + 40px);
    max-width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
  }

  .cta-links.cta-links--slider .cta-links-track > *:first-child {
    margin-left: 20px;
  }

  .get-in-touch {
    overflow: visible;
  }
}

/* ------------------------------------------------------------------ *
 * Mobile years — draggable only when overflowing (no arrows)
 * ------------------------------------------------------------------ */

.mobile-years {
  min-width: 0;
  max-width: 100%;
  padding-left: 0 !important;
}

.mobile-years.mobile-years--slider {
  display: block;
}

.mobile-years.mobile-years--slider .mobile-years-viewport {
  overflow: hidden;
  width: 100%;
  min-width: 0;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.mobile-years.mobile-years--slider .mobile-years-viewport:active {
  cursor: grabbing;
}

.mobile-years.mobile-years--slider .mobile-years-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  max-width: none;
  margin-left: -20px;
  padding-bottom: 2px;
  box-sizing: content-box;
  will-change: transform;
}

.mobile-years.mobile-years--slider .mobile-years-track > * {
  flex-shrink: 0;
}

.mobile-years.mobile-years--slider .mobile-years-track > *:first-child {
  margin-left: 40px;
}

.mobile-years.mobile-years--slider .mobile-years-track > *:last-child {
  margin-right: 40px;
}

/* ------------------------------------------------------------------ *
 * Attendees mobile filters — draggable only when overflowing
 * ------------------------------------------------------------------ */

.filters.hide-desktop {
  min-width: 0;
  max-width: 100%;
}

.filters.hide-desktop.attendees-mobile-filters--slider {
  display: block;
}

.filters.hide-desktop.attendees-mobile-filters--slider > .w-dyn-list,
.filters.hide-desktop.attendees-mobile-filters--slider > .collection-list-wrapper-2 {
  display: none;
}

.filters.hide-desktop.attendees-mobile-filters--slider
  .attendees-mobile-filters-viewport {
  overflow: hidden;
  width: 100%;
  min-width: 0;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.filters.hide-desktop.attendees-mobile-filters--slider
  .attendees-mobile-filters-viewport:active {
  cursor: grabbing;
}

.filters.hide-desktop.attendees-mobile-filters--slider
  .attendees-mobile-filters-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  max-width: none;
  box-sizing: content-box;
  will-change: transform;
}

.filters.hide-desktop.attendees-mobile-filters--slider
  .attendees-mobile-filters-track > * {
  flex-shrink: 0;
}

.filters.hide-desktop.attendees-mobile-filters--slider
  .attendees-mobile-filters-track > *:last-child {
  margin-right: 20px;
}

@media (max-width: 991px) {
  .filters.hide-desktop.attendees-mobile-filters--slider {
    width: calc(100% + 40px);
    max-width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
  }

  .filters.hide-desktop.attendees-mobile-filters--slider
    .attendees-mobile-filters-track > *:first-child {
    margin-left: 20px;
  }
}