/* ============================================================
   UPPER REACH WINERY — SITE STYLES
   Migrated out of WPCode into this mu-plugin, Sept 2026.

   Source snippets:
     #2563 "Commerce 7 Carousel CSS"       -> sections 1 and 2
     #2416 "Header Nav Dropdown Animations
            & Commerce7 Widget Styling"    -> section 2 (subscribe only)

   The header/nav and Commerce7 header-widget rules from #2416 targeted
   the old Beaver Builder header (#main-nav, #desktop-com-assets,
   .fl-node-*). That header was replaced by the upper-reach-header
   mu-plugin, so those selectors no longer match anything on the site
   and were not carried across.
   ============================================================ */


/* ============================================================
   1. COMMERCE7 PRODUCT CAROUSEL
   Scoped to a .c7-carousel class on the BB row or column.
   ============================================================ */

/* Hide Commerce7's own collection title — the row supplies its own. */
.c7-carousel .collection-title {
	display: none !important;
}

/* Carousel wrapper */
.c7-carousel .c7-product-collection {
	position: relative;
	padding: 0 3rem;
	min-height: 0 !important;
}

/* Scrollable track — overrides Commerce7's grid */
.c7-carousel .c7-product-collection__product-list {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	gap: 1.5rem;
	padding-bottom: 1rem;
	align-items: flex-start !important;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.c7-carousel .c7-product-collection__product-list::-webkit-scrollbar {
	display: none;
}

/* Individual product card */
.c7-carousel .c7-product {
	flex: 0 0 200px !important;
	width: 200px !important;
	scroll-snap-align: start;
	display: flex !important;
	flex-direction: column !important;
	background: transparent !important;
	text-align: center;
}

/* Product image — a fixed box so every bottle is the same size.

   The bottle shots come out of Commerce7 at mixed aspect ratios
   (mostly 467x600, but some 424x600, 451x600 and one 600x600). Left
   to size by width alone they rendered at different heights, which is
   what made the row look like bottles of different sizes. Contain
   fitting them inside a fixed 260px box, aligned to a shared bottom
   baseline, makes them read as one set. */
.c7-carousel .c7-product__image {
	width: 100%;
	height: 260px;
	overflow: visible;
}

.c7-carousel .c7-product__image a,
.c7-carousel .c7-product__image picture {
	display: block;
	width: 100%;
	height: 100%;
}

.c7-carousel .c7-product__image img {
	display: block;
	width: 100%;
	height: 100% !important;
	max-height: none !important;
	object-fit: contain;
	object-position: center bottom;
	transition: transform 0.45s ease;
}

.c7-carousel .c7-product:hover .c7-product__image img {
	transform: scale(1.03);
}

/* Details (title only) */
.c7-carousel .c7-product__details {
	padding: 0.75rem 0.25rem 0 !important;
	width: 100% !important;
}

.c7-carousel .c7-product__title.c7-title {
	color: var(--fl-global-text);
	font-size: 15px;
	text-align: center;
	margin-bottom: 0;
}

.c7-carousel .c7-product__title.c7-title a {
	color: var(--fl-global-text);
	text-decoration: none;
}

.c7-carousel .c7-product__title.c7-title a:hover {
	color: var(--fl-global-light-green);
}

/* Hide price and add to cart inside the carousel */
.c7-carousel .c7-product .c7-form,
.c7-carousel .c7-product .c7-product__price,
.c7-carousel .c7-product .c7-price,
.c7-carousel .c7-product [class*="price"],
.c7-carousel .c7-product .c7-product__subtitle {
	display: none !important;
}

/* Carousel arrows (injected by ur-site.js) */
.c7-carousel .ur-carousel-btn {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	z-index: 10;
	background-color: var(--fl-global-light-green);
	border: none;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: opacity 0.2s ease;
	padding: 0;
}

.c7-carousel .ur-carousel-btn:hover {
	opacity: 0.8;
}

.c7-carousel .ur-carousel-btn svg {
	width: 1rem;
	height: 1rem;
	fill: #ffffff;
}

.c7-carousel .ur-carousel-btn--prev { left: 0; }
.c7-carousel .ur-carousel-btn--next { right: 0; }

@media (max-width: 768px) {

	.c7-carousel .c7-product-collection {
		padding: 0 0.5rem;
	}

	.c7-carousel .c7-product {
		flex: 0 0 160px !important;
		width: 160px !important;
	}

	.c7-carousel .c7-product__image {
		height: 210px;
	}

	.c7-carousel .ur-carousel-btn {
		display: none;
	}
}


/* ============================================================
   2. COMMERCE7 SUBSCRIBE WIDGET
   Footer email sign-up, sitting on the green footer.

   Commerce7 gives no placeholder setting, so ur-site.js copies each
   field's label text into the input's placeholder and then adds
   .ur-has-placeholders to the widget. The labels are only hidden once
   that class lands, so if the script ever fails the labels stay on
   screen — in white, which is legible on the footer. (They used to
   inherit --fl-global-text, near-black-on-green, which read as an
   orphaned red asterisk floating above each field.)
   ============================================================ */

.c7-subscribe input[type="text"],
.c7-subscribe input[type="email"] {
	background-color: rgba(255, 255, 255, 0.15) !important;
	border: 1px solid rgba(255, 255, 255, 0.35) !important;
	color: #ffffff !important;
	border-radius: 0 !important;
	padding: 10px 14px !important;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.c7-subscribe input::placeholder {
	color: rgba(255, 255, 255, 0.7) !important;
	opacity: 1;
	letter-spacing: 0.3px;
}

.c7-subscribe input:focus {
	outline: none !important;
	border-color: rgba(255, 255, 255, 0.65) !important;
	background-color: rgba(255, 255, 255, 0.25) !important;
	box-shadow: none !important;
}

/* Fallback only — see the note above. */
.c7-subscribe label {
	color: #ffffff;
}

.c7-subscribe .c7-required {
	color: #ffffff !important;
}

/*
 * Placeholders are in: hide the labels, but keep them in the
 * accessibility tree for screen readers rather than display:none.
 */
.c7-subscribe.ur-has-placeholders label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/*
 * Commerce7 gives the submit button a 29px top margin so it clears the
 * label sitting above each field. With the labels hidden that margin is
 * dead space and drops the button below the inputs, so it goes when the
 * labels do. Button and inputs are both 46px tall, so they line up.
 */
.c7-subscribe.ur-has-placeholders .c7-form__group > .c7-btn {
	margin-top: 0 !important;
}

.c7-subscribe .c7-btn--primary {
	background-color: var(--fl-global-light-green) !important;
	color: #ffffff !important;
	border: none !important;
	padding: 10px 24px !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	transition: opacity 0.2s ease !important;
	font-family: var(--fl-global-button-font-family, "Open Sans", sans-serif) !important;
	font-weight: 400 !important;
}

.c7-subscribe .c7-btn--primary:hover {
	opacity: 0.85 !important;
	background-color: var(--fl-global-light-green) !important;
}


/* ============================================================
   3. COMMERCE7 CUSTOM FORMS
   Scoped to a .ur-c7-form class on the Beaver Builder "Custom Form"
   module (Commerce7 category), so nothing here touches the cart,
   checkout or account forms.

   Modifiers, added alongside .ur-c7-form:
     .ur-c7-form--card  white bordered card, for cream/peach bands
     .ur-c7-form--2col  two-column field grid on desktop

   Commerce7 renders each field as .c7-form__field inside a <fieldset>
   with a screen-reader-only <legend>. (.c7-form__group is the SUBSCRIBE
   widget's class — both are handled below.)

   Added Sept 2026 for the wedding enquiry form on Wedding Ceremonies &
   Receptions (1423). Reuse the class on any Commerce7 custom form.
   ============================================================ */

.ur-c7-form .c7-form,
.ur-c7-form form {
	max-width: 820px;
	margin: 0 auto;
}

.ur-c7-form fieldset {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}

.ur-c7-form label {
	display: block;
	color: var(--fl-global-text);
	font-size: 13px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.ur-c7-form .c7-required {
	color: var(--fl-global-light-green) !important;
}

.ur-c7-form input[type="text"],
.ur-c7-form input[type="email"],
.ur-c7-form input[type="tel"],
.ur-c7-form input[type="number"],
.ur-c7-form input[type="date"],
.ur-c7-form select,
.ur-c7-form textarea {
	width: 100%;
	background-color: #ffffff !important;
	border: 1px solid var(--fl-global-peach) !important;
	border-radius: 0 !important;
	color: var(--fl-global-text) !important;
	padding: 12px 14px !important;
	box-shadow: none !important;
	transition: border-color 0.2s ease;
}

.ur-c7-form textarea {
	min-height: 140px;
}

.ur-c7-form input:focus,
.ur-c7-form select:focus,
.ur-c7-form textarea:focus {
	outline: none !important;
	border-color: var(--fl-global-light-green) !important;
	box-shadow: none !important;
}

.ur-c7-form input::placeholder,
.ur-c7-form textarea::placeholder {
	color: var(--fl-global-muted);
	opacity: 1;
}

.ur-c7-form .c7-form__group,
.ur-c7-form .c7-form__field {
	margin-bottom: 18px;
}

.ur-c7-form .c7-btn,
.ur-c7-form .c7-btn--primary,
.ur-c7-form button[type="submit"] {
	background-color: var(--fl-global-dark-green) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 14px 34px !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease !important;
}

.ur-c7-form .c7-btn:hover,
.ur-c7-form .c7-btn--primary:hover,
.ur-c7-form button[type="submit"]:hover {
	background-color: var(--fl-global-light-green) !important;
	opacity: 1 !important;
}

@media (max-width: 768px) {

	.ur-c7-form .c7-btn,
	.ur-c7-form .c7-btn--primary,
	.ur-c7-form button[type="submit"] {
		width: 100%;
	}
}

/*
 * The custom form usually sits on a cream or peach band, so give it a
 * white card of its own the way the enquiry sections do.
 */
.ur-c7-form--card .c7-form,
.ur-c7-form--card form {
	background-color: #ffffff;
	border: 1px solid var(--fl-global-peach);
	padding: 35px;
}

@media (max-width: 768px) {

	.ur-c7-form--card .c7-form,
	.ur-c7-form--card form {
		padding: 22px;
	}
}

/*
 * Two-column field grid. Short fields pair up; anything that is not a
 * plain field (the sr-only legend, the submit row) and any field
 * holding a textarea span the full width.
 */
.ur-c7-form--2col .c7-form,
.ur-c7-form--2col form {
	max-width: none;
}

.ur-c7-form--2col fieldset {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 20px;
}

.ur-c7-form--2col fieldset > legend,
.ur-c7-form--2col fieldset > :not(.c7-form__field) {
	grid-column: 1 / -1;
}

.ur-c7-form--2col .c7-form__field:has(textarea) {
	grid-column: 1 / -1;
}

@media (max-width: 768px) {

	.ur-c7-form--2col fieldset {
		grid-template-columns: 1fr;
	}
}


/* ============================================================
   4. COMMERCE7 CLUB JOIN BUTTONS
   Scoped to a .ur-c7-join class on the Beaver Builder "Club Join"
   module (Commerce7 category). Commerce7 injects the markup
   client-side as <a class="c7-btn c7-btn--primary"> inside
   .c7-club-join-button, so the anchor is what gets styled — !important
   throughout because Commerce7's own sheet loads after this one.

   Added Sept 2026 for the Cellar Club page (440). Reuse the class on
   any page that offers a club sign-up.
   ============================================================ */

.ur-c7-join {
	margin-top: 20px;
}

.ur-c7-join .c7-club-join-button {
	text-align: center;
}

.ur-c7-join .c7-club-join-button a,
.ur-c7-join .c7-club-join-button button,
.ur-c7-join .c7-club-join-button .c7-btn,
.ur-c7-join .c7-club-join-button .c7-btn--primary {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	background-color: var(--fl-global-dark-green) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 14px 20px !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	letter-spacing: 1px !important;
	line-height: 1.2 !important;
	text-transform: uppercase !important;
	text-align: center !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease !important;
}

.ur-c7-join .c7-club-join-button a:hover,
.ur-c7-join .c7-club-join-button button:hover,
.ur-c7-join .c7-club-join-button .c7-btn:hover,
.ur-c7-join .c7-club-join-button .c7-btn--primary:hover {
	background-color: var(--fl-global-light-green) !important;
	color: #ffffff !important;
	opacity: 1 !important;
}


/* ============================================================
   5. CARD ROWS
   Add .ur-cards to a Beaver Builder ROW whose columns each hold a
   nested single-column "card" (a coloured column with padding). The
   cards then stretch to a common height and the last module in each
   card — usually the button — is pinned to the bottom so they line up.

   Beaver Builder column groups are display:block by default, so the
   flex chain has to be declared the whole way down.

   Added Sept 2026 for the four club cards on the Cellar Club page.
   ============================================================ */

@media (min-width: 769px) {

	.ur-cards .fl-row-content > .fl-col-group {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
	}

	.ur-cards .fl-row-content > .fl-col-group > .fl-col {
		display: flex;
		float: none;
	}

	.ur-cards .fl-row-content > .fl-col-group > .fl-col > .fl-col-content {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.ur-cards .fl-col-group-nested {
		display: flex;
		flex: 1 1 auto;
		width: 100%;
	}

	.ur-cards .fl-col-group-nested > .fl-col {
		display: flex;
		float: none;
		width: 100%;
	}

	.ur-cards .fl-col-group-nested > .fl-col > .fl-col-content {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	/* Push the last module (the join button) to the foot of the card. */
	.ur-cards .fl-col-group-nested > .fl-col > .fl-col-content > .fl-module:last-child {
		margin-top: auto;
	}
}


/* ============================================================
   6. EMBEDDED MAP
   Add .ur-map to the HTML module holding a Google Maps iframe. The
   raw embed comes out at its hard-coded 600x450 and sits in the page
   like a screenshot; this makes it a proper full-width band.

   Note the WP Staq lazy-loader rewrites the iframe src — that is
   normal and it swaps back in on scroll (see the booking pop-up note).

   Added Sept 2026 for Contact (107).
   ============================================================ */

.ur-map,
.ur-map .fl-html {
	line-height: 0;
}

.ur-map iframe {
	display: block;
	width: 100% !important;
	height: 520px !important;
	max-width: none !important;
	border: 0 !important;
	filter: saturate(0.9);
}

@media (max-width: 1024px) {

	.ur-map iframe {
		height: 420px !important;
	}
}

@media (max-width: 768px) {

	.ur-map iframe {
		height: 320px !important;
	}
}


/* ============================================================
   7. MENU PAGE "BOOK HERE" LINK
   Add .ur-menu-book to a link inside the green information strip at
   the top of a menu page. The href is #book, which opens the
   site-wide booking pop-up (see the upper-reach-booking-popup
   mu-plugin) — no phone number, no page change.

   Added Sept 2026 on Lunch Menu (1401) and Midweek Lunch Special
   (1409) at Laura's request.
   ============================================================ */

.ur-menu-book {
	display: inline-block;
	margin-top: 6px;
	padding: 10px 26px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	color: #ffffff;
	font-family: var(--fl-global-button-font-family, "Open Sans", sans-serif);
	font-size: 12px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.ur-menu-book:hover,
.ur-menu-book:focus-visible {
	background-color: var(--fl-global-light-green);
	border-color: var(--fl-global-light-green);
	color: #ffffff;
	text-decoration: none;
}


/* ============================================================
   8. QUOTE CARDS
   Add .ur-quote-cards to a PowerPack Testimonials module. Without it
   the quotes float in open space and read as loose paragraphs; this
   boxes each one the way the benefit cards on the same page are
   boxed, and stretches them to a common height.

   Added Sept 2026 for "Happy Club Members" on the Cellar Club page
   (440) at Laura's request.
   ============================================================ */

.ur-quote-cards .pp-testimonials {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px;
	align-items: stretch;
	max-width: 900px;
	margin: 0 auto;
}

.ur-quote-cards .pp-testimonial {
	height: 100%;
	margin: 0;
	padding: 34px 30px;
	background-color: var(--fl-global-cream, #FEF7ED);
	border: 1px solid var(--fl-global-peach, #E9E2D8);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ur-quote-cards .pp-testimonials-content p {
	margin: 0;
	font-size: 16px;
	line-height: 1.7;
}

.ur-quote-cards .pp-title-wrapper {
	margin-top: 16px;
}

.ur-quote-cards .pp-testimonials-name {
	font-style: italic;
	color: var(--fl-global-light-green, #7A8858);
}

@media (max-width: 768px) {

	.ur-quote-cards .pp-testimonials {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.ur-quote-cards .pp-testimonial {
		padding: 26px 22px;
	}
}