/*
 * WordPress-specific additions. The three Webflow stylesheets are verbatim
 * copies of the export — everything the conversion needs on top lives here.
 */

/* Honeypot field for the custom form handlers */
.velvet-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Flavors-page tag filter (the export shipped the bar with no behavior) */
.col-flavor.is-filtered-out {
	display: none;
}

/* Flavors tagged "Featured Flavor" swap the card's vanilla background for the
   palette's peach. Applied from the shared card template, so it looks the
   same in the Flavors grid and in the homepage slider — where only genuinely
   tagged flavors are highlighted, even though the section is titled
   "Featured flavors". */
.inside-flavor.is-featured {
	background-color: var(--peach);
}

/* Allergens "i" badge: the export gives it a peach fill with no outline, which
   disappears against the peach background of a Featured Flavor card. A vanilla
   ring keeps it readable on both card colors. (Global border-box means the 1px
   does not change the circle's 1.8rem footprint.) */
.i-tag {
	border: 1px solid var(--vanilla);
}

/* Real <button> submits styled like the export's fake anchor buttons.
   Webflow's .w-button + .main-btn rules already cover border, background,
   padding, cursor, and font family — the only browser default they don't
   override is the fixed button font-size, which must inherit the fluid rem
   size like the anchors do. (Do not add border/font-family resets here:
   button.main-btn outranks .main-btn and would strip the design's brown
   border and Br font.) */
button.main-btn {
	font-size: inherit;
	appearance: none;
	-webkit-appearance: none;
}

/* Legal / generic pages: the export shipped these with empty bodies, so this
   wrapper is new. It follows the site's type scale and palette. */
.section-legal {
	padding: 12rem 5rem 6rem;
	min-height: 60vh;
}
.container-legal {
	max-width: 50rem;
	margin: 0 auto;
}
.container-legal h1 {
	font-family: Code, sans-serif;
	color: var(--brown);
	font-size: 3rem;
	margin-bottom: 2rem;
}
.container-legal h2 {
	font-family: Code, sans-serif;
	color: var(--brown);
	font-size: 1.6rem;
	margin: 2rem 0 0.75rem;
}
.container-legal p,
.container-legal li {
	font-family: Br, sans-serif;
	font-weight: 300;
	line-height: 1.6;
	margin-bottom: 1rem;
}
.container-legal ul,
.container-legal ol {
	padding-left: 1.5rem;
	margin-bottom: 1rem;
}
.container-legal a {
	color: var(--brown);
}
@media screen and (max-width: 767px) {
	.section-legal {
		padding: 9rem 2rem 4rem;
	}
}

/* Social feed tiles: live Instagram posts arrive in mixed aspect ratios
   (square, portrait, landscape). Normalize every tile to the design's
   640x800 (4:5) ratio and center-crop, so the 4-up row is always symmetric.
   Also stabilizes layout before lazy images load. */
.feed-elements .img-social {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center;
}

/* Home page: keep the sticky footer invisible for the first second after
   load, then fade it in — prevents it flashing behind the hero while the
   page is still laying out. (.home = WordPress body class for the front
   page; pure CSS so it works even if a script fails.) */
.home .section-footer {
	animation: velvetFooterIn 0.4s ease 1s both;
}
@keyframes velvetFooterIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Keep the fluid root font-size in charge even with an admin bar */
html {
	margin-top: 0 !important;
}