/* Jaxx's changes (Oct 2026). Loaded only when the Jaxx preview is on, or once it goes live. */

.cupp-preview-flag.is-jaxx { background: #f9c6d0; }

/* Homepage hero: no navy sweep as the page opens; the clips and photos simply appear. */
.cupp-jaxx .cupp-reel.is-js { background-color: transparent !important; }
.cupp-jaxx .cupp-reel.is-js .cupp-reel__panel { animation: none !important; clip-path: none !important; }

/* Contact page: social icons. */
.cupp-social { display: inline-flex; gap: 0.9rem; align-items: center; }
.cupp-social__link { display: inline-grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--wp--preset--color--navy); border-radius: 50%; color: var(--wp--preset--color--navy); transition: background-color .2s, color .2s; }
.cupp-social__link:hover, .cupp-social__link:focus-visible { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); }

/* Homepage "Brands we've worked with": eight logos glide past in a slow loop. */
.cupp-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); }
.cupp-marquee__track { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; width: max-content; animation: cupp-marquee 38s linear infinite; }
.cupp-marquee:hover .cupp-marquee__track { animation-play-state: paused; }
.cupp-marquee__track li { flex: none; padding: 0 clamp(1.75rem, 3.5vw, 3rem); }
.cupp-marquee__track img { display: block; height: clamp(1.6rem, 2.6vw, 2.3rem); width: auto; max-width: 10rem; object-fit: contain; opacity: 0.9; }
.cupp-marquee__track img[data-logo="Vita Coco"], .cupp-marquee__track img[data-logo="Little Moons"] { height: clamp(2.1rem, 3.4vw, 3rem); }
@keyframes cupp-marquee { to { transform: translateX(-50%); } }
@media (max-width: 600px) { .cupp-marquee__track { animation-duration: 28s; } .cupp-marquee__track li { padding: 0 1.25rem; } .cupp-marquee__track img { height: 1.5rem; max-width: 7rem; } }
/* Phones: a touch faster, and the logos never get squashed. */
.cupp-marquee__track { will-change: transform; }
.cupp-marquee__track img { flex-shrink: 0; }
/* Reduce-motion setting on: no automatic movement; swipe through the logos instead. */
@media (prefers-reduced-motion: reduce) {
	.cupp-marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.cupp-marquee::-webkit-scrollbar { display: none; }
	.cupp-marquee__track { animation: none; }
	.cupp-marquee__track .is-copy { display: none; }
}

/* About page: the same carousel, larger, under a navy rule. */
.cupp-marquee--large { margin-top: var(--wp--preset--spacing--40); border-top: 2px solid var(--wp--preset--color--navy); border-bottom: 1px solid var(--wp--preset--color--stone); padding: clamp(2.25rem, 4vw, 3.25rem) 0; }
.cupp-marquee--large .cupp-marquee__track { animation-duration: 45s; }
.cupp-marquee--large .cupp-marquee__track li { padding: 0 clamp(2.25rem, 4.5vw, 4rem); }
.cupp-marquee--large .cupp-marquee__track img { height: clamp(2.2rem, 3.6vw, 3.2rem); max-width: 13rem; }
.cupp-marquee--large .cupp-marquee__track img[data-logo="Vita Coco"], .cupp-marquee--large .cupp-marquee__track img[data-logo="Little Moons"] { height: clamp(2.8rem, 4.6vw, 4.2rem); }

/* Header: with six links the row no longer fits on tablets and narrow windows, so the
   menu button takes over below 1100px (WordPress only switches below 600px). */
@media (min-width: 600px) and (max-width: 1099px) {
	.cupp-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.cupp-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: .25s; }
@media (min-width: 600px) and (max-width: 1099px) {
	.cupp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { text-align: left; }
	.cupp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { justify-content: flex-start; align-items: flex-start; }
}